From e4ce95ff4e457ca9e6b71651a1accf2aedce8925 Mon Sep 17 00:00:00 2001 From: ssi02014 Date: Tue, 14 Jan 2025 16:14:51 +0000 Subject: [PATCH] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20@=20modern-a?= =?UTF-8?q?gile-team/modern-kit@afa85a18d0e8f7ad9559d779c56cd54fa7038c64?= =?UTF-8?q?=20=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 404.html | 4 ++-- assets/js/0468e7c7.54a90a5f.js | 1 - assets/js/0468e7c7.69aa168d.js | 1 + assets/js/069bf6ce.37c76340.js | 1 - assets/js/069bf6ce.5a1773f5.js | 1 + assets/js/087cca41.64dcef64.js | 1 - assets/js/087cca41.8c16c0a3.js | 1 + assets/js/0ed4549e.bb34a41a.js | 1 - assets/js/0ed4549e.f00dd43e.js | 1 + assets/js/11738f66.0f506a6b.js | 1 + assets/js/11738f66.1ad6e8ce.js | 1 - assets/js/1c2388cf.a9138072.js | 1 - assets/js/1c2388cf.d917f60e.js | 1 + assets/js/1ebcacad.43280e43.js | 1 + assets/js/1ebcacad.ece260fc.js | 1 - assets/js/225c6dfe.4dfdc544.js | 1 + assets/js/225c6dfe.7b9830ad.js | 1 - assets/js/24c74d07.b0f51709.js | 1 - assets/js/24c74d07.f02220dd.js | 1 + assets/js/295f1714.2f90ba2f.js | 1 - assets/js/295f1714.8387b2be.js | 1 + assets/js/308b5f81.80461474.js | 1 + assets/js/308b5f81.db118fd1.js | 1 - assets/js/36bebd15.56b57b2c.js | 1 + assets/js/36bebd15.da7fd56a.js | 1 - assets/js/3bdef6d7.4c300635.js | 1 - assets/js/3bdef6d7.85d88013.js | 1 + assets/js/3e5d9272.5b90e6a3.js | 1 + assets/js/3e5d9272.fe03afa2.js | 1 - assets/js/42a77533.0d5c5bad.js | 1 - assets/js/42a77533.4dc4c694.js | 1 + assets/js/54102c04.35ce4b40.js | 1 - assets/js/54102c04.d0fd9f95.js | 1 + assets/js/5d610355.79411896.js | 1 + assets/js/5d610355.9c05908f.js | 1 - assets/js/61a35b61.4c79d1bb.js | 1 - assets/js/61a35b61.53efbb03.js | 1 + assets/js/63f47a7c.23b9a51e.js | 1 + assets/js/63f47a7c.f5e54242.js | 1 - assets/js/67c089fb.04be0bd6.js | 1 - assets/js/67c089fb.835c1131.js | 1 + assets/js/67c0cc0e.49a8fe54.js | 1 + assets/js/67c0cc0e.f6b6fd72.js | 1 - assets/js/6dde689d.a296f296.js | 1 + assets/js/6dde689d.fedb5911.js | 1 - assets/js/771be322.5aeede07.js | 1 - assets/js/771be322.c8085557.js | 1 + assets/js/78bcb238.70a9a9dd.js | 1 + assets/js/78bcb238.ec590572.js | 1 - assets/js/7b61a3fa.7e7d5f1c.js | 1 + assets/js/7b61a3fa.962828ef.js | 1 - assets/js/{7b7be0e1.5bac0365.js => 7b7be0e1.041efcab.js} | 2 +- assets/js/7da35ef8.5f20f679.js | 1 + assets/js/7da35ef8.af433888.js | 1 - assets/js/8053496e.1a9e1459.js | 2 ++ ...0d0d27.js.LICENSE.txt => 8053496e.1a9e1459.js.LICENSE.txt} | 0 assets/js/8053496e.52db90d6.js | 1 - assets/js/8079f804.405bc534.js | 1 - assets/js/8079f804.846a7d09.js | 1 + assets/js/83b4ba0b.337ac227.js | 1 + assets/js/83b4ba0b.925129e0.js | 1 - assets/js/8a16b8e9.81b7a2bd.js | 1 - assets/js/8a16b8e9.b6ef01ce.js | 1 + assets/js/932ca9ec.70922df5.js | 1 + assets/js/932ca9ec.db37b8df.js | 1 - assets/js/9358.cf0d0d27.js | 2 -- assets/js/9602.e7bd29f4.js | 1 + assets/js/9be130a4.4d76744e.js | 1 + assets/js/9be130a4.7890da22.js | 1 - assets/js/a45fe377.41d28a11.js | 1 + assets/js/a45fe377.4da78159.js | 1 - assets/js/aa089504.030a7252.js | 1 - assets/js/aa089504.c58fc7eb.js | 1 + assets/js/ab7af1d3.d2f1107c.js | 1 - assets/js/ab7af1d3.e6628944.js | 1 + assets/js/ad8813a3.4fede0e4.js | 1 - assets/js/ad8813a3.b73e934f.js | 1 + assets/js/af3233c2.b6ff46a8.js | 1 - assets/js/af3233c2.e18844a5.js | 1 + assets/js/b35b1276.32da6ca7.js | 1 - assets/js/b35b1276.f4904be4.js | 1 + assets/js/b3bf5b56.15e7497a.js | 1 + assets/js/b3bf5b56.3de72384.js | 1 - assets/js/b506dfd1.75ad62c0.js | 1 - assets/js/b506dfd1.a3ce067b.js | 1 + assets/js/b743ea75.67047af2.js | 1 + assets/js/b743ea75.ef78621a.js | 1 - assets/js/b862475b.723acd2d.js | 1 + assets/js/b862475b.bee34558.js | 1 - assets/js/bf0dbc92.22073d5b.js | 1 + assets/js/bf0dbc92.786703fe.js | 1 - assets/js/c060fdc4.e3c170be.js | 1 - assets/js/c060fdc4.f6ac9307.js | 1 + assets/js/c55bf516.d54c1b72.js | 1 - assets/js/c55bf516.dc1b8151.js | 1 + assets/js/c55c9b0f.2c631495.js | 1 - assets/js/c55c9b0f.b843329f.js | 1 + assets/js/cb3f6f96.467289bb.js | 1 + assets/js/cb3f6f96.981f1a69.js | 1 - assets/js/cc0ca23c.3f2a29ee.js | 1 + assets/js/cc0ca23c.6e15d121.js | 1 - assets/js/e3446db6.0af37d96.js | 1 - assets/js/e3446db6.60006c6a.js | 1 + assets/js/eb0f0f4b.a2aa0ab8.js | 1 + assets/js/eb0f0f4b.a3f4489a.js | 1 - assets/js/{eea24eaa.a4df495e.js => eea24eaa.4dae6214.js} | 2 +- assets/js/f5098664.1709d859.js | 1 + assets/js/f5098664.d9107365.js | 1 - assets/js/fbe6690a.6440acf8.js | 1 + assets/js/fbe6690a.828a8885.js | 1 - assets/js/main.1e9414e3.js | 2 ++ ...n.ec90acce.js.LICENSE.txt => main.1e9414e3.js.LICENSE.txt} | 0 assets/js/main.ec90acce.js | 2 -- .../js/{runtime~main.cb3f84d6.js => runtime~main.a3be8a28.js} | 2 +- docs/introduce/index.html | 4 ++-- docs/react/components/AspectRatio/index.html | 4 ++-- docs/react/components/ClientGate/index.html | 4 ++-- docs/react/components/DebounceHandler/index.html | 4 ++-- docs/react/components/FallbackLazyImage/index.html | 4 ++-- docs/react/components/IfElse/index.html | 4 ++-- docs/react/components/InView/index.html | 4 ++-- docs/react/components/InfiniteScroll/index.html | 4 ++-- docs/react/components/Iterator/index.html | 4 ++-- docs/react/components/LazyImage/index.html | 4 ++-- docs/react/components/Mounted/index.html | 4 ++-- docs/react/components/OutsidePointerDownHandler/index.html | 4 ++-- docs/react/components/Portal/index.html | 4 ++-- docs/react/components/SeparatedIterator/index.html | 4 ++-- docs/react/components/Slot/index.html | 4 ++-- docs/react/components/SwithCase/index.html | 4 ++-- docs/react/components/When/index.html | 4 ++-- docs/react/hooks/useAsyncEffect/index.html | 4 ++-- docs/react/hooks/useBeforeUnload/index.html | 4 ++-- docs/react/hooks/useBlockMultipleAsyncCalls/index.html | 4 ++-- docs/react/hooks/useClipboard/index.html | 4 ++-- docs/react/hooks/useColorScheme/index.html | 4 ++-- docs/react/hooks/useCounter/index.html | 4 ++-- docs/react/hooks/useCycleList/index.html | 4 ++-- docs/react/hooks/useDebounce/index.html | 4 ++-- docs/react/hooks/useDebouncedInputValue/index.html | 4 ++-- docs/react/hooks/useDebouncedState/index.html | 4 ++-- docs/react/hooks/useDependencyTimeout/index.html | 4 ++-- docs/react/hooks/useDocumentTitle/index.html | 4 ++-- docs/react/hooks/useEventListener/index.html | 4 ++-- docs/react/hooks/useFileReader/index.html | 4 ++-- docs/react/hooks/useFocus/index.html | 4 ++-- docs/react/hooks/useForceUpdate/index.html | 4 ++-- docs/react/hooks/useHover/index.html | 4 ++-- docs/react/hooks/useImageStatus/index.html | 4 ++-- docs/react/hooks/useIntersectionObserver/index.html | 4 ++-- docs/react/hooks/useInterval/index.html | 4 ++-- docs/react/hooks/useIsMounted/index.html | 4 ++-- docs/react/hooks/useIsomorphicLayoutEffect/index.html | 4 ++-- docs/react/hooks/useKeyDown/index.html | 4 ++-- docs/react/hooks/useLocalStorage/index.html | 4 ++-- docs/react/hooks/useMediaQuery/index.html | 4 ++-- docs/react/hooks/useMergeRefs/index.html | 4 ++-- docs/react/hooks/useMouse/index.html | 4 ++-- docs/react/hooks/useNetwork/index.html | 4 ++-- docs/react/hooks/useOutsidePointerDown/index.html | 4 ++-- docs/react/hooks/usePreferredColorScheme/index.html | 4 ++-- docs/react/hooks/usePreservedCallback/index.html | 4 ++-- docs/react/hooks/usePreservedState/index.html | 4 ++-- docs/react/hooks/usePrevious/index.html | 4 ++-- docs/react/hooks/useResizeObserver/index.html | 4 ++-- docs/react/hooks/useScrollLock/index.html | 4 ++-- docs/react/hooks/useScrollTo/index.html | 4 ++-- docs/react/hooks/useSessionStorage/index.html | 4 ++-- docs/react/hooks/useStep/index.html | 4 ++-- docs/react/hooks/useStepState/index.html | 4 ++-- docs/react/hooks/useThrottle/index.html | 4 ++-- docs/react/hooks/useTimeout/index.html | 4 ++-- docs/react/hooks/useToggle/index.html | 4 ++-- docs/react/hooks/useToggleState/index.html | 4 ++-- docs/react/hooks/useUnmount/index.html | 4 ++-- docs/react/hooks/useUserAgent/index.html | 4 ++-- docs/react/hooks/useVhProperty/index.html | 4 ++-- docs/react/hooks/useVisibilityChange/index.html | 4 ++-- docs/react/hooks/useWindowSize/index.html | 4 ++-- docs/utils/array/at/index.html | 4 ++-- docs/utils/array/chunk/index.html | 4 ++-- docs/utils/array/compact/index.html | 4 ++-- docs/utils/array/contains/index.html | 4 ++-- docs/utils/array/countOccurrencesInArray/index.html | 4 ++-- docs/utils/array/difference/index.html | 4 ++-- docs/utils/array/drop/index.html | 4 ++-- docs/utils/array/excludeElements/index.html | 4 ++-- docs/utils/array/fill/index.html | 4 ++-- docs/utils/array/flatMap/index.html | 4 ++-- docs/utils/array/flatMapDeep/index.html | 4 ++-- docs/utils/array/flatten/index.html | 4 ++-- docs/utils/array/flattenDeep/index.html | 4 ++-- docs/utils/array/flattenDeepThenMap/index.html | 4 ++-- docs/utils/array/forEachRight/index.html | 4 ++-- docs/utils/array/groupBy/index.html | 4 ++-- docs/utils/array/intersection/index.html | 4 ++-- docs/utils/array/mapRight/index.html | 4 ++-- docs/utils/array/partition/index.html | 4 ++-- docs/utils/array/shuffle/index.html | 4 ++-- docs/utils/array/swap/index.html | 4 ++-- docs/utils/array/take/index.html | 4 ++-- docs/utils/array/union/index.html | 4 ++-- docs/utils/array/uniq/index.html | 4 ++-- docs/utils/array/xor/index.html | 4 ++-- docs/utils/clipboard/copyClipboardImage/index.html | 4 ++-- docs/utils/clipboard/copyClipboardText/index.html | 4 ++-- docs/utils/clipboard/copyFallbackClipboardText/index.html | 4 ++-- docs/utils/clipboard/readClipboardContents/index.html | 4 ++-- docs/utils/clipboard/readClipboardText/index.html | 4 ++-- docs/utils/common/abRandom/index.html | 4 ++-- docs/utils/common/asyncNoop/index.html | 4 ++-- docs/utils/common/cloneDeep/index.html | 4 ++-- docs/utils/common/delay/index.html | 4 ++-- docs/utils/common/getUniqId/index.html | 4 ++-- docs/utils/common/getUniqTime/index.html | 4 ++-- docs/utils/common/getViewportSize/index.html | 4 ++-- docs/utils/common/hexToRgba/index.html | 4 ++-- docs/utils/common/identity/index.html | 4 ++-- docs/utils/common/noop/index.html | 4 ++-- docs/utils/common/once/index.html | 4 ++-- docs/utils/common/parseJSON/index.html | 4 ++-- docs/utils/common/pickFalsy/index.html | 4 ++-- docs/utils/common/size/index.html | 4 ++-- docs/utils/common/wrapInArray/index.html | 4 ++-- docs/utils/date/getAge/index.html | 4 ++-- docs/utils/date/getDDay/index.html | 4 ++-- docs/utils/date/isAfterDate/index.html | 4 ++-- docs/utils/date/isBeforeDate/index.html | 4 ++-- docs/utils/date/isDateInRange/index.html | 4 ++-- docs/utils/date/isUnderAge/index.html | 4 ++-- docs/utils/device/getOS/index.html | 4 ++-- docs/utils/device/isClient/index.html | 4 ++-- docs/utils/device/isMobile/index.html | 4 ++-- docs/utils/device/isSever/index.html | 4 ++-- docs/utils/file/convertImageToBase64/index.html | 4 ++-- docs/utils/file/convertImageToBlob/index.html | 4 ++-- docs/utils/file/getBlobFromUrl/index.html | 4 ++-- docs/utils/file/getMIMEType/index.html | 4 ++-- docs/utils/file/getMIMETypeFromFile/index.html | 4 ++-- docs/utils/file/getMIMETypeFromResponse/index.html | 4 ++-- docs/utils/file/getMIMETypeFromUrl/index.html | 4 ++-- docs/utils/formatter/formatNumberWithCommas/index.html | 4 ++-- docs/utils/formatter/formatNumberWithUnits/index.html | 4 ++-- docs/utils/formatter/formatPhoneNumber/index.html | 4 ++-- docs/utils/formatter/formatValueWithSymbol/index.html | 4 ++-- docs/utils/math/average/index.html | 4 ++-- docs/utils/math/clamp/index.html | 4 ++-- docs/utils/math/max/index.html | 4 ++-- docs/utils/math/min/index.html | 4 ++-- docs/utils/math/range/index.html | 4 ++-- docs/utils/math/sum/index.html | 4 ++-- docs/utils/object/deleteEmptyProperties/index.html | 4 ++-- docs/utils/object/findKey/index.html | 4 ++-- docs/utils/object/findLastKey/index.html | 4 ++-- docs/utils/object/invert/index.html | 4 ++-- docs/utils/object/mapKeys/index.html | 4 ++-- docs/utils/object/mapValues/index.html | 4 ++-- docs/utils/object/merge/index.html | 4 ++-- docs/utils/object/objectEntries/index.html | 4 ++-- docs/utils/object/objectKeys/index.html | 4 ++-- docs/utils/object/objectValues/index.html | 4 ++-- docs/utils/object/omit/index.html | 4 ++-- docs/utils/object/omitBy/index.html | 4 ++-- docs/utils/object/pick/index.html | 4 ++-- docs/utils/object/pickBy/index.html | 4 ++-- docs/utils/string/countSubstringOccurrences/index.html | 4 ++-- docs/utils/string/extractLetters/index.html | 4 ++-- docs/utils/string/extractNumber/index.html | 4 ++-- docs/utils/string/removeSpecialCharacters/index.html | 4 ++-- docs/utils/string/repeatCharacters/index.html | 4 ++-- docs/utils/string/reverseString/index.html | 4 ++-- docs/utils/string/serialize/index.html | 4 ++-- docs/utils/style/formatSizeStyleValue/index.html | 4 ++-- docs/utils/style/rem/index.html | 4 ++-- docs/utils/validator/hasProperty/index.html | 4 ++-- docs/utils/validator/isArray/index.html | 4 ++-- docs/utils/validator/isBoolean/index.html | 4 ++-- docs/utils/validator/isDate/index.html | 4 ++-- docs/utils/validator/isEqual/index.html | 4 ++-- docs/utils/validator/isFloat/index.html | 4 ++-- docs/utils/validator/isFuntion/index.html | 4 ++-- docs/utils/validator/isInRange/index.html | 4 ++-- docs/utils/validator/isMIMEType/index.html | 4 ++-- docs/utils/validator/isNil/index.html | 4 ++-- docs/utils/validator/isNotNil/index.html | 4 ++-- docs/utils/validator/isNumber/index.html | 4 ++-- docs/utils/validator/isNumericString/index.html | 4 ++-- docs/utils/validator/isPlainObject/index.html | 4 ++-- docs/utils/validator/isPrimitive/index.html | 4 ++-- docs/utils/validator/isPromise/index.html | 4 ++-- docs/utils/validator/isReference/index.html | 4 ++-- docs/utils/validator/isString/index.html | 4 ++-- docs/utils/validator/isSubset/index.html | 4 ++-- docs/utils/validator/isValidEmail/index.html | 4 ++-- docs/utils/validator/isValidPassword/index.html | 4 ++-- docs/utils/validator/isValidPhoneNumber/index.html | 4 ++-- docs/utils/validator/isWindow/index.html | 4 ++-- index.html | 4 ++-- 298 files changed, 429 insertions(+), 429 deletions(-) delete mode 100644 assets/js/0468e7c7.54a90a5f.js create mode 100644 assets/js/0468e7c7.69aa168d.js delete mode 100644 assets/js/069bf6ce.37c76340.js create mode 100644 assets/js/069bf6ce.5a1773f5.js delete mode 100644 assets/js/087cca41.64dcef64.js create mode 100644 assets/js/087cca41.8c16c0a3.js delete mode 100644 assets/js/0ed4549e.bb34a41a.js create mode 100644 assets/js/0ed4549e.f00dd43e.js create mode 100644 assets/js/11738f66.0f506a6b.js delete mode 100644 assets/js/11738f66.1ad6e8ce.js delete mode 100644 assets/js/1c2388cf.a9138072.js create mode 100644 assets/js/1c2388cf.d917f60e.js create mode 100644 assets/js/1ebcacad.43280e43.js delete mode 100644 assets/js/1ebcacad.ece260fc.js create mode 100644 assets/js/225c6dfe.4dfdc544.js delete mode 100644 assets/js/225c6dfe.7b9830ad.js delete mode 100644 assets/js/24c74d07.b0f51709.js create mode 100644 assets/js/24c74d07.f02220dd.js delete mode 100644 assets/js/295f1714.2f90ba2f.js create mode 100644 assets/js/295f1714.8387b2be.js create mode 100644 assets/js/308b5f81.80461474.js delete mode 100644 assets/js/308b5f81.db118fd1.js create mode 100644 assets/js/36bebd15.56b57b2c.js delete mode 100644 assets/js/36bebd15.da7fd56a.js delete mode 100644 assets/js/3bdef6d7.4c300635.js create mode 100644 assets/js/3bdef6d7.85d88013.js create mode 100644 assets/js/3e5d9272.5b90e6a3.js delete mode 100644 assets/js/3e5d9272.fe03afa2.js delete mode 100644 assets/js/42a77533.0d5c5bad.js create mode 100644 assets/js/42a77533.4dc4c694.js delete mode 100644 assets/js/54102c04.35ce4b40.js create mode 100644 assets/js/54102c04.d0fd9f95.js create mode 100644 assets/js/5d610355.79411896.js delete mode 100644 assets/js/5d610355.9c05908f.js delete mode 100644 assets/js/61a35b61.4c79d1bb.js create mode 100644 assets/js/61a35b61.53efbb03.js create mode 100644 assets/js/63f47a7c.23b9a51e.js delete mode 100644 assets/js/63f47a7c.f5e54242.js delete mode 100644 assets/js/67c089fb.04be0bd6.js create mode 100644 assets/js/67c089fb.835c1131.js create mode 100644 assets/js/67c0cc0e.49a8fe54.js delete mode 100644 assets/js/67c0cc0e.f6b6fd72.js create mode 100644 assets/js/6dde689d.a296f296.js delete mode 100644 assets/js/6dde689d.fedb5911.js delete mode 100644 assets/js/771be322.5aeede07.js create mode 100644 assets/js/771be322.c8085557.js create mode 100644 assets/js/78bcb238.70a9a9dd.js delete mode 100644 assets/js/78bcb238.ec590572.js create mode 100644 assets/js/7b61a3fa.7e7d5f1c.js delete mode 100644 assets/js/7b61a3fa.962828ef.js rename assets/js/{7b7be0e1.5bac0365.js => 7b7be0e1.041efcab.js} (98%) create mode 100644 assets/js/7da35ef8.5f20f679.js delete mode 100644 assets/js/7da35ef8.af433888.js create mode 100644 assets/js/8053496e.1a9e1459.js rename assets/js/{9358.cf0d0d27.js.LICENSE.txt => 8053496e.1a9e1459.js.LICENSE.txt} (100%) delete mode 100644 assets/js/8053496e.52db90d6.js delete mode 100644 assets/js/8079f804.405bc534.js create mode 100644 assets/js/8079f804.846a7d09.js create mode 100644 assets/js/83b4ba0b.337ac227.js delete mode 100644 assets/js/83b4ba0b.925129e0.js delete mode 100644 assets/js/8a16b8e9.81b7a2bd.js create mode 100644 assets/js/8a16b8e9.b6ef01ce.js create mode 100644 assets/js/932ca9ec.70922df5.js delete mode 100644 assets/js/932ca9ec.db37b8df.js delete mode 100644 assets/js/9358.cf0d0d27.js create mode 100644 assets/js/9602.e7bd29f4.js create mode 100644 assets/js/9be130a4.4d76744e.js delete mode 100644 assets/js/9be130a4.7890da22.js create mode 100644 assets/js/a45fe377.41d28a11.js delete mode 100644 assets/js/a45fe377.4da78159.js delete mode 100644 assets/js/aa089504.030a7252.js create mode 100644 assets/js/aa089504.c58fc7eb.js delete mode 100644 assets/js/ab7af1d3.d2f1107c.js create mode 100644 assets/js/ab7af1d3.e6628944.js delete mode 100644 assets/js/ad8813a3.4fede0e4.js create mode 100644 assets/js/ad8813a3.b73e934f.js delete mode 100644 assets/js/af3233c2.b6ff46a8.js create mode 100644 assets/js/af3233c2.e18844a5.js delete mode 100644 assets/js/b35b1276.32da6ca7.js create mode 100644 assets/js/b35b1276.f4904be4.js create mode 100644 assets/js/b3bf5b56.15e7497a.js delete mode 100644 assets/js/b3bf5b56.3de72384.js delete mode 100644 assets/js/b506dfd1.75ad62c0.js create mode 100644 assets/js/b506dfd1.a3ce067b.js create mode 100644 assets/js/b743ea75.67047af2.js delete mode 100644 assets/js/b743ea75.ef78621a.js create mode 100644 assets/js/b862475b.723acd2d.js delete mode 100644 assets/js/b862475b.bee34558.js create mode 100644 assets/js/bf0dbc92.22073d5b.js delete mode 100644 assets/js/bf0dbc92.786703fe.js delete mode 100644 assets/js/c060fdc4.e3c170be.js create mode 100644 assets/js/c060fdc4.f6ac9307.js delete mode 100644 assets/js/c55bf516.d54c1b72.js create mode 100644 assets/js/c55bf516.dc1b8151.js delete mode 100644 assets/js/c55c9b0f.2c631495.js create mode 100644 assets/js/c55c9b0f.b843329f.js create mode 100644 assets/js/cb3f6f96.467289bb.js delete mode 100644 assets/js/cb3f6f96.981f1a69.js create mode 100644 assets/js/cc0ca23c.3f2a29ee.js delete mode 100644 assets/js/cc0ca23c.6e15d121.js delete mode 100644 assets/js/e3446db6.0af37d96.js create mode 100644 assets/js/e3446db6.60006c6a.js create mode 100644 assets/js/eb0f0f4b.a2aa0ab8.js delete mode 100644 assets/js/eb0f0f4b.a3f4489a.js rename assets/js/{eea24eaa.a4df495e.js => eea24eaa.4dae6214.js} (98%) create mode 100644 assets/js/f5098664.1709d859.js delete mode 100644 assets/js/f5098664.d9107365.js create mode 100644 assets/js/fbe6690a.6440acf8.js delete mode 100644 assets/js/fbe6690a.828a8885.js create mode 100644 assets/js/main.1e9414e3.js rename assets/js/{main.ec90acce.js.LICENSE.txt => main.1e9414e3.js.LICENSE.txt} (100%) delete mode 100644 assets/js/main.ec90acce.js rename assets/js/{runtime~main.cb3f84d6.js => runtime~main.a3be8a28.js} (61%) diff --git a/404.html b/404.html index a96db99c5..2637b29aa 100644 --- a/404.html +++ b/404.html @@ -4,8 +4,8 @@ Page Not Found | @modern-kit - - + +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

diff --git a/assets/js/0468e7c7.54a90a5f.js b/assets/js/0468e7c7.54a90a5f.js deleted file mode 100644 index 1ec5d0c98..000000000 --- a/assets/js/0468e7c7.54a90a5f.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[5951],{6768:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>a,default:()=>p,frontMatter:()=>l,metadata:()=>r,toc:()=>f});const r=JSON.parse('{"id":"react/hooks/useDependencyTimeout","title":"useDependencyTimeout","description":"useTimeout \uc744 \uc0ac\uc6a9\ud574 \uc778\uc790\ub85c \uc804\ub2ec\ud558\ub294 \uc758\uc874\uc131 \ubc30\uc5f4\uc758 \uac12\uc774 \ubcc0\uacbd\ub418\uba74 Timeout\uc744 \uc7ac\uc124\uc815\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useDependencyTimeout.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useDependencyTimeout","permalink":"/modern-kit/docs/react/hooks/useDependencyTimeout","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useDebouncedState","permalink":"/modern-kit/docs/react/hooks/useDebouncedState"},"next":{"title":"useDocumentTitle","permalink":"/modern-kit/docs/react/hooks/useDocumentTitle"}}');var o=n(6206),i=n(3267),s=n(4027),c=n(4382);const l={},a="useDependencyTimeout",u={},d=()=>{const e={button:"button",div:"div",p:"p",...(0,i.R)()},[t,n]=(0,c.useState)(0),[r,l]=(0,c.useState)(!1),{set:a,reset:u,clear:d}=(0,s.Y1)((()=>{n(t+1)}),1e3,[r]);return(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.p,{children:t}),(0,o.jsx)(e.button,{onClick:()=>l(!r),children:"Toggle \uc758\uc874\uc131 \ubc30\uc5f4 \uc218\uc815"}),(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.button,{onClick:()=>a(),children:"set"}),(0,o.jsx)(e.button,{onClick:()=>u(),children:"reset"}),(0,o.jsx)(e.button,{onClick:()=>d(),children:"clear"})]})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function h(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usedependencytimeout",children:"useDependencyTimeout"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/hooks/useTimeout",children:"useTimeout"})})," \uc744 \uc0ac\uc6a9\ud574 \uc778\uc790\ub85c \uc804\ub2ec\ud558\ub294 \uc758\uc874\uc131 \ubc30\uc5f4\uc758 \uac12\uc774 \ubcc0\uacbd\ub418\uba74 ",(0,o.jsx)(t.code,{children:"Timeout"}),"\uc744 \uc7ac\uc124\uc815\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:["\uccab \ubc88\uc9f8 \uc778\uc790\ub85c ",(0,o.jsx)(t.code,{children:"callback"})," \ud568\uc218\ub97c \ubc1b\uc2b5\ub2c8\ub2e4.\n\ub450 \ubc88\uc9f8 \uc778\uc790\ub85c ",(0,o.jsx)(t.code,{children:"delay"})," \uc22b\uc790 \ud639\uc740 ",(0,o.jsx)(t.code,{children:"TimerOptions"}),"\ub97c \ubc1b\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. ",(0,o.jsx)(t.code,{children:"TimerOptions"}),"\ub294 ",(0,o.jsx)(t.code,{children:"delay"}),"\uc640 ",(0,o.jsx)(t.code,{children:"enabled"}),"\ub97c \ud3ec\ud568\ud558\ub294 \uac1d\uccb4\uc785\ub2c8\ub2e4.\n\uc138 \ubc88\uc9f8 \uc778\uc790\ub294 \uc758\uc874\uc131 \ubc30\uc5f4\uc778 ",(0,o.jsx)(t.code,{children:"deps"})," \uc785\ub2c8\ub2e4. \ud574\ub2f9 \uc758\uc874\uc131 \ubc30\uc5f4 \ub0b4 \uac12\uc774 \ubc14\ub00c\uba74 ",(0,o.jsx)(t.code,{children:"Timeout"}),"\uc744 \uc7ac\uc124\uc815\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"Timeout"}),"\uc744 \uc9c1\uc811 \ud578\ub4e4\ub9c1 \ud560 \uc218 \uc788\ub294 ",(0,o.jsx)(t.code,{children:"set"}),", ",(0,o.jsx)(t.code,{children:"reset"}),", ",(0,o.jsx)(t.code,{children:"clear"})," \ud568\uc218\ub97c \ud3ec\ud568\ud55c \uac1d\uccb4\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useDependencyTimeout/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"export function useDependencyTimeout(\n callback: () => void,\n delay: number,\n deps: DependencyList\n): ReturnType;\n\nexport function useDependencyTimeout(\n callback: () => void,\n options: TimeoutOptions,\n deps: DependencyList\n): ReturnType;\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useDependencyTimeout } from '@modern-kit/react';\n\nconst Example = () => {\n const [number, setNumber] = useState(0);\n const [boolean, setBoolean] = useState(false);\n\n const { set, reset, clear } = useDependencyTimeout(() => {\n setNumber(number + 1);\n }, 1000, [boolean]);\n \n /*\n * useDependencyTimeout(() => {\n * setNumber(number + 1);\n * }, { delay: 1000, enabled: true });\n */\n\n return (\n
\n

{number}

\n \n
\n \n \n \n
\n
\n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(d,{})]})}function p(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>Me,$I:()=>oe,AE:()=>Be,BL:()=>H,DX:()=>N,FT:()=>ct,Fo:()=>et,Hn:()=>it,I5:()=>Ee,JF:()=>$e,K:()=>ae,K$:()=>Je,M0:()=>Re,ML:()=>ne,Mj:()=>ve,Mk:()=>Le,Mo:()=>ie,NT:()=>Ye,QV:()=>Ue,Ub:()=>ke,Ut:()=>je,W7:()=>U,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>We,Zu:()=>le,_1:()=>Oe,_g:()=>nt,aL:()=>J,aY:()=>Ne,bB:()=>X,d7:()=>z,eG:()=>st,fN:()=>ce,fm:()=>G,gl:()=>M,hN:()=>A,iD:()=>de,iQ:()=>Fe,jd:()=>se,lW:()=>at,oD:()=>K,oo:()=>Te,pL:()=>q,qi:()=>ue,rN:()=>Ie,tD:()=>Se,u8:()=>Q,wY:()=>ze,xV:()=>F,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),i=n(3683),s=n(5086),c=n(7197),l=(n(1604),n(5938));function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function b(){return!m()}function g(e){return f(this,0,void 0,(function*(){if(!b())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const w=e=>f(void 0,0,void 0,(function*(){return g(yield(yield fetch(e)).text())}));function y(e,t){var n;return f(this,0,void 0,(function*(){if(!b())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return w(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield p(e,h[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const v=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||C(e)&&C(t)&&isNaN(e)&&isNaN(t))return!0;if(S(e)&&S(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return v(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return v(e,t,n)};function k(e,t){return x(e,t,new WeakMap)}function S(e){return"function"==typeof e}function C(e){return"number"==typeof e}function j(e){return!function(e){return Object(e)!==e}(e)}function E(){}function T(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const O=(...e)=>t=>e.forEach((e=>{if(S(e))e(t);else if(null!=e){e.current=t}}));function R(...e){return(0,o.useCallback)(O(...e),e)}const N=o.forwardRef(((e,t)=>{const{children:n}=e,i=a(e,["children"]),s=o.Children.toArray(n),c=s.find(L);if(c){const e=c.props.children,n=s.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(I,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(I,Object.assign({},i,{ref:t,children:n}))}));N.displayName="Slot";const I=o.forwardRef(((e,t)=>{const{children:n}=e,r=a(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?O(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));I.displayName="SlotClone";const F=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function L(e){return o.isValidElement(e)&&e.type===F}var D="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const M=d(((e,t)=>{var{ratio:n,style:o,as:s="div",asChild:c=!1}=e,l=a(e,["ratio","style","as","asChild"]);const u=c?N:s,d=Object.assign({aspectRatio:n},o),f=c?l.className:i(D,l.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},l))})),$=()=>E,P=()=>!1,Y=()=>!0;function X({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)($,P,Y)?e:t}function V(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const A=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>V()?(0,r.jsx)(r.Fragment,{children:t}):e;function B(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function W(e){const t=B(e);(0,o.useEffect)((()=>()=>t()),[t])}function _(e,t=k){const[n,r]=(0,o.useState)(e),i=B(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function z(e,t,n){const r=B(e),i=_(n),c=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return W((()=>c.cancel())),c}const J=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),s=z(((...e)=>{const n=i?.props;if(n&&S(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:s})};function H({onIntersectStart:e=E,onIntersectEnd:t=E,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:s=0,rootMargin:c="0px 0px 0px 0px"}){const l=(0,o.useRef)(0),a=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=B((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(a.current=!0,l.current+=1,e(n)):a.current&&(a.current=!1,l.current+=1,t(n)),r&&l.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:s,root:i,rootMargin:c}),u.current.observe(e))}),[n,s,i,c,d])}}const K=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:s}=e,c=a(e,["src","threshold","root","rootMargin"]);const{ref:l}=H({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:R(t,l)},c))}));K.displayName="LazyImage";const U=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=a(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,b=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),g=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},l)),[m,u,l]),w=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),y=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:y,style:b,children:[m&&s,(0,r.jsx)(K,Object.assign({ref:t,width:n,height:i,style:g,onLoad:w},f))]})}));U.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:s="after",rootMargin:c="150px 0px"})=>{const{ref:l}=H({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:l}),t,"after"===s&&(0,r.jsx)("div",{ref:l})]})},q=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1}=e,c=a(e,["children","as","asChild"]);const l=s?N:i,{ref:u}=H(c);if(s&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(l,Object.assign({ref:O(t,u)},c,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return j(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=b()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=B(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1,onPointerDown:c,excludeRefs:l=[]}=e,u=a(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:l}),f=s?N:i;if(s&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:O(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:s=1,includeLastSeparator:c=!1})=>{const l=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%s==0),[c,s,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),l(t)&&n]})})},se=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function le(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function ae(e=!0){const t=S(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield g(e);return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield y(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!b())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),l=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!b())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:s,readText:c,readContents:l}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],be=me("localStorage"),ge=e=>window.localStorage.getItem(e),we=e=>JSON.stringify(e),ye=e=>(be.subscribe(e),()=>{be.unsubscribe(e)});function ve(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(ye,(()=>ge(t)),(()=>we(r)));return{state:(0,o.useMemo)((()=>i?T(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=ge(t),o=n?T(n):r,i=S(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),be.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),be.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>b()?window.matchMedia(e).matches:t??!1;function ke(e,t){const[n,r]=(0,o.useState)(xe(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function Se(){return ke("(prefers-color-scheme: dark)")?"dark":"light"}const Ce="color-scheme";function je({defaultValue:e,key:t=Ce,shouldSetBodyClass:n=!1}={}){const r=Se(),i=S(e)?e():e,{state:s,setState:c}=ve({key:t,initialValue:i??r}),l=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),a=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(s),()=>{n&&document.body.classList.remove(s)})),[s,n]),{colorScheme:s,preferredColorScheme:r,setToggleMode:l,setDarkMode:a,setLightMode:u,setPreferredMode:d}}function Ee(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:s}}function Te({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),s=r0,l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),a=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const s=l(e,t);o&&o({prev:r,next:s}),i(s)}),[n,r,l]),u=(0,o.useCallback)((e=>{a("nextStep",!s,e)}),[s,a]),d=(0,o.useCallback)((e=>{a("prevStep",!c,e)}),[c,a]),f=(0,o.useCallback)(((t,n)=>{const o=S(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:s,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Oe(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=Te({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}function Re(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,z(i,t,n)]}function Ne(e,t={}){const[n,r]=(0,o.useState)(""),[i,s]=Re("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),s(t)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Ie(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Fe({onFocus:e=E,onBlur:t=E}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=B((t=>{r(!0),e(t)})),c=B((e=>{r(!1),t(e)})),l=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",s),ne(i,"blur",c),{ref:i,isFocus:n,setFocus:l}}function Le({onEnter:e=E,onLeave:t=E}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=B((t=>{r(!0),e(t)})),c=B((e=>{r(!1),t(e)}));return ne(i,"mouseenter",s),ne(i,"mouseleave",c),{ref:i,isHovered:n}}const De=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function Me(e,t){const n=(0,o.useRef)(),r=B(e),{delay:i,enabled:s}=De(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>l()}),[l,c,s,i]),{set:c,reset:a,clear:l}}function $e({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=B((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];S(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const Pe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Ye(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Pe),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l}=t;let a=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();a=i-t.left,u=s-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l,elementRelativeX:a,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Xe=()=>navigator.onLine,Ve=()=>!0,Ae=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function Be({onlineAction:e=E,offlineAction:t=E}={}){const n=B((n=>Ae(n,e,t)));return(0,o.useSyncExternalStore)(n,Xe,Ve)}function We(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const _e={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function ze(e=E){const[t,n]=(0,o.useState)(_e),r=(0,o.useRef)(null),i=B((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function Je({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const He=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:s="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+He(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+He(window.innerWidth,r.width,c)};const l=e.getBoundingClientRect();return{top:r.top-l.top+e.scrollTop+i+He(l.height,r.height,s),left:r.left-l.left+e.scrollLeft+o+He(l.width,r.width,c)}};function Ue(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:s}=Ke(r,t,n);r.scrollTo({top:s,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>i?T(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?T(n):r,i=S(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[s,c]=(0,o.useState)(n),l=(0,o.useCallback)((e=>{c((t=>{const n=S(e)?e(t):e;return r&&i&&function(e,t,n){if(!b())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=S(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),a=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!b())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),c(null)}),[r,i]);return Object.assign({state:s,setState:l,clearState:a},Te(e))}function nt(e,t,n={}){const r=B(e),i=_(n),s=(0,o.useMemo)((()=>(0,c.A)(r,t,i)),[r,t,i]);return W((()=>s.cancel())),s}const rt=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=B(e),{delay:i,enabled:s}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>l()}),[c,l,i,s]),{set:c,reset:a,clear:l}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function st(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new l.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const lt={width:null,height:null};function at({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?lt:{width:window.innerWidth,height:window.innerHeight})),r=z(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:s,reset:c,clear:l}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||c()}),[r,i,c,...n]),{set:s,reset:c,clear:l}}}}]); \ No newline at end of file diff --git a/assets/js/0468e7c7.69aa168d.js b/assets/js/0468e7c7.69aa168d.js new file mode 100644 index 000000000..2df5f1327 --- /dev/null +++ b/assets/js/0468e7c7.69aa168d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[5951],{8391:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>m,assets:()=>p,contentTitle:()=>l,default:()=>b,frontMatter:()=>d,metadata:()=>r,toc:()=>f});const r=JSON.parse('{"id":"react/hooks/useDependencyTimeout","title":"useDependencyTimeout","description":"useTimeout \uc744 \uc0ac\uc6a9\ud574 \uc778\uc790\ub85c \uc804\ub2ec\ud558\ub294 \uc758\uc874\uc131 \ubc30\uc5f4\uc758 \uac12\uc774 \ubcc0\uacbd\ub418\uba74 Timeout\uc744 \uc7ac\uc124\uc815\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useDependencyTimeout.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useDependencyTimeout","permalink":"/modern-kit/docs/react/hooks/useDependencyTimeout","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useDebouncedState","permalink":"/modern-kit/docs/react/hooks/useDebouncedState"},"next":{"title":"useDocumentTitle","permalink":"/modern-kit/docs/react/hooks/useDocumentTitle"}}');var o=t(6206),i=t(3267),c=t(4382),s=t(9545),a=t(9340);function u(e,n,t){const{delay:r,enabled:o}=(e=>{var n;return(0,a.Et)(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(n=null==e?void 0:e.enabled)||void 0===n||n}})(n),{set:i,reset:u,clear:d}=(0,s.Z)(e,{delay:r,enabled:!1});return(0,c.useEffect)((()=>{r<0||!o||u()}),[r,o,u,...t]),{set:i,reset:u,clear:d}}const d={},l="useDependencyTimeout",p={},m=()=>{const e={button:"button",div:"div",p:"p",...(0,i.R)()},[n,t]=(0,c.useState)(0),[r,s]=(0,c.useState)(!1),{set:a,reset:d,clear:l}=u((()=>{t(n+1)}),1e3,[r]);return(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.p,{children:n}),(0,o.jsx)(e.button,{onClick:()=>s(!r),children:"Toggle \uc758\uc874\uc131 \ubc30\uc5f4 \uc218\uc815"}),(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.button,{onClick:()=>a(),children:"set"}),(0,o.jsx)(e.button,{onClick:()=>d(),children:"reset"}),(0,o.jsx)(e.button,{onClick:()=>l(),children:"clear"})]})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function h(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"usedependencytimeout",children:"useDependencyTimeout"})}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/hooks/useTimeout",children:"useTimeout"})})," \uc744 \uc0ac\uc6a9\ud574 \uc778\uc790\ub85c \uc804\ub2ec\ud558\ub294 \uc758\uc874\uc131 \ubc30\uc5f4\uc758 \uac12\uc774 \ubcc0\uacbd\ub418\uba74 ",(0,o.jsx)(n.code,{children:"Timeout"}),"\uc744 \uc7ac\uc124\uc815\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.p,{children:["\uccab \ubc88\uc9f8 \uc778\uc790\ub85c ",(0,o.jsx)(n.code,{children:"callback"})," \ud568\uc218\ub97c \ubc1b\uc2b5\ub2c8\ub2e4.\n\ub450 \ubc88\uc9f8 \uc778\uc790\ub85c ",(0,o.jsx)(n.code,{children:"delay"})," \uc22b\uc790 \ud639\uc740 ",(0,o.jsx)(n.code,{children:"TimerOptions"}),"\ub97c \ubc1b\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. ",(0,o.jsx)(n.code,{children:"TimerOptions"}),"\ub294 ",(0,o.jsx)(n.code,{children:"delay"}),"\uc640 ",(0,o.jsx)(n.code,{children:"enabled"}),"\ub97c \ud3ec\ud568\ud558\ub294 \uac1d\uccb4\uc785\ub2c8\ub2e4.\n\uc138 \ubc88\uc9f8 \uc778\uc790\ub294 \uc758\uc874\uc131 \ubc30\uc5f4\uc778 ",(0,o.jsx)(n.code,{children:"deps"})," \uc785\ub2c8\ub2e4. \ud574\ub2f9 \uc758\uc874\uc131 \ubc30\uc5f4 \ub0b4 \uac12\uc774 \ubc14\ub00c\uba74 ",(0,o.jsx)(n.code,{children:"Timeout"}),"\uc744 \uc7ac\uc124\uc815\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"Timeout"}),"\uc744 \uc9c1\uc811 \ud578\ub4e4\ub9c1 \ud560 \uc218 \uc788\ub294 ",(0,o.jsx)(n.code,{children:"set"}),", ",(0,o.jsx)(n.code,{children:"reset"}),", ",(0,o.jsx)(n.code,{children:"clear"})," \ud568\uc218\ub97c \ud3ec\ud568\ud55c \uac1d\uccb4\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useDependencyTimeout/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"export function useDependencyTimeout(\n callback: () => void,\n delay: number,\n deps: DependencyList\n): ReturnType;\n\nexport function useDependencyTimeout(\n callback: () => void,\n options: TimeoutOptions,\n deps: DependencyList\n): ReturnType;\n"})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useDependencyTimeout } from '@modern-kit/react';\n\nconst Example = () => {\n const [number, setNumber] = useState(0);\n const [boolean, setBoolean] = useState(false);\n\n const { set, reset, clear } = useDependencyTimeout(() => {\n setNumber(number + 1);\n }, 1000, [boolean]);\n \n /*\n * useDependencyTimeout(() => {\n * setNumber(number + 1);\n * }, { delay: 1000, enabled: true });\n */\n\n return (\n
\n

{number}

\n \n
\n \n \n \n
\n
\n );\n};\n"})}),"\n",(0,o.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(m,{})]})}function b(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},3267:(e,n,t)=>{t.d(n,{R:()=>c,x:()=>s});var r=t(4382);const o={},i=r.createContext(o);function c(e){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),r.createElement(i.Provider,{value:n},e.children)}},6765:(e,n,t)=>{t.d(n,{p:()=>o});var r=t(4382);function o(e){const n=(0,r.useRef)(e);return n.current=e,(0,r.useCallback)(((...e)=>n.current(...e)),[])}},9545:(e,n,t)=>{t.d(n,{Z:()=>s});var r=t(4382),o=t(6765),i=t(9340);const c=e=>{var n;return(0,i.Et)(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(n=null==e?void 0:e.enabled)||void 0===n||n}};function s(e,n){const t=(0,r.useRef)(),i=(0,o.p)(e),{delay:s,enabled:a}=c(n),u=(0,r.useCallback)((()=>{t.current=setTimeout(i,s)}),[i,s]),d=(0,r.useCallback)((()=>{t.current&&(clearTimeout(t.current),t.current=null)}),[]),l=(0,r.useCallback)((()=>{d(),u()}),[d,u]);return(0,r.useEffect)((()=>{if(!(s<0)&&a)return u(),()=>d()}),[u,d,s,a]),{set:u,reset:l,clear:d}}},9340:(e,n,t)=>{function r(e,n,t,r){return new(t||(t=Promise))((function(o,i){function c(e){try{a(r.next(e))}catch(n){i(n)}}function s(e){try{a(r.throw(e))}catch(n){i(n)}}function a(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(c,s)}a((r=r.apply(e,n||[])).next())}))}t.d(n,{Et:()=>v,Fr:()=>s,Gp:()=>y,Ol:()=>C,Qd:()=>j,S$:()=>c,Tn:()=>g,Zp:()=>p,dK:()=>u,fl:()=>S,gD:()=>x,i5:()=>f,if:()=>m,l6:()=>k,lQ:()=>T,nS:()=>l,ni:()=>O,oc:()=>a}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,n)=>new Promise(((t,r)=>{e.toBlob((e=>{e?t(e):r(new Error(`Failed to create blob with format ${n}`))}),n)}));function c(){return"undefined"==typeof window}function s(){if(c())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function a(){return!c()}function u(e){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const d=e=>r(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return u(yield n.text())}));function l(e,n){var t;return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return d(e);if(!("write"in window.navigator.clipboard))return d(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return d(e);const c=yield function(e,n="png"){return new Promise(((t,c)=>{const s=new Image;s.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=s.width,e.height=s.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(s,0,0);const c=yield i(e,o[n]);t(c)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),c(r)}})),s.onerror=()=>{c(new Error("Failed to load image"))},s.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[c.type]:c})]),c}catch(c){throw console.error(`Failed to copy to clipboard. message: ${c.message}`),c}}))}function p(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function m(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function f(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const h=(e,n,t)=>{const r=Object.keys(e),o=Object.keys(n);if(r.length!==o.length)return!1;for(let i=0;i{if(e===n)return!0;if(v(e)&&v(n)&&isNaN(e)&&isNaN(n))return!0;if(g(e)&&g(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const r=[...e],o=[...n];return h(r,o,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[r,o]of e)if(!n.has(r)||!b(o,n.get(r),t))return!1;return!0}return h(e,n,t)};function y(e,n){return b(e,n,new WeakMap)}function g(e){return"function"==typeof e}function x(e){return null==e}function v(e){return"number"==typeof e}function w(e){return!function(e){return Object(e)!==e}(e)}function j(e){return w(e)&&"[object Object]"===Object.prototype.toString.call(e)}function k(e){return e===window}function T(){}function C(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function E(e){return Object.keys(e)}const D={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};E(D);function S(e,n){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function O(e,n,t){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=g(t)?t():t;r.setItem(n,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${n}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/069bf6ce.37c76340.js b/assets/js/069bf6ce.37c76340.js deleted file mode 100644 index af23192e8..000000000 --- a/assets/js/069bf6ce.37c76340.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[4676],{4303:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>c,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"react/hooks/useBeforeUnload","title":"useBeforeUnload","description":"beforeunload \uc774\ubca4\ud2b8\ub97c \ub9ac\uc561\ud2b8\uc5d0\uc11c \uc27d\uac8c \ub2e4\ub8f0 \uc218 \uc788\ub294 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useBeforeUnload.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useBeforeUnload","permalink":"/modern-kit/docs/react/hooks/useBeforeUnload","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useAsyncEffect","permalink":"/modern-kit/docs/react/hooks/useAsyncEffect"},"next":{"title":"useBlockMultipleAsyncCalls","permalink":"/modern-kit/docs/react/hooks/useBlockMultipleAsyncCalls"}}');var o=n(6206),i=n(3267),s=n(4027);const c={},a="useBeforeUnload",l={},u=()=>{const e={div:"div",...(0,i.R)()};return(0,s.K)(),(0,o.jsx)(e.div,{children:"\ud398\uc774\uc9c0\ub97c \ub5a0\ub098\ubcf4\uc138\uc694."})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usebeforeunload",children:"useBeforeUnload"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event",children:"beforeunload"})})," \uc774\ubca4\ud2b8\ub97c \ub9ac\uc561\ud2b8\uc5d0\uc11c \uc27d\uac8c \ub2e4\ub8f0 \uc218 \uc788\ub294 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"beforeunload"})," \uc774\ubca4\ud2b8\ub294 \uc0ac\uc6a9\uc790\uac00 \ud398\uc774\uc9c0\ub97c \ub5a0\ub0a0 \ub54c \ubc1c\uc0dd\ud558\ub294 \uc774\ubca4\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsx)(t.p,{children:"beforeunload \uc774\ubca4\ud2b8\uc758 \uc8fc\uc694 \uc0ac\ub840\ub294 \uc6f9 \ud398\uc774\uc9c0\uc5d0\uc11c \uc0ac\uc6a9\uc790\uc5d0\uac8c \uc2e4\uc81c\ub85c \ud398\uc774\uc9c0\ub97c \ub5a0\ub0a0 \uac83\uc778\uc9c0 \ubb3b\ub294 \ud655\uc778 \ub300\ud654 \uc0c1\uc790\ub97c \ud45c\uc2dc\ud574 \ud655\uc778\ud558\ub294 \uac83\uc785\ub2c8\ub2e4."}),"\n",(0,o.jsx)(t.p,{children:"\uc0ac\uc6a9\uc790\uac00 \ud655\uc778 \ubc84\ud2bc\uc744 \ub204\ub97c \uacbd\uc6b0 \ube0c\ub77c\uc6b0\uc800\ub294 \uc0c8 \ud398\uc774\uc9c0\ub85c \uc774\ub3d9\ud558\uace0 \uadf8\ub807\uc9c0 \uc54a\uc73c\uba74 \ud0d0\uc0c9\uc744 \ucde8\uc18c\ud558\uace0 \ud604\uc7ac \ud398\uc774\uc9c0\uc5d0 \uba38\ubb34\ub985\ub2c8\ub2e4."}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useBeforeUnload/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useBeforeUnload(enabled?: boolean | (() => boolean) = true): void\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useBeforeUnload } from '@modern-kit/react'\n\nconst Example = () => {\n useBeforeUnload();\n return
\ud398\uc774\uc9c0\ub97c \ub5a0\ub098\ubcf4\uc138\uc694.
;\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(u,{})]})}function h(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(f,{...e})}):f(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>$e,$I:()=>oe,AE:()=>Ve,BL:()=>J,DX:()=>F,FT:()=>ct,Fo:()=>et,Hn:()=>it,I5:()=>je,JF:()=>Be,K:()=>le,K$:()=>ze,M0:()=>Ie,ML:()=>ne,Mj:()=>ye,Mk:()=>Me,Mo:()=>ie,NT:()=>Ae,QV:()=>Ke,Ub:()=>ke,Ut:()=>Ee,W7:()=>K,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>We,Zu:()=>ae,_1:()=>Oe,_g:()=>nt,aL:()=>z,aY:()=>Fe,bB:()=>Y,d7:()=>_,eG:()=>st,fN:()=>ce,fm:()=>G,gl:()=>$,hN:()=>X,iD:()=>de,iQ:()=>Le,jd:()=>se,lW:()=>lt,oD:()=>H,oo:()=>Re,pL:()=>q,qi:()=>ue,rN:()=>Ne,tD:()=>Se,u8:()=>Q,wY:()=>_e,xV:()=>L,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),i=n(3683),s=n(5086),c=n(7197),a=(n(1604),n(5938));function l(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function g(){return!m()}function w(e){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const b=e=>f(void 0,0,void 0,(function*(){return w(yield(yield fetch(e)).text())}));function v(e,t){var n;return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return b(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield p(e,h[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||C(e)&&C(t)&&isNaN(e)&&isNaN(t))return!0;if(S(e)&&S(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function k(e,t){return x(e,t,new WeakMap)}function S(e){return"function"==typeof e}function C(e){return"number"==typeof e}function E(e){return!function(e){return Object(e)!==e}(e)}function j(){}function R(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const O=(...e)=>t=>e.forEach((e=>{if(S(e))e(t);else if(null!=e){e.current=t}}));function I(...e){return(0,o.useCallback)(O(...e),e)}const F=o.forwardRef(((e,t)=>{const{children:n}=e,i=l(e,["children"]),s=o.Children.toArray(n),c=s.find(M);if(c){const e=c.props.children,n=s.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(N,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(N,Object.assign({},i,{ref:t,children:n}))}));F.displayName="Slot";const N=o.forwardRef(((e,t)=>{const{children:n}=e,r=l(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?O(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));N.displayName="SlotClone";const L=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function M(e){return o.isValidElement(e)&&e.type===L}var P="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const $=d(((e,t)=>{var{ratio:n,style:o,as:s="div",asChild:c=!1}=e,a=l(e,["ratio","style","as","asChild"]);const u=c?F:s,d=Object.assign({aspectRatio:n},o),f=c?a.className:i(P,a.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},a))})),B=()=>j,T=()=>!1,A=()=>!0;function Y({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(B,T,A)?e:t}function U(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const X=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>U()?(0,r.jsx)(r.Fragment,{children:t}):e;function V(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function W(e){const t=V(e);(0,o.useEffect)((()=>()=>t()),[t])}function D(e,t=k){const[n,r]=(0,o.useState)(e),i=V(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function _(e,t,n){const r=V(e),i=D(n),c=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return W((()=>c.cancel())),c}const z=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),s=_(((...e)=>{const n=i?.props;if(n&&S(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:s})};function J({onIntersectStart:e=j,onIntersectEnd:t=j,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:s=0,rootMargin:c="0px 0px 0px 0px"}){const a=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=V((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(l.current=!0,a.current+=1,e(n)):l.current&&(l.current=!1,a.current+=1,t(n)),r&&a.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:s,root:i,rootMargin:c}),u.current.observe(e))}),[n,s,i,c,d])}}const H=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:s}=e,c=l(e,["src","threshold","root","rootMargin"]);const{ref:a}=J({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:I(t,a)},c))}));H.displayName="LazyImage";const K=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:s,className:c,style:a,duration:u="0.2s",onLoad:d}=e,f=l(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,g=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),w=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},a)),[m,u,a]),b=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),v=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:g,children:[m&&s,(0,r.jsx)(H,Object.assign({ref:t,width:n,height:i,style:w,onLoad:b},f))]})}));K.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:s="after",rootMargin:c="150px 0px"})=>{const{ref:a}=J({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:a}),t,"after"===s&&(0,r.jsx)("div",{ref:a})]})},q=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1}=e,c=l(e,["children","as","asChild"]);const a=s?F:i,{ref:u}=J(c);if(s&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(a,Object.assign({ref:O(t,u)},c,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return E(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=g()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=V(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1,onPointerDown:c,excludeRefs:a=[]}=e,u=l(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:a}),f=s?F:i;if(s&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:O(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:s=1,includeLastSeparator:c=!1})=>{const a=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%s==0),[c,s,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),a(t)&&n]})})},se=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function ae(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function le(e=!0){const t=S(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield w(e);return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),a=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:s,readText:c,readContents:a}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],ge=me("localStorage"),we=e=>window.localStorage.getItem(e),be=e=>JSON.stringify(e),ve=e=>(ge.subscribe(e),()=>{ge.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(ve,(()=>we(t)),(()=>be(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=we(t),o=n?R(n):r,i=S(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),ge.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ge.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>g()?window.matchMedia(e).matches:t??!1;function ke(e,t){const[n,r]=(0,o.useState)(xe(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function Se(){return ke("(prefers-color-scheme: dark)")?"dark":"light"}const Ce="color-scheme";function Ee({defaultValue:e,key:t=Ce,shouldSetBodyClass:n=!1}={}){const r=Se(),i=S(e)?e():e,{state:s,setState:c}=ye({key:t,initialValue:i??r}),a=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),l=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(s),()=>{n&&document.body.classList.remove(s)})),[s,n]),{colorScheme:s,preferredColorScheme:r,setToggleMode:a,setDarkMode:l,setLightMode:u,setPreferredMode:d}}function je(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:s}}function Re({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),s=r0,a=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),l=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const s=a(e,t);o&&o({prev:r,next:s}),i(s)}),[n,r,a]),u=(0,o.useCallback)((e=>{l("nextStep",!s,e)}),[s,l]),d=(0,o.useCallback)((e=>{l("prevStep",!c,e)}),[c,l]),f=(0,o.useCallback)(((t,n)=>{const o=S(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:s,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Oe(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=Re({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}function Ie(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,_(i,t,n)]}function Fe(e,t={}){const[n,r]=(0,o.useState)(""),[i,s]=Ie("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),s(t)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Ne(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Le({onFocus:e=j,onBlur:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=V((t=>{r(!0),e(t)})),c=V((e=>{r(!1),t(e)})),a=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",s),ne(i,"blur",c),{ref:i,isFocus:n,setFocus:a}}function Me({onEnter:e=j,onLeave:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=V((t=>{r(!0),e(t)})),c=V((e=>{r(!1),t(e)}));return ne(i,"mouseenter",s),ne(i,"mouseleave",c),{ref:i,isHovered:n}}const Pe=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function $e(e,t){const n=(0,o.useRef)(),r=V(e),{delay:i,enabled:s}=Pe(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>a()}),[a,c,s,i]),{set:c,reset:l,clear:a}}function Be({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=V((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];S(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const Te={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Ae(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Te),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:a}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=i-t.left,u=s-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:a,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Ye=()=>navigator.onLine,Ue=()=>!0,Xe=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function Ve({onlineAction:e=j,offlineAction:t=j}={}){const n=V((n=>Xe(n,e,t)));return(0,o.useSyncExternalStore)(n,Ye,Ue)}function We(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const De={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function _e(e=j){const[t,n]=(0,o.useState)(De),r=(0,o.useRef)(null),i=V((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function ze({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:s="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+Je(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+Je(window.innerWidth,r.width,c)};const a=e.getBoundingClientRect();return{top:r.top-a.top+e.scrollTop+i+Je(a.height,r.height,s),left:r.left-a.left+e.scrollLeft+o+Je(a.width,r.width,c)}};function Ke(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:s}=He(r,t,n);r.scrollTo({top:s,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?R(n):r,i=S(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[s,c]=(0,o.useState)(n),a=(0,o.useCallback)((e=>{c((t=>{const n=S(e)?e(t):e;return r&&i&&function(e,t,n){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=S(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),l=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),c(null)}),[r,i]);return Object.assign({state:s,setState:a,clearState:l},Re(e))}function nt(e,t,n={}){const r=V(e),i=D(n),s=(0,o.useMemo)((()=>(0,c.A)(r,t,i)),[r,t,i]);return W((()=>s.cancel())),s}const rt=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=V(e),{delay:i,enabled:s}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>a()}),[c,a,i,s]),{set:c,reset:l,clear:a}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function st(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new a.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const at={width:null,height:null};function lt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?at:{width:window.innerWidth,height:window.innerHeight})),r=_(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:s,reset:c,clear:a}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||c()}),[r,i,c,...n]),{set:s,reset:c,clear:a}}}}]); \ No newline at end of file diff --git a/assets/js/069bf6ce.5a1773f5.js b/assets/js/069bf6ce.5a1773f5.js new file mode 100644 index 000000000..59d045879 --- /dev/null +++ b/assets/js/069bf6ce.5a1773f5.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[4676],{749:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>u,assets:()=>l,contentTitle:()=>d,default:()=>h,frontMatter:()=>a,metadata:()=>r,toc:()=>f});const r=JSON.parse('{"id":"react/hooks/useBeforeUnload","title":"useBeforeUnload","description":"beforeunload \uc774\ubca4\ud2b8\ub97c \ub9ac\uc561\ud2b8\uc5d0\uc11c \uc27d\uac8c \ub2e4\ub8f0 \uc218 \uc788\ub294 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useBeforeUnload.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useBeforeUnload","permalink":"/modern-kit/docs/react/hooks/useBeforeUnload","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useAsyncEffect","permalink":"/modern-kit/docs/react/hooks/useAsyncEffect"},"next":{"title":"useBlockMultipleAsyncCalls","permalink":"/modern-kit/docs/react/hooks/useBlockMultipleAsyncCalls"}}');var o=t(6206),i=t(3267),c=t(9340),s=t(4382);const a={},d="useBeforeUnload",l={},u=()=>{const e={div:"div",...(0,i.R)()};return function(e=!0){const n=(0,c.Tn)(e)?e():e;(0,s.useEffect)((()=>{if(!n)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[n])}(),(0,o.jsx)(e.div,{children:"\ud398\uc774\uc9c0\ub97c \ub5a0\ub098\ubcf4\uc138\uc694."})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function p(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"usebeforeunload",children:"useBeforeUnload"})}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event",children:"beforeunload"})})," \uc774\ubca4\ud2b8\ub97c \ub9ac\uc561\ud2b8\uc5d0\uc11c \uc27d\uac8c \ub2e4\ub8f0 \uc218 \uc788\ub294 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"beforeunload"})," \uc774\ubca4\ud2b8\ub294 \uc0ac\uc6a9\uc790\uac00 \ud398\uc774\uc9c0\ub97c \ub5a0\ub0a0 \ub54c \ubc1c\uc0dd\ud558\ub294 \uc774\ubca4\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsx)(n.p,{children:"beforeunload \uc774\ubca4\ud2b8\uc758 \uc8fc\uc694 \uc0ac\ub840\ub294 \uc6f9 \ud398\uc774\uc9c0\uc5d0\uc11c \uc0ac\uc6a9\uc790\uc5d0\uac8c \uc2e4\uc81c\ub85c \ud398\uc774\uc9c0\ub97c \ub5a0\ub0a0 \uac83\uc778\uc9c0 \ubb3b\ub294 \ud655\uc778 \ub300\ud654 \uc0c1\uc790\ub97c \ud45c\uc2dc\ud574 \ud655\uc778\ud558\ub294 \uac83\uc785\ub2c8\ub2e4."}),"\n",(0,o.jsx)(n.p,{children:"\uc0ac\uc6a9\uc790\uac00 \ud655\uc778 \ubc84\ud2bc\uc744 \ub204\ub97c \uacbd\uc6b0 \ube0c\ub77c\uc6b0\uc800\ub294 \uc0c8 \ud398\uc774\uc9c0\ub85c \uc774\ub3d9\ud558\uace0 \uadf8\ub807\uc9c0 \uc54a\uc73c\uba74 \ud0d0\uc0c9\uc744 \ucde8\uc18c\ud558\uace0 \ud604\uc7ac \ud398\uc774\uc9c0\uc5d0 \uba38\ubb34\ub985\ub2c8\ub2e4."}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useBeforeUnload/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"function useBeforeUnload(enabled?: boolean | (() => boolean) = true): void\n"})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useBeforeUnload } from '@modern-kit/react'\n\nconst Example = () => {\n useBeforeUnload();\n return
\ud398\uc774\uc9c0\ub97c \ub5a0\ub098\ubcf4\uc138\uc694.
;\n};\n"})}),"\n",(0,o.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(u,{})]})}function h(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},3267:(e,n,t)=>{t.d(n,{R:()=>c,x:()=>s});var r=t(4382);const o={},i=r.createContext(o);function c(e){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),r.createElement(i.Provider,{value:n},e.children)}},9340:(e,n,t)=>{function r(e,n,t,r){return new(t||(t=Promise))((function(o,i){function c(e){try{a(r.next(e))}catch(n){i(n)}}function s(e){try{a(r.throw(e))}catch(n){i(n)}}function a(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(c,s)}a((r=r.apply(e,n||[])).next())}))}t.d(n,{Et:()=>y,Fr:()=>s,Gp:()=>w,Ol:()=>C,Qd:()=>j,S$:()=>c,Tn:()=>v,Zp:()=>f,dK:()=>d,fl:()=>F,gD:()=>b,i5:()=>h,if:()=>p,l6:()=>k,lQ:()=>E,nS:()=>u,ni:()=>O,oc:()=>a}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,n)=>new Promise(((t,r)=>{e.toBlob((e=>{e?t(e):r(new Error(`Failed to create blob with format ${n}`))}),n)}));function c(){return"undefined"==typeof window}function s(){if(c())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function a(){return!c()}function d(e){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const l=e=>r(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return d(yield n.text())}));function u(e,n){var t;return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return l(e);if(!("write"in window.navigator.clipboard))return l(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return l(e);const c=yield function(e,n="png"){return new Promise(((t,c)=>{const s=new Image;s.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=s.width,e.height=s.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(s,0,0);const c=yield i(e,o[n]);t(c)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),c(r)}})),s.onerror=()=>{c(new Error("Failed to load image"))},s.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[c.type]:c})]),c}catch(c){throw console.error(`Failed to copy to clipboard. message: ${c.message}`),c}}))}function f(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function h(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const m=(e,n,t)=>{const r=Object.keys(e),o=Object.keys(n);if(r.length!==o.length)return!1;for(let i=0;i{if(e===n)return!0;if(y(e)&&y(n)&&isNaN(e)&&isNaN(n))return!0;if(v(e)&&v(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const r=[...e],o=[...n];return m(r,o,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[r,o]of e)if(!n.has(r)||!g(o,n.get(r),t))return!1;return!0}return m(e,n,t)};function w(e,n){return g(e,n,new WeakMap)}function v(e){return"function"==typeof e}function b(e){return null==e}function y(e){return"number"==typeof e}function x(e){return!function(e){return Object(e)!==e}(e)}function j(e){return x(e)&&"[object Object]"===Object.prototype.toString.call(e)}function k(e){return e===window}function E(){}function C(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function B(e){return Object.keys(e)}const $={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};B($);function F(e,n){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function O(e,n,t){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=v(t)?t():t;r.setItem(n,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${n}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/087cca41.64dcef64.js b/assets/js/087cca41.64dcef64.js deleted file mode 100644 index 22a4f730f..000000000 --- a/assets/js/087cca41.64dcef64.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[7168],{555:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>c,default:()=>h,frontMatter:()=>a,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"react/hooks/useLocalStorage","title":"useLocalStorage","description":"React v18\ubd80\ud130 \uc9c0\uc6d0\ud558\ub294 useSyncExternalStore \uc744 \ud65c\uc6a9\ud574 \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 \ub0b4\uc758 \ud2b9\uc815 key \ub370\uc774\ud130\ub97c \uad6c\ub3c5\ud558\uace0, \uad6c\ub3c5 \uc911\uc778 \ub370\uc774\ud130\uc5d0 \ubcc0\ud654\uac00 \uc788\uc744 \uc2dc \uc774\ub97c \ub3d9\uae30\ud654\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useLocalStorage.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useLocalStorage","permalink":"/modern-kit/docs/react/hooks/useLocalStorage","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useKeyDown","permalink":"/modern-kit/docs/react/hooks/useKeyDown"},"next":{"title":"useMediaQuery","permalink":"/modern-kit/docs/react/hooks/useMediaQuery"}}');var o=n(6206),s=n(3267),i=n(4027);const a={},c="useLocalStorage",l={},u=()=>{const e={button:"button",div:"div",p:"p",...(0,s.R)()},{state:t,setState:n,removeState:r}=(0,i.Mj)({key:"test",initialValue:"default"});return(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.p,{children:"\uac1c\ubc1c\uc790 \ub3c4\uad6c\uc5d0\uc11c \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\ub97c \ud655\uc778\ud574\ubcf4\uc138\uc694!"}),(0,o.jsxs)(e.p,{children:["state: ",t]}),(0,o.jsx)(e.button,{onClick:()=>n("foo"),children:'\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "test"key\uc5d0 "foo"\ub370\uc774\ud130 \uc800\uc7a5'}),(0,o.jsx)(e.button,{onClick:()=>n("bar"),children:'\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "test"key\uc5d0 "bar"\ub370\uc774\ud130 \uc800\uc7a5'}),(0,o.jsx)(e.button,{onClick:()=>r(),children:'\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "test"key \uc81c\uac70'})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",strong:"strong",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"uselocalstorage",children:"useLocalStorage"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"React v18"}),"\ubd80\ud130 \uc9c0\uc6d0\ud558\ub294 ",(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.a,{href:"https://react.dev/reference/react/useSyncExternalStore",children:"useSyncExternalStore"})})," \uc744 \ud65c\uc6a9\ud574 \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 \ub0b4\uc758 \ud2b9\uc815 ",(0,o.jsx)(t.code,{children:"key"})," \ub370\uc774\ud130\ub97c \uad6c\ub3c5\ud558\uace0, \uad6c\ub3c5 \uc911\uc778 \ub370\uc774\ud130\uc5d0 \ubcc0\ud654\uac00 \uc788\uc744 \uc2dc \uc774\ub97c \ub3d9\uae30\ud654\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:["\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\uc5d0 \uad6c\ub3c5\ud558\uace0\uc790 \ud558\ub294 ",(0,o.jsx)(t.code,{children:"key"}),"\uac00 \uc5c6\uc744 \uacbd\uc6b0 \ubc18\ud658\ud560 ",(0,o.jsx)(t.code,{children:"initialValue"}),"\ub85c \ucd08\uae30\uac12\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub610\ud55c, ",(0,o.jsx)(t.code,{children:"\uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(SSR)"}),"\uc758 \uacbd\uc6b0 \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\uac00 \ub3d9\uc791\ud558\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0 ",(0,o.jsx)(t.code,{children:"initialValue"}),"\uac00 \ubc18\ud658\ub429\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"setState"}),"\ub294 \uac12 \uc790\uccb4\ub97c \ub118\uae38 \uc218 \uc788\uc73c\uba70, \ud568\uc218\ub3c4 \ub118\uae38 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud568\uc218\ub85c \ud65c\uc6a9 \uc2dc\uc5d0 \uc778\uc790\ub85c state\ub97c \uac00\uc838\uc62c \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",children:"const { state, setState, removeState } = useLocalStorage({\n key: 'test',\n initialValue: [1, 2],\n});\n\nsetState([1, 2, 3]);\nsetState(state => [...state, 3]);\n"})}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsxs)(t.p,{children:["initialValue\ub97c \ub118\uaca8\uc8fc\uba74 \ub354\uc6b1 ",(0,o.jsx)(t.code,{children:"\uba85\ud655\ud55c \ud0c0\uc785 \ucd94\ub860"}),"\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",children:"const { state, setState } = useLocalStorage({\n key: 'test',\n});\n\nstate; // number[] | null\nsetState(state => {\n state; // number[] | null\n});\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",children:"const { state, setState } = useLocalStorage({\n key: 'test',\n initialValue: [],\n});\n\nstate; // number[]\nsetState(state => {\n state; // number[]\n});\n"})}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useLocalStorage/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseLocalStorageWithoutInitialValueProps {\n key: string;\n}\n\ninterface UseLocalStorageWithInitialValueProps {\n key: string;\n initialValue: T | (() => T);\n}\n\ntype UseLocalStorageProps =\n | UseLocalStorageWithoutInitialValueProps\n | UseLocalStorageWithInitialValueProps;\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",children:"// \ud568\uc218 \uc624\ubc84\ub85c\ub529\nfunction useLocalStorage({\n key,\n initialValue,\n}: UseLocalStorageWithInitialValueProps): {\n state: T;\n setState: Dispatch>;\n removeState: () => void;\n};\n\nfunction useLocalStorage({\n key,\n}: UseLocalStorageWithoutInitialValueProps): {\n state: T | null;\n setState: Dispatch>;\n removeState: () => void;\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useLocalStorage } from '@modern-kit/react';\n\nconst Example = () => {\n const { state, setState, removeState } = useLocalStorage({\n key: 'test',\n initialValue: 'default',\n });\n\n return (\n
\n

\uac1c\ubc1c\uc790 \ub3c4\uad6c\uc5d0\uc11c \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\ub97c \ud655\uc778\ud574\ubcf4\uc138\uc694!

\n

state: {state}

\n \n \n \n
\n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(u,{})]})}function h(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(f,{...e})}):f(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>Me,$I:()=>oe,AE:()=>Xe,BL:()=>J,DX:()=>I,FT:()=>at,Fo:()=>et,Hn:()=>st,I5:()=>Ee,JF:()=>Ve,K:()=>le,K$:()=>Ue,M0:()=>Oe,ML:()=>ne,Mj:()=>ye,Mk:()=>Te,Mo:()=>se,NT:()=>We,QV:()=>He,Ub:()=>xe,Ut:()=>Ce,W7:()=>H,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>_e,Zu:()=>ce,_1:()=>Re,_g:()=>nt,aL:()=>U,aY:()=>Ie,bB:()=>Y,d7:()=>B,eG:()=>it,fN:()=>ae,fm:()=>G,gl:()=>M,hN:()=>A,iD:()=>de,iQ:()=>Pe,jd:()=>ie,lW:()=>lt,oD:()=>K,oo:()=>Le,pL:()=>q,qi:()=>ue,rN:()=>Ne,tD:()=>ke,u8:()=>Z,wY:()=>Be,xV:()=>P,xh:()=>tt,zy:()=>Q});var r=n(6206),o=n(4382),s=n(3683),i=n(5086),a=n(7197),c=(n(1604),n(5938));function l(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function g(){return typeof window>"u"}function m(){return!g()}function w(e){return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const b=e=>f(void 0,0,void 0,(function*(){return w(yield(yield fetch(e)).text())}));function v(e,t){var n;return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return b(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const s=yield p(e,h[t]);n(s)}catch(s){console.error(`Failed to load image. message: ${s.mesaage}`),r(s)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let s=0;s{if(e===t||j(e)&&j(t)&&isNaN(e)&&isNaN(t))return!0;if(k(e)&&k(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!S(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function x(e,t){return S(e,t,new WeakMap)}function k(e){return"function"==typeof e}function j(e){return"number"==typeof e}function C(e){return!function(e){return Object(e)!==e}(e)}function E(){}function L(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const R=(...e)=>t=>e.forEach((e=>{if(k(e))e(t);else if(null!=e){e.current=t}}));function O(...e){return(0,o.useCallback)(R(...e),e)}const I=o.forwardRef(((e,t)=>{const{children:n}=e,s=l(e,["children"]),i=o.Children.toArray(n),a=i.find(T);if(a){const e=a.props.children,n=i.map((t=>t===a?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(N,Object.assign({},s,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(N,Object.assign({},s,{ref:t,children:n}))}));I.displayName="Slot";const N=o.forwardRef(((e,t)=>{const{children:n}=e,r=l(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],s=t[r];/^on[A-Z]/.test(r)?o&&s?n[r]=(...e)=>{s(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),s):"className"===r&&(n[r]=[o,s].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?R(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));N.displayName="SlotClone";const P=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function T(e){return o.isValidElement(e)&&e.type===P}var F="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const M=d(((e,t)=>{var{ratio:n,style:o,as:i="div",asChild:a=!1}=e,c=l(e,["ratio","style","as","asChild"]);const u=a?I:i,d=Object.assign({aspectRatio:n},o),f=a?c.className:s(F,c.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},c))})),V=()=>E,$=()=>!1,W=()=>!0;function Y({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(V,$,W)?e:t}function D(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const A=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>D()?(0,r.jsx)(r.Fragment,{children:t}):e;function X(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function _(e){const t=X(e);(0,o.useEffect)((()=>()=>t()),[t])}function z(e,t=x){const[n,r]=(0,o.useState)(e),s=X(t);return(0,o.useEffect)((()=>{s(n,e)||r(e)}),[s,n,e]),n}function B(e,t,n){const r=X(e),s=z(n),a=(0,o.useMemo)((()=>(0,i.A)(r,t,s)),[r,t,s]);return _((()=>a.cancel())),a}const U=({children:e,capture:t,wait:n,options:r})=>{const s=o.Children.only(e),i=B(((...e)=>{const n=s?.props;if(n&&k(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(s,{[t]:i})};function J({onIntersectStart:e=E,onIntersectEnd:t=E,enabled:n=!0,calledOnce:r=!1,root:s=null,threshold:i=0,rootMargin:a="0px 0px 0px 0px"}){const c=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=X((([n],o)=>{if(!n)return;const s=n.target;n.isIntersecting?(l.current=!0,c.current+=1,e(n)):l.current&&(l.current=!1,c.current+=1,t(n)),r&&c.current>1&&o.unobserve(s)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:i,root:s,rootMargin:a}),u.current.observe(e))}),[n,i,s,a,d])}}const K=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:s,rootMargin:i}=e,a=l(e,["src","threshold","root","rootMargin"]);const{ref:c}=J({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:s,rootMargin:i});return(0,r.jsx)("img",Object.assign({ref:O(t,c)},a))}));K.displayName="LazyImage";const H=(0,o.forwardRef)(((e,t)=>{var{width:n,height:s,fallback:i,className:a,style:c,duration:u="0.2s",onLoad:d}=e,f=l(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),g=!h,m=(0,o.useMemo)((()=>({position:"relative",width:n,height:s})),[n,s]),w=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:g?0:1,transition:`opacity ${u}`},c)),[g,u,c]),b=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),v=a?`lazy-image-wrapper ${a}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:m,children:[g&&i,(0,r.jsx)(K,Object.assign({ref:t,width:n,height:s,style:w,onLoad:b},f))]})}));H.displayName="FallbackLazyImage";const Q=({condition:e,trueComponent:t,falseComponent:n})=>{const s=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:s?t:n})},Z=({onScrollAction:e,children:t,root:n,threshold:o,enabled:s,triggerPosition:i="after",rootMargin:a="150px 0px"})=>{const{ref:c}=J({onIntersectStart:e,root:n,threshold:o,enabled:s,rootMargin:a});return(0,r.jsxs)(r.Fragment,{children:["before"===i&&(0,r.jsx)("div",{ref:c}),t,"after"===i&&(0,r.jsx)("div",{ref:c})]})},q=d(((e,t)=>{var{children:n,as:s="div",asChild:i=!1}=e,a=l(e,["children","as","asChild"]);const c=i?I:s,{ref:u}=J(a);if(i&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(c,Object.assign({ref:R(t,u)},a,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const s=(0,o.useCallback)(((e,n)=>function(e){return C(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},s(e,t))))})},ee=m()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=X(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),s=(0,o.useMemo)((()=>function(){if(g())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,s,(({target:t})=>{if(!r.current)return;const o=r.current,s=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!s&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:s="div",asChild:i=!1,onPointerDown:a,excludeRefs:c=[]}=e,u=l(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(a,{excludeRefs:c}),f=i?I:s;if(i&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:R(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const se=({itemKey:e,items:t=[],separator:n,renderItem:s,separatorInterval:i=1,includeLastSeparator:a=!1})=>{const c=(0,o.useCallback)((e=>e===t.length-1?a:(e+1)%i==0),[a,i,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[s(e,t),c(t)&&n]})})},ie=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ae=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function ce(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function le(e=!0){const t=k(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!s.current){s.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{s.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),s=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield w(e);return t(n),!0}catch{return t(null),!1}}))),[]),i=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),a=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:s,copyImage:i,readText:a,readContents:c}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},ge=e=>pe[e],me=ge("localStorage"),we=e=>window.localStorage.getItem(e),be=e=>JSON.stringify(e),ve=e=>(me.subscribe(e),()=>{me.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=k(n)?n():n,s=(0,o.useSyncExternalStore)(ve,(()=>we(t)),(()=>be(r)));return{state:(0,o.useMemo)((()=>s?L(s):r),[s,r]),setState:(0,o.useCallback)((e=>{try{const n=we(t),o=n?L(n):r,s=k(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(s)),me.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),me.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const Se=(e,t)=>m()?window.matchMedia(e).matches:t??!1;function xe(e,t){const[n,r]=(0,o.useState)(Se(e,t)),s=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",s),n}function ke(){return xe("(prefers-color-scheme: dark)")?"dark":"light"}const je="color-scheme";function Ce({defaultValue:e,key:t=je,shouldSetBodyClass:n=!1}={}){const r=ke(),s=k(e)?e():e,{state:i,setState:a}=ye({key:t,initialValue:s??r}),c=(0,o.useCallback)((()=>{a((e=>"dark"===e?"light":"dark"))}),[a]),l=(0,o.useCallback)((()=>{a("dark")}),[a]),u=(0,o.useCallback)((()=>{a("light")}),[a]),d=(0,o.useCallback)((()=>{a(r)}),[a,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(i),()=>{n&&document.body.classList.remove(i)})),[i,n]),{colorScheme:i,preferredColorScheme:r,setToggleMode:c,setDarkMode:l,setLightMode:u,setPreferredMode:d}}function Ee(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),s=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),i=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:s,reset:i}}function Le({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,s]=(0,o.useState)(t),i=r0,c=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),l=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const i=c(e,t);o&&o({prev:r,next:i}),s(i)}),[n,r,c]),u=(0,o.useCallback)((e=>{l("nextStep",!i,e)}),[i,l]),d=(0,o.useCallback)((e=>{l("prevStep",!a,e)}),[a,l]),f=(0,o.useCallback)(((t,n)=>{const o=k(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void s(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),s(t)}),[r,t]);return{currentStep:r,hasNextStep:i,hasPrevStep:a,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Re(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:s,resetStep:i}=Le({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:s,resetIndex:i}}function Oe(e,t,n={}){const[r,s]=(0,o.useState)(e);return[r,B(s,t,n)]}function Ie(e,t={}){const[n,r]=(0,o.useState)(""),[s,i]=Oe("",e,t);return{value:n,debouncedValue:s,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),i(t)}),[i]),onReset:(0,o.useCallback)((()=>{r(""),i("")}),[i])}}function Ne(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Pe({onFocus:e=E,onBlur:t=E}={}){const[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(null),i=X((t=>{r(!0),e(t)})),a=X((e=>{r(!1),t(e)})),c=(0,o.useCallback)((()=>{s.current&&(s.current.focus(),r(!0))}),[]);return ne(s,"focus",i),ne(s,"blur",a),{ref:s,isFocus:n,setFocus:c}}function Te({onEnter:e=E,onLeave:t=E}={}){const[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(null),i=X((t=>{r(!0),e(t)})),a=X((e=>{r(!1),t(e)}));return ne(s,"mouseenter",i),ne(s,"mouseleave",a),{ref:s,isHovered:n}}const Fe=e=>{var t;return j(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function Me(e,t){const n=(0,o.useRef)(),r=X(e),{delay:s,enabled:i}=Fe(t),a=(0,o.useCallback)((()=>{n.current=window.setInterval(r,s)}),[r,s]),c=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{c(),a()}),[c,a]);return(0,o.useEffect)((()=>{if(!(s<0)&&i)return a(),()=>c()}),[c,a,i,s]),{set:a,reset:l,clear:c}}function Ve({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),s=X((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];k(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",s),()=>t.removeEventListener("keydown",s)}),[e,s]),r}const $e={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function We(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)($e),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:s,clientY:i,pageX:a,pageY:c}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=s-t.left,u=i-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:s,clientY:i,pageX:a,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Ye=()=>navigator.onLine,De=()=>!0,Ae=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function Xe({onlineAction:e=E,offlineAction:t=E}={}){const n=X((n=>Ae(n,e,t)));return(0,o.useSyncExternalStore)(n,Ye,De)}function _e(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const ze={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function Be(e=E){const[t,n]=(0,o.useState)(ze),r=(0,o.useRef)(null),s=X((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(s);return t.observe(e),()=>{t.unobserve(e)}}),[s]),{ref:r,contentRect:t}}function Ue({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),s=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>s())),[e,r,s]),{ref:t,lock:r,unlock:s}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:s=0,alignY:i="start",alignX:a="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+s+Je(window.innerHeight,r.height,i),left:r.left+window.scrollX+o+Je(window.innerWidth,r.width,a)};const c=e.getBoundingClientRect();return{top:r.top-c.top+e.scrollTop+s+Je(c.height,r.height,i),left:r.left-c.left+e.scrollLeft+o+Je(c.width,r.width,a)}};function He(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:s,top:i}=Ke(r,t,n);r.scrollTo({top:i,left:s,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=ge("sessionStorage"),Ze=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=k(n)?n():n,s=(0,o.useSyncExternalStore)(Ge,(()=>Ze(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>s?L(s):r),[s,r]),setState:(0,o.useCallback)((e=>{try{const n=Ze(t),o=n?L(n):r,s=k(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(s)),Qe.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:s}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[i,a]=(0,o.useState)(n),c=(0,o.useCallback)((e=>{a((t=>{const n=k(e)?e(t):e;return r&&s&&function(e,t,n){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=k(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,s,n),n}))}),[r,s]),l=(0,o.useCallback)((()=>{r&&s&&function(e,t){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,s),a(null)}),[r,s]);return Object.assign({state:i,setState:c,clearState:l},Le(e))}function nt(e,t,n={}){const r=X(e),s=z(n),i=(0,o.useMemo)((()=>(0,a.A)(r,t,s)),[r,t,s]);return _((()=>i.cancel())),i}const rt=e=>{var t;return j(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=X(e),{delay:s,enabled:i}=rt(t),a=(0,o.useCallback)((()=>{n.current=setTimeout(r,s)}),[r,s]),c=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{c(),a()}),[c,a]);return(0,o.useEffect)((()=>{if(!(s<0)&&i)return a(),()=>c()}),[a,c,s,i]),{set:a,reset:l,clear:c}}function st(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function it(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new c.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ct={width:null,height:null};function lt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>g()?ct:{width:window.innerWidth,height:window.innerHeight})),r=B(n,e),s=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",s),t}function ut(e,t,n){const{delay:r,enabled:s}=rt(t),{set:i,reset:a,clear:c}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!s||a()}),[r,s,a,...n]),{set:i,reset:a,clear:c}}}}]); \ No newline at end of file diff --git a/assets/js/087cca41.8c16c0a3.js b/assets/js/087cca41.8c16c0a3.js new file mode 100644 index 000000000..282f439d8 --- /dev/null +++ b/assets/js/087cca41.8c16c0a3.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[7168],{555:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>c,default:()=>p,frontMatter:()=>s,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"react/hooks/useLocalStorage","title":"useLocalStorage","description":"React v18\ubd80\ud130 \uc9c0\uc6d0\ud558\ub294 useSyncExternalStore \uc744 \ud65c\uc6a9\ud574 \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 \ub0b4\uc758 \ud2b9\uc815 key \ub370\uc774\ud130\ub97c \uad6c\ub3c5\ud558\uace0, \uad6c\ub3c5 \uc911\uc778 \ub370\uc774\ud130\uc5d0 \ubcc0\ud654\uac00 \uc788\uc744 \uc2dc \uc774\ub97c \ub3d9\uae30\ud654\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useLocalStorage.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useLocalStorage","permalink":"/modern-kit/docs/react/hooks/useLocalStorage","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useKeyDown","permalink":"/modern-kit/docs/react/hooks/useKeyDown"},"next":{"title":"useMediaQuery","permalink":"/modern-kit/docs/react/hooks/useMediaQuery"}}');var o=n(6206),i=n(3267),a=n(8211);const s={},c="useLocalStorage",l={},u=()=>{const e={button:"button",div:"div",p:"p",...(0,i.R)()},{state:t,setState:n,removeState:r}=(0,a.M)({key:"test",initialValue:"default"});return(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.p,{children:"\uac1c\ubc1c\uc790 \ub3c4\uad6c\uc5d0\uc11c \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\ub97c \ud655\uc778\ud574\ubcf4\uc138\uc694!"}),(0,o.jsxs)(e.p,{children:["state: ",t]}),(0,o.jsx)(e.button,{onClick:()=>n("foo"),children:'\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "test"key\uc5d0 "foo"\ub370\uc774\ud130 \uc800\uc7a5'}),(0,o.jsx)(e.button,{onClick:()=>n("bar"),children:'\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "test"key\uc5d0 "bar"\ub370\uc774\ud130 \uc800\uc7a5'}),(0,o.jsx)(e.button,{onClick:()=>r(),children:'\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "test"key \uc81c\uac70'})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function h(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"uselocalstorage",children:"useLocalStorage"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"React v18"}),"\ubd80\ud130 \uc9c0\uc6d0\ud558\ub294 ",(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.a,{href:"https://react.dev/reference/react/useSyncExternalStore",children:"useSyncExternalStore"})})," \uc744 \ud65c\uc6a9\ud574 \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 \ub0b4\uc758 \ud2b9\uc815 ",(0,o.jsx)(t.code,{children:"key"})," \ub370\uc774\ud130\ub97c \uad6c\ub3c5\ud558\uace0, \uad6c\ub3c5 \uc911\uc778 \ub370\uc774\ud130\uc5d0 \ubcc0\ud654\uac00 \uc788\uc744 \uc2dc \uc774\ub97c \ub3d9\uae30\ud654\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:["\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\uc5d0 \uad6c\ub3c5\ud558\uace0\uc790 \ud558\ub294 ",(0,o.jsx)(t.code,{children:"key"}),"\uac00 \uc5c6\uc744 \uacbd\uc6b0 \ubc18\ud658\ud560 ",(0,o.jsx)(t.code,{children:"initialValue"}),"\ub85c \ucd08\uae30\uac12\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub610\ud55c, ",(0,o.jsx)(t.code,{children:"\uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(SSR)"}),"\uc758 \uacbd\uc6b0 \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\uac00 \ub3d9\uc791\ud558\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0 ",(0,o.jsx)(t.code,{children:"initialValue"}),"\uac00 \ubc18\ud658\ub429\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"setState"}),"\ub294 \uac12 \uc790\uccb4\ub97c \ub118\uae38 \uc218 \uc788\uc73c\uba70, \ud568\uc218\ub3c4 \ub118\uae38 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud568\uc218\ub85c \ud65c\uc6a9 \uc2dc\uc5d0 \uc778\uc790\ub85c state\ub97c \uac00\uc838\uc62c \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",children:"const { state, setState, removeState } = useLocalStorage({\n key: 'test',\n initialValue: [1, 2],\n});\n\nsetState([1, 2, 3]);\nsetState(state => [...state, 3]);\n"})}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsxs)(t.p,{children:["initialValue\ub97c \ub118\uaca8\uc8fc\uba74 \ub354\uc6b1 ",(0,o.jsx)(t.code,{children:"\uba85\ud655\ud55c \ud0c0\uc785 \ucd94\ub860"}),"\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",children:"const { state, setState } = useLocalStorage({\n key: 'test',\n});\n\nstate; // number[] | null\nsetState(state => {\n state; // number[] | null\n});\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",children:"const { state, setState } = useLocalStorage({\n key: 'test',\n initialValue: [],\n});\n\nstate; // number[]\nsetState(state => {\n state; // number[]\n});\n"})}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useLocalStorage/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseLocalStorageWithoutInitialValueProps {\n key: string;\n}\n\ninterface UseLocalStorageWithInitialValueProps {\n key: string;\n initialValue: T | (() => T);\n}\n\ntype UseLocalStorageProps =\n | UseLocalStorageWithoutInitialValueProps\n | UseLocalStorageWithInitialValueProps;\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",children:"// \ud568\uc218 \uc624\ubc84\ub85c\ub529\nfunction useLocalStorage({\n key,\n initialValue,\n}: UseLocalStorageWithInitialValueProps): {\n state: T;\n setState: Dispatch>;\n removeState: () => void;\n};\n\nfunction useLocalStorage({\n key,\n}: UseLocalStorageWithoutInitialValueProps): {\n state: T | null;\n setState: Dispatch>;\n removeState: () => void;\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useLocalStorage } from '@modern-kit/react';\n\nconst Example = () => {\n const { state, setState, removeState } = useLocalStorage({\n key: 'test',\n initialValue: 'default',\n });\n\n return (\n
\n

\uac1c\ubc1c\uc790 \ub3c4\uad6c\uc5d0\uc11c \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\ub97c \ud655\uc778\ud574\ubcf4\uc138\uc694!

\n

state: {state}

\n \n \n \n
\n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(u,{})]})}function p(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},3267:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>s});var r=n(4382);const o={},i=r.createContext(o);function a(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),r.createElement(i.Provider,{value:t},e.children)}},8211:(e,t,n)=>{n.d(t,{M:()=>u});var r=n(9340),o=n(4382);const i="modern-kit-local-storage",a={key:i,subscribe:e=>{window.addEventListener(i,e)},unsubscribe:e=>{window.removeEventListener(i,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(i))}},s=e=>window.localStorage.getItem(e),c=e=>JSON.stringify(e),l=e=>(a.subscribe(e),()=>{a.unsubscribe(e)});function u(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=(0,r.Tn)(n)?n():n,u=(0,o.useSyncExternalStore)(l,(()=>s(t)),(()=>c(i)));return{state:(0,o.useMemo)((()=>u?(0,r.Ol)(u):i),[u,i]),setState:(0,o.useCallback)((e=>{try{const n=s(t),o=n?(0,r.Ol)(n):i,c=(0,r.Tn)(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(c)),a.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,i]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),a.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}},9340:(e,t,n)=>{function r(e,t,n,r){return new(n||(n=Promise))((function(o,i){function a(e){try{c(r.next(e))}catch(t){i(t)}}function s(e){try{c(r.throw(e))}catch(t){i(t)}}function c(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,s)}c((r=r.apply(e,t||[])).next())}))}n.d(t,{Et:()=>x,Fr:()=>s,Gp:()=>y,Ol:()=>E,Qd:()=>S,S$:()=>a,Tn:()=>w,Zp:()=>h,dK:()=>l,fl:()=>T,gD:()=>b,i5:()=>f,if:()=>p,l6:()=>k,lQ:()=>j,nS:()=>d,ni:()=>$,oc:()=>c}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,t)=>new Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function a(){return"undefined"==typeof window}function s(){if(a())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function c(){return!a()}function l(e){return r(this,void 0,void 0,(function*(){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const u=e=>r(void 0,void 0,void 0,(function*(){const t=yield fetch(e);return l(yield t.text())}));function d(e,t){var n;return r(this,void 0,void 0,(function*(){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return u(e);if(!("write"in window.navigator.clipboard))return u(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return u(e);const a=yield function(e,t="png"){return new Promise(((n,a)=>{const s=new Image;s.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=s.width,e.height=s.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(s,0,0);const a=yield i(e,o[t]);n(a)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),a(r)}})),s.onerror=()=>{a(new Error("Failed to load image"))},s.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[a.type]:a})]),a}catch(a){throw console.error(`Failed to copy to clipboard. message: ${a.message}`),a}}))}function h(){return r(this,void 0,void 0,(function*(){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(){return r(this,void 0,void 0,(function*(){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function f(e,t){return Object.prototype.hasOwnProperty.call(e,t)}const g=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t)return!0;if(x(e)&&x(t)&&isNaN(e)&&isNaN(t))return!0;if(w(e)&&w(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return g(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!m(o,t.get(r),n))return!1;return!0}return g(e,t,n)};function y(e,t){return m(e,t,new WeakMap)}function w(e){return"function"==typeof e}function b(e){return null==e}function x(e){return"number"==typeof e}function v(e){return!function(e){return Object(e)!==e}(e)}function S(e){return v(e)&&"[object Object]"===Object.prototype.toString.call(e)}function k(e){return e===window}function j(){}function E(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}function C(e){return Object.keys(e)}const L={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};C(L);function T(e,t){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}function $(e,t,n){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=w(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/0ed4549e.bb34a41a.js b/assets/js/0ed4549e.bb34a41a.js deleted file mode 100644 index ba87e8a32..000000000 --- a/assets/js/0ed4549e.bb34a41a.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[9647],{8588:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>c,default:()=>h,frontMatter:()=>a,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"react/hooks/useSessionStorage","title":"useSessionStorage","description":"React v18\ubd80\ud130 \uc9c0\uc6d0\ud558\ub294 useSyncExternalStore \uc744 \ud65c\uc6a9\ud574 \uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 \ub0b4\uc758 \ud2b9\uc815 key \ub370\uc774\ud130\ub97c \uad6c\ub3c5\ud558\uace0, \uad6c\ub3c5 \uc911\uc778 \ub370\uc774\ud130\uc5d0 \ubcc0\ud654\uac00 \uc788\uc744 \uc2dc \uc774\ub97c \ub3d9\uae30\ud654\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useSessionStorage.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useSessionStorage","permalink":"/modern-kit/docs/react/hooks/useSessionStorage","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useScrollTo","permalink":"/modern-kit/docs/react/hooks/useScrollTo"},"next":{"title":"useStep","permalink":"/modern-kit/docs/react/hooks/useStep"}}');var o=n(6206),s=n(3267),i=n(4027);const a={},c="useSessionStorage",l={},u=()=>{const e={button:"button",div:"div",p:"p",...(0,s.R)()},{state:t,setState:n,removeState:r}=(0,i.Fo)({key:"test",initialValue:"default"});return(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.p,{children:"\uac1c\ubc1c\uc790 \ub3c4\uad6c\uc5d0\uc11c \uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0\ub97c \ud655\uc778\ud574\ubcf4\uc138\uc694!"}),(0,o.jsxs)(e.p,{children:["state: ",t]}),(0,o.jsx)(e.button,{onClick:()=>n("foo"),children:'\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "test"key\uc5d0 "foo"\ub370\uc774\ud130 \uc800\uc7a5'}),(0,o.jsx)(e.button,{onClick:()=>n("bar"),children:'\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "test"key\uc5d0 "bar"\ub370\uc774\ud130 \uc800\uc7a5'}),(0,o.jsx)(e.button,{onClick:()=>r(),children:'\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "test"key \uc81c\uac70'})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",strong:"strong",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usesessionstorage",children:"useSessionStorage"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"React v18"}),"\ubd80\ud130 \uc9c0\uc6d0\ud558\ub294 ",(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.a,{href:"https://react.dev/reference/react/useSyncExternalStore",children:"useSyncExternalStore"})})," \uc744 \ud65c\uc6a9\ud574 \uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 \ub0b4\uc758 \ud2b9\uc815 ",(0,o.jsx)(t.code,{children:"key"})," \ub370\uc774\ud130\ub97c \uad6c\ub3c5\ud558\uace0, \uad6c\ub3c5 \uc911\uc778 \ub370\uc774\ud130\uc5d0 \ubcc0\ud654\uac00 \uc788\uc744 \uc2dc \uc774\ub97c \ub3d9\uae30\ud654\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:["\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0\uc5d0 \uad6c\ub3c5\ud558\uace0\uc790 \ud558\ub294 ",(0,o.jsx)(t.code,{children:"key"}),"\uac00 \uc5c6\uc744 \uacbd\uc6b0 \ubc18\ud658\ud560 ",(0,o.jsx)(t.code,{children:"initialValue"}),"\ub85c \ucd08\uae30\uac12\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub610\ud55c, ",(0,o.jsx)(t.code,{children:"\uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(SSR)"}),"\uc758 \uacbd\uc6b0 \uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0\uac00 \ub3d9\uc791\ud558\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0 ",(0,o.jsx)(t.code,{children:"initialValue"}),"\uac00 \ubc18\ud658\ub429\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"setState"}),"\ub294 \uac12 \uc790\uccb4\ub97c \ub118\uae38 \uc218 \uc788\uc73c\uba70, \ud568\uc218\ub3c4 \ub118\uae38 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud568\uc218\ub85c \ud65c\uc6a9 \uc2dc\uc5d0 \uc778\uc790\ub85c state\ub97c \uac00\uc838\uc62c \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",children:"const { state, setState, removeState } = useSessionStorage({\n key: 'test',\n initialValue: [1, 2],\n});\n\nsetState([1, 2, 3]);\nsetState(state => [...state, 3]);\n"})}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsxs)(t.p,{children:["initialValue\ub97c \ub118\uaca8\uc8fc\uba74 \ub354\uc6b1 ",(0,o.jsx)(t.code,{children:"\uba85\ud655\ud55c \ud0c0\uc785 \ucd94\ub860"}),"\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",children:"const { state, setState } = useSessionStorage({\n key: 'test',\n});\n\nstate; // number[] | null\nsetState(state => {\n state; // number[] | null\n});\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",children:"const { state, setState } = useSessionStorage({\n key: 'test',\n initialValue: [],\n});\n\nstate; // number[]\nsetState(state => {\n state; // number[]\n});\n"})}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useSessionStorage/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseSessionStorageWithoutInitialValueProps {\n key: string;\n}\n\ninterface UseSessionStorageWithInitialValueProps {\n key: string;\n initialValue: T | (() => T);\n}\n\ntype UseSessionStorageProps =\n | UseSessionStorageWithoutInitialValueProps\n | UseSessionStorageWithInitialValueProps;\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",children:"// \ud568\uc218 \uc624\ubc84\ub85c\ub529\nfunction useSessionStorage({\n key,\n initialValue,\n}: UseSessionStorageWithInitialValueProps): {\n state: T;\n setState: Dispatch>;\n removeState: () => void;\n};\n\nfunction useSessionStorage({\n key,\n}: UseSessionStorageWithoutInitialValueProps): {\n state: T | null;\n setState: Dispatch>;\n removeState: () => void;\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useSessionStorage } from '@modern-kit/react';\n\nconst Example = () => {\n const { state, setState, removeState } = useSessionStorage({\n key: 'test',\n initialValue: 'default',\n });\n\n return (\n
\n

\uac1c\ubc1c\uc790 \ub3c4\uad6c\uc5d0\uc11c \uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0\ub97c \ud655\uc778\ud574\ubcf4\uc138\uc694!

\n

state: {state}

\n \n \n \n
\n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(u,{})]})}function h(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(f,{...e})}):f(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>Me,$I:()=>oe,AE:()=>Xe,BL:()=>J,DX:()=>N,FT:()=>at,Fo:()=>et,Hn:()=>st,I5:()=>Ee,JF:()=>Ve,K:()=>le,K$:()=>Ue,M0:()=>Ie,ML:()=>ne,Mj:()=>ye,Mk:()=>Pe,Mo:()=>se,NT:()=>We,QV:()=>Ke,Ub:()=>xe,Ut:()=>Ce,W7:()=>K,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>_e,Zu:()=>ce,_1:()=>Oe,_g:()=>nt,aL:()=>U,aY:()=>Ne,bB:()=>Y,d7:()=>B,eG:()=>it,fN:()=>ae,fm:()=>G,gl:()=>M,hN:()=>D,iD:()=>de,iQ:()=>Fe,jd:()=>ie,lW:()=>lt,oD:()=>H,oo:()=>Re,pL:()=>q,qi:()=>ue,rN:()=>Te,tD:()=>ke,u8:()=>Q,wY:()=>Be,xV:()=>F,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),s=n(3683),i=n(5086),a=n(7197),c=(n(1604),n(5938));function l(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function g(){return typeof window>"u"}function m(){return!g()}function b(e){return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const w=e=>f(void 0,0,void 0,(function*(){return b(yield(yield fetch(e)).text())}));function v(e,t){var n;return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return w(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const s=yield p(e,h[t]);n(s)}catch(s){console.error(`Failed to load image. message: ${s.mesaage}`),r(s)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let s=0;s{if(e===t||j(e)&&j(t)&&isNaN(e)&&isNaN(t))return!0;if(k(e)&&k(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!S(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function x(e,t){return S(e,t,new WeakMap)}function k(e){return"function"==typeof e}function j(e){return"number"==typeof e}function C(e){return!function(e){return Object(e)!==e}(e)}function E(){}function R(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const O=(...e)=>t=>e.forEach((e=>{if(k(e))e(t);else if(null!=e){e.current=t}}));function I(...e){return(0,o.useCallback)(O(...e),e)}const N=o.forwardRef(((e,t)=>{const{children:n}=e,s=l(e,["children"]),i=o.Children.toArray(n),a=i.find(P);if(a){const e=a.props.children,n=i.map((t=>t===a?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(T,Object.assign({},s,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(T,Object.assign({},s,{ref:t,children:n}))}));N.displayName="Slot";const T=o.forwardRef(((e,t)=>{const{children:n}=e,r=l(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],s=t[r];/^on[A-Z]/.test(r)?o&&s?n[r]=(...e)=>{s(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),s):"className"===r&&(n[r]=[o,s].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?O(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));T.displayName="SlotClone";const F=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function P(e){return o.isValidElement(e)&&e.type===F}var L="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const M=d(((e,t)=>{var{ratio:n,style:o,as:i="div",asChild:a=!1}=e,c=l(e,["ratio","style","as","asChild"]);const u=a?N:i,d=Object.assign({aspectRatio:n},o),f=a?c.className:s(L,c.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},c))})),V=()=>E,$=()=>!1,W=()=>!0;function Y({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(V,$,W)?e:t}function A(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const D=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>A()?(0,r.jsx)(r.Fragment,{children:t}):e;function X(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function _(e){const t=X(e);(0,o.useEffect)((()=>()=>t()),[t])}function z(e,t=x){const[n,r]=(0,o.useState)(e),s=X(t);return(0,o.useEffect)((()=>{s(n,e)||r(e)}),[s,n,e]),n}function B(e,t,n){const r=X(e),s=z(n),a=(0,o.useMemo)((()=>(0,i.A)(r,t,s)),[r,t,s]);return _((()=>a.cancel())),a}const U=({children:e,capture:t,wait:n,options:r})=>{const s=o.Children.only(e),i=B(((...e)=>{const n=s?.props;if(n&&k(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(s,{[t]:i})};function J({onIntersectStart:e=E,onIntersectEnd:t=E,enabled:n=!0,calledOnce:r=!1,root:s=null,threshold:i=0,rootMargin:a="0px 0px 0px 0px"}){const c=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=X((([n],o)=>{if(!n)return;const s=n.target;n.isIntersecting?(l.current=!0,c.current+=1,e(n)):l.current&&(l.current=!1,c.current+=1,t(n)),r&&c.current>1&&o.unobserve(s)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:i,root:s,rootMargin:a}),u.current.observe(e))}),[n,i,s,a,d])}}const H=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:s,rootMargin:i}=e,a=l(e,["src","threshold","root","rootMargin"]);const{ref:c}=J({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:s,rootMargin:i});return(0,r.jsx)("img",Object.assign({ref:I(t,c)},a))}));H.displayName="LazyImage";const K=(0,o.forwardRef)(((e,t)=>{var{width:n,height:s,fallback:i,className:a,style:c,duration:u="0.2s",onLoad:d}=e,f=l(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),g=!h,m=(0,o.useMemo)((()=>({position:"relative",width:n,height:s})),[n,s]),b=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:g?0:1,transition:`opacity ${u}`},c)),[g,u,c]),w=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),v=a?`lazy-image-wrapper ${a}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:m,children:[g&&i,(0,r.jsx)(H,Object.assign({ref:t,width:n,height:s,style:b,onLoad:w},f))]})}));K.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const s=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:s?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:s,triggerPosition:i="after",rootMargin:a="150px 0px"})=>{const{ref:c}=J({onIntersectStart:e,root:n,threshold:o,enabled:s,rootMargin:a});return(0,r.jsxs)(r.Fragment,{children:["before"===i&&(0,r.jsx)("div",{ref:c}),t,"after"===i&&(0,r.jsx)("div",{ref:c})]})},q=d(((e,t)=>{var{children:n,as:s="div",asChild:i=!1}=e,a=l(e,["children","as","asChild"]);const c=i?N:s,{ref:u}=J(a);if(i&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(c,Object.assign({ref:O(t,u)},a,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const s=(0,o.useCallback)(((e,n)=>function(e){return C(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},s(e,t))))})},ee=m()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=X(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),s=(0,o.useMemo)((()=>function(){if(g())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,s,(({target:t})=>{if(!r.current)return;const o=r.current,s=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!s&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:s="div",asChild:i=!1,onPointerDown:a,excludeRefs:c=[]}=e,u=l(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(a,{excludeRefs:c}),f=i?N:s;if(i&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:O(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const se=({itemKey:e,items:t=[],separator:n,renderItem:s,separatorInterval:i=1,includeLastSeparator:a=!1})=>{const c=(0,o.useCallback)((e=>e===t.length-1?a:(e+1)%i==0),[a,i,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[s(e,t),c(t)&&n]})})},ie=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ae=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function ce(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function le(e=!0){const t=k(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!s.current){s.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{s.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),s=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield b(e);return t(n),!0}catch{return t(null),!1}}))),[]),i=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),a=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:s,copyImage:i,readText:a,readContents:c}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},ge=e=>pe[e],me=ge("localStorage"),be=e=>window.localStorage.getItem(e),we=e=>JSON.stringify(e),ve=e=>(me.subscribe(e),()=>{me.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=k(n)?n():n,s=(0,o.useSyncExternalStore)(ve,(()=>be(t)),(()=>we(r)));return{state:(0,o.useMemo)((()=>s?R(s):r),[s,r]),setState:(0,o.useCallback)((e=>{try{const n=be(t),o=n?R(n):r,s=k(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(s)),me.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),me.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const Se=(e,t)=>m()?window.matchMedia(e).matches:t??!1;function xe(e,t){const[n,r]=(0,o.useState)(Se(e,t)),s=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",s),n}function ke(){return xe("(prefers-color-scheme: dark)")?"dark":"light"}const je="color-scheme";function Ce({defaultValue:e,key:t=je,shouldSetBodyClass:n=!1}={}){const r=ke(),s=k(e)?e():e,{state:i,setState:a}=ye({key:t,initialValue:s??r}),c=(0,o.useCallback)((()=>{a((e=>"dark"===e?"light":"dark"))}),[a]),l=(0,o.useCallback)((()=>{a("dark")}),[a]),u=(0,o.useCallback)((()=>{a("light")}),[a]),d=(0,o.useCallback)((()=>{a(r)}),[a,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(i),()=>{n&&document.body.classList.remove(i)})),[i,n]),{colorScheme:i,preferredColorScheme:r,setToggleMode:c,setDarkMode:l,setLightMode:u,setPreferredMode:d}}function Ee(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),s=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),i=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:s,reset:i}}function Re({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,s]=(0,o.useState)(t),i=r0,c=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),l=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const i=c(e,t);o&&o({prev:r,next:i}),s(i)}),[n,r,c]),u=(0,o.useCallback)((e=>{l("nextStep",!i,e)}),[i,l]),d=(0,o.useCallback)((e=>{l("prevStep",!a,e)}),[a,l]),f=(0,o.useCallback)(((t,n)=>{const o=k(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void s(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),s(t)}),[r,t]);return{currentStep:r,hasNextStep:i,hasPrevStep:a,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Oe(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:s,resetStep:i}=Re({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:s,resetIndex:i}}function Ie(e,t,n={}){const[r,s]=(0,o.useState)(e);return[r,B(s,t,n)]}function Ne(e,t={}){const[n,r]=(0,o.useState)(""),[s,i]=Ie("",e,t);return{value:n,debouncedValue:s,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),i(t)}),[i]),onReset:(0,o.useCallback)((()=>{r(""),i("")}),[i])}}function Te(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Fe({onFocus:e=E,onBlur:t=E}={}){const[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(null),i=X((t=>{r(!0),e(t)})),a=X((e=>{r(!1),t(e)})),c=(0,o.useCallback)((()=>{s.current&&(s.current.focus(),r(!0))}),[]);return ne(s,"focus",i),ne(s,"blur",a),{ref:s,isFocus:n,setFocus:c}}function Pe({onEnter:e=E,onLeave:t=E}={}){const[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(null),i=X((t=>{r(!0),e(t)})),a=X((e=>{r(!1),t(e)}));return ne(s,"mouseenter",i),ne(s,"mouseleave",a),{ref:s,isHovered:n}}const Le=e=>{var t;return j(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function Me(e,t){const n=(0,o.useRef)(),r=X(e),{delay:s,enabled:i}=Le(t),a=(0,o.useCallback)((()=>{n.current=window.setInterval(r,s)}),[r,s]),c=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{c(),a()}),[c,a]);return(0,o.useEffect)((()=>{if(!(s<0)&&i)return a(),()=>c()}),[c,a,i,s]),{set:a,reset:l,clear:c}}function Ve({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),s=X((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];k(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",s),()=>t.removeEventListener("keydown",s)}),[e,s]),r}const $e={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function We(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)($e),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:s,clientY:i,pageX:a,pageY:c}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=s-t.left,u=i-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:s,clientY:i,pageX:a,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Ye=()=>navigator.onLine,Ae=()=>!0,De=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function Xe({onlineAction:e=E,offlineAction:t=E}={}){const n=X((n=>De(n,e,t)));return(0,o.useSyncExternalStore)(n,Ye,Ae)}function _e(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const ze={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function Be(e=E){const[t,n]=(0,o.useState)(ze),r=(0,o.useRef)(null),s=X((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(s);return t.observe(e),()=>{t.unobserve(e)}}),[s]),{ref:r,contentRect:t}}function Ue({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),s=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>s())),[e,r,s]),{ref:t,lock:r,unlock:s}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:s=0,alignY:i="start",alignX:a="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+s+Je(window.innerHeight,r.height,i),left:r.left+window.scrollX+o+Je(window.innerWidth,r.width,a)};const c=e.getBoundingClientRect();return{top:r.top-c.top+e.scrollTop+s+Je(c.height,r.height,i),left:r.left-c.left+e.scrollLeft+o+Je(c.width,r.width,a)}};function Ke(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:s,top:i}=He(r,t,n);r.scrollTo({top:i,left:s,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=ge("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=k(n)?n():n,s=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>s?R(s):r),[s,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?R(n):r,s=k(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(s)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:s}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[i,a]=(0,o.useState)(n),c=(0,o.useCallback)((e=>{a((t=>{const n=k(e)?e(t):e;return r&&s&&function(e,t,n){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=k(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,s,n),n}))}),[r,s]),l=(0,o.useCallback)((()=>{r&&s&&function(e,t){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,s),a(null)}),[r,s]);return Object.assign({state:i,setState:c,clearState:l},Re(e))}function nt(e,t,n={}){const r=X(e),s=z(n),i=(0,o.useMemo)((()=>(0,a.A)(r,t,s)),[r,t,s]);return _((()=>i.cancel())),i}const rt=e=>{var t;return j(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=X(e),{delay:s,enabled:i}=rt(t),a=(0,o.useCallback)((()=>{n.current=setTimeout(r,s)}),[r,s]),c=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{c(),a()}),[c,a]);return(0,o.useEffect)((()=>{if(!(s<0)&&i)return a(),()=>c()}),[a,c,s,i]),{set:a,reset:l,clear:c}}function st(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function it(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new c.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ct={width:null,height:null};function lt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>g()?ct:{width:window.innerWidth,height:window.innerHeight})),r=B(n,e),s=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",s),t}function ut(e,t,n){const{delay:r,enabled:s}=rt(t),{set:i,reset:a,clear:c}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!s||a()}),[r,s,a,...n]),{set:i,reset:a,clear:c}}}}]); \ No newline at end of file diff --git a/assets/js/0ed4549e.f00dd43e.js b/assets/js/0ed4549e.f00dd43e.js new file mode 100644 index 000000000..ce34c23f1 --- /dev/null +++ b/assets/js/0ed4549e.f00dd43e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[9647],{2166:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>w,assets:()=>S,contentTitle:()=>m,default:()=>v,frontMatter:()=>g,metadata:()=>r,toc:()=>y});const r=JSON.parse('{"id":"react/hooks/useSessionStorage","title":"useSessionStorage","description":"React v18\ubd80\ud130 \uc9c0\uc6d0\ud558\ub294 useSyncExternalStore \uc744 \ud65c\uc6a9\ud574 \uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 \ub0b4\uc758 \ud2b9\uc815 key \ub370\uc774\ud130\ub97c \uad6c\ub3c5\ud558\uace0, \uad6c\ub3c5 \uc911\uc778 \ub370\uc774\ud130\uc5d0 \ubcc0\ud654\uac00 \uc788\uc744 \uc2dc \uc774\ub97c \ub3d9\uae30\ud654\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useSessionStorage.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useSessionStorage","permalink":"/modern-kit/docs/react/hooks/useSessionStorage","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useScrollTo","permalink":"/modern-kit/docs/react/hooks/useScrollTo"},"next":{"title":"useStep","permalink":"/modern-kit/docs/react/hooks/useStep"}}');var o=n(6206),i=n(3267),s=n(9340),a=n(4382);const c="modern-kit-session-storage",l=e=>{window.addEventListener(c,e)},u=e=>{window.removeEventListener(c,e)},d=()=>{window.dispatchEvent(new StorageEvent(c))},h=e=>window.sessionStorage.getItem(e),p=e=>(l(e),()=>{u(e)});function f(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=(0,s.Tn)(n)?n():n,o=(0,a.useSyncExternalStore)(p,(()=>h(t)),(()=>(e=>JSON.stringify(e))(r)));return{state:(0,a.useMemo)((()=>o?(0,s.Ol)(o):r),[o,r]),setState:(0,a.useCallback)((e=>{try{const n=h(t),o=n?(0,s.Ol)(n):r,i=(0,s.Tn)(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),d()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,a.useCallback)((()=>{try{window.sessionStorage.removeItem(t),d()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const g={},m="useSessionStorage",S={},w=()=>{const e={button:"button",div:"div",p:"p",...(0,i.R)()},{state:t,setState:n,removeState:r}=f({key:"test",initialValue:"default"});return(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.p,{children:"\uac1c\ubc1c\uc790 \ub3c4\uad6c\uc5d0\uc11c \uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0\ub97c \ud655\uc778\ud574\ubcf4\uc138\uc694!"}),(0,o.jsxs)(e.p,{children:["state: ",t]}),(0,o.jsx)(e.button,{onClick:()=>n("foo"),children:'\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "test"key\uc5d0 "foo"\ub370\uc774\ud130 \uc800\uc7a5'}),(0,o.jsx)(e.button,{onClick:()=>n("bar"),children:'\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "test"key\uc5d0 "bar"\ub370\uc774\ud130 \uc800\uc7a5'}),(0,o.jsx)(e.button,{onClick:()=>r(),children:'\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "test"key \uc81c\uac70'})]})},y=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function x(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usesessionstorage",children:"useSessionStorage"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"React v18"}),"\ubd80\ud130 \uc9c0\uc6d0\ud558\ub294 ",(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.a,{href:"https://react.dev/reference/react/useSyncExternalStore",children:"useSyncExternalStore"})})," \uc744 \ud65c\uc6a9\ud574 \uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 \ub0b4\uc758 \ud2b9\uc815 ",(0,o.jsx)(t.code,{children:"key"})," \ub370\uc774\ud130\ub97c \uad6c\ub3c5\ud558\uace0, \uad6c\ub3c5 \uc911\uc778 \ub370\uc774\ud130\uc5d0 \ubcc0\ud654\uac00 \uc788\uc744 \uc2dc \uc774\ub97c \ub3d9\uae30\ud654\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:["\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0\uc5d0 \uad6c\ub3c5\ud558\uace0\uc790 \ud558\ub294 ",(0,o.jsx)(t.code,{children:"key"}),"\uac00 \uc5c6\uc744 \uacbd\uc6b0 \ubc18\ud658\ud560 ",(0,o.jsx)(t.code,{children:"initialValue"}),"\ub85c \ucd08\uae30\uac12\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub610\ud55c, ",(0,o.jsx)(t.code,{children:"\uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(SSR)"}),"\uc758 \uacbd\uc6b0 \uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0\uac00 \ub3d9\uc791\ud558\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0 ",(0,o.jsx)(t.code,{children:"initialValue"}),"\uac00 \ubc18\ud658\ub429\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"setState"}),"\ub294 \uac12 \uc790\uccb4\ub97c \ub118\uae38 \uc218 \uc788\uc73c\uba70, \ud568\uc218\ub3c4 \ub118\uae38 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud568\uc218\ub85c \ud65c\uc6a9 \uc2dc\uc5d0 \uc778\uc790\ub85c state\ub97c \uac00\uc838\uc62c \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",children:"const { state, setState, removeState } = useSessionStorage({\n key: 'test',\n initialValue: [1, 2],\n});\n\nsetState([1, 2, 3]);\nsetState(state => [...state, 3]);\n"})}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsxs)(t.p,{children:["initialValue\ub97c \ub118\uaca8\uc8fc\uba74 \ub354\uc6b1 ",(0,o.jsx)(t.code,{children:"\uba85\ud655\ud55c \ud0c0\uc785 \ucd94\ub860"}),"\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",children:"const { state, setState } = useSessionStorage({\n key: 'test',\n});\n\nstate; // number[] | null\nsetState(state => {\n state; // number[] | null\n});\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",children:"const { state, setState } = useSessionStorage({\n key: 'test',\n initialValue: [],\n});\n\nstate; // number[]\nsetState(state => {\n state; // number[]\n});\n"})}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useSessionStorage/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseSessionStorageWithoutInitialValueProps {\n key: string;\n}\n\ninterface UseSessionStorageWithInitialValueProps {\n key: string;\n initialValue: T | (() => T);\n}\n\ntype UseSessionStorageProps =\n | UseSessionStorageWithoutInitialValueProps\n | UseSessionStorageWithInitialValueProps;\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",children:"// \ud568\uc218 \uc624\ubc84\ub85c\ub529\nfunction useSessionStorage({\n key,\n initialValue,\n}: UseSessionStorageWithInitialValueProps): {\n state: T;\n setState: Dispatch>;\n removeState: () => void;\n};\n\nfunction useSessionStorage({\n key,\n}: UseSessionStorageWithoutInitialValueProps): {\n state: T | null;\n setState: Dispatch>;\n removeState: () => void;\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useSessionStorage } from '@modern-kit/react';\n\nconst Example = () => {\n const { state, setState, removeState } = useSessionStorage({\n key: 'test',\n initialValue: 'default',\n });\n\n return (\n
\n

\uac1c\ubc1c\uc790 \ub3c4\uad6c\uc5d0\uc11c \uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0\ub97c \ud655\uc778\ud574\ubcf4\uc138\uc694!

\n

state: {state}

\n \n \n \n
\n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(w,{})]})}function v(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(x,{...e})}):x(e)}},3267:(e,t,n)=>{n.d(t,{R:()=>s,x:()=>a});var r=n(4382);const o={},i=r.createContext(o);function s(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),r.createElement(i.Provider,{value:t},e.children)}},9340:(e,t,n)=>{function r(e,t,n,r){return new(n||(n=Promise))((function(o,i){function s(e){try{c(r.next(e))}catch(t){i(t)}}function a(e){try{c(r.throw(e))}catch(t){i(t)}}function c(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(s,a)}c((r=r.apply(e,t||[])).next())}))}n.d(t,{Et:()=>x,Fr:()=>a,Gp:()=>S,Ol:()=>E,Qd:()=>b,S$:()=>s,Tn:()=>w,Zp:()=>h,dK:()=>l,fl:()=>$,gD:()=>y,i5:()=>f,if:()=>p,l6:()=>k,lQ:()=>j,nS:()=>d,ni:()=>O,oc:()=>c}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,t)=>new Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function s(){return"undefined"==typeof window}function a(){if(s())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function c(){return!s()}function l(e){return r(this,void 0,void 0,(function*(){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const u=e=>r(void 0,void 0,void 0,(function*(){const t=yield fetch(e);return l(yield t.text())}));function d(e,t){var n;return r(this,void 0,void 0,(function*(){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return u(e);if(!("write"in window.navigator.clipboard))return u(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return u(e);const s=yield function(e,t="png"){return new Promise(((n,s)=>{const a=new Image;a.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=a.width,e.height=a.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(a,0,0);const s=yield i(e,o[t]);n(s)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),s(r)}})),a.onerror=()=>{s(new Error("Failed to load image"))},a.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[s.type]:s})]),s}catch(s){throw console.error(`Failed to copy to clipboard. message: ${s.message}`),s}}))}function h(){return r(this,void 0,void 0,(function*(){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(){return r(this,void 0,void 0,(function*(){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function f(e,t){return Object.prototype.hasOwnProperty.call(e,t)}const g=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t)return!0;if(x(e)&&x(t)&&isNaN(e)&&isNaN(t))return!0;if(w(e)&&w(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return g(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!m(o,t.get(r),n))return!1;return!0}return g(e,t,n)};function S(e,t){return m(e,t,new WeakMap)}function w(e){return"function"==typeof e}function y(e){return null==e}function x(e){return"number"==typeof e}function v(e){return!function(e){return Object(e)!==e}(e)}function b(e){return v(e)&&"[object Object]"===Object.prototype.toString.call(e)}function k(e){return e===window}function j(){}function E(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}function C(e){return Object.keys(e)}const T={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};C(T);function $(e,t){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}function O(e,t,n){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=w(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/11738f66.0f506a6b.js b/assets/js/11738f66.0f506a6b.js new file mode 100644 index 000000000..a8b784299 --- /dev/null +++ b/assets/js/11738f66.0f506a6b.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[6021],{7424:(e,n,t)=>{t.r(n),t.d(n,{ResizeObserver:()=>h,assets:()=>f,contentTitle:()=>l,default:()=>b,frontMatter:()=>d,metadata:()=>r,toc:()=>p});const r=JSON.parse('{"id":"react/hooks/useResizeObserver","title":"useResizeObserver","description":"ref\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uc758 DOM \ud06c\uae30 \ubcc0\ud654\ub97c \uac10\uc9c0\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useResizeObserver.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useResizeObserver","permalink":"/modern-kit/docs/react/hooks/useResizeObserver","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"usePrevious","permalink":"/modern-kit/docs/react/hooks/usePrevious"},"next":{"title":"useScrollLock","permalink":"/modern-kit/docs/react/hooks/useScrollLock"}}');var o=t(6206),i=t(3267),s=t(9340),c=t(6765),a=t(4382);const u={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};const d={},l="useResizeObserver",f={},h=()=>{const e={br:"br",div:"div",...(0,i.R)()},{ref:n,contentRect:t}=function(e=s.lQ){const[n,t]=(0,a.useState)(u),r=(0,a.useRef)(null),o=(0,c.p)((([n])=>{n&&(e(n),t(n.contentRect))}));return(0,a.useEffect)((()=>{if(!r.current)return;const e=r.current,n=new ResizeObserver(o);return n.observe(e),()=>{n.unobserve(e)}}),[o]),{ref:r,contentRect:n}}((e=>{console.log("resize",e)}));return(0,o.jsxs)(e.div,{ref:n,style:{width:"100%",height:"400px",background:"#439966",fontSize:"2rem",color:"#fff"},children:["\ube0c\ub77c\uc6b0\uc800 \ub108\ube44\ub97c \uc904\uc5ec\ubcf4\uc138\uc694. ",(0,o.jsx)(e.br,{}),`width: ${t.width}, height: ${t.height}`]})},p=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Note",id:"note",level:2}];function m(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"useresizeobserver",children:"useResizeObserver"})}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"ref"}),"\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uc758 DOM \ud06c\uae30 \ubcc0\ud654\ub97c \uac10\uc9c0\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useResizeObserver/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"/*\n * type ContentRect = {\n readonly bottom: number;\n readonly height: number;\n readonly left: number;\n readonly right: number;\n readonly top: number;\n readonly width: number;\n readonly x: number;\n readonly y: number;\n }\n */\ntype ContentRect = Omit;\n\nconst useResizeObserver: (\n action?: (entry: ResizeObserverEntry) => void\n) => {\n ref: React.RefObject;\n contentRect: ContentRect;\n};\n"})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import React, { forwardRef, useRef } from 'react';\nimport { useResizeObserver } from '@modern-kit/react';\n\nconst Example = () => {\n const { ref, contentRect } = useResizeObserver((entry) => {\n console.log('resize', entry);\n });\n\n const boxStyle = useMemo(() => {\n return {\n width: '100%', \n height: '400px', \n background: '#439966', \n fontSize: '2rem',\n color: '#fff',\n }\n }, []);\n\n return (\n \n \ube0c\ub77c\uc6b0\uc800 \ub108\ube44\ub97c \uc904\uc5ec\ubcf4\uc138\uc694.
\n {`width: ${contentRect.width}, height: ${contentRect.height}`}\n \n );\n};\n"})}),"\n","\n",(0,o.jsx)(h,{}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"note",children:"Note"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver",children:"ResizeObserver API"})}),"\n"]})]})}function b(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(m,{...e})}):m(e)}},3267:(e,n,t)=>{t.d(n,{R:()=>s,x:()=>c});var r=t(4382);const o={},i=r.createContext(o);function s(e){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),r.createElement(i.Provider,{value:n},e.children)}},6765:(e,n,t)=>{t.d(n,{p:()=>o});var r=t(4382);function o(e){const n=(0,r.useRef)(e);return n.current=e,(0,r.useCallback)(((...e)=>n.current(...e)),[])}},9340:(e,n,t)=>{function r(e,n,t,r){return new(t||(t=Promise))((function(o,i){function s(e){try{a(r.next(e))}catch(n){i(n)}}function c(e){try{a(r.throw(e))}catch(n){i(n)}}function a(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(s,c)}a((r=r.apply(e,n||[])).next())}))}t.d(n,{Et:()=>y,Fr:()=>c,Gp:()=>g,Ol:()=>k,Qd:()=>j,S$:()=>s,Tn:()=>v,Zp:()=>f,dK:()=>u,fl:()=>C,gD:()=>w,i5:()=>p,if:()=>h,l6:()=>R,lQ:()=>O,nS:()=>l,ni:()=>S,oc:()=>a}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,n)=>new Promise(((t,r)=>{e.toBlob((e=>{e?t(e):r(new Error(`Failed to create blob with format ${n}`))}),n)}));function s(){return"undefined"==typeof window}function c(){if(s())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function a(){return!s()}function u(e){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const d=e=>r(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return u(yield n.text())}));function l(e,n){var t;return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return d(e);if(!("write"in window.navigator.clipboard))return d(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return d(e);const s=yield function(e,n="png"){return new Promise(((t,s)=>{const c=new Image;c.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=c.width,e.height=c.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(c,0,0);const s=yield i(e,o[n]);t(s)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),s(r)}})),c.onerror=()=>{s(new Error("Failed to load image"))},c.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[s.type]:s})]),s}catch(s){throw console.error(`Failed to copy to clipboard. message: ${s.message}`),s}}))}function f(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function h(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const m=(e,n,t)=>{const r=Object.keys(e),o=Object.keys(n);if(r.length!==o.length)return!1;for(let i=0;i{if(e===n)return!0;if(y(e)&&y(n)&&isNaN(e)&&isNaN(n))return!0;if(v(e)&&v(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const r=[...e],o=[...n];return m(r,o,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[r,o]of e)if(!n.has(r)||!b(o,n.get(r),t))return!1;return!0}return m(e,n,t)};function g(e,n){return b(e,n,new WeakMap)}function v(e){return"function"==typeof e}function w(e){return null==e}function y(e){return"number"==typeof e}function x(e){return!function(e){return Object(e)!==e}(e)}function j(e){return x(e)&&"[object Object]"===Object.prototype.toString.call(e)}function R(e){return e===window}function O(){}function k(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function z(e){return Object.keys(e)}const E={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};z(E);function C(e,n){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function S(e,n,t){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=v(t)?t():t;r.setItem(n,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${n}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/11738f66.1ad6e8ce.js b/assets/js/11738f66.1ad6e8ce.js deleted file mode 100644 index 2169452ba..000000000 --- a/assets/js/11738f66.1ad6e8ce.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[6021],{7827:(e,t,n)=>{n.r(t),n.d(t,{ResizeObserver:()=>u,assets:()=>a,contentTitle:()=>l,default:()=>h,frontMatter:()=>c,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"react/hooks/useResizeObserver","title":"useResizeObserver","description":"ref\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uc758 DOM \ud06c\uae30 \ubcc0\ud654\ub97c \uac10\uc9c0\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useResizeObserver.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useResizeObserver","permalink":"/modern-kit/docs/react/hooks/useResizeObserver","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"usePrevious","permalink":"/modern-kit/docs/react/hooks/usePrevious"},"next":{"title":"useScrollLock","permalink":"/modern-kit/docs/react/hooks/useScrollLock"}}');var o=n(6206),i=n(3267),s=n(4027);const c={},l="useResizeObserver",a={},u=()=>{const e={br:"br",div:"div",...(0,i.R)()},{ref:t,contentRect:n}=(0,s.wY)((e=>{console.log("resize",e)}));return(0,o.jsxs)(e.div,{ref:t,style:{width:"100%",height:"400px",background:"#439966",fontSize:"2rem",color:"#fff"},children:["\ube0c\ub77c\uc6b0\uc800 \ub108\ube44\ub97c \uc904\uc5ec\ubcf4\uc138\uc694. ",(0,o.jsx)(e.br,{}),`width: ${n.width}, height: ${n.height}`]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Note",id:"note",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"useresizeobserver",children:"useResizeObserver"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"ref"}),"\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uc758 DOM \ud06c\uae30 \ubcc0\ud654\ub97c \uac10\uc9c0\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useResizeObserver/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"/*\n * type ContentRect = {\n readonly bottom: number;\n readonly height: number;\n readonly left: number;\n readonly right: number;\n readonly top: number;\n readonly width: number;\n readonly x: number;\n readonly y: number;\n }\n */\ntype ContentRect = Omit;\n\nconst useResizeObserver: (\n action?: (entry: ResizeObserverEntry) => void\n) => {\n ref: React.RefObject;\n contentRect: ContentRect;\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import React, { forwardRef, useRef } from 'react';\nimport { useResizeObserver } from '@modern-kit/react';\n\nconst Example = () => {\n const { ref, contentRect } = useResizeObserver((entry) => {\n console.log('resize', entry);\n });\n\n const boxStyle = useMemo(() => {\n return {\n width: '100%', \n height: '400px', \n background: '#439966', \n fontSize: '2rem',\n color: '#fff',\n }\n }, []);\n\n return (\n \n \ube0c\ub77c\uc6b0\uc800 \ub108\ube44\ub97c \uc904\uc5ec\ubcf4\uc138\uc694.
\n {`width: ${contentRect.width}, height: ${contentRect.height}`}\n \n );\n};\n"})}),"\n","\n",(0,o.jsx)(u,{}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"note",children:"Note"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver",children:"ResizeObserver API"})}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(f,{...e})}):f(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>ze,$I:()=>oe,AE:()=>Ve,BL:()=>J,DX:()=>L,FT:()=>ct,Fo:()=>et,Hn:()=>it,I5:()=>je,JF:()=>Pe,K:()=>ae,K$:()=>He,M0:()=>Ie,ML:()=>ne,Mj:()=>ye,Mk:()=>Fe,Mo:()=>ie,NT:()=>Ye,QV:()=>Ke,Ub:()=>ke,Ut:()=>Ee,W7:()=>K,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>We,Zu:()=>le,_1:()=>Oe,_g:()=>nt,aL:()=>H,aY:()=>Le,bB:()=>D,d7:()=>B,eG:()=>st,fN:()=>ce,fm:()=>G,gl:()=>z,hN:()=>X,iD:()=>de,iQ:()=>Ne,jd:()=>se,lW:()=>at,oD:()=>U,oo:()=>Re,pL:()=>q,qi:()=>ue,rN:()=>Me,tD:()=>Se,u8:()=>Q,wY:()=>Be,xV:()=>N,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),i=n(3683),s=n(5086),c=n(7197),l=(n(1604),n(5938));function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function b(){return!m()}function g(e){return f(this,0,void 0,(function*(){if(!b())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const w=e=>f(void 0,0,void 0,(function*(){return g(yield(yield fetch(e)).text())}));function v(e,t){var n;return f(this,0,void 0,(function*(){if(!b())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return w(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield p(e,h[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||C(e)&&C(t)&&isNaN(e)&&isNaN(t))return!0;if(S(e)&&S(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function k(e,t){return x(e,t,new WeakMap)}function S(e){return"function"==typeof e}function C(e){return"number"==typeof e}function E(e){return!function(e){return Object(e)!==e}(e)}function j(){}function R(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const O=(...e)=>t=>e.forEach((e=>{if(S(e))e(t);else if(null!=e){e.current=t}}));function I(...e){return(0,o.useCallback)(O(...e),e)}const L=o.forwardRef(((e,t)=>{const{children:n}=e,i=a(e,["children"]),s=o.Children.toArray(n),c=s.find(F);if(c){const e=c.props.children,n=s.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(M,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(M,Object.assign({},i,{ref:t,children:n}))}));L.displayName="Slot";const M=o.forwardRef(((e,t)=>{const{children:n}=e,r=a(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?O(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));M.displayName="SlotClone";const N=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function F(e){return o.isValidElement(e)&&e.type===N}var $="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const z=d(((e,t)=>{var{ratio:n,style:o,as:s="div",asChild:c=!1}=e,l=a(e,["ratio","style","as","asChild"]);const u=c?L:s,d=Object.assign({aspectRatio:n},o),f=c?l.className:i($,l.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},l))})),P=()=>j,T=()=>!1,Y=()=>!0;function D({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(P,T,Y)?e:t}function A(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const X=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>A()?(0,r.jsx)(r.Fragment,{children:t}):e;function V(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function W(e){const t=V(e);(0,o.useEffect)((()=>()=>t()),[t])}function _(e,t=k){const[n,r]=(0,o.useState)(e),i=V(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function B(e,t,n){const r=V(e),i=_(n),c=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return W((()=>c.cancel())),c}const H=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),s=B(((...e)=>{const n=i?.props;if(n&&S(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:s})};function J({onIntersectStart:e=j,onIntersectEnd:t=j,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:s=0,rootMargin:c="0px 0px 0px 0px"}){const l=(0,o.useRef)(0),a=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=V((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(a.current=!0,l.current+=1,e(n)):a.current&&(a.current=!1,l.current+=1,t(n)),r&&l.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:s,root:i,rootMargin:c}),u.current.observe(e))}),[n,s,i,c,d])}}const U=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:s}=e,c=a(e,["src","threshold","root","rootMargin"]);const{ref:l}=J({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:I(t,l)},c))}));U.displayName="LazyImage";const K=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=a(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,b=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),g=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},l)),[m,u,l]),w=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),v=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:b,children:[m&&s,(0,r.jsx)(U,Object.assign({ref:t,width:n,height:i,style:g,onLoad:w},f))]})}));K.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:s="after",rootMargin:c="150px 0px"})=>{const{ref:l}=J({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:l}),t,"after"===s&&(0,r.jsx)("div",{ref:l})]})},q=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1}=e,c=a(e,["children","as","asChild"]);const l=s?L:i,{ref:u}=J(c);if(s&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(l,Object.assign({ref:O(t,u)},c,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return E(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=b()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=V(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1,onPointerDown:c,excludeRefs:l=[]}=e,u=a(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:l}),f=s?L:i;if(s&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:O(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:s=1,includeLastSeparator:c=!1})=>{const l=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%s==0),[c,s,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),l(t)&&n]})})},se=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function le(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function ae(e=!0){const t=S(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield g(e);return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!b())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),l=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!b())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:s,readText:c,readContents:l}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],be=me("localStorage"),ge=e=>window.localStorage.getItem(e),we=e=>JSON.stringify(e),ve=e=>(be.subscribe(e),()=>{be.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(ve,(()=>ge(t)),(()=>we(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=ge(t),o=n?R(n):r,i=S(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),be.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),be.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>b()?window.matchMedia(e).matches:t??!1;function ke(e,t){const[n,r]=(0,o.useState)(xe(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function Se(){return ke("(prefers-color-scheme: dark)")?"dark":"light"}const Ce="color-scheme";function Ee({defaultValue:e,key:t=Ce,shouldSetBodyClass:n=!1}={}){const r=Se(),i=S(e)?e():e,{state:s,setState:c}=ye({key:t,initialValue:i??r}),l=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),a=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(s),()=>{n&&document.body.classList.remove(s)})),[s,n]),{colorScheme:s,preferredColorScheme:r,setToggleMode:l,setDarkMode:a,setLightMode:u,setPreferredMode:d}}function je(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:s}}function Re({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),s=r0,l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),a=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const s=l(e,t);o&&o({prev:r,next:s}),i(s)}),[n,r,l]),u=(0,o.useCallback)((e=>{a("nextStep",!s,e)}),[s,a]),d=(0,o.useCallback)((e=>{a("prevStep",!c,e)}),[c,a]),f=(0,o.useCallback)(((t,n)=>{const o=S(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:s,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Oe(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=Re({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}function Ie(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,B(i,t,n)]}function Le(e,t={}){const[n,r]=(0,o.useState)(""),[i,s]=Ie("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),s(t)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Me(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onFocus:e=j,onBlur:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=V((t=>{r(!0),e(t)})),c=V((e=>{r(!1),t(e)})),l=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",s),ne(i,"blur",c),{ref:i,isFocus:n,setFocus:l}}function Fe({onEnter:e=j,onLeave:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=V((t=>{r(!0),e(t)})),c=V((e=>{r(!1),t(e)}));return ne(i,"mouseenter",s),ne(i,"mouseleave",c),{ref:i,isHovered:n}}const $e=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ze(e,t){const n=(0,o.useRef)(),r=V(e),{delay:i,enabled:s}=$e(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>l()}),[l,c,s,i]),{set:c,reset:a,clear:l}}function Pe({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=V((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];S(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const Te={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Ye(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Te),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l}=t;let a=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();a=i-t.left,u=s-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l,elementRelativeX:a,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const De=()=>navigator.onLine,Ae=()=>!0,Xe=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function Ve({onlineAction:e=j,offlineAction:t=j}={}){const n=V((n=>Xe(n,e,t)));return(0,o.useSyncExternalStore)(n,De,Ae)}function We(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const _e={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function Be(e=j){const[t,n]=(0,o.useState)(_e),r=(0,o.useRef)(null),i=V((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function He({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ue=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:s="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+Je(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+Je(window.innerWidth,r.width,c)};const l=e.getBoundingClientRect();return{top:r.top-l.top+e.scrollTop+i+Je(l.height,r.height,s),left:r.left-l.left+e.scrollLeft+o+Je(l.width,r.width,c)}};function Ke(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:s}=Ue(r,t,n);r.scrollTo({top:s,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?R(n):r,i=S(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[s,c]=(0,o.useState)(n),l=(0,o.useCallback)((e=>{c((t=>{const n=S(e)?e(t):e;return r&&i&&function(e,t,n){if(!b())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=S(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),a=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!b())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),c(null)}),[r,i]);return Object.assign({state:s,setState:l,clearState:a},Re(e))}function nt(e,t,n={}){const r=V(e),i=_(n),s=(0,o.useMemo)((()=>(0,c.A)(r,t,i)),[r,t,i]);return W((()=>s.cancel())),s}const rt=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=V(e),{delay:i,enabled:s}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>l()}),[c,l,i,s]),{set:c,reset:a,clear:l}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function st(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new l.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const lt={width:null,height:null};function at({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?lt:{width:window.innerWidth,height:window.innerHeight})),r=B(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:s,reset:c,clear:l}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||c()}),[r,i,c,...n]),{set:s,reset:c,clear:l}}}}]); \ No newline at end of file diff --git a/assets/js/1c2388cf.a9138072.js b/assets/js/1c2388cf.a9138072.js deleted file mode 100644 index 806fcd5ad..000000000 --- a/assets/js/1c2388cf.a9138072.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[8933],{4609:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>c,default:()=>p,frontMatter:()=>s,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"react/components/SeparatedIterator","title":"SeparatedIterator","description":"Iterator\ub97c \ud655\uc7a5\ud574 items props\ub85c \uc8fc\uc5b4\uc9c4 \ubc30\uc5f4\uc744 \ubc18\ubcf5\ud558\uba74\uc11c \uac01 \ud56d\ubaa9\uc5d0 \ub300\ud574 \ud2b9\uc815 \uc694\uc18c \ubc0f \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud558\uba70, \ub3d9\uc2dc\uc5d0 \uac01 \uc694\uc18c \uc0ac\uc774\uc5d0 \uad6c\ubd84\uc790(Separator)\ub97c \ub80c\ub354\ub9c1 \ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","source":"@site/docs/react/components/SeparatedIterator.mdx","sourceDirName":"react/components","slug":"/react/components/SeparatedIterator","permalink":"/modern-kit/docs/react/components/SeparatedIterator","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"Portal","permalink":"/modern-kit/docs/react/components/Portal"},"next":{"title":"Slot","permalink":"/modern-kit/docs/react/components/Slot"}}');var o=n(6206),i=n(3267),a=n(4027);const s={},c="SeparatedIterator",l={},u=()=>{const e={div:"div",h3:"h3",...(0,i.R)()};return(0,o.jsx)(a.Mo,{items:[{id:1,name:"Gromit"},{id:2,name:"Dylan"},{id:3,name:"Minjae"}],renderItem:t=>(0,o.jsxs)(e.h3,{children:["id: ",t.id,", name: ",t.name]}),separator:(0,o.jsx)(e.div,{style:{height:"3px",backgroundColor:"gray"}})})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"separatediterator",children:"SeparatedIterator"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/Iterator",children:"Iterator"}),"\ub97c \ud655\uc7a5\ud574 ",(0,o.jsx)(t.code,{children:"items props"}),"\ub85c \uc8fc\uc5b4\uc9c4 \ubc30\uc5f4\uc744 \ubc18\ubcf5\ud558\uba74\uc11c \uac01 \ud56d\ubaa9\uc5d0 \ub300\ud574 ",(0,o.jsx)(t.code,{children:"\ud2b9\uc815 \uc694\uc18c \ubc0f \ucef4\ud3ec\ub10c\ud2b8"}),"\ub97c \ub80c\ub354\ub9c1\ud558\uba70, \ub3d9\uc2dc\uc5d0 \uac01 \uc694\uc18c \uc0ac\uc774\uc5d0 ",(0,o.jsx)(t.code,{children:"\uad6c\ubd84\uc790(Separator)"}),"\ub97c \ub80c\ub354\ub9c1 \ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:["\uae30\ubcf8\uc801\uc73c\ub85c \ub9c8\uc9c0\ub9c9 \uc694\uc18c\uc758 ",(0,o.jsx)(t.code,{children:"Separator"}),"\ub294 \uc81c\uc678\ub429\ub2c8\ub2e4. \ud558\uc9c0\ub9cc, ",(0,o.jsx)(t.code,{children:"includeLastSeparator"}),"\ub97c ",(0,o.jsx)(t.code,{children:"true"}),"\ub85c \uc124\uc815\ud558\uba74 \ud3ec\ud568\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:["\ub610\ud55c, ",(0,o.jsx)(t.code,{children:"separatorInterval"}),"\ub97c \ud65c\uc6a9\ud574 \ud2b9\uc815 ",(0,o.jsx)(t.code,{children:"\uac04\uaca9"})," \ub9cc\ud07c Separator\ub97c \ub80c\ub354\ub9c1 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/SeparatedIterator/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface SeparatedIteratorProps extends IteratorProps {\n separator: JSX.Element;\n separatorInterval?: number; // default: 1\n includeLastSeparator?: boolean; // default: false\n}\n\nconst SeparatedIterator: ({\n itemKey,\n items,\n separator,\n renderItem,\n separatorInterval,\n includeLastSeparator,\n}: SeparatedIteratorProps) => JSX.Element;\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { SeparatedIterator } from '@modern-kit/react';\n\ninterface Item {\n id: number;\n name: string;\n}\n\nconst Example = () => {\n const items: Item[] = [\n { id: 1, name: 'Gromit' },\n { id: 2, name: 'Dylan' },\n { id: 3, name: 'Minjae' },\n ];\n\n return (\n (\n

\n id: {item.id}, name: {item.name}\n

\n )}\n separator={
}\n />\n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(u,{})]})}function p(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(f,{...e})}):f(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>$e,$I:()=>oe,AE:()=>We,BL:()=>H,DX:()=>L,FT:()=>st,Fo:()=>et,Hn:()=>it,I5:()=>Ee,JF:()=>Te,K:()=>le,K$:()=>Je,M0:()=>Oe,ML:()=>ne,Mj:()=>ye,Mk:()=>Ne,Mo:()=>ie,NT:()=>Xe,QV:()=>Ue,Ub:()=>Se,Ut:()=>je,W7:()=>U,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>_e,Zu:()=>ce,_1:()=>Re,_g:()=>nt,aL:()=>J,aY:()=>Le,bB:()=>D,d7:()=>B,eG:()=>at,fN:()=>se,fm:()=>q,gl:()=>$,hN:()=>A,iD:()=>de,iQ:()=>Me,jd:()=>ae,lW:()=>lt,oD:()=>K,oo:()=>Ie,pL:()=>Q,qi:()=>ue,rN:()=>Fe,tD:()=>ke,u8:()=>G,wY:()=>Be,xV:()=>M,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),i=n(3683),a=n(5086),s=n(7197),c=(n(1604),n(5938));function l(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function g(){return!m()}function w(e){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const b=e=>f(void 0,0,void 0,(function*(){return w(yield(yield fetch(e)).text())}));function v(e,t){var n;return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return b(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield h(e,p[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||C(e)&&C(t)&&isNaN(e)&&isNaN(t))return!0;if(k(e)&&k(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function S(e,t){return x(e,t,new WeakMap)}function k(e){return"function"==typeof e}function C(e){return"number"==typeof e}function j(e){return!function(e){return Object(e)!==e}(e)}function E(){}function I(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const R=(...e)=>t=>e.forEach((e=>{if(k(e))e(t);else if(null!=e){e.current=t}}));function O(...e){return(0,o.useCallback)(R(...e),e)}const L=o.forwardRef(((e,t)=>{const{children:n}=e,i=l(e,["children"]),a=o.Children.toArray(n),s=a.find(N);if(s){const e=s.props.children,n=a.map((t=>t===s?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(F,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(F,Object.assign({},i,{ref:t,children:n}))}));L.displayName="Slot";const F=o.forwardRef(((e,t)=>{const{children:n}=e,r=l(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?R(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));F.displayName="SlotClone";const M=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function N(e){return o.isValidElement(e)&&e.type===M}var P="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const $=d(((e,t)=>{var{ratio:n,style:o,as:a="div",asChild:s=!1}=e,c=l(e,["ratio","style","as","asChild"]);const u=s?L:a,d=Object.assign({aspectRatio:n},o),f=s?c.className:i(P,c.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},c))})),T=()=>E,Y=()=>!1,X=()=>!0;function D({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(T,Y,X)?e:t}function V(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const A=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>V()?(0,r.jsx)(r.Fragment,{children:t}):e;function W(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function _(e){const t=W(e);(0,o.useEffect)((()=>()=>t()),[t])}function z(e,t=S){const[n,r]=(0,o.useState)(e),i=W(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function B(e,t,n){const r=W(e),i=z(n),s=(0,o.useMemo)((()=>(0,a.A)(r,t,i)),[r,t,i]);return _((()=>s.cancel())),s}const J=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),a=B(((...e)=>{const n=i?.props;if(n&&k(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:a})};function H({onIntersectStart:e=E,onIntersectEnd:t=E,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=W((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(l.current=!0,c.current+=1,e(n)):l.current&&(l.current=!1,c.current+=1,t(n)),r&&c.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:a,root:i,rootMargin:s}),u.current.observe(e))}),[n,a,i,s,d])}}const K=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:a}=e,s=l(e,["src","threshold","root","rootMargin"]);const{ref:c}=H({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:a});return(0,r.jsx)("img",Object.assign({ref:O(t,c)},s))}));K.displayName="LazyImage";const U=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:a,className:s,style:c,duration:u="0.2s",onLoad:d}=e,f=l(e,["width","height","fallback","className","style","duration","onLoad"]);const[p,h]=(0,o.useState)(!1),m=!p,g=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),w=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},c)),[m,u,c]),b=(0,o.useCallback)((e=>{d&&d(e),h(!0)}),[d]),v=s?`lazy-image-wrapper ${s}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:g,children:[m&&a,(0,r.jsx)(K,Object.assign({ref:t,width:n,height:i,style:w,onLoad:b},f))]})}));U.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},G=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:a="after",rootMargin:s="150px 0px"})=>{const{ref:c}=H({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:s});return(0,r.jsxs)(r.Fragment,{children:["before"===a&&(0,r.jsx)("div",{ref:c}),t,"after"===a&&(0,r.jsx)("div",{ref:c})]})},Q=d(((e,t)=>{var{children:n,as:i="div",asChild:a=!1}=e,s=l(e,["children","as","asChild"]);const c=a?L:i,{ref:u}=H(s);if(a&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(c,Object.assign({ref:R(t,u)},s,{children:n}))})),q=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return j(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=g()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=W(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:a=!1,onPointerDown:s,excludeRefs:c=[]}=e,u=l(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(s,{excludeRefs:c}),f=a?L:i;if(a&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:R(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,o.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,r.jsx)(q,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),c(t)&&n]})})},ae=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),se=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function ce(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function le(e=!0){const t=k(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield w(e);return t(n),!0}catch{return t(null),!1}}))),[]),a=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:a,readText:s,readContents:c}}const fe="modern-kit-local-storage",pe="modern-kit-session-storage",he={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:pe,subscribe:e=>{window.addEventListener(pe,e)},unsubscribe:e=>{window.removeEventListener(pe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(pe))}}},me=e=>he[e],ge=me("localStorage"),we=e=>window.localStorage.getItem(e),be=e=>JSON.stringify(e),ve=e=>(ge.subscribe(e),()=>{ge.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=k(n)?n():n,i=(0,o.useSyncExternalStore)(ve,(()=>we(t)),(()=>be(r)));return{state:(0,o.useMemo)((()=>i?I(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=we(t),o=n?I(n):r,i=k(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),ge.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ge.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>g()?window.matchMedia(e).matches:t??!1;function Se(e,t){const[n,r]=(0,o.useState)(xe(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function ke(){return Se("(prefers-color-scheme: dark)")?"dark":"light"}const Ce="color-scheme";function je({defaultValue:e,key:t=Ce,shouldSetBodyClass:n=!1}={}){const r=ke(),i=k(e)?e():e,{state:a,setState:s}=ye({key:t,initialValue:i??r}),c=(0,o.useCallback)((()=>{s((e=>"dark"===e?"light":"dark"))}),[s]),l=(0,o.useCallback)((()=>{s("dark")}),[s]),u=(0,o.useCallback)((()=>{s("light")}),[s]),d=(0,o.useCallback)((()=>{s(r)}),[s,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(a),()=>{n&&document.body.classList.remove(a)})),[a,n]),{colorScheme:a,preferredColorScheme:r,setToggleMode:c,setDarkMode:l,setLightMode:u,setPreferredMode:d}}function Ee(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:a}}function Ie({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),a=r0,c=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),l=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const a=c(e,t);o&&o({prev:r,next:a}),i(a)}),[n,r,c]),u=(0,o.useCallback)((e=>{l("nextStep",!a,e)}),[a,l]),d=(0,o.useCallback)((e=>{l("prevStep",!s,e)}),[s,l]),f=(0,o.useCallback)(((t,n)=>{const o=k(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),p=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:a,hasPrevStep:s,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:p}}function Re(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:a}=Ie({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:a}}function Oe(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,B(i,t,n)]}function Le(e,t={}){const[n,r]=(0,o.useState)(""),[i,a]=Oe("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),a(t)}),[a]),onReset:(0,o.useCallback)((()=>{r(""),a("")}),[a])}}function Fe(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Me({onFocus:e=E,onBlur:t=E}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),a=W((t=>{r(!0),e(t)})),s=W((e=>{r(!1),t(e)})),c=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",a),ne(i,"blur",s),{ref:i,isFocus:n,setFocus:c}}function Ne({onEnter:e=E,onLeave:t=E}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),a=W((t=>{r(!0),e(t)})),s=W((e=>{r(!1),t(e)}));return ne(i,"mouseenter",a),ne(i,"mouseleave",s),{ref:i,isHovered:n}}const Pe=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function $e(e,t){const n=(0,o.useRef)(),r=W(e),{delay:i,enabled:a}=Pe(t),s=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),c=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{c(),s()}),[c,s]);return(0,o.useEffect)((()=>{if(!(i<0)&&a)return s(),()=>c()}),[c,s,a,i]),{set:s,reset:l,clear:c}}function Te({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=W((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];k(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const Ye={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Xe(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Ye),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=i-t.left,u=a-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const De=()=>navigator.onLine,Ve=()=>!0,Ae=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function We({onlineAction:e=E,offlineAction:t=E}={}){const n=W((n=>Ae(n,e,t)));return(0,o.useSyncExternalStore)(n,De,Ve)}function _e(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const ze={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function Be(e=E){const[t,n]=(0,o.useState)(ze),r=(0,o.useRef)(null),i=W((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function Je({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const He=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:a="start",alignX:s="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+He(window.innerHeight,r.height,a),left:r.left+window.scrollX+o+He(window.innerWidth,r.width,s)};const c=e.getBoundingClientRect();return{top:r.top-c.top+e.scrollTop+i+He(c.height,r.height,a),left:r.left-c.left+e.scrollLeft+o+He(c.width,r.width,s)}};function Ue(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:a}=Ke(r,t,n);r.scrollTo({top:a,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Ge=e=>window.sessionStorage.getItem(e),Qe=e=>JSON.stringify(e),qe=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=k(n)?n():n,i=(0,o.useSyncExternalStore)(qe,(()=>Ge(t)),(()=>Qe(r)));return{state:(0,o.useMemo)((()=>i?I(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Ge(t),o=n?I(n):r,i=k(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[a,s]=(0,o.useState)(n),c=(0,o.useCallback)((e=>{s((t=>{const n=k(e)?e(t):e;return r&&i&&function(e,t,n){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=k(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),l=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),s(null)}),[r,i]);return Object.assign({state:a,setState:c,clearState:l},Ie(e))}function nt(e,t,n={}){const r=W(e),i=z(n),a=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return _((()=>a.cancel())),a}const rt=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=W(e),{delay:i,enabled:a}=rt(t),s=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),c=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{c(),s()}),[c,s]);return(0,o.useEffect)((()=>{if(!(i<0)&&a)return s(),()=>c()}),[s,c,i,a]),{set:s,reset:l,clear:c}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function at(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new c.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function st({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ct={width:null,height:null};function lt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?ct:{width:window.innerWidth,height:window.innerHeight})),r=B(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:a,reset:s,clear:c}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||s()}),[r,i,s,...n]),{set:a,reset:s,clear:c}}}}]); \ No newline at end of file diff --git a/assets/js/1c2388cf.d917f60e.js b/assets/js/1c2388cf.d917f60e.js new file mode 100644 index 000000000..87cae0abd --- /dev/null +++ b/assets/js/1c2388cf.d917f60e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[8933],{3038:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>p,assets:()=>u,contentTitle:()=>l,default:()=>h,frontMatter:()=>d,metadata:()=>r,toc:()=>m});const r=JSON.parse('{"id":"react/components/SeparatedIterator","title":"SeparatedIterator","description":"Iterator\ub97c \ud655\uc7a5\ud574 items props\ub85c \uc8fc\uc5b4\uc9c4 \ubc30\uc5f4\uc744 \ubc18\ubcf5\ud558\uba74\uc11c \uac01 \ud56d\ubaa9\uc5d0 \ub300\ud574 \ud2b9\uc815 \uc694\uc18c \ubc0f \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud558\uba70, \ub3d9\uc2dc\uc5d0 \uac01 \uc694\uc18c \uc0ac\uc774\uc5d0 \uad6c\ubd84\uc790(Separator)\ub97c \ub80c\ub354\ub9c1 \ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","source":"@site/docs/react/components/SeparatedIterator.mdx","sourceDirName":"react/components","slug":"/react/components/SeparatedIterator","permalink":"/modern-kit/docs/react/components/SeparatedIterator","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"Portal","permalink":"/modern-kit/docs/react/components/Portal"},"next":{"title":"Slot","permalink":"/modern-kit/docs/react/components/Slot"}}');var o=n(6206),i=n(3267),a=n(4382),c=n(8111);const s=({itemKey:e,items:t=[],separator:n,renderItem:r,separatorInterval:i=1,includeLastSeparator:s=!1})=>{const d=(0,a.useCallback)((e=>e===t.length-1?s:(e+1)%i==0),[s,i,t.length]);return(0,o.jsx)(c.f,{items:t,itemKey:e,renderItem:(e,t)=>(0,o.jsxs)(o.Fragment,{children:[r(e,t),d(t)&&n]})})},d={},l="SeparatedIterator",u={},p=()=>{const e={div:"div",h3:"h3",...(0,i.R)()};return(0,o.jsx)(s,{items:[{id:1,name:"Gromit"},{id:2,name:"Dylan"},{id:3,name:"Minjae"}],renderItem:t=>(0,o.jsxs)(e.h3,{children:["id: ",t.id,", name: ",t.name]}),separator:(0,o.jsx)(e.div,{style:{height:"3px",backgroundColor:"gray"}})})},m=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"separatediterator",children:"SeparatedIterator"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/Iterator",children:"Iterator"}),"\ub97c \ud655\uc7a5\ud574 ",(0,o.jsx)(t.code,{children:"items props"}),"\ub85c \uc8fc\uc5b4\uc9c4 \ubc30\uc5f4\uc744 \ubc18\ubcf5\ud558\uba74\uc11c \uac01 \ud56d\ubaa9\uc5d0 \ub300\ud574 ",(0,o.jsx)(t.code,{children:"\ud2b9\uc815 \uc694\uc18c \ubc0f \ucef4\ud3ec\ub10c\ud2b8"}),"\ub97c \ub80c\ub354\ub9c1\ud558\uba70, \ub3d9\uc2dc\uc5d0 \uac01 \uc694\uc18c \uc0ac\uc774\uc5d0 ",(0,o.jsx)(t.code,{children:"\uad6c\ubd84\uc790(Separator)"}),"\ub97c \ub80c\ub354\ub9c1 \ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:["\uae30\ubcf8\uc801\uc73c\ub85c \ub9c8\uc9c0\ub9c9 \uc694\uc18c\uc758 ",(0,o.jsx)(t.code,{children:"Separator"}),"\ub294 \uc81c\uc678\ub429\ub2c8\ub2e4. \ud558\uc9c0\ub9cc, ",(0,o.jsx)(t.code,{children:"includeLastSeparator"}),"\ub97c ",(0,o.jsx)(t.code,{children:"true"}),"\ub85c \uc124\uc815\ud558\uba74 \ud3ec\ud568\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:["\ub610\ud55c, ",(0,o.jsx)(t.code,{children:"separatorInterval"}),"\ub97c \ud65c\uc6a9\ud574 \ud2b9\uc815 ",(0,o.jsx)(t.code,{children:"\uac04\uaca9"})," \ub9cc\ud07c Separator\ub97c \ub80c\ub354\ub9c1 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/SeparatedIterator/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface SeparatedIteratorProps extends IteratorProps {\n separator: JSX.Element;\n separatorInterval?: number; // default: 1\n includeLastSeparator?: boolean; // default: false\n}\n\nconst SeparatedIterator: ({\n itemKey,\n items,\n separator,\n renderItem,\n separatorInterval,\n includeLastSeparator,\n}: SeparatedIteratorProps) => JSX.Element;\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { SeparatedIterator } from '@modern-kit/react';\n\ninterface Item {\n id: number;\n name: string;\n}\n\nconst Example = () => {\n const items: Item[] = [\n { id: 1, name: 'Gromit' },\n { id: 2, name: 'Dylan' },\n { id: 3, name: 'Minjae' },\n ];\n\n return (\n (\n

\n id: {item.id}, name: {item.name}\n

\n )}\n separator={
}\n />\n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(p,{})]})}function h(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(f,{...e})}):f(e)}},3267:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>c});var r=n(4382);const o={},i=r.createContext(o);function a(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),r.createElement(i.Provider,{value:t},e.children)}},8111:(e,t,n)=>{n.d(t,{f:()=>a});var r=n(6206),o=n(9340),i=n(4382);const a=({items:e=[],itemKey:t,renderItem:n})=>{const a=(0,i.useCallback)(((e,n)=>(0,o.Qd)(e)?(null==e?void 0:e[t])||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(i.Fragment,{children:n(e,t)},a(e,t))))})}},9340:(e,t,n)=>{function r(e,t,n,r){return new(n||(n=Promise))((function(o,i){function a(e){try{s(r.next(e))}catch(t){i(t)}}function c(e){try{s(r.throw(e))}catch(t){i(t)}}function s(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,c)}s((r=r.apply(e,t||[])).next())}))}n.d(t,{Et:()=>y,Fr:()=>c,Gp:()=>x,Ol:()=>k,Qd:()=>j,S$:()=>a,Tn:()=>w,Zp:()=>p,dK:()=>d,fl:()=>F,gD:()=>v,i5:()=>f,if:()=>m,l6:()=>S,lQ:()=>I,nS:()=>u,ni:()=>$,oc:()=>s}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,t)=>new Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function a(){return"undefined"==typeof window}function c(){if(a())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function s(){return!a()}function d(e){return r(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const l=e=>r(void 0,void 0,void 0,(function*(){const t=yield fetch(e);return d(yield t.text())}));function u(e,t){var n;return r(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return l(e);if(!("write"in window.navigator.clipboard))return l(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return l(e);const a=yield function(e,t="png"){return new Promise(((n,a)=>{const c=new Image;c.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=c.width,e.height=c.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(c,0,0);const a=yield i(e,o[t]);n(a)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),a(r)}})),c.onerror=()=>{a(new Error("Failed to load image"))},c.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[a.type]:a})]),a}catch(a){throw console.error(`Failed to copy to clipboard. message: ${a.message}`),a}}))}function p(){return r(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function m(){return r(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function f(e,t){return Object.prototype.hasOwnProperty.call(e,t)}const h=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t)return!0;if(y(e)&&y(t)&&isNaN(e)&&isNaN(t))return!0;if(w(e)&&w(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return h(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!g(o,t.get(r),n))return!1;return!0}return h(e,t,n)};function x(e,t){return g(e,t,new WeakMap)}function w(e){return"function"==typeof e}function v(e){return null==e}function y(e){return"number"==typeof e}function b(e){return!function(e){return Object(e)!==e}(e)}function j(e){return b(e)&&"[object Object]"===Object.prototype.toString.call(e)}function S(e){return e===window}function I(){}function k(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}function E(e){return Object.keys(e)}const C={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};E(C);function F(e,t){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}function $(e,t,n){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=w(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/1ebcacad.43280e43.js b/assets/js/1ebcacad.43280e43.js new file mode 100644 index 000000000..bcc1bc268 --- /dev/null +++ b/assets/js/1ebcacad.43280e43.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[1623],{4872:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>p,contentTitle:()=>d,default:()=>g,frontMatter:()=>l,metadata:()=>r,toc:()=>S});const r=JSON.parse('{"id":"react/hooks/useStepState","title":"useStepState","description":"useStep \uc744 \ud655\uc7a5\ud574 multi-step process\uc758 step\uc744 \uad00\ub9ac \ubc0f \ucd94\uc801\ud558\uba70 \ub3d9\uc2dc\uc5d0 \ub0b4\ubd80 \uc0c1\ud0dc\ub97c \uad00\ub9ac \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useStepState.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useStepState","permalink":"/modern-kit/docs/react/hooks/useStepState","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useStep","permalink":"/modern-kit/docs/react/hooks/useStep"},"next":{"title":"useThrottle","permalink":"/modern-kit/docs/react/hooks/useThrottle"}}');var o=n(6206),i=n(3267),s=n(9340),a=n(4731),c=n(4382);const l={},d="useStepState",p={},u=()=>{const e={button:"button",div:"div",p:"p",...(0,i.R)()},{state:t,setState:n,clearState:r,currentStep:l,goToNextStep:d,goToPrevStep:p}=function(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:o}=null!==(t=null==e?void 0:e.storageOptions)&&void 0!==t?t:{},[i,l]=(0,c.useState)(n),d=(0,c.useCallback)((e=>{l((t=>{const n=(0,s.Tn)(e)?e(t):e;return r&&o&&(0,s.ni)(r,o,n),n}))}),[r,o]),p=(0,c.useCallback)((()=>{r&&o&&(0,s.fl)(r,o),l(null)}),[r,o]);return Object.assign({state:i,setState:d,clearState:p},(0,a.o)(e))}({maxStep:2,initialState:{name:""},storageOptions:{key:"stepState",type:"sessionStorage"}}),u={width:"300px",height:"120px",fontSize:"21px"};return(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.button,{onClick:()=>{p((({prevStep:e,nextStep:t})=>{console.log(`${e}\uc5d0\uc11c ${t}\ub85c \uc774\ub3d9`),n({name:"foo"})}))},children:"\uc774\uc804 \uc2a4\ud0ed"}),(0,o.jsx)(e.button,{onClick:()=>{d((({prevStep:e,nextStep:t})=>{console.log(`${e}\uc5d0\uc11c ${t}\ub85c \uc774\ub3d9`),n({name:"bar"})}))},children:"\ub2e4\uc74c \uc2a4\ud0ed"}),(0,o.jsx)(e.button,{onClick:r,children:"\uc0c1\ud0dc \ucd08\uae30\ud654"})]}),(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.p,{children:["currentStep: ",l]}),(0,o.jsxs)(e.p,{children:["state: ",JSON.stringify(t)]})]}),(0,o.jsxs)(e.div,{children:[1===l&&(0,o.jsx)(e.div,{style:{...u,backgroundColor:"red"},children:"1\ubc88 Step Box"}),2===l&&(0,o.jsx)(e.div,{style:{...u,backgroundColor:"green"},children:"2\ubc88 Step Box"})]})]})},S=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2},{value:"Best Practice",id:"best-practice",level:2}];function h(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usestepstate",children:"useStepState"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/hooks/useStep",children:"useStep"})})," \uc744 \ud655\uc7a5\ud574 ",(0,o.jsx)(t.code,{children:"multi-step process"}),"\uc758 ",(0,o.jsx)(t.code,{children:"step"}),"\uc744 \uad00\ub9ac \ubc0f \ucd94\uc801\ud558\uba70 \ub3d9\uc2dc\uc5d0 ",(0,o.jsx)(t.code,{children:"\ub0b4\ubd80 \uc0c1\ud0dc"}),"\ub97c \uad00\ub9ac \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"storageOptions"}),"\ub97c \ud65c\uc6a9\ud574 ",(0,o.jsx)(t.code,{children:"setState"})," \uc2dc\uc5d0 \ube0c\ub77c\uc6b0\uc800 \uc2a4\ud1a0\ub9ac\uc9c0(",(0,o.jsx)(t.code,{children:"sessionStorage"}),", ",(0,o.jsx)(t.code,{children:"localStorage"}),")\uc5d0 \uc0c1\ud0dc\ub97c \uc800\uc7a5 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"clearState"}),"\ub294 state\ub97c ",(0,o.jsx)(t.code,{children:"null"}),"\ub85c \ucd08\uae30\ud654\ud569\ub2c8\ub2e4. ",(0,o.jsx)(t.code,{children:"storageOptions"}),"\uac00 \uc788\uc744 \uacbd\uc6b0 \ud574\ub2f9 ",(0,o.jsx)(t.code,{children:"options"}),"\uc5d0 \ub300\uc751\ud558\ub294 \uc2a4\ud1a0\ub9ac\uc9c0 \ub370\uc774\ud130\ub97c \uc81c\uac70\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useStepState/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface StorageOptions {\n key: string;\n type: 'localStorage' | 'sessionStorage';\n}\n\ninterface UseStepWithInitialState extends UseStepProps {\n initialState: T;\n storageOptions?: StorageOptions;\n}\n\ninterface UseStepWithoutInitialState extends UseStepProps {\n storageOptions?: StorageOptions;\n}\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"// \ud568\uc218 \uc624\ubc84\ub85c\ub529\nexport function useStepState({\n initialState,\n ...props\n}: UseStepWithInitialState): ReturnType & {\n readonly state: T;\n readonly setState: (newState: SetStateAction) => void;\n readonly clearState: () => void;\n};\n\nexport function useStepState(props: UseStepWithoutInitialState): ReturnType<\n typeof useStep\n> & {\n readonly state: T | null;\n readonly setState: (newState: SetStateAction) => void;\n readonly clearState: () => void;\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useStepState } from '@modern-kit/react';\n\nexport const Example = () => {\n const { state, setState, clearState, currentStep, goToNextStep, goToPrevStep } =\n useStepState({\n maxStep: 2,\n initialState: { name: '' },\n storageOptions: { key: 'stepState', type: 'sessionStorage' },\n });\n\n const handleGoToNextStep = () => {\n goToNextStep(({ prevStep, nextStep }) => {\n console.log(`${prevStep}\uc5d0\uc11c ${nextStep}\ub85c \uc774\ub3d9`);\n setState({ name: 'bar' });\n });\n };\n\n const handleGoToPrevStep = () => {\n goToPrevStep(({ prevStep, nextStep }) => {\n console.log(`${prevStep}\uc5d0\uc11c ${nextStep}\ub85c \uc774\ub3d9`);\n setState({ name: 'foo' });\n });\n };\n\n const boxStyle = {\n width: '300px',\n height: '120px',\n fontSize: '21px',\n };\n\n return (\n
\n
\n \n \n \n
\n
\n

currentStep: {currentStep}

\n

state: {JSON.stringify(state)}

\n
\n
\n {currentStep === 1 && (\n
\n 1\ubc88 Step Box\n
\n )}\n {currentStep === 2 && (\n
\n 2\ubc88 Step Box\n
\n )}\n
\n
\n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(u,{}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"best-practice",children:"Best Practice"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:["\ube0c\ub77c\uc6b0\uc800 \uc0c8\ub85c\uace0\uce68 \uc2dc \uc0c1\ud0dc\ub97c \uc801\uc808\ud558\uac8c \uc720\uc9c0\ud558\uace0 \uc2f6\ub2e4\uba74 ",(0,o.jsx)(t.code,{children:"queryString"}),"\uacfc ",(0,o.jsx)(t.code,{children:"react-router-dom"}),"\uc744 \ud568\uaed8 \uc0ac\uc6a9\ud558\ub294 \uac83\uc744 \uad8c\uc7a5\ud569\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:"import { useStepState } from '@modern-kit/react';\nimport { useNavigate } from 'react-router-dom'\nimport qs from 'query-string'\n\nconst Example = () => {\n const parsedStorage = JSON.parse(sessionStorage.getItem('stepState'));\n const parsedQuery = qs.parse(location.search);\n\n const navigate = useNavigate();\n\n const { state, setState, goToNextStep, goToPrevStep } = useStepState({\n maxStep: 5,\n initialState: parsedStorage,\n initialStep: parsedQuery.step,\n storageOptions: { key: 'stepState', type: 'sessionStorage' },\n });\n\n const handleGoToNextStep = () => {\n goToNextStep(({ nextStep }) => {\n setState({\n /* ... */\n });\n navigate(`/test?step=${nextStep}`);\n });\n };\n\n const handleGoToPrevStep = () => {\n goToNextStep(({ nextStep }) => {\n setState({\n /* ... */\n });\n navigate(`/test?step=${nextStep}`);\n });\n };\n\n // ...\n return (\n // ...\n );\n};\n"})})]})}function g(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},3267:(e,t,n)=>{n.d(t,{R:()=>s,x:()=>a});var r=n(4382);const o={},i=r.createContext(o);function s(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),r.createElement(i.Provider,{value:t},e.children)}},4731:(e,t,n)=>{n.d(t,{o:()=>i});var r=n(4382),o=n(9340);function i({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,s]=(0,r.useState)(t),a=i0,l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),d=(0,r.useCallback)(((e,t,r)=>{if(t&&!n)return;const o=l(e,t);r&&r({prev:i,next:o}),s(o)}),[n,i,l]),p=(0,r.useCallback)((e=>{d("nextStep",!a,e)}),[a,d]),u=(0,r.useCallback)((e=>{d("prevStep",!c,e)}),[c,d]),S=(0,r.useCallback)(((t,n)=>{const r=(0,o.Tn)(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void s(t);throw new Error("Step not valid")}),[i,e]),h=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),s(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:c,goToNextStep:p,goToPrevStep:u,setStep:S,resetStep:h}}},9340:(e,t,n)=>{function r(e,t,n,r){return new(n||(n=Promise))((function(o,i){function s(e){try{c(r.next(e))}catch(t){i(t)}}function a(e){try{c(r.throw(e))}catch(t){i(t)}}function c(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(s,a)}c((r=r.apply(e,t||[])).next())}))}n.d(t,{Et:()=>y,Fr:()=>a,Gp:()=>f,Ol:()=>T,Qd:()=>w,S$:()=>s,Tn:()=>m,Zp:()=>u,dK:()=>l,fl:()=>N,gD:()=>v,i5:()=>h,if:()=>S,l6:()=>j,lQ:()=>k,nS:()=>p,ni:()=>E,oc:()=>c}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,t)=>new Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function s(){return"undefined"==typeof window}function a(){if(s())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function c(){return!s()}function l(e){return r(this,void 0,void 0,(function*(){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const d=e=>r(void 0,void 0,void 0,(function*(){const t=yield fetch(e);return l(yield t.text())}));function p(e,t){var n;return r(this,void 0,void 0,(function*(){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return d(e);if(!("write"in window.navigator.clipboard))return d(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return d(e);const s=yield function(e,t="png"){return new Promise(((n,s)=>{const a=new Image;a.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=a.width,e.height=a.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(a,0,0);const s=yield i(e,o[t]);n(s)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),s(r)}})),a.onerror=()=>{s(new Error("Failed to load image"))},a.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[s.type]:s})]),s}catch(s){throw console.error(`Failed to copy to clipboard. message: ${s.message}`),s}}))}function u(){return r(this,void 0,void 0,(function*(){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function S(){return r(this,void 0,void 0,(function*(){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function h(e,t){return Object.prototype.hasOwnProperty.call(e,t)}const g=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t)return!0;if(y(e)&&y(t)&&isNaN(e)&&isNaN(t))return!0;if(m(e)&&m(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return g(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return g(e,t,n)};function f(e,t){return x(e,t,new WeakMap)}function m(e){return"function"==typeof e}function v(e){return null==e}function y(e){return"number"==typeof e}function b(e){return!function(e){return Object(e)!==e}(e)}function w(e){return b(e)&&"[object Object]"===Object.prototype.toString.call(e)}function j(e){return e===window}function k(){}function T(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}function C(e){return Object.keys(e)}const O={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};C(O);function N(e,t){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}function E(e,t,n){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=m(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/1ebcacad.ece260fc.js b/assets/js/1ebcacad.ece260fc.js deleted file mode 100644 index a8bfb2d76..000000000 --- a/assets/js/1ebcacad.ece260fc.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[1623],{2639:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>c,default:()=>f,frontMatter:()=>a,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"react/hooks/useStepState","title":"useStepState","description":"useStep \uc744 \ud655\uc7a5\ud574 multi-step process\uc758 step\uc744 \uad00\ub9ac \ubc0f \ucd94\uc801\ud558\uba70 \ub3d9\uc2dc\uc5d0 \ub0b4\ubd80 \uc0c1\ud0dc\ub97c \uad00\ub9ac \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useStepState.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useStepState","permalink":"/modern-kit/docs/react/hooks/useStepState","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useStep","permalink":"/modern-kit/docs/react/hooks/useStep"},"next":{"title":"useThrottle","permalink":"/modern-kit/docs/react/hooks/useThrottle"}}');var o=n(6206),s=n(3267),i=n(4027);n(4382);const a={},c="useStepState",l={},u=()=>{const e={button:"button",div:"div",p:"p",...(0,s.R)()},{state:t,setState:n,clearState:r,currentStep:a,goToNextStep:c,goToPrevStep:l}=(0,i.xh)({maxStep:2,initialState:{name:""},storageOptions:{key:"stepState",type:"sessionStorage"}}),u={width:"300px",height:"120px",fontSize:"21px"};return(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.button,{onClick:()=>{l((({prevStep:e,nextStep:t})=>{console.log(`${e}\uc5d0\uc11c ${t}\ub85c \uc774\ub3d9`),n({name:"foo"})}))},children:"\uc774\uc804 \uc2a4\ud0ed"}),(0,o.jsx)(e.button,{onClick:()=>{c((({prevStep:e,nextStep:t})=>{console.log(`${e}\uc5d0\uc11c ${t}\ub85c \uc774\ub3d9`),n({name:"bar"})}))},children:"\ub2e4\uc74c \uc2a4\ud0ed"}),(0,o.jsx)(e.button,{onClick:r,children:"\uc0c1\ud0dc \ucd08\uae30\ud654"})]}),(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.p,{children:["currentStep: ",a]}),(0,o.jsxs)(e.p,{children:["state: ",JSON.stringify(t)]})]}),(0,o.jsxs)(e.div,{children:[1===a&&(0,o.jsx)(e.div,{style:{...u,backgroundColor:"red"},children:"1\ubc88 Step Box"}),2===a&&(0,o.jsx)(e.div,{style:{...u,backgroundColor:"green"},children:"2\ubc88 Step Box"})]})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2},{value:"Best Practice",id:"best-practice",level:2}];function p(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usestepstate",children:"useStepState"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/hooks/useStep",children:"useStep"})})," \uc744 \ud655\uc7a5\ud574 ",(0,o.jsx)(t.code,{children:"multi-step process"}),"\uc758 ",(0,o.jsx)(t.code,{children:"step"}),"\uc744 \uad00\ub9ac \ubc0f \ucd94\uc801\ud558\uba70 \ub3d9\uc2dc\uc5d0 ",(0,o.jsx)(t.code,{children:"\ub0b4\ubd80 \uc0c1\ud0dc"}),"\ub97c \uad00\ub9ac \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"storageOptions"}),"\ub97c \ud65c\uc6a9\ud574 ",(0,o.jsx)(t.code,{children:"setState"})," \uc2dc\uc5d0 \ube0c\ub77c\uc6b0\uc800 \uc2a4\ud1a0\ub9ac\uc9c0(",(0,o.jsx)(t.code,{children:"sessionStorage"}),", ",(0,o.jsx)(t.code,{children:"localStorage"}),")\uc5d0 \uc0c1\ud0dc\ub97c \uc800\uc7a5 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"clearState"}),"\ub294 state\ub97c ",(0,o.jsx)(t.code,{children:"null"}),"\ub85c \ucd08\uae30\ud654\ud569\ub2c8\ub2e4. ",(0,o.jsx)(t.code,{children:"storageOptions"}),"\uac00 \uc788\uc744 \uacbd\uc6b0 \ud574\ub2f9 ",(0,o.jsx)(t.code,{children:"options"}),"\uc5d0 \ub300\uc751\ud558\ub294 \uc2a4\ud1a0\ub9ac\uc9c0 \ub370\uc774\ud130\ub97c \uc81c\uac70\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useStepState/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface StorageOptions {\n key: string;\n type: 'localStorage' | 'sessionStorage';\n}\n\ninterface UseStepWithInitialState extends UseStepProps {\n initialState: T;\n storageOptions?: StorageOptions;\n}\n\ninterface UseStepWithoutInitialState extends UseStepProps {\n storageOptions?: StorageOptions;\n}\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"// \ud568\uc218 \uc624\ubc84\ub85c\ub529\nexport function useStepState({\n initialState,\n ...props\n}: UseStepWithInitialState): ReturnType & {\n readonly state: T;\n readonly setState: (newState: SetStateAction) => void;\n readonly clearState: () => void;\n};\n\nexport function useStepState(props: UseStepWithoutInitialState): ReturnType<\n typeof useStep\n> & {\n readonly state: T | null;\n readonly setState: (newState: SetStateAction) => void;\n readonly clearState: () => void;\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useStepState } from '@modern-kit/react';\n\nexport const Example = () => {\n const { state, setState, clearState, currentStep, goToNextStep, goToPrevStep } =\n useStepState({\n maxStep: 2,\n initialState: { name: '' },\n storageOptions: { key: 'stepState', type: 'sessionStorage' },\n });\n\n const handleGoToNextStep = () => {\n goToNextStep(({ prevStep, nextStep }) => {\n console.log(`${prevStep}\uc5d0\uc11c ${nextStep}\ub85c \uc774\ub3d9`);\n setState({ name: 'bar' });\n });\n };\n\n const handleGoToPrevStep = () => {\n goToPrevStep(({ prevStep, nextStep }) => {\n console.log(`${prevStep}\uc5d0\uc11c ${nextStep}\ub85c \uc774\ub3d9`);\n setState({ name: 'foo' });\n });\n };\n\n const boxStyle = {\n width: '300px',\n height: '120px',\n fontSize: '21px',\n };\n\n return (\n
\n
\n \n \n \n
\n
\n

currentStep: {currentStep}

\n

state: {JSON.stringify(state)}

\n
\n
\n {currentStep === 1 && (\n
\n 1\ubc88 Step Box\n
\n )}\n {currentStep === 2 && (\n
\n 2\ubc88 Step Box\n
\n )}\n
\n
\n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(u,{}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"best-practice",children:"Best Practice"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:["\ube0c\ub77c\uc6b0\uc800 \uc0c8\ub85c\uace0\uce68 \uc2dc \uc0c1\ud0dc\ub97c \uc801\uc808\ud558\uac8c \uc720\uc9c0\ud558\uace0 \uc2f6\ub2e4\uba74 ",(0,o.jsx)(t.code,{children:"queryString"}),"\uacfc ",(0,o.jsx)(t.code,{children:"react-router-dom"}),"\uc744 \ud568\uaed8 \uc0ac\uc6a9\ud558\ub294 \uac83\uc744 \uad8c\uc7a5\ud569\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:"import { useStepState } from '@modern-kit/react';\nimport { useNavigate } from 'react-router-dom'\nimport qs from 'query-string'\n\nconst Example = () => {\n const parsedStorage = JSON.parse(sessionStorage.getItem('stepState'));\n const parsedQuery = qs.parse(location.search);\n\n const navigate = useNavigate();\n\n const { state, setState, goToNextStep, goToPrevStep } = useStepState({\n maxStep: 5,\n initialState: parsedStorage,\n initialStep: parsedQuery.step,\n storageOptions: { key: 'stepState', type: 'sessionStorage' },\n });\n\n const handleGoToNextStep = () => {\n goToNextStep(({ nextStep }) => {\n setState({\n /* ... */\n });\n navigate(`/test?step=${nextStep}`);\n });\n };\n\n const handleGoToPrevStep = () => {\n goToNextStep(({ nextStep }) => {\n setState({\n /* ... */\n });\n navigate(`/test?step=${nextStep}`);\n });\n };\n\n // ...\n return (\n // ...\n );\n};\n"})})]})}function f(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>Le,$I:()=>oe,AE:()=>Ve,BL:()=>J,DX:()=>N,FT:()=>at,Fo:()=>et,Hn:()=>st,I5:()=>Ee,JF:()=>Me,K:()=>le,K$:()=>Ue,M0:()=>Te,ML:()=>ne,Mj:()=>be,Mk:()=>$e,Mo:()=>se,NT:()=>Be,QV:()=>He,Ub:()=>xe,Ut:()=>Ce,W7:()=>H,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>ze,Zu:()=>ce,_1:()=>Re,_g:()=>nt,aL:()=>U,aY:()=>Ne,bB:()=>W,d7:()=>_,eG:()=>it,fN:()=>ae,fm:()=>Z,gl:()=>L,hN:()=>X,iD:()=>de,iQ:()=>Pe,jd:()=>ie,lW:()=>lt,oD:()=>G,oo:()=>Oe,pL:()=>Q,qi:()=>ue,rN:()=>Ie,tD:()=>ke,u8:()=>q,wY:()=>_e,xV:()=>P,xh:()=>tt,zy:()=>K});var r=n(6206),o=n(4382),s=n(3683),i=n(5086),a=n(7197),c=(n(1604),n(5938));function l(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function g(){return typeof window>"u"}function m(){return!g()}function S(e){return p(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const v=e=>p(void 0,0,void 0,(function*(){return S(yield(yield fetch(e)).text())}));function w(e,t){var n;return p(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return v(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>p(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const s=yield h(e,f[t]);n(s)}catch(s){console.error(`Failed to load image. message: ${s.mesaage}`),r(s)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const b=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let s=0;s{if(e===t||j(e)&&j(t)&&isNaN(e)&&isNaN(t))return!0;if(k(e)&&k(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return b(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!y(o,t.get(r),n))return!1;return!0}return b(e,t,n)};function x(e,t){return y(e,t,new WeakMap)}function k(e){return"function"==typeof e}function j(e){return"number"==typeof e}function C(e){return!function(e){return Object(e)!==e}(e)}function E(){}function O(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const R=(...e)=>t=>e.forEach((e=>{if(k(e))e(t);else if(null!=e){e.current=t}}));function T(...e){return(0,o.useCallback)(R(...e),e)}const N=o.forwardRef(((e,t)=>{const{children:n}=e,s=l(e,["children"]),i=o.Children.toArray(n),a=i.find($);if(a){const e=a.props.children,n=i.map((t=>t===a?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(I,Object.assign({},s,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(I,Object.assign({},s,{ref:t,children:n}))}));N.displayName="Slot";const I=o.forwardRef(((e,t)=>{const{children:n}=e,r=l(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],s=t[r];/^on[A-Z]/.test(r)?o&&s?n[r]=(...e)=>{s(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),s):"className"===r&&(n[r]=[o,s].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?R(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));I.displayName="SlotClone";const P=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function $(e){return o.isValidElement(e)&&e.type===P}var F="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const L=d(((e,t)=>{var{ratio:n,style:o,as:i="div",asChild:a=!1}=e,c=l(e,["ratio","style","as","asChild"]);const u=a?N:i,d=Object.assign({aspectRatio:n},o),p=a?c.className:s(F,c.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:p},c))})),M=()=>E,Y=()=>!1,B=()=>!0;function W({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(M,Y,B)?e:t}function A(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const X=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>A()?(0,r.jsx)(r.Fragment,{children:t}):e;function V(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function z(e){const t=V(e);(0,o.useEffect)((()=>()=>t()),[t])}function D(e,t=x){const[n,r]=(0,o.useState)(e),s=V(t);return(0,o.useEffect)((()=>{s(n,e)||r(e)}),[s,n,e]),n}function _(e,t,n){const r=V(e),s=D(n),a=(0,o.useMemo)((()=>(0,i.A)(r,t,s)),[r,t,s]);return z((()=>a.cancel())),a}const U=({children:e,capture:t,wait:n,options:r})=>{const s=o.Children.only(e),i=_(((...e)=>{const n=s?.props;if(n&&k(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(s,{[t]:i})};function J({onIntersectStart:e=E,onIntersectEnd:t=E,enabled:n=!0,calledOnce:r=!1,root:s=null,threshold:i=0,rootMargin:a="0px 0px 0px 0px"}){const c=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=V((([n],o)=>{if(!n)return;const s=n.target;n.isIntersecting?(l.current=!0,c.current+=1,e(n)):l.current&&(l.current=!1,c.current+=1,t(n)),r&&c.current>1&&o.unobserve(s)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:i,root:s,rootMargin:a}),u.current.observe(e))}),[n,i,s,a,d])}}const G=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:s,rootMargin:i}=e,a=l(e,["src","threshold","root","rootMargin"]);const{ref:c}=J({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:s,rootMargin:i});return(0,r.jsx)("img",Object.assign({ref:T(t,c)},a))}));G.displayName="LazyImage";const H=(0,o.forwardRef)(((e,t)=>{var{width:n,height:s,fallback:i,className:a,style:c,duration:u="0.2s",onLoad:d}=e,p=l(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,h]=(0,o.useState)(!1),g=!f,m=(0,o.useMemo)((()=>({position:"relative",width:n,height:s})),[n,s]),S=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:g?0:1,transition:`opacity ${u}`},c)),[g,u,c]),v=(0,o.useCallback)((e=>{d&&d(e),h(!0)}),[d]),w=a?`lazy-image-wrapper ${a}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:w,style:m,children:[g&&i,(0,r.jsx)(G,Object.assign({ref:t,width:n,height:s,style:S,onLoad:v},p))]})}));H.displayName="FallbackLazyImage";const K=({condition:e,trueComponent:t,falseComponent:n})=>{const s=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:s?t:n})},q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:s,triggerPosition:i="after",rootMargin:a="150px 0px"})=>{const{ref:c}=J({onIntersectStart:e,root:n,threshold:o,enabled:s,rootMargin:a});return(0,r.jsxs)(r.Fragment,{children:["before"===i&&(0,r.jsx)("div",{ref:c}),t,"after"===i&&(0,r.jsx)("div",{ref:c})]})},Q=d(((e,t)=>{var{children:n,as:s="div",asChild:i=!1}=e,a=l(e,["children","as","asChild"]);const c=i?N:s,{ref:u}=J(a);if(i&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(c,Object.assign({ref:R(t,u)},a,{children:n}))})),Z=({items:e=[],itemKey:t,renderItem:n})=>{const s=(0,o.useCallback)(((e,n)=>function(e){return C(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},s(e,t))))})},ee=m()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=V(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),s=(0,o.useMemo)((()=>function(){if(g())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,s,(({target:t})=>{if(!r.current)return;const o=r.current,s=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!s&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:s="div",asChild:i=!1,onPointerDown:a,excludeRefs:c=[]}=e,u=l(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(a,{excludeRefs:c}),p=i?N:s;if(i&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(p,Object.assign({ref:R(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const se=({itemKey:e,items:t=[],separator:n,renderItem:s,separatorInterval:i=1,includeLastSeparator:a=!1})=>{const c=(0,o.useCallback)((e=>e===t.length-1?a:(e+1)%i==0),[a,i,t.length]);return(0,r.jsx)(Z,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[s(e,t),c(t)&&n]})})},ie=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ae=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function ce(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function le(e=!0){const t=k(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!s.current){s.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{s.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),s=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield S(e);return t(n),!0}catch{return t(null),!1}}))),[]),i=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield w(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),a=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return p(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return p(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:s,copyImage:i,readText:a,readContents:c}}const pe="modern-kit-local-storage",fe="modern-kit-session-storage",he={localStorage:{key:pe,subscribe:e=>{window.addEventListener(pe,e)},unsubscribe:e=>{window.removeEventListener(pe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(pe))}},sessionStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}}},ge=e=>he[e],me=ge("localStorage"),Se=e=>window.localStorage.getItem(e),ve=e=>JSON.stringify(e),we=e=>(me.subscribe(e),()=>{me.unsubscribe(e)});function be(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=k(n)?n():n,s=(0,o.useSyncExternalStore)(we,(()=>Se(t)),(()=>ve(r)));return{state:(0,o.useMemo)((()=>s?O(s):r),[s,r]),setState:(0,o.useCallback)((e=>{try{const n=Se(t),o=n?O(n):r,s=k(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(s)),me.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),me.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const ye=(e,t)=>m()?window.matchMedia(e).matches:t??!1;function xe(e,t){const[n,r]=(0,o.useState)(ye(e,t)),s=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",s),n}function ke(){return xe("(prefers-color-scheme: dark)")?"dark":"light"}const je="color-scheme";function Ce({defaultValue:e,key:t=je,shouldSetBodyClass:n=!1}={}){const r=ke(),s=k(e)?e():e,{state:i,setState:a}=be({key:t,initialValue:s??r}),c=(0,o.useCallback)((()=>{a((e=>"dark"===e?"light":"dark"))}),[a]),l=(0,o.useCallback)((()=>{a("dark")}),[a]),u=(0,o.useCallback)((()=>{a("light")}),[a]),d=(0,o.useCallback)((()=>{a(r)}),[a,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(i),()=>{n&&document.body.classList.remove(i)})),[i,n]),{colorScheme:i,preferredColorScheme:r,setToggleMode:c,setDarkMode:l,setLightMode:u,setPreferredMode:d}}function Ee(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),s=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),i=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:s,reset:i}}function Oe({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,s]=(0,o.useState)(t),i=r0,c=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),l=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const i=c(e,t);o&&o({prev:r,next:i}),s(i)}),[n,r,c]),u=(0,o.useCallback)((e=>{l("nextStep",!i,e)}),[i,l]),d=(0,o.useCallback)((e=>{l("prevStep",!a,e)}),[a,l]),p=(0,o.useCallback)(((t,n)=>{const o=k(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void s(t);throw new Error("Step not valid")}),[r,e]),f=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),s(t)}),[r,t]);return{currentStep:r,hasNextStep:i,hasPrevStep:a,goToNextStep:u,goToPrevStep:d,setStep:p,resetStep:f}}function Re(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:s,resetStep:i}=Oe({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:s,resetIndex:i}}function Te(e,t,n={}){const[r,s]=(0,o.useState)(e);return[r,_(s,t,n)]}function Ne(e,t={}){const[n,r]=(0,o.useState)(""),[s,i]=Te("",e,t);return{value:n,debouncedValue:s,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),i(t)}),[i]),onReset:(0,o.useCallback)((()=>{r(""),i("")}),[i])}}function Ie(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Pe({onFocus:e=E,onBlur:t=E}={}){const[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(null),i=V((t=>{r(!0),e(t)})),a=V((e=>{r(!1),t(e)})),c=(0,o.useCallback)((()=>{s.current&&(s.current.focus(),r(!0))}),[]);return ne(s,"focus",i),ne(s,"blur",a),{ref:s,isFocus:n,setFocus:c}}function $e({onEnter:e=E,onLeave:t=E}={}){const[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(null),i=V((t=>{r(!0),e(t)})),a=V((e=>{r(!1),t(e)}));return ne(s,"mouseenter",i),ne(s,"mouseleave",a),{ref:s,isHovered:n}}const Fe=e=>{var t;return j(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function Le(e,t){const n=(0,o.useRef)(),r=V(e),{delay:s,enabled:i}=Fe(t),a=(0,o.useCallback)((()=>{n.current=window.setInterval(r,s)}),[r,s]),c=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{c(),a()}),[c,a]);return(0,o.useEffect)((()=>{if(!(s<0)&&i)return a(),()=>c()}),[c,a,i,s]),{set:a,reset:l,clear:c}}function Me({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),s=V((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];k(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",s),()=>t.removeEventListener("keydown",s)}),[e,s]),r}const Ye={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Be(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Ye),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:s,clientY:i,pageX:a,pageY:c}=t;let l=null,u=null,d=null,p=null;if(e.current){const t=e.current.getBoundingClientRect();l=s-t.left,u=i-t.top,d=t.left+window.scrollX,p=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:s,clientY:i,pageX:a,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:p})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const We=()=>navigator.onLine,Ae=()=>!0,Xe=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function Ve({onlineAction:e=E,offlineAction:t=E}={}){const n=V((n=>Xe(n,e,t)));return(0,o.useSyncExternalStore)(n,We,Ae)}function ze(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const De={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function _e(e=E){const[t,n]=(0,o.useState)(De),r=(0,o.useRef)(null),s=V((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(s);return t.observe(e),()=>{t.unobserve(e)}}),[s]),{ref:r,contentRect:t}}function Ue({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),s=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>s())),[e,r,s]),{ref:t,lock:r,unlock:s}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ge=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:s=0,alignY:i="start",alignX:a="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+s+Je(window.innerHeight,r.height,i),left:r.left+window.scrollX+o+Je(window.innerWidth,r.width,a)};const c=e.getBoundingClientRect();return{top:r.top-c.top+e.scrollTop+s+Je(c.height,r.height,i),left:r.left-c.left+e.scrollLeft+o+Je(c.width,r.width,a)}};function He(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:s,top:i}=Ge(r,t,n);r.scrollTo({top:i,left:s,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ke=ge("sessionStorage"),qe=e=>window.sessionStorage.getItem(e),Qe=e=>JSON.stringify(e),Ze=e=>(Ke.subscribe(e),()=>{Ke.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=k(n)?n():n,s=(0,o.useSyncExternalStore)(Ze,(()=>qe(t)),(()=>Qe(r)));return{state:(0,o.useMemo)((()=>s?O(s):r),[s,r]),setState:(0,o.useCallback)((e=>{try{const n=qe(t),o=n?O(n):r,s=k(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(s)),Ke.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ke.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:s}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[i,a]=(0,o.useState)(n),c=(0,o.useCallback)((e=>{a((t=>{const n=k(e)?e(t):e;return r&&s&&function(e,t,n){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=k(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,s,n),n}))}),[r,s]),l=(0,o.useCallback)((()=>{r&&s&&function(e,t){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,s),a(null)}),[r,s]);return Object.assign({state:i,setState:c,clearState:l},Oe(e))}function nt(e,t,n={}){const r=V(e),s=D(n),i=(0,o.useMemo)((()=>(0,a.A)(r,t,s)),[r,t,s]);return z((()=>i.cancel())),i}const rt=e=>{var t;return j(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=V(e),{delay:s,enabled:i}=rt(t),a=(0,o.useCallback)((()=>{n.current=setTimeout(r,s)}),[r,s]),c=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{c(),a()}),[c,a]);return(0,o.useEffect)((()=>{if(!(s<0)&&i)return a(),()=>c()}),[a,c,s,i]),{set:a,reset:l,clear:c}}function st(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function it(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new c.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ct={width:null,height:null};function lt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>g()?ct:{width:window.innerWidth,height:window.innerHeight})),r=_(n,e),s=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",s),t}function ut(e,t,n){const{delay:r,enabled:s}=rt(t),{set:i,reset:a,clear:c}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!s||a()}),[r,s,a,...n]),{set:i,reset:a,clear:c}}}}]); \ No newline at end of file diff --git a/assets/js/225c6dfe.4dfdc544.js b/assets/js/225c6dfe.4dfdc544.js new file mode 100644 index 000000000..474e9a0bc --- /dev/null +++ b/assets/js/225c6dfe.4dfdc544.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[8034],{8177:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>f,assets:()=>p,contentTitle:()=>d,default:()=>g,frontMatter:()=>u,metadata:()=>r,toc:()=>m});const r=JSON.parse('{"id":"react/hooks/useMouse","title":"useMouse","description":"\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\ub97c \uae30\uc900\uc73c\ub85c \ub9c8\uc6b0\uc2a4\uc758 \uc704\uce58\ub97c \ucd94\uc801\ud558\ub294 Hook\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useMouse.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useMouse","permalink":"/modern-kit/docs/react/hooks/useMouse","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useMergeRefs","permalink":"/modern-kit/docs/react/hooks/useMergeRefs"},"next":{"title":"useNetwork","permalink":"/modern-kit/docs/react/hooks/useNetwork"}}');var o=t(6206),i=t(3267),s=t(4382),c=t(1351);const l={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};var a=t(9010);const u={},d="useMouse",p={},f=()=>{const e={div:"div",p:"p",...(0,i.R)()},{ref:n,position:t}=function(){const e=(0,s.useRef)(null),[n,t]=(0,s.useState)(l),r=(0,s.useCallback)((n=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l}=n;let a=null,u=null,d=null,p=null;if(e.current){const n=e.current.getBoundingClientRect();a=i-n.left,u=s-n.top,d=n.left+window.scrollX,p=n.top+window.scrollY}t({screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l,elementRelativeX:a,elementRelativeY:u,elementPositionX:d,elementPositionY:p})}),[]);return(0,c.M)(document,"mousemove",r),{ref:e,position:n}}(),r=(0,s.useMemo)((()=>({display:"flex",alignItems:"center",justifyContent:"center",width:"500px",height:"500px",background:"#439966",fontSize:"2rem",color:"#fff"})),[]);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.div,{ref:n,style:r,children:"\ub9c8\uc6b0\uc2a4\ub97c \uc6c0\uc9c1\uc5ec\ubcf4\uc138\uc694."}),(0,o.jsxs)(e.p,{children:["\uc0ac\uc6a9\uc790 \ubaa8\ub2c8\ud130 \ub0b4 X\uc88c\ud45c: ",t.screenX]}),(0,o.jsxs)(e.p,{children:["\uc0ac\uc6a9\uc790 \ubaa8\ub2c8\ud130 \ub0b4 Y\uc88c\ud45c: ",t.screenY]}),(0,o.jsxs)(e.p,{children:["\uc2a4\ud06c\ub9b0 \uc601\uc5ed \ub0b4 X\uc88c\ud45c: ",t.clientX]}),(0,o.jsxs)(e.p,{children:["\uc2a4\ud06c\ub9b0 \uc601\uc5ed \ub0b4 Y\uc88c\ud45c: ",t.clientY]}),(0,o.jsxs)(e.p,{children:["\uc804\uccb4 \ubb38\uc11c \uae30\uc900 X\uc88c\ud45c: ",t.pageX]}),(0,o.jsxs)(e.p,{children:["\uc804\uccb4 \ubb38\uc11c \uae30\uc900 Y\uc88c\ud45c: ",t.pageY]}),(0,o.jsxs)(e.p,{children:["\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8 \uae30\uc900 X\uc88c\ud45c: ",t.elementRelativeX]}),(0,o.jsxs)(e.p,{children:["\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8 \uae30\uc900 Y\uc88c\ud45c: ",t.elementRelativeY]}),(0,o.jsxs)(e.p,{children:["\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\uc758 X\uc88c\ud45c : ",t.elementPositionX]}),(0,o.jsxs)(e.p,{children:["\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\uc758 Y\uc88c\ud45c : ",t.elementPositionY]})]})},m=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function h(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"usemouse",children:"useMouse"})}),"\n",(0,o.jsx)(n.p,{children:"\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\ub97c \uae30\uc900\uc73c\ub85c \ub9c8\uc6b0\uc2a4\uc758 \uc704\uce58\ub97c \ucd94\uc801\ud558\ub294 Hook\uc785\ub2c8\ub2e4."}),"\n",(0,o.jsx)(n.p,{children:"\ud604\uc7ac \uc2a4\ud06c\ub9b0\uc5d0\uc11c\uc758 \uc704\uce58, \uc2a4\ud06c\ub9b0 \uc601\uc5ed \ub0b4\uc758 \uc704\uce58, \uc804\uccb4 \ubb38\uc11c\uc5d0\uc11c\uc758 \uc704\uce58, \ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8 \uae30\uc900 \uc704\uce58, \ud574\ub2f9 \uc5d8\ub9ac\uba3c\ud2b8\uc758 \uc704\uce58\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4."}),"\n",(0,o.jsx)(n.p,{children:"\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\uac00 \uc5c6\ub294 \uacbd\uc6b0 \uc0c1\ub300\uc801\uc778 \uc704\uce58\uc640 \ud574\ub2f9 \uc5d8\ub9ac\uba3c\ud2b8\uc758 \uc704\uce58\ub294 \uc81c\uacf5\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4."}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useMouse/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"\ninterface CursorPosition {\n screenX: number | null;\n screenY: number | null;\n clientX: number | null;\n clientY: number | null;\n pageX: number | null;\n pageY: number | null;\n elementRelativeX: number | null;\n elementRelativeY: number | null;\n elementPositionX: number | null;\n elementPositionY: number | null;\n}\n\nfunction useMouse(): {\n ref: React.RefObject;\n position: CursorPosition;\n}\n"})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useMouse } from '@modern-kit/react';\n\nconst Example = () => {\n const { ref, position } = useMouse();\n const boxStyle = useMemo(() => {\n return {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '500px', \n height: '500px',\n background: '#439966',\n fontSize: '2rem',\n color: '#fff',\n }\n }, []);\n\n return (\n <>\n
\n \ub9c8\uc6b0\uc2a4\ub97c \uc6c0\uc9c1\uc5ec\ubcf4\uc138\uc694.\n
\n

\uc0ac\uc6a9\uc790 \ubaa8\ub2c8\ud130 \ub0b4 X\uc88c\ud45c: {position.screenX}

\n

\uc0ac\uc6a9\uc790 \ubaa8\ub2c8\ud130 \ub0b4 Y\uc88c\ud45c: {position.screenY}

\n

\uc2a4\ud06c\ub9b0 \uc601\uc5ed \ub0b4 X\uc88c\ud45c: {position.clientX}

\n

\uc2a4\ud06c\ub9b0 \uc601\uc5ed \ub0b4 Y\uc88c\ud45c: {position.clientY}

\n

\uc804\uccb4 \ubb38\uc11c \uae30\uc900 X\uc88c\ud45c: {position.pageX}

\n

\uc804\uccb4 \ubb38\uc11c \uae30\uc900 Y\uc88c\ud45c: {position.pageY}

\n

\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8 \uae30\uc900 X\uc88c\ud45c: {position.elementRelativeX}

\n

\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8 \uae30\uc900 Y\uc88c\ud45c: {position.elementRelativeY}

\n

\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\uc758 X\uc88c\ud45c : {position.elementPositionX}

\n

\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\uc758 Y\uc88c\ud45c : {position.elementPositionY}

\n

\n );\n};\n"})}),"\n",(0,o.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(a.A,{children:()=>(0,o.jsx)(f,{})})]})}function g(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},9010:(e,n,t)=>{t.d(n,{A:()=>i});t(4382);var r=t(3555),o=t(6206);function i(e){let{children:n,fallback:t}=e;return(0,r.A)()?(0,o.jsx)(o.Fragment,{children:n?.()}):t??null}},3267:(e,n,t)=>{t.d(n,{R:()=>s,x:()=>c});var r=t(4382);const o={},i=r.createContext(o);function s(e){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),r.createElement(i.Provider,{value:n},e.children)}},1351:(e,n,t)=>{t.d(n,{M:()=>c});var r=t(6765),o=t(5907),i=t(9340);t(4382);const s=e=>!!e&&(0,i.i5)(e,"current");function c(e,n,t,i){const c=(0,r.p)(t);(0,o.E)((()=>{const t=s(e)?e.current:e;if(t)return t.addEventListener(n,c,i),()=>{t.removeEventListener(n,c,i)}}),[n,e,i,c])}},5907:(e,n,t)=>{t.d(n,{E:()=>i});var r=t(9340),o=t(4382);const i=(0,r.oc)()?o.useLayoutEffect:o.useEffect},6765:(e,n,t)=>{t.d(n,{p:()=>o});var r=t(4382);function o(e){const n=(0,r.useRef)(e);return n.current=e,(0,r.useCallback)(((...e)=>n.current(...e)),[])}},9340:(e,n,t)=>{function r(e,n,t,r){return new(t||(t=Promise))((function(o,i){function s(e){try{l(r.next(e))}catch(n){i(n)}}function c(e){try{l(r.throw(e))}catch(n){i(n)}}function l(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(s,c)}l((r=r.apply(e,n||[])).next())}))}t.d(n,{Et:()=>b,Fr:()=>c,Gp:()=>v,Ol:()=>Y,Qd:()=>j,S$:()=>s,Tn:()=>w,Zp:()=>p,dK:()=>a,fl:()=>C,gD:()=>x,i5:()=>m,if:()=>f,l6:()=>k,lQ:()=>X,nS:()=>d,ni:()=>P,oc:()=>l}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,n)=>new Promise(((t,r)=>{e.toBlob((e=>{e?t(e):r(new Error(`Failed to create blob with format ${n}`))}),n)}));function s(){return"undefined"==typeof window}function c(){if(s())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function l(){return!s()}function a(e){return r(this,void 0,void 0,(function*(){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const u=e=>r(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return a(yield n.text())}));function d(e,n){var t;return r(this,void 0,void 0,(function*(){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return u(e);if(!("write"in window.navigator.clipboard))return u(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return u(e);const s=yield function(e,n="png"){return new Promise(((t,s)=>{const c=new Image;c.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=c.width,e.height=c.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(c,0,0);const s=yield i(e,o[n]);t(s)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),s(r)}})),c.onerror=()=>{s(new Error("Failed to load image"))},c.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[s.type]:s})]),s}catch(s){throw console.error(`Failed to copy to clipboard. message: ${s.message}`),s}}))}function p(){return r(this,void 0,void 0,(function*(){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function f(){return r(this,void 0,void 0,(function*(){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function m(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const h=(e,n,t)=>{const r=Object.keys(e),o=Object.keys(n);if(r.length!==o.length)return!1;for(let i=0;i{if(e===n)return!0;if(b(e)&&b(n)&&isNaN(e)&&isNaN(n))return!0;if(w(e)&&w(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const r=[...e],o=[...n];return h(r,o,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[r,o]of e)if(!n.has(r)||!g(o,n.get(r),t))return!1;return!0}return h(e,n,t)};function v(e,n){return g(e,n,new WeakMap)}function w(e){return"function"==typeof e}function x(e){return null==e}function b(e){return"number"==typeof e}function y(e){return!function(e){return Object(e)!==e}(e)}function j(e){return y(e)&&"[object Object]"===Object.prototype.toString.call(e)}function k(e){return e===window}function X(){}function Y(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function E(e){return Object.keys(e)}const M={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};E(M);function C(e,n){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function P(e,n,t){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=w(t)?t():t;r.setItem(n,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${n}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/225c6dfe.7b9830ad.js b/assets/js/225c6dfe.7b9830ad.js deleted file mode 100644 index 6b0922d17..000000000 --- a/assets/js/225c6dfe.7b9830ad.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[8034],{252:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>f,assets:()=>d,contentTitle:()=>u,default:()=>m,frontMatter:()=>a,metadata:()=>r,toc:()=>p});const r=JSON.parse('{"id":"react/hooks/useMouse","title":"useMouse","description":"\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\ub97c \uae30\uc900\uc73c\ub85c \ub9c8\uc6b0\uc2a4\uc758 \uc704\uce58\ub97c \ucd94\uc801\ud558\ub294 Hook\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useMouse.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useMouse","permalink":"/modern-kit/docs/react/hooks/useMouse","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useMergeRefs","permalink":"/modern-kit/docs/react/hooks/useMergeRefs"},"next":{"title":"useNetwork","permalink":"/modern-kit/docs/react/hooks/useNetwork"}}');var o=n(6206),i=n(3267),s=n(4382),c=n(4027),l=n(9010);const a={},u="useMouse",d={},f=()=>{const e={div:"div",p:"p",...(0,i.R)()},{ref:t,position:n}=(0,c.NT)(),r=(0,s.useMemo)((()=>({display:"flex",alignItems:"center",justifyContent:"center",width:"500px",height:"500px",background:"#439966",fontSize:"2rem",color:"#fff"})),[]);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.div,{ref:t,style:r,children:"\ub9c8\uc6b0\uc2a4\ub97c \uc6c0\uc9c1\uc5ec\ubcf4\uc138\uc694."}),(0,o.jsxs)(e.p,{children:["\uc0ac\uc6a9\uc790 \ubaa8\ub2c8\ud130 \ub0b4 X\uc88c\ud45c: ",n.screenX]}),(0,o.jsxs)(e.p,{children:["\uc0ac\uc6a9\uc790 \ubaa8\ub2c8\ud130 \ub0b4 Y\uc88c\ud45c: ",n.screenY]}),(0,o.jsxs)(e.p,{children:["\uc2a4\ud06c\ub9b0 \uc601\uc5ed \ub0b4 X\uc88c\ud45c: ",n.clientX]}),(0,o.jsxs)(e.p,{children:["\uc2a4\ud06c\ub9b0 \uc601\uc5ed \ub0b4 Y\uc88c\ud45c: ",n.clientY]}),(0,o.jsxs)(e.p,{children:["\uc804\uccb4 \ubb38\uc11c \uae30\uc900 X\uc88c\ud45c: ",n.pageX]}),(0,o.jsxs)(e.p,{children:["\uc804\uccb4 \ubb38\uc11c \uae30\uc900 Y\uc88c\ud45c: ",n.pageY]}),(0,o.jsxs)(e.p,{children:["\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8 \uae30\uc900 X\uc88c\ud45c: ",n.elementRelativeX]}),(0,o.jsxs)(e.p,{children:["\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8 \uae30\uc900 Y\uc88c\ud45c: ",n.elementRelativeY]}),(0,o.jsxs)(e.p,{children:["\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\uc758 X\uc88c\ud45c : ",n.elementPositionX]}),(0,o.jsxs)(e.p,{children:["\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\uc758 Y\uc88c\ud45c : ",n.elementPositionY]})]})},p=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function h(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usemouse",children:"useMouse"})}),"\n",(0,o.jsx)(t.p,{children:"\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\ub97c \uae30\uc900\uc73c\ub85c \ub9c8\uc6b0\uc2a4\uc758 \uc704\uce58\ub97c \ucd94\uc801\ud558\ub294 Hook\uc785\ub2c8\ub2e4."}),"\n",(0,o.jsx)(t.p,{children:"\ud604\uc7ac \uc2a4\ud06c\ub9b0\uc5d0\uc11c\uc758 \uc704\uce58, \uc2a4\ud06c\ub9b0 \uc601\uc5ed \ub0b4\uc758 \uc704\uce58, \uc804\uccb4 \ubb38\uc11c\uc5d0\uc11c\uc758 \uc704\uce58, \ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8 \uae30\uc900 \uc704\uce58, \ud574\ub2f9 \uc5d8\ub9ac\uba3c\ud2b8\uc758 \uc704\uce58\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4."}),"\n",(0,o.jsx)(t.p,{children:"\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\uac00 \uc5c6\ub294 \uacbd\uc6b0 \uc0c1\ub300\uc801\uc778 \uc704\uce58\uc640 \ud574\ub2f9 \uc5d8\ub9ac\uba3c\ud2b8\uc758 \uc704\uce58\ub294 \uc81c\uacf5\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4."}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useMouse/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"\ninterface CursorPosition {\n screenX: number | null;\n screenY: number | null;\n clientX: number | null;\n clientY: number | null;\n pageX: number | null;\n pageY: number | null;\n elementRelativeX: number | null;\n elementRelativeY: number | null;\n elementPositionX: number | null;\n elementPositionY: number | null;\n}\n\nfunction useMouse(): {\n ref: React.RefObject;\n position: CursorPosition;\n}\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useMouse } from '@modern-kit/react';\n\nconst Example = () => {\n const { ref, position } = useMouse();\n const boxStyle = useMemo(() => {\n return {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '500px', \n height: '500px',\n background: '#439966',\n fontSize: '2rem',\n color: '#fff',\n }\n }, []);\n\n return (\n <>\n
\n \ub9c8\uc6b0\uc2a4\ub97c \uc6c0\uc9c1\uc5ec\ubcf4\uc138\uc694.\n
\n

\uc0ac\uc6a9\uc790 \ubaa8\ub2c8\ud130 \ub0b4 X\uc88c\ud45c: {position.screenX}

\n

\uc0ac\uc6a9\uc790 \ubaa8\ub2c8\ud130 \ub0b4 Y\uc88c\ud45c: {position.screenY}

\n

\uc2a4\ud06c\ub9b0 \uc601\uc5ed \ub0b4 X\uc88c\ud45c: {position.clientX}

\n

\uc2a4\ud06c\ub9b0 \uc601\uc5ed \ub0b4 Y\uc88c\ud45c: {position.clientY}

\n

\uc804\uccb4 \ubb38\uc11c \uae30\uc900 X\uc88c\ud45c: {position.pageX}

\n

\uc804\uccb4 \ubb38\uc11c \uae30\uc900 Y\uc88c\ud45c: {position.pageY}

\n

\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8 \uae30\uc900 X\uc88c\ud45c: {position.elementRelativeX}

\n

\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8 \uae30\uc900 Y\uc88c\ud45c: {position.elementRelativeY}

\n

\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\uc758 X\uc88c\ud45c : {position.elementPositionX}

\n

\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\uc758 Y\uc88c\ud45c : {position.elementPositionY}

\n

\n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(l.A,{children:()=>(0,o.jsx)(f,{})})]})}function m(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},9010:(e,t,n)=>{n.d(t,{A:()=>i});n(4382);var r=n(3555),o=n(6206);function i(e){let{children:t,fallback:n}=e;return(0,r.A)()?(0,o.jsx)(o.Fragment,{children:t?.()}):n??null}},4027:(e,t,n)=>{n.d(t,{$$:()=>Pe,$I:()=>oe,AE:()=>ze,BL:()=>J,DX:()=>Y,FT:()=>ct,Fo:()=>et,Hn:()=>it,I5:()=>Ee,JF:()=>Le,K:()=>ae,K$:()=>He,M0:()=>Me,ML:()=>ne,Mj:()=>ye,Mk:()=>Fe,Mo:()=>ie,NT:()=>Te,QV:()=>Ue,Ub:()=>ke,Ut:()=>je,W7:()=>U,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>We,Zu:()=>le,_1:()=>Oe,_g:()=>nt,aL:()=>H,aY:()=>Ye,bB:()=>A,d7:()=>B,eG:()=>st,fN:()=>ce,fm:()=>G,gl:()=>P,hN:()=>V,iD:()=>de,iQ:()=>Ie,jd:()=>se,lW:()=>at,oD:()=>K,oo:()=>Re,pL:()=>q,qi:()=>ue,rN:()=>Xe,tD:()=>Se,u8:()=>Q,wY:()=>Be,xV:()=>I,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),i=n(3683),s=n(5086),c=n(7197),l=(n(1604),n(5938));function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function g(){return!m()}function w(e){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const b=e=>f(void 0,0,void 0,(function*(){return w(yield(yield fetch(e)).text())}));function v(e,t){var n;return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return b(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield h(e,p[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||C(e)&&C(t)&&isNaN(e)&&isNaN(t))return!0;if(S(e)&&S(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function k(e,t){return x(e,t,new WeakMap)}function S(e){return"function"==typeof e}function C(e){return"number"==typeof e}function j(e){return!function(e){return Object(e)!==e}(e)}function E(){}function R(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const O=(...e)=>t=>e.forEach((e=>{if(S(e))e(t);else if(null!=e){e.current=t}}));function M(...e){return(0,o.useCallback)(O(...e),e)}const Y=o.forwardRef(((e,t)=>{const{children:n}=e,i=a(e,["children"]),s=o.Children.toArray(n),c=s.find(F);if(c){const e=c.props.children,n=s.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(X,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(X,Object.assign({},i,{ref:t,children:n}))}));Y.displayName="Slot";const X=o.forwardRef(((e,t)=>{const{children:n}=e,r=a(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?O(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));X.displayName="SlotClone";const I=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function F(e){return o.isValidElement(e)&&e.type===I}var N="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const P=d(((e,t)=>{var{ratio:n,style:o,as:s="div",asChild:c=!1}=e,l=a(e,["ratio","style","as","asChild"]);const u=c?Y:s,d=Object.assign({aspectRatio:n},o),f=c?l.className:i(N,l.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},l))})),L=()=>E,$=()=>!1,T=()=>!0;function A({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(L,$,T)?e:t}function D(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const V=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>D()?(0,r.jsx)(r.Fragment,{children:t}):e;function z(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function W(e){const t=z(e);(0,o.useEffect)((()=>()=>t()),[t])}function _(e,t=k){const[n,r]=(0,o.useState)(e),i=z(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function B(e,t,n){const r=z(e),i=_(n),c=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return W((()=>c.cancel())),c}const H=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),s=B(((...e)=>{const n=i?.props;if(n&&S(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:s})};function J({onIntersectStart:e=E,onIntersectEnd:t=E,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:s=0,rootMargin:c="0px 0px 0px 0px"}){const l=(0,o.useRef)(0),a=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=z((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(a.current=!0,l.current+=1,e(n)):a.current&&(a.current=!1,l.current+=1,t(n)),r&&l.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:s,root:i,rootMargin:c}),u.current.observe(e))}),[n,s,i,c,d])}}const K=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:s}=e,c=a(e,["src","threshold","root","rootMargin"]);const{ref:l}=J({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:M(t,l)},c))}));K.displayName="LazyImage";const U=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=a(e,["width","height","fallback","className","style","duration","onLoad"]);const[p,h]=(0,o.useState)(!1),m=!p,g=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),w=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},l)),[m,u,l]),b=(0,o.useCallback)((e=>{d&&d(e),h(!0)}),[d]),v=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:g,children:[m&&s,(0,r.jsx)(K,Object.assign({ref:t,width:n,height:i,style:w,onLoad:b},f))]})}));U.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:s="after",rootMargin:c="150px 0px"})=>{const{ref:l}=J({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:l}),t,"after"===s&&(0,r.jsx)("div",{ref:l})]})},q=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1}=e,c=a(e,["children","as","asChild"]);const l=s?Y:i,{ref:u}=J(c);if(s&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(l,Object.assign({ref:O(t,u)},c,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return j(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=g()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=z(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1,onPointerDown:c,excludeRefs:l=[]}=e,u=a(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:l}),f=s?Y:i;if(s&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:O(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:s=1,includeLastSeparator:c=!1})=>{const l=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%s==0),[c,s,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),l(t)&&n]})})},se=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function le(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function ae(e=!0){const t=S(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield w(e);return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),l=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:s,readText:c,readContents:l}}const fe="modern-kit-local-storage",pe="modern-kit-session-storage",he={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:pe,subscribe:e=>{window.addEventListener(pe,e)},unsubscribe:e=>{window.removeEventListener(pe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(pe))}}},me=e=>he[e],ge=me("localStorage"),we=e=>window.localStorage.getItem(e),be=e=>JSON.stringify(e),ve=e=>(ge.subscribe(e),()=>{ge.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(ve,(()=>we(t)),(()=>be(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=we(t),o=n?R(n):r,i=S(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),ge.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ge.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>g()?window.matchMedia(e).matches:t??!1;function ke(e,t){const[n,r]=(0,o.useState)(xe(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function Se(){return ke("(prefers-color-scheme: dark)")?"dark":"light"}const Ce="color-scheme";function je({defaultValue:e,key:t=Ce,shouldSetBodyClass:n=!1}={}){const r=Se(),i=S(e)?e():e,{state:s,setState:c}=ye({key:t,initialValue:i??r}),l=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),a=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(s),()=>{n&&document.body.classList.remove(s)})),[s,n]),{colorScheme:s,preferredColorScheme:r,setToggleMode:l,setDarkMode:a,setLightMode:u,setPreferredMode:d}}function Ee(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:s}}function Re({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),s=r0,l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),a=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const s=l(e,t);o&&o({prev:r,next:s}),i(s)}),[n,r,l]),u=(0,o.useCallback)((e=>{a("nextStep",!s,e)}),[s,a]),d=(0,o.useCallback)((e=>{a("prevStep",!c,e)}),[c,a]),f=(0,o.useCallback)(((t,n)=>{const o=S(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),p=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:s,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:p}}function Oe(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=Re({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}function Me(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,B(i,t,n)]}function Ye(e,t={}){const[n,r]=(0,o.useState)(""),[i,s]=Me("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),s(t)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Xe(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ie({onFocus:e=E,onBlur:t=E}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=z((t=>{r(!0),e(t)})),c=z((e=>{r(!1),t(e)})),l=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",s),ne(i,"blur",c),{ref:i,isFocus:n,setFocus:l}}function Fe({onEnter:e=E,onLeave:t=E}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=z((t=>{r(!0),e(t)})),c=z((e=>{r(!1),t(e)}));return ne(i,"mouseenter",s),ne(i,"mouseleave",c),{ref:i,isHovered:n}}const Ne=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function Pe(e,t){const n=(0,o.useRef)(),r=z(e),{delay:i,enabled:s}=Ne(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>l()}),[l,c,s,i]),{set:c,reset:a,clear:l}}function Le({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=z((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];S(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const $e={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Te(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)($e),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l}=t;let a=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();a=i-t.left,u=s-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l,elementRelativeX:a,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Ae=()=>navigator.onLine,De=()=>!0,Ve=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function ze({onlineAction:e=E,offlineAction:t=E}={}){const n=z((n=>Ve(n,e,t)));return(0,o.useSyncExternalStore)(n,Ae,De)}function We(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const _e={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function Be(e=E){const[t,n]=(0,o.useState)(_e),r=(0,o.useRef)(null),i=z((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function He({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:s="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+Je(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+Je(window.innerWidth,r.width,c)};const l=e.getBoundingClientRect();return{top:r.top-l.top+e.scrollTop+i+Je(l.height,r.height,s),left:r.left-l.left+e.scrollLeft+o+Je(l.width,r.width,c)}};function Ue(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:s}=Ke(r,t,n);r.scrollTo({top:s,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?R(n):r,i=S(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[s,c]=(0,o.useState)(n),l=(0,o.useCallback)((e=>{c((t=>{const n=S(e)?e(t):e;return r&&i&&function(e,t,n){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=S(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),a=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),c(null)}),[r,i]);return Object.assign({state:s,setState:l,clearState:a},Re(e))}function nt(e,t,n={}){const r=z(e),i=_(n),s=(0,o.useMemo)((()=>(0,c.A)(r,t,i)),[r,t,i]);return W((()=>s.cancel())),s}const rt=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=z(e),{delay:i,enabled:s}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>l()}),[c,l,i,s]),{set:c,reset:a,clear:l}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function st(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new l.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const lt={width:null,height:null};function at({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?lt:{width:window.innerWidth,height:window.innerHeight})),r=B(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:s,reset:c,clear:l}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||c()}),[r,i,c,...n]),{set:s,reset:c,clear:l}}}}]); \ No newline at end of file diff --git a/assets/js/24c74d07.b0f51709.js b/assets/js/24c74d07.b0f51709.js deleted file mode 100644 index 72a74efc8..000000000 --- a/assets/js/24c74d07.b0f51709.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[8440],{6639:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>c,default:()=>h,frontMatter:()=>a,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"react/components/FallbackLazyImage","title":"FallbackLazyImage","description":"LazyImage \ucef4\ud3ec\ub10c\ud2b8 \ub97c \ud655\uc7a5\ud574 \uc774\ubbf8\uc9c0 load \uc5ec\ubd80\uc5d0 \ub530\ub978 Fallback \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1 \ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8 \uc785\ub2c8\ub2e4.","source":"@site/docs/react/components/FallbackLazyImage.mdx","sourceDirName":"react/components","slug":"/react/components/FallbackLazyImage","permalink":"/modern-kit/docs/react/components/FallbackLazyImage","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"DebounceHandler","permalink":"/modern-kit/docs/react/components/DebounceHandler"},"next":{"title":"IfElse","permalink":"/modern-kit/docs/react/components/IfElse"}}');var o=n(6206),i=n(3267),s=n(4027);const a={},c="FallbackLazyImage",l={},u=()=>{const e={div:"div",...(0,i.R)()},t={width:"500px",height:"500px",backgroundColor:"green"};return(0,o.jsxs)(e.div,{style:{background:"#f8f8f8",width:"500px"},children:[(0,o.jsx)(e.div,{style:{height:"500px",textAlign:"center",fontSize:"2rem"},children:"\uc2a4\ud06c\ub864 \ud574\uc8fc\uc138\uc694."}),(0,o.jsx)(s.W7,{fallback:(0,o.jsx)(e.div,{style:t}),src:"https://github.com/Team-Grace/devgrace/assets/64779472/b5640bec-2abc-4205-afbf-ccfd9876a90b",alt:"img1",width:500,height:500}),(0,o.jsx)(e.div,{style:{width:"100%",height:"150px"}}),(0,o.jsx)(s.W7,{fallback:(0,o.jsx)(e.div,{style:t}),src:"https://github.com/Team-Grace/devgrace/assets/64779472/207743a7-b29f-4826-bc08-8df0d67e568b",alt:"img2",width:500,height:500}),(0,o.jsx)(e.div,{style:{width:"100%",height:"150px"}}),(0,o.jsx)(s.W7,{fallback:(0,o.jsx)(e.div,{style:t}),src:"https://github.com/Team-Grace/devgrace/assets/64779472/d1957ec8-fe87-406e-bfda-fb4ee505b152",alt:"img3",width:500,height:500})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Default",id:"default",level:3},{value:"Wrapper Styling: css",id:"wrapper-styling-css",level:3},{value:"Wrapper Styling: css-in-js",id:"wrapper-styling-css-in-js",level:3},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"fallbacklazyimage",children:"FallbackLazyImage"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/LazyImage",children:"LazyImage \ucef4\ud3ec\ub10c\ud2b8"})})," \ub97c \ud655\uc7a5\ud574 \uc774\ubbf8\uc9c0 ",(0,o.jsx)(t.code,{children:"load \uc5ec\ubd80"}),"\uc5d0 \ub530\ub978 ",(0,o.jsx)(t.code,{children:"Fallback \ucef4\ud3ec\ub10c\ud2b8"}),"\ub97c \ub80c\ub354\ub9c1 \ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8 \uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"src"}),"\uc640 \ub354\ubd88\uc5b4 ",(0,o.jsx)(t.code,{children:"width"}),", ",(0,o.jsx)(t.code,{children:"height"}),", ",(0,o.jsx)(t.code,{children:"fallback"})," props\ub97c \ud544\uc218\ub85c \ub118\uaca8\uc918\uc57c \ud558\uba70, fallback\uc758 \ud06c\uae30\ub294 \ud574\ub2f9 width, height\uc640 \ub3d9\uc77c\ud558\uac8c \ub9de\ucd94\ub294 \uac83\uc744 \uad8c\uc7a5\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"duration"})," props\ub294 \uc2e4\uc81c \uc774\ubbf8\uc9c0\uac00 load \ub41c \ud6c4, fallback \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc2e4\uc81c \uc774\ubbf8\uc9c0\ub85c \uc804\ud658 \ub420 \ub54c \uc0ac\uc6a9\ud558\ub294 ",(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration",children:"transition-duration"})})," \uac12\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/FallbackLazyImage/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface IntersectionObserverInit {\n root?: Element | Document | null;\n rootMargin?: string;\n threshold?: number | number[];\n}\n\ninterface LazyImageProps\n extends React.ComponentProps<'img'>,\n IntersectionObserverInit {\n src: string;\n}\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescrpt"',children:"interface FallbackLazyImageProps extends LazyImageProps {\n fallback: JSX.Element;\n width: string | number;\n height: string | number;\n duration?: CSSProperties['transitionDuration']; // default: 0.2s\n}\n\nconst FallbackLazyImage: React.ForwardRefExoticComponent<\n Omit & React.RefAttributes\n>;\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.h3,{id:"default",children:"Default"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { FallbackLazyImage } from '@modern-kit/react';\nimport img1 from '../assets/img1.png';\n\nconst Example = () => {\n const skeletonStyle = useMemo(\n () => ({\n width: '400px', // \uc2e4\uc81c img \ud06c\uae30\uc640 \ub3d9\uc77c\ud558\uac8c \ub9de\ucdb0\uc8fc\uc138\uc694.\n height: '400px', // \uc2e4\uc81c img \ud06c\uae30\uc640 \ub3d9\uc77c\ud558\uac8c \ub9de\ucdb0\uc8fc\uc138\uc694.\n backgroundColor: 'green',\n }),\n []\n );\n return (\n
\n }\n width={400}\n height={400}\n src={img1}\n alt=\"img1\"\n />\n
\n );\n};\n"})}),"\n",(0,o.jsx)(t.h3,{id:"wrapper-styling-css",children:"Wrapper Styling: css"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:["FallbackLazyImage \ucef4\ud3ec\ub10c\ud2b8 \ub0b4 ",(0,o.jsx)(t.code,{children:"Image Wrapper"}),"\ub294 \uae30\ubcf8\uc801\uc73c\ub85c ",(0,o.jsx)(t.code,{children:"lazy-image-wrapper"})," \ud074\ub798\uc2a4\ub97c \uac16\uc2b5\ub2c8\ub2e4. \ud574\ub2f9 \ud074\ub798\uc2a4\ub97c \ud65c\uc6a9\ud558\uc5ec \uc2a4\ud0c0\uc77c\uc744 \uc81c\uc5b4 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-css",children:"/* css stylesheet */\n.lazy-image-wrapper {\n border-radius: 12px;\n overflow: hidden;\n}\n\n.lazy-image-wrapper > img {\n /* image styling */\n}\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:"\n"})}),"\n",(0,o.jsx)(t.h3,{id:"wrapper-styling-css-in-js",children:"Wrapper Styling: css-in-js"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"css-in-js"}),"\uc758 ",(0,o.jsx)(t.code,{children:"\uc0c1\uc18d"}),"\uae30\ub2a5\uc744 \ud65c\uc6a9\ud558\uc5ec \uc0c8\ub85c\uc6b4 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc791\uc131 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:"const Image = styled(FallbackLazyImage)`\n border-radius: 12px;\n overflow: hidden;\n\n & > img {\n /* image styling */\n }\n`;\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:"\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(u,{})]})}function h(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(f,{...e})}):f(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>Me,$I:()=>oe,AE:()=>Ae,BL:()=>J,DX:()=>F,FT:()=>at,Fo:()=>et,Hn:()=>it,I5:()=>Ee,JF:()=>$e,K:()=>le,K$:()=>He,M0:()=>Le,ML:()=>ne,Mj:()=>ve,Mk:()=>Ne,Mo:()=>ie,NT:()=>We,QV:()=>Ke,Ub:()=>ke,Ut:()=>Ce,W7:()=>K,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>Ve,Zu:()=>ce,_1:()=>Re,_g:()=>nt,aL:()=>H,aY:()=>Fe,bB:()=>D,d7:()=>B,eG:()=>st,fN:()=>ae,fm:()=>q,gl:()=>M,hN:()=>X,iD:()=>de,iQ:()=>ze,jd:()=>se,lW:()=>lt,oD:()=>U,oo:()=>Ie,pL:()=>Q,qi:()=>ue,rN:()=>Oe,tD:()=>je,u8:()=>Z,wY:()=>Be,xV:()=>z,xh:()=>tt,zy:()=>G});var r=n(6206),o=n(4382),i=n(3683),s=n(5086),a=n(7197),c=(n(1604),n(5938));function l(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function g(){return typeof window>"u"}function m(){return!g()}function b(e){return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const w=e=>f(void 0,0,void 0,(function*(){return b(yield(yield fetch(e)).text())}));function y(e,t){var n;return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return w(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield p(e,h[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const v=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||S(e)&&S(t)&&isNaN(e)&&isNaN(t))return!0;if(j(e)&&j(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return v(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return v(e,t,n)};function k(e,t){return x(e,t,new WeakMap)}function j(e){return"function"==typeof e}function S(e){return"number"==typeof e}function C(e){return!function(e){return Object(e)!==e}(e)}function E(){}function I(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const R=(...e)=>t=>e.forEach((e=>{if(j(e))e(t);else if(null!=e){e.current=t}}));function L(...e){return(0,o.useCallback)(R(...e),e)}const F=o.forwardRef(((e,t)=>{const{children:n}=e,i=l(e,["children"]),s=o.Children.toArray(n),a=s.find(N);if(a){const e=a.props.children,n=s.map((t=>t===a?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(O,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(O,Object.assign({},i,{ref:t,children:n}))}));F.displayName="Slot";const O=o.forwardRef(((e,t)=>{const{children:n}=e,r=l(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?R(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));O.displayName="SlotClone";const z=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function N(e){return o.isValidElement(e)&&e.type===z}var P="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const M=d(((e,t)=>{var{ratio:n,style:o,as:s="div",asChild:a=!1}=e,c=l(e,["ratio","style","as","asChild"]);const u=a?F:s,d=Object.assign({aspectRatio:n},o),f=a?c.className:i(P,c.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},c))})),$=()=>E,T=()=>!1,W=()=>!0;function D({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)($,T,W)?e:t}function Y(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const X=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>Y()?(0,r.jsx)(r.Fragment,{children:t}):e;function A(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function V(e){const t=A(e);(0,o.useEffect)((()=>()=>t()),[t])}function _(e,t=k){const[n,r]=(0,o.useState)(e),i=A(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function B(e,t,n){const r=A(e),i=_(n),a=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return V((()=>a.cancel())),a}const H=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),s=B(((...e)=>{const n=i?.props;if(n&&j(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:s})};function J({onIntersectStart:e=E,onIntersectEnd:t=E,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:s=0,rootMargin:a="0px 0px 0px 0px"}){const c=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=A((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(l.current=!0,c.current+=1,e(n)):l.current&&(l.current=!1,c.current+=1,t(n)),r&&c.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:s,root:i,rootMargin:a}),u.current.observe(e))}),[n,s,i,a,d])}}const U=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:s}=e,a=l(e,["src","threshold","root","rootMargin"]);const{ref:c}=J({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:L(t,c)},a))}));U.displayName="LazyImage";const K=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:s,className:a,style:c,duration:u="0.2s",onLoad:d}=e,f=l(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),g=!h,m=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),b=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:g?0:1,transition:`opacity ${u}`},c)),[g,u,c]),w=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),y=a?`lazy-image-wrapper ${a}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:y,style:m,children:[g&&s,(0,r.jsx)(U,Object.assign({ref:t,width:n,height:i,style:b,onLoad:w},f))]})}));K.displayName="FallbackLazyImage";const G=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},Z=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:s="after",rootMargin:a="150px 0px"})=>{const{ref:c}=J({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:a});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:c}),t,"after"===s&&(0,r.jsx)("div",{ref:c})]})},Q=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1}=e,a=l(e,["children","as","asChild"]);const c=s?F:i,{ref:u}=J(a);if(s&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(c,Object.assign({ref:R(t,u)},a,{children:n}))})),q=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return C(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=m()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=A(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(g())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1,onPointerDown:a,excludeRefs:c=[]}=e,u=l(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(a,{excludeRefs:c}),f=s?F:i;if(s&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:R(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:s=1,includeLastSeparator:a=!1})=>{const c=(0,o.useCallback)((e=>e===t.length-1?a:(e+1)%s==0),[a,s,t.length]);return(0,r.jsx)(q,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),c(t)&&n]})})},se=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ae=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function ce(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function le(e=!0){const t=j(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield b(e);return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield y(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),a=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:s,readText:a,readContents:c}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},ge=e=>pe[e],me=ge("localStorage"),be=e=>window.localStorage.getItem(e),we=e=>JSON.stringify(e),ye=e=>(me.subscribe(e),()=>{me.unsubscribe(e)});function ve(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=j(n)?n():n,i=(0,o.useSyncExternalStore)(ye,(()=>be(t)),(()=>we(r)));return{state:(0,o.useMemo)((()=>i?I(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=be(t),o=n?I(n):r,i=j(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),me.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),me.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>m()?window.matchMedia(e).matches:t??!1;function ke(e,t){const[n,r]=(0,o.useState)(xe(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function je(){return ke("(prefers-color-scheme: dark)")?"dark":"light"}const Se="color-scheme";function Ce({defaultValue:e,key:t=Se,shouldSetBodyClass:n=!1}={}){const r=je(),i=j(e)?e():e,{state:s,setState:a}=ve({key:t,initialValue:i??r}),c=(0,o.useCallback)((()=>{a((e=>"dark"===e?"light":"dark"))}),[a]),l=(0,o.useCallback)((()=>{a("dark")}),[a]),u=(0,o.useCallback)((()=>{a("light")}),[a]),d=(0,o.useCallback)((()=>{a(r)}),[a,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(s),()=>{n&&document.body.classList.remove(s)})),[s,n]),{colorScheme:s,preferredColorScheme:r,setToggleMode:c,setDarkMode:l,setLightMode:u,setPreferredMode:d}}function Ee(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:s}}function Ie({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),s=r0,c=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),l=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const s=c(e,t);o&&o({prev:r,next:s}),i(s)}),[n,r,c]),u=(0,o.useCallback)((e=>{l("nextStep",!s,e)}),[s,l]),d=(0,o.useCallback)((e=>{l("prevStep",!a,e)}),[a,l]),f=(0,o.useCallback)(((t,n)=>{const o=j(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:s,hasPrevStep:a,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Re(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=Ie({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}function Le(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,B(i,t,n)]}function Fe(e,t={}){const[n,r]=(0,o.useState)(""),[i,s]=Le("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),s(t)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Oe(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function ze({onFocus:e=E,onBlur:t=E}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=A((t=>{r(!0),e(t)})),a=A((e=>{r(!1),t(e)})),c=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",s),ne(i,"blur",a),{ref:i,isFocus:n,setFocus:c}}function Ne({onEnter:e=E,onLeave:t=E}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=A((t=>{r(!0),e(t)})),a=A((e=>{r(!1),t(e)}));return ne(i,"mouseenter",s),ne(i,"mouseleave",a),{ref:i,isHovered:n}}const Pe=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function Me(e,t){const n=(0,o.useRef)(),r=A(e),{delay:i,enabled:s}=Pe(t),a=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),c=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{c(),a()}),[c,a]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return a(),()=>c()}),[c,a,s,i]),{set:a,reset:l,clear:c}}function $e({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=A((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];j(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const Te={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function We(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Te),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:a,pageY:c}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=i-t.left,u=s-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:s,pageX:a,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const De=()=>navigator.onLine,Ye=()=>!0,Xe=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function Ae({onlineAction:e=E,offlineAction:t=E}={}){const n=A((n=>Xe(n,e,t)));return(0,o.useSyncExternalStore)(n,De,Ye)}function Ve(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const _e={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function Be(e=E){const[t,n]=(0,o.useState)(_e),r=(0,o.useRef)(null),i=A((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function He({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ue=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:s="start",alignX:a="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+Je(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+Je(window.innerWidth,r.width,a)};const c=e.getBoundingClientRect();return{top:r.top-c.top+e.scrollTop+i+Je(c.height,r.height,s),left:r.left-c.left+e.scrollLeft+o+Je(c.width,r.width,a)}};function Ke(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:s}=Ue(r,t,n);r.scrollTo({top:s,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ge=ge("sessionStorage"),Ze=e=>window.sessionStorage.getItem(e),Qe=e=>JSON.stringify(e),qe=e=>(Ge.subscribe(e),()=>{Ge.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=j(n)?n():n,i=(0,o.useSyncExternalStore)(qe,(()=>Ze(t)),(()=>Qe(r)));return{state:(0,o.useMemo)((()=>i?I(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Ze(t),o=n?I(n):r,i=j(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ge.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ge.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[s,a]=(0,o.useState)(n),c=(0,o.useCallback)((e=>{a((t=>{const n=j(e)?e(t):e;return r&&i&&function(e,t,n){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=j(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),l=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),a(null)}),[r,i]);return Object.assign({state:s,setState:c,clearState:l},Ie(e))}function nt(e,t,n={}){const r=A(e),i=_(n),s=(0,o.useMemo)((()=>(0,a.A)(r,t,i)),[r,t,i]);return V((()=>s.cancel())),s}const rt=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=A(e),{delay:i,enabled:s}=rt(t),a=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),c=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{c(),a()}),[c,a]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return a(),()=>c()}),[a,c,i,s]),{set:a,reset:l,clear:c}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function st(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new c.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ct={width:null,height:null};function lt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>g()?ct:{width:window.innerWidth,height:window.innerHeight})),r=B(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:s,reset:a,clear:c}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||a()}),[r,i,a,...n]),{set:s,reset:a,clear:c}}}}]); \ No newline at end of file diff --git a/assets/js/24c74d07.f02220dd.js b/assets/js/24c74d07.f02220dd.js new file mode 100644 index 000000000..b12763bf7 --- /dev/null +++ b/assets/js/24c74d07.f02220dd.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[8440],{9690:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>p,assets:()=>h,contentTitle:()=>u,default:()=>m,frontMatter:()=>d,metadata:()=>r,toc:()=>g});const r=JSON.parse('{"id":"react/components/FallbackLazyImage","title":"FallbackLazyImage","description":"LazyImage \ucef4\ud3ec\ub10c\ud2b8 \ub97c \ud655\uc7a5\ud574 \uc774\ubbf8\uc9c0 load \uc5ec\ubd80\uc5d0 \ub530\ub978 Fallback \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1 \ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8 \uc785\ub2c8\ub2e4.","source":"@site/docs/react/components/FallbackLazyImage.mdx","sourceDirName":"react/components","slug":"/react/components/FallbackLazyImage","permalink":"/modern-kit/docs/react/components/FallbackLazyImage","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"DebounceHandler","permalink":"/modern-kit/docs/react/components/DebounceHandler"},"next":{"title":"IfElse","permalink":"/modern-kit/docs/react/components/IfElse"}}');var o=t(6206),a=t(3267),i=t(4076),s=t(4382),c=t(7261);const l=(0,s.forwardRef)(((e,n)=>{var{width:t,height:r,fallback:a,className:l,style:d,duration:u="0.2s",onLoad:h}=e,p=(0,i._)(e,["width","height","fallback","className","style","duration","onLoad"]);const[g,f]=(0,s.useState)(!1),m=!g,b=(0,s.useMemo)((()=>({position:"relative",width:t,height:r})),[t,r]),y=(0,s.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},d)),[m,u,d]),x=(0,s.useCallback)((e=>{h&&h(e),f(!0)}),[h]),w=l?`lazy-image-wrapper ${l}`:"lazy-image-wrapper";return(0,o.jsxs)("div",{className:w,style:b,children:[m&&a,(0,o.jsx)(c.o,Object.assign({ref:n,width:t,height:r,style:y,onLoad:x},p))]})}));l.displayName="FallbackLazyImage";const d={},u="FallbackLazyImage",h={},p=()=>{const e={div:"div",...(0,a.R)()},n={width:"500px",height:"500px",backgroundColor:"green"};return(0,o.jsxs)(e.div,{style:{background:"#f8f8f8",width:"500px"},children:[(0,o.jsx)(e.div,{style:{height:"500px",textAlign:"center",fontSize:"2rem"},children:"\uc2a4\ud06c\ub864 \ud574\uc8fc\uc138\uc694."}),(0,o.jsx)(l,{fallback:(0,o.jsx)(e.div,{style:n}),src:"https://github.com/Team-Grace/devgrace/assets/64779472/b5640bec-2abc-4205-afbf-ccfd9876a90b",alt:"img1",width:500,height:500}),(0,o.jsx)(e.div,{style:{width:"100%",height:"150px"}}),(0,o.jsx)(l,{fallback:(0,o.jsx)(e.div,{style:n}),src:"https://github.com/Team-Grace/devgrace/assets/64779472/207743a7-b29f-4826-bc08-8df0d67e568b",alt:"img2",width:500,height:500}),(0,o.jsx)(e.div,{style:{width:"100%",height:"150px"}}),(0,o.jsx)(l,{fallback:(0,o.jsx)(e.div,{style:n}),src:"https://github.com/Team-Grace/devgrace/assets/64779472/d1957ec8-fe87-406e-bfda-fb4ee505b152",alt:"img3",width:500,height:500})]})},g=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Default",id:"default",level:3},{value:"Wrapper Styling: css",id:"wrapper-styling-css",level:3},{value:"Wrapper Styling: css-in-js",id:"wrapper-styling-css-in-js",level:3},{value:"Example",id:"example",level:2}];function f(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"fallbacklazyimage",children:"FallbackLazyImage"})}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/LazyImage",children:"LazyImage \ucef4\ud3ec\ub10c\ud2b8"})})," \ub97c \ud655\uc7a5\ud574 \uc774\ubbf8\uc9c0 ",(0,o.jsx)(n.code,{children:"load \uc5ec\ubd80"}),"\uc5d0 \ub530\ub978 ",(0,o.jsx)(n.code,{children:"Fallback \ucef4\ud3ec\ub10c\ud2b8"}),"\ub97c \ub80c\ub354\ub9c1 \ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8 \uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"src"}),"\uc640 \ub354\ubd88\uc5b4 ",(0,o.jsx)(n.code,{children:"width"}),", ",(0,o.jsx)(n.code,{children:"height"}),", ",(0,o.jsx)(n.code,{children:"fallback"})," props\ub97c \ud544\uc218\ub85c \ub118\uaca8\uc918\uc57c \ud558\uba70, fallback\uc758 \ud06c\uae30\ub294 \ud574\ub2f9 width, height\uc640 \ub3d9\uc77c\ud558\uac8c \ub9de\ucd94\ub294 \uac83\uc744 \uad8c\uc7a5\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"duration"})," props\ub294 \uc2e4\uc81c \uc774\ubbf8\uc9c0\uac00 load \ub41c \ud6c4, fallback \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc2e4\uc81c \uc774\ubbf8\uc9c0\ub85c \uc804\ud658 \ub420 \ub54c \uc0ac\uc6a9\ud558\ub294 ",(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration",children:"transition-duration"})})," \uac12\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/FallbackLazyImage/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"interface IntersectionObserverInit {\n root?: Element | Document | null;\n rootMargin?: string;\n threshold?: number | number[];\n}\n\ninterface LazyImageProps\n extends React.ComponentProps<'img'>,\n IntersectionObserverInit {\n src: string;\n}\n"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescrpt"',children:"interface FallbackLazyImageProps extends LazyImageProps {\n fallback: JSX.Element;\n width: string | number;\n height: string | number;\n duration?: CSSProperties['transitionDuration']; // default: 0.2s\n}\n\nconst FallbackLazyImage: React.ForwardRefExoticComponent<\n Omit & React.RefAttributes\n>;\n"})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.h3,{id:"default",children:"Default"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { FallbackLazyImage } from '@modern-kit/react';\nimport img1 from '../assets/img1.png';\n\nconst Example = () => {\n const skeletonStyle = useMemo(\n () => ({\n width: '400px', // \uc2e4\uc81c img \ud06c\uae30\uc640 \ub3d9\uc77c\ud558\uac8c \ub9de\ucdb0\uc8fc\uc138\uc694.\n height: '400px', // \uc2e4\uc81c img \ud06c\uae30\uc640 \ub3d9\uc77c\ud558\uac8c \ub9de\ucdb0\uc8fc\uc138\uc694.\n backgroundColor: 'green',\n }),\n []\n );\n return (\n
\n }\n width={400}\n height={400}\n src={img1}\n alt=\"img1\"\n />\n
\n );\n};\n"})}),"\n",(0,o.jsx)(n.h3,{id:"wrapper-styling-css",children:"Wrapper Styling: css"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["FallbackLazyImage \ucef4\ud3ec\ub10c\ud2b8 \ub0b4 ",(0,o.jsx)(n.code,{children:"Image Wrapper"}),"\ub294 \uae30\ubcf8\uc801\uc73c\ub85c ",(0,o.jsx)(n.code,{children:"lazy-image-wrapper"})," \ud074\ub798\uc2a4\ub97c \uac16\uc2b5\ub2c8\ub2e4. \ud574\ub2f9 \ud074\ub798\uc2a4\ub97c \ud65c\uc6a9\ud558\uc5ec \uc2a4\ud0c0\uc77c\uc744 \uc81c\uc5b4 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-css",children:"/* css stylesheet */\n.lazy-image-wrapper {\n border-radius: 12px;\n overflow: hidden;\n}\n\n.lazy-image-wrapper > img {\n /* image styling */\n}\n"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:"\n"})}),"\n",(0,o.jsx)(n.h3,{id:"wrapper-styling-css-in-js",children:"Wrapper Styling: css-in-js"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"css-in-js"}),"\uc758 ",(0,o.jsx)(n.code,{children:"\uc0c1\uc18d"}),"\uae30\ub2a5\uc744 \ud65c\uc6a9\ud558\uc5ec \uc0c8\ub85c\uc6b4 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc791\uc131 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:"const Image = styled(FallbackLazyImage)`\n border-radius: 12px;\n overflow: hidden;\n\n & > img {\n /* image styling */\n }\n`;\n"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:"\n"})}),"\n",(0,o.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(p,{})]})}function m(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(f,{...e})}):f(e)}},4076:(e,n,t)=>{function r(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);or,a:()=>o}),"function"==typeof SuppressedError&&SuppressedError},3267:(e,n,t)=>{t.d(n,{R:()=>i,x:()=>s});var r=t(4382);const o={},a=r.createContext(o);function i(e){const n=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),r.createElement(a.Provider,{value:n},e.children)}},7261:(e,n,t)=>{t.d(n,{o:()=>l});var r=t(4076),o=t(6206),a=t(4382),i=t(7399),s=t(2424);function c(...e){return(0,a.useCallback)((0,s.P)(...e),e)}const l=(0,a.forwardRef)(((e,n)=>{var{src:t,threshold:a,root:s,rootMargin:l}=e,d=(0,r._)(e,["src","threshold","root","rootMargin"]);const{ref:u}=(0,i.B)({onIntersectStart:e=>{e.target.src=t},calledOnce:!0,threshold:a,root:s,rootMargin:l});return(0,o.jsx)("img",Object.assign({ref:c(n,u)},d))}));l.displayName="LazyImage"},7399:(e,n,t)=>{t.d(n,{B:()=>i});var r=t(4382),o=t(6765),a=t(9340);function i({onIntersectStart:e=a.lQ,onIntersectEnd:n=a.lQ,enabled:t=!0,calledOnce:i=!1,root:s=null,threshold:c=0,rootMargin:l="0px 0px 0px 0px"}){const d=(0,r.useRef)(0),u=(0,r.useRef)(!1),h=(0,r.useRef)(null),p=(0,o.p)((([t],r)=>{if(!t)return;const o=t.target;t.isIntersecting?(u.current=!0,d.current+=1,e(t)):u.current&&(u.current=!1,d.current+=1,n(t)),i&&d.current>1&&r.unobserve(o)}));return{ref:(0,r.useCallback)((e=>{h.current&&(h.current.disconnect(),h.current=null),null!==e&&t&&(h.current=new IntersectionObserver(p,{threshold:c,root:s,rootMargin:l}),h.current.observe(e))}),[t,c,s,l,p])}}},6765:(e,n,t)=>{t.d(n,{p:()=>o});var r=t(4382);function o(e){const n=(0,r.useRef)(e);return n.current=e,(0,r.useCallback)(((...e)=>n.current(...e)),[])}},2424:(e,n,t)=>{t.d(n,{P:()=>o});var r=t(9340);const o=(...e)=>n=>e.forEach((e=>{if((0,r.Tn)(e))e(n);else if(null!=e){e.current=n}}))},9340:(e,n,t)=>{function r(e,n,t,r){return new(t||(t=Promise))((function(o,a){function i(e){try{c(r.next(e))}catch(n){a(n)}}function s(e){try{c(r.throw(e))}catch(n){a(n)}}function c(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(i,s)}c((r=r.apply(e,n||[])).next())}))}t.d(n,{Et:()=>w,Fr:()=>s,Gp:()=>b,Ol:()=>z,Qd:()=>j,S$:()=>i,Tn:()=>y,Zp:()=>h,dK:()=>l,fl:()=>S,gD:()=>x,i5:()=>g,if:()=>p,l6:()=>k,lQ:()=>I,nS:()=>u,ni:()=>O,oc:()=>c}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const a=(e,n)=>new Promise(((t,r)=>{e.toBlob((e=>{e?t(e):r(new Error(`Failed to create blob with format ${n}`))}),n)}));function i(){return"undefined"==typeof window}function s(){if(i())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function c(){return!i()}function l(e){return r(this,void 0,void 0,(function*(){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const d=e=>r(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return l(yield n.text())}));function u(e,n){var t;return r(this,void 0,void 0,(function*(){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return d(e);if(!("write"in window.navigator.clipboard))return d(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return d(e);const i=yield function(e,n="png"){return new Promise(((t,i)=>{const s=new Image;s.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=s.width,e.height=s.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(s,0,0);const i=yield a(e,o[n]);t(i)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),i(r)}})),s.onerror=()=>{i(new Error("Failed to load image"))},s.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(i){throw console.error(`Failed to copy to clipboard. message: ${i.message}`),i}}))}function h(){return r(this,void 0,void 0,(function*(){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(){return r(this,void 0,void 0,(function*(){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function g(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const f=(e,n,t)=>{const r=Object.keys(e),o=Object.keys(n);if(r.length!==o.length)return!1;for(let a=0;a{if(e===n)return!0;if(w(e)&&w(n)&&isNaN(e)&&isNaN(n))return!0;if(y(e)&&y(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const r=[...e],o=[...n];return f(r,o,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[r,o]of e)if(!n.has(r)||!m(o,n.get(r),t))return!1;return!0}return f(e,n,t)};function b(e,n){return m(e,n,new WeakMap)}function y(e){return"function"==typeof e}function x(e){return null==e}function w(e){return"number"==typeof e}function v(e){return!function(e){return Object(e)!==e}(e)}function j(e){return v(e)&&"[object Object]"===Object.prototype.toString.call(e)}function k(e){return e===window}function I(){}function z(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function E(e){return Object.keys(e)}const F={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};E(F);function S(e,n){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function O(e,n,t){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=y(t)?t():t;r.setItem(n,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${n}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/295f1714.2f90ba2f.js b/assets/js/295f1714.2f90ba2f.js deleted file mode 100644 index 6d21932ec..000000000 --- a/assets/js/295f1714.2f90ba2f.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[8310],{1632:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>l,default:()=>p,frontMatter:()=>a,metadata:()=>r,toc:()=>f});const r=JSON.parse('{"id":"react/hooks/useHover","title":"useHover","description":"\ub300\uc0c1 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uae30\uc900\uc73c\ub85c \ub9c8\uc6b0\uc2a4\uac00 \uc62c\ub77c\uac00\uac70\ub098 \ub0b4\ub824\uac14\uc744 \ub54c\uc758 \uc0c1\ud0dc\ub97c \ubc18\ud658\ud558\uace0, \ub9c8\uc6b0\uc2a4\uac00 \uc62c\ub77c\uac00\uac70\ub098 \ub0b4\ub824\uac14\uc744 \ub54c\uc758 \uc561\uc158\uc744 \uc815\uc758\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useHover.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useHover","permalink":"/modern-kit/docs/react/hooks/useHover","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useForceUpdate","permalink":"/modern-kit/docs/react/hooks/useForceUpdate"},"next":{"title":"useImageStatus","permalink":"/modern-kit/docs/react/hooks/useImageStatus"}}');var o=n(6206),s=n(3267),i=n(4027),c=n(4382);const a={},l="useHover",u={},d=()=>{const e={div:"div",...(0,s.R)()},[t,n]=(0,c.useState)(0),{ref:r,isHovered:a}=(0,i.Mk)({onEnter:()=>n((e=>e+1)),onLeave:()=>n((e=>e-1))});return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.div,{ref:r,style:{width:"200px",height:"200px",backgroundColor:"skyBlue"},children:a?"hover":"leave"}),(0,o.jsx)(e.div,{children:t})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function h(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usehover",children:"useHover"})}),"\n",(0,o.jsx)(t.p,{children:"\ub300\uc0c1 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uae30\uc900\uc73c\ub85c \ub9c8\uc6b0\uc2a4\uac00 \uc62c\ub77c\uac00\uac70\ub098 \ub0b4\ub824\uac14\uc744 \ub54c\uc758 \uc0c1\ud0dc\ub97c \ubc18\ud658\ud558\uace0, \ub9c8\uc6b0\uc2a4\uac00 \uc62c\ub77c\uac00\uac70\ub098 \ub0b4\ub824\uac14\uc744 \ub54c\uc758 \uc561\uc158\uc744 \uc815\uc758\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useHover/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"const useHover: ({\n onEnter?: (event: MouseEvent) => void,\n onLeave?: (event: MouseEvent) => void,\n}) => {\n ref: T,\n isHovered: boolean\n}\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useHover } from '@modern-kit/react';\n\nconst Example = () => {\n const [counter, setCounter] = useState(0);\n\n const { ref, isHovered } = useHover({\n onEnter: () => setCounter((count) => count + 1),\n onLeave: () => setCounter((count) => count - 1)\n });\n\n const style = {\n width: '200px',\n height: '200px',\n backgroundColor: 'skyBlue'\n };\n\n return (\n <>\n
{isHovered ? 'hover' : 'leave'}
\n
{counter}
\n \n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(d,{})]})}function p(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>Pe,$I:()=>oe,AE:()=>Ae,BL:()=>J,DX:()=>I,FT:()=>ct,Fo:()=>et,Hn:()=>st,I5:()=>je,JF:()=>Te,K:()=>le,K$:()=>ze,M0:()=>Fe,ML:()=>ne,Mj:()=>ye,Mk:()=>Ne,Mo:()=>se,NT:()=>Ye,QV:()=>Ke,Ub:()=>ke,Ut:()=>Ee,W7:()=>K,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>Be,Zu:()=>ae,_1:()=>Oe,_g:()=>nt,aL:()=>z,aY:()=>Ie,bB:()=>X,d7:()=>_,eG:()=>it,fN:()=>ce,fm:()=>G,gl:()=>P,hN:()=>V,iD:()=>de,iQ:()=>Me,jd:()=>ie,lW:()=>lt,oD:()=>U,oo:()=>Re,pL:()=>q,qi:()=>ue,rN:()=>Le,tD:()=>Se,u8:()=>Q,wY:()=>_e,xV:()=>M,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),s=n(3683),i=n(5086),c=n(7197),a=(n(1604),n(5938));function l(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function v(){return!m()}function g(e){return f(this,0,void 0,(function*(){if(!v())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const w=e=>f(void 0,0,void 0,(function*(){return g(yield(yield fetch(e)).text())}));function b(e,t){var n;return f(this,0,void 0,(function*(){if(!v())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return w(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const s=yield p(e,h[t]);n(s)}catch(s){console.error(`Failed to load image. message: ${s.mesaage}`),r(s)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let s=0;s{if(e===t||C(e)&&C(t)&&isNaN(e)&&isNaN(t))return!0;if(S(e)&&S(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function k(e,t){return x(e,t,new WeakMap)}function S(e){return"function"==typeof e}function C(e){return"number"==typeof e}function E(e){return!function(e){return Object(e)!==e}(e)}function j(){}function R(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const O=(...e)=>t=>e.forEach((e=>{if(S(e))e(t);else if(null!=e){e.current=t}}));function F(...e){return(0,o.useCallback)(O(...e),e)}const I=o.forwardRef(((e,t)=>{const{children:n}=e,s=l(e,["children"]),i=o.Children.toArray(n),c=i.find(N);if(c){const e=c.props.children,n=i.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(L,Object.assign({},s,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(L,Object.assign({},s,{ref:t,children:n}))}));I.displayName="Slot";const L=o.forwardRef(((e,t)=>{const{children:n}=e,r=l(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],s=t[r];/^on[A-Z]/.test(r)?o&&s?n[r]=(...e)=>{s(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),s):"className"===r&&(n[r]=[o,s].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?O(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));L.displayName="SlotClone";const M=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function N(e){return o.isValidElement(e)&&e.type===M}var $="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const P=d(((e,t)=>{var{ratio:n,style:o,as:i="div",asChild:c=!1}=e,a=l(e,["ratio","style","as","asChild"]);const u=c?I:i,d=Object.assign({aspectRatio:n},o),f=c?a.className:s($,a.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},a))})),T=()=>j,H=()=>!1,Y=()=>!0;function X({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(T,H,Y)?e:t}function D(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const V=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>D()?(0,r.jsx)(r.Fragment,{children:t}):e;function A(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function B(e){const t=A(e);(0,o.useEffect)((()=>()=>t()),[t])}function W(e,t=k){const[n,r]=(0,o.useState)(e),s=A(t);return(0,o.useEffect)((()=>{s(n,e)||r(e)}),[s,n,e]),n}function _(e,t,n){const r=A(e),s=W(n),c=(0,o.useMemo)((()=>(0,i.A)(r,t,s)),[r,t,s]);return B((()=>c.cancel())),c}const z=({children:e,capture:t,wait:n,options:r})=>{const s=o.Children.only(e),i=_(((...e)=>{const n=s?.props;if(n&&S(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(s,{[t]:i})};function J({onIntersectStart:e=j,onIntersectEnd:t=j,enabled:n=!0,calledOnce:r=!1,root:s=null,threshold:i=0,rootMargin:c="0px 0px 0px 0px"}){const a=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=A((([n],o)=>{if(!n)return;const s=n.target;n.isIntersecting?(l.current=!0,a.current+=1,e(n)):l.current&&(l.current=!1,a.current+=1,t(n)),r&&a.current>1&&o.unobserve(s)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:i,root:s,rootMargin:c}),u.current.observe(e))}),[n,i,s,c,d])}}const U=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:s,rootMargin:i}=e,c=l(e,["src","threshold","root","rootMargin"]);const{ref:a}=J({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:s,rootMargin:i});return(0,r.jsx)("img",Object.assign({ref:F(t,a)},c))}));U.displayName="LazyImage";const K=(0,o.forwardRef)(((e,t)=>{var{width:n,height:s,fallback:i,className:c,style:a,duration:u="0.2s",onLoad:d}=e,f=l(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,v=(0,o.useMemo)((()=>({position:"relative",width:n,height:s})),[n,s]),g=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},a)),[m,u,a]),w=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),b=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:b,style:v,children:[m&&i,(0,r.jsx)(U,Object.assign({ref:t,width:n,height:s,style:g,onLoad:w},f))]})}));K.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const s=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:s?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:s,triggerPosition:i="after",rootMargin:c="150px 0px"})=>{const{ref:a}=J({onIntersectStart:e,root:n,threshold:o,enabled:s,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===i&&(0,r.jsx)("div",{ref:a}),t,"after"===i&&(0,r.jsx)("div",{ref:a})]})},q=d(((e,t)=>{var{children:n,as:s="div",asChild:i=!1}=e,c=l(e,["children","as","asChild"]);const a=i?I:s,{ref:u}=J(c);if(i&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(a,Object.assign({ref:O(t,u)},c,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const s=(0,o.useCallback)(((e,n)=>function(e){return E(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},s(e,t))))})},ee=v()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=A(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),s=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,s,(({target:t})=>{if(!r.current)return;const o=r.current,s=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!s&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:s="div",asChild:i=!1,onPointerDown:c,excludeRefs:a=[]}=e,u=l(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:a}),f=i?I:s;if(i&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:O(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const se=({itemKey:e,items:t=[],separator:n,renderItem:s,separatorInterval:i=1,includeLastSeparator:c=!1})=>{const a=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%i==0),[c,i,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[s(e,t),a(t)&&n]})})},ie=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function ae(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function le(e=!0){const t=S(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!s.current){s.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{s.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),s=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield g(e);return t(n),!0}catch{return t(null),!1}}))),[]),i=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield b(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!v())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),a=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!v())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:s,copyImage:i,readText:c,readContents:a}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],ve=me("localStorage"),ge=e=>window.localStorage.getItem(e),we=e=>JSON.stringify(e),be=e=>(ve.subscribe(e),()=>{ve.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,s=(0,o.useSyncExternalStore)(be,(()=>ge(t)),(()=>we(r)));return{state:(0,o.useMemo)((()=>s?R(s):r),[s,r]),setState:(0,o.useCallback)((e=>{try{const n=ge(t),o=n?R(n):r,s=S(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(s)),ve.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ve.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>v()?window.matchMedia(e).matches:t??!1;function ke(e,t){const[n,r]=(0,o.useState)(xe(e,t)),s=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",s),n}function Se(){return ke("(prefers-color-scheme: dark)")?"dark":"light"}const Ce="color-scheme";function Ee({defaultValue:e,key:t=Ce,shouldSetBodyClass:n=!1}={}){const r=Se(),s=S(e)?e():e,{state:i,setState:c}=ye({key:t,initialValue:s??r}),a=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),l=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(i),()=>{n&&document.body.classList.remove(i)})),[i,n]),{colorScheme:i,preferredColorScheme:r,setToggleMode:a,setDarkMode:l,setLightMode:u,setPreferredMode:d}}function je(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),s=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),i=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:s,reset:i}}function Re({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,s]=(0,o.useState)(t),i=r0,a=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),l=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const i=a(e,t);o&&o({prev:r,next:i}),s(i)}),[n,r,a]),u=(0,o.useCallback)((e=>{l("nextStep",!i,e)}),[i,l]),d=(0,o.useCallback)((e=>{l("prevStep",!c,e)}),[c,l]),f=(0,o.useCallback)(((t,n)=>{const o=S(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void s(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),s(t)}),[r,t]);return{currentStep:r,hasNextStep:i,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Oe(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:s,resetStep:i}=Re({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:s,resetIndex:i}}function Fe(e,t,n={}){const[r,s]=(0,o.useState)(e);return[r,_(s,t,n)]}function Ie(e,t={}){const[n,r]=(0,o.useState)(""),[s,i]=Fe("",e,t);return{value:n,debouncedValue:s,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),i(t)}),[i]),onReset:(0,o.useCallback)((()=>{r(""),i("")}),[i])}}function Le(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Me({onFocus:e=j,onBlur:t=j}={}){const[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(null),i=A((t=>{r(!0),e(t)})),c=A((e=>{r(!1),t(e)})),a=(0,o.useCallback)((()=>{s.current&&(s.current.focus(),r(!0))}),[]);return ne(s,"focus",i),ne(s,"blur",c),{ref:s,isFocus:n,setFocus:a}}function Ne({onEnter:e=j,onLeave:t=j}={}){const[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(null),i=A((t=>{r(!0),e(t)})),c=A((e=>{r(!1),t(e)}));return ne(s,"mouseenter",i),ne(s,"mouseleave",c),{ref:s,isHovered:n}}const $e=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function Pe(e,t){const n=(0,o.useRef)(),r=A(e),{delay:s,enabled:i}=$e(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,s)}),[r,s]),a=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(s<0)&&i)return c(),()=>a()}),[a,c,i,s]),{set:c,reset:l,clear:a}}function Te({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),s=A((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];S(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",s),()=>t.removeEventListener("keydown",s)}),[e,s]),r}const He={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Ye(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(He),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:s,clientY:i,pageX:c,pageY:a}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=s-t.left,u=i-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:s,clientY:i,pageX:c,pageY:a,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Xe=()=>navigator.onLine,De=()=>!0,Ve=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function Ae({onlineAction:e=j,offlineAction:t=j}={}){const n=A((n=>Ve(n,e,t)));return(0,o.useSyncExternalStore)(n,Xe,De)}function Be(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const We={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function _e(e=j){const[t,n]=(0,o.useState)(We),r=(0,o.useRef)(null),s=A((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(s);return t.observe(e),()=>{t.unobserve(e)}}),[s]),{ref:r,contentRect:t}}function ze({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),s=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>s())),[e,r,s]),{ref:t,lock:r,unlock:s}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ue=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:s=0,alignY:i="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+s+Je(window.innerHeight,r.height,i),left:r.left+window.scrollX+o+Je(window.innerWidth,r.width,c)};const a=e.getBoundingClientRect();return{top:r.top-a.top+e.scrollTop+s+Je(a.height,r.height,i),left:r.left-a.left+e.scrollLeft+o+Je(a.width,r.width,c)}};function Ke(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:s,top:i}=Ue(r,t,n);r.scrollTo({top:i,left:s,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,s=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>s?R(s):r),[s,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?R(n):r,s=S(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(s)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:s}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[i,c]=(0,o.useState)(n),a=(0,o.useCallback)((e=>{c((t=>{const n=S(e)?e(t):e;return r&&s&&function(e,t,n){if(!v())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=S(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,s,n),n}))}),[r,s]),l=(0,o.useCallback)((()=>{r&&s&&function(e,t){if(!v())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,s),c(null)}),[r,s]);return Object.assign({state:i,setState:a,clearState:l},Re(e))}function nt(e,t,n={}){const r=A(e),s=W(n),i=(0,o.useMemo)((()=>(0,c.A)(r,t,s)),[r,t,s]);return B((()=>i.cancel())),i}const rt=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=A(e),{delay:s,enabled:i}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,s)}),[r,s]),a=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(s<0)&&i)return c(),()=>a()}),[c,a,s,i]),{set:c,reset:l,clear:a}}function st(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function it(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new a.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const at={width:null,height:null};function lt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?at:{width:window.innerWidth,height:window.innerHeight})),r=_(n,e),s=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",s),t}function ut(e,t,n){const{delay:r,enabled:s}=rt(t),{set:i,reset:c,clear:a}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!s||c()}),[r,s,c,...n]),{set:i,reset:c,clear:a}}}}]); \ No newline at end of file diff --git a/assets/js/295f1714.8387b2be.js b/assets/js/295f1714.8387b2be.js new file mode 100644 index 000000000..deb1a926e --- /dev/null +++ b/assets/js/295f1714.8387b2be.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[8310],{1826:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>h,assets:()=>f,contentTitle:()=>l,default:()=>m,frontMatter:()=>d,metadata:()=>r,toc:()=>p});const r=JSON.parse('{"id":"react/hooks/useHover","title":"useHover","description":"\ub300\uc0c1 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uae30\uc900\uc73c\ub85c \ub9c8\uc6b0\uc2a4\uac00 \uc62c\ub77c\uac00\uac70\ub098 \ub0b4\ub824\uac14\uc744 \ub54c\uc758 \uc0c1\ud0dc\ub97c \ubc18\ud658\ud558\uace0, \ub9c8\uc6b0\uc2a4\uac00 \uc62c\ub77c\uac00\uac70\ub098 \ub0b4\ub824\uac14\uc744 \ub54c\uc758 \uc561\uc158\uc744 \uc815\uc758\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useHover.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useHover","permalink":"/modern-kit/docs/react/hooks/useHover","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useForceUpdate","permalink":"/modern-kit/docs/react/hooks/useForceUpdate"},"next":{"title":"useImageStatus","permalink":"/modern-kit/docs/react/hooks/useImageStatus"}}');var o=t(6206),i=t(3267),s=t(4382),c=t(9340),a=t(1351),u=t(6765);const d={},l="useHover",f={},h=()=>{const e={div:"div",...(0,i.R)()},[n,t]=(0,s.useState)(0),{ref:r,isHovered:d}=function({onEnter:e=c.lQ,onLeave:n=c.lQ}={}){const[t,r]=(0,s.useState)(!1),o=(0,s.useRef)(null),i=(0,u.p)((n=>{r(!0),e(n)})),d=(0,u.p)((e=>{r(!1),n(e)}));return(0,a.M)(o,"mouseenter",i),(0,a.M)(o,"mouseleave",d),{ref:o,isHovered:t}}({onEnter:()=>t((e=>e+1)),onLeave:()=>t((e=>e-1))});return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.div,{ref:r,style:{width:"200px",height:"200px",backgroundColor:"skyBlue"},children:d?"hover":"leave"}),(0,o.jsx)(e.div,{children:n})]})},p=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function v(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"usehover",children:"useHover"})}),"\n",(0,o.jsx)(n.p,{children:"\ub300\uc0c1 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uae30\uc900\uc73c\ub85c \ub9c8\uc6b0\uc2a4\uac00 \uc62c\ub77c\uac00\uac70\ub098 \ub0b4\ub824\uac14\uc744 \ub54c\uc758 \uc0c1\ud0dc\ub97c \ubc18\ud658\ud558\uace0, \ub9c8\uc6b0\uc2a4\uac00 \uc62c\ub77c\uac00\uac70\ub098 \ub0b4\ub824\uac14\uc744 \ub54c\uc758 \uc561\uc158\uc744 \uc815\uc758\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useHover/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"const useHover: ({\n onEnter?: (event: MouseEvent) => void,\n onLeave?: (event: MouseEvent) => void,\n}) => {\n ref: T,\n isHovered: boolean\n}\n"})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useHover } from '@modern-kit/react';\n\nconst Example = () => {\n const [counter, setCounter] = useState(0);\n\n const { ref, isHovered } = useHover({\n onEnter: () => setCounter((count) => count + 1),\n onLeave: () => setCounter((count) => count - 1)\n });\n\n const style = {\n width: '200px',\n height: '200px',\n backgroundColor: 'skyBlue'\n };\n\n return (\n <>\n
{isHovered ? 'hover' : 'leave'}
\n
{counter}
\n \n );\n};\n"})}),"\n",(0,o.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(h,{})]})}function m(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(v,{...e})}):v(e)}},3267:(e,n,t)=>{t.d(n,{R:()=>s,x:()=>c});var r=t(4382);const o={},i=r.createContext(o);function s(e){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),r.createElement(i.Provider,{value:n},e.children)}},1351:(e,n,t)=>{t.d(n,{M:()=>c});var r=t(6765),o=t(5907),i=t(9340);t(4382);const s=e=>!!e&&(0,i.i5)(e,"current");function c(e,n,t,i){const c=(0,r.p)(t);(0,o.E)((()=>{const t=s(e)?e.current:e;if(t)return t.addEventListener(n,c,i),()=>{t.removeEventListener(n,c,i)}}),[n,e,i,c])}},5907:(e,n,t)=>{t.d(n,{E:()=>i});var r=t(9340),o=t(4382);const i=(0,r.oc)()?o.useLayoutEffect:o.useEffect},6765:(e,n,t)=>{t.d(n,{p:()=>o});var r=t(4382);function o(e){const n=(0,r.useRef)(e);return n.current=e,(0,r.useCallback)(((...e)=>n.current(...e)),[])}},9340:(e,n,t)=>{function r(e,n,t,r){return new(t||(t=Promise))((function(o,i){function s(e){try{a(r.next(e))}catch(n){i(n)}}function c(e){try{a(r.throw(e))}catch(n){i(n)}}function a(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(s,c)}a((r=r.apply(e,n||[])).next())}))}t.d(n,{Et:()=>x,Fr:()=>c,Gp:()=>g,Ol:()=>C,Qd:()=>E,S$:()=>s,Tn:()=>w,Zp:()=>f,dK:()=>u,fl:()=>F,gD:()=>y,i5:()=>p,if:()=>h,l6:()=>j,lQ:()=>k,nS:()=>l,ni:()=>$,oc:()=>a}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,n)=>new Promise(((t,r)=>{e.toBlob((e=>{e?t(e):r(new Error(`Failed to create blob with format ${n}`))}),n)}));function s(){return"undefined"==typeof window}function c(){if(s())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function a(){return!s()}function u(e){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const d=e=>r(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return u(yield n.text())}));function l(e,n){var t;return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return d(e);if(!("write"in window.navigator.clipboard))return d(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return d(e);const s=yield function(e,n="png"){return new Promise(((t,s)=>{const c=new Image;c.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=c.width,e.height=c.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(c,0,0);const s=yield i(e,o[n]);t(s)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),s(r)}})),c.onerror=()=>{s(new Error("Failed to load image"))},c.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[s.type]:s})]),s}catch(s){throw console.error(`Failed to copy to clipboard. message: ${s.message}`),s}}))}function f(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function h(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const v=(e,n,t)=>{const r=Object.keys(e),o=Object.keys(n);if(r.length!==o.length)return!1;for(let i=0;i{if(e===n)return!0;if(x(e)&&x(n)&&isNaN(e)&&isNaN(n))return!0;if(w(e)&&w(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const r=[...e],o=[...n];return v(r,o,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[r,o]of e)if(!n.has(r)||!m(o,n.get(r),t))return!1;return!0}return v(e,n,t)};function g(e,n){return m(e,n,new WeakMap)}function w(e){return"function"==typeof e}function y(e){return null==e}function x(e){return"number"==typeof e}function b(e){return!function(e){return Object(e)!==e}(e)}function E(e){return b(e)&&"[object Object]"===Object.prototype.toString.call(e)}function j(e){return e===window}function k(){}function C(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function H(e){return Object.keys(e)}const S={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};H(S);function F(e,n){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function $(e,n,t){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=w(t)?t():t;r.setItem(n,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${n}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/308b5f81.80461474.js b/assets/js/308b5f81.80461474.js new file mode 100644 index 000000000..f2e983fe6 --- /dev/null +++ b/assets/js/308b5f81.80461474.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[3600],{4509:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>u,assets:()=>d,contentTitle:()=>l,default:()=>p,frontMatter:()=>a,metadata:()=>r,toc:()=>f});const r=JSON.parse('{"id":"react/hooks/useIntersectionObserver","title":"useIntersectionObserver","description":"ref\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uac00 Viewport\uc5d0 \ub178\ucd9c\ub420 \ub54c(onIntersectStart) \ud639\uc740 \ub098\uac08 \ub54c(onIntersectEnd) \ud2b9\uc815 action \ud568\uc218\ub97c \ud638\ucd9c \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useIntersectionObserver.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useIntersectionObserver","permalink":"/modern-kit/docs/react/hooks/useIntersectionObserver","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useImageStatus","permalink":"/modern-kit/docs/react/hooks/useImageStatus"},"next":{"title":"useInterval","permalink":"/modern-kit/docs/react/hooks/useInterval"}}');var o=t(6206),i=t(3267),s=t(4382),c=t(7399);const a={},l="useIntersectionObserver",d={},u=()=>{const e={br:"br",button:"button",div:"div",...(0,i.R)()},[n,t]=(0,s.useState)(!1),{ref:r}=(0,c.B)({onIntersectStart:e=>{console.log("onIntersectStart: ",e)},onIntersectEnd:e=>{console.log("onIntersectEnd: ",e)},enabled:n}),a={height:"800px",backgroundColor:"teal"};return(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.button,{onClick:()=>t(!n),children:["Toggle Enabled: ",`${n}`]}),(0,o.jsx)(e.div,{style:a}),(0,o.jsxs)(e.div,{ref:r,style:{color:"white",fontSize:"24px",backgroundColor:"blue"},children:["\ud0c0\uac9f \uc694\uc18c",(0,o.jsx)(e.br,{}),"\uac1c\ubc1c\uc790 \ub3c4\uad6c \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694."]}),(0,o.jsx)(e.div,{style:a})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Exmaple",id:"exmaple",level:2},{value:"Note",id:"note",level:2}];function h(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"useintersectionobserver",children:"useIntersectionObserver"})}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"ref"}),"\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uac00 ",(0,o.jsx)(n.code,{children:"Viewport"}),"\uc5d0 \ub178\ucd9c\ub420 \ub54c(",(0,o.jsx)(n.code,{children:"onIntersectStart"}),") \ud639\uc740 \ub098\uac08 \ub54c(",(0,o.jsx)(n.code,{children:"onIntersectEnd"}),") \ud2b9\uc815 action \ud568\uc218\ub97c \ud638\ucd9c \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"calledOnce"}),"\uc635\uc158\uc744 ",(0,o.jsx)(n.code,{children:"true"}),"\ub85c \uc124\uc815\ud558\uba74 ",(0,o.jsx)(n.code,{children:"onIntersectStart"}),"\uc640 ",(0,o.jsx)(n.code,{children:"onIntersectEnd"}),"\ub97c \uac01\uac01 \ud55c\ubc88\uc529 \ud638\ucd9c \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"enabled"}),"\uc635\uc158\uc744 \ud1b5\ud574 ",(0,o.jsx)(n.code,{children:"onIntersect*"})," \ucf5c\ubc31 \ud568\uc218\ub4e4\uc758 \ud638\ucd9c\uc744 \uc81c\uc5b4 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. ",(0,o.jsx)(n.code,{children:"false"}),"\ub77c\uba74 \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uac00 Viewport\uc5d0 \ub178\ucd9c\ud558\ub354\ub77c\ub3c4 \uc2e4\ud589\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.p,{children:["Intersection Observer Option\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.(\ud558\ub2e8 ",(0,o.jsx)(n.code,{children:"Note"})," \ucc38\uace0)"]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useIntersectionObserver/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"interface IntersectionObserverInit {\n root?: Element | Document | null;\n rootMargin?: string;\n threshold?: number | number[];\n}\n\ninterface UseIntersectionObserverProps extends IntersectionObserverInit {\n onIntersectStart?: (entry: IntersectionObserverEntry) => void;\n onIntersectEnd?: (entry: IntersectionObserverEntry) => void;\n calledOnce?: boolean;\n enabled?: boolean;\n}\n"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"const useIntersectionObserver: ({\n onIntersectStart,\n onIntersectEnd,\n enabled, // default: true\n calledOnce, // default: false\n root, // default: null\n threshold, // default: 0\n rootMargin, // default: '0px 0px 0px 0px'\n}: UseIntersectionObserverProps) => { \n ref: React.RefCallback \n};\n"})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:'import { useIntersectionObserver } from \'@modern-kit/react\';\n\nconst Example = () => {\n const [enabled, setEnabled] = useState(false);\n const { ref: targetRef } = useIntersectionObserver({\n onIntersectStart: (entry) => {\n console.log("onIntersectStart: ", entry);\n },\n onIntersectEnd: (entry) => {\n console.log("onIntersectEnd: ", entry);\n },\n enabled,\n });\n const boxStyle = {\n height: "800px", \n backgroundColor: "teal"\n }\n\n return (\n
\n \n
\n
\n \ud0c0\uac9f \uc694\uc18c
\n \uac1c\ubc1c\uc790 \ub3c4\uad6c \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.\n
\n
\n
\n );\n};\n'})}),"\n",(0,o.jsx)(n.h2,{id:"exmaple",children:"Exmaple"}),"\n","\n",(0,o.jsx)(u,{}),"\n",(0,o.jsx)(n.h2,{id:"note",children:"Note"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver",children:"Intersection Observer API"})}),"\n"]})]})}function p(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},3267:(e,n,t)=>{t.d(n,{R:()=>s,x:()=>c});var r=t(4382);const o={},i=r.createContext(o);function s(e){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),r.createElement(i.Provider,{value:n},e.children)}},7399:(e,n,t)=>{t.d(n,{B:()=>s});var r=t(4382),o=t(6765),i=t(9340);function s({onIntersectStart:e=i.lQ,onIntersectEnd:n=i.lQ,enabled:t=!0,calledOnce:s=!1,root:c=null,threshold:a=0,rootMargin:l="0px 0px 0px 0px"}){const d=(0,r.useRef)(0),u=(0,r.useRef)(!1),f=(0,r.useRef)(null),h=(0,o.p)((([t],r)=>{if(!t)return;const o=t.target;t.isIntersecting?(u.current=!0,d.current+=1,e(t)):u.current&&(u.current=!1,d.current+=1,n(t)),s&&d.current>1&&r.unobserve(o)}));return{ref:(0,r.useCallback)((e=>{f.current&&(f.current.disconnect(),f.current=null),null!==e&&t&&(f.current=new IntersectionObserver(h,{threshold:a,root:c,rootMargin:l}),f.current.observe(e))}),[t,a,c,l,h])}}},6765:(e,n,t)=>{t.d(n,{p:()=>o});var r=t(4382);function o(e){const n=(0,r.useRef)(e);return n.current=e,(0,r.useCallback)(((...e)=>n.current(...e)),[])}},9340:(e,n,t)=>{function r(e,n,t,r){return new(t||(t=Promise))((function(o,i){function s(e){try{a(r.next(e))}catch(n){i(n)}}function c(e){try{a(r.throw(e))}catch(n){i(n)}}function a(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(s,c)}a((r=r.apply(e,n||[])).next())}))}t.d(n,{Et:()=>w,Fr:()=>c,Gp:()=>v,Ol:()=>k,Qd:()=>j,S$:()=>s,Tn:()=>m,Zp:()=>f,dK:()=>l,fl:()=>C,gD:()=>x,i5:()=>p,if:()=>h,l6:()=>I,lQ:()=>E,nS:()=>u,ni:()=>$,oc:()=>a}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,n)=>new Promise(((t,r)=>{e.toBlob((e=>{e?t(e):r(new Error(`Failed to create blob with format ${n}`))}),n)}));function s(){return"undefined"==typeof window}function c(){if(s())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function a(){return!s()}function l(e){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const d=e=>r(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return l(yield n.text())}));function u(e,n){var t;return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return d(e);if(!("write"in window.navigator.clipboard))return d(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return d(e);const s=yield function(e,n="png"){return new Promise(((t,s)=>{const c=new Image;c.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=c.width,e.height=c.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(c,0,0);const s=yield i(e,o[n]);t(s)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),s(r)}})),c.onerror=()=>{s(new Error("Failed to load image"))},c.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[s.type]:s})]),s}catch(s){throw console.error(`Failed to copy to clipboard. message: ${s.message}`),s}}))}function f(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function h(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const b=(e,n,t)=>{const r=Object.keys(e),o=Object.keys(n);if(r.length!==o.length)return!1;for(let i=0;i{if(e===n)return!0;if(w(e)&&w(n)&&isNaN(e)&&isNaN(n))return!0;if(m(e)&&m(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const r=[...e],o=[...n];return b(r,o,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[r,o]of e)if(!n.has(r)||!g(o,n.get(r),t))return!1;return!0}return b(e,n,t)};function v(e,n){return g(e,n,new WeakMap)}function m(e){return"function"==typeof e}function x(e){return null==e}function w(e){return"number"==typeof e}function y(e){return!function(e){return Object(e)!==e}(e)}function j(e){return y(e)&&"[object Object]"===Object.prototype.toString.call(e)}function I(e){return e===window}function E(){}function k(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function O(e){return Object.keys(e)}const S={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};O(S);function C(e,n){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function $(e,n,t){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=m(t)?t():t;r.setItem(n,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${n}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/308b5f81.db118fd1.js b/assets/js/308b5f81.db118fd1.js deleted file mode 100644 index d614323c8..000000000 --- a/assets/js/308b5f81.db118fd1.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[3600],{4509:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>a,default:()=>p,frontMatter:()=>l,metadata:()=>r,toc:()=>f});const r=JSON.parse('{"id":"react/hooks/useIntersectionObserver","title":"useIntersectionObserver","description":"ref\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uac00 Viewport\uc5d0 \ub178\ucd9c\ub420 \ub54c(onIntersectStart) \ud639\uc740 \ub098\uac08 \ub54c(onIntersectEnd) \ud2b9\uc815 action \ud568\uc218\ub97c \ud638\ucd9c \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useIntersectionObserver.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useIntersectionObserver","permalink":"/modern-kit/docs/react/hooks/useIntersectionObserver","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useImageStatus","permalink":"/modern-kit/docs/react/hooks/useImageStatus"},"next":{"title":"useInterval","permalink":"/modern-kit/docs/react/hooks/useInterval"}}');var o=n(6206),s=n(3267),i=n(4382),c=n(4027);const l={},a="useIntersectionObserver",u={},d=()=>{const e={br:"br",button:"button",div:"div",...(0,s.R)()},[t,n]=(0,i.useState)(!1),{ref:r}=(0,c.BL)({onIntersectStart:e=>{console.log("onIntersectStart: ",e)},onIntersectEnd:e=>{console.log("onIntersectEnd: ",e)},enabled:t}),l={height:"800px",backgroundColor:"teal"};return(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.button,{onClick:()=>n(!t),children:["Toggle Enabled: ",`${t}`]}),(0,o.jsx)(e.div,{style:l}),(0,o.jsxs)(e.div,{ref:r,style:{color:"white",fontSize:"24px",backgroundColor:"blue"},children:["\ud0c0\uac9f \uc694\uc18c",(0,o.jsx)(e.br,{}),"\uac1c\ubc1c\uc790 \ub3c4\uad6c \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694."]}),(0,o.jsx)(e.div,{style:l})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Exmaple",id:"exmaple",level:2},{value:"Note",id:"note",level:2}];function h(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"useintersectionobserver",children:"useIntersectionObserver"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"ref"}),"\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uac00 ",(0,o.jsx)(t.code,{children:"Viewport"}),"\uc5d0 \ub178\ucd9c\ub420 \ub54c(",(0,o.jsx)(t.code,{children:"onIntersectStart"}),") \ud639\uc740 \ub098\uac08 \ub54c(",(0,o.jsx)(t.code,{children:"onIntersectEnd"}),") \ud2b9\uc815 action \ud568\uc218\ub97c \ud638\ucd9c \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"calledOnce"}),"\uc635\uc158\uc744 ",(0,o.jsx)(t.code,{children:"true"}),"\ub85c \uc124\uc815\ud558\uba74 ",(0,o.jsx)(t.code,{children:"onIntersectStart"}),"\uc640 ",(0,o.jsx)(t.code,{children:"onIntersectEnd"}),"\ub97c \uac01\uac01 \ud55c\ubc88\uc529 \ud638\ucd9c \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"enabled"}),"\uc635\uc158\uc744 \ud1b5\ud574 ",(0,o.jsx)(t.code,{children:"onIntersect*"})," \ucf5c\ubc31 \ud568\uc218\ub4e4\uc758 \ud638\ucd9c\uc744 \uc81c\uc5b4 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. ",(0,o.jsx)(t.code,{children:"false"}),"\ub77c\uba74 \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uac00 Viewport\uc5d0 \ub178\ucd9c\ud558\ub354\ub77c\ub3c4 \uc2e4\ud589\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:["Intersection Observer Option\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.(\ud558\ub2e8 ",(0,o.jsx)(t.code,{children:"Note"})," \ucc38\uace0)"]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useIntersectionObserver/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface IntersectionObserverInit {\n root?: Element | Document | null;\n rootMargin?: string;\n threshold?: number | number[];\n}\n\ninterface UseIntersectionObserverProps extends IntersectionObserverInit {\n onIntersectStart?: (entry: IntersectionObserverEntry) => void;\n onIntersectEnd?: (entry: IntersectionObserverEntry) => void;\n calledOnce?: boolean;\n enabled?: boolean;\n}\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"const useIntersectionObserver: ({\n onIntersectStart,\n onIntersectEnd,\n enabled, // default: true\n calledOnce, // default: false\n root, // default: null\n threshold, // default: 0\n rootMargin, // default: '0px 0px 0px 0px'\n}: UseIntersectionObserverProps) => { \n ref: React.RefCallback \n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:'import { useIntersectionObserver } from \'@modern-kit/react\';\n\nconst Example = () => {\n const [enabled, setEnabled] = useState(false);\n const { ref: targetRef } = useIntersectionObserver({\n onIntersectStart: (entry) => {\n console.log("onIntersectStart: ", entry);\n },\n onIntersectEnd: (entry) => {\n console.log("onIntersectEnd: ", entry);\n },\n enabled,\n });\n const boxStyle = {\n height: "800px", \n backgroundColor: "teal"\n }\n\n return (\n
\n \n
\n
\n \ud0c0\uac9f \uc694\uc18c
\n \uac1c\ubc1c\uc790 \ub3c4\uad6c \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.\n
\n
\n
\n );\n};\n'})}),"\n",(0,o.jsx)(t.h2,{id:"exmaple",children:"Exmaple"}),"\n","\n",(0,o.jsx)(d,{}),"\n",(0,o.jsx)(t.h2,{id:"note",children:"Note"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver",children:"Intersection Observer API"})}),"\n"]})]})}function p(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>$e,$I:()=>oe,AE:()=>De,BL:()=>J,DX:()=>N,FT:()=>ct,Fo:()=>et,Hn:()=>st,I5:()=>Ce,JF:()=>Te,K:()=>ae,K$:()=>He,M0:()=>Re,ML:()=>ne,Mj:()=>ye,Mk:()=>Me,Mo:()=>se,NT:()=>Ve,QV:()=>Ke,Ub:()=>ke,Ut:()=>je,W7:()=>K,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>We,Zu:()=>le,_1:()=>Oe,_g:()=>nt,aL:()=>H,aY:()=>Ne,bB:()=>A,d7:()=>_,eG:()=>it,fN:()=>ce,fm:()=>G,gl:()=>$,hN:()=>z,iD:()=>de,iQ:()=>Le,jd:()=>ie,lW:()=>at,oD:()=>U,oo:()=>Ie,pL:()=>q,qi:()=>ue,rN:()=>Fe,tD:()=>Se,u8:()=>Q,wY:()=>_e,xV:()=>L,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),s=n(3683),i=n(5086),c=n(7197),l=(n(1604),n(5938));function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function b(){return typeof window>"u"}function m(){return!b()}function g(e){return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const v=e=>f(void 0,0,void 0,(function*(){return g(yield(yield fetch(e)).text())}));function w(e,t){var n;return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return v(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const s=yield p(e,h[t]);n(s)}catch(s){console.error(`Failed to load image. message: ${s.mesaage}`),r(s)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let s=0;s{if(e===t||E(e)&&E(t)&&isNaN(e)&&isNaN(t))return!0;if(S(e)&&S(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function k(e,t){return x(e,t,new WeakMap)}function S(e){return"function"==typeof e}function E(e){return"number"==typeof e}function j(e){return!function(e){return Object(e)!==e}(e)}function C(){}function I(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const O=(...e)=>t=>e.forEach((e=>{if(S(e))e(t);else if(null!=e){e.current=t}}));function R(...e){return(0,o.useCallback)(O(...e),e)}const N=o.forwardRef(((e,t)=>{const{children:n}=e,s=a(e,["children"]),i=o.Children.toArray(n),c=i.find(M);if(c){const e=c.props.children,n=i.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(F,Object.assign({},s,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(F,Object.assign({},s,{ref:t,children:n}))}));N.displayName="Slot";const F=o.forwardRef(((e,t)=>{const{children:n}=e,r=a(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],s=t[r];/^on[A-Z]/.test(r)?o&&s?n[r]=(...e)=>{s(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),s):"className"===r&&(n[r]=[o,s].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?O(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));F.displayName="SlotClone";const L=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function M(e){return o.isValidElement(e)&&e.type===L}var P="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const $=d(((e,t)=>{var{ratio:n,style:o,as:i="div",asChild:c=!1}=e,l=a(e,["ratio","style","as","asChild"]);const u=c?N:i,d=Object.assign({aspectRatio:n},o),f=c?l.className:s(P,l.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},l))})),T=()=>C,Y=()=>!1,V=()=>!0;function A({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(T,Y,V)?e:t}function X(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const z=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>X()?(0,r.jsx)(r.Fragment,{children:t}):e;function D(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function W(e){const t=D(e);(0,o.useEffect)((()=>()=>t()),[t])}function B(e,t=k){const[n,r]=(0,o.useState)(e),s=D(t);return(0,o.useEffect)((()=>{s(n,e)||r(e)}),[s,n,e]),n}function _(e,t,n){const r=D(e),s=B(n),c=(0,o.useMemo)((()=>(0,i.A)(r,t,s)),[r,t,s]);return W((()=>c.cancel())),c}const H=({children:e,capture:t,wait:n,options:r})=>{const s=o.Children.only(e),i=_(((...e)=>{const n=s?.props;if(n&&S(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(s,{[t]:i})};function J({onIntersectStart:e=C,onIntersectEnd:t=C,enabled:n=!0,calledOnce:r=!1,root:s=null,threshold:i=0,rootMargin:c="0px 0px 0px 0px"}){const l=(0,o.useRef)(0),a=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=D((([n],o)=>{if(!n)return;const s=n.target;n.isIntersecting?(a.current=!0,l.current+=1,e(n)):a.current&&(a.current=!1,l.current+=1,t(n)),r&&l.current>1&&o.unobserve(s)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:i,root:s,rootMargin:c}),u.current.observe(e))}),[n,i,s,c,d])}}const U=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:s,rootMargin:i}=e,c=a(e,["src","threshold","root","rootMargin"]);const{ref:l}=J({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:s,rootMargin:i});return(0,r.jsx)("img",Object.assign({ref:R(t,l)},c))}));U.displayName="LazyImage";const K=(0,o.forwardRef)(((e,t)=>{var{width:n,height:s,fallback:i,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=a(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),b=!h,m=(0,o.useMemo)((()=>({position:"relative",width:n,height:s})),[n,s]),g=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:b?0:1,transition:`opacity ${u}`},l)),[b,u,l]),v=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),w=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:w,style:m,children:[b&&i,(0,r.jsx)(U,Object.assign({ref:t,width:n,height:s,style:g,onLoad:v},f))]})}));K.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const s=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:s?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:s,triggerPosition:i="after",rootMargin:c="150px 0px"})=>{const{ref:l}=J({onIntersectStart:e,root:n,threshold:o,enabled:s,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===i&&(0,r.jsx)("div",{ref:l}),t,"after"===i&&(0,r.jsx)("div",{ref:l})]})},q=d(((e,t)=>{var{children:n,as:s="div",asChild:i=!1}=e,c=a(e,["children","as","asChild"]);const l=i?N:s,{ref:u}=J(c);if(i&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(l,Object.assign({ref:O(t,u)},c,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const s=(0,o.useCallback)(((e,n)=>function(e){return j(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},s(e,t))))})},ee=m()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=D(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),s=(0,o.useMemo)((()=>function(){if(b())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,s,(({target:t})=>{if(!r.current)return;const o=r.current,s=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!s&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:s="div",asChild:i=!1,onPointerDown:c,excludeRefs:l=[]}=e,u=a(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:l}),f=i?N:s;if(i&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:O(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const se=({itemKey:e,items:t=[],separator:n,renderItem:s,separatorInterval:i=1,includeLastSeparator:c=!1})=>{const l=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%i==0),[c,i,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[s(e,t),l(t)&&n]})})},ie=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function le(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function ae(e=!0){const t=S(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!s.current){s.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{s.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),s=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield g(e);return t(n),!0}catch{return t(null),!1}}))),[]),i=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield w(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),l=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:s,copyImage:i,readText:c,readContents:l}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},be=e=>pe[e],me=be("localStorage"),ge=e=>window.localStorage.getItem(e),ve=e=>JSON.stringify(e),we=e=>(me.subscribe(e),()=>{me.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,s=(0,o.useSyncExternalStore)(we,(()=>ge(t)),(()=>ve(r)));return{state:(0,o.useMemo)((()=>s?I(s):r),[s,r]),setState:(0,o.useCallback)((e=>{try{const n=ge(t),o=n?I(n):r,s=S(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(s)),me.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),me.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>m()?window.matchMedia(e).matches:t??!1;function ke(e,t){const[n,r]=(0,o.useState)(xe(e,t)),s=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",s),n}function Se(){return ke("(prefers-color-scheme: dark)")?"dark":"light"}const Ee="color-scheme";function je({defaultValue:e,key:t=Ee,shouldSetBodyClass:n=!1}={}){const r=Se(),s=S(e)?e():e,{state:i,setState:c}=ye({key:t,initialValue:s??r}),l=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),a=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(i),()=>{n&&document.body.classList.remove(i)})),[i,n]),{colorScheme:i,preferredColorScheme:r,setToggleMode:l,setDarkMode:a,setLightMode:u,setPreferredMode:d}}function Ce(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),s=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),i=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:s,reset:i}}function Ie({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,s]=(0,o.useState)(t),i=r0,l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),a=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const i=l(e,t);o&&o({prev:r,next:i}),s(i)}),[n,r,l]),u=(0,o.useCallback)((e=>{a("nextStep",!i,e)}),[i,a]),d=(0,o.useCallback)((e=>{a("prevStep",!c,e)}),[c,a]),f=(0,o.useCallback)(((t,n)=>{const o=S(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void s(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),s(t)}),[r,t]);return{currentStep:r,hasNextStep:i,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Oe(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:s,resetStep:i}=Ie({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:s,resetIndex:i}}function Re(e,t,n={}){const[r,s]=(0,o.useState)(e);return[r,_(s,t,n)]}function Ne(e,t={}){const[n,r]=(0,o.useState)(""),[s,i]=Re("",e,t);return{value:n,debouncedValue:s,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),i(t)}),[i]),onReset:(0,o.useCallback)((()=>{r(""),i("")}),[i])}}function Fe(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Le({onFocus:e=C,onBlur:t=C}={}){const[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(null),i=D((t=>{r(!0),e(t)})),c=D((e=>{r(!1),t(e)})),l=(0,o.useCallback)((()=>{s.current&&(s.current.focus(),r(!0))}),[]);return ne(s,"focus",i),ne(s,"blur",c),{ref:s,isFocus:n,setFocus:l}}function Me({onEnter:e=C,onLeave:t=C}={}){const[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(null),i=D((t=>{r(!0),e(t)})),c=D((e=>{r(!1),t(e)}));return ne(s,"mouseenter",i),ne(s,"mouseleave",c),{ref:s,isHovered:n}}const Pe=e=>{var t;return E(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function $e(e,t){const n=(0,o.useRef)(),r=D(e),{delay:s,enabled:i}=Pe(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,s)}),[r,s]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(s<0)&&i)return c(),()=>l()}),[l,c,i,s]),{set:c,reset:a,clear:l}}function Te({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),s=D((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];S(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",s),()=>t.removeEventListener("keydown",s)}),[e,s]),r}const Ye={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Ve(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Ye),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:s,clientY:i,pageX:c,pageY:l}=t;let a=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();a=s-t.left,u=i-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:s,clientY:i,pageX:c,pageY:l,elementRelativeX:a,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Ae=()=>navigator.onLine,Xe=()=>!0,ze=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function De({onlineAction:e=C,offlineAction:t=C}={}){const n=D((n=>ze(n,e,t)));return(0,o.useSyncExternalStore)(n,Ae,Xe)}function We(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const Be={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function _e(e=C){const[t,n]=(0,o.useState)(Be),r=(0,o.useRef)(null),s=D((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(s);return t.observe(e),()=>{t.unobserve(e)}}),[s]),{ref:r,contentRect:t}}function He({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),s=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>s())),[e,r,s]),{ref:t,lock:r,unlock:s}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ue=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:s=0,alignY:i="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+s+Je(window.innerHeight,r.height,i),left:r.left+window.scrollX+o+Je(window.innerWidth,r.width,c)};const l=e.getBoundingClientRect();return{top:r.top-l.top+e.scrollTop+s+Je(l.height,r.height,i),left:r.left-l.left+e.scrollLeft+o+Je(l.width,r.width,c)}};function Ke(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:s,top:i}=Ue(r,t,n);r.scrollTo({top:i,left:s,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=be("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,s=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>s?I(s):r),[s,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?I(n):r,s=S(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(s)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:s}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[i,c]=(0,o.useState)(n),l=(0,o.useCallback)((e=>{c((t=>{const n=S(e)?e(t):e;return r&&s&&function(e,t,n){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=S(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,s,n),n}))}),[r,s]),a=(0,o.useCallback)((()=>{r&&s&&function(e,t){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,s),c(null)}),[r,s]);return Object.assign({state:i,setState:l,clearState:a},Ie(e))}function nt(e,t,n={}){const r=D(e),s=B(n),i=(0,o.useMemo)((()=>(0,c.A)(r,t,s)),[r,t,s]);return W((()=>i.cancel())),i}const rt=e=>{var t;return E(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=D(e),{delay:s,enabled:i}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,s)}),[r,s]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(s<0)&&i)return c(),()=>l()}),[c,l,s,i]),{set:c,reset:a,clear:l}}function st(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function it(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new l.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const lt={width:null,height:null};function at({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>b()?lt:{width:window.innerWidth,height:window.innerHeight})),r=_(n,e),s=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",s),t}function ut(e,t,n){const{delay:r,enabled:s}=rt(t),{set:i,reset:c,clear:l}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!s||c()}),[r,s,c,...n]),{set:i,reset:c,clear:l}}}}]); \ No newline at end of file diff --git a/assets/js/36bebd15.56b57b2c.js b/assets/js/36bebd15.56b57b2c.js new file mode 100644 index 000000000..9b8dd3eb6 --- /dev/null +++ b/assets/js/36bebd15.56b57b2c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[3171],{9556:(e,n,t)=>{t.r(n),t.d(n,{Input:()=>d,InputExample:()=>p,assets:()=>l,contentTitle:()=>s,default:()=>m,frontMatter:()=>u,metadata:()=>r,toc:()=>f});const r=JSON.parse('{"id":"react/components/DebounceHandler","title":"DebounceHandler","description":"\uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec\uc5d0 \ub514\ubc14\uc6b4\uc2a4(debounce)\ub97c \uc120\uc5b8\uc801\uc73c\ub85c \uc801\uc6a9\ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","source":"@site/docs/react/components/DebounceHandler.mdx","sourceDirName":"react/components","slug":"/react/components/DebounceHandler","permalink":"/modern-kit/docs/react/components/DebounceHandler","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"ClientGate","permalink":"/modern-kit/docs/react/components/ClientGate"},"next":{"title":"FallbackLazyImage","permalink":"/modern-kit/docs/react/components/FallbackLazyImage"}}');var o=t(6206),i=t(3267),c=t(4382),a=t(385);const u={},s="DebounceHandler",l={},d=({onChange:e})=>{const n={input:"input",...(0,i.R)()},[t,r]=(0,c.useState)("");return(0,o.jsx)(n.input,{type:"text",onChange:n=>{r(n.target.value),e(n.target.value)},value:t})},p=()=>{const e={p:"p",...(0,i.R)()},[n,t]=(0,c.useState)("");return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(a.a,{capture:"onChange",wait:500,children:(0,o.jsx)(d,{onChange:e=>{t(e)}})}),(0,o.jsxs)(e.p,{children:["Text: ",n]})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Button Click Case",id:"button-click-case",level:3},{value:"Input Change Case",id:"input-change-case",level:3},{value:"Example",id:"example",level:2},{value:"Button Click Case",id:"button-click-case-1",level:3},{value:"Input Change Case",id:"input-change-case-1",level:3}];function h(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"debouncehandler",children:"DebounceHandler"})}),"\n",(0,o.jsx)(n.p,{children:"\uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec\uc5d0 \ub514\ubc14\uc6b4\uc2a4(debounce)\ub97c \uc120\uc5b8\uc801\uc73c\ub85c \uc801\uc6a9\ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/DebounceHandler/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"type DebounceParameters = Parameters;\n\ninterface DebounceHandlerProps {\n children: JSX.Element;\n capture: string;\n wait: DebounceParameters[1];\n options?: DebounceParameters[2];\n}\n\nconst DebounceHandler: ({ children, capture, wait, options, }: DebounceHandlerProps) => JSX.Element\n"})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.h3,{id:"button-click-case",children:"Button Click Case"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { DebounceHandler } from '@modern-kit/react'\n\nconst Example = () => {\n const onClick = () => {\n console.log('debounce');\n };\n \n return (\n \n \n \n );\n};\n"})}),"\n",(0,o.jsx)(n.h3,{id:"input-change-case",children:"Input Change Case"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"const Input = ({ onChange }: { onChange: (value: string) => void }) => {\n const [value, setValue] = useState('');\n\n const handleChange = (e: ChangeEvent) => {\n setValue(e.target.value);\n onChange(e.target.value);\n };\n\n return ;\n};\n\nconst Example = () => {\n const [text, setText] = useState('');\n\n const onChange = (value: string) => {\n setText(value);\n };\n\n return (\n <>\n \n \n \n

{text}

\n \n );\n}\n"})}),"\n",(0,o.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,o.jsx)(n.h3,{id:"button-click-case-1",children:"Button Click Case"}),"\n",(0,o.jsx)("p",{style:{marginBottom:"4px"},children:"\ube0c\ub77c\uc6b0\uc800\uc758 \uac1c\ubc1c\uc790 \ub3c4\uad6c\uc758 \ucf58\uc194\uc5d0\uc11c \ub3d9\uc791\uc744 \ud655\uc778\ud558\uc138\uc694."}),"\n",(0,o.jsx)(a.a,{capture:"onClick",wait:500,children:(0,o.jsx)("button",{onClick:()=>{console.log("debounce")},children:"Button"})}),"\n",(0,o.jsx)("br",{}),"\n","\n","\n",(0,o.jsx)(n.h3,{id:"input-change-case-1",children:"Input Change Case"}),"\n",(0,o.jsx)(p,{})]})}function m(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},3267:(e,n,t)=>{t.d(n,{R:()=>c,x:()=>a});var r=t(4382);const o={},i=r.createContext(o);function c(e){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),r.createElement(i.Provider,{value:n},e.children)}},385:(e,n,t)=>{t.d(n,{a:()=>c});var r=t(4382),o=t(5115),i=t(9340);const c=({children:e,capture:n,wait:t,options:c})=>{const a=r.Children.only(e),u=(0,o.d)(((...e)=>{const t=null==a?void 0:a.props;if(t)return(0,i.Tn)(t[n])?t[n](...e):void 0}),t,c);return(0,r.cloneElement)(a,{[n]:u})}},5115:(e,n,t)=>{t.d(n,{d:()=>u});var r=t(4382),o=t(5086),i=t(3311),c=t(6765),a=t(5423);function u(e,n,t){const u=(0,c.p)(e),s=(0,a.B)(t),l=(0,r.useMemo)((()=>(0,o.A)(u,n,s)),[u,n,s]);return(0,i.i)((()=>l.cancel())),l}},6765:(e,n,t)=>{t.d(n,{p:()=>o});var r=t(4382);function o(e){const n=(0,r.useRef)(e);return n.current=e,(0,r.useCallback)(((...e)=>n.current(...e)),[])}},5423:(e,n,t)=>{t.d(n,{B:()=>c});var r=t(4382),o=t(6765),i=t(9340);function c(e,n=i.Gp){const[t,c]=(0,r.useState)(e),a=(0,o.p)(n);return(0,r.useEffect)((()=>{a(t,e)||c(e)}),[a,t,e]),t}},3311:(e,n,t)=>{t.d(n,{i:()=>i});var r=t(6765),o=t(4382);function i(e){const n=(0,r.p)(e);(0,o.useEffect)((()=>()=>n()),[n])}},5086:(e,n,t)=>{t.d(n,{A:()=>F});var r=t(322);const o="object"==typeof global&&global&&global.Object===Object&&global;var i="object"==typeof self&&self&&self.Object===Object&&self;const c=o||i||Function("return this")();const a=function(){return c.Date.now()};var u=/\s/;const s=function(e){for(var n=e.length;n--&&u.test(e.charAt(n)););return n};var l=/^\s+/;const d=function(e){return e?e.slice(0,s(e)+1).replace(l,""):e};const p=c.Symbol;var f=Object.prototype,h=f.hasOwnProperty,m=f.toString,g=p?p.toStringTag:void 0;const v=function(e){var n=h.call(e,g),t=e[g];try{e[g]=void 0;var r=!0}catch(i){}var o=m.call(e);return r&&(n?e[g]=t:delete e[g]),o};var b=Object.prototype.toString;const x=function(e){return b.call(e)};var y=p?p.toStringTag:void 0;const w=function(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":y&&y in Object(e)?v(e):x(e)};const j=function(e){return null!=e&&"object"==typeof e};const C=function(e){return"symbol"==typeof e||j(e)&&"[object Symbol]"==w(e)};var k=/^[-+]0x[0-9a-f]+$/i,E=/^0b[01]+$/i,S=/^0o[0-7]+$/i,O=parseInt;const D=function(e){if("number"==typeof e)return e;if(C(e))return NaN;if((0,r.A)(e)){var n="function"==typeof e.valueOf?e.valueOf():e;e=(0,r.A)(n)?n+"":n}if("string"!=typeof e)return 0===e?e:+e;e=d(e);var t=E.test(e);return t||S.test(e)?O(e.slice(2),t?2:8):k.test(e)?NaN:+e};var I=Math.max,T=Math.min;const F=function(e,n,t){var o,i,c,u,s,l,d=0,p=!1,f=!1,h=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function m(n){var t=o,r=i;return o=i=void 0,d=n,u=e.apply(r,t)}function g(e){var t=e-l;return void 0===l||t>=n||t<0||f&&e-d>=c}function v(){var e=a();if(g(e))return b(e);s=setTimeout(v,function(e){var t=n-(e-l);return f?T(t,c-(e-d)):t}(e))}function b(e){return s=void 0,h&&o?m(e):(o=i=void 0,u)}function x(){var e=a(),t=g(e);if(o=arguments,i=this,l=e,t){if(void 0===s)return function(e){return d=e,s=setTimeout(v,n),p?m(e):u}(l);if(f)return clearTimeout(s),s=setTimeout(v,n),m(l)}return void 0===s&&(s=setTimeout(v,n)),u}return n=D(n)||0,(0,r.A)(t)&&(p=!!t.leading,c=(f="maxWait"in t)?I(D(t.maxWait)||0,n):c,h="trailing"in t?!!t.trailing:h),x.cancel=function(){void 0!==s&&clearTimeout(s),d=0,o=l=i=s=void 0},x.flush=function(){return void 0===s?u:b(a())},x}},322:(e,n,t)=>{t.d(n,{A:()=>r});const r=function(e){var n=typeof e;return null!=e&&("object"==n||"function"==n)}},9340:(e,n,t)=>{function r(e,n,t,r){return new(t||(t=Promise))((function(o,i){function c(e){try{u(r.next(e))}catch(n){i(n)}}function a(e){try{u(r.throw(e))}catch(n){i(n)}}function u(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(c,a)}u((r=r.apply(e,n||[])).next())}))}t.d(n,{Et:()=>y,Fr:()=>a,Gp:()=>v,Ol:()=>E,Qd:()=>j,S$:()=>c,Tn:()=>b,Zp:()=>p,dK:()=>s,fl:()=>D,gD:()=>x,i5:()=>h,if:()=>f,l6:()=>C,lQ:()=>k,nS:()=>d,ni:()=>I,oc:()=>u}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,n)=>new Promise(((t,r)=>{e.toBlob((e=>{e?t(e):r(new Error(`Failed to create blob with format ${n}`))}),n)}));function c(){return"undefined"==typeof window}function a(){if(c())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function u(){return!c()}function s(e){return r(this,void 0,void 0,(function*(){if(!u())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const l=e=>r(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return s(yield n.text())}));function d(e,n){var t;return r(this,void 0,void 0,(function*(){if(!u())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return l(e);if(!("write"in window.navigator.clipboard))return l(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return l(e);const c=yield function(e,n="png"){return new Promise(((t,c)=>{const a=new Image;a.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=a.width,e.height=a.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(a,0,0);const c=yield i(e,o[n]);t(c)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),c(r)}})),a.onerror=()=>{c(new Error("Failed to load image"))},a.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[c.type]:c})]),c}catch(c){throw console.error(`Failed to copy to clipboard. message: ${c.message}`),c}}))}function p(){return r(this,void 0,void 0,(function*(){if(!u())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function f(){return r(this,void 0,void 0,(function*(){if(!u())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function h(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const m=(e,n,t)=>{const r=Object.keys(e),o=Object.keys(n);if(r.length!==o.length)return!1;for(let i=0;i{if(e===n)return!0;if(y(e)&&y(n)&&isNaN(e)&&isNaN(n))return!0;if(b(e)&&b(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const r=[...e],o=[...n];return m(r,o,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[r,o]of e)if(!n.has(r)||!g(o,n.get(r),t))return!1;return!0}return m(e,n,t)};function v(e,n){return g(e,n,new WeakMap)}function b(e){return"function"==typeof e}function x(e){return null==e}function y(e){return"number"==typeof e}function w(e){return!function(e){return Object(e)!==e}(e)}function j(e){return w(e)&&"[object Object]"===Object.prototype.toString.call(e)}function C(e){return e===window}function k(){}function E(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function S(e){return Object.keys(e)}const O={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};S(O);function D(e,n){if(!u())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function I(e,n,t){if(!u())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=b(t)?t():t;r.setItem(n,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${n}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/36bebd15.da7fd56a.js b/assets/js/36bebd15.da7fd56a.js deleted file mode 100644 index 9d3f04465..000000000 --- a/assets/js/36bebd15.da7fd56a.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[3171],{9556:(e,t,n)=>{n.r(t),n.d(t,{Input:()=>d,InputExample:()=>f,assets:()=>u,contentTitle:()=>l,default:()=>g,frontMatter:()=>s,metadata:()=>r,toc:()=>h});const r=JSON.parse('{"id":"react/components/DebounceHandler","title":"DebounceHandler","description":"\uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec\uc5d0 \ub514\ubc14\uc6b4\uc2a4(debounce)\ub97c \uc120\uc5b8\uc801\uc73c\ub85c \uc801\uc6a9\ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","source":"@site/docs/react/components/DebounceHandler.mdx","sourceDirName":"react/components","slug":"/react/components/DebounceHandler","permalink":"/modern-kit/docs/react/components/DebounceHandler","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"ClientGate","permalink":"/modern-kit/docs/react/components/ClientGate"},"next":{"title":"FallbackLazyImage","permalink":"/modern-kit/docs/react/components/FallbackLazyImage"}}');var o=n(6206),c=n(3267),i=n(4382),a=n(4027);const s={},l="DebounceHandler",u={},d=({onChange:e})=>{const t={input:"input",...(0,c.R)()},[n,r]=(0,i.useState)("");return(0,o.jsx)(t.input,{type:"text",onChange:t=>{r(t.target.value),e(t.target.value)},value:n})},f=()=>{const e={p:"p",...(0,c.R)()},[t,n]=(0,i.useState)("");return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(a.aL,{capture:"onChange",wait:500,children:(0,o.jsx)(d,{onChange:e=>{n(e)}})}),(0,o.jsxs)(e.p,{children:["Text: ",t]})]})},h=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Button Click Case",id:"button-click-case",level:3},{value:"Input Change Case",id:"input-change-case",level:3},{value:"Example",id:"example",level:2},{value:"Button Click Case",id:"button-click-case-1",level:3},{value:"Input Change Case",id:"input-change-case-1",level:3}];function p(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",p:"p",pre:"pre",...(0,c.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"debouncehandler",children:"DebounceHandler"})}),"\n",(0,o.jsx)(t.p,{children:"\uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec\uc5d0 \ub514\ubc14\uc6b4\uc2a4(debounce)\ub97c \uc120\uc5b8\uc801\uc73c\ub85c \uc801\uc6a9\ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/DebounceHandler/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"type DebounceParameters = Parameters;\n\ninterface DebounceHandlerProps {\n children: JSX.Element;\n capture: string;\n wait: DebounceParameters[1];\n options?: DebounceParameters[2];\n}\n\nconst DebounceHandler: ({ children, capture, wait, options, }: DebounceHandlerProps) => JSX.Element\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.h3,{id:"button-click-case",children:"Button Click Case"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { DebounceHandler } from '@modern-kit/react'\n\nconst Example = () => {\n const onClick = () => {\n console.log('debounce');\n };\n \n return (\n \n \n \n );\n};\n"})}),"\n",(0,o.jsx)(t.h3,{id:"input-change-case",children:"Input Change Case"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"const Input = ({ onChange }: { onChange: (value: string) => void }) => {\n const [value, setValue] = useState('');\n\n const handleChange = (e: ChangeEvent) => {\n setValue(e.target.value);\n onChange(e.target.value);\n };\n\n return ;\n};\n\nconst Example = () => {\n const [text, setText] = useState('');\n\n const onChange = (value: string) => {\n setText(value);\n };\n\n return (\n <>\n \n \n \n

{text}

\n \n );\n}\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n",(0,o.jsx)(t.h3,{id:"button-click-case-1",children:"Button Click Case"}),"\n",(0,o.jsx)("p",{style:{marginBottom:"4px"},children:"\ube0c\ub77c\uc6b0\uc800\uc758 \uac1c\ubc1c\uc790 \ub3c4\uad6c\uc758 \ucf58\uc194\uc5d0\uc11c \ub3d9\uc791\uc744 \ud655\uc778\ud558\uc138\uc694."}),"\n",(0,o.jsx)(a.aL,{capture:"onClick",wait:500,children:(0,o.jsx)("button",{onClick:()=>{console.log("debounce")},children:"Button"})}),"\n",(0,o.jsx)("br",{}),"\n","\n","\n",(0,o.jsx)(t.h3,{id:"input-change-case-1",children:"Input Change Case"}),"\n",(0,o.jsx)(f,{})]})}function g(e={}){const{wrapper:t}={...(0,c.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>Me,$I:()=>oe,AE:()=>Ve,BL:()=>J,DX:()=>F,FT:()=>at,Fo:()=>et,Hn:()=>ct,I5:()=>je,JF:()=>$e,K:()=>le,K$:()=>_e,M0:()=>Ie,ML:()=>ne,Mj:()=>ye,Mk:()=>Pe,Mo:()=>ce,NT:()=>He,QV:()=>Ue,Ub:()=>Ce,Ut:()=>Ee,W7:()=>U,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>ze,Zu:()=>se,_1:()=>Oe,_g:()=>nt,aL:()=>_,aY:()=>Fe,bB:()=>B,d7:()=>W,eG:()=>it,fN:()=>ae,fm:()=>q,gl:()=>M,hN:()=>X,iD:()=>de,iQ:()=>Ne,jd:()=>ie,lW:()=>lt,oD:()=>K,oo:()=>Re,pL:()=>Q,qi:()=>ue,rN:()=>Le,tD:()=>ke,u8:()=>G,wY:()=>We,xV:()=>N,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),c=n(3683),i=n(5086),a=n(7197),s=(n(1604),n(5938));function l(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function g(){return typeof window>"u"}function m(){return!g()}function b(e){return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const w=e=>f(void 0,0,void 0,(function*(){return b(yield(yield fetch(e)).text())}));function v(e,t){var n;return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return w(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const c=yield p(e,h[t]);n(c)}catch(c){console.error(`Failed to load image. message: ${c.mesaage}`),r(c)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let c=0;c{if(e===t||S(e)&&S(t)&&isNaN(e)&&isNaN(t))return!0;if(k(e)&&k(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function C(e,t){return x(e,t,new WeakMap)}function k(e){return"function"==typeof e}function S(e){return"number"==typeof e}function E(e){return!function(e){return Object(e)!==e}(e)}function j(){}function R(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const O=(...e)=>t=>e.forEach((e=>{if(k(e))e(t);else if(null!=e){e.current=t}}));function I(...e){return(0,o.useCallback)(O(...e),e)}const F=o.forwardRef(((e,t)=>{const{children:n}=e,c=l(e,["children"]),i=o.Children.toArray(n),a=i.find(P);if(a){const e=a.props.children,n=i.map((t=>t===a?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(L,Object.assign({},c,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(L,Object.assign({},c,{ref:t,children:n}))}));F.displayName="Slot";const L=o.forwardRef(((e,t)=>{const{children:n}=e,r=l(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],c=t[r];/^on[A-Z]/.test(r)?o&&c?n[r]=(...e)=>{c(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),c):"className"===r&&(n[r]=[o,c].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?O(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));L.displayName="SlotClone";const N=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function P(e){return o.isValidElement(e)&&e.type===N}var D="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const M=d(((e,t)=>{var{ratio:n,style:o,as:i="div",asChild:a=!1}=e,s=l(e,["ratio","style","as","asChild"]);const u=a?F:i,d=Object.assign({aspectRatio:n},o),f=a?s.className:c(D,s.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},s))})),$=()=>j,T=()=>!1,H=()=>!0;function B({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)($,T,H)?e:t}function Y(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const X=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>Y()?(0,r.jsx)(r.Fragment,{children:t}):e;function V(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function z(e){const t=V(e);(0,o.useEffect)((()=>()=>t()),[t])}function A(e,t=C){const[n,r]=(0,o.useState)(e),c=V(t);return(0,o.useEffect)((()=>{c(n,e)||r(e)}),[c,n,e]),n}function W(e,t,n){const r=V(e),c=A(n),a=(0,o.useMemo)((()=>(0,i.A)(r,t,c)),[r,t,c]);return z((()=>a.cancel())),a}const _=({children:e,capture:t,wait:n,options:r})=>{const c=o.Children.only(e),i=W(((...e)=>{const n=c?.props;if(n&&k(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(c,{[t]:i})};function J({onIntersectStart:e=j,onIntersectEnd:t=j,enabled:n=!0,calledOnce:r=!1,root:c=null,threshold:i=0,rootMargin:a="0px 0px 0px 0px"}){const s=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=V((([n],o)=>{if(!n)return;const c=n.target;n.isIntersecting?(l.current=!0,s.current+=1,e(n)):l.current&&(l.current=!1,s.current+=1,t(n)),r&&s.current>1&&o.unobserve(c)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:i,root:c,rootMargin:a}),u.current.observe(e))}),[n,i,c,a,d])}}const K=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:c,rootMargin:i}=e,a=l(e,["src","threshold","root","rootMargin"]);const{ref:s}=J({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:c,rootMargin:i});return(0,r.jsx)("img",Object.assign({ref:I(t,s)},a))}));K.displayName="LazyImage";const U=(0,o.forwardRef)(((e,t)=>{var{width:n,height:c,fallback:i,className:a,style:s,duration:u="0.2s",onLoad:d}=e,f=l(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),g=!h,m=(0,o.useMemo)((()=>({position:"relative",width:n,height:c})),[n,c]),b=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:g?0:1,transition:`opacity ${u}`},s)),[g,u,s]),w=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),v=a?`lazy-image-wrapper ${a}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:m,children:[g&&i,(0,r.jsx)(K,Object.assign({ref:t,width:n,height:c,style:b,onLoad:w},f))]})}));U.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const c=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:c?t:n})},G=({onScrollAction:e,children:t,root:n,threshold:o,enabled:c,triggerPosition:i="after",rootMargin:a="150px 0px"})=>{const{ref:s}=J({onIntersectStart:e,root:n,threshold:o,enabled:c,rootMargin:a});return(0,r.jsxs)(r.Fragment,{children:["before"===i&&(0,r.jsx)("div",{ref:s}),t,"after"===i&&(0,r.jsx)("div",{ref:s})]})},Q=d(((e,t)=>{var{children:n,as:c="div",asChild:i=!1}=e,a=l(e,["children","as","asChild"]);const s=i?F:c,{ref:u}=J(a);if(i&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(s,Object.assign({ref:O(t,u)},a,{children:n}))})),q=({items:e=[],itemKey:t,renderItem:n})=>{const c=(0,o.useCallback)(((e,n)=>function(e){return E(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},c(e,t))))})},ee=m()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=V(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),c=(0,o.useMemo)((()=>function(){if(g())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,c,(({target:t})=>{if(!r.current)return;const o=r.current,c=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!c&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:c="div",asChild:i=!1,onPointerDown:a,excludeRefs:s=[]}=e,u=l(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(a,{excludeRefs:s}),f=i?F:c;if(i&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:O(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ce=({itemKey:e,items:t=[],separator:n,renderItem:c,separatorInterval:i=1,includeLastSeparator:a=!1})=>{const s=(0,o.useCallback)((e=>e===t.length-1?a:(e+1)%i==0),[a,i,t.length]);return(0,r.jsx)(q,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[c(e,t),s(t)&&n]})})},ie=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ae=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function se(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function le(e=!0){const t=k(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),c=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!c.current){c.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{c.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),c=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield b(e);return t(n),!0}catch{return t(null),!1}}))),[]),i=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),a=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),s=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:c,copyImage:i,readText:a,readContents:s}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},ge=e=>pe[e],me=ge("localStorage"),be=e=>window.localStorage.getItem(e),we=e=>JSON.stringify(e),ve=e=>(me.subscribe(e),()=>{me.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=k(n)?n():n,c=(0,o.useSyncExternalStore)(ve,(()=>be(t)),(()=>we(r)));return{state:(0,o.useMemo)((()=>c?R(c):r),[c,r]),setState:(0,o.useCallback)((e=>{try{const n=be(t),o=n?R(n):r,c=k(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(c)),me.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),me.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>m()?window.matchMedia(e).matches:t??!1;function Ce(e,t){const[n,r]=(0,o.useState)(xe(e,t)),c=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",c),n}function ke(){return Ce("(prefers-color-scheme: dark)")?"dark":"light"}const Se="color-scheme";function Ee({defaultValue:e,key:t=Se,shouldSetBodyClass:n=!1}={}){const r=ke(),c=k(e)?e():e,{state:i,setState:a}=ye({key:t,initialValue:c??r}),s=(0,o.useCallback)((()=>{a((e=>"dark"===e?"light":"dark"))}),[a]),l=(0,o.useCallback)((()=>{a("dark")}),[a]),u=(0,o.useCallback)((()=>{a("light")}),[a]),d=(0,o.useCallback)((()=>{a(r)}),[a,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(i),()=>{n&&document.body.classList.remove(i)})),[i,n]),{colorScheme:i,preferredColorScheme:r,setToggleMode:s,setDarkMode:l,setLightMode:u,setPreferredMode:d}}function je(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),c=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),i=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:c,reset:i}}function Re({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,c]=(0,o.useState)(t),i=r0,s=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),l=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const i=s(e,t);o&&o({prev:r,next:i}),c(i)}),[n,r,s]),u=(0,o.useCallback)((e=>{l("nextStep",!i,e)}),[i,l]),d=(0,o.useCallback)((e=>{l("prevStep",!a,e)}),[a,l]),f=(0,o.useCallback)(((t,n)=>{const o=k(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void c(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),c(t)}),[r,t]);return{currentStep:r,hasNextStep:i,hasPrevStep:a,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Oe(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:c,resetStep:i}=Re({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:c,resetIndex:i}}function Ie(e,t,n={}){const[r,c]=(0,o.useState)(e);return[r,W(c,t,n)]}function Fe(e,t={}){const[n,r]=(0,o.useState)(""),[c,i]=Ie("",e,t);return{value:n,debouncedValue:c,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),i(t)}),[i]),onReset:(0,o.useCallback)((()=>{r(""),i("")}),[i])}}function Le(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onFocus:e=j,onBlur:t=j}={}){const[n,r]=(0,o.useState)(!1),c=(0,o.useRef)(null),i=V((t=>{r(!0),e(t)})),a=V((e=>{r(!1),t(e)})),s=(0,o.useCallback)((()=>{c.current&&(c.current.focus(),r(!0))}),[]);return ne(c,"focus",i),ne(c,"blur",a),{ref:c,isFocus:n,setFocus:s}}function Pe({onEnter:e=j,onLeave:t=j}={}){const[n,r]=(0,o.useState)(!1),c=(0,o.useRef)(null),i=V((t=>{r(!0),e(t)})),a=V((e=>{r(!1),t(e)}));return ne(c,"mouseenter",i),ne(c,"mouseleave",a),{ref:c,isHovered:n}}const De=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function Me(e,t){const n=(0,o.useRef)(),r=V(e),{delay:c,enabled:i}=De(t),a=(0,o.useCallback)((()=>{n.current=window.setInterval(r,c)}),[r,c]),s=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{s(),a()}),[s,a]);return(0,o.useEffect)((()=>{if(!(c<0)&&i)return a(),()=>s()}),[s,a,i,c]),{set:a,reset:l,clear:s}}function $e({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),c=V((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];k(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",c),()=>t.removeEventListener("keydown",c)}),[e,c]),r}const Te={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function He(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Te),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:c,clientY:i,pageX:a,pageY:s}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=c-t.left,u=i-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:c,clientY:i,pageX:a,pageY:s,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Be=()=>navigator.onLine,Ye=()=>!0,Xe=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function Ve({onlineAction:e=j,offlineAction:t=j}={}){const n=V((n=>Xe(n,e,t)));return(0,o.useSyncExternalStore)(n,Be,Ye)}function ze(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const Ae={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function We(e=j){const[t,n]=(0,o.useState)(Ae),r=(0,o.useRef)(null),c=V((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(c);return t.observe(e),()=>{t.unobserve(e)}}),[c]),{ref:r,contentRect:t}}function _e({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),c=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>c())),[e,r,c]),{ref:t,lock:r,unlock:c}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:c=0,alignY:i="start",alignX:a="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+c+Je(window.innerHeight,r.height,i),left:r.left+window.scrollX+o+Je(window.innerWidth,r.width,a)};const s=e.getBoundingClientRect();return{top:r.top-s.top+e.scrollTop+c+Je(s.height,r.height,i),left:r.left-s.left+e.scrollLeft+o+Je(s.width,r.width,a)}};function Ue(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:c,top:i}=Ke(r,t,n);r.scrollTo({top:i,left:c,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=ge("sessionStorage"),Ge=e=>window.sessionStorage.getItem(e),Qe=e=>JSON.stringify(e),qe=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=k(n)?n():n,c=(0,o.useSyncExternalStore)(qe,(()=>Ge(t)),(()=>Qe(r)));return{state:(0,o.useMemo)((()=>c?R(c):r),[c,r]),setState:(0,o.useCallback)((e=>{try{const n=Ge(t),o=n?R(n):r,c=k(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(c)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:c}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[i,a]=(0,o.useState)(n),s=(0,o.useCallback)((e=>{a((t=>{const n=k(e)?e(t):e;return r&&c&&function(e,t,n){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=k(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,c,n),n}))}),[r,c]),l=(0,o.useCallback)((()=>{r&&c&&function(e,t){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,c),a(null)}),[r,c]);return Object.assign({state:i,setState:s,clearState:l},Re(e))}function nt(e,t,n={}){const r=V(e),c=A(n),i=(0,o.useMemo)((()=>(0,a.A)(r,t,c)),[r,t,c]);return z((()=>i.cancel())),i}const rt=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=V(e),{delay:c,enabled:i}=rt(t),a=(0,o.useCallback)((()=>{n.current=setTimeout(r,c)}),[r,c]),s=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{s(),a()}),[s,a]);return(0,o.useEffect)((()=>{if(!(c<0)&&i)return a(),()=>s()}),[a,s,c,i]),{set:a,reset:l,clear:s}}function ct(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function it(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new s.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const st={width:null,height:null};function lt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>g()?st:{width:window.innerWidth,height:window.innerHeight})),r=W(n,e),c=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",c),t}function ut(e,t,n){const{delay:r,enabled:c}=rt(t),{set:i,reset:a,clear:s}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!c||a()}),[r,c,a,...n]),{set:i,reset:a,clear:s}}}}]); \ No newline at end of file diff --git a/assets/js/3bdef6d7.4c300635.js b/assets/js/3bdef6d7.4c300635.js deleted file mode 100644 index 0fa4ffde5..000000000 --- a/assets/js/3bdef6d7.4c300635.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[2786],{4123:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>c,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"react/hooks/useDebouncedState","title":"useDebouncedState","description":"useState\uc758 \ub514\ubc14\uc6b4\uc2a4 \ubc84\uc804\uc758 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useDebouncedState.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useDebouncedState","permalink":"/modern-kit/docs/react/hooks/useDebouncedState","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useDebouncedInputValue","permalink":"/modern-kit/docs/react/hooks/useDebouncedInputValue"},"next":{"title":"useDependencyTimeout","permalink":"/modern-kit/docs/react/hooks/useDependencyTimeout"}}');var o=n(6206),i=n(3267),s=(n(4382),n(4027));const c={},a="useDebouncedState",l={},u=()=>{const e={div:"div",input:"input",p:"p",...(0,i.R)()},[t,n]=(0,s.M0)("",500);return(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.p,{children:["\ub514\ubc14\uc6b4\uc2f1 \uc0c1\ud0dc: ",t]}),(0,o.jsx)(e.div,{children:(0,o.jsx)(e.input,{type:"text",onChange:e=>n(e.target.value)})})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usedebouncedstate",children:"useDebouncedState"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"useState"}),"\uc758 \ub514\ubc14\uc6b4\uc2a4 \ubc84\uc804\uc758 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useDebouncedState/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"type DebounceParameters = Parameters;\ntype DebounceReturnType = ReturnType<\n typeof debounce\n>;\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useDebouncedState(\n initialState: T,\n wait: DebounceParameters[1],\n options?: DebounceParameters[2]\n): [T, DebounceReturnType>>];\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useState } from 'react';\nimport { useDebouncedState } from '@modern-kit/react';\n\nconst Example = () => {\n const [debouncedState, setDebouncedState] = useDebouncedState(\"\", 500);\n\n return (\n
\n

\ub514\ubc14\uc6b4\uc2f1 \uc0c1\ud0dc: {debouncedValue}

\n
\n setDebouncedState(e.target.value)} />\n
\n
\n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(u,{})]})}function h(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(f,{...e})}):f(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>Le,$I:()=>oe,AE:()=>We,BL:()=>H,DX:()=>I,FT:()=>ct,Fo:()=>et,Hn:()=>it,I5:()=>je,JF:()=>Me,K:()=>le,K$:()=>Je,M0:()=>De,ML:()=>ne,Mj:()=>ye,Mk:()=>Te,Mo:()=>ie,NT:()=>Ye,QV:()=>Ue,Ub:()=>Se,Ut:()=>Ee,W7:()=>U,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>_e,Zu:()=>ae,_1:()=>Oe,_g:()=>nt,aL:()=>J,aY:()=>Ie,bB:()=>V,d7:()=>B,eG:()=>st,fN:()=>ce,fm:()=>G,gl:()=>L,hN:()=>A,iD:()=>de,iQ:()=>Ne,jd:()=>se,lW:()=>lt,oD:()=>K,oo:()=>Re,pL:()=>q,qi:()=>ue,rN:()=>Fe,tD:()=>ke,u8:()=>Q,wY:()=>Be,xV:()=>N,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),i=n(3683),s=n(5086),c=n(7197),a=(n(1604),n(5938));function l(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function g(){return!m()}function b(e){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const w=e=>f(void 0,0,void 0,(function*(){return b(yield(yield fetch(e)).text())}));function v(e,t){var n;return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return w(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield p(e,h[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||C(e)&&C(t)&&isNaN(e)&&isNaN(t))return!0;if(k(e)&&k(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function S(e,t){return x(e,t,new WeakMap)}function k(e){return"function"==typeof e}function C(e){return"number"==typeof e}function E(e){return!function(e){return Object(e)!==e}(e)}function j(){}function R(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const O=(...e)=>t=>e.forEach((e=>{if(k(e))e(t);else if(null!=e){e.current=t}}));function D(...e){return(0,o.useCallback)(O(...e),e)}const I=o.forwardRef(((e,t)=>{const{children:n}=e,i=l(e,["children"]),s=o.Children.toArray(n),c=s.find(T);if(c){const e=c.props.children,n=s.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(F,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(F,Object.assign({},i,{ref:t,children:n}))}));I.displayName="Slot";const F=o.forwardRef(((e,t)=>{const{children:n}=e,r=l(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?O(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));F.displayName="SlotClone";const N=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function T(e){return o.isValidElement(e)&&e.type===N}var P="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const L=d(((e,t)=>{var{ratio:n,style:o,as:s="div",asChild:c=!1}=e,a=l(e,["ratio","style","as","asChild"]);const u=c?I:s,d=Object.assign({aspectRatio:n},o),f=c?a.className:i(P,a.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},a))})),M=()=>j,$=()=>!1,Y=()=>!0;function V({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(M,$,Y)?e:t}function X(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const A=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>X()?(0,r.jsx)(r.Fragment,{children:t}):e;function W(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function _(e){const t=W(e);(0,o.useEffect)((()=>()=>t()),[t])}function z(e,t=S){const[n,r]=(0,o.useState)(e),i=W(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function B(e,t,n){const r=W(e),i=z(n),c=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return _((()=>c.cancel())),c}const J=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),s=B(((...e)=>{const n=i?.props;if(n&&k(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:s})};function H({onIntersectStart:e=j,onIntersectEnd:t=j,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:s=0,rootMargin:c="0px 0px 0px 0px"}){const a=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=W((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(l.current=!0,a.current+=1,e(n)):l.current&&(l.current=!1,a.current+=1,t(n)),r&&a.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:s,root:i,rootMargin:c}),u.current.observe(e))}),[n,s,i,c,d])}}const K=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:s}=e,c=l(e,["src","threshold","root","rootMargin"]);const{ref:a}=H({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:D(t,a)},c))}));K.displayName="LazyImage";const U=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:s,className:c,style:a,duration:u="0.2s",onLoad:d}=e,f=l(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,g=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),b=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},a)),[m,u,a]),w=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),v=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:g,children:[m&&s,(0,r.jsx)(K,Object.assign({ref:t,width:n,height:i,style:b,onLoad:w},f))]})}));U.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:s="after",rootMargin:c="150px 0px"})=>{const{ref:a}=H({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:a}),t,"after"===s&&(0,r.jsx)("div",{ref:a})]})},q=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1}=e,c=l(e,["children","as","asChild"]);const a=s?I:i,{ref:u}=H(c);if(s&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(a,Object.assign({ref:O(t,u)},c,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return E(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=g()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=W(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1,onPointerDown:c,excludeRefs:a=[]}=e,u=l(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:a}),f=s?I:i;if(s&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:O(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:s=1,includeLastSeparator:c=!1})=>{const a=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%s==0),[c,s,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),a(t)&&n]})})},se=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function ae(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function le(e=!0){const t=k(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield b(e);return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),a=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:s,readText:c,readContents:a}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],ge=me("localStorage"),be=e=>window.localStorage.getItem(e),we=e=>JSON.stringify(e),ve=e=>(ge.subscribe(e),()=>{ge.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=k(n)?n():n,i=(0,o.useSyncExternalStore)(ve,(()=>be(t)),(()=>we(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=be(t),o=n?R(n):r,i=k(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),ge.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ge.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>g()?window.matchMedia(e).matches:t??!1;function Se(e,t){const[n,r]=(0,o.useState)(xe(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function ke(){return Se("(prefers-color-scheme: dark)")?"dark":"light"}const Ce="color-scheme";function Ee({defaultValue:e,key:t=Ce,shouldSetBodyClass:n=!1}={}){const r=ke(),i=k(e)?e():e,{state:s,setState:c}=ye({key:t,initialValue:i??r}),a=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),l=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(s),()=>{n&&document.body.classList.remove(s)})),[s,n]),{colorScheme:s,preferredColorScheme:r,setToggleMode:a,setDarkMode:l,setLightMode:u,setPreferredMode:d}}function je(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:s}}function Re({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),s=r0,a=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),l=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const s=a(e,t);o&&o({prev:r,next:s}),i(s)}),[n,r,a]),u=(0,o.useCallback)((e=>{l("nextStep",!s,e)}),[s,l]),d=(0,o.useCallback)((e=>{l("prevStep",!c,e)}),[c,l]),f=(0,o.useCallback)(((t,n)=>{const o=k(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:s,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Oe(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=Re({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}function De(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,B(i,t,n)]}function Ie(e,t={}){const[n,r]=(0,o.useState)(""),[i,s]=De("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),s(t)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Fe(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onFocus:e=j,onBlur:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=W((t=>{r(!0),e(t)})),c=W((e=>{r(!1),t(e)})),a=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",s),ne(i,"blur",c),{ref:i,isFocus:n,setFocus:a}}function Te({onEnter:e=j,onLeave:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=W((t=>{r(!0),e(t)})),c=W((e=>{r(!1),t(e)}));return ne(i,"mouseenter",s),ne(i,"mouseleave",c),{ref:i,isHovered:n}}const Pe=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function Le(e,t){const n=(0,o.useRef)(),r=W(e),{delay:i,enabled:s}=Pe(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>a()}),[a,c,s,i]),{set:c,reset:l,clear:a}}function Me({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=W((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];k(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const $e={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Ye(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)($e),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:a}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=i-t.left,u=s-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:a,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Ve=()=>navigator.onLine,Xe=()=>!0,Ae=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function We({onlineAction:e=j,offlineAction:t=j}={}){const n=W((n=>Ae(n,e,t)));return(0,o.useSyncExternalStore)(n,Ve,Xe)}function _e(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const ze={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function Be(e=j){const[t,n]=(0,o.useState)(ze),r=(0,o.useRef)(null),i=W((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function Je({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const He=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:s="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+He(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+He(window.innerWidth,r.width,c)};const a=e.getBoundingClientRect();return{top:r.top-a.top+e.scrollTop+i+He(a.height,r.height,s),left:r.left-a.left+e.scrollLeft+o+He(a.width,r.width,c)}};function Ue(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:s}=Ke(r,t,n);r.scrollTo({top:s,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=k(n)?n():n,i=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?R(n):r,i=k(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[s,c]=(0,o.useState)(n),a=(0,o.useCallback)((e=>{c((t=>{const n=k(e)?e(t):e;return r&&i&&function(e,t,n){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=k(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),l=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),c(null)}),[r,i]);return Object.assign({state:s,setState:a,clearState:l},Re(e))}function nt(e,t,n={}){const r=W(e),i=z(n),s=(0,o.useMemo)((()=>(0,c.A)(r,t,i)),[r,t,i]);return _((()=>s.cancel())),s}const rt=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=W(e),{delay:i,enabled:s}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>a()}),[c,a,i,s]),{set:c,reset:l,clear:a}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function st(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new a.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const at={width:null,height:null};function lt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?at:{width:window.innerWidth,height:window.innerHeight})),r=B(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:s,reset:c,clear:a}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||c()}),[r,i,c,...n]),{set:s,reset:c,clear:a}}}}]); \ No newline at end of file diff --git a/assets/js/3bdef6d7.85d88013.js b/assets/js/3bdef6d7.85d88013.js new file mode 100644 index 000000000..b4d7e9d87 --- /dev/null +++ b/assets/js/3bdef6d7.85d88013.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[2786],{4123:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>s,contentTitle:()=>u,default:()=>p,frontMatter:()=>a,metadata:()=>r,toc:()=>l});const r=JSON.parse('{"id":"react/hooks/useDebouncedState","title":"useDebouncedState","description":"useState\uc758 \ub514\ubc14\uc6b4\uc2a4 \ubc84\uc804\uc758 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useDebouncedState.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useDebouncedState","permalink":"/modern-kit/docs/react/hooks/useDebouncedState","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useDebouncedInputValue","permalink":"/modern-kit/docs/react/hooks/useDebouncedInputValue"},"next":{"title":"useDependencyTimeout","permalink":"/modern-kit/docs/react/hooks/useDependencyTimeout"}}');var o=n(6206),i=n(3267),c=(n(4382),n(9883));const a={},u="useDebouncedState",s={},d=()=>{const e={div:"div",input:"input",p:"p",...(0,i.R)()},[t,n]=(0,c.M)("",500);return(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.p,{children:["\ub514\ubc14\uc6b4\uc2f1 \uc0c1\ud0dc: ",t]}),(0,o.jsx)(e.div,{children:(0,o.jsx)(e.input,{type:"text",onChange:e=>n(e.target.value)})})]})},l=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usedebouncedstate",children:"useDebouncedState"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"useState"}),"\uc758 \ub514\ubc14\uc6b4\uc2a4 \ubc84\uc804\uc758 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useDebouncedState/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"type DebounceParameters = Parameters;\ntype DebounceReturnType = ReturnType<\n typeof debounce\n>;\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useDebouncedState(\n initialState: T,\n wait: DebounceParameters[1],\n options?: DebounceParameters[2]\n): [T, DebounceReturnType>>];\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useState } from 'react';\nimport { useDebouncedState } from '@modern-kit/react';\n\nconst Example = () => {\n const [debouncedState, setDebouncedState] = useDebouncedState(\"\", 500);\n\n return (\n
\n

\ub514\ubc14\uc6b4\uc2f1 \uc0c1\ud0dc: {debouncedValue}

\n
\n setDebouncedState(e.target.value)} />\n
\n
\n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(d,{})]})}function p(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(f,{...e})}):f(e)}},3267:(e,t,n)=>{n.d(t,{R:()=>c,x:()=>a});var r=n(4382);const o={},i=r.createContext(o);function c(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),r.createElement(i.Provider,{value:t},e.children)}},5115:(e,t,n)=>{n.d(t,{d:()=>u});var r=n(4382),o=n(5086),i=n(3311),c=n(6765),a=n(5423);function u(e,t,n){const u=(0,c.p)(e),s=(0,a.B)(n),d=(0,r.useMemo)((()=>(0,o.A)(u,t,s)),[u,t,s]);return(0,i.i)((()=>d.cancel())),d}},9883:(e,t,n)=>{n.d(t,{M:()=>i});var r=n(5115),o=n(4382);function i(e,t,n={}){const[i,c]=(0,o.useState)(e);return[i,(0,r.d)(c,t,n)]}},6765:(e,t,n)=>{n.d(t,{p:()=>o});var r=n(4382);function o(e){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}},5423:(e,t,n)=>{n.d(t,{B:()=>c});var r=n(4382),o=n(6765),i=n(9340);function c(e,t=i.Gp){const[n,c]=(0,r.useState)(e),a=(0,o.p)(t);return(0,r.useEffect)((()=>{a(n,e)||c(e)}),[a,n,e]),n}},3311:(e,t,n)=>{n.d(t,{i:()=>i});var r=n(6765),o=n(4382);function i(e){const t=(0,r.p)(e);(0,o.useEffect)((()=>()=>t()),[t])}},5086:(e,t,n)=>{n.d(t,{A:()=>N});var r=n(322);const o="object"==typeof global&&global&&global.Object===Object&&global;var i="object"==typeof self&&self&&self.Object===Object&&self;const c=o||i||Function("return this")();const a=function(){return c.Date.now()};var u=/\s/;const s=function(e){for(var t=e.length;t--&&u.test(e.charAt(t)););return t};var d=/^\s+/;const l=function(e){return e?e.slice(0,s(e)+1).replace(d,""):e};const f=c.Symbol;var p=Object.prototype,h=p.hasOwnProperty,m=p.toString,v=f?f.toStringTag:void 0;const b=function(e){var t=h.call(e,v),n=e[v];try{e[v]=void 0;var r=!0}catch(i){}var o=m.call(e);return r&&(t?e[v]=n:delete e[v]),o};var g=Object.prototype.toString;const y=function(e){return g.call(e)};var w=f?f.toStringTag:void 0;const x=function(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":w&&w in Object(e)?b(e):y(e)};const j=function(e){return null!=e&&"object"==typeof e};const S=function(e){return"symbol"==typeof e||j(e)&&"[object Symbol]"==x(e)};var k=/^[-+]0x[0-9a-f]+$/i,D=/^0b[01]+$/i,E=/^0o[0-7]+$/i,T=parseInt;const O=function(e){if("number"==typeof e)return e;if(S(e))return NaN;if((0,r.A)(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=(0,r.A)(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=l(e);var n=D.test(e);return n||E.test(e)?T(e.slice(2),n?2:8):k.test(e)?NaN:+e};var C=Math.max,$=Math.min;const N=function(e,t,n){var o,i,c,u,s,d,l=0,f=!1,p=!1,h=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function m(t){var n=o,r=i;return o=i=void 0,l=t,u=e.apply(r,n)}function v(e){var n=e-d;return void 0===d||n>=t||n<0||p&&e-l>=c}function b(){var e=a();if(v(e))return g(e);s=setTimeout(b,function(e){var n=t-(e-d);return p?$(n,c-(e-l)):n}(e))}function g(e){return s=void 0,h&&o?m(e):(o=i=void 0,u)}function y(){var e=a(),n=v(e);if(o=arguments,i=this,d=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(b,t),f?m(e):u}(d);if(p)return clearTimeout(s),s=setTimeout(b,t),m(d)}return void 0===s&&(s=setTimeout(b,t)),u}return t=O(t)||0,(0,r.A)(n)&&(f=!!n.leading,c=(p="maxWait"in n)?C(O(n.maxWait)||0,t):c,h="trailing"in n?!!n.trailing:h),y.cancel=function(){void 0!==s&&clearTimeout(s),l=0,o=d=i=s=void 0},y.flush=function(){return void 0===s?u:g(a())},y}},322:(e,t,n)=>{n.d(t,{A:()=>r});const r=function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}},9340:(e,t,n)=>{function r(e,t,n,r){return new(n||(n=Promise))((function(o,i){function c(e){try{u(r.next(e))}catch(t){i(t)}}function a(e){try{u(r.throw(e))}catch(t){i(t)}}function u(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(c,a)}u((r=r.apply(e,t||[])).next())}))}n.d(t,{Et:()=>w,Fr:()=>a,Gp:()=>b,Ol:()=>D,Qd:()=>j,S$:()=>c,Tn:()=>g,Zp:()=>f,dK:()=>s,fl:()=>O,gD:()=>y,i5:()=>h,if:()=>p,l6:()=>S,lQ:()=>k,nS:()=>l,ni:()=>C,oc:()=>u}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,t)=>new Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function c(){return"undefined"==typeof window}function a(){if(c())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function u(){return!c()}function s(e){return r(this,void 0,void 0,(function*(){if(!u())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const d=e=>r(void 0,void 0,void 0,(function*(){const t=yield fetch(e);return s(yield t.text())}));function l(e,t){var n;return r(this,void 0,void 0,(function*(){if(!u())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return d(e);if(!("write"in window.navigator.clipboard))return d(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return d(e);const c=yield function(e,t="png"){return new Promise(((n,c)=>{const a=new Image;a.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=a.width,e.height=a.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(a,0,0);const c=yield i(e,o[t]);n(c)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),c(r)}})),a.onerror=()=>{c(new Error("Failed to load image"))},a.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[c.type]:c})]),c}catch(c){throw console.error(`Failed to copy to clipboard. message: ${c.message}`),c}}))}function f(){return r(this,void 0,void 0,(function*(){if(!u())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(){return r(this,void 0,void 0,(function*(){if(!u())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function h(e,t){return Object.prototype.hasOwnProperty.call(e,t)}const m=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t)return!0;if(w(e)&&w(t)&&isNaN(e)&&isNaN(t))return!0;if(g(e)&&g(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return m(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!v(o,t.get(r),n))return!1;return!0}return m(e,t,n)};function b(e,t){return v(e,t,new WeakMap)}function g(e){return"function"==typeof e}function y(e){return null==e}function w(e){return"number"==typeof e}function x(e){return!function(e){return Object(e)!==e}(e)}function j(e){return x(e)&&"[object Object]"===Object.prototype.toString.call(e)}function S(e){return e===window}function k(){}function D(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}function E(e){return Object.keys(e)}const T={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};E(T);function O(e,t){if(!u())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}function C(e,t,n){if(!u())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=g(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/3e5d9272.5b90e6a3.js b/assets/js/3e5d9272.5b90e6a3.js new file mode 100644 index 000000000..cda54946d --- /dev/null +++ b/assets/js/3e5d9272.5b90e6a3.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[7138],{7970:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>f,assets:()=>u,contentTitle:()=>d,default:()=>m,frontMatter:()=>a,metadata:()=>r,toc:()=>p});const r=JSON.parse('{"id":"react/components/InfiniteScroll","title":"InfiniteScroll","description":"\ubb34\ud55c \uc2a4\ud06c\ub864 \uae30\ub2a5\uc744 \uc120\uc5b8\uc801\uc73c\ub85c \ud65c\uc6a9 \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","source":"@site/docs/react/components/InfiniteScroll.mdx","sourceDirName":"react/components","slug":"/react/components/InfiniteScroll","permalink":"/modern-kit/docs/react/components/InfiniteScroll","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"InView","permalink":"/modern-kit/docs/react/components/InView"},"next":{"title":"Iterator","permalink":"/modern-kit/docs/react/components/Iterator"}}');var o=t(6206),i=t(3267),c=t(4382),s=t(7399);const l=({onScrollAction:e,children:n,root:t,threshold:r,enabled:i,triggerPosition:c="after",rootMargin:l="150px 0px"})=>{const{ref:a}=(0,s.B)({onIntersectStart:e,root:t,threshold:r,enabled:i,rootMargin:l});return(0,o.jsxs)(o.Fragment,{children:["before"===c&&(0,o.jsx)("div",{ref:a}),n,"after"===c&&(0,o.jsx)("div",{ref:a})]})},a={},d="InfiniteScroll",u={},f=()=>{const e={div:"div",...(0,i.R)()},[n,t]=(0,c.useState)([1,2,3,4,5,6,7,8,9,10]);return(0,o.jsx)(e.div,{style:{display:"flex",gap:"10px",flexDirection:"column"},children:(0,o.jsx)(l,{onScrollAction:()=>{t((e=>[...e,...Array.from({length:10},((n,t)=>e.length+t+1))]))},triggerPosition:"after",children:n.map((n=>(0,o.jsxs)(e.div,{style:{height:"80px",backgroundColor:"#ccccff"},children:["Item ",n]},n)))})})},p=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function h(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"infinitescroll",children:"InfiniteScroll"})}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"\ubb34\ud55c \uc2a4\ud06c\ub864"})," \uae30\ub2a5\uc744 \uc120\uc5b8\uc801\uc73c\ub85c \ud65c\uc6a9 \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"@modern-kit/react"}),"\uc758 ",(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/hooks/useIntersectionObserver",children:"useIntersectionObserver"})})," \ud6c5\uc744 \uc0ac\uc6a9\ud558\uc5ec \uad6c\ud604\ub418\uc5c8\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/InfiniteScroll/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"\ninterface InfiniteScrollProps\n extends Omit<\n UseIntersectionObserverProps,\n 'onIntersectStart' | 'onIntersectEnd' | 'calledOnce'\n > {\n onScrollAction: (entry: IntersectionObserverEntry) => void;\n triggerPosition?: 'before' | 'after';\n}\n"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"const InfiniteScroll: ({\n onScrollAction,\n children,\n root,\n threshold,\n enabled,\n triggerPosition,\n rootMargin,\n}: PropsWithChildren) => JSX.Element;\n"})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { InfiniteScroll } from '@modern-kit/react'\n\nconst Example = () => {\n const [list, setList] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);\n const onScrollAction = () => {\n setList((prev) => [...prev, ...Array.from({ length: 10 }, (_, i) => prev.length + i + 1)]);\n };\n\n return (\n
\n \n {list.map((value) => (\n
\n Item {value}\n
\n ))}\n \n
\n );\n};\n"})}),"\n",(0,o.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(f,{})]})}function m(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},3267:(e,n,t)=>{t.d(n,{R:()=>c,x:()=>s});var r=t(4382);const o={},i=r.createContext(o);function c(e){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),r.createElement(i.Provider,{value:n},e.children)}},7399:(e,n,t)=>{t.d(n,{B:()=>c});var r=t(4382),o=t(6765),i=t(9340);function c({onIntersectStart:e=i.lQ,onIntersectEnd:n=i.lQ,enabled:t=!0,calledOnce:c=!1,root:s=null,threshold:l=0,rootMargin:a="0px 0px 0px 0px"}){const d=(0,r.useRef)(0),u=(0,r.useRef)(!1),f=(0,r.useRef)(null),p=(0,o.p)((([t],r)=>{if(!t)return;const o=t.target;t.isIntersecting?(u.current=!0,d.current+=1,e(t)):u.current&&(u.current=!1,d.current+=1,n(t)),c&&d.current>1&&r.unobserve(o)}));return{ref:(0,r.useCallback)((e=>{f.current&&(f.current.disconnect(),f.current=null),null!==e&&t&&(f.current=new IntersectionObserver(p,{threshold:l,root:s,rootMargin:a}),f.current.observe(e))}),[t,l,s,a,p])}}},6765:(e,n,t)=>{t.d(n,{p:()=>o});var r=t(4382);function o(e){const n=(0,r.useRef)(e);return n.current=e,(0,r.useCallback)(((...e)=>n.current(...e)),[])}},9340:(e,n,t)=>{function r(e,n,t,r){return new(t||(t=Promise))((function(o,i){function c(e){try{l(r.next(e))}catch(n){i(n)}}function s(e){try{l(r.throw(e))}catch(n){i(n)}}function l(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(c,s)}l((r=r.apply(e,n||[])).next())}))}t.d(n,{Et:()=>b,Fr:()=>s,Gp:()=>v,Ol:()=>k,Qd:()=>j,S$:()=>c,Tn:()=>x,Zp:()=>f,dK:()=>a,fl:()=>O,gD:()=>w,i5:()=>h,if:()=>p,l6:()=>S,lQ:()=>I,nS:()=>u,ni:()=>P,oc:()=>l}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,n)=>new Promise(((t,r)=>{e.toBlob((e=>{e?t(e):r(new Error(`Failed to create blob with format ${n}`))}),n)}));function c(){return"undefined"==typeof window}function s(){if(c())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function l(){return!c()}function a(e){return r(this,void 0,void 0,(function*(){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const d=e=>r(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return a(yield n.text())}));function u(e,n){var t;return r(this,void 0,void 0,(function*(){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return d(e);if(!("write"in window.navigator.clipboard))return d(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return d(e);const c=yield function(e,n="png"){return new Promise(((t,c)=>{const s=new Image;s.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=s.width,e.height=s.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(s,0,0);const c=yield i(e,o[n]);t(c)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),c(r)}})),s.onerror=()=>{c(new Error("Failed to load image"))},s.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[c.type]:c})]),c}catch(c){throw console.error(`Failed to copy to clipboard. message: ${c.message}`),c}}))}function f(){return r(this,void 0,void 0,(function*(){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(){return r(this,void 0,void 0,(function*(){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function h(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const m=(e,n,t)=>{const r=Object.keys(e),o=Object.keys(n);if(r.length!==o.length)return!1;for(let i=0;i{if(e===n)return!0;if(b(e)&&b(n)&&isNaN(e)&&isNaN(n))return!0;if(x(e)&&x(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const r=[...e],o=[...n];return m(r,o,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[r,o]of e)if(!n.has(r)||!g(o,n.get(r),t))return!1;return!0}return m(e,n,t)};function v(e,n){return g(e,n,new WeakMap)}function x(e){return"function"==typeof e}function w(e){return null==e}function b(e){return"number"==typeof e}function y(e){return!function(e){return Object(e)!==e}(e)}function j(e){return y(e)&&"[object Object]"===Object.prototype.toString.call(e)}function S(e){return e===window}function I(){}function k(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function E(e){return Object.keys(e)}const C={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};E(C);function O(e,n){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function P(e,n,t){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=x(t)?t():t;r.setItem(n,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${n}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/3e5d9272.fe03afa2.js b/assets/js/3e5d9272.fe03afa2.js deleted file mode 100644 index a0ee3701e..000000000 --- a/assets/js/3e5d9272.fe03afa2.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[7138],{2218:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>a,default:()=>p,frontMatter:()=>l,metadata:()=>r,toc:()=>f});const r=JSON.parse('{"id":"react/components/InfiniteScroll","title":"InfiniteScroll","description":"\ubb34\ud55c \uc2a4\ud06c\ub864 \uae30\ub2a5\uc744 \uc120\uc5b8\uc801\uc73c\ub85c \ud65c\uc6a9 \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","source":"@site/docs/react/components/InfiniteScroll.mdx","sourceDirName":"react/components","slug":"/react/components/InfiniteScroll","permalink":"/modern-kit/docs/react/components/InfiniteScroll","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"InView","permalink":"/modern-kit/docs/react/components/InView"},"next":{"title":"Iterator","permalink":"/modern-kit/docs/react/components/Iterator"}}');var o=n(6206),i=n(3267),c=n(4382),s=n(4027);const l={},a="InfiniteScroll",u={},d=()=>{const e={div:"div",...(0,i.R)()},[t,n]=(0,c.useState)([1,2,3,4,5,6,7,8,9,10]);return(0,o.jsx)(e.div,{style:{display:"flex",gap:"10px",flexDirection:"column"},children:(0,o.jsx)(s.u8,{onScrollAction:()=>{n((e=>[...e,...Array.from({length:10},((t,n)=>e.length+n+1))]))},triggerPosition:"after",children:t.map((t=>(0,o.jsxs)(e.div,{style:{height:"80px",backgroundColor:"#ccccff"},children:["Item ",t]},t)))})})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function h(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"infinitescroll",children:"InfiniteScroll"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"\ubb34\ud55c \uc2a4\ud06c\ub864"})," \uae30\ub2a5\uc744 \uc120\uc5b8\uc801\uc73c\ub85c \ud65c\uc6a9 \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"@modern-kit/react"}),"\uc758 ",(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/hooks/useIntersectionObserver",children:"useIntersectionObserver"})})," \ud6c5\uc744 \uc0ac\uc6a9\ud558\uc5ec \uad6c\ud604\ub418\uc5c8\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/InfiniteScroll/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"\ninterface InfiniteScrollProps\n extends Omit<\n UseIntersectionObserverProps,\n 'onIntersectStart' | 'onIntersectEnd' | 'calledOnce'\n > {\n onScrollAction: (entry: IntersectionObserverEntry) => void;\n triggerPosition?: 'before' | 'after';\n}\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"const InfiniteScroll: ({\n onScrollAction,\n children,\n root,\n threshold,\n enabled,\n triggerPosition,\n rootMargin,\n}: PropsWithChildren) => JSX.Element;\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { InfiniteScroll } from '@modern-kit/react'\n\nconst Example = () => {\n const [list, setList] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);\n const onScrollAction = () => {\n setList((prev) => [...prev, ...Array.from({ length: 10 }, (_, i) => prev.length + i + 1)]);\n };\n\n return (\n
\n \n {list.map((value) => (\n
\n Item {value}\n
\n ))}\n \n
\n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(d,{})]})}function p(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>$e,$I:()=>oe,AE:()=>We,BL:()=>H,DX:()=>P,FT:()=>st,Fo:()=>et,Hn:()=>it,I5:()=>je,JF:()=>Te,K:()=>ae,K$:()=>Je,M0:()=>Re,ML:()=>ne,Mj:()=>ye,Mk:()=>Ne,Mo:()=>ie,NT:()=>Ye,QV:()=>Ke,Ub:()=>Se,Ut:()=>Ee,W7:()=>K,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>_e,Zu:()=>le,_1:()=>Oe,_g:()=>nt,aL:()=>J,aY:()=>Pe,bB:()=>V,d7:()=>B,eG:()=>ct,fN:()=>se,fm:()=>G,gl:()=>$,hN:()=>D,iD:()=>de,iQ:()=>Le,jd:()=>ce,lW:()=>at,oD:()=>U,oo:()=>Ie,pL:()=>q,qi:()=>ue,rN:()=>Fe,tD:()=>ke,u8:()=>Q,wY:()=>Be,xV:()=>L,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),i=n(3683),c=n(5086),s=n(7197),l=(n(1604),n(5938));function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function g(){return!m()}function w(e){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const v=e=>f(void 0,0,void 0,(function*(){return w(yield(yield fetch(e)).text())}));function b(e,t){var n;return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return v(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield p(e,h[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||C(e)&&C(t)&&isNaN(e)&&isNaN(t))return!0;if(k(e)&&k(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function S(e,t){return x(e,t,new WeakMap)}function k(e){return"function"==typeof e}function C(e){return"number"==typeof e}function E(e){return!function(e){return Object(e)!==e}(e)}function j(){}function I(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const O=(...e)=>t=>e.forEach((e=>{if(k(e))e(t);else if(null!=e){e.current=t}}));function R(...e){return(0,o.useCallback)(O(...e),e)}const P=o.forwardRef(((e,t)=>{const{children:n}=e,i=a(e,["children"]),c=o.Children.toArray(n),s=c.find(N);if(s){const e=s.props.children,n=c.map((t=>t===s?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(F,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(F,Object.assign({},i,{ref:t,children:n}))}));P.displayName="Slot";const F=o.forwardRef(((e,t)=>{const{children:n}=e,r=a(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?O(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));F.displayName="SlotClone";const L=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function N(e){return o.isValidElement(e)&&e.type===L}var M="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const $=d(((e,t)=>{var{ratio:n,style:o,as:c="div",asChild:s=!1}=e,l=a(e,["ratio","style","as","asChild"]);const u=s?P:c,d=Object.assign({aspectRatio:n},o),f=s?l.className:i(M,l.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},l))})),T=()=>j,A=()=>!1,Y=()=>!0;function V({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(T,A,Y)?e:t}function X(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const D=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>X()?(0,r.jsx)(r.Fragment,{children:t}):e;function W(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function _(e){const t=W(e);(0,o.useEffect)((()=>()=>t()),[t])}function z(e,t=S){const[n,r]=(0,o.useState)(e),i=W(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function B(e,t,n){const r=W(e),i=z(n),s=(0,o.useMemo)((()=>(0,c.A)(r,t,i)),[r,t,i]);return _((()=>s.cancel())),s}const J=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),c=B(((...e)=>{const n=i?.props;if(n&&k(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:c})};function H({onIntersectStart:e=j,onIntersectEnd:t=j,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:c=0,rootMargin:s="0px 0px 0px 0px"}){const l=(0,o.useRef)(0),a=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=W((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(a.current=!0,l.current+=1,e(n)):a.current&&(a.current=!1,l.current+=1,t(n)),r&&l.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:c,root:i,rootMargin:s}),u.current.observe(e))}),[n,c,i,s,d])}}const U=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:c}=e,s=a(e,["src","threshold","root","rootMargin"]);const{ref:l}=H({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:c});return(0,r.jsx)("img",Object.assign({ref:R(t,l)},s))}));U.displayName="LazyImage";const K=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:c,className:s,style:l,duration:u="0.2s",onLoad:d}=e,f=a(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,g=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),w=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},l)),[m,u,l]),v=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),b=s?`lazy-image-wrapper ${s}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:b,style:g,children:[m&&c,(0,r.jsx)(U,Object.assign({ref:t,width:n,height:i,style:w,onLoad:v},f))]})}));K.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:c="after",rootMargin:s="150px 0px"})=>{const{ref:l}=H({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:s});return(0,r.jsxs)(r.Fragment,{children:["before"===c&&(0,r.jsx)("div",{ref:l}),t,"after"===c&&(0,r.jsx)("div",{ref:l})]})},q=d(((e,t)=>{var{children:n,as:i="div",asChild:c=!1}=e,s=a(e,["children","as","asChild"]);const l=c?P:i,{ref:u}=H(s);if(c&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(l,Object.assign({ref:O(t,u)},s,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return E(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=g()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=W(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:c=!1,onPointerDown:s,excludeRefs:l=[]}=e,u=a(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(s,{excludeRefs:l}),f=c?P:i;if(c&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:O(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:c=1,includeLastSeparator:s=!1})=>{const l=(0,o.useCallback)((e=>e===t.length-1?s:(e+1)%c==0),[s,c,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),l(t)&&n]})})},ce=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),se=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function le(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function ae(e=!0){const t=k(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield w(e);return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield b(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),l=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:c,readText:s,readContents:l}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],ge=me("localStorage"),we=e=>window.localStorage.getItem(e),ve=e=>JSON.stringify(e),be=e=>(ge.subscribe(e),()=>{ge.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=k(n)?n():n,i=(0,o.useSyncExternalStore)(be,(()=>we(t)),(()=>ve(r)));return{state:(0,o.useMemo)((()=>i?I(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=we(t),o=n?I(n):r,i=k(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),ge.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ge.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>g()?window.matchMedia(e).matches:t??!1;function Se(e,t){const[n,r]=(0,o.useState)(xe(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function ke(){return Se("(prefers-color-scheme: dark)")?"dark":"light"}const Ce="color-scheme";function Ee({defaultValue:e,key:t=Ce,shouldSetBodyClass:n=!1}={}){const r=ke(),i=k(e)?e():e,{state:c,setState:s}=ye({key:t,initialValue:i??r}),l=(0,o.useCallback)((()=>{s((e=>"dark"===e?"light":"dark"))}),[s]),a=(0,o.useCallback)((()=>{s("dark")}),[s]),u=(0,o.useCallback)((()=>{s("light")}),[s]),d=(0,o.useCallback)((()=>{s(r)}),[s,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(c),()=>{n&&document.body.classList.remove(c)})),[c,n]),{colorScheme:c,preferredColorScheme:r,setToggleMode:l,setDarkMode:a,setLightMode:u,setPreferredMode:d}}function je(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),c=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:c}}function Ie({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),c=r0,l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),a=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const c=l(e,t);o&&o({prev:r,next:c}),i(c)}),[n,r,l]),u=(0,o.useCallback)((e=>{a("nextStep",!c,e)}),[c,a]),d=(0,o.useCallback)((e=>{a("prevStep",!s,e)}),[s,a]),f=(0,o.useCallback)(((t,n)=>{const o=k(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:c,hasPrevStep:s,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Oe(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:c}=Ie({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:c}}function Re(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,B(i,t,n)]}function Pe(e,t={}){const[n,r]=(0,o.useState)(""),[i,c]=Re("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),c(t)}),[c]),onReset:(0,o.useCallback)((()=>{r(""),c("")}),[c])}}function Fe(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Le({onFocus:e=j,onBlur:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),c=W((t=>{r(!0),e(t)})),s=W((e=>{r(!1),t(e)})),l=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",c),ne(i,"blur",s),{ref:i,isFocus:n,setFocus:l}}function Ne({onEnter:e=j,onLeave:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),c=W((t=>{r(!0),e(t)})),s=W((e=>{r(!1),t(e)}));return ne(i,"mouseenter",c),ne(i,"mouseleave",s),{ref:i,isHovered:n}}const Me=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function $e(e,t){const n=(0,o.useRef)(),r=W(e),{delay:i,enabled:c}=Me(t),s=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),s()}),[l,s]);return(0,o.useEffect)((()=>{if(!(i<0)&&c)return s(),()=>l()}),[l,s,c,i]),{set:s,reset:a,clear:l}}function Te({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=W((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];k(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const Ae={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Ye(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Ae),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:c,pageX:s,pageY:l}=t;let a=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();a=i-t.left,u=c-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:c,pageX:s,pageY:l,elementRelativeX:a,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Ve=()=>navigator.onLine,Xe=()=>!0,De=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function We({onlineAction:e=j,offlineAction:t=j}={}){const n=W((n=>De(n,e,t)));return(0,o.useSyncExternalStore)(n,Ve,Xe)}function _e(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const ze={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function Be(e=j){const[t,n]=(0,o.useState)(ze),r=(0,o.useRef)(null),i=W((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function Je({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const He=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ue=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:c="start",alignX:s="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+He(window.innerHeight,r.height,c),left:r.left+window.scrollX+o+He(window.innerWidth,r.width,s)};const l=e.getBoundingClientRect();return{top:r.top-l.top+e.scrollTop+i+He(l.height,r.height,c),left:r.left-l.left+e.scrollLeft+o+He(l.width,r.width,s)}};function Ke(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:c}=Ue(r,t,n);r.scrollTo({top:c,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=k(n)?n():n,i=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>i?I(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?I(n):r,i=k(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[c,s]=(0,o.useState)(n),l=(0,o.useCallback)((e=>{s((t=>{const n=k(e)?e(t):e;return r&&i&&function(e,t,n){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=k(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),a=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),s(null)}),[r,i]);return Object.assign({state:c,setState:l,clearState:a},Ie(e))}function nt(e,t,n={}){const r=W(e),i=z(n),c=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return _((()=>c.cancel())),c}const rt=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=W(e),{delay:i,enabled:c}=rt(t),s=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),s()}),[l,s]);return(0,o.useEffect)((()=>{if(!(i<0)&&c)return s(),()=>l()}),[s,l,i,c]),{set:s,reset:a,clear:l}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function ct(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new l.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function st({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const lt={width:null,height:null};function at({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?lt:{width:window.innerWidth,height:window.innerHeight})),r=B(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:c,reset:s,clear:l}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||s()}),[r,i,s,...n]),{set:c,reset:s,clear:l}}}}]); \ No newline at end of file diff --git a/assets/js/42a77533.0d5c5bad.js b/assets/js/42a77533.0d5c5bad.js deleted file mode 100644 index 6f9e13aca..000000000 --- a/assets/js/42a77533.0d5c5bad.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[9539],{7970:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>f,assets:()=>d,contentTitle:()=>u,default:()=>m,frontMatter:()=>a,metadata:()=>r,toc:()=>h});const r=JSON.parse('{"id":"react/hooks/useOutsidePointerDown","title":"useOutsidePointerDown","description":"\ud2b9\uc815 \uc694\uc18c \uc678\ubd80\uc5d0\uc11c \ub9c8\uc6b0\uc2a4 \ub610\ub294 \ud130\uce58 \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud560 \ub54c \ud638\ucd9c\ub418\ub294 \ucf5c\ubc31\uc744 \ub4f1\ub85d\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useOutsidePointerDown.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useOutsidePointerDown","permalink":"/modern-kit/docs/react/hooks/useOutsidePointerDown","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useNetwork","permalink":"/modern-kit/docs/react/hooks/useNetwork"},"next":{"title":"usePreferredColorScheme","permalink":"/modern-kit/docs/react/hooks/usePreferredColorScheme"}}');var o=n(6206),i=n(3267),s=n(4382),c=n(4027),l=n(9010);const a={},u="useOutsidePointerDown",d={},f=()=>{const e={br:"br",div:"div",h3:"h3",p:"p",...(0,i.R)()},[t,n]=(0,s.useState)(0),r=(0,s.useRef)(null),l=(0,c.WY)((()=>{n(t+1)}),{excludeRefs:[r]}),a=(0,s.useMemo)((()=>({width:"400px",background:"blue",color:"#fff"})),[]),u=(0,s.useMemo)((()=>({width:"400px",background:"#439966",color:"#fff",padding:"20px"})),[]),d=(0,s.useMemo)((()=>({width:"200px",background:"red",color:"#fff",padding:"20px"})),[]);return(0,o.jsxs)(e.div,{style:a,children:[(0,o.jsxs)(e.h3,{children:["Target Box \uc678\ubd80\ub97c \ud074\ub9ad\ud574\ubcf4\uc138\uc694!",(0,o.jsx)(e.br,{}),"(Exclude Box\ub294 \ud074\ub9ad \uac10\uc9c0\uc5d0 \uc81c\uc678\ub429\ub2c8\ub2e4.)"]}),(0,o.jsxs)(e.p,{children:["number: ",t]}),(0,o.jsx)(e.div,{ref:l,style:u,children:(0,o.jsx)(e.h3,{children:"Target Box"})}),(0,o.jsx)(e.div,{ref:r,style:d,children:(0,o.jsx)(e.h3,{children:"Exclude Box"})})]})},h=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Note",id:"note",level:2}];function p(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"useoutsidepointerdown",children:"useOutsidePointerDown"})}),"\n",(0,o.jsx)(t.p,{children:"\ud2b9\uc815 \uc694\uc18c \uc678\ubd80\uc5d0\uc11c \ub9c8\uc6b0\uc2a4 \ub610\ub294 \ud130\uce58 \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud560 \ub54c \ud638\ucd9c\ub418\ub294 \ucf5c\ubc31\uc744 \ub4f1\ub85d\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."}),"\n",(0,o.jsxs)(t.p,{children:["\uc9c0\uc815\ub41c \uc694\uc18c(",(0,o.jsx)(t.code,{children:"ref"}),"\ub85c \uc9c0\uc815\ub41c \uc694\uc18c) \uc678\ubd80\uc5d0\uc11c \uc0ac\uc6a9\uc790\uac00 \ub9c8\uc6b0\uc2a4\ub97c \ud074\ub9ad\ud558\uac70\ub098, \ud130\uce58 \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud560 \ub54c\ub9c8\ub2e4 \uc81c\uacf5\ub41c ",(0,o.jsx)(t.code,{children:"callback"})," \ud568\uc218\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:["\ubaa8\ubc14\uc77c \ud658\uacbd\uc5d0\uc11c\ub294 ",(0,o.jsx)(t.code,{children:"touchstart"}),", \ub370\uc2a4\ud06c\ud0d1 \ud658\uacbd\uc5d0\uc11c\ub294 ",(0,o.jsx)(t.code,{children:"mousedown"})," \uc774\ubca4\ud2b8\ub97c \uac10\uc9c0\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useOutsidePointerDown/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useOutsidePointerDown(\n callback: (targetElement: T) => void,\n options?: {\n excludeRefs: React.RefObject[];\n }\n): React.RefObject;\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useMemo, useState } from 'react';\nimport { useOutsidePointerDown } from '@modern-kit/react';\n\nconst Example = () => {\n const [number, setNumber] = useState(0);\n\n const excludeRef = useRef(null);\n const targetRef = useOutsidePointerDown(() => {\n setNumber(number + 1);\n }, {\n excludeRefs: [excludeRef], // \uc678\ubd80 \ud074\ub9ad \ubc0f \ud130\uce58 \uac10\uc9c0\ub97c \uc81c\uc678\ud560 \uc694\uc18c\uc758 ref \ubc30\uc5f4\uc785\ub2c8\ub2e4.\n });\n \n const outerBoxStyle = useMemo(() => {\n return { /* ... */ };\n }, []);\n\n const InnerBoxStyle = useMemo(() => {\n return { /* ... */ };\n }, []);\n\n const ExcludeBoxStyle = useMemo(() => {\n return { /* ... */ };\n }, []);\n\n return (\n
\n

Target Box \uc678\ubd80\ub97c \ud074\ub9ad\ud574\ubcf4\uc138\uc694!
(Exclude Box\ub294 \ud074\ub9ad \uac10\uc9c0\uc5d0 \uc81c\uc678\ub429\ub2c8\ub2e4.)

\n

number: {number}

\n\n
\n

Target Box

\n
\n\n
\n

Exclude Box

\n
\n
\n );\n};\n"})}),"\n","\n",(0,o.jsx)(l.A,{children:()=>(0,o.jsx)(f,{})}),"\n",(0,o.jsx)(t.h2,{id:"note",children:"Note"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent",children:"PointerEvent"})}),"\n"]})]})}function m(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},9010:(e,t,n)=>{n.d(t,{A:()=>i});n(4382);var r=n(3555),o=n(6206);function i(e){let{children:t,fallback:n}=e;return(0,r.A)()?(0,o.jsx)(o.Fragment,{children:t?.()}):n??null}},4027:(e,t,n)=>{n.d(t,{$$:()=>Te,$I:()=>oe,AE:()=>Ve,BL:()=>J,DX:()=>M,FT:()=>ct,Fo:()=>et,Hn:()=>it,I5:()=>Ce,JF:()=>$e,K:()=>ae,K$:()=>He,M0:()=>Pe,ML:()=>ne,Mj:()=>ye,Mk:()=>Le,Mo:()=>ie,NT:()=>Be,QV:()=>Ke,Ub:()=>ke,Ut:()=>je,W7:()=>K,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>We,Zu:()=>le,_1:()=>Oe,_g:()=>nt,aL:()=>H,aY:()=>Me,bB:()=>Y,d7:()=>_,eG:()=>st,fN:()=>ce,fm:()=>G,gl:()=>T,hN:()=>X,iD:()=>de,iQ:()=>Ie,jd:()=>se,lW:()=>at,oD:()=>U,oo:()=>Re,pL:()=>q,qi:()=>ue,rN:()=>Ne,tD:()=>Se,u8:()=>Q,wY:()=>_e,xV:()=>I,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),i=n(3683),s=n(5086),c=n(7197),l=(n(1604),n(5938));function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function w(){return!m()}function g(e){return f(this,0,void 0,(function*(){if(!w())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const b=e=>f(void 0,0,void 0,(function*(){return g(yield(yield fetch(e)).text())}));function v(e,t){var n;return f(this,0,void 0,(function*(){if(!w())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return b(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield p(e,h[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||E(e)&&E(t)&&isNaN(e)&&isNaN(t))return!0;if(S(e)&&S(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function k(e,t){return x(e,t,new WeakMap)}function S(e){return"function"==typeof e}function E(e){return"number"==typeof e}function j(e){return!function(e){return Object(e)!==e}(e)}function C(){}function R(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const O=(...e)=>t=>e.forEach((e=>{if(S(e))e(t);else if(null!=e){e.current=t}}));function P(...e){return(0,o.useCallback)(O(...e),e)}const M=o.forwardRef(((e,t)=>{const{children:n}=e,i=a(e,["children"]),s=o.Children.toArray(n),c=s.find(L);if(c){const e=c.props.children,n=s.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(N,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(N,Object.assign({},i,{ref:t,children:n}))}));M.displayName="Slot";const N=o.forwardRef(((e,t)=>{const{children:n}=e,r=a(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?O(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));N.displayName="SlotClone";const I=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function L(e){return o.isValidElement(e)&&e.type===I}var F="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const T=d(((e,t)=>{var{ratio:n,style:o,as:s="div",asChild:c=!1}=e,l=a(e,["ratio","style","as","asChild"]);const u=c?M:s,d=Object.assign({aspectRatio:n},o),f=c?l.className:i(F,l.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},l))})),$=()=>C,D=()=>!1,B=()=>!0;function Y({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)($,D,B)?e:t}function A(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const X=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>A()?(0,r.jsx)(r.Fragment,{children:t}):e;function V(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function W(e){const t=V(e);(0,o.useEffect)((()=>()=>t()),[t])}function z(e,t=k){const[n,r]=(0,o.useState)(e),i=V(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function _(e,t,n){const r=V(e),i=z(n),c=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return W((()=>c.cancel())),c}const H=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),s=_(((...e)=>{const n=i?.props;if(n&&S(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:s})};function J({onIntersectStart:e=C,onIntersectEnd:t=C,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:s=0,rootMargin:c="0px 0px 0px 0px"}){const l=(0,o.useRef)(0),a=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=V((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(a.current=!0,l.current+=1,e(n)):a.current&&(a.current=!1,l.current+=1,t(n)),r&&l.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:s,root:i,rootMargin:c}),u.current.observe(e))}),[n,s,i,c,d])}}const U=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:s}=e,c=a(e,["src","threshold","root","rootMargin"]);const{ref:l}=J({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:P(t,l)},c))}));U.displayName="LazyImage";const K=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=a(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,w=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),g=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},l)),[m,u,l]),b=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),v=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:w,children:[m&&s,(0,r.jsx)(U,Object.assign({ref:t,width:n,height:i,style:g,onLoad:b},f))]})}));K.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:s="after",rootMargin:c="150px 0px"})=>{const{ref:l}=J({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:l}),t,"after"===s&&(0,r.jsx)("div",{ref:l})]})},q=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1}=e,c=a(e,["children","as","asChild"]);const l=s?M:i,{ref:u}=J(c);if(s&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(l,Object.assign({ref:O(t,u)},c,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return j(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=w()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=V(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1,onPointerDown:c,excludeRefs:l=[]}=e,u=a(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:l}),f=s?M:i;if(s&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:O(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:s=1,includeLastSeparator:c=!1})=>{const l=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%s==0),[c,s,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),l(t)&&n]})})},se=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function le(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function ae(e=!0){const t=S(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield g(e);return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!w())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),l=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!w())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:s,readText:c,readContents:l}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],we=me("localStorage"),ge=e=>window.localStorage.getItem(e),be=e=>JSON.stringify(e),ve=e=>(we.subscribe(e),()=>{we.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(ve,(()=>ge(t)),(()=>be(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=ge(t),o=n?R(n):r,i=S(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),we.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),we.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>w()?window.matchMedia(e).matches:t??!1;function ke(e,t){const[n,r]=(0,o.useState)(xe(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function Se(){return ke("(prefers-color-scheme: dark)")?"dark":"light"}const Ee="color-scheme";function je({defaultValue:e,key:t=Ee,shouldSetBodyClass:n=!1}={}){const r=Se(),i=S(e)?e():e,{state:s,setState:c}=ye({key:t,initialValue:i??r}),l=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),a=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(s),()=>{n&&document.body.classList.remove(s)})),[s,n]),{colorScheme:s,preferredColorScheme:r,setToggleMode:l,setDarkMode:a,setLightMode:u,setPreferredMode:d}}function Ce(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:s}}function Re({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),s=r0,l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),a=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const s=l(e,t);o&&o({prev:r,next:s}),i(s)}),[n,r,l]),u=(0,o.useCallback)((e=>{a("nextStep",!s,e)}),[s,a]),d=(0,o.useCallback)((e=>{a("prevStep",!c,e)}),[c,a]),f=(0,o.useCallback)(((t,n)=>{const o=S(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:s,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Oe(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=Re({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}function Pe(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,_(i,t,n)]}function Me(e,t={}){const[n,r]=(0,o.useState)(""),[i,s]=Pe("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),s(t)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Ne(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ie({onFocus:e=C,onBlur:t=C}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=V((t=>{r(!0),e(t)})),c=V((e=>{r(!1),t(e)})),l=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",s),ne(i,"blur",c),{ref:i,isFocus:n,setFocus:l}}function Le({onEnter:e=C,onLeave:t=C}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=V((t=>{r(!0),e(t)})),c=V((e=>{r(!1),t(e)}));return ne(i,"mouseenter",s),ne(i,"mouseleave",c),{ref:i,isHovered:n}}const Fe=e=>{var t;return E(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function Te(e,t){const n=(0,o.useRef)(),r=V(e),{delay:i,enabled:s}=Fe(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>l()}),[l,c,s,i]),{set:c,reset:a,clear:l}}function $e({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=V((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];S(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const De={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Be(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(De),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l}=t;let a=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();a=i-t.left,u=s-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l,elementRelativeX:a,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Ye=()=>navigator.onLine,Ae=()=>!0,Xe=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function Ve({onlineAction:e=C,offlineAction:t=C}={}){const n=V((n=>Xe(n,e,t)));return(0,o.useSyncExternalStore)(n,Ye,Ae)}function We(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const ze={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function _e(e=C){const[t,n]=(0,o.useState)(ze),r=(0,o.useRef)(null),i=V((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function He({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ue=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:s="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+Je(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+Je(window.innerWidth,r.width,c)};const l=e.getBoundingClientRect();return{top:r.top-l.top+e.scrollTop+i+Je(l.height,r.height,s),left:r.left-l.left+e.scrollLeft+o+Je(l.width,r.width,c)}};function Ke(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:s}=Ue(r,t,n);r.scrollTo({top:s,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?R(n):r,i=S(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[s,c]=(0,o.useState)(n),l=(0,o.useCallback)((e=>{c((t=>{const n=S(e)?e(t):e;return r&&i&&function(e,t,n){if(!w())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=S(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),a=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!w())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),c(null)}),[r,i]);return Object.assign({state:s,setState:l,clearState:a},Re(e))}function nt(e,t,n={}){const r=V(e),i=z(n),s=(0,o.useMemo)((()=>(0,c.A)(r,t,i)),[r,t,i]);return W((()=>s.cancel())),s}const rt=e=>{var t;return E(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=V(e),{delay:i,enabled:s}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>l()}),[c,l,i,s]),{set:c,reset:a,clear:l}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function st(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new l.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const lt={width:null,height:null};function at({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?lt:{width:window.innerWidth,height:window.innerHeight})),r=_(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:s,reset:c,clear:l}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||c()}),[r,i,c,...n]),{set:s,reset:c,clear:l}}}}]); \ No newline at end of file diff --git a/assets/js/42a77533.4dc4c694.js b/assets/js/42a77533.4dc4c694.js new file mode 100644 index 000000000..8ac4322a4 --- /dev/null +++ b/assets/js/42a77533.4dc4c694.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[9539],{5589:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>f,assets:()=>l,contentTitle:()=>a,default:()=>p,frontMatter:()=>d,metadata:()=>r,toc:()=>h});const r=JSON.parse('{"id":"react/hooks/useOutsidePointerDown","title":"useOutsidePointerDown","description":"\ud2b9\uc815 \uc694\uc18c \uc678\ubd80\uc5d0\uc11c \ub9c8\uc6b0\uc2a4 \ub610\ub294 \ud130\uce58 \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud560 \ub54c \ud638\ucd9c\ub418\ub294 \ucf5c\ubc31\uc744 \ub4f1\ub85d\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useOutsidePointerDown.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useOutsidePointerDown","permalink":"/modern-kit/docs/react/hooks/useOutsidePointerDown","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useNetwork","permalink":"/modern-kit/docs/react/hooks/useNetwork"},"next":{"title":"usePreferredColorScheme","permalink":"/modern-kit/docs/react/hooks/usePreferredColorScheme"}}');var o=t(6206),i=t(3267),c=t(4382),s=t(9115),u=t(9010);const d={},a="useOutsidePointerDown",l={},f=()=>{const e={br:"br",div:"div",h3:"h3",p:"p",...(0,i.R)()},[n,t]=(0,c.useState)(0),r=(0,c.useRef)(null),u=(0,s.W)((()=>{t(n+1)}),{excludeRefs:[r]}),d=(0,c.useMemo)((()=>({width:"400px",background:"blue",color:"#fff"})),[]),a=(0,c.useMemo)((()=>({width:"400px",background:"#439966",color:"#fff",padding:"20px"})),[]),l=(0,c.useMemo)((()=>({width:"200px",background:"red",color:"#fff",padding:"20px"})),[]);return(0,o.jsxs)(e.div,{style:d,children:[(0,o.jsxs)(e.h3,{children:["Target Box \uc678\ubd80\ub97c \ud074\ub9ad\ud574\ubcf4\uc138\uc694!",(0,o.jsx)(e.br,{}),"(Exclude Box\ub294 \ud074\ub9ad \uac10\uc9c0\uc5d0 \uc81c\uc678\ub429\ub2c8\ub2e4.)"]}),(0,o.jsxs)(e.p,{children:["number: ",n]}),(0,o.jsx)(e.div,{ref:u,style:a,children:(0,o.jsx)(e.h3,{children:"Target Box"})}),(0,o.jsx)(e.div,{ref:r,style:l,children:(0,o.jsx)(e.h3,{children:"Exclude Box"})})]})},h=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Note",id:"note",level:2}];function m(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"useoutsidepointerdown",children:"useOutsidePointerDown"})}),"\n",(0,o.jsx)(n.p,{children:"\ud2b9\uc815 \uc694\uc18c \uc678\ubd80\uc5d0\uc11c \ub9c8\uc6b0\uc2a4 \ub610\ub294 \ud130\uce58 \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud560 \ub54c \ud638\ucd9c\ub418\ub294 \ucf5c\ubc31\uc744 \ub4f1\ub85d\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."}),"\n",(0,o.jsxs)(n.p,{children:["\uc9c0\uc815\ub41c \uc694\uc18c(",(0,o.jsx)(n.code,{children:"ref"}),"\ub85c \uc9c0\uc815\ub41c \uc694\uc18c) \uc678\ubd80\uc5d0\uc11c \uc0ac\uc6a9\uc790\uac00 \ub9c8\uc6b0\uc2a4\ub97c \ud074\ub9ad\ud558\uac70\ub098, \ud130\uce58 \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud560 \ub54c\ub9c8\ub2e4 \uc81c\uacf5\ub41c ",(0,o.jsx)(n.code,{children:"callback"})," \ud568\uc218\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.p,{children:["\ubaa8\ubc14\uc77c \ud658\uacbd\uc5d0\uc11c\ub294 ",(0,o.jsx)(n.code,{children:"touchstart"}),", \ub370\uc2a4\ud06c\ud0d1 \ud658\uacbd\uc5d0\uc11c\ub294 ",(0,o.jsx)(n.code,{children:"mousedown"})," \uc774\ubca4\ud2b8\ub97c \uac10\uc9c0\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useOutsidePointerDown/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"function useOutsidePointerDown(\n callback: (targetElement: T) => void,\n options?: {\n excludeRefs: React.RefObject[];\n }\n): React.RefObject;\n"})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useMemo, useState } from 'react';\nimport { useOutsidePointerDown } from '@modern-kit/react';\n\nconst Example = () => {\n const [number, setNumber] = useState(0);\n\n const excludeRef = useRef(null);\n const targetRef = useOutsidePointerDown(() => {\n setNumber(number + 1);\n }, {\n excludeRefs: [excludeRef], // \uc678\ubd80 \ud074\ub9ad \ubc0f \ud130\uce58 \uac10\uc9c0\ub97c \uc81c\uc678\ud560 \uc694\uc18c\uc758 ref \ubc30\uc5f4\uc785\ub2c8\ub2e4.\n });\n \n const outerBoxStyle = useMemo(() => {\n return { /* ... */ };\n }, []);\n\n const InnerBoxStyle = useMemo(() => {\n return { /* ... */ };\n }, []);\n\n const ExcludeBoxStyle = useMemo(() => {\n return { /* ... */ };\n }, []);\n\n return (\n
\n

Target Box \uc678\ubd80\ub97c \ud074\ub9ad\ud574\ubcf4\uc138\uc694!
(Exclude Box\ub294 \ud074\ub9ad \uac10\uc9c0\uc5d0 \uc81c\uc678\ub429\ub2c8\ub2e4.)

\n

number: {number}

\n\n
\n

Target Box

\n
\n\n
\n

Exclude Box

\n
\n
\n );\n};\n"})}),"\n","\n",(0,o.jsx)(u.A,{children:()=>(0,o.jsx)(f,{})}),"\n",(0,o.jsx)(n.h2,{id:"note",children:"Note"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent",children:"PointerEvent"})}),"\n"]})]})}function p(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(m,{...e})}):m(e)}},9010:(e,n,t)=>{t.d(n,{A:()=>i});t(4382);var r=t(3555),o=t(6206);function i(e){let{children:n,fallback:t}=e;return(0,r.A)()?(0,o.jsx)(o.Fragment,{children:n?.()}):t??null}},3267:(e,n,t)=>{t.d(n,{R:()=>c,x:()=>s});var r=t(4382);const o={},i=r.createContext(o);function c(e){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),r.createElement(i.Provider,{value:n},e.children)}},1351:(e,n,t)=>{t.d(n,{M:()=>s});var r=t(6765),o=t(5907),i=t(9340);t(4382);const c=e=>!!e&&(0,i.i5)(e,"current");function s(e,n,t,i){const s=(0,r.p)(t);(0,o.E)((()=>{const t=c(e)?e.current:e;if(t)return t.addEventListener(n,s,i),()=>{t.removeEventListener(n,s,i)}}),[n,e,i,s])}},5907:(e,n,t)=>{t.d(n,{E:()=>i});var r=t(9340),o=t(4382);const i=(0,r.oc)()?o.useLayoutEffect:o.useEffect},9115:(e,n,t)=>{t.d(n,{W:()=>c});var r=t(4382),o=t(9340),i=t(1351);function c(e,n){const{excludeRefs:t}=null!=n?n:{},c=(0,r.useRef)(null),s=(0,r.useMemo)((()=>(0,o.Fr)()?"touchstart":"mousedown"),[]);return(0,i.M)(document,s,(({target:n})=>{if(!c.current)return;const r=c.current,o=null==t?void 0:t.some((e=>{var t;return null===(t=e.current)||void 0===t?void 0:t.contains(n)}));!r.contains(n)&&!o&&e(r)})),c}},6765:(e,n,t)=>{t.d(n,{p:()=>o});var r=t(4382);function o(e){const n=(0,r.useRef)(e);return n.current=e,(0,r.useCallback)(((...e)=>n.current(...e)),[])}},9340:(e,n,t)=>{function r(e,n,t,r){return new(t||(t=Promise))((function(o,i){function c(e){try{u(r.next(e))}catch(n){i(n)}}function s(e){try{u(r.throw(e))}catch(n){i(n)}}function u(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(c,s)}u((r=r.apply(e,n||[])).next())}))}t.d(n,{Et:()=>b,Fr:()=>s,Gp:()=>w,Ol:()=>O,Qd:()=>j,S$:()=>c,Tn:()=>g,Zp:()=>f,dK:()=>d,fl:()=>C,gD:()=>v,i5:()=>m,if:()=>h,l6:()=>E,lQ:()=>k,nS:()=>l,ni:()=>M,oc:()=>u}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,n)=>new Promise(((t,r)=>{e.toBlob((e=>{e?t(e):r(new Error(`Failed to create blob with format ${n}`))}),n)}));function c(){return"undefined"==typeof window}function s(){if(c())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function u(){return!c()}function d(e){return r(this,void 0,void 0,(function*(){if(!u())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const a=e=>r(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return d(yield n.text())}));function l(e,n){var t;return r(this,void 0,void 0,(function*(){if(!u())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return a(e);if(!("write"in window.navigator.clipboard))return a(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return a(e);const c=yield function(e,n="png"){return new Promise(((t,c)=>{const s=new Image;s.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=s.width,e.height=s.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(s,0,0);const c=yield i(e,o[n]);t(c)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),c(r)}})),s.onerror=()=>{c(new Error("Failed to load image"))},s.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[c.type]:c})]),c}catch(c){throw console.error(`Failed to copy to clipboard. message: ${c.message}`),c}}))}function f(){return r(this,void 0,void 0,(function*(){if(!u())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function h(){return r(this,void 0,void 0,(function*(){if(!u())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function m(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const p=(e,n,t)=>{const r=Object.keys(e),o=Object.keys(n);if(r.length!==o.length)return!1;for(let i=0;i{if(e===n)return!0;if(b(e)&&b(n)&&isNaN(e)&&isNaN(n))return!0;if(g(e)&&g(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const r=[...e],o=[...n];return p(r,o,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[r,o]of e)if(!n.has(r)||!x(o,n.get(r),t))return!1;return!0}return p(e,n,t)};function w(e,n){return x(e,n,new WeakMap)}function g(e){return"function"==typeof e}function v(e){return null==e}function b(e){return"number"==typeof e}function y(e){return!function(e){return Object(e)!==e}(e)}function j(e){return y(e)&&"[object Object]"===Object.prototype.toString.call(e)}function E(e){return e===window}function k(){}function O(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function P(e){return Object.keys(e)}const S={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};P(S);function C(e,n){if(!u())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function M(e,n,t){if(!u())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=g(t)?t():t;r.setItem(n,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${n}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/54102c04.35ce4b40.js b/assets/js/54102c04.35ce4b40.js deleted file mode 100644 index 9f94a0291..000000000 --- a/assets/js/54102c04.35ce4b40.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[5170],{98:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>c,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"react/components/LazyImage","title":"LazyImage","description":"@modern-kit/react/useIntersectionObserver \ub97c \ud65c\uc6a9\ud574 \uc774\ubbf8\uc9c0\uac00 viewport\uc5d0 \ub178\ucd9c\ub420 \ub54c \ud560\ub2f9\ub41c \uc774\ubbf8\uc9c0\ub97c Lazy Loading(\uc9c0\uc5f0 \ub85c\ub529) \ud558\ub294 \uc774\ubbf8\uc9c0 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","source":"@site/docs/react/components/LazyImage.mdx","sourceDirName":"react/components","slug":"/react/components/LazyImage","permalink":"/modern-kit/docs/react/components/LazyImage","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"Iterator","permalink":"/modern-kit/docs/react/components/Iterator"},"next":{"title":"Mounted","permalink":"/modern-kit/docs/react/components/Mounted"}}');var o=n(6206),i=n(3267),s=n(4027);const c={},a="LazyImage",l={},u=()=>{const e={div:"div",...(0,i.R)()};return(0,o.jsxs)(e.div,{style:{background:"#f8f8f8",width:"500px"},children:[(0,o.jsx)(e.div,{style:{height:"500px",textAlign:"center",fontSize:"2rem"},children:"\uc2a4\ud06c\ub864 \ud574\uc8fc\uc138\uc694."}),(0,o.jsx)(s.oD,{src:"https://github.com/Team-Grace/devgrace/assets/64779472/b5640bec-2abc-4205-afbf-ccfd9876a90b",alt:"img1",width:500,height:500}),(0,o.jsx)(e.div,{style:{width:"100%",height:"150px"}}),(0,o.jsx)(s.oD,{src:"https://github.com/Team-Grace/devgrace/assets/64779472/207743a7-b29f-4826-bc08-8df0d67e568b",alt:"img2",width:500,height:500}),(0,o.jsx)(e.div,{style:{width:"100%",height:"150px"}}),(0,o.jsx)(s.oD,{src:"https://github.com/Team-Grace/devgrace/assets/64779472/d1957ec8-fe87-406e-bfda-fb4ee505b152",alt:"img3",width:500,height:500})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2},{value:"Note",id:"note",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"lazyimage",children:"LazyImage"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/hooks/useIntersectionObserver",children:"@modern-kit/react/useIntersectionObserver"})})," \ub97c \ud65c\uc6a9\ud574 \uc774\ubbf8\uc9c0\uac00 ",(0,o.jsx)(t.code,{children:"viewport"}),"\uc5d0 \ub178\ucd9c\ub420 \ub54c \ud560\ub2f9\ub41c \uc774\ubbf8\uc9c0\ub97c ",(0,o.jsx)(t.code,{children:"Lazy Loading(\uc9c0\uc5f0 \ub85c\ub529)"})," \ud558\ub294 \uc774\ubbf8\uc9c0 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:["Intersection Observer Option\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.(\ud558\ub2e8 ",(0,o.jsx)(t.code,{children:"Note"})," \ucc38\uace0)"]}),"\n",(0,o.jsxs)(t.p,{children:["\ub9cc\uc57d, \uc774\ubbf8\uc9c0 ",(0,o.jsx)(t.code,{children:"load"})," \uc911\uc5d0 ",(0,o.jsx)(t.code,{children:"\ud2b9\uc815 Fallback \ucef4\ud3ec\ub10c\ud2b8"}),"\ub97c \ub178\ucd9c\ud558\uace0 \uc2f6\ub2e4\uba74, \uc774\ub97c \uc120\uc5b8\uc801\uc73c\ub85c \ud65c\uc6a9\ud558\uae30 \uc704\ud574 ",(0,o.jsx)(t.code,{children:"LazyImage\ub97c \ud655\uc7a5"}),"\ud574\uc11c \ub9cc\ub4e0 ",(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/FallbackLazyImage",children:"FallbackLazyImage \ucef4\ud3ec\ub10c\ud2b8"})})," \uac00 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/LazyImage/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface IntersectionObserverInit {\n root?: Element | Document | null;\n rootMargin?: string;\n threshold?: number | number[];\n}\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"interface LazyImageProps\n extends React.ComponentProps<'img'>,\n IntersectionObserverInit {\n src: string;\n}\n\nconst LazyImage: React.ForwardRefExoticComponent<\n Omit & React.RefAttributes\n>;\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { LazyImage } from '@modern-kit/react';\nimport img1 from '../assets/img1.png';\nimport img2 from '../assets/img2.png';\n\nconst Example = () => {\n return (\n
\n {/* ... */}\n \n {/* ... */}\n \n {/* ... */}\n
\n );\n}; \n"})}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(u,{}),"\n",(0,o.jsx)(t.h2,{id:"note",children:"Note"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver",children:"Intersection Observer API"})}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(f,{...e})}):f(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>Pe,$I:()=>oe,AE:()=>Ve,BL:()=>J,DX:()=>L,FT:()=>ct,Fo:()=>et,Hn:()=>it,I5:()=>Ee,JF:()=>$e,K:()=>le,K$:()=>He,M0:()=>Re,ML:()=>ne,Mj:()=>ye,Mk:()=>Me,Mo:()=>ie,NT:()=>Ye,QV:()=>Ue,Ub:()=>ke,Ut:()=>Ce,W7:()=>U,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>We,Zu:()=>ae,_1:()=>Oe,_g:()=>nt,aL:()=>H,aY:()=>Le,bB:()=>A,d7:()=>B,eG:()=>st,fN:()=>ce,fm:()=>q,gl:()=>P,hN:()=>X,iD:()=>de,iQ:()=>Ne,jd:()=>se,lW:()=>lt,oD:()=>K,oo:()=>Ie,pL:()=>Q,qi:()=>ue,rN:()=>Fe,tD:()=>je,u8:()=>Z,wY:()=>Be,xV:()=>N,xh:()=>tt,zy:()=>G});var r=n(6206),o=n(4382),i=n(3683),s=n(5086),c=n(7197),a=(n(1604),n(5938));function l(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function p(){return typeof window>"u"}function g(){return!p()}function b(e){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const w=e=>f(void 0,0,void 0,(function*(){return b(yield(yield fetch(e)).text())}));function v(e,t){var n;return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return w(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield m(e,h[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||S(e)&&S(t)&&isNaN(e)&&isNaN(t))return!0;if(j(e)&&j(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function k(e,t){return x(e,t,new WeakMap)}function j(e){return"function"==typeof e}function S(e){return"number"==typeof e}function C(e){return!function(e){return Object(e)!==e}(e)}function E(){}function I(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const O=(...e)=>t=>e.forEach((e=>{if(j(e))e(t);else if(null!=e){e.current=t}}));function R(...e){return(0,o.useCallback)(O(...e),e)}const L=o.forwardRef(((e,t)=>{const{children:n}=e,i=l(e,["children"]),s=o.Children.toArray(n),c=s.find(M);if(c){const e=c.props.children,n=s.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(F,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(F,Object.assign({},i,{ref:t,children:n}))}));L.displayName="Slot";const F=o.forwardRef(((e,t)=>{const{children:n}=e,r=l(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?O(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));F.displayName="SlotClone";const N=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function M(e){return o.isValidElement(e)&&e.type===N}var z="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const P=d(((e,t)=>{var{ratio:n,style:o,as:s="div",asChild:c=!1}=e,a=l(e,["ratio","style","as","asChild"]);const u=c?L:s,d=Object.assign({aspectRatio:n},o),f=c?a.className:i(z,a.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},a))})),$=()=>E,T=()=>!1,Y=()=>!0;function A({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)($,T,Y)?e:t}function D(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const X=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>D()?(0,r.jsx)(r.Fragment,{children:t}):e;function V(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function W(e){const t=V(e);(0,o.useEffect)((()=>()=>t()),[t])}function _(e,t=k){const[n,r]=(0,o.useState)(e),i=V(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function B(e,t,n){const r=V(e),i=_(n),c=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return W((()=>c.cancel())),c}const H=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),s=B(((...e)=>{const n=i?.props;if(n&&j(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:s})};function J({onIntersectStart:e=E,onIntersectEnd:t=E,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:s=0,rootMargin:c="0px 0px 0px 0px"}){const a=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=V((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(l.current=!0,a.current+=1,e(n)):l.current&&(l.current=!1,a.current+=1,t(n)),r&&a.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:s,root:i,rootMargin:c}),u.current.observe(e))}),[n,s,i,c,d])}}const K=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:s}=e,c=l(e,["src","threshold","root","rootMargin"]);const{ref:a}=J({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:R(t,a)},c))}));K.displayName="LazyImage";const U=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:s,className:c,style:a,duration:u="0.2s",onLoad:d}=e,f=l(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,m]=(0,o.useState)(!1),p=!h,g=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),b=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},a)),[p,u,a]),w=(0,o.useCallback)((e=>{d&&d(e),m(!0)}),[d]),v=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:g,children:[p&&s,(0,r.jsx)(K,Object.assign({ref:t,width:n,height:i,style:b,onLoad:w},f))]})}));U.displayName="FallbackLazyImage";const G=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},Z=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:s="after",rootMargin:c="150px 0px"})=>{const{ref:a}=J({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:a}),t,"after"===s&&(0,r.jsx)("div",{ref:a})]})},Q=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1}=e,c=l(e,["children","as","asChild"]);const a=s?L:i,{ref:u}=J(c);if(s&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(a,Object.assign({ref:O(t,u)},c,{children:n}))})),q=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return C(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=g()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=V(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(p())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1,onPointerDown:c,excludeRefs:a=[]}=e,u=l(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:a}),f=s?L:i;if(s&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:O(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:s=1,includeLastSeparator:c=!1})=>{const a=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%s==0),[c,s,t.length]);return(0,r.jsx)(q,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),a(t)&&n]})})},se=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function ae(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function le(e=!0){const t=j(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield b(e);return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),a=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:s,readText:c,readContents:a}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",me={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},pe=e=>me[e],ge=pe("localStorage"),be=e=>window.localStorage.getItem(e),we=e=>JSON.stringify(e),ve=e=>(ge.subscribe(e),()=>{ge.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=j(n)?n():n,i=(0,o.useSyncExternalStore)(ve,(()=>be(t)),(()=>we(r)));return{state:(0,o.useMemo)((()=>i?I(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=be(t),o=n?I(n):r,i=j(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),ge.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ge.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>g()?window.matchMedia(e).matches:t??!1;function ke(e,t){const[n,r]=(0,o.useState)(xe(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function je(){return ke("(prefers-color-scheme: dark)")?"dark":"light"}const Se="color-scheme";function Ce({defaultValue:e,key:t=Se,shouldSetBodyClass:n=!1}={}){const r=je(),i=j(e)?e():e,{state:s,setState:c}=ye({key:t,initialValue:i??r}),a=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),l=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(s),()=>{n&&document.body.classList.remove(s)})),[s,n]),{colorScheme:s,preferredColorScheme:r,setToggleMode:a,setDarkMode:l,setLightMode:u,setPreferredMode:d}}function Ee(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:s}}function Ie({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),s=r0,a=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),l=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const s=a(e,t);o&&o({prev:r,next:s}),i(s)}),[n,r,a]),u=(0,o.useCallback)((e=>{l("nextStep",!s,e)}),[s,l]),d=(0,o.useCallback)((e=>{l("prevStep",!c,e)}),[c,l]),f=(0,o.useCallback)(((t,n)=>{const o=j(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:s,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Oe(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=Ie({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}function Re(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,B(i,t,n)]}function Le(e,t={}){const[n,r]=(0,o.useState)(""),[i,s]=Re("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),s(t)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Fe(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onFocus:e=E,onBlur:t=E}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=V((t=>{r(!0),e(t)})),c=V((e=>{r(!1),t(e)})),a=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",s),ne(i,"blur",c),{ref:i,isFocus:n,setFocus:a}}function Me({onEnter:e=E,onLeave:t=E}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=V((t=>{r(!0),e(t)})),c=V((e=>{r(!1),t(e)}));return ne(i,"mouseenter",s),ne(i,"mouseleave",c),{ref:i,isHovered:n}}const ze=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function Pe(e,t){const n=(0,o.useRef)(),r=V(e),{delay:i,enabled:s}=ze(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>a()}),[a,c,s,i]),{set:c,reset:l,clear:a}}function $e({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=V((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];j(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const Te={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Ye(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Te),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:a}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=i-t.left,u=s-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:a,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Ae=()=>navigator.onLine,De=()=>!0,Xe=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function Ve({onlineAction:e=E,offlineAction:t=E}={}){const n=V((n=>Xe(n,e,t)));return(0,o.useSyncExternalStore)(n,Ae,De)}function We(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const _e={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function Be(e=E){const[t,n]=(0,o.useState)(_e),r=(0,o.useRef)(null),i=V((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function He({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:s="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+Je(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+Je(window.innerWidth,r.width,c)};const a=e.getBoundingClientRect();return{top:r.top-a.top+e.scrollTop+i+Je(a.height,r.height,s),left:r.left-a.left+e.scrollLeft+o+Je(a.width,r.width,c)}};function Ue(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:s}=Ke(r,t,n);r.scrollTo({top:s,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ge=pe("sessionStorage"),Ze=e=>window.sessionStorage.getItem(e),Qe=e=>JSON.stringify(e),qe=e=>(Ge.subscribe(e),()=>{Ge.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=j(n)?n():n,i=(0,o.useSyncExternalStore)(qe,(()=>Ze(t)),(()=>Qe(r)));return{state:(0,o.useMemo)((()=>i?I(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Ze(t),o=n?I(n):r,i=j(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ge.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ge.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[s,c]=(0,o.useState)(n),a=(0,o.useCallback)((e=>{c((t=>{const n=j(e)?e(t):e;return r&&i&&function(e,t,n){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=j(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),l=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),c(null)}),[r,i]);return Object.assign({state:s,setState:a,clearState:l},Ie(e))}function nt(e,t,n={}){const r=V(e),i=_(n),s=(0,o.useMemo)((()=>(0,c.A)(r,t,i)),[r,t,i]);return W((()=>s.cancel())),s}const rt=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=V(e),{delay:i,enabled:s}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>a()}),[c,a,i,s]),{set:c,reset:l,clear:a}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function st(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new a.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const at={width:null,height:null};function lt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>p()?at:{width:window.innerWidth,height:window.innerHeight})),r=B(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:s,reset:c,clear:a}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||c()}),[r,i,c,...n]),{set:s,reset:c,clear:a}}}}]); \ No newline at end of file diff --git a/assets/js/54102c04.d0fd9f95.js b/assets/js/54102c04.d0fd9f95.js new file mode 100644 index 000000000..f93446dd7 --- /dev/null +++ b/assets/js/54102c04.d0fd9f95.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[5170],{98:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>l,assets:()=>d,contentTitle:()=>s,default:()=>f,frontMatter:()=>a,metadata:()=>r,toc:()=>u});const r=JSON.parse('{"id":"react/components/LazyImage","title":"LazyImage","description":"@modern-kit/react/useIntersectionObserver \ub97c \ud65c\uc6a9\ud574 \uc774\ubbf8\uc9c0\uac00 viewport\uc5d0 \ub178\ucd9c\ub420 \ub54c \ud560\ub2f9\ub41c \uc774\ubbf8\uc9c0\ub97c Lazy Loading(\uc9c0\uc5f0 \ub85c\ub529) \ud558\ub294 \uc774\ubbf8\uc9c0 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","source":"@site/docs/react/components/LazyImage.mdx","sourceDirName":"react/components","slug":"/react/components/LazyImage","permalink":"/modern-kit/docs/react/components/LazyImage","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"Iterator","permalink":"/modern-kit/docs/react/components/Iterator"},"next":{"title":"Mounted","permalink":"/modern-kit/docs/react/components/Mounted"}}');var o=n(6206),i=n(3267),c=n(7261);const a={},s="LazyImage",d={},l=()=>{const e={div:"div",...(0,i.R)()};return(0,o.jsxs)(e.div,{style:{background:"#f8f8f8",width:"500px"},children:[(0,o.jsx)(e.div,{style:{height:"500px",textAlign:"center",fontSize:"2rem"},children:"\uc2a4\ud06c\ub864 \ud574\uc8fc\uc138\uc694."}),(0,o.jsx)(c.o,{src:"https://github.com/Team-Grace/devgrace/assets/64779472/b5640bec-2abc-4205-afbf-ccfd9876a90b",alt:"img1",width:500,height:500}),(0,o.jsx)(e.div,{style:{width:"100%",height:"150px"}}),(0,o.jsx)(c.o,{src:"https://github.com/Team-Grace/devgrace/assets/64779472/207743a7-b29f-4826-bc08-8df0d67e568b",alt:"img2",width:500,height:500}),(0,o.jsx)(e.div,{style:{width:"100%",height:"150px"}}),(0,o.jsx)(c.o,{src:"https://github.com/Team-Grace/devgrace/assets/64779472/d1957ec8-fe87-406e-bfda-fb4ee505b152",alt:"img3",width:500,height:500})]})},u=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2},{value:"Note",id:"note",level:2}];function h(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"lazyimage",children:"LazyImage"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/hooks/useIntersectionObserver",children:"@modern-kit/react/useIntersectionObserver"})})," \ub97c \ud65c\uc6a9\ud574 \uc774\ubbf8\uc9c0\uac00 ",(0,o.jsx)(t.code,{children:"viewport"}),"\uc5d0 \ub178\ucd9c\ub420 \ub54c \ud560\ub2f9\ub41c \uc774\ubbf8\uc9c0\ub97c ",(0,o.jsx)(t.code,{children:"Lazy Loading(\uc9c0\uc5f0 \ub85c\ub529)"})," \ud558\ub294 \uc774\ubbf8\uc9c0 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:["Intersection Observer Option\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.(\ud558\ub2e8 ",(0,o.jsx)(t.code,{children:"Note"})," \ucc38\uace0)"]}),"\n",(0,o.jsxs)(t.p,{children:["\ub9cc\uc57d, \uc774\ubbf8\uc9c0 ",(0,o.jsx)(t.code,{children:"load"})," \uc911\uc5d0 ",(0,o.jsx)(t.code,{children:"\ud2b9\uc815 Fallback \ucef4\ud3ec\ub10c\ud2b8"}),"\ub97c \ub178\ucd9c\ud558\uace0 \uc2f6\ub2e4\uba74, \uc774\ub97c \uc120\uc5b8\uc801\uc73c\ub85c \ud65c\uc6a9\ud558\uae30 \uc704\ud574 ",(0,o.jsx)(t.code,{children:"LazyImage\ub97c \ud655\uc7a5"}),"\ud574\uc11c \ub9cc\ub4e0 ",(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/FallbackLazyImage",children:"FallbackLazyImage \ucef4\ud3ec\ub10c\ud2b8"})})," \uac00 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/LazyImage/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface IntersectionObserverInit {\n root?: Element | Document | null;\n rootMargin?: string;\n threshold?: number | number[];\n}\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"interface LazyImageProps\n extends React.ComponentProps<'img'>,\n IntersectionObserverInit {\n src: string;\n}\n\nconst LazyImage: React.ForwardRefExoticComponent<\n Omit & React.RefAttributes\n>;\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { LazyImage } from '@modern-kit/react';\nimport img1 from '../assets/img1.png';\nimport img2 from '../assets/img2.png';\n\nconst Example = () => {\n return (\n
\n {/* ... */}\n \n {/* ... */}\n \n {/* ... */}\n
\n );\n}; \n"})}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(l,{}),"\n",(0,o.jsx)(t.h2,{id:"note",children:"Note"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver",children:"Intersection Observer API"})}),"\n"]})]})}function f(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},4076:(e,t,n)=>{function r(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);or,a:()=>o}),"function"==typeof SuppressedError&&SuppressedError},3267:(e,t,n)=>{n.d(t,{R:()=>c,x:()=>a});var r=n(4382);const o={},i=r.createContext(o);function c(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),r.createElement(i.Provider,{value:t},e.children)}},7261:(e,t,n)=>{n.d(t,{o:()=>d});var r=n(4076),o=n(6206),i=n(4382),c=n(7399),a=n(2424);function s(...e){return(0,i.useCallback)((0,a.P)(...e),e)}const d=(0,i.forwardRef)(((e,t)=>{var{src:n,threshold:i,root:a,rootMargin:d}=e,l=(0,r._)(e,["src","threshold","root","rootMargin"]);const{ref:u}=(0,c.B)({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:i,root:a,rootMargin:d});return(0,o.jsx)("img",Object.assign({ref:s(t,u)},l))}));d.displayName="LazyImage"},7399:(e,t,n)=>{n.d(t,{B:()=>c});var r=n(4382),o=n(6765),i=n(9340);function c({onIntersectStart:e=i.lQ,onIntersectEnd:t=i.lQ,enabled:n=!0,calledOnce:c=!1,root:a=null,threshold:s=0,rootMargin:d="0px 0px 0px 0px"}){const l=(0,r.useRef)(0),u=(0,r.useRef)(!1),h=(0,r.useRef)(null),f=(0,o.p)((([n],r)=>{if(!n)return;const o=n.target;n.isIntersecting?(u.current=!0,l.current+=1,e(n)):u.current&&(u.current=!1,l.current+=1,t(n)),c&&l.current>1&&r.unobserve(o)}));return{ref:(0,r.useCallback)((e=>{h.current&&(h.current.disconnect(),h.current=null),null!==e&&n&&(h.current=new IntersectionObserver(f,{threshold:s,root:a,rootMargin:d}),h.current.observe(e))}),[n,s,a,d,f])}}},6765:(e,t,n)=>{n.d(t,{p:()=>o});var r=n(4382);function o(e){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}},2424:(e,t,n)=>{n.d(t,{P:()=>o});var r=n(9340);const o=(...e)=>t=>e.forEach((e=>{if((0,r.Tn)(e))e(t);else if(null!=e){e.current=t}}))},9340:(e,t,n)=>{function r(e,t,n,r){return new(n||(n=Promise))((function(o,i){function c(e){try{s(r.next(e))}catch(t){i(t)}}function a(e){try{s(r.throw(e))}catch(t){i(t)}}function s(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(c,a)}s((r=r.apply(e,t||[])).next())}))}n.d(t,{Et:()=>v,Fr:()=>a,Gp:()=>b,Ol:()=>k,Qd:()=>j,S$:()=>c,Tn:()=>x,Zp:()=>h,dK:()=>d,fl:()=>C,gD:()=>y,i5:()=>m,if:()=>f,l6:()=>I,lQ:()=>O,nS:()=>u,ni:()=>L,oc:()=>s}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,t)=>new Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function c(){return"undefined"==typeof window}function a(){if(c())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function s(){return!c()}function d(e){return r(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const l=e=>r(void 0,void 0,void 0,(function*(){const t=yield fetch(e);return d(yield t.text())}));function u(e,t){var n;return r(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return l(e);if(!("write"in window.navigator.clipboard))return l(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return l(e);const c=yield function(e,t="png"){return new Promise(((n,c)=>{const a=new Image;a.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=a.width,e.height=a.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(a,0,0);const c=yield i(e,o[t]);n(c)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),c(r)}})),a.onerror=()=>{c(new Error("Failed to load image"))},a.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[c.type]:c})]),c}catch(c){throw console.error(`Failed to copy to clipboard. message: ${c.message}`),c}}))}function h(){return r(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function f(){return r(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function m(e,t){return Object.prototype.hasOwnProperty.call(e,t)}const p=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t)return!0;if(v(e)&&v(t)&&isNaN(e)&&isNaN(t))return!0;if(x(e)&&x(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return p(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!g(o,t.get(r),n))return!1;return!0}return p(e,t,n)};function b(e,t){return g(e,t,new WeakMap)}function x(e){return"function"==typeof e}function y(e){return null==e}function v(e){return"number"==typeof e}function w(e){return!function(e){return Object(e)!==e}(e)}function j(e){return w(e)&&"[object Object]"===Object.prototype.toString.call(e)}function I(e){return e===window}function O(){}function k(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}function E(e){return Object.keys(e)}const z={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};E(z);function C(e,t){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}function L(e,t,n){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=x(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/5d610355.79411896.js b/assets/js/5d610355.79411896.js new file mode 100644 index 000000000..faf3d1435 --- /dev/null +++ b/assets/js/5d610355.79411896.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[3118],{3329:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>h,assets:()=>f,contentTitle:()=>u,default:()=>v,frontMatter:()=>d,metadata:()=>r,toc:()=>p});const r=JSON.parse('{"id":"react/hooks/useInterval","title":"useInterval","description":"window.setInterval\uc744 \ud3b8\ub9ac\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useInterval.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useInterval","permalink":"/modern-kit/docs/react/hooks/useInterval","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useIntersectionObserver","permalink":"/modern-kit/docs/react/hooks/useIntersectionObserver"},"next":{"title":"useIsMounted","permalink":"/modern-kit/docs/react/hooks/useIsMounted"}}');var o=t(6206),i=t(3267),s=t(4382),c=t(6765),a=t(9340);function l(e,n){const t=(0,s.useRef)(),r=(0,c.p)(e),{delay:o,enabled:i}=(e=>{var n;return(0,a.Et)(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(n=null==e?void 0:e.enabled)||void 0===n||n}})(n),l=(0,s.useCallback)((()=>{t.current=window.setInterval(r,o)}),[r,o]),d=(0,s.useCallback)((()=>{t.current&&(clearInterval(t.current),t.current=null)}),[]),u=(0,s.useCallback)((()=>{d(),l()}),[d,l]);return(0,s.useEffect)((()=>{if(!(o<0)&&i)return l(),()=>d()}),[d,l,i,o]),{set:l,reset:u,clear:d}}const d={},u="useInterval",f={},h=()=>{const e={button:"button",div:"div",p:"p",...(0,i.R)()},[n,t]=(0,s.useState)(0),{set:r,clear:c,reset:a}=l((()=>t(n+1)),{delay:1e3,enabled:!1});return(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.p,{children:n}),(0,o.jsx)(e.button,{onClick:r,children:"set"}),(0,o.jsx)(e.button,{onClick:c,children:"clear"}),(0,o.jsx)(e.button,{onClick:a,children:"reset"})]})},p=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function m(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"useinterval",children:"useInterval"})}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"window.setInterval"}),"\uc744 \ud3b8\ub9ac\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.p,{children:["2\ubc88\uc9f8 \uc778\uc790 options\ub294 ",(0,o.jsx)(n.code,{children:"number"})," \ud639\uc740 ",(0,o.jsx)(n.code,{children:"{ delay: SetIntervalParameters[1]; enabled?: boolean }"})," \ud0c0\uc785\uc758 \uac1d\uccb4\ub97c \ub118\uaca8 \uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.p,{children:["options\uac00 ",(0,o.jsx)(n.code,{children:"number"})," \ud0c0\uc785\uc774\uba74 \ud574\ub2f9 \uac12\uc740 ",(0,o.jsx)(n.code,{children:"setInterval"}),"\uc758 ",(0,o.jsx)(n.code,{children:"delay"})," \uac12\uc774 \ub418\uba70, \uac1d\uccb4 \ud0c0\uc785\uc77c \uacbd\uc6b0 delay\uc640 \ub354\ubd88\uc5b4 ",(0,o.jsx)(n.code,{children:"setInterval\uc758 \ub3d9\uc791 \uc5ec\ubd80"}),"\ub97c \uacb0\uc815\ud558\ub294 ",(0,o.jsx)(n.code,{children:"enabled"})," \uc635\uc158\uc744 \ucd94\uac00\ub85c \ub2e4\ub8f0 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["\ud83d\udca1 options\uac00 number \ud0c0\uc785\uc758 \uacbd\uc6b0 enabled\ub294 \uae30\ubcf8\uc801\uc73c\ub85c ",(0,o.jsx)(n.code,{children:"true"}),"\uc785\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsxs)(n.p,{children:["interval\uc744 \uc9c1\uc811 \ud578\ub4e4\ub9c1 \ud560 \uc218 \uc788\ub294 ",(0,o.jsx)(n.code,{children:"set"}),", ",(0,o.jsx)(n.code,{children:"reset"}),", ",(0,o.jsx)(n.code,{children:"clear"})," \ud568\uc218\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useInterval/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"interface IntervalOptions {\n delay: number;\n enabled?: boolean;\n}\n"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"// \ud568\uc218 \uc624\ubc84\ub85c\ub529\nfunction useInterval(\n callback: () => void,\n options: number\n): {\n set: () => void;\n clear: () => void;\n reset: () => void;\n};\n\nfunction useInterval(\n callback: () => void,\n options: IntervalOptions\n): {\n set: () => void;\n clear: () => void;\n reset: () => void;\n};\n"})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useInterval } from '@modern-kit/react';\n\nconst Example = () => {\n const [number, setNumber] = useState(0);\n\n const { set, clear, reset } = useInterval(\n () => setNumber(number + 1),\n { delay: 1000, enabled: false } // \uc790\ub3d9 \uc2e4\ud589 X\n );\n\n /*\n * useInterval(() => {\n * setNumber(number + 1);\n * }, 1000); // \uc790\ub3d9 \uc2e4\ud589\n */\n\n return (\n
\n

{number}

\n \n \n \n
\n );\n};\n"})}),"\n","\n",(0,o.jsx)(h,{})]})}function v(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(m,{...e})}):m(e)}},3267:(e,n,t)=>{t.d(n,{R:()=>s,x:()=>c});var r=t(4382);const o={},i=r.createContext(o);function s(e){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),r.createElement(i.Provider,{value:n},e.children)}},6765:(e,n,t)=>{t.d(n,{p:()=>o});var r=t(4382);function o(e){const n=(0,r.useRef)(e);return n.current=e,(0,r.useCallback)(((...e)=>n.current(...e)),[])}},9340:(e,n,t)=>{function r(e,n,t,r){return new(t||(t=Promise))((function(o,i){function s(e){try{a(r.next(e))}catch(n){i(n)}}function c(e){try{a(r.throw(e))}catch(n){i(n)}}function a(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(s,c)}a((r=r.apply(e,n||[])).next())}))}t.d(n,{Et:()=>x,Fr:()=>c,Gp:()=>b,Ol:()=>C,Qd:()=>j,S$:()=>s,Tn:()=>w,Zp:()=>f,dK:()=>l,fl:()=>S,gD:()=>g,i5:()=>p,if:()=>h,l6:()=>k,lQ:()=>I,nS:()=>u,ni:()=>$,oc:()=>a}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,n)=>new Promise(((t,r)=>{e.toBlob((e=>{e?t(e):r(new Error(`Failed to create blob with format ${n}`))}),n)}));function s(){return"undefined"==typeof window}function c(){if(s())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function a(){return!s()}function l(e){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const d=e=>r(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return l(yield n.text())}));function u(e,n){var t;return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return d(e);if(!("write"in window.navigator.clipboard))return d(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return d(e);const s=yield function(e,n="png"){return new Promise(((t,s)=>{const c=new Image;c.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=c.width,e.height=c.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(c,0,0);const s=yield i(e,o[n]);t(s)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),s(r)}})),c.onerror=()=>{s(new Error("Failed to load image"))},c.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[s.type]:s})]),s}catch(s){throw console.error(`Failed to copy to clipboard. message: ${s.message}`),s}}))}function f(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function h(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const m=(e,n,t)=>{const r=Object.keys(e),o=Object.keys(n);if(r.length!==o.length)return!1;for(let i=0;i{if(e===n)return!0;if(x(e)&&x(n)&&isNaN(e)&&isNaN(n))return!0;if(w(e)&&w(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const r=[...e],o=[...n];return m(r,o,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[r,o]of e)if(!n.has(r)||!v(o,n.get(r),t))return!1;return!0}return m(e,n,t)};function b(e,n){return v(e,n,new WeakMap)}function w(e){return"function"==typeof e}function g(e){return null==e}function x(e){return"number"==typeof e}function y(e){return!function(e){return Object(e)!==e}(e)}function j(e){return y(e)&&"[object Object]"===Object.prototype.toString.call(e)}function k(e){return e===window}function I(){}function C(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function E(e){return Object.keys(e)}const O={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};E(O);function S(e,n){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function $(e,n,t){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=w(t)?t():t;r.setItem(n,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${n}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/5d610355.9c05908f.js b/assets/js/5d610355.9c05908f.js deleted file mode 100644 index c103e2d91..000000000 --- a/assets/js/5d610355.9c05908f.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[3118],{7263:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>a,default:()=>p,frontMatter:()=>l,metadata:()=>r,toc:()=>f});const r=JSON.parse('{"id":"react/hooks/useInterval","title":"useInterval","description":"window.setInterval\uc744 \ud3b8\ub9ac\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useInterval.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useInterval","permalink":"/modern-kit/docs/react/hooks/useInterval","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useIntersectionObserver","permalink":"/modern-kit/docs/react/hooks/useIntersectionObserver"},"next":{"title":"useIsMounted","permalink":"/modern-kit/docs/react/hooks/useIsMounted"}}');var o=n(6206),s=n(3267),i=n(4027),c=n(4382);const l={},a="useInterval",u={},d=()=>{const e={button:"button",div:"div",p:"p",...(0,s.R)()},[t,n]=(0,c.useState)(0),{set:r,clear:l,reset:a}=(0,i.$$)((()=>n(t+1)),{delay:1e3,enabled:!1});return(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.p,{children:t}),(0,o.jsx)(e.button,{onClick:r,children:"set"}),(0,o.jsx)(e.button,{onClick:l,children:"clear"}),(0,o.jsx)(e.button,{onClick:a,children:"reset"})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function h(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"useinterval",children:"useInterval"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"window.setInterval"}),"\uc744 \ud3b8\ub9ac\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:["2\ubc88\uc9f8 \uc778\uc790 options\ub294 ",(0,o.jsx)(t.code,{children:"number"})," \ud639\uc740 ",(0,o.jsx)(t.code,{children:"{ delay: SetIntervalParameters[1]; enabled?: boolean }"})," \ud0c0\uc785\uc758 \uac1d\uccb4\ub97c \ub118\uaca8 \uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:["options\uac00 ",(0,o.jsx)(t.code,{children:"number"})," \ud0c0\uc785\uc774\uba74 \ud574\ub2f9 \uac12\uc740 ",(0,o.jsx)(t.code,{children:"setInterval"}),"\uc758 ",(0,o.jsx)(t.code,{children:"delay"})," \uac12\uc774 \ub418\uba70, \uac1d\uccb4 \ud0c0\uc785\uc77c \uacbd\uc6b0 delay\uc640 \ub354\ubd88\uc5b4 ",(0,o.jsx)(t.code,{children:"setInterval\uc758 \ub3d9\uc791 \uc5ec\ubd80"}),"\ub97c \uacb0\uc815\ud558\ub294 ",(0,o.jsx)(t.code,{children:"enabled"})," \uc635\uc158\uc744 \ucd94\uac00\ub85c \ub2e4\ub8f0 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:["\ud83d\udca1 options\uac00 number \ud0c0\uc785\uc758 \uacbd\uc6b0 enabled\ub294 \uae30\ubcf8\uc801\uc73c\ub85c ",(0,o.jsx)(t.code,{children:"true"}),"\uc785\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsxs)(t.p,{children:["interval\uc744 \uc9c1\uc811 \ud578\ub4e4\ub9c1 \ud560 \uc218 \uc788\ub294 ",(0,o.jsx)(t.code,{children:"set"}),", ",(0,o.jsx)(t.code,{children:"reset"}),", ",(0,o.jsx)(t.code,{children:"clear"})," \ud568\uc218\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useInterval/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface IntervalOptions {\n delay: number;\n enabled?: boolean;\n}\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"// \ud568\uc218 \uc624\ubc84\ub85c\ub529\nfunction useInterval(\n callback: () => void,\n options: number\n): {\n set: () => void;\n clear: () => void;\n reset: () => void;\n};\n\nfunction useInterval(\n callback: () => void,\n options: IntervalOptions\n): {\n set: () => void;\n clear: () => void;\n reset: () => void;\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useInterval } from '@modern-kit/react';\n\nconst Example = () => {\n const [number, setNumber] = useState(0);\n\n const { set, clear, reset } = useInterval(\n () => setNumber(number + 1),\n { delay: 1000, enabled: false } // \uc790\ub3d9 \uc2e4\ud589 X\n );\n\n /*\n * useInterval(() => {\n * setNumber(number + 1);\n * }, 1000); // \uc790\ub3d9 \uc2e4\ud589\n */\n\n return (\n
\n

{number}

\n \n \n \n
\n );\n};\n"})}),"\n","\n",(0,o.jsx)(d,{})]})}function p(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>Pe,$I:()=>oe,AE:()=>We,BL:()=>H,DX:()=>N,FT:()=>ct,Fo:()=>et,Hn:()=>st,I5:()=>Ee,JF:()=>Te,K:()=>ae,K$:()=>Je,M0:()=>Re,ML:()=>ne,Mj:()=>ye,Mk:()=>Me,Mo:()=>se,NT:()=>Xe,QV:()=>Ue,Ub:()=>ke,Ut:()=>Se,W7:()=>U,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>_e,Zu:()=>le,_1:()=>Oe,_g:()=>nt,aL:()=>J,aY:()=>Ne,bB:()=>V,d7:()=>B,eG:()=>it,fN:()=>ce,fm:()=>G,gl:()=>P,hN:()=>D,iD:()=>de,iQ:()=>Le,jd:()=>ie,lW:()=>at,oD:()=>K,oo:()=>Ie,pL:()=>q,qi:()=>ue,rN:()=>Fe,tD:()=>je,u8:()=>Q,wY:()=>Be,xV:()=>L,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),s=n(3683),i=n(5086),c=n(7197),l=(n(1604),n(5938));function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function b(){return!m()}function v(e){return f(this,0,void 0,(function*(){if(!b())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const w=e=>f(void 0,0,void 0,(function*(){return v(yield(yield fetch(e)).text())}));function g(e,t){var n;return f(this,0,void 0,(function*(){if(!b())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return w(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const s=yield p(e,h[t]);n(s)}catch(s){console.error(`Failed to load image. message: ${s.mesaage}`),r(s)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let s=0;s{if(e===t||C(e)&&C(t)&&isNaN(e)&&isNaN(t))return!0;if(j(e)&&j(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function k(e,t){return x(e,t,new WeakMap)}function j(e){return"function"==typeof e}function C(e){return"number"==typeof e}function S(e){return!function(e){return Object(e)!==e}(e)}function E(){}function I(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const O=(...e)=>t=>e.forEach((e=>{if(j(e))e(t);else if(null!=e){e.current=t}}));function R(...e){return(0,o.useCallback)(O(...e),e)}const N=o.forwardRef(((e,t)=>{const{children:n}=e,s=a(e,["children"]),i=o.Children.toArray(n),c=i.find(M);if(c){const e=c.props.children,n=i.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(F,Object.assign({},s,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(F,Object.assign({},s,{ref:t,children:n}))}));N.displayName="Slot";const F=o.forwardRef(((e,t)=>{const{children:n}=e,r=a(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],s=t[r];/^on[A-Z]/.test(r)?o&&s?n[r]=(...e)=>{s(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),s):"className"===r&&(n[r]=[o,s].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?O(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));F.displayName="SlotClone";const L=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function M(e){return o.isValidElement(e)&&e.type===L}var $="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const P=d(((e,t)=>{var{ratio:n,style:o,as:i="div",asChild:c=!1}=e,l=a(e,["ratio","style","as","asChild"]);const u=c?N:i,d=Object.assign({aspectRatio:n},o),f=c?l.className:s($,l.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},l))})),T=()=>E,Y=()=>!1,X=()=>!0;function V({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(T,Y,X)?e:t}function A(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const D=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>A()?(0,r.jsx)(r.Fragment,{children:t}):e;function W(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function _(e){const t=W(e);(0,o.useEffect)((()=>()=>t()),[t])}function z(e,t=k){const[n,r]=(0,o.useState)(e),s=W(t);return(0,o.useEffect)((()=>{s(n,e)||r(e)}),[s,n,e]),n}function B(e,t,n){const r=W(e),s=z(n),c=(0,o.useMemo)((()=>(0,i.A)(r,t,s)),[r,t,s]);return _((()=>c.cancel())),c}const J=({children:e,capture:t,wait:n,options:r})=>{const s=o.Children.only(e),i=B(((...e)=>{const n=s?.props;if(n&&j(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(s,{[t]:i})};function H({onIntersectStart:e=E,onIntersectEnd:t=E,enabled:n=!0,calledOnce:r=!1,root:s=null,threshold:i=0,rootMargin:c="0px 0px 0px 0px"}){const l=(0,o.useRef)(0),a=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=W((([n],o)=>{if(!n)return;const s=n.target;n.isIntersecting?(a.current=!0,l.current+=1,e(n)):a.current&&(a.current=!1,l.current+=1,t(n)),r&&l.current>1&&o.unobserve(s)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:i,root:s,rootMargin:c}),u.current.observe(e))}),[n,i,s,c,d])}}const K=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:s,rootMargin:i}=e,c=a(e,["src","threshold","root","rootMargin"]);const{ref:l}=H({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:s,rootMargin:i});return(0,r.jsx)("img",Object.assign({ref:R(t,l)},c))}));K.displayName="LazyImage";const U=(0,o.forwardRef)(((e,t)=>{var{width:n,height:s,fallback:i,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=a(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,b=(0,o.useMemo)((()=>({position:"relative",width:n,height:s})),[n,s]),v=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},l)),[m,u,l]),w=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),g=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:g,style:b,children:[m&&i,(0,r.jsx)(K,Object.assign({ref:t,width:n,height:s,style:v,onLoad:w},f))]})}));U.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const s=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:s?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:s,triggerPosition:i="after",rootMargin:c="150px 0px"})=>{const{ref:l}=H({onIntersectStart:e,root:n,threshold:o,enabled:s,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===i&&(0,r.jsx)("div",{ref:l}),t,"after"===i&&(0,r.jsx)("div",{ref:l})]})},q=d(((e,t)=>{var{children:n,as:s="div",asChild:i=!1}=e,c=a(e,["children","as","asChild"]);const l=i?N:s,{ref:u}=H(c);if(i&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(l,Object.assign({ref:O(t,u)},c,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const s=(0,o.useCallback)(((e,n)=>function(e){return S(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},s(e,t))))})},ee=b()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=W(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),s=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,s,(({target:t})=>{if(!r.current)return;const o=r.current,s=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!s&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:s="div",asChild:i=!1,onPointerDown:c,excludeRefs:l=[]}=e,u=a(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:l}),f=i?N:s;if(i&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:O(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const se=({itemKey:e,items:t=[],separator:n,renderItem:s,separatorInterval:i=1,includeLastSeparator:c=!1})=>{const l=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%i==0),[c,i,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[s(e,t),l(t)&&n]})})},ie=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function le(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function ae(e=!0){const t=j(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!s.current){s.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{s.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),s=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield v(e);return t(n),!0}catch{return t(null),!1}}))),[]),i=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield g(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!b())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),l=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!b())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:s,copyImage:i,readText:c,readContents:l}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],be=me("localStorage"),ve=e=>window.localStorage.getItem(e),we=e=>JSON.stringify(e),ge=e=>(be.subscribe(e),()=>{be.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=j(n)?n():n,s=(0,o.useSyncExternalStore)(ge,(()=>ve(t)),(()=>we(r)));return{state:(0,o.useMemo)((()=>s?I(s):r),[s,r]),setState:(0,o.useCallback)((e=>{try{const n=ve(t),o=n?I(n):r,s=j(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(s)),be.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),be.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>b()?window.matchMedia(e).matches:t??!1;function ke(e,t){const[n,r]=(0,o.useState)(xe(e,t)),s=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",s),n}function je(){return ke("(prefers-color-scheme: dark)")?"dark":"light"}const Ce="color-scheme";function Se({defaultValue:e,key:t=Ce,shouldSetBodyClass:n=!1}={}){const r=je(),s=j(e)?e():e,{state:i,setState:c}=ye({key:t,initialValue:s??r}),l=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),a=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(i),()=>{n&&document.body.classList.remove(i)})),[i,n]),{colorScheme:i,preferredColorScheme:r,setToggleMode:l,setDarkMode:a,setLightMode:u,setPreferredMode:d}}function Ee(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),s=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),i=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:s,reset:i}}function Ie({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,s]=(0,o.useState)(t),i=r0,l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),a=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const i=l(e,t);o&&o({prev:r,next:i}),s(i)}),[n,r,l]),u=(0,o.useCallback)((e=>{a("nextStep",!i,e)}),[i,a]),d=(0,o.useCallback)((e=>{a("prevStep",!c,e)}),[c,a]),f=(0,o.useCallback)(((t,n)=>{const o=j(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void s(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),s(t)}),[r,t]);return{currentStep:r,hasNextStep:i,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Oe(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:s,resetStep:i}=Ie({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:s,resetIndex:i}}function Re(e,t,n={}){const[r,s]=(0,o.useState)(e);return[r,B(s,t,n)]}function Ne(e,t={}){const[n,r]=(0,o.useState)(""),[s,i]=Re("",e,t);return{value:n,debouncedValue:s,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),i(t)}),[i]),onReset:(0,o.useCallback)((()=>{r(""),i("")}),[i])}}function Fe(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Le({onFocus:e=E,onBlur:t=E}={}){const[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(null),i=W((t=>{r(!0),e(t)})),c=W((e=>{r(!1),t(e)})),l=(0,o.useCallback)((()=>{s.current&&(s.current.focus(),r(!0))}),[]);return ne(s,"focus",i),ne(s,"blur",c),{ref:s,isFocus:n,setFocus:l}}function Me({onEnter:e=E,onLeave:t=E}={}){const[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(null),i=W((t=>{r(!0),e(t)})),c=W((e=>{r(!1),t(e)}));return ne(s,"mouseenter",i),ne(s,"mouseleave",c),{ref:s,isHovered:n}}const $e=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function Pe(e,t){const n=(0,o.useRef)(),r=W(e),{delay:s,enabled:i}=$e(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,s)}),[r,s]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(s<0)&&i)return c(),()=>l()}),[l,c,i,s]),{set:c,reset:a,clear:l}}function Te({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),s=W((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];j(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",s),()=>t.removeEventListener("keydown",s)}),[e,s]),r}const Ye={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Xe(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Ye),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:s,clientY:i,pageX:c,pageY:l}=t;let a=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();a=s-t.left,u=i-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:s,clientY:i,pageX:c,pageY:l,elementRelativeX:a,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Ve=()=>navigator.onLine,Ae=()=>!0,De=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function We({onlineAction:e=E,offlineAction:t=E}={}){const n=W((n=>De(n,e,t)));return(0,o.useSyncExternalStore)(n,Ve,Ae)}function _e(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const ze={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function Be(e=E){const[t,n]=(0,o.useState)(ze),r=(0,o.useRef)(null),s=W((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(s);return t.observe(e),()=>{t.unobserve(e)}}),[s]),{ref:r,contentRect:t}}function Je({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),s=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>s())),[e,r,s]),{ref:t,lock:r,unlock:s}}const He=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:s=0,alignY:i="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+s+He(window.innerHeight,r.height,i),left:r.left+window.scrollX+o+He(window.innerWidth,r.width,c)};const l=e.getBoundingClientRect();return{top:r.top-l.top+e.scrollTop+s+He(l.height,r.height,i),left:r.left-l.left+e.scrollLeft+o+He(l.width,r.width,c)}};function Ue(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:s,top:i}=Ke(r,t,n);r.scrollTo({top:i,left:s,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=j(n)?n():n,s=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>s?I(s):r),[s,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?I(n):r,s=j(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(s)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:s}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[i,c]=(0,o.useState)(n),l=(0,o.useCallback)((e=>{c((t=>{const n=j(e)?e(t):e;return r&&s&&function(e,t,n){if(!b())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=j(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,s,n),n}))}),[r,s]),a=(0,o.useCallback)((()=>{r&&s&&function(e,t){if(!b())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,s),c(null)}),[r,s]);return Object.assign({state:i,setState:l,clearState:a},Ie(e))}function nt(e,t,n={}){const r=W(e),s=z(n),i=(0,o.useMemo)((()=>(0,c.A)(r,t,s)),[r,t,s]);return _((()=>i.cancel())),i}const rt=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=W(e),{delay:s,enabled:i}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,s)}),[r,s]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(s<0)&&i)return c(),()=>l()}),[c,l,s,i]),{set:c,reset:a,clear:l}}function st(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function it(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new l.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const lt={width:null,height:null};function at({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?lt:{width:window.innerWidth,height:window.innerHeight})),r=B(n,e),s=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",s),t}function ut(e,t,n){const{delay:r,enabled:s}=rt(t),{set:i,reset:c,clear:l}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!s||c()}),[r,s,c,...n]),{set:i,reset:c,clear:l}}}}]); \ No newline at end of file diff --git a/assets/js/61a35b61.4c79d1bb.js b/assets/js/61a35b61.4c79d1bb.js deleted file mode 100644 index 6daac5330..000000000 --- a/assets/js/61a35b61.4c79d1bb.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[1450],{5576:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>l,default:()=>p,frontMatter:()=>a,metadata:()=>r,toc:()=>f});const r=JSON.parse('{"id":"react/hooks/useMediaQuery","title":"useMediaQuery","description":"\ubbf8\ub514\uc5b4 \ucffc\ub9ac \ubb38\uc790\uc5f4\uc758 \ubd84\uc11d \uacb0\uacfc\ub97c \uc27d\uac8c \ud655\uc778 \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useMediaQuery.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useMediaQuery","permalink":"/modern-kit/docs/react/hooks/useMediaQuery","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useLocalStorage","permalink":"/modern-kit/docs/react/hooks/useLocalStorage"},"next":{"title":"useMergeRefs","permalink":"/modern-kit/docs/react/hooks/useMergeRefs"}}');var o=n(6206),i=n(3267),s=n(4027),c=n(9010);const a={},l="useMediaQuery",u={},d=()=>{const e={div:"div",p:"p",...(0,i.R)()},t=(0,s.Ub)("(min-width: 768px)");return(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.p,{children:"\ube0c\ub77c\uc6b0\uc800 \ub108\ube44\ub97c \uc218\uc815\ud574\ubcf4\uc138\uc694!"}),(0,o.jsx)(e.p,{children:t?"viewport \ub108\ube44\uac00 768px \uc774\uc0c1\uc785\ub2c8\ub2e4.":"viewport \ub108\ube44\uac00 768px \ubbf8\ub9cc\uc785\ub2c8\ub2e4."})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function h(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usemediaquery",children:"useMediaQuery"})}),"\n",(0,o.jsx)(t.p,{children:"\ubbf8\ub514\uc5b4 \ucffc\ub9ac \ubb38\uc790\uc5f4\uc758 \ubd84\uc11d \uacb0\uacfc\ub97c \uc27d\uac8c \ud655\uc778 \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useMediaQuery/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useMediaQuery(mediaQueryString: string, defaultValue?: boolean): boolean\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useMediaQuery } from '@modern-kit/react';\n\nconst Example = () => {\n const isMatch = useMediaQuery('(min-width: 768px)');\n\n return (\n
\n

\n {isMatch\n ? 'viewport \ub108\ube44\uac00 768px \uc774\uc0c1\uc785\ub2c8\ub2e4.'\n : 'viewport \ub108\ube44\uac00 768px \ubbf8\ub9cc\uc785\ub2c8\ub2e4.'}\n

\n
\n );\n};\n"})}),"\n","\n",(0,o.jsx)(c.A,{children:()=>(0,o.jsx)(d,{})})]})}function p(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},9010:(e,t,n)=>{n.d(t,{A:()=>i});n(4382);var r=n(3555),o=n(6206);function i(e){let{children:t,fallback:n}=e;return(0,r.A)()?(0,o.jsx)(o.Fragment,{children:t?.()}):n??null}},4027:(e,t,n)=>{n.d(t,{$$:()=>Pe,$I:()=>oe,AE:()=>We,BL:()=>J,DX:()=>F,FT:()=>ct,Fo:()=>et,Hn:()=>it,I5:()=>je,JF:()=>Te,K:()=>le,K$:()=>Qe,M0:()=>Me,ML:()=>ne,Mj:()=>ye,Mk:()=>Ne,Mo:()=>ie,NT:()=>Ae,QV:()=>Ue,Ub:()=>ke,Ut:()=>Ee,W7:()=>U,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>_e,Zu:()=>ae,_1:()=>Oe,_g:()=>nt,aL:()=>Q,aY:()=>Fe,bB:()=>V,d7:()=>B,eG:()=>st,fN:()=>ce,fm:()=>G,gl:()=>P,hN:()=>D,iD:()=>de,iQ:()=>Le,jd:()=>se,lW:()=>lt,oD:()=>H,oo:()=>Re,pL:()=>q,qi:()=>ue,rN:()=>Ie,tD:()=>Se,u8:()=>Z,wY:()=>Be,xV:()=>L,xh:()=>tt,zy:()=>K});var r=n(6206),o=n(4382),i=n(3683),s=n(5086),c=n(7197),a=(n(1604),n(5938));function l(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function g(){return!m()}function w(e){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const b=e=>f(void 0,0,void 0,(function*(){return w(yield(yield fetch(e)).text())}));function v(e,t){var n;return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return b(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield p(e,h[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||C(e)&&C(t)&&isNaN(e)&&isNaN(t))return!0;if(S(e)&&S(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function k(e,t){return x(e,t,new WeakMap)}function S(e){return"function"==typeof e}function C(e){return"number"==typeof e}function E(e){return!function(e){return Object(e)!==e}(e)}function j(){}function R(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const O=(...e)=>t=>e.forEach((e=>{if(S(e))e(t);else if(null!=e){e.current=t}}));function M(...e){return(0,o.useCallback)(O(...e),e)}const F=o.forwardRef(((e,t)=>{const{children:n}=e,i=l(e,["children"]),s=o.Children.toArray(n),c=s.find(N);if(c){const e=c.props.children,n=s.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(I,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(I,Object.assign({},i,{ref:t,children:n}))}));F.displayName="Slot";const I=o.forwardRef(((e,t)=>{const{children:n}=e,r=l(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?O(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));I.displayName="SlotClone";const L=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function N(e){return o.isValidElement(e)&&e.type===L}var $="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const P=d(((e,t)=>{var{ratio:n,style:o,as:s="div",asChild:c=!1}=e,a=l(e,["ratio","style","as","asChild"]);const u=c?F:s,d=Object.assign({aspectRatio:n},o),f=c?a.className:i($,a.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},a))})),T=()=>j,Y=()=>!1,A=()=>!0;function V({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(T,Y,A)?e:t}function X(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const D=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>X()?(0,r.jsx)(r.Fragment,{children:t}):e;function W(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function _(e){const t=W(e);(0,o.useEffect)((()=>()=>t()),[t])}function z(e,t=k){const[n,r]=(0,o.useState)(e),i=W(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function B(e,t,n){const r=W(e),i=z(n),c=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return _((()=>c.cancel())),c}const Q=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),s=B(((...e)=>{const n=i?.props;if(n&&S(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:s})};function J({onIntersectStart:e=j,onIntersectEnd:t=j,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:s=0,rootMargin:c="0px 0px 0px 0px"}){const a=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=W((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(l.current=!0,a.current+=1,e(n)):l.current&&(l.current=!1,a.current+=1,t(n)),r&&a.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:s,root:i,rootMargin:c}),u.current.observe(e))}),[n,s,i,c,d])}}const H=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:s}=e,c=l(e,["src","threshold","root","rootMargin"]);const{ref:a}=J({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:M(t,a)},c))}));H.displayName="LazyImage";const U=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:s,className:c,style:a,duration:u="0.2s",onLoad:d}=e,f=l(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,g=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),w=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},a)),[m,u,a]),b=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),v=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:g,children:[m&&s,(0,r.jsx)(H,Object.assign({ref:t,width:n,height:i,style:w,onLoad:b},f))]})}));U.displayName="FallbackLazyImage";const K=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},Z=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:s="after",rootMargin:c="150px 0px"})=>{const{ref:a}=J({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:a}),t,"after"===s&&(0,r.jsx)("div",{ref:a})]})},q=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1}=e,c=l(e,["children","as","asChild"]);const a=s?F:i,{ref:u}=J(c);if(s&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(a,Object.assign({ref:O(t,u)},c,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return E(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=g()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=W(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1,onPointerDown:c,excludeRefs:a=[]}=e,u=l(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:a}),f=s?F:i;if(s&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:O(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:s=1,includeLastSeparator:c=!1})=>{const a=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%s==0),[c,s,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),a(t)&&n]})})},se=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function ae(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function le(e=!0){const t=S(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield w(e);return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),a=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:s,readText:c,readContents:a}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],ge=me("localStorage"),we=e=>window.localStorage.getItem(e),be=e=>JSON.stringify(e),ve=e=>(ge.subscribe(e),()=>{ge.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(ve,(()=>we(t)),(()=>be(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=we(t),o=n?R(n):r,i=S(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),ge.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ge.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>g()?window.matchMedia(e).matches:t??!1;function ke(e,t){const[n,r]=(0,o.useState)(xe(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function Se(){return ke("(prefers-color-scheme: dark)")?"dark":"light"}const Ce="color-scheme";function Ee({defaultValue:e,key:t=Ce,shouldSetBodyClass:n=!1}={}){const r=Se(),i=S(e)?e():e,{state:s,setState:c}=ye({key:t,initialValue:i??r}),a=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),l=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(s),()=>{n&&document.body.classList.remove(s)})),[s,n]),{colorScheme:s,preferredColorScheme:r,setToggleMode:a,setDarkMode:l,setLightMode:u,setPreferredMode:d}}function je(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:s}}function Re({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),s=r0,a=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),l=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const s=a(e,t);o&&o({prev:r,next:s}),i(s)}),[n,r,a]),u=(0,o.useCallback)((e=>{l("nextStep",!s,e)}),[s,l]),d=(0,o.useCallback)((e=>{l("prevStep",!c,e)}),[c,l]),f=(0,o.useCallback)(((t,n)=>{const o=S(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:s,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Oe(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=Re({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}function Me(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,B(i,t,n)]}function Fe(e,t={}){const[n,r]=(0,o.useState)(""),[i,s]=Me("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),s(t)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Ie(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Le({onFocus:e=j,onBlur:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=W((t=>{r(!0),e(t)})),c=W((e=>{r(!1),t(e)})),a=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",s),ne(i,"blur",c),{ref:i,isFocus:n,setFocus:a}}function Ne({onEnter:e=j,onLeave:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=W((t=>{r(!0),e(t)})),c=W((e=>{r(!1),t(e)}));return ne(i,"mouseenter",s),ne(i,"mouseleave",c),{ref:i,isHovered:n}}const $e=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function Pe(e,t){const n=(0,o.useRef)(),r=W(e),{delay:i,enabled:s}=$e(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>a()}),[a,c,s,i]),{set:c,reset:l,clear:a}}function Te({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=W((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];S(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const Ye={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Ae(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Ye),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:a}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=i-t.left,u=s-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:a,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Ve=()=>navigator.onLine,Xe=()=>!0,De=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function We({onlineAction:e=j,offlineAction:t=j}={}){const n=W((n=>De(n,e,t)));return(0,o.useSyncExternalStore)(n,Ve,Xe)}function _e(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const ze={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function Be(e=j){const[t,n]=(0,o.useState)(ze),r=(0,o.useRef)(null),i=W((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function Qe({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:s="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+Je(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+Je(window.innerWidth,r.width,c)};const a=e.getBoundingClientRect();return{top:r.top-a.top+e.scrollTop+i+Je(a.height,r.height,s),left:r.left-a.left+e.scrollLeft+o+Je(a.width,r.width,c)}};function Ue(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:s}=He(r,t,n);r.scrollTo({top:s,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ke=me("sessionStorage"),Ze=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ke.subscribe(e),()=>{Ke.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(Ge,(()=>Ze(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Ze(t),o=n?R(n):r,i=S(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ke.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ke.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[s,c]=(0,o.useState)(n),a=(0,o.useCallback)((e=>{c((t=>{const n=S(e)?e(t):e;return r&&i&&function(e,t,n){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=S(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),l=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),c(null)}),[r,i]);return Object.assign({state:s,setState:a,clearState:l},Re(e))}function nt(e,t,n={}){const r=W(e),i=z(n),s=(0,o.useMemo)((()=>(0,c.A)(r,t,i)),[r,t,i]);return _((()=>s.cancel())),s}const rt=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=W(e),{delay:i,enabled:s}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>a()}),[c,a,i,s]),{set:c,reset:l,clear:a}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function st(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new a.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const at={width:null,height:null};function lt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?at:{width:window.innerWidth,height:window.innerHeight})),r=B(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:s,reset:c,clear:a}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||c()}),[r,i,c,...n]),{set:s,reset:c,clear:a}}}}]); \ No newline at end of file diff --git a/assets/js/61a35b61.53efbb03.js b/assets/js/61a35b61.53efbb03.js new file mode 100644 index 000000000..acdfe4d17 --- /dev/null +++ b/assets/js/61a35b61.53efbb03.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[1450],{5576:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>l,assets:()=>d,contentTitle:()=>u,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>f});const r=JSON.parse('{"id":"react/hooks/useMediaQuery","title":"useMediaQuery","description":"\ubbf8\ub514\uc5b4 \ucffc\ub9ac \ubb38\uc790\uc5f4\uc758 \ubd84\uc11d \uacb0\uacfc\ub97c \uc27d\uac8c \ud655\uc778 \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useMediaQuery.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useMediaQuery","permalink":"/modern-kit/docs/react/hooks/useMediaQuery","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useLocalStorage","permalink":"/modern-kit/docs/react/hooks/useLocalStorage"},"next":{"title":"useMergeRefs","permalink":"/modern-kit/docs/react/hooks/useMergeRefs"}}');var o=n(6206),i=n(3267),c=n(9659),a=n(9010);const s={},u="useMediaQuery",d={},l=()=>{const e={div:"div",p:"p",...(0,i.R)()},t=(0,c.U)("(min-width: 768px)");return(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.p,{children:"\ube0c\ub77c\uc6b0\uc800 \ub108\ube44\ub97c \uc218\uc815\ud574\ubcf4\uc138\uc694!"}),(0,o.jsx)(e.p,{children:t?"viewport \ub108\ube44\uac00 768px \uc774\uc0c1\uc785\ub2c8\ub2e4.":"viewport \ub108\ube44\uac00 768px \ubbf8\ub9cc\uc785\ub2c8\ub2e4."})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function p(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usemediaquery",children:"useMediaQuery"})}),"\n",(0,o.jsx)(t.p,{children:"\ubbf8\ub514\uc5b4 \ucffc\ub9ac \ubb38\uc790\uc5f4\uc758 \ubd84\uc11d \uacb0\uacfc\ub97c \uc27d\uac8c \ud655\uc778 \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useMediaQuery/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useMediaQuery(mediaQueryString: string, defaultValue?: boolean): boolean\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useMediaQuery } from '@modern-kit/react';\n\nconst Example = () => {\n const isMatch = useMediaQuery('(min-width: 768px)');\n\n return (\n
\n

\n {isMatch\n ? 'viewport \ub108\ube44\uac00 768px \uc774\uc0c1\uc785\ub2c8\ub2e4.'\n : 'viewport \ub108\ube44\uac00 768px \ubbf8\ub9cc\uc785\ub2c8\ub2e4.'}\n

\n
\n );\n};\n"})}),"\n","\n",(0,o.jsx)(a.A,{children:()=>(0,o.jsx)(l,{})})]})}function h(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},9010:(e,t,n)=>{n.d(t,{A:()=>i});n(4382);var r=n(3555),o=n(6206);function i(e){let{children:t,fallback:n}=e;return(0,r.A)()?(0,o.jsx)(o.Fragment,{children:t?.()}):n??null}},3267:(e,t,n)=>{n.d(t,{R:()=>c,x:()=>a});var r=n(4382);const o={},i=r.createContext(o);function c(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),r.createElement(i.Provider,{value:t},e.children)}},1351:(e,t,n)=>{n.d(t,{M:()=>a});var r=n(6765),o=n(5907),i=n(9340);n(4382);const c=e=>!!e&&(0,i.i5)(e,"current");function a(e,t,n,i){const a=(0,r.p)(n);(0,o.E)((()=>{const n=c(e)?e.current:e;if(n)return n.addEventListener(t,a,i),()=>{n.removeEventListener(t,a,i)}}),[t,e,i,a])}},5907:(e,t,n)=>{n.d(t,{E:()=>i});var r=n(9340),o=n(4382);const i=(0,r.oc)()?o.useLayoutEffect:o.useEffect},9659:(e,t,n)=>{n.d(t,{U:()=>a});var r=n(9340),o=n(1351),i=n(4382);const c=(e,t)=>(0,r.oc)()?window.matchMedia(e).matches:null!=t&&t;function a(e,t){const[n,r]=(0,i.useState)(c(e,t)),a=(0,i.useCallback)((e=>r(e.matches)),[]);return(0,o.M)(window.matchMedia(e),"change",a),n}},6765:(e,t,n)=>{n.d(t,{p:()=>o});var r=n(4382);function o(e){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}},9340:(e,t,n)=>{function r(e,t,n,r){return new(n||(n=Promise))((function(o,i){function c(e){try{s(r.next(e))}catch(t){i(t)}}function a(e){try{s(r.throw(e))}catch(t){i(t)}}function s(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(c,a)}s((r=r.apply(e,t||[])).next())}))}n.d(t,{Et:()=>x,Fr:()=>a,Gp:()=>w,Ol:()=>M,Qd:()=>j,S$:()=>c,Tn:()=>v,Zp:()=>f,dK:()=>u,fl:()=>F,gD:()=>y,i5:()=>h,if:()=>p,l6:()=>k,lQ:()=>E,nS:()=>l,ni:()=>$,oc:()=>s}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,t)=>new Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function c(){return"undefined"==typeof window}function a(){if(c())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function s(){return!c()}function u(e){return r(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const d=e=>r(void 0,void 0,void 0,(function*(){const t=yield fetch(e);return u(yield t.text())}));function l(e,t){var n;return r(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return d(e);if(!("write"in window.navigator.clipboard))return d(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return d(e);const c=yield function(e,t="png"){return new Promise(((n,c)=>{const a=new Image;a.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=a.width,e.height=a.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(a,0,0);const c=yield i(e,o[t]);n(c)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),c(r)}})),a.onerror=()=>{c(new Error("Failed to load image"))},a.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[c.type]:c})]),c}catch(c){throw console.error(`Failed to copy to clipboard. message: ${c.message}`),c}}))}function f(){return r(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(){return r(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function h(e,t){return Object.prototype.hasOwnProperty.call(e,t)}const m=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t)return!0;if(x(e)&&x(t)&&isNaN(e)&&isNaN(t))return!0;if(v(e)&&v(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return m(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!g(o,t.get(r),n))return!1;return!0}return m(e,t,n)};function w(e,t){return g(e,t,new WeakMap)}function v(e){return"function"==typeof e}function y(e){return null==e}function x(e){return"number"==typeof e}function b(e){return!function(e){return Object(e)!==e}(e)}function j(e){return b(e)&&"[object Object]"===Object.prototype.toString.call(e)}function k(e){return e===window}function E(){}function M(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}function C(e){return Object.keys(e)}const S={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};C(S);function F(e,t){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}function $(e,t,n){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=v(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/63f47a7c.23b9a51e.js b/assets/js/63f47a7c.23b9a51e.js new file mode 100644 index 000000000..09d67eebd --- /dev/null +++ b/assets/js/63f47a7c.23b9a51e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[6558],{2932:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>f,assets:()=>l,contentTitle:()=>d,default:()=>v,frontMatter:()=>u,metadata:()=>r,toc:()=>p});const r=JSON.parse('{"id":"react/hooks/useEventListener","title":"useEventListener","description":"\uc9c0\uc815\ub41c \uc694\uc18c\uc5d0 \uc774\ubca4\ud2b8 \ub9ac\uc2a4\ub108\ub97c \ucd94\uac00\ud558\uace0, \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc5b8\ub9c8\uc6b4\ud2b8\ub420 \ub54c \uc790\ub3d9\uc73c\ub85c \uc81c\uac70\ud569\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useEventListener.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useEventListener","permalink":"/modern-kit/docs/react/hooks/useEventListener","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useDocumentTitle","permalink":"/modern-kit/docs/react/hooks/useDocumentTitle"},"next":{"title":"useFileReader","permalink":"/modern-kit/docs/react/hooks/useFileReader"}}');var o=t(6206),i=t(3267),s=t(1351),c=t(4382),a=t(9010);const u={},d="useEventListener",l={},f=()=>{const e={button:"button",div:"div",p:"p",...(0,i.R)()},[n,t]=(0,c.useState)(0),r=(0,c.useRef)(null);return(0,s.M)(document,"click",(()=>{console.log(n)})),(0,s.M)(r,"click",(()=>{t(n+1)})),(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.p,{children:["number: ",n]}),(0,o.jsx)(e.button,{ref:r,children:"\uc22b\uc790 \ub354\ud558\uae30"})]})},p=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function m(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"useeventlistener",children:"useEventListener"})}),"\n",(0,o.jsxs)(n.p,{children:["\uc9c0\uc815\ub41c \uc694\uc18c\uc5d0 ",(0,o.jsx)(n.code,{children:"\uc774\ubca4\ud2b8 \ub9ac\uc2a4\ub108\ub97c \ucd94\uac00"}),"\ud558\uace0, \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc5b8\ub9c8\uc6b4\ud2b8\ub420 \ub54c ",(0,o.jsx)(n.code,{children:"\uc790\ub3d9\uc73c\ub85c \uc81c\uac70"}),"\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useEventListener/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"type EventListenerAvailableElement =\n | Window\n | Document\n | HTMLElement\n | SVGElement\n | MediaQueryList;\n\ntype TargetElement =\n | T\n | RefObject;\n"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"// Window Event based useEventListener interface\nfunction useEventListener(\n element: Window,\n type: K,\n listener: (event: WindowEventMap[K]) => void,\n options?: boolean | AddEventListenerOptions\n): void;\n\n// Document Event based useEventListener interface\nfunction useEventListener(\n element: Document,\n type: K,\n listener: (event: DocumentEventMap[K]) => void,\n options?: boolean | AddEventListenerOptions\n): void;\n\n// MediaQueryList Event based useEventListener interface\nfunction useEventListener(\n element: MediaQueryList,\n type: K,\n listener: (event: MediaQueryListEventMap[K]) => void,\n options?: boolean | AddEventListenerOptions\n): void;\n\n// Element Event based useEventListener interface\nfunction useEventListener<\n K extends keyof HTMLElementEventMap,\n T extends HTMLElement\n>(\n element: TargetElement,\n type: K,\n listener: (event: HTMLElementEventMap[K]) => void,\n options?: boolean | AddEventListenerOptions\n): void;\n\n// SVGElement Event based useEventListener interface\nfunction useEventListener<\n K extends keyof SVGElementEventMap,\n T extends SVGElement\n>(\n element: TargetElement,\n type: K,\n listener: (event: SVGElementEventMap[K]) => void,\n options?: boolean | AddEventListenerOptions\n): void;\n"})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useState, useRef } from 'react';\nimport { useEventListener } from '@modern-kit/react';\n\nconst Example = () => {\n const [number, setNumber] = useState(0)\n const buttonRef = useRef(null);\n\n useEventListener(document, 'click', () => {\n console.log(number);\n })\n\n useEventListener(buttonRef, 'click', () => {\n setNumber(number + 1);\n })\n\n return (\n
\n

number: {number}

\n \n
\n );\n};\n"})}),"\n",(0,o.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(a.A,{children:()=>(0,o.jsx)(f,{})})]})}function v(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(m,{...e})}):m(e)}},9010:(e,n,t)=>{t.d(n,{A:()=>i});t(4382);var r=t(3555),o=t(6206);function i(e){let{children:n,fallback:t}=e;return(0,r.A)()?(0,o.jsx)(o.Fragment,{children:n?.()}):t??null}},3267:(e,n,t)=>{t.d(n,{R:()=>s,x:()=>c});var r=t(4382);const o={},i=r.createContext(o);function s(e){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),r.createElement(i.Provider,{value:n},e.children)}},1351:(e,n,t)=>{t.d(n,{M:()=>c});var r=t(6765),o=t(5907),i=t(9340);t(4382);const s=e=>!!e&&(0,i.i5)(e,"current");function c(e,n,t,i){const c=(0,r.p)(t);(0,o.E)((()=>{const t=s(e)?e.current:e;if(t)return t.addEventListener(n,c,i),()=>{t.removeEventListener(n,c,i)}}),[n,e,i,c])}},5907:(e,n,t)=>{t.d(n,{E:()=>i});var r=t(9340),o=t(4382);const i=(0,r.oc)()?o.useLayoutEffect:o.useEffect},6765:(e,n,t)=>{t.d(n,{p:()=>o});var r=t(4382);function o(e){const n=(0,r.useRef)(e);return n.current=e,(0,r.useCallback)(((...e)=>n.current(...e)),[])}},9340:(e,n,t)=>{function r(e,n,t,r){return new(t||(t=Promise))((function(o,i){function s(e){try{a(r.next(e))}catch(n){i(n)}}function c(e){try{a(r.throw(e))}catch(n){i(n)}}function a(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(s,c)}a((r=r.apply(e,n||[])).next())}))}t.d(n,{Et:()=>w,Fr:()=>c,Gp:()=>E,Ol:()=>L,Qd:()=>x,S$:()=>s,Tn:()=>b,Zp:()=>f,dK:()=>u,fl:()=>S,gD:()=>g,i5:()=>m,if:()=>p,l6:()=>j,lQ:()=>k,nS:()=>l,ni:()=>O,oc:()=>a}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,n)=>new Promise(((t,r)=>{e.toBlob((e=>{e?t(e):r(new Error(`Failed to create blob with format ${n}`))}),n)}));function s(){return"undefined"==typeof window}function c(){if(s())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function a(){return!s()}function u(e){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const d=e=>r(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return u(yield n.text())}));function l(e,n){var t;return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return d(e);if(!("write"in window.navigator.clipboard))return d(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return d(e);const s=yield function(e,n="png"){return new Promise(((t,s)=>{const c=new Image;c.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=c.width,e.height=c.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(c,0,0);const s=yield i(e,o[n]);t(s)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),s(r)}})),c.onerror=()=>{s(new Error("Failed to load image"))},c.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[s.type]:s})]),s}catch(s){throw console.error(`Failed to copy to clipboard. message: ${s.message}`),s}}))}function f(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function m(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const v=(e,n,t)=>{const r=Object.keys(e),o=Object.keys(n);if(r.length!==o.length)return!1;for(let i=0;i{if(e===n)return!0;if(w(e)&&w(n)&&isNaN(e)&&isNaN(n))return!0;if(b(e)&&b(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const r=[...e],o=[...n];return v(r,o,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[r,o]of e)if(!n.has(r)||!h(o,n.get(r),t))return!1;return!0}return v(e,n,t)};function E(e,n){return h(e,n,new WeakMap)}function b(e){return"function"==typeof e}function g(e){return null==e}function w(e){return"number"==typeof e}function y(e){return!function(e){return Object(e)!==e}(e)}function x(e){return y(e)&&"[object Object]"===Object.prototype.toString.call(e)}function j(e){return e===window}function k(){}function L(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function M(e){return Object.keys(e)}const T={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};M(T);function S(e,n){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function O(e,n,t){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=b(t)?t():t;r.setItem(n,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${n}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/63f47a7c.f5e54242.js b/assets/js/63f47a7c.f5e54242.js deleted file mode 100644 index cd8de8897..000000000 --- a/assets/js/63f47a7c.f5e54242.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[6558],{2932:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>f,assets:()=>d,contentTitle:()=>u,default:()=>m,frontMatter:()=>a,metadata:()=>r,toc:()=>h});const r=JSON.parse('{"id":"react/hooks/useEventListener","title":"useEventListener","description":"\uc9c0\uc815\ub41c \uc694\uc18c\uc5d0 \uc774\ubca4\ud2b8 \ub9ac\uc2a4\ub108\ub97c \ucd94\uac00\ud558\uace0, \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc5b8\ub9c8\uc6b4\ud2b8\ub420 \ub54c \uc790\ub3d9\uc73c\ub85c \uc81c\uac70\ud569\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useEventListener.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useEventListener","permalink":"/modern-kit/docs/react/hooks/useEventListener","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useDocumentTitle","permalink":"/modern-kit/docs/react/hooks/useDocumentTitle"},"next":{"title":"useFileReader","permalink":"/modern-kit/docs/react/hooks/useFileReader"}}');var o=n(6206),i=n(3267),s=n(4027),c=n(4382),l=n(9010);const a={},u="useEventListener",d={},f=()=>{const e={button:"button",div:"div",p:"p",...(0,i.R)()},[t,n]=(0,c.useState)(0),r=(0,c.useRef)(null);return(0,s.ML)(document,"click",(()=>{console.log(t)})),(0,s.ML)(r,"click",(()=>{n(t+1)})),(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.p,{children:["number: ",t]}),(0,o.jsx)(e.button,{ref:r,children:"\uc22b\uc790 \ub354\ud558\uae30"})]})},h=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function p(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"useeventlistener",children:"useEventListener"})}),"\n",(0,o.jsxs)(t.p,{children:["\uc9c0\uc815\ub41c \uc694\uc18c\uc5d0 ",(0,o.jsx)(t.code,{children:"\uc774\ubca4\ud2b8 \ub9ac\uc2a4\ub108\ub97c \ucd94\uac00"}),"\ud558\uace0, \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc5b8\ub9c8\uc6b4\ud2b8\ub420 \ub54c ",(0,o.jsx)(t.code,{children:"\uc790\ub3d9\uc73c\ub85c \uc81c\uac70"}),"\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useEventListener/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"type EventListenerAvailableElement =\n | Window\n | Document\n | HTMLElement\n | SVGElement\n | MediaQueryList;\n\ntype TargetElement =\n | T\n | RefObject;\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"// Window Event based useEventListener interface\nfunction useEventListener(\n element: Window,\n type: K,\n listener: (event: WindowEventMap[K]) => void,\n options?: boolean | AddEventListenerOptions\n): void;\n\n// Document Event based useEventListener interface\nfunction useEventListener(\n element: Document,\n type: K,\n listener: (event: DocumentEventMap[K]) => void,\n options?: boolean | AddEventListenerOptions\n): void;\n\n// MediaQueryList Event based useEventListener interface\nfunction useEventListener(\n element: MediaQueryList,\n type: K,\n listener: (event: MediaQueryListEventMap[K]) => void,\n options?: boolean | AddEventListenerOptions\n): void;\n\n// Element Event based useEventListener interface\nfunction useEventListener<\n K extends keyof HTMLElementEventMap,\n T extends HTMLElement\n>(\n element: TargetElement,\n type: K,\n listener: (event: HTMLElementEventMap[K]) => void,\n options?: boolean | AddEventListenerOptions\n): void;\n\n// SVGElement Event based useEventListener interface\nfunction useEventListener<\n K extends keyof SVGElementEventMap,\n T extends SVGElement\n>(\n element: TargetElement,\n type: K,\n listener: (event: SVGElementEventMap[K]) => void,\n options?: boolean | AddEventListenerOptions\n): void;\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useState, useRef } from 'react';\nimport { useEventListener } from '@modern-kit/react';\n\nconst Example = () => {\n const [number, setNumber] = useState(0)\n const buttonRef = useRef(null);\n\n useEventListener(document, 'click', () => {\n console.log(number);\n })\n\n useEventListener(buttonRef, 'click', () => {\n setNumber(number + 1);\n })\n\n return (\n
\n

number: {number}

\n \n
\n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(l.A,{children:()=>(0,o.jsx)(f,{})})]})}function m(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},9010:(e,t,n)=>{n.d(t,{A:()=>i});n(4382);var r=n(3555),o=n(6206);function i(e){let{children:t,fallback:n}=e;return(0,r.A)()?(0,o.jsx)(o.Fragment,{children:t?.()}):n??null}},4027:(e,t,n)=>{n.d(t,{$$:()=>$e,$I:()=>oe,AE:()=>We,BL:()=>H,DX:()=>M,FT:()=>ct,Fo:()=>et,Hn:()=>it,I5:()=>je,JF:()=>Pe,K:()=>ae,K$:()=>ze,M0:()=>Oe,ML:()=>ne,Mj:()=>ye,Mk:()=>Ne,Mo:()=>ie,NT:()=>De,QV:()=>Qe,Ub:()=>xe,Ut:()=>Ce,W7:()=>Q,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>Xe,Zu:()=>le,_1:()=>Re,_g:()=>nt,aL:()=>z,aY:()=>Me,bB:()=>V,d7:()=>_,eG:()=>st,fN:()=>ce,fm:()=>q,gl:()=>$,hN:()=>Y,iD:()=>de,iQ:()=>Fe,jd:()=>se,lW:()=>at,oD:()=>J,oo:()=>Le,pL:()=>Z,qi:()=>ue,rN:()=>Te,tD:()=>ke,u8:()=>U,wY:()=>_e,xV:()=>F,xh:()=>tt,zy:()=>G});var r=n(6206),o=n(4382),i=n(3683),s=n(5086),c=n(7197),l=(n(1604),n(5938));function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function v(){return!m()}function g(e){return f(this,0,void 0,(function*(){if(!v())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const b=e=>f(void 0,0,void 0,(function*(){return g(yield(yield fetch(e)).text())}));function w(e,t){var n;return f(this,0,void 0,(function*(){if(!v())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return b(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield p(e,h[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||S(e)&&S(t)&&isNaN(e)&&isNaN(t))return!0;if(k(e)&&k(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!E(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function x(e,t){return E(e,t,new WeakMap)}function k(e){return"function"==typeof e}function S(e){return"number"==typeof e}function C(e){return!function(e){return Object(e)!==e}(e)}function j(){}function L(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const R=(...e)=>t=>e.forEach((e=>{if(k(e))e(t);else if(null!=e){e.current=t}}));function O(...e){return(0,o.useCallback)(R(...e),e)}const M=o.forwardRef(((e,t)=>{const{children:n}=e,i=a(e,["children"]),s=o.Children.toArray(n),c=s.find(N);if(c){const e=c.props.children,n=s.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(T,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(T,Object.assign({},i,{ref:t,children:n}))}));M.displayName="Slot";const T=o.forwardRef(((e,t)=>{const{children:n}=e,r=a(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?R(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));T.displayName="SlotClone";const F=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function N(e){return o.isValidElement(e)&&e.type===F}var I="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const $=d(((e,t)=>{var{ratio:n,style:o,as:s="div",asChild:c=!1}=e,l=a(e,["ratio","style","as","asChild"]);const u=c?M:s,d=Object.assign({aspectRatio:n},o),f=c?l.className:i(I,l.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},l))})),P=()=>j,A=()=>!1,D=()=>!0;function V({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(P,A,D)?e:t}function K(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const Y=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>K()?(0,r.jsx)(r.Fragment,{children:t}):e;function W(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function X(e){const t=W(e);(0,o.useEffect)((()=>()=>t()),[t])}function B(e,t=x){const[n,r]=(0,o.useState)(e),i=W(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function _(e,t,n){const r=W(e),i=B(n),c=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return X((()=>c.cancel())),c}const z=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),s=_(((...e)=>{const n=i?.props;if(n&&k(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:s})};function H({onIntersectStart:e=j,onIntersectEnd:t=j,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:s=0,rootMargin:c="0px 0px 0px 0px"}){const l=(0,o.useRef)(0),a=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=W((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(a.current=!0,l.current+=1,e(n)):a.current&&(a.current=!1,l.current+=1,t(n)),r&&l.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:s,root:i,rootMargin:c}),u.current.observe(e))}),[n,s,i,c,d])}}const J=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:s}=e,c=a(e,["src","threshold","root","rootMargin"]);const{ref:l}=H({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:O(t,l)},c))}));J.displayName="LazyImage";const Q=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=a(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,v=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),g=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},l)),[m,u,l]),b=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),w=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:w,style:v,children:[m&&s,(0,r.jsx)(J,Object.assign({ref:t,width:n,height:i,style:g,onLoad:b},f))]})}));Q.displayName="FallbackLazyImage";const G=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},U=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:s="after",rootMargin:c="150px 0px"})=>{const{ref:l}=H({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:l}),t,"after"===s&&(0,r.jsx)("div",{ref:l})]})},Z=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1}=e,c=a(e,["children","as","asChild"]);const l=s?M:i,{ref:u}=H(c);if(s&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(l,Object.assign({ref:R(t,u)},c,{children:n}))})),q=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return C(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=v()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=W(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1,onPointerDown:c,excludeRefs:l=[]}=e,u=a(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:l}),f=s?M:i;if(s&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:R(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:s=1,includeLastSeparator:c=!1})=>{const l=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%s==0),[c,s,t.length]);return(0,r.jsx)(q,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),l(t)&&n]})})},se=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function le(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function ae(e=!0){const t=k(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield g(e);return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield w(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!v())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),l=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!v())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:s,readText:c,readContents:l}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],ve=me("localStorage"),ge=e=>window.localStorage.getItem(e),be=e=>JSON.stringify(e),we=e=>(ve.subscribe(e),()=>{ve.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=k(n)?n():n,i=(0,o.useSyncExternalStore)(we,(()=>ge(t)),(()=>be(r)));return{state:(0,o.useMemo)((()=>i?L(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=ge(t),o=n?L(n):r,i=k(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),ve.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ve.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const Ee=(e,t)=>v()?window.matchMedia(e).matches:t??!1;function xe(e,t){const[n,r]=(0,o.useState)(Ee(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function ke(){return xe("(prefers-color-scheme: dark)")?"dark":"light"}const Se="color-scheme";function Ce({defaultValue:e,key:t=Se,shouldSetBodyClass:n=!1}={}){const r=ke(),i=k(e)?e():e,{state:s,setState:c}=ye({key:t,initialValue:i??r}),l=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),a=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(s),()=>{n&&document.body.classList.remove(s)})),[s,n]),{colorScheme:s,preferredColorScheme:r,setToggleMode:l,setDarkMode:a,setLightMode:u,setPreferredMode:d}}function je(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:s}}function Le({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),s=r0,l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),a=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const s=l(e,t);o&&o({prev:r,next:s}),i(s)}),[n,r,l]),u=(0,o.useCallback)((e=>{a("nextStep",!s,e)}),[s,a]),d=(0,o.useCallback)((e=>{a("prevStep",!c,e)}),[c,a]),f=(0,o.useCallback)(((t,n)=>{const o=k(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:s,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Re(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=Le({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}function Oe(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,_(i,t,n)]}function Me(e,t={}){const[n,r]=(0,o.useState)(""),[i,s]=Oe("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),s(t)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Te(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Fe({onFocus:e=j,onBlur:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=W((t=>{r(!0),e(t)})),c=W((e=>{r(!1),t(e)})),l=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",s),ne(i,"blur",c),{ref:i,isFocus:n,setFocus:l}}function Ne({onEnter:e=j,onLeave:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=W((t=>{r(!0),e(t)})),c=W((e=>{r(!1),t(e)}));return ne(i,"mouseenter",s),ne(i,"mouseleave",c),{ref:i,isHovered:n}}const Ie=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function $e(e,t){const n=(0,o.useRef)(),r=W(e),{delay:i,enabled:s}=Ie(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>l()}),[l,c,s,i]),{set:c,reset:a,clear:l}}function Pe({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=W((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];k(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const Ae={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function De(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Ae),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l}=t;let a=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();a=i-t.left,u=s-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l,elementRelativeX:a,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Ve=()=>navigator.onLine,Ke=()=>!0,Ye=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function We({onlineAction:e=j,offlineAction:t=j}={}){const n=W((n=>Ye(n,e,t)));return(0,o.useSyncExternalStore)(n,Ve,Ke)}function Xe(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const Be={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function _e(e=j){const[t,n]=(0,o.useState)(Be),r=(0,o.useRef)(null),i=W((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function ze({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const He=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Je=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:s="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+He(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+He(window.innerWidth,r.width,c)};const l=e.getBoundingClientRect();return{top:r.top-l.top+e.scrollTop+i+He(l.height,r.height,s),left:r.left-l.left+e.scrollLeft+o+He(l.width,r.width,c)}};function Qe(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:s}=Je(r,t,n);r.scrollTo({top:s,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ge=me("sessionStorage"),Ue=e=>window.sessionStorage.getItem(e),Ze=e=>JSON.stringify(e),qe=e=>(Ge.subscribe(e),()=>{Ge.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=k(n)?n():n,i=(0,o.useSyncExternalStore)(qe,(()=>Ue(t)),(()=>Ze(r)));return{state:(0,o.useMemo)((()=>i?L(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Ue(t),o=n?L(n):r,i=k(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ge.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ge.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[s,c]=(0,o.useState)(n),l=(0,o.useCallback)((e=>{c((t=>{const n=k(e)?e(t):e;return r&&i&&function(e,t,n){if(!v())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=k(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),a=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!v())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),c(null)}),[r,i]);return Object.assign({state:s,setState:l,clearState:a},Le(e))}function nt(e,t,n={}){const r=W(e),i=B(n),s=(0,o.useMemo)((()=>(0,c.A)(r,t,i)),[r,t,i]);return X((()=>s.cancel())),s}const rt=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=W(e),{delay:i,enabled:s}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>l()}),[c,l,i,s]),{set:c,reset:a,clear:l}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function st(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new l.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const lt={width:null,height:null};function at({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?lt:{width:window.innerWidth,height:window.innerHeight})),r=_(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:s,reset:c,clear:l}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||c()}),[r,i,c,...n]),{set:s,reset:c,clear:l}}}}]); \ No newline at end of file diff --git a/assets/js/67c089fb.04be0bd6.js b/assets/js/67c089fb.04be0bd6.js deleted file mode 100644 index 7c18dce5b..000000000 --- a/assets/js/67c089fb.04be0bd6.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[4146],{5271:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>l,default:()=>p,frontMatter:()=>a,metadata:()=>r,toc:()=>f});const r=JSON.parse('{"id":"react/hooks/useDebounce","title":"useDebounce","description":"debounce\ub97c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useDebounce.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useDebounce","permalink":"/modern-kit/docs/react/hooks/useDebounce","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useCycleList","permalink":"/modern-kit/docs/react/hooks/useCycleList"},"next":{"title":"useDebouncedInputValue","permalink":"/modern-kit/docs/react/hooks/useDebouncedInputValue"}}');var o=n(6206),s=n(3267),i=n(4382),c=n(4027);const a={},l="useDebounce",u={},d=()=>{const e={button:"button",div:"div",p:"p",...(0,s.R)()},[t,n]=(0,i.useState)(1),[r,a]=(0,i.useState)(1),l=(0,c.d7)((()=>{a(r+1)}),1e3);return(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.div,{style:{display:"flex"},children:[(0,o.jsx)(e.button,{onClick:()=>{n(t+1)},children:"\ubc84\ud2bc \ud074\ub9ad"}),(0,o.jsx)(e.div,{style:{width:"50px"}}),(0,o.jsx)(e.button,{onClick:l,children:"debounce \ubc84\ud2bc \ud074\ub9ad"})]}),(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.p,{children:["count: ",t]}),(0,o.jsxs)(e.p,{children:["debouncedCount: ",r]})]})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function h(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usedebounce",children:"useDebounce"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"debounce"}),"\ub97c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useDebounce/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"// lodash-es DebounceSettings\n// https://www.geeksforgeeks.org/lodash-_-debounce-method/\ninterface DebounceSettings {\n leading?: boolean | undefined;\n maxWait?: number | undefined;\n trailing?: boolean | undefined;\n}\n\ntype DebounceParameters = Parameters;\ntype DebounceReturnType = ReturnType<\n typeof debounce\n>;\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useDebounce any>(\n callback: T,\n wait: DebounceParameters[1], // number\n options?: DebounceParameters[2] // DebounceSettings\n): DebounceReturnType;\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useState } from 'react';\nimport { useDebounce } from '@modern-kit/react';\n\nconst Example = () => {\n const [count, setCount] = useState(1);\n const [debouncedCount, setDebouncedCount] = useState(1);\n\n const countUp = () => {\n setCount(count + 1);\n };\n\n const debouncedCountUp = useDebounce(() => {\n setDebouncedCount(debouncedCount + 1);\n }, 1000);\n\n return (\n
\n
\n \n
\n \n
\n
\n

count: {count}

\n

debouncedCount: {debouncedCount}

\n
\n
\n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(d,{})]})}function p(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>Te,$I:()=>oe,AE:()=>We,BL:()=>J,DX:()=>I,FT:()=>ct,Fo:()=>et,Hn:()=>st,I5:()=>je,JF:()=>Me,K:()=>le,K$:()=>Ue,M0:()=>De,ML:()=>ne,Mj:()=>ye,Mk:()=>Ne,Mo:()=>se,NT:()=>Ye,QV:()=>Ke,Ub:()=>ke,Ut:()=>Ee,W7:()=>K,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>_e,Zu:()=>ae,_1:()=>Oe,_g:()=>nt,aL:()=>U,aY:()=>Ie,bB:()=>V,d7:()=>B,eG:()=>it,fN:()=>ce,fm:()=>G,gl:()=>T,hN:()=>A,iD:()=>de,iQ:()=>Le,jd:()=>ie,lW:()=>lt,oD:()=>H,oo:()=>Re,pL:()=>q,qi:()=>ue,rN:()=>Fe,tD:()=>Ce,u8:()=>Q,wY:()=>Be,xV:()=>L,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),s=n(3683),i=n(5086),c=n(7197),a=(n(1604),n(5938));function l(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function b(){return typeof window>"u"}function m(){return!b()}function g(e){return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const w=e=>f(void 0,0,void 0,(function*(){return g(yield(yield fetch(e)).text())}));function v(e,t){var n;return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return w(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const s=yield p(e,h[t]);n(s)}catch(s){console.error(`Failed to load image. message: ${s.mesaage}`),r(s)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let s=0;s{if(e===t||S(e)&&S(t)&&isNaN(e)&&isNaN(t))return!0;if(C(e)&&C(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function k(e,t){return x(e,t,new WeakMap)}function C(e){return"function"==typeof e}function S(e){return"number"==typeof e}function E(e){return!function(e){return Object(e)!==e}(e)}function j(){}function R(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const O=(...e)=>t=>e.forEach((e=>{if(C(e))e(t);else if(null!=e){e.current=t}}));function D(...e){return(0,o.useCallback)(O(...e),e)}const I=o.forwardRef(((e,t)=>{const{children:n}=e,s=l(e,["children"]),i=o.Children.toArray(n),c=i.find(N);if(c){const e=c.props.children,n=i.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(F,Object.assign({},s,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(F,Object.assign({},s,{ref:t,children:n}))}));I.displayName="Slot";const F=o.forwardRef(((e,t)=>{const{children:n}=e,r=l(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],s=t[r];/^on[A-Z]/.test(r)?o&&s?n[r]=(...e)=>{s(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),s):"className"===r&&(n[r]=[o,s].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?O(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));F.displayName="SlotClone";const L=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function N(e){return o.isValidElement(e)&&e.type===L}var P="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const T=d(((e,t)=>{var{ratio:n,style:o,as:i="div",asChild:c=!1}=e,a=l(e,["ratio","style","as","asChild"]);const u=c?I:i,d=Object.assign({aspectRatio:n},o),f=c?a.className:s(P,a.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},a))})),M=()=>j,$=()=>!1,Y=()=>!0;function V({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(M,$,Y)?e:t}function X(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const A=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>X()?(0,r.jsx)(r.Fragment,{children:t}):e;function W(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function _(e){const t=W(e);(0,o.useEffect)((()=>()=>t()),[t])}function z(e,t=k){const[n,r]=(0,o.useState)(e),s=W(t);return(0,o.useEffect)((()=>{s(n,e)||r(e)}),[s,n,e]),n}function B(e,t,n){const r=W(e),s=z(n),c=(0,o.useMemo)((()=>(0,i.A)(r,t,s)),[r,t,s]);return _((()=>c.cancel())),c}const U=({children:e,capture:t,wait:n,options:r})=>{const s=o.Children.only(e),i=B(((...e)=>{const n=s?.props;if(n&&C(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(s,{[t]:i})};function J({onIntersectStart:e=j,onIntersectEnd:t=j,enabled:n=!0,calledOnce:r=!1,root:s=null,threshold:i=0,rootMargin:c="0px 0px 0px 0px"}){const a=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=W((([n],o)=>{if(!n)return;const s=n.target;n.isIntersecting?(l.current=!0,a.current+=1,e(n)):l.current&&(l.current=!1,a.current+=1,t(n)),r&&a.current>1&&o.unobserve(s)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:i,root:s,rootMargin:c}),u.current.observe(e))}),[n,i,s,c,d])}}const H=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:s,rootMargin:i}=e,c=l(e,["src","threshold","root","rootMargin"]);const{ref:a}=J({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:s,rootMargin:i});return(0,r.jsx)("img",Object.assign({ref:D(t,a)},c))}));H.displayName="LazyImage";const K=(0,o.forwardRef)(((e,t)=>{var{width:n,height:s,fallback:i,className:c,style:a,duration:u="0.2s",onLoad:d}=e,f=l(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),b=!h,m=(0,o.useMemo)((()=>({position:"relative",width:n,height:s})),[n,s]),g=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:b?0:1,transition:`opacity ${u}`},a)),[b,u,a]),w=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),v=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:m,children:[b&&i,(0,r.jsx)(H,Object.assign({ref:t,width:n,height:s,style:g,onLoad:w},f))]})}));K.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const s=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:s?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:s,triggerPosition:i="after",rootMargin:c="150px 0px"})=>{const{ref:a}=J({onIntersectStart:e,root:n,threshold:o,enabled:s,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===i&&(0,r.jsx)("div",{ref:a}),t,"after"===i&&(0,r.jsx)("div",{ref:a})]})},q=d(((e,t)=>{var{children:n,as:s="div",asChild:i=!1}=e,c=l(e,["children","as","asChild"]);const a=i?I:s,{ref:u}=J(c);if(i&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(a,Object.assign({ref:O(t,u)},c,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const s=(0,o.useCallback)(((e,n)=>function(e){return E(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},s(e,t))))})},ee=m()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=W(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),s=(0,o.useMemo)((()=>function(){if(b())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,s,(({target:t})=>{if(!r.current)return;const o=r.current,s=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!s&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:s="div",asChild:i=!1,onPointerDown:c,excludeRefs:a=[]}=e,u=l(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:a}),f=i?I:s;if(i&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:O(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const se=({itemKey:e,items:t=[],separator:n,renderItem:s,separatorInterval:i=1,includeLastSeparator:c=!1})=>{const a=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%i==0),[c,i,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[s(e,t),a(t)&&n]})})},ie=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function ae(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function le(e=!0){const t=C(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!s.current){s.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{s.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),s=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield g(e);return t(n),!0}catch{return t(null),!1}}))),[]),i=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),a=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:s,copyImage:i,readText:c,readContents:a}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},be=e=>pe[e],me=be("localStorage"),ge=e=>window.localStorage.getItem(e),we=e=>JSON.stringify(e),ve=e=>(me.subscribe(e),()=>{me.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=C(n)?n():n,s=(0,o.useSyncExternalStore)(ve,(()=>ge(t)),(()=>we(r)));return{state:(0,o.useMemo)((()=>s?R(s):r),[s,r]),setState:(0,o.useCallback)((e=>{try{const n=ge(t),o=n?R(n):r,s=C(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(s)),me.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),me.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>m()?window.matchMedia(e).matches:t??!1;function ke(e,t){const[n,r]=(0,o.useState)(xe(e,t)),s=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",s),n}function Ce(){return ke("(prefers-color-scheme: dark)")?"dark":"light"}const Se="color-scheme";function Ee({defaultValue:e,key:t=Se,shouldSetBodyClass:n=!1}={}){const r=Ce(),s=C(e)?e():e,{state:i,setState:c}=ye({key:t,initialValue:s??r}),a=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),l=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(i),()=>{n&&document.body.classList.remove(i)})),[i,n]),{colorScheme:i,preferredColorScheme:r,setToggleMode:a,setDarkMode:l,setLightMode:u,setPreferredMode:d}}function je(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),s=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),i=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:s,reset:i}}function Re({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,s]=(0,o.useState)(t),i=r0,a=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),l=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const i=a(e,t);o&&o({prev:r,next:i}),s(i)}),[n,r,a]),u=(0,o.useCallback)((e=>{l("nextStep",!i,e)}),[i,l]),d=(0,o.useCallback)((e=>{l("prevStep",!c,e)}),[c,l]),f=(0,o.useCallback)(((t,n)=>{const o=C(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void s(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),s(t)}),[r,t]);return{currentStep:r,hasNextStep:i,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Oe(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:s,resetStep:i}=Re({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:s,resetIndex:i}}function De(e,t,n={}){const[r,s]=(0,o.useState)(e);return[r,B(s,t,n)]}function Ie(e,t={}){const[n,r]=(0,o.useState)(""),[s,i]=De("",e,t);return{value:n,debouncedValue:s,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),i(t)}),[i]),onReset:(0,o.useCallback)((()=>{r(""),i("")}),[i])}}function Fe(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Le({onFocus:e=j,onBlur:t=j}={}){const[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(null),i=W((t=>{r(!0),e(t)})),c=W((e=>{r(!1),t(e)})),a=(0,o.useCallback)((()=>{s.current&&(s.current.focus(),r(!0))}),[]);return ne(s,"focus",i),ne(s,"blur",c),{ref:s,isFocus:n,setFocus:a}}function Ne({onEnter:e=j,onLeave:t=j}={}){const[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(null),i=W((t=>{r(!0),e(t)})),c=W((e=>{r(!1),t(e)}));return ne(s,"mouseenter",i),ne(s,"mouseleave",c),{ref:s,isHovered:n}}const Pe=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function Te(e,t){const n=(0,o.useRef)(),r=W(e),{delay:s,enabled:i}=Pe(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,s)}),[r,s]),a=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(s<0)&&i)return c(),()=>a()}),[a,c,i,s]),{set:c,reset:l,clear:a}}function Me({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),s=W((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];C(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",s),()=>t.removeEventListener("keydown",s)}),[e,s]),r}const $e={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Ye(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)($e),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:s,clientY:i,pageX:c,pageY:a}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=s-t.left,u=i-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:s,clientY:i,pageX:c,pageY:a,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Ve=()=>navigator.onLine,Xe=()=>!0,Ae=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function We({onlineAction:e=j,offlineAction:t=j}={}){const n=W((n=>Ae(n,e,t)));return(0,o.useSyncExternalStore)(n,Ve,Xe)}function _e(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const ze={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function Be(e=j){const[t,n]=(0,o.useState)(ze),r=(0,o.useRef)(null),s=W((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(s);return t.observe(e),()=>{t.unobserve(e)}}),[s]),{ref:r,contentRect:t}}function Ue({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),s=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>s())),[e,r,s]),{ref:t,lock:r,unlock:s}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:s=0,alignY:i="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+s+Je(window.innerHeight,r.height,i),left:r.left+window.scrollX+o+Je(window.innerWidth,r.width,c)};const a=e.getBoundingClientRect();return{top:r.top-a.top+e.scrollTop+s+Je(a.height,r.height,i),left:r.left-a.left+e.scrollLeft+o+Je(a.width,r.width,c)}};function Ke(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:s,top:i}=He(r,t,n);r.scrollTo({top:i,left:s,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=be("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=C(n)?n():n,s=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>s?R(s):r),[s,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?R(n):r,s=C(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(s)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:s}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[i,c]=(0,o.useState)(n),a=(0,o.useCallback)((e=>{c((t=>{const n=C(e)?e(t):e;return r&&s&&function(e,t,n){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=C(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,s,n),n}))}),[r,s]),l=(0,o.useCallback)((()=>{r&&s&&function(e,t){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,s),c(null)}),[r,s]);return Object.assign({state:i,setState:a,clearState:l},Re(e))}function nt(e,t,n={}){const r=W(e),s=z(n),i=(0,o.useMemo)((()=>(0,c.A)(r,t,s)),[r,t,s]);return _((()=>i.cancel())),i}const rt=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=W(e),{delay:s,enabled:i}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,s)}),[r,s]),a=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(s<0)&&i)return c(),()=>a()}),[c,a,s,i]),{set:c,reset:l,clear:a}}function st(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function it(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new a.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const at={width:null,height:null};function lt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>b()?at:{width:window.innerWidth,height:window.innerHeight})),r=B(n,e),s=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",s),t}function ut(e,t,n){const{delay:r,enabled:s}=rt(t),{set:i,reset:c,clear:a}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!s||c()}),[r,s,c,...n]),{set:i,reset:c,clear:a}}}}]); \ No newline at end of file diff --git a/assets/js/67c089fb.835c1131.js b/assets/js/67c089fb.835c1131.js new file mode 100644 index 000000000..f86def8a8 --- /dev/null +++ b/assets/js/67c089fb.835c1131.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[4146],{5271:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>l,assets:()=>d,contentTitle:()=>a,default:()=>b,frontMatter:()=>s,metadata:()=>o,toc:()=>f});const o=JSON.parse('{"id":"react/hooks/useDebounce","title":"useDebounce","description":"debounce\ub97c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useDebounce.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useDebounce","permalink":"/modern-kit/docs/react/hooks/useDebounce","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useCycleList","permalink":"/modern-kit/docs/react/hooks/useCycleList"},"next":{"title":"useDebouncedInputValue","permalink":"/modern-kit/docs/react/hooks/useDebouncedInputValue"}}');var r=t(6206),i=t(3267),c=t(4382),u=t(5115);const s={},a="useDebounce",d={},l=()=>{const e={button:"button",div:"div",p:"p",...(0,i.R)()},[n,t]=(0,c.useState)(1),[o,s]=(0,c.useState)(1),a=(0,u.d)((()=>{s(o+1)}),1e3);return(0,r.jsxs)(e.div,{children:[(0,r.jsxs)(e.div,{style:{display:"flex"},children:[(0,r.jsx)(e.button,{onClick:()=>{t(n+1)},children:"\ubc84\ud2bc \ud074\ub9ad"}),(0,r.jsx)(e.div,{style:{width:"50px"}}),(0,r.jsx)(e.button,{onClick:a,children:"debounce \ubc84\ud2bc \ud074\ub9ad"})]}),(0,r.jsxs)(e.div,{children:[(0,r.jsxs)(e.p,{children:["count: ",n]}),(0,r.jsxs)(e.p,{children:["debouncedCount: ",o]})]})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function p(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"usedebounce",children:"useDebounce"})}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"debounce"}),"\ub97c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useDebounce/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,r.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"// lodash-es DebounceSettings\n// https://www.geeksforgeeks.org/lodash-_-debounce-method/\ninterface DebounceSettings {\n leading?: boolean | undefined;\n maxWait?: number | undefined;\n trailing?: boolean | undefined;\n}\n\ntype DebounceParameters = Parameters;\ntype DebounceReturnType = ReturnType<\n typeof debounce\n>;\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"function useDebounce any>(\n callback: T,\n wait: DebounceParameters[1], // number\n options?: DebounceParameters[2] // DebounceSettings\n): DebounceReturnType;\n"})}),"\n",(0,r.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useState } from 'react';\nimport { useDebounce } from '@modern-kit/react';\n\nconst Example = () => {\n const [count, setCount] = useState(1);\n const [debouncedCount, setDebouncedCount] = useState(1);\n\n const countUp = () => {\n setCount(count + 1);\n };\n\n const debouncedCountUp = useDebounce(() => {\n setDebouncedCount(debouncedCount + 1);\n }, 1000);\n\n return (\n
\n
\n \n
\n \n
\n
\n

count: {count}

\n

debouncedCount: {debouncedCount}

\n
\n
\n );\n};\n"})}),"\n",(0,r.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,r.jsx)(l,{})]})}function b(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},3267:(e,n,t)=>{t.d(n,{R:()=>c,x:()=>u});var o=t(4382);const r={},i=o.createContext(r);function c(e){const n=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function u(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:c(e.components),o.createElement(i.Provider,{value:n},e.children)}},5115:(e,n,t)=>{t.d(n,{d:()=>s});var o=t(4382),r=t(5086),i=t(3311),c=t(6765),u=t(5423);function s(e,n,t){const s=(0,c.p)(e),a=(0,u.B)(t),d=(0,o.useMemo)((()=>(0,r.A)(s,n,a)),[s,n,a]);return(0,i.i)((()=>d.cancel())),d}},6765:(e,n,t)=>{t.d(n,{p:()=>r});var o=t(4382);function r(e){const n=(0,o.useRef)(e);return n.current=e,(0,o.useCallback)(((...e)=>n.current(...e)),[])}},5423:(e,n,t)=>{t.d(n,{B:()=>c});var o=t(4382),r=t(6765),i=t(9340);function c(e,n=i.Gp){const[t,c]=(0,o.useState)(e),u=(0,r.p)(n);return(0,o.useEffect)((()=>{u(t,e)||c(e)}),[u,t,e]),t}},3311:(e,n,t)=>{t.d(n,{i:()=>i});var o=t(6765),r=t(4382);function i(e){const n=(0,o.p)(e);(0,r.useEffect)((()=>()=>n()),[n])}},5086:(e,n,t)=>{t.d(n,{A:()=>N});var o=t(322);const r="object"==typeof global&&global&&global.Object===Object&&global;var i="object"==typeof self&&self&&self.Object===Object&&self;const c=r||i||Function("return this")();const u=function(){return c.Date.now()};var s=/\s/;const a=function(e){for(var n=e.length;n--&&s.test(e.charAt(n)););return n};var d=/^\s+/;const l=function(e){return e?e.slice(0,a(e)+1).replace(d,""):e};const f=c.Symbol;var p=Object.prototype,b=p.hasOwnProperty,h=p.toString,m=f?f.toStringTag:void 0;const v=function(e){var n=b.call(e,m),t=e[m];try{e[m]=void 0;var o=!0}catch(i){}var r=h.call(e);return o&&(n?e[m]=t:delete e[m]),r};var g=Object.prototype.toString;const y=function(e){return g.call(e)};var w=f?f.toStringTag:void 0;const x=function(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":w&&w in Object(e)?v(e):y(e)};const j=function(e){return null!=e&&"object"==typeof e};const k=function(e){return"symbol"==typeof e||j(e)&&"[object Symbol]"==x(e)};var C=/^[-+]0x[0-9a-f]+$/i,S=/^0b[01]+$/i,D=/^0o[0-7]+$/i,E=parseInt;const O=function(e){if("number"==typeof e)return e;if(k(e))return NaN;if((0,o.A)(e)){var n="function"==typeof e.valueOf?e.valueOf():e;e=(0,o.A)(n)?n+"":n}if("string"!=typeof e)return 0===e?e:+e;e=l(e);var t=S.test(e);return t||D.test(e)?E(e.slice(2),t?2:8):C.test(e)?NaN:+e};var T=Math.max,$=Math.min;const N=function(e,n,t){var r,i,c,s,a,d,l=0,f=!1,p=!1,b=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function h(n){var t=r,o=i;return r=i=void 0,l=n,s=e.apply(o,t)}function m(e){var t=e-d;return void 0===d||t>=n||t<0||p&&e-l>=c}function v(){var e=u();if(m(e))return g(e);a=setTimeout(v,function(e){var t=n-(e-d);return p?$(t,c-(e-l)):t}(e))}function g(e){return a=void 0,b&&r?h(e):(r=i=void 0,s)}function y(){var e=u(),t=m(e);if(r=arguments,i=this,d=e,t){if(void 0===a)return function(e){return l=e,a=setTimeout(v,n),f?h(e):s}(d);if(p)return clearTimeout(a),a=setTimeout(v,n),h(d)}return void 0===a&&(a=setTimeout(v,n)),s}return n=O(n)||0,(0,o.A)(t)&&(f=!!t.leading,c=(p="maxWait"in t)?T(O(t.maxWait)||0,n):c,b="trailing"in t?!!t.trailing:b),y.cancel=function(){void 0!==a&&clearTimeout(a),l=0,r=d=i=a=void 0},y.flush=function(){return void 0===a?s:g(u())},y}},322:(e,n,t)=>{t.d(n,{A:()=>o});const o=function(e){var n=typeof e;return null!=e&&("object"==n||"function"==n)}},9340:(e,n,t)=>{function o(e,n,t,o){return new(t||(t=Promise))((function(r,i){function c(e){try{s(o.next(e))}catch(n){i(n)}}function u(e){try{s(o.throw(e))}catch(n){i(n)}}function s(e){var n;e.done?r(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(c,u)}s((o=o.apply(e,n||[])).next())}))}t.d(n,{Et:()=>w,Fr:()=>u,Gp:()=>v,Ol:()=>S,Qd:()=>j,S$:()=>c,Tn:()=>g,Zp:()=>f,dK:()=>a,fl:()=>O,gD:()=>y,i5:()=>b,if:()=>p,l6:()=>k,lQ:()=>C,nS:()=>l,ni:()=>T,oc:()=>s}),"function"==typeof SuppressedError&&SuppressedError;const r={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,n)=>new Promise(((t,o)=>{e.toBlob((e=>{e?t(e):o(new Error(`Failed to create blob with format ${n}`))}),n)}));function c(){return"undefined"==typeof window}function u(){if(c())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function s(){return!c()}function a(e){return o(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const d=e=>o(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return a(yield n.text())}));function l(e,n){var t;return o(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return d(e);if(!("write"in window.navigator.clipboard))return d(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return d(e);const c=yield function(e,n="png"){return new Promise(((t,c)=>{const u=new Image;u.onload=()=>o(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=u.width,e.height=u.height;try{const o=e.getContext("2d");if(!o)throw new Error("Failed to get 2d context");o.drawImage(u,0,0);const c=yield i(e,r[n]);t(c)}catch(o){console.error(`Failed to load image. message: ${o.mesaage}`),c(o)}})),u.onerror=()=>{c(new Error("Failed to load image"))},u.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[c.type]:c})]),c}catch(c){throw console.error(`Failed to copy to clipboard. message: ${c.message}`),c}}))}function f(){return o(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(){return o(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function b(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const h=(e,n,t)=>{const o=Object.keys(e),r=Object.keys(n);if(o.length!==r.length)return!1;for(let i=0;i{if(e===n)return!0;if(w(e)&&w(n)&&isNaN(e)&&isNaN(n))return!0;if(g(e)&&g(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const o=[...e],r=[...n];return h(o,r,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[o,r]of e)if(!n.has(o)||!m(r,n.get(o),t))return!1;return!0}return h(e,n,t)};function v(e,n){return m(e,n,new WeakMap)}function g(e){return"function"==typeof e}function y(e){return null==e}function w(e){return"number"==typeof e}function x(e){return!function(e){return Object(e)!==e}(e)}function j(e){return x(e)&&"[object Object]"===Object.prototype.toString.call(e)}function k(e){return e===window}function C(){}function S(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function D(e){return Object.keys(e)}const E={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};D(E);function O(e,n){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function T(e,n,t){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{const o=window[e],r=g(t)?t():t;o.setItem(n,JSON.stringify(r))}catch(o){throw new Error(`Failed to store data for key "${n}" in ${e}: ${o}`)}}}}]); \ No newline at end of file diff --git a/assets/js/67c0cc0e.49a8fe54.js b/assets/js/67c0cc0e.49a8fe54.js new file mode 100644 index 000000000..2152091b5 --- /dev/null +++ b/assets/js/67c0cc0e.49a8fe54.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[6712],{5658:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>h,assets:()=>f,contentTitle:()=>u,default:()=>m,frontMatter:()=>d,metadata:()=>o,toc:()=>p});const o=JSON.parse('{"id":"react/hooks/useScrollTo","title":"useScrollTo","description":"\uc2a4\ud06c\ub864 \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useScrollTo.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useScrollTo","permalink":"/modern-kit/docs/react/hooks/useScrollTo","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useScrollLock","permalink":"/modern-kit/docs/react/hooks/useScrollLock"},"next":{"title":"useSessionStorage","permalink":"/modern-kit/docs/react/hooks/useSessionStorage"}}');var r=t(6206),i=t(3267),l=t(4382),c=t(9340);const s=(e,n,t)=>"start"===t?0:"center"===t?-e/2+n/2:-e+n;function a(){const e=(0,l.useRef)(null),n=(0,l.useCallback)(((n={})=>{if(!e.current)return;const{left:t=0,top:o=0,behavior:r="auto"}=n;e.current.scrollTo({left:t,top:o,behavior:r})}),[]),t=(0,l.useCallback)(((n,t={})=>{if(!n||!e.current)return;const o=e.current,{behavior:r="auto"}=t,{left:i,top:l}=((e,n,t)=>{const o=n.getBoundingClientRect(),{offsetX:r=0,offsetY:i=0,alignY:l="start",alignX:a="start"}=t;if((0,c.l6)(e))return{top:o.top+window.scrollY+i+s(window.innerHeight,o.height,l),left:o.left+window.scrollX+r+s(window.innerWidth,o.width,a)};const d=e.getBoundingClientRect();return{top:o.top-d.top+e.scrollTop+i+s(d.height,o.height,l),left:o.left-d.left+e.scrollLeft+r+s(d.width,o.width,a)}})(o,n,t);o.scrollTo({top:l,left:i,behavior:r})}),[]);return(0,l.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:n,scrollToElement:t}}const d={},u="useScrollTo",f={},h=()=>{const e={button:"button",div:"div",...(0,i.R)()},{containerRef:n,scrollToPosition:t,scrollToElement:o}=a(),c=(0,l.useRef)(null),s=e=>{o(c.current,{behavior:"smooth",offsetY:e})},d=e=>{o(c.current,{behavior:"smooth",alignY:e})};return(0,r.jsxs)(e.div,{children:[(0,r.jsxs)(e.div,{children:[(0,r.jsx)(e.button,{onClick:()=>{t({behavior:"smooth",top:400})},children:"\ud3ec\uc9c0\uc158 \uc2a4\ud06c\ub864"}),(0,r.jsx)(e.button,{onClick:()=>{o(c.current,{behavior:"smooth"})},children:"\ud0c0\uac9f \uc694\uc18c \uc2a4\ud06c\ub864"}),(0,r.jsx)(e.button,{onClick:()=>s(200),children:"\ud0c0\uac9f \uc694\uc18c \uc2a4\ud06c\ub864 offset 200"}),(0,r.jsx)(e.button,{onClick:()=>s(-200),children:"\ud0c0\uac9f \uc694\uc18c \uc2a4\ud06c\ub864 offset -200"})]}),(0,r.jsxs)(e.div,{children:[(0,r.jsx)(e.button,{onClick:()=>d("start"),children:"\ud0c0\uac9f \uc694\uc18c \uc2a4\ud06c\ub864 align start"}),(0,r.jsx)(e.button,{onClick:()=>d("center"),children:"\ud0c0\uac9f \uc694\uc18c \uc2a4\ud06c\ub864 align center"}),(0,r.jsx)(e.button,{onClick:()=>d("end"),children:"\ud0c0\uac9f \uc694\uc18c \uc2a4\ud06c\ub864 align end"})]}),(0,r.jsxs)(e.div,{ref:n,style:{width:"500px",height:"800px",overflow:"scroll"},children:[(0,r.jsx)(e.div,{style:{height:"400px",background:"green"},children:"InnerBox1"}),(0,r.jsx)(e.div,{style:{height:"400px",background:"red"},children:"InnerBox2"}),(0,r.jsx)(e.div,{ref:c,style:{height:"400px",background:"coral",fontSize:"24px"},children:"target Box"}),(0,r.jsx)(e.div,{style:{height:"400px",background:"aqua"},children:"InnerBox4"}),(0,r.jsx)(e.div,{style:{height:"400px",background:"black"},children:"InnerBox4"})]})]})},p=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function g(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"usescrollto",children:"useScrollTo"})}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"\uc2a4\ud06c\ub864"})," \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(n.p,{children:["useScrollTo \ud6c5\uc774 \ubc18\ud658\ud558\ub294 ",(0,r.jsx)(n.code,{children:"containerRef"}),"\ub97c \ud2b9\uc815 \uc5d8\ub9ac\uba3c\ud2b8\uc5d0 \ud560\ub2f9\ud558\uba74 \ud574\ub2f9 \uc694\uc18c\ub97c \uc2a4\ud06c\ub864 \ud569\ub2c8\ub2e4.\n",(0,r.jsx)(n.code,{children:"containerRef"}),"\ub97c \ud560\ub2f9\ud558\uc9c0 \uc54a\uc73c\uba74 ",(0,r.jsx)(n.code,{children:"window"}),"\ub97c \uc2a4\ud06c\ub864\ud569\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"scrollToPosition"})," \ud568\uc218\ub294 top, left\uc640 \uac19\uc740 ",(0,r.jsx)(n.code,{children:"position"}),"\uc744 \uae30\uc900\uc73c\ub85c \uc2a4\ud06c\ub864\ud569\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"scrollToElement"})," \ud568\uc218\ub294 \uc778\uc790\ub85c \ub123\uc740 ",(0,r.jsx)(n.code,{children:"\ud0c0\uac9f \uc694\uc18c"}),"\ub97c \uae30\uc900\uc73c\ub85c \uc2a4\ud06c\ub864 \ud569\ub2c8\ub2e4. ",(0,r.jsx)(n.code,{children:"offsetY/X"})," \uac12\uc744 \uc635\uc158\uc73c\ub85c \ubc1b\uc544\uc62c \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"const { containerRef } = useScrollTo();\n// containerRef: Window | null\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"const { containerRef } = useScrollTo();\n// containerRef: HTMLDivElement | null\n\n
\n"})}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useScrollTo/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,r.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"type ScrollBehavior = \"auto\" | \"instant\" | \"smooth\";\ntype Align = 'start' | 'center' | 'end';\n\ninterface ScrollOptions {\n behavior?: ScrollBehavior; // default: 'auto'\n}\n\ninterface ScrollToOptions extends ScrollOptions {\n left?: number; // default: 0\n top?: number; // default: 0\n}\n\ninterface ScrollToElementOptions {\n offsetX?: number; // default: 0\n offsetY?: number; // default: 0\n behavior?: ScrollBehavior; // default: 'auto'\n alignY?: Align; // default: 'start'\n alignX?: Align; // default: 'start'\n}\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"// \ud568\uc218 \uc624\ubc84\ub85c\ub529\nfunction useScrollTo(): {\n containerRef: React.MutableRefObject;\n scrollToPosition: (scrollToOptions?: ScrollToOptions) => void;\n scrollToElement: (\n target: E,\n scrollToElementOptions?: ScrollToElementOptions\n ) => void;\n};\n\nfunction useScrollTo(): {\n containerRef: React.RefObject;\n scrollToPosition: (scrollToOptions?: ScrollToOptions) => void;\n scrollToElement: (\n target: E,\n scrollToElementOptions?: ScrollToElementOptions\n ) => void;\n};\n"})}),"\n",(0,r.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useScrollTo } from '@modern-kit/react';\n\nconst Example = () => {\n const { containerRef, scrollToPosition, scrollToElement } = useScrollTo();\n const targetRef = useRef(null);\n\n const handleScrollToPosition = () => {\n scrollToPosition({\n behavior: 'smooth',\n top: 400,\n });\n };\n\n const handleScrollToElement = () => {\n scrollToElement(targetRef.current, {\n behavior: 'smooth',\n });\n };\n\n const handleScrollToElementOffset = (offset: number) => {\n scrollToElement(targetRef.current, {\n behavior: 'smooth',\n offsetY: offset,\n });\n };\n\n const handleScrollToElementAlign = (type: Align) => {\n scrollToElement(targetRef.current, {\n behavior: 'smooth',\n alignY: type,\n });\n };\n return (\n
\n
\n \n \n \n \n
\n\n
\n \n \n \n
\n\n \n
InnerBox1
\n
InnerBox2
\n
\n target Box\n
\n
InnerBox4
\n
InnerBox4
\n
\n
\n );\n};\n\n"})}),"\n",(0,r.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,r.jsx)(h,{})]})}function m(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(g,{...e})}):g(e)}},3267:(e,n,t)=>{t.d(n,{R:()=>l,x:()=>c});var o=t(4382);const r={},i=o.createContext(r);function l(e){const n=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),o.createElement(i.Provider,{value:n},e.children)}},9340:(e,n,t)=>{function o(e,n,t,o){return new(t||(t=Promise))((function(r,i){function l(e){try{s(o.next(e))}catch(n){i(n)}}function c(e){try{s(o.throw(e))}catch(n){i(n)}}function s(e){var n;e.done?r(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(l,c)}s((o=o.apply(e,n||[])).next())}))}t.d(n,{Et:()=>w,Fr:()=>c,Gp:()=>x,Ol:()=>E,Qd:()=>T,S$:()=>l,Tn:()=>v,Zp:()=>f,dK:()=>a,fl:()=>O,gD:()=>b,i5:()=>p,if:()=>h,l6:()=>j,lQ:()=>k,nS:()=>u,ni:()=>R,oc:()=>s}),"function"==typeof SuppressedError&&SuppressedError;const r={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,n)=>new Promise(((t,o)=>{e.toBlob((e=>{e?t(e):o(new Error(`Failed to create blob with format ${n}`))}),n)}));function l(){return"undefined"==typeof window}function c(){if(l())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function s(){return!l()}function a(e){return o(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const d=e=>o(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return a(yield n.text())}));function u(e,n){var t;return o(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return d(e);if(!("write"in window.navigator.clipboard))return d(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return d(e);const l=yield function(e,n="png"){return new Promise(((t,l)=>{const c=new Image;c.onload=()=>o(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=c.width,e.height=c.height;try{const o=e.getContext("2d");if(!o)throw new Error("Failed to get 2d context");o.drawImage(c,0,0);const l=yield i(e,r[n]);t(l)}catch(o){console.error(`Failed to load image. message: ${o.mesaage}`),l(o)}})),c.onerror=()=>{l(new Error("Failed to load image"))},c.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[l.type]:l})]),l}catch(l){throw console.error(`Failed to copy to clipboard. message: ${l.message}`),l}}))}function f(){return o(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function h(){return o(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const g=(e,n,t)=>{const o=Object.keys(e),r=Object.keys(n);if(o.length!==r.length)return!1;for(let i=0;i{if(e===n)return!0;if(w(e)&&w(n)&&isNaN(e)&&isNaN(n))return!0;if(v(e)&&v(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const o=[...e],r=[...n];return g(o,r,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[o,r]of e)if(!n.has(o)||!m(r,n.get(o),t))return!1;return!0}return g(e,n,t)};function x(e,n){return m(e,n,new WeakMap)}function v(e){return"function"==typeof e}function b(e){return null==e}function w(e){return"number"==typeof e}function y(e){return!function(e){return Object(e)!==e}(e)}function T(e){return y(e)&&"[object Object]"===Object.prototype.toString.call(e)}function j(e){return e===window}function k(){}function E(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function S(e){return Object.keys(e)}const C={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};S(C);function O(e,n){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function R(e,n,t){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{const o=window[e],r=v(t)?t():t;o.setItem(n,JSON.stringify(r))}catch(o){throw new Error(`Failed to store data for key "${n}" in ${e}: ${o}`)}}}}]); \ No newline at end of file diff --git a/assets/js/67c0cc0e.f6b6fd72.js b/assets/js/67c0cc0e.f6b6fd72.js deleted file mode 100644 index b87f40e65..000000000 --- a/assets/js/67c0cc0e.f6b6fd72.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[6712],{6685:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>d,assets:()=>u,contentTitle:()=>a,default:()=>p,frontMatter:()=>c,metadata:()=>r,toc:()=>f});const r=JSON.parse('{"id":"react/hooks/useScrollTo","title":"useScrollTo","description":"\uc2a4\ud06c\ub864 \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useScrollTo.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useScrollTo","permalink":"/modern-kit/docs/react/hooks/useScrollTo","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useScrollLock","permalink":"/modern-kit/docs/react/hooks/useScrollLock"},"next":{"title":"useSessionStorage","permalink":"/modern-kit/docs/react/hooks/useSessionStorage"}}');var o=t(6206),i=t(3267),l=t(4027),s=t(4382);const c={},a="useScrollTo",u={},d=()=>{const e={button:"button",div:"div",...(0,i.R)()},{containerRef:n,scrollToPosition:t,scrollToElement:r}=(0,l.QV)(),c=(0,s.useRef)(null),a=e=>{r(c.current,{behavior:"smooth",offsetY:e})},u=e=>{r(c.current,{behavior:"smooth",alignY:e})};return(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.button,{onClick:()=>{t({behavior:"smooth",top:400})},children:"\ud3ec\uc9c0\uc158 \uc2a4\ud06c\ub864"}),(0,o.jsx)(e.button,{onClick:()=>{r(c.current,{behavior:"smooth"})},children:"\ud0c0\uac9f \uc694\uc18c \uc2a4\ud06c\ub864"}),(0,o.jsx)(e.button,{onClick:()=>a(200),children:"\ud0c0\uac9f \uc694\uc18c \uc2a4\ud06c\ub864 offset 200"}),(0,o.jsx)(e.button,{onClick:()=>a(-200),children:"\ud0c0\uac9f \uc694\uc18c \uc2a4\ud06c\ub864 offset -200"})]}),(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.button,{onClick:()=>u("start"),children:"\ud0c0\uac9f \uc694\uc18c \uc2a4\ud06c\ub864 align start"}),(0,o.jsx)(e.button,{onClick:()=>u("center"),children:"\ud0c0\uac9f \uc694\uc18c \uc2a4\ud06c\ub864 align center"}),(0,o.jsx)(e.button,{onClick:()=>u("end"),children:"\ud0c0\uac9f \uc694\uc18c \uc2a4\ud06c\ub864 align end"})]}),(0,o.jsxs)(e.div,{ref:n,style:{width:"500px",height:"800px",overflow:"scroll"},children:[(0,o.jsx)(e.div,{style:{height:"400px",background:"green"},children:"InnerBox1"}),(0,o.jsx)(e.div,{style:{height:"400px",background:"red"},children:"InnerBox2"}),(0,o.jsx)(e.div,{ref:c,style:{height:"400px",background:"coral",fontSize:"24px"},children:"target Box"}),(0,o.jsx)(e.div,{style:{height:"400px",background:"aqua"},children:"InnerBox4"}),(0,o.jsx)(e.div,{style:{height:"400px",background:"black"},children:"InnerBox4"})]})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function h(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"usescrollto",children:"useScrollTo"})}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"\uc2a4\ud06c\ub864"})," \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.p,{children:["useScrollTo \ud6c5\uc774 \ubc18\ud658\ud558\ub294 ",(0,o.jsx)(n.code,{children:"containerRef"}),"\ub97c \ud2b9\uc815 \uc5d8\ub9ac\uba3c\ud2b8\uc5d0 \ud560\ub2f9\ud558\uba74 \ud574\ub2f9 \uc694\uc18c\ub97c \uc2a4\ud06c\ub864 \ud569\ub2c8\ub2e4.\n",(0,o.jsx)(n.code,{children:"containerRef"}),"\ub97c \ud560\ub2f9\ud558\uc9c0 \uc54a\uc73c\uba74 ",(0,o.jsx)(n.code,{children:"window"}),"\ub97c \uc2a4\ud06c\ub864\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"scrollToPosition"})," \ud568\uc218\ub294 top, left\uc640 \uac19\uc740 ",(0,o.jsx)(n.code,{children:"position"}),"\uc744 \uae30\uc900\uc73c\ub85c \uc2a4\ud06c\ub864\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"scrollToElement"})," \ud568\uc218\ub294 \uc778\uc790\ub85c \ub123\uc740 ",(0,o.jsx)(n.code,{children:"\ud0c0\uac9f \uc694\uc18c"}),"\ub97c \uae30\uc900\uc73c\ub85c \uc2a4\ud06c\ub864 \ud569\ub2c8\ub2e4. ",(0,o.jsx)(n.code,{children:"offsetY/X"})," \uac12\uc744 \uc635\uc158\uc73c\ub85c \ubc1b\uc544\uc62c \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:"const { containerRef } = useScrollTo();\n// containerRef: Window | null\n"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:"const { containerRef } = useScrollTo();\n// containerRef: HTMLDivElement | null\n\n
\n"})}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useScrollTo/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"type ScrollBehavior = \"auto\" | \"instant\" | \"smooth\";\ntype Align = 'start' | 'center' | 'end';\n\ninterface ScrollOptions {\n behavior?: ScrollBehavior; // default: 'auto'\n}\n\ninterface ScrollToOptions extends ScrollOptions {\n left?: number; // default: 0\n top?: number; // default: 0\n}\n\ninterface ScrollToElementOptions {\n offsetX?: number; // default: 0\n offsetY?: number; // default: 0\n behavior?: ScrollBehavior; // default: 'auto'\n alignY?: Align; // default: 'start'\n alignX?: Align; // default: 'start'\n}\n"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"// \ud568\uc218 \uc624\ubc84\ub85c\ub529\nfunction useScrollTo(): {\n containerRef: React.MutableRefObject;\n scrollToPosition: (scrollToOptions?: ScrollToOptions) => void;\n scrollToElement: (\n target: E,\n scrollToElementOptions?: ScrollToElementOptions\n ) => void;\n};\n\nfunction useScrollTo(): {\n containerRef: React.RefObject;\n scrollToPosition: (scrollToOptions?: ScrollToOptions) => void;\n scrollToElement: (\n target: E,\n scrollToElementOptions?: ScrollToElementOptions\n ) => void;\n};\n"})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useScrollTo } from '@modern-kit/react';\n\nconst Example = () => {\n const { containerRef, scrollToPosition, scrollToElement } = useScrollTo();\n const targetRef = useRef(null);\n\n const handleScrollToPosition = () => {\n scrollToPosition({\n behavior: 'smooth',\n top: 400,\n });\n };\n\n const handleScrollToElement = () => {\n scrollToElement(targetRef.current, {\n behavior: 'smooth',\n });\n };\n\n const handleScrollToElementOffset = (offset: number) => {\n scrollToElement(targetRef.current, {\n behavior: 'smooth',\n offsetY: offset,\n });\n };\n\n const handleScrollToElementAlign = (type: Align) => {\n scrollToElement(targetRef.current, {\n behavior: 'smooth',\n alignY: type,\n });\n };\n return (\n
\n
\n \n \n \n \n
\n\n
\n \n \n \n
\n\n \n
InnerBox1
\n
InnerBox2
\n
\n target Box\n
\n
InnerBox4
\n
InnerBox4
\n
\n
\n );\n};\n\n"})}),"\n",(0,o.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(d,{})]})}function p(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},4027:(e,n,t)=>{t.d(n,{$$:()=>Fe,$I:()=>oe,AE:()=>Ve,BL:()=>J,DX:()=>I,FT:()=>cn,Fo:()=>en,Hn:()=>ln,I5:()=>Ce,JF:()=>$e,K:()=>ae,K$:()=>He,M0:()=>Oe,ML:()=>te,Mj:()=>ye,Mk:()=>Ne,Mo:()=>ie,NT:()=>Be,QV:()=>Ue,Ub:()=>Se,Ut:()=>je,W7:()=>U,WY:()=>re,Y1:()=>dn,Z3:()=>on,ZC:()=>We,Zu:()=>ce,_1:()=>Re,_g:()=>tn,aL:()=>H,aY:()=>Ie,bB:()=>A,d7:()=>_,eG:()=>sn,fN:()=>se,fm:()=>G,gl:()=>F,hN:()=>D,iD:()=>de,iQ:()=>Me,jd:()=>le,lW:()=>un,oD:()=>K,oo:()=>Te,pL:()=>Q,qi:()=>ue,rN:()=>Le,tD:()=>ke,u8:()=>q,wY:()=>_e,xV:()=>M,xh:()=>nn,zy:()=>Z});var r=t(6206),o=t(4382),i=t(3683),l=t(5086),s=t(7197),c=(t(1604),t(5938));function a(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((t,r)=>{e.toBlob((e=>{e?t(e):r(new Error(`Failed to create blob with format ${n}`))}),n)}));function m(){return typeof window>"u"}function g(){return!m()}function b(e){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const v=e=>f(void 0,0,void 0,(function*(){return b(yield(yield fetch(e)).text())}));function w(e,n){var t;return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(t=n?.toText)&&void 0!==t&&t)return v(e);const r=yield function(e,n="png"){return new Promise(((t,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield p(e,h[n]);t(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,n,t)=>{const r=Object.keys(e),o=Object.keys(n);if(r.length!==o.length)return!1;for(let i=0;i{if(e===n||E(e)&&E(n)&&isNaN(e)&&isNaN(n))return!0;if(k(e)&&k(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const r=[...e],o=[...n];return y(r,o,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[r,o]of e)if(!n.has(r)||!x(o,n.get(r),t))return!1;return!0}return y(e,n,t)};function S(e,n){return x(e,n,new WeakMap)}function k(e){return"function"==typeof e}function E(e){return"number"==typeof e}function j(e){return!function(e){return Object(e)!==e}(e)}function C(){}function T(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}const R=(...e)=>n=>e.forEach((e=>{if(k(e))e(n);else if(null!=e){e.current=n}}));function O(...e){return(0,o.useCallback)(R(...e),e)}const I=o.forwardRef(((e,n)=>{const{children:t}=e,i=a(e,["children"]),l=o.Children.toArray(t),s=l.find(N);if(s){const e=s.props.children,t=l.map((n=>n===s?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:n));return(0,r.jsx)(L,Object.assign({},i,{ref:n,children:o.isValidElement(e)?o.cloneElement(e,void 0,t):null}))}return(0,r.jsx)(L,Object.assign({},i,{ref:n,children:t}))}));I.displayName="Slot";const L=o.forwardRef(((e,n)=>{const{children:t}=e,r=a(e,["children"]);if(o.isValidElement(t)){const e=function(e){var n,t;let r=null===(n=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(t=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(t);return o.cloneElement(t,Object.assign(Object.assign({},function(e,n){const t=Object.assign({},n);for(const r in n){const o=e[r],i=n[r];/^on[A-Z]/.test(r)?o&&i?t[r]=(...e)=>{i(...e),o(...e)}:o&&(t[r]=o):"style"===r?t[r]=Object.assign(Object.assign({},o),i):"className"===r&&(t[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),t)}(r,t.props)),{ref:n?R(n,e):e}))}return o.Children.count(t)>1?o.Children.only(null):null}));L.displayName="SlotClone";const M=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function N(e){return o.isValidElement(e)&&e.type===M}var P="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const F=d(((e,n)=>{var{ratio:t,style:o,as:l="div",asChild:s=!1}=e,c=a(e,["ratio","style","as","asChild"]);const u=s?I:l,d=Object.assign({aspectRatio:t},o),f=s?c.className:i(P,c.className);return(0,r.jsx)(u,Object.assign({ref:n,style:d,className:f},c))})),$=()=>C,Y=()=>!1,B=()=>!0;function A({fallback:e=(0,r.jsx)(r.Fragment,{}),children:n}){return(0,o.useSyncExternalStore)($,Y,B)?e:n}function X(){const[e,n]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{n(!0)}),[]),e}const D=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:n})=>X()?(0,r.jsx)(r.Fragment,{children:n}):e;function V(e){const n=(0,o.useRef)(e);return n.current=e,(0,o.useCallback)(((...e)=>n.current(...e)),[])}function W(e){const n=V(e);(0,o.useEffect)((()=>()=>n()),[n])}function z(e,n=S){const[t,r]=(0,o.useState)(e),i=V(n);return(0,o.useEffect)((()=>{i(t,e)||r(e)}),[i,t,e]),t}function _(e,n,t){const r=V(e),i=z(t),s=(0,o.useMemo)((()=>(0,l.A)(r,n,i)),[r,n,i]);return W((()=>s.cancel())),s}const H=({children:e,capture:n,wait:t,options:r})=>{const i=o.Children.only(e),l=_(((...e)=>{const t=i?.props;if(t&&k(t[n]))return t[n](...e)}),t,r);return(0,o.cloneElement)(i,{[n]:l})};function J({onIntersectStart:e=C,onIntersectEnd:n=C,enabled:t=!0,calledOnce:r=!1,root:i=null,threshold:l=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,o.useRef)(0),a=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=V((([t],o)=>{if(!t)return;const i=t.target;t.isIntersecting?(a.current=!0,c.current+=1,e(t)):a.current&&(a.current=!1,c.current+=1,n(t)),r&&c.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&t&&(u.current=new IntersectionObserver(d,{threshold:l,root:i,rootMargin:s}),u.current.observe(e))}),[t,l,i,s,d])}}const K=(0,o.forwardRef)(((e,n)=>{var{src:t,threshold:o,root:i,rootMargin:l}=e,s=a(e,["src","threshold","root","rootMargin"]);const{ref:c}=J({onIntersectStart:e=>{e.target.src=t},calledOnce:!0,threshold:o,root:i,rootMargin:l});return(0,r.jsx)("img",Object.assign({ref:O(n,c)},s))}));K.displayName="LazyImage";const U=(0,o.forwardRef)(((e,n)=>{var{width:t,height:i,fallback:l,className:s,style:c,duration:u="0.2s",onLoad:d}=e,f=a(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,g=(0,o.useMemo)((()=>({position:"relative",width:t,height:i})),[t,i]),b=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},c)),[m,u,c]),v=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),w=s?`lazy-image-wrapper ${s}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:w,style:g,children:[m&&l,(0,r.jsx)(K,Object.assign({ref:n,width:t,height:i,style:b,onLoad:v},f))]})}));U.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:n,falseComponent:t})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?n:t})},q=({onScrollAction:e,children:n,root:t,threshold:o,enabled:i,triggerPosition:l="after",rootMargin:s="150px 0px"})=>{const{ref:c}=J({onIntersectStart:e,root:t,threshold:o,enabled:i,rootMargin:s});return(0,r.jsxs)(r.Fragment,{children:["before"===l&&(0,r.jsx)("div",{ref:c}),n,"after"===l&&(0,r.jsx)("div",{ref:c})]})},Q=d(((e,n)=>{var{children:t,as:i="div",asChild:l=!1}=e,s=a(e,["children","as","asChild"]);const c=l?I:i,{ref:u}=J(s);if(l&&!o.isValidElement(t))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(c,Object.assign({ref:R(n,u)},s,{children:t}))})),G=({items:e=[],itemKey:n,renderItem:t})=>{const i=(0,o.useCallback)(((e,t)=>function(e){return j(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[n]||t:`${t}_${e}`),[n]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,n)=>(0,r.jsx)(o.Fragment,{children:t(e,n)},i(e,n))))})},ee=g()?o.useLayoutEffect:o.useEffect,ne=e=>!!e&&function(e,n){return Object.prototype.hasOwnProperty.call(e,n)}(e,"current");function te(e,n,t,r){const o=V(t);ee((()=>{const t=ne(e)?e.current:e;if(t)return t.addEventListener(n,o,r),()=>{t.removeEventListener(n,o,r)}}),[n,e,r,o])}function re(e,n){const{excludeRefs:t}=n??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return te(document,i,(({target:n})=>{if(!r.current)return;const o=r.current,i=t?.some((e=>{var t;return null===(t=e.current)||void 0===t?void 0:t.contains(n)}));!o.contains(n)&&!i&&e(o)})),r}const oe=d(((e,n)=>{var{children:t,as:i="div",asChild:l=!1,onPointerDown:s,excludeRefs:c=[]}=e,u=a(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(s,{excludeRefs:c}),f=l?I:i;if(l&&!o.isValidElement(t))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:R(d,n)},u,{children:t}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:n=[],separator:t,renderItem:i,separatorInterval:l=1,includeLastSeparator:s=!1})=>{const c=(0,o.useCallback)((e=>e===n.length-1?s:(e+1)%l==0),[s,l,n.length]);return(0,r.jsx)(G,{items:n,itemKey:e,renderItem:(e,n)=>(0,r.jsxs)(r.Fragment,{children:[i(e,n),c(n)&&t]})})},le=({children:e,condition:n,fallback:t=null})=>(e=>"function"==typeof e?e():e)(n)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:t}),se=({caseBy:e,value:n,defaultComponent:t=null})=>{var o;return function(e){return null==e}(n)?(0,r.jsx)(r.Fragment,{children:t}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[n])&&void 0!==o?o:t})};function ce(e,n){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),n)}function ae(e=!0){const n=k(e)?e():e;(0,o.useEffect)((()=>{if(!n)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[n])}function ue(){const[e,n]=(0,o.useState)(!1),[t,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:t,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,n(!0),r(!1);try{return yield e()}catch(t){throw r(!0),t}finally{i.current=!1,n(!1)}}}))),[])}}function de(){const[e,n]=(0,o.useState)(null),[t,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const t=yield b(e);return n(t),!0}catch{return n(null),!1}}))),[]),l=(0,o.useCallback)(((e,t)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=t?.toText)&&void 0!==r&&r;try{const t=yield w(e,{toText:o});return n(t),!0}catch{return n(null),!1}}))),[]),s=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const n=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(n),!0}catch{return r(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const n=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(n),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:t,copyText:i,copyImage:l,readText:s,readContents:c}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],ge=me("localStorage"),be=e=>window.localStorage.getItem(e),ve=e=>JSON.stringify(e),we=e=>(ge.subscribe(e),()=>{ge.unsubscribe(e)});function ye(e){const{key:n}=e,t="initialValue"in e?e.initialValue:null,r=k(t)?t():t,i=(0,o.useSyncExternalStore)(we,(()=>be(n)),(()=>ve(r)));return{state:(0,o.useMemo)((()=>i?T(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const t=be(n),o=t?T(t):r,i=k(e)?e(o):e;window.localStorage.setItem(n,JSON.stringify(i)),ge.dispatchEvent()}catch(t){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${n}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${t}`)}}),[n,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(n),ge.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${n}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[n])}}const xe=(e,n)=>g()?window.matchMedia(e).matches:n??!1;function Se(e,n){const[t,r]=(0,o.useState)(xe(e,n)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return te(window.matchMedia(e),"change",i),t}function ke(){return Se("(prefers-color-scheme: dark)")?"dark":"light"}const Ee="color-scheme";function je({defaultValue:e,key:n=Ee,shouldSetBodyClass:t=!1}={}){const r=ke(),i=k(e)?e():e,{state:l,setState:s}=ye({key:n,initialValue:i??r}),c=(0,o.useCallback)((()=>{s((e=>"dark"===e?"light":"dark"))}),[s]),a=(0,o.useCallback)((()=>{s("dark")}),[s]),u=(0,o.useCallback)((()=>{s("light")}),[s]),d=(0,o.useCallback)((()=>{s(r)}),[s,r]);return(0,o.useEffect)((()=>(t&&document.body.classList.add(l),()=>{t&&document.body.classList.remove(l)})),[l,t]),{colorScheme:l,preferredColorScheme:r,setToggleMode:c,setDarkMode:a,setLightMode:u,setPreferredMode:d}}function Ce(e=0){const[n,t]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{t((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{t((e=>e-1))}),[]),l=(0,o.useCallback)((()=>{t(e)}),[e]);return{counter:n,setCounter:t,increment:r,decrement:i,reset:l}}function Te({maxStep:e,initialStep:n=0,infinite:t=!1}){const[r,i]=(0,o.useState)(n),l=r0,c=(0,o.useCallback)(((n,t)=>{const o="nextStep"===n;return t?o?0:e:o?r+1:r-1}),[e,r]),a=(0,o.useCallback)(((e,n,o)=>{if(n&&!t)return;const l=c(e,n);o&&o({prev:r,next:l}),i(l)}),[t,r,c]),u=(0,o.useCallback)((e=>{a("nextStep",!l,e)}),[l,a]),d=(0,o.useCallback)((e=>{a("prevStep",!s,e)}),[s,a]),f=(0,o.useCallback)(((n,t)=>{const o=k(n)?n(r):n;if(o>=0&&o<=e)return t&&t({prev:r,next:o}),void i(n);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:n}),i(n)}),[r,n]);return{currentStep:r,hasNextStep:l,hasPrevStep:s,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Re(e,n=0){const{currentStep:t,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:l}=Te({maxStep:e.length-1,initialStep:n,infinite:!0});return{currentItem:e[t],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:l}}function Oe(e,n,t={}){const[r,i]=(0,o.useState)(e);return[r,_(i,n,t)]}function Ie(e,n={}){const[t,r]=(0,o.useState)(""),[i,l]=Oe("",e,n);return{value:t,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:n}=e.target;r(n),l(n)}),[l]),onReset:(0,o.useCallback)((()=>{r(""),l("")}),[l])}}function Le(e,{preserveTitleOnUnmount:n=!1}={}){ee((()=>{const t=document.title;return document.title=e,()=>{n||(document.title=t)}}),[e,n])}function Me({onFocus:e=C,onBlur:n=C}={}){const[t,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),l=V((n=>{r(!0),e(n)})),s=V((e=>{r(!1),n(e)})),c=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return te(i,"focus",l),te(i,"blur",s),{ref:i,isFocus:t,setFocus:c}}function Ne({onEnter:e=C,onLeave:n=C}={}){const[t,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),l=V((n=>{r(!0),e(n)})),s=V((e=>{r(!1),n(e)}));return te(i,"mouseenter",l),te(i,"mouseleave",s),{ref:i,isHovered:t}}const Pe=e=>{var n;return E(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(n=e?.enabled)||void 0===n||n}};function Fe(e,n){const t=(0,o.useRef)(),r=V(e),{delay:i,enabled:l}=Pe(n),s=(0,o.useCallback)((()=>{t.current=window.setInterval(r,i)}),[r,i]),c=(0,o.useCallback)((()=>{t.current&&(clearInterval(t.current),t.current=null)}),[]),a=(0,o.useCallback)((()=>{c(),s()}),[c,s]);return(0,o.useEffect)((()=>{if(!(i<0)&&l)return s(),()=>c()}),[c,s,l,i]),{set:s,reset:a,clear:c}}function $e({enabled:e=!0,keyDownCallbackMap:n={},allKeyDownCallback:t}){const r=(0,o.useRef)(null),i=V((e=>{if(e.stopPropagation(),t)return void t(e);const r=e.key,o=n[r];k(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const n=r.current;return n.addEventListener("keydown",i),()=>n.removeEventListener("keydown",i)}),[e,i]),r}const Ye={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Be(){const e=(0,o.useRef)(null),[n,t]=(0,o.useState)(Ye),r=(0,o.useCallback)((n=>{const{screenX:r,screenY:o,clientX:i,clientY:l,pageX:s,pageY:c}=n;let a=null,u=null,d=null,f=null;if(e.current){const n=e.current.getBoundingClientRect();a=i-n.left,u=l-n.top,d=n.left+window.scrollX,f=n.top+window.scrollY}t({screenX:r,screenY:o,clientX:i,clientY:l,pageX:s,pageY:c,elementRelativeX:a,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return te(document,"mousemove",r),{ref:e,position:n}}const Ae=()=>navigator.onLine,Xe=()=>!0,De=(e,n,t)=>{const r=t=>(n(t),e()),o=n=>(t(n),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function Ve({onlineAction:e=C,offlineAction:n=C}={}){const t=V((t=>De(t,e,n)));return(0,o.useSyncExternalStore)(t,Ae,Xe)}function We(e){const n=(0,o.useRef)(e);return(0,o.useEffect)((()=>{n.current=e}),[e]),n.current}const ze={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function _e(e=C){const[n,t]=(0,o.useState)(ze),r=(0,o.useRef)(null),i=V((([n])=>{n&&(e(n),t(n.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,n=new ResizeObserver(i);return n.observe(e),()=>{n.unobserve(e)}}),[i]),{ref:r,contentRect:n}}function He({autoLock:e=!0}={}){const n=(0,o.useRef)(null),t=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=n.current;t.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!t.current)return;n.current.style.overflow=t.current}),[]);return ee((()=>(n.current||(n.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:n,lock:r,unlock:i}}const Je=(e,n,t)=>"start"===t?0:"center"===t?-e/2+n/2:-e+n,Ke=(e,n,t)=>{const r=n.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:l="start",alignX:s="start"}=t;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+Je(window.innerHeight,r.height,l),left:r.left+window.scrollX+o+Je(window.innerWidth,r.width,s)};const c=e.getBoundingClientRect();return{top:r.top-c.top+e.scrollTop+i+Je(c.height,r.height,l),left:r.left-c.left+e.scrollLeft+o+Je(c.width,r.width,s)}};function Ue(){const e=(0,o.useRef)(null),n=(0,o.useCallback)(((n={})=>{if(!e.current)return;const{left:t=0,top:r=0,behavior:o="auto"}=n;e.current.scrollTo({left:t,top:r,behavior:o})}),[]),t=(0,o.useCallback)(((n,t={})=>{if(!n||!e.current)return;const r=e.current,{behavior:o="auto"}=t,{left:i,top:l}=Ke(r,n,t);r.scrollTo({top:l,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:n,scrollToElement:t}}const Ze=me("sessionStorage"),qe=e=>window.sessionStorage.getItem(e),Qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function en(e){const{key:n}=e,t="initialValue"in e?e.initialValue:null,r=k(t)?t():t,i=(0,o.useSyncExternalStore)(Ge,(()=>qe(n)),(()=>Qe(r)));return{state:(0,o.useMemo)((()=>i?T(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const t=qe(n),o=t?T(t):r,i=k(e)?e(o):e;window.sessionStorage.setItem(n,JSON.stringify(i)),Ze.dispatchEvent()}catch(t){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${n}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${t}`)}}),[n,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(n),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${n}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[n])}}function nn(e){var n;const t="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(n=e?.storageOptions)&&void 0!==n?n:{},[l,s]=(0,o.useState)(t),c=(0,o.useCallback)((e=>{s((n=>{const t=k(e)?e(n):e;return r&&i&&function(e,n,t){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=k(t)?t():t;r.setItem(n,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${n}" in ${e}: ${r}`)}}(r,i,t),t}))}),[r,i]),a=(0,o.useCallback)((()=>{r&&i&&function(e,n){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}(r,i),s(null)}),[r,i]);return Object.assign({state:l,setState:c,clearState:a},Te(e))}function tn(e,n,t={}){const r=V(e),i=z(t),l=(0,o.useMemo)((()=>(0,s.A)(r,n,i)),[r,n,i]);return W((()=>l.cancel())),l}const rn=e=>{var n;return E(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(n=e?.enabled)||void 0===n||n}};function on(e,n){const t=(0,o.useRef)(),r=V(e),{delay:i,enabled:l}=rn(n),s=(0,o.useCallback)((()=>{t.current=setTimeout(r,i)}),[r,i]),c=(0,o.useCallback)((()=>{t.current&&(clearTimeout(t.current),t.current=null)}),[]),a=(0,o.useCallback)((()=>{c(),s()}),[c,s]);return(0,o.useEffect)((()=>{if(!(i<0)&&l)return s(),()=>c()}),[s,c,i,l]),{set:s,reset:a,clear:c}}function ln(e,n){const[t,r]=(0,o.useState)(e);return[t,(0,o.useCallback)((()=>{r((t=>t===e?n:e))}),[e,n])]}function sn(){const[e,n]=(0,o.useState)(null);return ee((()=>{const e=new c.UAParser(window.navigator.userAgent);n(e.getResult())}),[]),e}function cn({name:e="vh",enabledResize:n=!1}={}){ee((()=>{const t=()=>{const n=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${n}px`)};return t(),n&&window.addEventListener("resize",t),()=>{n&&window.removeEventListener("resize",t)}}),[e,n])}const an={width:null,height:null};function un({debounceWait:e}={}){const[n,t]=(0,o.useState)((()=>m()?an:{width:window.innerWidth,height:window.innerHeight})),r=_(t,e),i=(0,o.useCallback)((()=>{(e?r:t)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return te(window,"resize",i),n}function dn(e,n,t){const{delay:r,enabled:i}=rn(n),{set:l,reset:s,clear:c}=on(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||s()}),[r,i,s,...t]),{set:l,reset:s,clear:c}}}}]); \ No newline at end of file diff --git a/assets/js/6dde689d.a296f296.js b/assets/js/6dde689d.a296f296.js new file mode 100644 index 000000000..6bb03a8d3 --- /dev/null +++ b/assets/js/6dde689d.a296f296.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[2709],{9993:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>l,assets:()=>d,contentTitle:()=>u,default:()=>p,frontMatter:()=>a,metadata:()=>r,toc:()=>f});const r=JSON.parse('{"id":"react/hooks/useTimeout","title":"useTimeout","description":"window.setTimeout\uc744 \ud3b8\ub9ac\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5 \uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useTimeout.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useTimeout","permalink":"/modern-kit/docs/react/hooks/useTimeout","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useThrottle","permalink":"/modern-kit/docs/react/hooks/useThrottle"},"next":{"title":"useToggle","permalink":"/modern-kit/docs/react/hooks/useToggle"}}');var o=t(6206),i=t(3267),c=t(9545),s=t(4382);const a={},u="useTimeout",d={},l=()=>{const e={button:"button",div:"div",p:"p",...(0,i.R)()},[n,t]=(0,s.useState)(0),{set:r,reset:a,clear:u}=(0,c.Z)((()=>{t(n+1)}),1e3);return(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.p,{children:n}),(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.button,{onClick:()=>r(),children:"set"}),(0,o.jsx)(e.button,{onClick:()=>a(),children:"reset"}),(0,o.jsx)(e.button,{onClick:()=>u(),children:"clear"})]})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function m(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"usetimeout",children:"useTimeout"})}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"window.setTimeout"}),"\uc744 \ud3b8\ub9ac\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5 \uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.p,{children:["option \uac12\uc73c\ub85c \uc22b\uc790\ub97c \ubc1b\uc744 \uc218 \uc788\uace0, \uac1d\uccb4\ub85c \ubc1b\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uac1d\uccb4\ub85c \ubc1b\uc744 \uacbd\uc6b0 ",(0,o.jsx)(n.code,{children:"delay"}),"\uc640 ",(0,o.jsx)(n.code,{children:"enabled"})," \uc18d\uc131\uc744 \ub118\uaca8\uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.p,{children:["Timeout\uc744 \uc9c1\uc811 \ud578\ub4e4\ub9c1 \ud560 \uc218 \uc788\ub294 ",(0,o.jsx)(n.code,{children:"set"}),", ",(0,o.jsx)(n.code,{children:"reset"}),", ",(0,o.jsx)(n.code,{children:"clear"})," \ud568\uc218\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useTimeout/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"interface TimeoutOptions {\n delay: number;\n enabled?: boolean;\n}\n"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"function useTimeout(\n callback: () => void,\n options: number\n): {\n set: () => void;\n clear: () => void;\n reset: () => void;\n};\n\nfunction useTimeout(\n callback: () => void,\n options: TimeoutOptions\n): {\n set: () => void;\n clear: () => void;\n reset: () => void;\n};\n"})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useTimeout } from '@modern-kit/react';\n\nconst Example = () => {\n const [number, setNumber] = useState(0);\n\n const { set, reset, clear } = useTimeout(() => {\n setNumber(number + 1);\n }, 1000);\n\n /*\n * useTimeout(() => {\n * setNumber(number + 1);\n * }, { delay: 1000, enabled: true });\n */\n\n return (\n
\n

{number}

\n
\n \n \n \n
\n
\n );\n};\n"})}),"\n",(0,o.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(l,{})]})}function p(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(m,{...e})}):m(e)}},3267:(e,n,t)=>{t.d(n,{R:()=>c,x:()=>s});var r=t(4382);const o={},i=r.createContext(o);function c(e){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),r.createElement(i.Provider,{value:n},e.children)}},6765:(e,n,t)=>{t.d(n,{p:()=>o});var r=t(4382);function o(e){const n=(0,r.useRef)(e);return n.current=e,(0,r.useCallback)(((...e)=>n.current(...e)),[])}},9545:(e,n,t)=>{t.d(n,{Z:()=>s});var r=t(4382),o=t(6765),i=t(9340);const c=e=>{var n;return(0,i.Et)(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(n=null==e?void 0:e.enabled)||void 0===n||n}};function s(e,n){const t=(0,r.useRef)(),i=(0,o.p)(e),{delay:s,enabled:a}=c(n),u=(0,r.useCallback)((()=>{t.current=setTimeout(i,s)}),[i,s]),d=(0,r.useCallback)((()=>{t.current&&(clearTimeout(t.current),t.current=null)}),[]),l=(0,r.useCallback)((()=>{d(),u()}),[d,u]);return(0,r.useEffect)((()=>{if(!(s<0)&&a)return u(),()=>d()}),[u,d,s,a]),{set:u,reset:l,clear:d}}},9340:(e,n,t)=>{function r(e,n,t,r){return new(t||(t=Promise))((function(o,i){function c(e){try{a(r.next(e))}catch(n){i(n)}}function s(e){try{a(r.throw(e))}catch(n){i(n)}}function a(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(c,s)}a((r=r.apply(e,n||[])).next())}))}t.d(n,{Et:()=>x,Fr:()=>s,Gp:()=>g,Ol:()=>C,Qd:()=>j,S$:()=>c,Tn:()=>v,Zp:()=>f,dK:()=>u,fl:()=>S,gD:()=>w,i5:()=>p,if:()=>m,l6:()=>k,lQ:()=>T,nS:()=>l,ni:()=>$,oc:()=>a}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,n)=>new Promise(((t,r)=>{e.toBlob((e=>{e?t(e):r(new Error(`Failed to create blob with format ${n}`))}),n)}));function c(){return"undefined"==typeof window}function s(){if(c())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function a(){return!c()}function u(e){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const d=e=>r(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return u(yield n.text())}));function l(e,n){var t;return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return d(e);if(!("write"in window.navigator.clipboard))return d(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return d(e);const c=yield function(e,n="png"){return new Promise(((t,c)=>{const s=new Image;s.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=s.width,e.height=s.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(s,0,0);const c=yield i(e,o[n]);t(c)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),c(r)}})),s.onerror=()=>{c(new Error("Failed to load image"))},s.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[c.type]:c})]),c}catch(c){throw console.error(`Failed to copy to clipboard. message: ${c.message}`),c}}))}function f(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function m(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const h=(e,n,t)=>{const r=Object.keys(e),o=Object.keys(n);if(r.length!==o.length)return!1;for(let i=0;i{if(e===n)return!0;if(x(e)&&x(n)&&isNaN(e)&&isNaN(n))return!0;if(v(e)&&v(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const r=[...e],o=[...n];return h(r,o,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[r,o]of e)if(!n.has(r)||!b(o,n.get(r),t))return!1;return!0}return h(e,n,t)};function g(e,n){return b(e,n,new WeakMap)}function v(e){return"function"==typeof e}function w(e){return null==e}function x(e){return"number"==typeof e}function y(e){return!function(e){return Object(e)!==e}(e)}function j(e){return y(e)&&"[object Object]"===Object.prototype.toString.call(e)}function k(e){return e===window}function T(){}function C(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function E(e){return Object.keys(e)}const O={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};E(O);function S(e,n){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function $(e,n,t){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=v(t)?t():t;r.setItem(n,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${n}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/6dde689d.fedb5911.js b/assets/js/6dde689d.fedb5911.js deleted file mode 100644 index acfdfbd19..000000000 --- a/assets/js/6dde689d.fedb5911.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[2709],{9993:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>a,default:()=>p,frontMatter:()=>l,metadata:()=>r,toc:()=>f});const r=JSON.parse('{"id":"react/hooks/useTimeout","title":"useTimeout","description":"window.setTimeout\uc744 \ud3b8\ub9ac\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5 \uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useTimeout.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useTimeout","permalink":"/modern-kit/docs/react/hooks/useTimeout","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useThrottle","permalink":"/modern-kit/docs/react/hooks/useThrottle"},"next":{"title":"useToggle","permalink":"/modern-kit/docs/react/hooks/useToggle"}}');var o=n(6206),i=n(3267),s=n(4027),c=n(4382);const l={},a="useTimeout",u={},d=()=>{const e={button:"button",div:"div",p:"p",...(0,i.R)()},[t,n]=(0,c.useState)(0),{set:r,reset:l,clear:a}=(0,s.Z3)((()=>{n(t+1)}),1e3);return(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.p,{children:t}),(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.button,{onClick:()=>r(),children:"set"}),(0,o.jsx)(e.button,{onClick:()=>l(),children:"reset"}),(0,o.jsx)(e.button,{onClick:()=>a(),children:"clear"})]})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function h(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usetimeout",children:"useTimeout"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"window.setTimeout"}),"\uc744 \ud3b8\ub9ac\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5 \uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:["option \uac12\uc73c\ub85c \uc22b\uc790\ub97c \ubc1b\uc744 \uc218 \uc788\uace0, \uac1d\uccb4\ub85c \ubc1b\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uac1d\uccb4\ub85c \ubc1b\uc744 \uacbd\uc6b0 ",(0,o.jsx)(t.code,{children:"delay"}),"\uc640 ",(0,o.jsx)(t.code,{children:"enabled"})," \uc18d\uc131\uc744 \ub118\uaca8\uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:["Timeout\uc744 \uc9c1\uc811 \ud578\ub4e4\ub9c1 \ud560 \uc218 \uc788\ub294 ",(0,o.jsx)(t.code,{children:"set"}),", ",(0,o.jsx)(t.code,{children:"reset"}),", ",(0,o.jsx)(t.code,{children:"clear"})," \ud568\uc218\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useTimeout/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface TimeoutOptions {\n delay: number;\n enabled?: boolean;\n}\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useTimeout(\n callback: () => void,\n options: number\n): {\n set: () => void;\n clear: () => void;\n reset: () => void;\n};\n\nfunction useTimeout(\n callback: () => void,\n options: TimeoutOptions\n): {\n set: () => void;\n clear: () => void;\n reset: () => void;\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useTimeout } from '@modern-kit/react';\n\nconst Example = () => {\n const [number, setNumber] = useState(0);\n\n const { set, reset, clear } = useTimeout(() => {\n setNumber(number + 1);\n }, 1000);\n\n /*\n * useTimeout(() => {\n * setNumber(number + 1);\n * }, { delay: 1000, enabled: true });\n */\n\n return (\n
\n

{number}

\n
\n \n \n \n
\n
\n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(d,{})]})}function p(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>$e,$I:()=>oe,AE:()=>We,BL:()=>H,DX:()=>N,FT:()=>ct,Fo:()=>et,Hn:()=>it,I5:()=>Ee,JF:()=>Pe,K:()=>ae,K$:()=>Je,M0:()=>Te,ML:()=>ne,Mj:()=>ye,Mk:()=>Le,Mo:()=>ie,NT:()=>Xe,QV:()=>Ue,Ub:()=>ke,Ut:()=>je,W7:()=>U,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>_e,Zu:()=>le,_1:()=>Re,_g:()=>nt,aL:()=>J,aY:()=>Ne,bB:()=>V,d7:()=>B,eG:()=>st,fN:()=>ce,fm:()=>G,gl:()=>$,hN:()=>D,iD:()=>de,iQ:()=>Fe,jd:()=>se,lW:()=>at,oD:()=>K,oo:()=>Oe,pL:()=>q,qi:()=>ue,rN:()=>Ie,tD:()=>Ce,u8:()=>Q,wY:()=>Be,xV:()=>F,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),i=n(3683),s=n(5086),c=n(7197),l=(n(1604),n(5938));function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function g(){return!m()}function b(e){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const w=e=>f(void 0,0,void 0,(function*(){return b(yield(yield fetch(e)).text())}));function v(e,t){var n;return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return w(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield p(e,h[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||S(e)&&S(t)&&isNaN(e)&&isNaN(t))return!0;if(C(e)&&C(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function k(e,t){return x(e,t,new WeakMap)}function C(e){return"function"==typeof e}function S(e){return"number"==typeof e}function j(e){return!function(e){return Object(e)!==e}(e)}function E(){}function O(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const R=(...e)=>t=>e.forEach((e=>{if(C(e))e(t);else if(null!=e){e.current=t}}));function T(...e){return(0,o.useCallback)(R(...e),e)}const N=o.forwardRef(((e,t)=>{const{children:n}=e,i=a(e,["children"]),s=o.Children.toArray(n),c=s.find(L);if(c){const e=c.props.children,n=s.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(I,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(I,Object.assign({},i,{ref:t,children:n}))}));N.displayName="Slot";const I=o.forwardRef(((e,t)=>{const{children:n}=e,r=a(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?R(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));I.displayName="SlotClone";const F=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function L(e){return o.isValidElement(e)&&e.type===F}var M="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const $=d(((e,t)=>{var{ratio:n,style:o,as:s="div",asChild:c=!1}=e,l=a(e,["ratio","style","as","asChild"]);const u=c?N:s,d=Object.assign({aspectRatio:n},o),f=c?l.className:i(M,l.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},l))})),P=()=>E,Y=()=>!1,X=()=>!0;function V({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(P,Y,X)?e:t}function A(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const D=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>A()?(0,r.jsx)(r.Fragment,{children:t}):e;function W(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function _(e){const t=W(e);(0,o.useEffect)((()=>()=>t()),[t])}function z(e,t=k){const[n,r]=(0,o.useState)(e),i=W(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function B(e,t,n){const r=W(e),i=z(n),c=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return _((()=>c.cancel())),c}const J=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),s=B(((...e)=>{const n=i?.props;if(n&&C(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:s})};function H({onIntersectStart:e=E,onIntersectEnd:t=E,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:s=0,rootMargin:c="0px 0px 0px 0px"}){const l=(0,o.useRef)(0),a=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=W((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(a.current=!0,l.current+=1,e(n)):a.current&&(a.current=!1,l.current+=1,t(n)),r&&l.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:s,root:i,rootMargin:c}),u.current.observe(e))}),[n,s,i,c,d])}}const K=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:s}=e,c=a(e,["src","threshold","root","rootMargin"]);const{ref:l}=H({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:T(t,l)},c))}));K.displayName="LazyImage";const U=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=a(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,g=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),b=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},l)),[m,u,l]),w=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),v=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:g,children:[m&&s,(0,r.jsx)(K,Object.assign({ref:t,width:n,height:i,style:b,onLoad:w},f))]})}));U.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:s="after",rootMargin:c="150px 0px"})=>{const{ref:l}=H({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:l}),t,"after"===s&&(0,r.jsx)("div",{ref:l})]})},q=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1}=e,c=a(e,["children","as","asChild"]);const l=s?N:i,{ref:u}=H(c);if(s&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(l,Object.assign({ref:R(t,u)},c,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return j(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=g()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=W(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1,onPointerDown:c,excludeRefs:l=[]}=e,u=a(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:l}),f=s?N:i;if(s&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:R(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:s=1,includeLastSeparator:c=!1})=>{const l=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%s==0),[c,s,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),l(t)&&n]})})},se=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function le(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function ae(e=!0){const t=C(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield b(e);return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),l=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:s,readText:c,readContents:l}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],ge=me("localStorage"),be=e=>window.localStorage.getItem(e),we=e=>JSON.stringify(e),ve=e=>(ge.subscribe(e),()=>{ge.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=C(n)?n():n,i=(0,o.useSyncExternalStore)(ve,(()=>be(t)),(()=>we(r)));return{state:(0,o.useMemo)((()=>i?O(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=be(t),o=n?O(n):r,i=C(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),ge.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ge.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>g()?window.matchMedia(e).matches:t??!1;function ke(e,t){const[n,r]=(0,o.useState)(xe(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function Ce(){return ke("(prefers-color-scheme: dark)")?"dark":"light"}const Se="color-scheme";function je({defaultValue:e,key:t=Se,shouldSetBodyClass:n=!1}={}){const r=Ce(),i=C(e)?e():e,{state:s,setState:c}=ye({key:t,initialValue:i??r}),l=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),a=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(s),()=>{n&&document.body.classList.remove(s)})),[s,n]),{colorScheme:s,preferredColorScheme:r,setToggleMode:l,setDarkMode:a,setLightMode:u,setPreferredMode:d}}function Ee(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:s}}function Oe({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),s=r0,l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),a=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const s=l(e,t);o&&o({prev:r,next:s}),i(s)}),[n,r,l]),u=(0,o.useCallback)((e=>{a("nextStep",!s,e)}),[s,a]),d=(0,o.useCallback)((e=>{a("prevStep",!c,e)}),[c,a]),f=(0,o.useCallback)(((t,n)=>{const o=C(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:s,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Re(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=Oe({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}function Te(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,B(i,t,n)]}function Ne(e,t={}){const[n,r]=(0,o.useState)(""),[i,s]=Te("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),s(t)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Ie(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Fe({onFocus:e=E,onBlur:t=E}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=W((t=>{r(!0),e(t)})),c=W((e=>{r(!1),t(e)})),l=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",s),ne(i,"blur",c),{ref:i,isFocus:n,setFocus:l}}function Le({onEnter:e=E,onLeave:t=E}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=W((t=>{r(!0),e(t)})),c=W((e=>{r(!1),t(e)}));return ne(i,"mouseenter",s),ne(i,"mouseleave",c),{ref:i,isHovered:n}}const Me=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function $e(e,t){const n=(0,o.useRef)(),r=W(e),{delay:i,enabled:s}=Me(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>l()}),[l,c,s,i]),{set:c,reset:a,clear:l}}function Pe({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=W((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];C(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const Ye={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Xe(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Ye),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l}=t;let a=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();a=i-t.left,u=s-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l,elementRelativeX:a,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Ve=()=>navigator.onLine,Ae=()=>!0,De=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function We({onlineAction:e=E,offlineAction:t=E}={}){const n=W((n=>De(n,e,t)));return(0,o.useSyncExternalStore)(n,Ve,Ae)}function _e(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const ze={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function Be(e=E){const[t,n]=(0,o.useState)(ze),r=(0,o.useRef)(null),i=W((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function Je({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const He=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:s="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+He(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+He(window.innerWidth,r.width,c)};const l=e.getBoundingClientRect();return{top:r.top-l.top+e.scrollTop+i+He(l.height,r.height,s),left:r.left-l.left+e.scrollLeft+o+He(l.width,r.width,c)}};function Ue(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:s}=Ke(r,t,n);r.scrollTo({top:s,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=C(n)?n():n,i=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>i?O(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?O(n):r,i=C(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[s,c]=(0,o.useState)(n),l=(0,o.useCallback)((e=>{c((t=>{const n=C(e)?e(t):e;return r&&i&&function(e,t,n){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=C(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),a=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),c(null)}),[r,i]);return Object.assign({state:s,setState:l,clearState:a},Oe(e))}function nt(e,t,n={}){const r=W(e),i=z(n),s=(0,o.useMemo)((()=>(0,c.A)(r,t,i)),[r,t,i]);return _((()=>s.cancel())),s}const rt=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=W(e),{delay:i,enabled:s}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>l()}),[c,l,i,s]),{set:c,reset:a,clear:l}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function st(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new l.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const lt={width:null,height:null};function at({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?lt:{width:window.innerWidth,height:window.innerHeight})),r=B(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:s,reset:c,clear:l}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||c()}),[r,i,c,...n]),{set:s,reset:c,clear:l}}}}]); \ No newline at end of file diff --git a/assets/js/771be322.5aeede07.js b/assets/js/771be322.5aeede07.js deleted file mode 100644 index 2813145d1..000000000 --- a/assets/js/771be322.5aeede07.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[588],{2623:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>c,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"react/hooks/useDebouncedInputValue","title":"useDebouncedInputValue","description":"input value\ub97c \uad00\ub9ac\ud558\uace0, \ub514\ubc14\uc6b4\uc2f1(debouncing)\uc744 \uc801\uc6a9\ud558\ub294 \ucee4\uc2a4\ud140 React \ud6c5\uc785\ub2c8\ub2e4","source":"@site/docs/react/hooks/useDebouncedInputValue.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useDebouncedInputValue","permalink":"/modern-kit/docs/react/hooks/useDebouncedInputValue","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useDebounce","permalink":"/modern-kit/docs/react/hooks/useDebounce"},"next":{"title":"useDebouncedState","permalink":"/modern-kit/docs/react/hooks/useDebouncedState"}}');var o=n(6206),i=n(3267),s=(n(4382),n(4027));const c={},a="useDebouncedInputValue",l={},u=()=>{const e={button:"button",div:"div",input:"input",p:"p",...(0,i.R)()},{value:t,debouncedValue:n,onChange:r,onReset:c}=(0,s.aY)(500);return(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.p,{children:["\ud604\uc7ac \uc785\ub825 \uac12: ",t]}),(0,o.jsxs)(e.p,{children:["\ub514\ubc14\uc6b4\uc2f1 \uc785\ub825 \uac12: ",n]}),(0,o.jsx)(e.div,{children:(0,o.jsx)(e.input,{type:"text",onChange:r,value:t})}),(0,o.jsx)(e.div,{children:(0,o.jsx)(e.button,{onClick:c,children:"Reset \ubc84\ud2bc"})})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usedebouncedinputvalue",children:"useDebouncedInputValue"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"input value"}),"\ub97c \uad00\ub9ac\ud558\uace0, ",(0,o.jsx)(t.code,{children:"\ub514\ubc14\uc6b4\uc2f1(debouncing)"}),"\uc744 \uc801\uc6a9\ud558\ub294 \ucee4\uc2a4\ud140 React \ud6c5\uc785\ub2c8\ub2e4"]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"\ud604\uc7ac \uc785\ub825 \uac12"}),"\uacfc ",(0,o.jsx)(t.code,{children:"\ub514\ubc14\uc6b4\uc2f1\ub41c \uac12"}),"\uc744 \uc81c\uacf5\ud558\uba70, \uac12\uc744 \uc5c5\ub370\uc774\ud2b8\ud558\uace0 \ub9ac\uc14b\ud560 \uc218 \uc788\ub294 \ud568\uc218\ub3c4 \ud568\uaed8 \uc81c\uacf5\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useDebouncedInputValue/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"type DebounceParameters = Parameters;\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useDebouncedInputValue(\n wait: DebounceParameters[1],\n options?: DebounceParameters[2]\n): {\n value: string;\n debouncedValue: string;\n onChange: (e: ChangeEvent) => void;\n onReset: () => void;\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useState } from 'react';\nimport { useDebouncedInputValue } from '@modern-kit/react';\n\nconst Example = () => {\n const { value, debouncedValue, onChange, onReset } = useDebouncedInputValue(500);\n\n return (\n
\n

\ud604\uc7ac \uc785\ub825 \uac12: {value}

\n

\ub514\ubc14\uc6b4\uc2f1 \uc785\ub825 \uac12: {debouncedValue}

\n
\n \n
\n
\n \n
\n
\n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(u,{})]})}function h(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(f,{...e})}):f(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>Me,$I:()=>oe,AE:()=>We,BL:()=>J,DX:()=>F,FT:()=>ct,Fo:()=>et,Hn:()=>it,I5:()=>je,JF:()=>Ve,K:()=>le,K$:()=>He,M0:()=>Ie,ML:()=>ne,Mj:()=>ye,Mk:()=>Pe,Mo:()=>ie,NT:()=>Te,QV:()=>Ue,Ub:()=>ke,Ut:()=>Ee,W7:()=>U,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>_e,Zu:()=>ae,_1:()=>Oe,_g:()=>nt,aL:()=>H,aY:()=>Fe,bB:()=>Y,d7:()=>B,eG:()=>st,fN:()=>ce,fm:()=>G,gl:()=>M,hN:()=>A,iD:()=>de,iQ:()=>Le,jd:()=>se,lW:()=>lt,oD:()=>K,oo:()=>Re,pL:()=>q,qi:()=>ue,rN:()=>Ne,tD:()=>Ce,u8:()=>Q,wY:()=>Be,xV:()=>L,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),i=n(3683),s=n(5086),c=n(7197),a=(n(1604),n(5938));function l(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function g(){return!m()}function b(e){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const w=e=>f(void 0,0,void 0,(function*(){return b(yield(yield fetch(e)).text())}));function v(e,t){var n;return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return w(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield p(e,h[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||S(e)&&S(t)&&isNaN(e)&&isNaN(t))return!0;if(C(e)&&C(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function k(e,t){return x(e,t,new WeakMap)}function C(e){return"function"==typeof e}function S(e){return"number"==typeof e}function E(e){return!function(e){return Object(e)!==e}(e)}function j(){}function R(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const O=(...e)=>t=>e.forEach((e=>{if(C(e))e(t);else if(null!=e){e.current=t}}));function I(...e){return(0,o.useCallback)(O(...e),e)}const F=o.forwardRef(((e,t)=>{const{children:n}=e,i=l(e,["children"]),s=o.Children.toArray(n),c=s.find(P);if(c){const e=c.props.children,n=s.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(N,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(N,Object.assign({},i,{ref:t,children:n}))}));F.displayName="Slot";const N=o.forwardRef(((e,t)=>{const{children:n}=e,r=l(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?O(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));N.displayName="SlotClone";const L=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function P(e){return o.isValidElement(e)&&e.type===L}var D="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const M=d(((e,t)=>{var{ratio:n,style:o,as:s="div",asChild:c=!1}=e,a=l(e,["ratio","style","as","asChild"]);const u=c?F:s,d=Object.assign({aspectRatio:n},o),f=c?a.className:i(D,a.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},a))})),V=()=>j,$=()=>!1,T=()=>!0;function Y({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(V,$,T)?e:t}function X(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const A=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>X()?(0,r.jsx)(r.Fragment,{children:t}):e;function W(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function _(e){const t=W(e);(0,o.useEffect)((()=>()=>t()),[t])}function z(e,t=k){const[n,r]=(0,o.useState)(e),i=W(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function B(e,t,n){const r=W(e),i=z(n),c=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return _((()=>c.cancel())),c}const H=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),s=B(((...e)=>{const n=i?.props;if(n&&C(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:s})};function J({onIntersectStart:e=j,onIntersectEnd:t=j,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:s=0,rootMargin:c="0px 0px 0px 0px"}){const a=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=W((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(l.current=!0,a.current+=1,e(n)):l.current&&(l.current=!1,a.current+=1,t(n)),r&&a.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:s,root:i,rootMargin:c}),u.current.observe(e))}),[n,s,i,c,d])}}const K=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:s}=e,c=l(e,["src","threshold","root","rootMargin"]);const{ref:a}=J({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:I(t,a)},c))}));K.displayName="LazyImage";const U=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:s,className:c,style:a,duration:u="0.2s",onLoad:d}=e,f=l(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,g=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),b=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},a)),[m,u,a]),w=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),v=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:g,children:[m&&s,(0,r.jsx)(K,Object.assign({ref:t,width:n,height:i,style:b,onLoad:w},f))]})}));U.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:s="after",rootMargin:c="150px 0px"})=>{const{ref:a}=J({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:a}),t,"after"===s&&(0,r.jsx)("div",{ref:a})]})},q=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1}=e,c=l(e,["children","as","asChild"]);const a=s?F:i,{ref:u}=J(c);if(s&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(a,Object.assign({ref:O(t,u)},c,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return E(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=g()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=W(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1,onPointerDown:c,excludeRefs:a=[]}=e,u=l(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:a}),f=s?F:i;if(s&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:O(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:s=1,includeLastSeparator:c=!1})=>{const a=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%s==0),[c,s,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),a(t)&&n]})})},se=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function ae(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function le(e=!0){const t=C(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield b(e);return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),a=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:s,readText:c,readContents:a}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],ge=me("localStorage"),be=e=>window.localStorage.getItem(e),we=e=>JSON.stringify(e),ve=e=>(ge.subscribe(e),()=>{ge.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=C(n)?n():n,i=(0,o.useSyncExternalStore)(ve,(()=>be(t)),(()=>we(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=be(t),o=n?R(n):r,i=C(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),ge.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ge.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>g()?window.matchMedia(e).matches:t??!1;function ke(e,t){const[n,r]=(0,o.useState)(xe(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function Ce(){return ke("(prefers-color-scheme: dark)")?"dark":"light"}const Se="color-scheme";function Ee({defaultValue:e,key:t=Se,shouldSetBodyClass:n=!1}={}){const r=Ce(),i=C(e)?e():e,{state:s,setState:c}=ye({key:t,initialValue:i??r}),a=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),l=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(s),()=>{n&&document.body.classList.remove(s)})),[s,n]),{colorScheme:s,preferredColorScheme:r,setToggleMode:a,setDarkMode:l,setLightMode:u,setPreferredMode:d}}function je(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:s}}function Re({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),s=r0,a=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),l=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const s=a(e,t);o&&o({prev:r,next:s}),i(s)}),[n,r,a]),u=(0,o.useCallback)((e=>{l("nextStep",!s,e)}),[s,l]),d=(0,o.useCallback)((e=>{l("prevStep",!c,e)}),[c,l]),f=(0,o.useCallback)(((t,n)=>{const o=C(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:s,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Oe(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=Re({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}function Ie(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,B(i,t,n)]}function Fe(e,t={}){const[n,r]=(0,o.useState)(""),[i,s]=Ie("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),s(t)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Ne(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Le({onFocus:e=j,onBlur:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=W((t=>{r(!0),e(t)})),c=W((e=>{r(!1),t(e)})),a=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",s),ne(i,"blur",c),{ref:i,isFocus:n,setFocus:a}}function Pe({onEnter:e=j,onLeave:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=W((t=>{r(!0),e(t)})),c=W((e=>{r(!1),t(e)}));return ne(i,"mouseenter",s),ne(i,"mouseleave",c),{ref:i,isHovered:n}}const De=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function Me(e,t){const n=(0,o.useRef)(),r=W(e),{delay:i,enabled:s}=De(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>a()}),[a,c,s,i]),{set:c,reset:l,clear:a}}function Ve({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=W((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];C(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const $e={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Te(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)($e),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:a}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=i-t.left,u=s-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:a,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Ye=()=>navigator.onLine,Xe=()=>!0,Ae=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function We({onlineAction:e=j,offlineAction:t=j}={}){const n=W((n=>Ae(n,e,t)));return(0,o.useSyncExternalStore)(n,Ye,Xe)}function _e(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const ze={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function Be(e=j){const[t,n]=(0,o.useState)(ze),r=(0,o.useRef)(null),i=W((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function He({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:s="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+Je(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+Je(window.innerWidth,r.width,c)};const a=e.getBoundingClientRect();return{top:r.top-a.top+e.scrollTop+i+Je(a.height,r.height,s),left:r.left-a.left+e.scrollLeft+o+Je(a.width,r.width,c)}};function Ue(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:s}=Ke(r,t,n);r.scrollTo({top:s,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=C(n)?n():n,i=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?R(n):r,i=C(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[s,c]=(0,o.useState)(n),a=(0,o.useCallback)((e=>{c((t=>{const n=C(e)?e(t):e;return r&&i&&function(e,t,n){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=C(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),l=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),c(null)}),[r,i]);return Object.assign({state:s,setState:a,clearState:l},Re(e))}function nt(e,t,n={}){const r=W(e),i=z(n),s=(0,o.useMemo)((()=>(0,c.A)(r,t,i)),[r,t,i]);return _((()=>s.cancel())),s}const rt=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=W(e),{delay:i,enabled:s}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>a()}),[c,a,i,s]),{set:c,reset:l,clear:a}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function st(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new a.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const at={width:null,height:null};function lt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?at:{width:window.innerWidth,height:window.innerHeight})),r=B(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:s,reset:c,clear:a}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||c()}),[r,i,c,...n]),{set:s,reset:c,clear:a}}}}]); \ No newline at end of file diff --git a/assets/js/771be322.c8085557.js b/assets/js/771be322.c8085557.js new file mode 100644 index 000000000..bf1a31f9f --- /dev/null +++ b/assets/js/771be322.c8085557.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[588],{5705:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>l,assets:()=>d,contentTitle:()=>s,default:()=>h,frontMatter:()=>a,metadata:()=>r,toc:()=>f});const r=JSON.parse('{"id":"react/hooks/useDebouncedInputValue","title":"useDebouncedInputValue","description":"input value\ub97c \uad00\ub9ac\ud558\uace0, \ub514\ubc14\uc6b4\uc2f1(debouncing)\uc744 \uc801\uc6a9\ud558\ub294 \ucee4\uc2a4\ud140 React \ud6c5\uc785\ub2c8\ub2e4","source":"@site/docs/react/hooks/useDebouncedInputValue.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useDebouncedInputValue","permalink":"/modern-kit/docs/react/hooks/useDebouncedInputValue","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useDebounce","permalink":"/modern-kit/docs/react/hooks/useDebounce"},"next":{"title":"useDebouncedState","permalink":"/modern-kit/docs/react/hooks/useDebouncedState"}}');var o=t(6206),i=t(3267),c=t(4382),u=t(9883);const a={},s="useDebouncedInputValue",d={},l=()=>{const e={button:"button",div:"div",input:"input",p:"p",...(0,i.R)()},{value:n,debouncedValue:t,onChange:r,onReset:a}=function(e,n={}){const[t,r]=(0,c.useState)(""),[o,i]=(0,u.M)("",e,n);return{value:t,debouncedValue:o,onChange:(0,c.useCallback)((e=>{const{value:n}=e.target;r(n),i(n)}),[i]),onReset:(0,c.useCallback)((()=>{r(""),i("")}),[i])}}(500);return(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.p,{children:["\ud604\uc7ac \uc785\ub825 \uac12: ",n]}),(0,o.jsxs)(e.p,{children:["\ub514\ubc14\uc6b4\uc2f1 \uc785\ub825 \uac12: ",t]}),(0,o.jsx)(e.div,{children:(0,o.jsx)(e.input,{type:"text",onChange:r,value:n})}),(0,o.jsx)(e.div,{children:(0,o.jsx)(e.button,{onClick:a,children:"Reset \ubc84\ud2bc"})})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function p(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"usedebouncedinputvalue",children:"useDebouncedInputValue"})}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"input value"}),"\ub97c \uad00\ub9ac\ud558\uace0, ",(0,o.jsx)(n.code,{children:"\ub514\ubc14\uc6b4\uc2f1(debouncing)"}),"\uc744 \uc801\uc6a9\ud558\ub294 \ucee4\uc2a4\ud140 React \ud6c5\uc785\ub2c8\ub2e4"]}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"\ud604\uc7ac \uc785\ub825 \uac12"}),"\uacfc ",(0,o.jsx)(n.code,{children:"\ub514\ubc14\uc6b4\uc2f1\ub41c \uac12"}),"\uc744 \uc81c\uacf5\ud558\uba70, \uac12\uc744 \uc5c5\ub370\uc774\ud2b8\ud558\uace0 \ub9ac\uc14b\ud560 \uc218 \uc788\ub294 \ud568\uc218\ub3c4 \ud568\uaed8 \uc81c\uacf5\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useDebouncedInputValue/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"type DebounceParameters = Parameters;\n"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"function useDebouncedInputValue(\n wait: DebounceParameters[1],\n options?: DebounceParameters[2]\n): {\n value: string;\n debouncedValue: string;\n onChange: (e: ChangeEvent) => void;\n onReset: () => void;\n};\n"})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useState } from 'react';\nimport { useDebouncedInputValue } from '@modern-kit/react';\n\nconst Example = () => {\n const { value, debouncedValue, onChange, onReset } = useDebouncedInputValue(500);\n\n return (\n
\n

\ud604\uc7ac \uc785\ub825 \uac12: {value}

\n

\ub514\ubc14\uc6b4\uc2f1 \uc785\ub825 \uac12: {debouncedValue}

\n
\n \n
\n
\n \n
\n
\n );\n};\n"})}),"\n",(0,o.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(l,{})]})}function h(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},3267:(e,n,t)=>{t.d(n,{R:()=>c,x:()=>u});var r=t(4382);const o={},i=r.createContext(o);function c(e){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function u(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),r.createElement(i.Provider,{value:n},e.children)}},5115:(e,n,t)=>{t.d(n,{d:()=>a});var r=t(4382),o=t(5086),i=t(3311),c=t(6765),u=t(5423);function a(e,n,t){const a=(0,c.p)(e),s=(0,u.B)(t),d=(0,r.useMemo)((()=>(0,o.A)(a,n,s)),[a,n,s]);return(0,i.i)((()=>d.cancel())),d}},9883:(e,n,t)=>{t.d(n,{M:()=>i});var r=t(5115),o=t(4382);function i(e,n,t={}){const[i,c]=(0,o.useState)(e);return[i,(0,r.d)(c,n,t)]}},6765:(e,n,t)=>{t.d(n,{p:()=>o});var r=t(4382);function o(e){const n=(0,r.useRef)(e);return n.current=e,(0,r.useCallback)(((...e)=>n.current(...e)),[])}},5423:(e,n,t)=>{t.d(n,{B:()=>c});var r=t(4382),o=t(6765),i=t(9340);function c(e,n=i.Gp){const[t,c]=(0,r.useState)(e),u=(0,o.p)(n);return(0,r.useEffect)((()=>{u(t,e)||c(e)}),[u,t,e]),t}},3311:(e,n,t)=>{t.d(n,{i:()=>i});var r=t(6765),o=t(4382);function i(e){const n=(0,r.p)(e);(0,o.useEffect)((()=>()=>n()),[n])}},5086:(e,n,t)=>{t.d(n,{A:()=>N});var r=t(322);const o="object"==typeof global&&global&&global.Object===Object&&global;var i="object"==typeof self&&self&&self.Object===Object&&self;const c=o||i||Function("return this")();const u=function(){return c.Date.now()};var a=/\s/;const s=function(e){for(var n=e.length;n--&&a.test(e.charAt(n)););return n};var d=/^\s+/;const l=function(e){return e?e.slice(0,s(e)+1).replace(d,""):e};const f=c.Symbol;var p=Object.prototype,h=p.hasOwnProperty,v=p.toString,m=f?f.toStringTag:void 0;const b=function(e){var n=h.call(e,m),t=e[m];try{e[m]=void 0;var r=!0}catch(i){}var o=v.call(e);return r&&(n?e[m]=t:delete e[m]),o};var g=Object.prototype.toString;const y=function(e){return g.call(e)};var w=f?f.toStringTag:void 0;const x=function(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":w&&w in Object(e)?b(e):y(e)};const j=function(e){return null!=e&&"object"==typeof e};const k=function(e){return"symbol"==typeof e||j(e)&&"[object Symbol]"==x(e)};var C=/^[-+]0x[0-9a-f]+$/i,E=/^0b[01]+$/i,S=/^0o[0-7]+$/i,O=parseInt;const D=function(e){if("number"==typeof e)return e;if(k(e))return NaN;if((0,r.A)(e)){var n="function"==typeof e.valueOf?e.valueOf():e;e=(0,r.A)(n)?n+"":n}if("string"!=typeof e)return 0===e?e:+e;e=l(e);var t=E.test(e);return t||S.test(e)?O(e.slice(2),t?2:8):C.test(e)?NaN:+e};var I=Math.max,$=Math.min;const N=function(e,n,t){var o,i,c,a,s,d,l=0,f=!1,p=!1,h=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function v(n){var t=o,r=i;return o=i=void 0,l=n,a=e.apply(r,t)}function m(e){var t=e-d;return void 0===d||t>=n||t<0||p&&e-l>=c}function b(){var e=u();if(m(e))return g(e);s=setTimeout(b,function(e){var t=n-(e-d);return p?$(t,c-(e-l)):t}(e))}function g(e){return s=void 0,h&&o?v(e):(o=i=void 0,a)}function y(){var e=u(),t=m(e);if(o=arguments,i=this,d=e,t){if(void 0===s)return function(e){return l=e,s=setTimeout(b,n),f?v(e):a}(d);if(p)return clearTimeout(s),s=setTimeout(b,n),v(d)}return void 0===s&&(s=setTimeout(b,n)),a}return n=D(n)||0,(0,r.A)(t)&&(f=!!t.leading,c=(p="maxWait"in t)?I(D(t.maxWait)||0,n):c,h="trailing"in t?!!t.trailing:h),y.cancel=function(){void 0!==s&&clearTimeout(s),l=0,o=d=i=s=void 0},y.flush=function(){return void 0===s?a:g(u())},y}},322:(e,n,t)=>{t.d(n,{A:()=>r});const r=function(e){var n=typeof e;return null!=e&&("object"==n||"function"==n)}},9340:(e,n,t)=>{function r(e,n,t,r){return new(t||(t=Promise))((function(o,i){function c(e){try{a(r.next(e))}catch(n){i(n)}}function u(e){try{a(r.throw(e))}catch(n){i(n)}}function a(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(c,u)}a((r=r.apply(e,n||[])).next())}))}t.d(n,{Et:()=>w,Fr:()=>u,Gp:()=>b,Ol:()=>E,Qd:()=>j,S$:()=>c,Tn:()=>g,Zp:()=>f,dK:()=>s,fl:()=>D,gD:()=>y,i5:()=>h,if:()=>p,l6:()=>k,lQ:()=>C,nS:()=>l,ni:()=>I,oc:()=>a}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,n)=>new Promise(((t,r)=>{e.toBlob((e=>{e?t(e):r(new Error(`Failed to create blob with format ${n}`))}),n)}));function c(){return"undefined"==typeof window}function u(){if(c())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function a(){return!c()}function s(e){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const d=e=>r(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return s(yield n.text())}));function l(e,n){var t;return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return d(e);if(!("write"in window.navigator.clipboard))return d(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return d(e);const c=yield function(e,n="png"){return new Promise(((t,c)=>{const u=new Image;u.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=u.width,e.height=u.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(u,0,0);const c=yield i(e,o[n]);t(c)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),c(r)}})),u.onerror=()=>{c(new Error("Failed to load image"))},u.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[c.type]:c})]),c}catch(c){throw console.error(`Failed to copy to clipboard. message: ${c.message}`),c}}))}function f(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function h(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const v=(e,n,t)=>{const r=Object.keys(e),o=Object.keys(n);if(r.length!==o.length)return!1;for(let i=0;i{if(e===n)return!0;if(w(e)&&w(n)&&isNaN(e)&&isNaN(n))return!0;if(g(e)&&g(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const r=[...e],o=[...n];return v(r,o,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[r,o]of e)if(!n.has(r)||!m(o,n.get(r),t))return!1;return!0}return v(e,n,t)};function b(e,n){return m(e,n,new WeakMap)}function g(e){return"function"==typeof e}function y(e){return null==e}function w(e){return"number"==typeof e}function x(e){return!function(e){return Object(e)!==e}(e)}function j(e){return x(e)&&"[object Object]"===Object.prototype.toString.call(e)}function k(e){return e===window}function C(){}function E(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function S(e){return Object.keys(e)}const O={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};S(O);function D(e,n){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function I(e,n,t){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=g(t)?t():t;r.setItem(n,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${n}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/78bcb238.70a9a9dd.js b/assets/js/78bcb238.70a9a9dd.js new file mode 100644 index 000000000..244b390f9 --- /dev/null +++ b/assets/js/78bcb238.70a9a9dd.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[3582],{7204:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>p,assets:()=>d,contentTitle:()=>i,default:()=>h,frontMatter:()=>a,metadata:()=>o,toc:()=>m});const o=JSON.parse('{"id":"react/components/IfElse","title":"IfElse","description":"IfElse \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc8fc\uc5b4\uc9c4 \uc870\uac74\uc5d0 \ub530\ub77c \ub450 \uac00\uc9c0 \ucef4\ud3ec\ub10c\ud2b8 \uc911 \ud558\ub098\ub97c \ub80c\ub354\ub9c1\ud558\ub294 \uac04\ub2e8\ud55c \ub3c4\uad6c\uc785\ub2c8\ub2e4.","source":"@site/docs/react/components/IfElse.mdx","sourceDirName":"react/components","slug":"/react/components/IfElse","permalink":"/modern-kit/docs/react/components/IfElse","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"FallbackLazyImage","permalink":"/modern-kit/docs/react/components/FallbackLazyImage"},"next":{"title":"InView","permalink":"/modern-kit/docs/react/components/InView"}}');var s=t(6206),r=t(3267),c=t(4382);const l=({condition:e,trueComponent:n,falseComponent:t})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,s.jsx)(c.Fragment,{children:o?n:t})},a={},i="IfElse",d={},p=()=>{const e={button:"button",h1:"h1",...(0,r.R)()},[n,t]=(0,c.useState)(!1);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.button,{onClick:()=>t(!n),children:"Toggle Button"}),(0,s.jsx)(l,{condition:n,trueComponent:(0,s.jsx)(e.h1,{children:"true component"}),falseComponent:(0,s.jsx)(e.h1,{children:"false component"})})]})},m=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function u(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",strong:"strong",...(0,r.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"ifelse",children:"IfElse"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"IfElse"})," \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc8fc\uc5b4\uc9c4 \uc870\uac74\uc5d0 \ub530\ub77c \ub450 \uac00\uc9c0 \ucef4\ud3ec\ub10c\ud2b8 \uc911 \ud558\ub098\ub97c \ub80c\ub354\ub9c1\ud558\ub294 \uac04\ub2e8\ud55c \ub3c4\uad6c\uc785\ub2c8\ub2e4.\n\uc774 \ucef4\ud3ec\ub10c\ud2b8\ub294 ",(0,s.jsx)(n.strong,{children:"condition"}),"\uc774\ub77c\ub294 property\ub97c \ud1b5\ud574 \uc870\uac74\uc744 \uc9c0\uc815\ud558\uace0, \uc870\uac74\uc774 \ucc38(",(0,s.jsx)(n.code,{children:"true"}),")\uc774\uba74 ",(0,s.jsx)(n.code,{children:"trueComponent"}),"\ub97c,\n\uac70\uc9d3(",(0,s.jsx)(n.code,{children:"false"}),")\uc774\uba74 ",(0,s.jsx)(n.code,{children:"falseComponent"}),"\ub97c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4."]}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"condition"})," property\ub294 \ub2e8\uc21c\ud55c ",(0,s.jsx)(n.code,{children:"boolean"}),"\uac12 \ubfd0\ub9cc \uc544\ub2c8\ub77c, ",(0,s.jsx)(n.code,{children:"boolean"}),"\uac12\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\ub3c4 \ud5c8\uc6a9\ub429\ub2c8\ub2e4.\n\uc774 \uacbd\uc6b0, \ucef4\ud3ec\ub10c\ud2b8\ub294 \ud574\ub2f9 \ud568\uc218\ub97c \ud638\ucd9c\ud558\uc5ec \uc870\uac74\uc744 \ud3c9\uac00\ud569\ub2c8\ub2e4."]}),"\n",(0,s.jsx)("br",{}),"\n",(0,s.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/IfElse/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,s.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"type Condition = boolean | (() => boolean);\n\ninterface IfElseProps {\n condition: Condition;\n trueComponent: React.ReactNode;\n falseComponent: React.ReactNode;\n}\n\nconst IfElse = ({ condition, trueComponent, falseComponent }: IfElseProps) => JSX.Element;\n"})}),"\n",(0,s.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { IfElse } from '@modern-kit/react';\n\nconst Example = () => {\n const [state, setState] = useState(false);\n return (\n <>\n \n true component}\n falseComponent={

false component

}\n />\n \n );\n}\n"})}),"\n",(0,s.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,s.jsx)(p,{})]})}function h(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(u,{...e})}):u(e)}},3267:(e,n,t)=>{t.d(n,{R:()=>c,x:()=>l});var o=t(4382);const s={},r=o.createContext(s);function c(e){const n=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:c(e.components),o.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/78bcb238.ec590572.js b/assets/js/78bcb238.ec590572.js deleted file mode 100644 index c5bb9bd4d..000000000 --- a/assets/js/78bcb238.ec590572.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[3582],{2495:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>l,default:()=>p,frontMatter:()=>a,metadata:()=>r,toc:()=>f});const r=JSON.parse('{"id":"react/components/IfElse","title":"IfElse","description":"IfElse \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc8fc\uc5b4\uc9c4 \uc870\uac74\uc5d0 \ub530\ub77c \ub450 \uac00\uc9c0 \ucef4\ud3ec\ub10c\ud2b8 \uc911 \ud558\ub098\ub97c \ub80c\ub354\ub9c1\ud558\ub294 \uac04\ub2e8\ud55c \ub3c4\uad6c\uc785\ub2c8\ub2e4.","source":"@site/docs/react/components/IfElse.mdx","sourceDirName":"react/components","slug":"/react/components/IfElse","permalink":"/modern-kit/docs/react/components/IfElse","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"FallbackLazyImage","permalink":"/modern-kit/docs/react/components/FallbackLazyImage"},"next":{"title":"InView","permalink":"/modern-kit/docs/react/components/InView"}}');var o=n(6206),s=n(3267),i=n(4382),c=n(4027);const a={},l="IfElse",u={},d=()=>{const e={button:"button",h1:"h1",...(0,s.R)()},[t,n]=(0,i.useState)(!1);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.button,{onClick:()=>n(!t),children:"Toggle Button"}),(0,o.jsx)(c.zy,{condition:t,trueComponent:(0,o.jsx)(e.h1,{children:"true component"}),falseComponent:(0,o.jsx)(e.h1,{children:"false component"})})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function h(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",strong:"strong",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"ifelse",children:"IfElse"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"IfElse"})," \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc8fc\uc5b4\uc9c4 \uc870\uac74\uc5d0 \ub530\ub77c \ub450 \uac00\uc9c0 \ucef4\ud3ec\ub10c\ud2b8 \uc911 \ud558\ub098\ub97c \ub80c\ub354\ub9c1\ud558\ub294 \uac04\ub2e8\ud55c \ub3c4\uad6c\uc785\ub2c8\ub2e4.\n\uc774 \ucef4\ud3ec\ub10c\ud2b8\ub294 ",(0,o.jsx)(t.strong,{children:"condition"}),"\uc774\ub77c\ub294 property\ub97c \ud1b5\ud574 \uc870\uac74\uc744 \uc9c0\uc815\ud558\uace0, \uc870\uac74\uc774 \ucc38(",(0,o.jsx)(t.code,{children:"true"}),")\uc774\uba74 ",(0,o.jsx)(t.code,{children:"trueComponent"}),"\ub97c,\n\uac70\uc9d3(",(0,o.jsx)(t.code,{children:"false"}),")\uc774\uba74 ",(0,o.jsx)(t.code,{children:"falseComponent"}),"\ub97c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"condition"})," property\ub294 \ub2e8\uc21c\ud55c ",(0,o.jsx)(t.code,{children:"boolean"}),"\uac12 \ubfd0\ub9cc \uc544\ub2c8\ub77c, ",(0,o.jsx)(t.code,{children:"boolean"}),"\uac12\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\ub3c4 \ud5c8\uc6a9\ub429\ub2c8\ub2e4.\n\uc774 \uacbd\uc6b0, \ucef4\ud3ec\ub10c\ud2b8\ub294 \ud574\ub2f9 \ud568\uc218\ub97c \ud638\ucd9c\ud558\uc5ec \uc870\uac74\uc744 \ud3c9\uac00\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/IfElse/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"type Condition = boolean | (() => boolean);\n\ninterface IfElseProps {\n condition: Condition;\n trueComponent: React.ReactNode;\n falseComponent: React.ReactNode;\n}\n\nconst IfElse = ({ condition, trueComponent, falseComponent }: IfElseProps) => JSX.Element;\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { IfElse } from '@modern-kit/react';\n\nconst Example = () => {\n const [state, setState] = useState(false);\n return (\n <>\n \n true component}\n falseComponent={

false component

}\n />\n \n );\n}\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(d,{})]})}function p(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>$e,$I:()=>oe,AE:()=>Be,BL:()=>H,DX:()=>F,FT:()=>ct,Fo:()=>et,Hn:()=>st,I5:()=>je,JF:()=>Te,K:()=>le,K$:()=>Je,M0:()=>Oe,ML:()=>ne,Mj:()=>ye,Mk:()=>Me,Mo:()=>se,NT:()=>Ve,QV:()=>Ue,Ub:()=>Ce,Ut:()=>Se,W7:()=>U,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>De,Zu:()=>ae,_1:()=>Ie,_g:()=>nt,aL:()=>J,aY:()=>Fe,bB:()=>X,d7:()=>_,eG:()=>it,fN:()=>ce,fm:()=>G,gl:()=>$,hN:()=>A,iD:()=>de,iQ:()=>Le,jd:()=>ie,lW:()=>lt,oD:()=>K,oo:()=>Re,pL:()=>q,qi:()=>ue,rN:()=>Ne,tD:()=>Ee,u8:()=>Q,wY:()=>_e,xV:()=>L,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),s=n(3683),i=n(5086),c=n(7197),a=(n(1604),n(5938));function l(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function g(){return!m()}function w(e){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const b=e=>f(void 0,0,void 0,(function*(){return w(yield(yield fetch(e)).text())}));function v(e,t){var n;return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return b(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const s=yield p(e,h[t]);n(s)}catch(s){console.error(`Failed to load image. message: ${s.mesaage}`),r(s)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let s=0;s{if(e===t||k(e)&&k(t)&&isNaN(e)&&isNaN(t))return!0;if(E(e)&&E(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function C(e,t){return x(e,t,new WeakMap)}function E(e){return"function"==typeof e}function k(e){return"number"==typeof e}function S(e){return!function(e){return Object(e)!==e}(e)}function j(){}function R(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const I=(...e)=>t=>e.forEach((e=>{if(E(e))e(t);else if(null!=e){e.current=t}}));function O(...e){return(0,o.useCallback)(I(...e),e)}const F=o.forwardRef(((e,t)=>{const{children:n}=e,s=l(e,["children"]),i=o.Children.toArray(n),c=i.find(M);if(c){const e=c.props.children,n=i.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(N,Object.assign({},s,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(N,Object.assign({},s,{ref:t,children:n}))}));F.displayName="Slot";const N=o.forwardRef(((e,t)=>{const{children:n}=e,r=l(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],s=t[r];/^on[A-Z]/.test(r)?o&&s?n[r]=(...e)=>{s(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),s):"className"===r&&(n[r]=[o,s].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?I(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));N.displayName="SlotClone";const L=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function M(e){return o.isValidElement(e)&&e.type===L}var P="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const $=d(((e,t)=>{var{ratio:n,style:o,as:i="div",asChild:c=!1}=e,a=l(e,["ratio","style","as","asChild"]);const u=c?F:i,d=Object.assign({aspectRatio:n},o),f=c?a.className:s(P,a.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},a))})),T=()=>j,Y=()=>!1,V=()=>!0;function X({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(T,Y,V)?e:t}function z(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const A=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>z()?(0,r.jsx)(r.Fragment,{children:t}):e;function B(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function D(e){const t=B(e);(0,o.useEffect)((()=>()=>t()),[t])}function W(e,t=C){const[n,r]=(0,o.useState)(e),s=B(t);return(0,o.useEffect)((()=>{s(n,e)||r(e)}),[s,n,e]),n}function _(e,t,n){const r=B(e),s=W(n),c=(0,o.useMemo)((()=>(0,i.A)(r,t,s)),[r,t,s]);return D((()=>c.cancel())),c}const J=({children:e,capture:t,wait:n,options:r})=>{const s=o.Children.only(e),i=_(((...e)=>{const n=s?.props;if(n&&E(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(s,{[t]:i})};function H({onIntersectStart:e=j,onIntersectEnd:t=j,enabled:n=!0,calledOnce:r=!1,root:s=null,threshold:i=0,rootMargin:c="0px 0px 0px 0px"}){const a=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=B((([n],o)=>{if(!n)return;const s=n.target;n.isIntersecting?(l.current=!0,a.current+=1,e(n)):l.current&&(l.current=!1,a.current+=1,t(n)),r&&a.current>1&&o.unobserve(s)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:i,root:s,rootMargin:c}),u.current.observe(e))}),[n,i,s,c,d])}}const K=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:s,rootMargin:i}=e,c=l(e,["src","threshold","root","rootMargin"]);const{ref:a}=H({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:s,rootMargin:i});return(0,r.jsx)("img",Object.assign({ref:O(t,a)},c))}));K.displayName="LazyImage";const U=(0,o.forwardRef)(((e,t)=>{var{width:n,height:s,fallback:i,className:c,style:a,duration:u="0.2s",onLoad:d}=e,f=l(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,g=(0,o.useMemo)((()=>({position:"relative",width:n,height:s})),[n,s]),w=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},a)),[m,u,a]),b=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),v=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:g,children:[m&&i,(0,r.jsx)(K,Object.assign({ref:t,width:n,height:s,style:w,onLoad:b},f))]})}));U.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const s=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:s?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:s,triggerPosition:i="after",rootMargin:c="150px 0px"})=>{const{ref:a}=H({onIntersectStart:e,root:n,threshold:o,enabled:s,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===i&&(0,r.jsx)("div",{ref:a}),t,"after"===i&&(0,r.jsx)("div",{ref:a})]})},q=d(((e,t)=>{var{children:n,as:s="div",asChild:i=!1}=e,c=l(e,["children","as","asChild"]);const a=i?F:s,{ref:u}=H(c);if(i&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(a,Object.assign({ref:I(t,u)},c,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const s=(0,o.useCallback)(((e,n)=>function(e){return S(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},s(e,t))))})},ee=g()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=B(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),s=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,s,(({target:t})=>{if(!r.current)return;const o=r.current,s=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!s&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:s="div",asChild:i=!1,onPointerDown:c,excludeRefs:a=[]}=e,u=l(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:a}),f=i?F:s;if(i&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:I(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const se=({itemKey:e,items:t=[],separator:n,renderItem:s,separatorInterval:i=1,includeLastSeparator:c=!1})=>{const a=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%i==0),[c,i,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[s(e,t),a(t)&&n]})})},ie=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function ae(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function le(e=!0){const t=E(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!s.current){s.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{s.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),s=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield w(e);return t(n),!0}catch{return t(null),!1}}))),[]),i=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),a=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:s,copyImage:i,readText:c,readContents:a}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],ge=me("localStorage"),we=e=>window.localStorage.getItem(e),be=e=>JSON.stringify(e),ve=e=>(ge.subscribe(e),()=>{ge.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=E(n)?n():n,s=(0,o.useSyncExternalStore)(ve,(()=>we(t)),(()=>be(r)));return{state:(0,o.useMemo)((()=>s?R(s):r),[s,r]),setState:(0,o.useCallback)((e=>{try{const n=we(t),o=n?R(n):r,s=E(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(s)),ge.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ge.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>g()?window.matchMedia(e).matches:t??!1;function Ce(e,t){const[n,r]=(0,o.useState)(xe(e,t)),s=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",s),n}function Ee(){return Ce("(prefers-color-scheme: dark)")?"dark":"light"}const ke="color-scheme";function Se({defaultValue:e,key:t=ke,shouldSetBodyClass:n=!1}={}){const r=Ee(),s=E(e)?e():e,{state:i,setState:c}=ye({key:t,initialValue:s??r}),a=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),l=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(i),()=>{n&&document.body.classList.remove(i)})),[i,n]),{colorScheme:i,preferredColorScheme:r,setToggleMode:a,setDarkMode:l,setLightMode:u,setPreferredMode:d}}function je(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),s=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),i=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:s,reset:i}}function Re({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,s]=(0,o.useState)(t),i=r0,a=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),l=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const i=a(e,t);o&&o({prev:r,next:i}),s(i)}),[n,r,a]),u=(0,o.useCallback)((e=>{l("nextStep",!i,e)}),[i,l]),d=(0,o.useCallback)((e=>{l("prevStep",!c,e)}),[c,l]),f=(0,o.useCallback)(((t,n)=>{const o=E(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void s(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),s(t)}),[r,t]);return{currentStep:r,hasNextStep:i,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Ie(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:s,resetStep:i}=Re({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:s,resetIndex:i}}function Oe(e,t,n={}){const[r,s]=(0,o.useState)(e);return[r,_(s,t,n)]}function Fe(e,t={}){const[n,r]=(0,o.useState)(""),[s,i]=Oe("",e,t);return{value:n,debouncedValue:s,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),i(t)}),[i]),onReset:(0,o.useCallback)((()=>{r(""),i("")}),[i])}}function Ne(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Le({onFocus:e=j,onBlur:t=j}={}){const[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(null),i=B((t=>{r(!0),e(t)})),c=B((e=>{r(!1),t(e)})),a=(0,o.useCallback)((()=>{s.current&&(s.current.focus(),r(!0))}),[]);return ne(s,"focus",i),ne(s,"blur",c),{ref:s,isFocus:n,setFocus:a}}function Me({onEnter:e=j,onLeave:t=j}={}){const[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(null),i=B((t=>{r(!0),e(t)})),c=B((e=>{r(!1),t(e)}));return ne(s,"mouseenter",i),ne(s,"mouseleave",c),{ref:s,isHovered:n}}const Pe=e=>{var t;return k(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function $e(e,t){const n=(0,o.useRef)(),r=B(e),{delay:s,enabled:i}=Pe(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,s)}),[r,s]),a=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(s<0)&&i)return c(),()=>a()}),[a,c,i,s]),{set:c,reset:l,clear:a}}function Te({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),s=B((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];E(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",s),()=>t.removeEventListener("keydown",s)}),[e,s]),r}const Ye={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Ve(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Ye),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:s,clientY:i,pageX:c,pageY:a}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=s-t.left,u=i-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:s,clientY:i,pageX:c,pageY:a,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Xe=()=>navigator.onLine,ze=()=>!0,Ae=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function Be({onlineAction:e=j,offlineAction:t=j}={}){const n=B((n=>Ae(n,e,t)));return(0,o.useSyncExternalStore)(n,Xe,ze)}function De(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const We={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function _e(e=j){const[t,n]=(0,o.useState)(We),r=(0,o.useRef)(null),s=B((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(s);return t.observe(e),()=>{t.unobserve(e)}}),[s]),{ref:r,contentRect:t}}function Je({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),s=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>s())),[e,r,s]),{ref:t,lock:r,unlock:s}}const He=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:s=0,alignY:i="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+s+He(window.innerHeight,r.height,i),left:r.left+window.scrollX+o+He(window.innerWidth,r.width,c)};const a=e.getBoundingClientRect();return{top:r.top-a.top+e.scrollTop+s+He(a.height,r.height,i),left:r.left-a.left+e.scrollLeft+o+He(a.width,r.width,c)}};function Ue(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:s,top:i}=Ke(r,t,n);r.scrollTo({top:i,left:s,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=E(n)?n():n,s=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>s?R(s):r),[s,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?R(n):r,s=E(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(s)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:s}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[i,c]=(0,o.useState)(n),a=(0,o.useCallback)((e=>{c((t=>{const n=E(e)?e(t):e;return r&&s&&function(e,t,n){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=E(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,s,n),n}))}),[r,s]),l=(0,o.useCallback)((()=>{r&&s&&function(e,t){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,s),c(null)}),[r,s]);return Object.assign({state:i,setState:a,clearState:l},Re(e))}function nt(e,t,n={}){const r=B(e),s=W(n),i=(0,o.useMemo)((()=>(0,c.A)(r,t,s)),[r,t,s]);return D((()=>i.cancel())),i}const rt=e=>{var t;return k(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=B(e),{delay:s,enabled:i}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,s)}),[r,s]),a=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(s<0)&&i)return c(),()=>a()}),[c,a,s,i]),{set:c,reset:l,clear:a}}function st(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function it(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new a.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const at={width:null,height:null};function lt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?at:{width:window.innerWidth,height:window.innerHeight})),r=_(n,e),s=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",s),t}function ut(e,t,n){const{delay:r,enabled:s}=rt(t),{set:i,reset:c,clear:a}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!s||c()}),[r,s,c,...n]),{set:i,reset:c,clear:a}}}}]); \ No newline at end of file diff --git a/assets/js/7b61a3fa.7e7d5f1c.js b/assets/js/7b61a3fa.7e7d5f1c.js new file mode 100644 index 000000000..aee66fe68 --- /dev/null +++ b/assets/js/7b61a3fa.7e7d5f1c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[3912],{125:(e,n,l)=>{l.r(n),l.d(n,{Example:()=>d,assets:()=>u,contentTitle:()=>a,default:()=>k,frontMatter:()=>r,metadata:()=>t,toc:()=>p});const t=JSON.parse('{"id":"react/hooks/useBlockMultipleAsyncCalls","title":"useBlockMultipleAsyncCalls","description":"useBlockMultipleAsyncCalls \ud6c5\uc740 \uc9c4\ud589 \uc911\uc778 \ube44\ub3d9\uae30 \ud638\ucd9c\uc774 \uc788\uc744 \ub54c \uc911\ubcf5 \ud638\ucd9c\uc744 \ubc29\uc9c0\ud558\uae30 \uc704\ud55c \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useBlockMultipleAsyncCalls.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useBlockMultipleAsyncCalls","permalink":"/modern-kit/docs/react/hooks/useBlockMultipleAsyncCalls","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useBeforeUnload","permalink":"/modern-kit/docs/react/hooks/useBeforeUnload"},"next":{"title":"useClipboard","permalink":"/modern-kit/docs/react/hooks/useClipboard"}}');var s=l(6206),o=l(3267),c=l(4382),i=l(4076);const r={},a="useBlockMultipleAsyncCalls",u={},d=()=>{const e={button:"button",div:"div",p:"p",...(0,o.R)()},[n,l]=(0,c.useState)(1),[t,r]=(0,c.useState)(1),[a,u]=(0,c.useState)(null),{isLoading:d,blockMultipleAsyncCalls:p}=function(){const[e,n]=(0,c.useState)(!1),[l,t]=(0,c.useState)(!1),s=(0,c.useRef)(!1);return{isError:l,isLoading:e,blockMultipleAsyncCalls:(0,c.useCallback)((e=>(0,i.a)(this,void 0,void 0,(function*(){if(!s.current){s.current=!0,n(!0),t(!1);try{return yield e()}catch(l){throw t(!0),l}finally{s.current=!1,n(!1)}}}))),[])}}(),h=async()=>{const e=await fetch(`https://jsonplaceholder.typicode.com/todos/${n}`).then((e=>e.json()));u(e),l(n+1)};return(0,s.jsxs)(e.div,{children:[(0,s.jsx)(e.button,{onClick:()=>{r(t+1),p(h)},children:"\ubc84\ud2bc \ud074\ub9ad"}),(0,s.jsxs)(e.div,{children:[(0,s.jsxs)(e.p,{children:["BlockingCount: ",n]}),(0,s.jsxs)(e.p,{children:["NonBlockingCount: ",t]})]}),d?(0,s.jsx)(e.p,{children:"\ub85c\ub529\uc911"}):(0,s.jsx)(e.p,{children:a?.title})]})},p=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function h(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",ul:"ul",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"useblockmultipleasynccalls",children:"useBlockMultipleAsyncCalls"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"useBlockMultipleAsyncCalls"})," \ud6c5\uc740 \uc9c4\ud589 \uc911\uc778 \ube44\ub3d9\uae30 \ud638\ucd9c\uc774 \uc788\uc744 \ub54c \uc911\ubcf5 \ud638\ucd9c\uc744 \ubc29\uc9c0\ud558\uae30 \uc704\ud55c \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"debounce"}),"\ub294 \ud568\uc218\uc758 \uc911\ubcf5 \ud638\ucd9c\uc744 \ubc29\uc9c0\ud558\ub294 \ub370 \ub300\ubd80\ubd84\uc758 \uacbd\uc6b0\uc5d0 \ud6a8\uacfc\uc801\uc785\ub2c8\ub2e4.\n\ud558\uc9c0\ub9cc, ",(0,s.jsx)(n.code,{children:"debounce"}),"\ub294 \ube44\ub3d9\uae30 \uc791\uc5c5\uc758 \uc644\ub8cc\ub97c \ubcf4\uc7a5\ud558\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0 \ub2e4\uc74c\uacfc \uac19\uc740 \ud55c\uacc4\uac00 \uc788\uc2b5\ub2c8\ub2e4:"]}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"debounce"})," \uc2dc\uac04\uc774 API \uc751\ub2f5 \uc2dc\uac04\ubcf4\ub2e4 \uc9e7\uc744 \uacbd\uc6b0: \ube44\ub3d9\uae30 \uc791\uc5c5\uc774 \uc644\ub8cc\ub418\uc9c0 \uc54a\uc740 \uc0c1\ud0dc\uc5d0\uc11c ",(0,s.jsx)(n.code,{children:"\ub2e4\uc2dc \ud638\ucd9c"}),"\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"debounce"})," \uc2dc\uac04\uc774 API \uc751\ub2f5 \uc2dc\uac04\ubcf4\ub2e4 \uae38 \uacbd\uc6b0: \ube44\ub3d9\uae30 \uc791\uc5c5\uc774 \uc644\ub8cc\ub418\uc5c8\uc9c0\ub9cc ",(0,s.jsx)(n.code,{children:"\ubc84\ud2bc"}),"\uacfc \uac19\uc740 \uc694\uc18c\uac00 \uc5ec\uc804\ud788 ",(0,s.jsx)(n.code,{children:"\ube44\ud65c\uc131\ud654"}),"\ub418\uc5b4 \uc788\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"\uc989\uac01\uc801\uc778 \ubc18\uc751"}),"\uc744 \uc6d0\ud558\ub294 \uacbd\uc6b0: ",(0,s.jsx)(n.code,{children:"debounce"}),"\ub294 \ud638\ucd9c\uc744 \uc9c0\uc5f0\uc2dc\ud0a4\uae30 \ub54c\ubb38\uc5d0 \uc0ac\uc6a9\uc790\uc5d0\uac8c ",(0,s.jsx)(n.code,{children:"\uc989\uac01\uc801\uc778 \ubc18\uc751"}),"\uc744 \ubcf4\uc5ec\uc8fc\uae30\uc5d0 \uc81c\ud55c\uc801\uc785\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["\ub300\ubd80\ubd84\uc758 \uacbd\uc6b0\uc5d0 ",(0,s.jsx)(n.code,{children:"debounce"}),"\ub9cc\uc73c\ub85c \ucda9\ubd84\ud558\uc9c0\ub9cc, \uc704\uc640 \uac19\uc740 \ud55c\uacc4\uc810\uc744 \ub300\uc751\ud558\uace0\uc790 \ud55c\ub2e4\uba74 ",(0,s.jsx)(n.code,{children:"useBlockMultipleAsyncCalls"}),"\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useDebounce/index.ts",children:"useDebounce"})}),"\n"]}),"\n",(0,s.jsx)("br",{}),"\n",(0,s.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useBlockMultipleAsyncCalls/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,s.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseBlockMultipleAsyncCallsReturnType {\n isError: boolean;\n isLoading: boolean;\n blockMultipleAsyncCalls: (\n callback: () => Promise\n ) => Promise;\n}\n"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"function useBlockMultipleAsyncCalls(): UseBlockMultipleAsyncCallsReturnType\n"})}),"\n",(0,s.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import React, { useState } from 'react';\nimport { useBlockMultipleAsyncCalls } from '@modern-kit/react';\n\ninterface Value {\n userId: number;\n id: number;\n title: string;\n completed: boolean;\n}\n\nconst Example = () => {\n const [blockingCount, setBlockingCount] = useState(1);\n const [nonBlockingCount, setNonBlockingCount] = useState(1);\n const [value, setValue] = useState(null);\n\n const { isError, isLoading, blockMultipleAsyncCalls } = useBlockMultipleAsyncCalls();\n\n const fetchApi = async () => {\n const res = await fetch(\n `https://jsonplaceholder.typicode.com/todos/${blockingCount}`\n ).then((response) => response.json());\n\n setValue(res);\n setBlockingCount(blockingCount + 1);\n };\n\n const handleClick = () => {\n setNonBlockingCount(nonBlockingCount + 1);\n blockMultipleAsyncCalls(fetchApi); // (*) Promise \ubc18\ud658\ud558\ub294 \ud568\uc218\ub97c \uc778\uc790\ub85c \ub123\uc5b4\uc8fc\uc138\uc694.\n };\n\n return (\n
\n \n
\n

BlockingCount: {blockingCount}

\n

NonBlockingCount: {nonBlockingCount}

\n
\n {isLoading ?

\ub85c\ub529\uc911

:

{value?.title}

}\n {isError &&

\uc5d0\ub7ec \ubc1c\uc0dd

}\n
\n );\n};\n"})}),"\n",(0,s.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,s.jsx)(d,{})]})}function k(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},4076:(e,n,l)=>{function t(e,n){var l={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&n.indexOf(t)<0&&(l[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(t=Object.getOwnPropertySymbols(e);st,a:()=>s}),"function"==typeof SuppressedError&&SuppressedError},3267:(e,n,l)=>{l.d(n,{R:()=>c,x:()=>i});var t=l(4382);const s={},o=t.createContext(s);function c(e){const n=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:c(e.components),t.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/7b61a3fa.962828ef.js b/assets/js/7b61a3fa.962828ef.js deleted file mode 100644 index 8ab7d0de2..000000000 --- a/assets/js/7b61a3fa.962828ef.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[3912],{3758:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>a,default:()=>p,frontMatter:()=>l,metadata:()=>r,toc:()=>f});const r=JSON.parse('{"id":"react/hooks/useBlockMultipleAsyncCalls","title":"useBlockMultipleAsyncCalls","description":"useBlockMultipleAsyncCalls \ud6c5\uc740 \uc9c4\ud589 \uc911\uc778 \ube44\ub3d9\uae30 \ud638\ucd9c\uc774 \uc788\uc744 \ub54c \uc911\ubcf5 \ud638\ucd9c\uc744 \ubc29\uc9c0\ud558\uae30 \uc704\ud55c \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useBlockMultipleAsyncCalls.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useBlockMultipleAsyncCalls","permalink":"/modern-kit/docs/react/hooks/useBlockMultipleAsyncCalls","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useBeforeUnload","permalink":"/modern-kit/docs/react/hooks/useBeforeUnload"},"next":{"title":"useClipboard","permalink":"/modern-kit/docs/react/hooks/useClipboard"}}');var o=n(6206),s=n(3267),i=n(4382),c=n(4027);const l={},a="useBlockMultipleAsyncCalls",u={},d=()=>{const e={button:"button",div:"div",p:"p",...(0,s.R)()},[t,n]=(0,i.useState)(1),[r,l]=(0,i.useState)(1),[a,u]=(0,i.useState)(null),{isLoading:d,blockMultipleAsyncCalls:f}=(0,c.qi)(),h=async()=>{const e=await fetch(`https://jsonplaceholder.typicode.com/todos/${t}`).then((e=>e.json()));u(e),n(t+1)};return(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.button,{onClick:()=>{l(r+1),f(h)},children:"\ubc84\ud2bc \ud074\ub9ad"}),(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.p,{children:["BlockingCount: ",t]}),(0,o.jsxs)(e.p,{children:["NonBlockingCount: ",r]})]}),d?(0,o.jsx)(e.p,{children:"\ub85c\ub529\uc911"}):(0,o.jsx)(e.p,{children:a?.title})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function h(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",ul:"ul",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"useblockmultipleasynccalls",children:"useBlockMultipleAsyncCalls"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"useBlockMultipleAsyncCalls"})," \ud6c5\uc740 \uc9c4\ud589 \uc911\uc778 \ube44\ub3d9\uae30 \ud638\ucd9c\uc774 \uc788\uc744 \ub54c \uc911\ubcf5 \ud638\ucd9c\uc744 \ubc29\uc9c0\ud558\uae30 \uc704\ud55c \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"debounce"}),"\ub294 \ud568\uc218\uc758 \uc911\ubcf5 \ud638\ucd9c\uc744 \ubc29\uc9c0\ud558\ub294 \ub370 \ub300\ubd80\ubd84\uc758 \uacbd\uc6b0\uc5d0 \ud6a8\uacfc\uc801\uc785\ub2c8\ub2e4.\n\ud558\uc9c0\ub9cc, ",(0,o.jsx)(t.code,{children:"debounce"}),"\ub294 \ube44\ub3d9\uae30 \uc791\uc5c5\uc758 \uc644\ub8cc\ub97c \ubcf4\uc7a5\ud558\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0 \ub2e4\uc74c\uacfc \uac19\uc740 \ud55c\uacc4\uac00 \uc788\uc2b5\ub2c8\ub2e4:"]}),"\n",(0,o.jsxs)(t.ol,{children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"debounce"})," \uc2dc\uac04\uc774 API \uc751\ub2f5 \uc2dc\uac04\ubcf4\ub2e4 \uc9e7\uc744 \uacbd\uc6b0: \ube44\ub3d9\uae30 \uc791\uc5c5\uc774 \uc644\ub8cc\ub418\uc9c0 \uc54a\uc740 \uc0c1\ud0dc\uc5d0\uc11c ",(0,o.jsx)(t.code,{children:"\ub2e4\uc2dc \ud638\ucd9c"}),"\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"debounce"})," \uc2dc\uac04\uc774 API \uc751\ub2f5 \uc2dc\uac04\ubcf4\ub2e4 \uae38 \uacbd\uc6b0: \ube44\ub3d9\uae30 \uc791\uc5c5\uc774 \uc644\ub8cc\ub418\uc5c8\uc9c0\ub9cc ",(0,o.jsx)(t.code,{children:"\ubc84\ud2bc"}),"\uacfc \uac19\uc740 \uc694\uc18c\uac00 \uc5ec\uc804\ud788 ",(0,o.jsx)(t.code,{children:"\ube44\ud65c\uc131\ud654"}),"\ub418\uc5b4 \uc788\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"\uc989\uac01\uc801\uc778 \ubc18\uc751"}),"\uc744 \uc6d0\ud558\ub294 \uacbd\uc6b0: ",(0,o.jsx)(t.code,{children:"debounce"}),"\ub294 \ud638\ucd9c\uc744 \uc9c0\uc5f0\uc2dc\ud0a4\uae30 \ub54c\ubb38\uc5d0 \uc0ac\uc6a9\uc790\uc5d0\uac8c ",(0,o.jsx)(t.code,{children:"\uc989\uac01\uc801\uc778 \ubc18\uc751"}),"\uc744 \ubcf4\uc5ec\uc8fc\uae30\uc5d0 \uc81c\ud55c\uc801\uc785\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsxs)(t.p,{children:["\ub300\ubd80\ubd84\uc758 \uacbd\uc6b0\uc5d0 ",(0,o.jsx)(t.code,{children:"debounce"}),"\ub9cc\uc73c\ub85c \ucda9\ubd84\ud558\uc9c0\ub9cc, \uc704\uc640 \uac19\uc740 \ud55c\uacc4\uc810\uc744 \ub300\uc751\ud558\uace0\uc790 \ud55c\ub2e4\uba74 ",(0,o.jsx)(t.code,{children:"useBlockMultipleAsyncCalls"}),"\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useDebounce/index.ts",children:"useDebounce"})}),"\n"]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useBlockMultipleAsyncCalls/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseBlockMultipleAsyncCallsReturnType {\n isError: boolean;\n isLoading: boolean;\n blockMultipleAsyncCalls: (\n callback: () => Promise\n ) => Promise;\n}\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useBlockMultipleAsyncCalls(): UseBlockMultipleAsyncCallsReturnType\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import React, { useState } from 'react';\nimport { useBlockMultipleAsyncCalls } from '@modern-kit/react';\n\ninterface Value {\n userId: number;\n id: number;\n title: string;\n completed: boolean;\n}\n\nconst Example = () => {\n const [blockingCount, setBlockingCount] = useState(1);\n const [nonBlockingCount, setNonBlockingCount] = useState(1);\n const [value, setValue] = useState(null);\n\n const { isError, isLoading, blockMultipleAsyncCalls } = useBlockMultipleAsyncCalls();\n\n const fetchApi = async () => {\n const res = await fetch(\n `https://jsonplaceholder.typicode.com/todos/${blockingCount}`\n ).then((response) => response.json());\n\n setValue(res);\n setBlockingCount(blockingCount + 1);\n };\n\n const handleClick = () => {\n setNonBlockingCount(nonBlockingCount + 1);\n blockMultipleAsyncCalls(fetchApi); // (*) Promise \ubc18\ud658\ud558\ub294 \ud568\uc218\ub97c \uc778\uc790\ub85c \ub123\uc5b4\uc8fc\uc138\uc694.\n };\n\n return (\n
\n \n
\n

BlockingCount: {blockingCount}

\n

NonBlockingCount: {nonBlockingCount}

\n
\n {isLoading ?

\ub85c\ub529\uc911

:

{value?.title}

}\n {isError &&

\uc5d0\ub7ec \ubc1c\uc0dd

}\n
\n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(d,{})]})}function p(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>Fe,$I:()=>oe,AE:()=>Xe,BL:()=>J,DX:()=>B,FT:()=>ct,Fo:()=>et,Hn:()=>st,I5:()=>Ee,JF:()=>Pe,K:()=>ae,K$:()=>Ue,M0:()=>Oe,ML:()=>ne,Mj:()=>ve,Mk:()=>Ae,Mo:()=>se,NT:()=>Te,QV:()=>Ke,Ub:()=>xe,Ut:()=>Se,W7:()=>K,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>We,Zu:()=>le,_1:()=>Me,_g:()=>nt,aL:()=>U,aY:()=>Be,bB:()=>V,d7:()=>z,eG:()=>it,fN:()=>ce,fm:()=>G,gl:()=>F,hN:()=>D,iD:()=>de,iQ:()=>Ne,jd:()=>ie,lW:()=>at,oD:()=>H,oo:()=>Re,pL:()=>Q,qi:()=>ue,rN:()=>Ie,tD:()=>Ce,u8:()=>q,wY:()=>ze,xV:()=>N,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),s=n(3683),i=n(5086),c=n(7197),l=(n(1604),n(5938));function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function g(){return!m()}function b(e){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const w=e=>f(void 0,0,void 0,(function*(){return b(yield(yield fetch(e)).text())}));function y(e,t){var n;return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return w(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const s=yield p(e,h[t]);n(s)}catch(s){console.error(`Failed to load image. message: ${s.mesaage}`),r(s)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const v=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let s=0;s{if(e===t||j(e)&&j(t)&&isNaN(e)&&isNaN(t))return!0;if(C(e)&&C(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return v(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!k(o,t.get(r),n))return!1;return!0}return v(e,t,n)};function x(e,t){return k(e,t,new WeakMap)}function C(e){return"function"==typeof e}function j(e){return"number"==typeof e}function S(e){return!function(e){return Object(e)!==e}(e)}function E(){}function R(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const M=(...e)=>t=>e.forEach((e=>{if(C(e))e(t);else if(null!=e){e.current=t}}));function O(...e){return(0,o.useCallback)(M(...e),e)}const B=o.forwardRef(((e,t)=>{const{children:n}=e,s=a(e,["children"]),i=o.Children.toArray(n),c=i.find(A);if(c){const e=c.props.children,n=i.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(I,Object.assign({},s,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(I,Object.assign({},s,{ref:t,children:n}))}));B.displayName="Slot";const I=o.forwardRef(((e,t)=>{const{children:n}=e,r=a(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],s=t[r];/^on[A-Z]/.test(r)?o&&s?n[r]=(...e)=>{s(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),s):"className"===r&&(n[r]=[o,s].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?M(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));I.displayName="SlotClone";const N=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function A(e){return o.isValidElement(e)&&e.type===N}var L="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const F=d(((e,t)=>{var{ratio:n,style:o,as:i="div",asChild:c=!1}=e,l=a(e,["ratio","style","as","asChild"]);const u=c?B:i,d=Object.assign({aspectRatio:n},o),f=c?l.className:s(L,l.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},l))})),P=()=>E,$=()=>!1,T=()=>!0;function V({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(P,$,T)?e:t}function Y(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const D=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>Y()?(0,r.jsx)(r.Fragment,{children:t}):e;function X(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function W(e){const t=X(e);(0,o.useEffect)((()=>()=>t()),[t])}function _(e,t=x){const[n,r]=(0,o.useState)(e),s=X(t);return(0,o.useEffect)((()=>{s(n,e)||r(e)}),[s,n,e]),n}function z(e,t,n){const r=X(e),s=_(n),c=(0,o.useMemo)((()=>(0,i.A)(r,t,s)),[r,t,s]);return W((()=>c.cancel())),c}const U=({children:e,capture:t,wait:n,options:r})=>{const s=o.Children.only(e),i=z(((...e)=>{const n=s?.props;if(n&&C(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(s,{[t]:i})};function J({onIntersectStart:e=E,onIntersectEnd:t=E,enabled:n=!0,calledOnce:r=!1,root:s=null,threshold:i=0,rootMargin:c="0px 0px 0px 0px"}){const l=(0,o.useRef)(0),a=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=X((([n],o)=>{if(!n)return;const s=n.target;n.isIntersecting?(a.current=!0,l.current+=1,e(n)):a.current&&(a.current=!1,l.current+=1,t(n)),r&&l.current>1&&o.unobserve(s)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:i,root:s,rootMargin:c}),u.current.observe(e))}),[n,i,s,c,d])}}const H=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:s,rootMargin:i}=e,c=a(e,["src","threshold","root","rootMargin"]);const{ref:l}=J({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:s,rootMargin:i});return(0,r.jsx)("img",Object.assign({ref:O(t,l)},c))}));H.displayName="LazyImage";const K=(0,o.forwardRef)(((e,t)=>{var{width:n,height:s,fallback:i,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=a(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,g=(0,o.useMemo)((()=>({position:"relative",width:n,height:s})),[n,s]),b=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},l)),[m,u,l]),w=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),y=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:y,style:g,children:[m&&i,(0,r.jsx)(H,Object.assign({ref:t,width:n,height:s,style:b,onLoad:w},f))]})}));K.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const s=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:s?t:n})},q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:s,triggerPosition:i="after",rootMargin:c="150px 0px"})=>{const{ref:l}=J({onIntersectStart:e,root:n,threshold:o,enabled:s,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===i&&(0,r.jsx)("div",{ref:l}),t,"after"===i&&(0,r.jsx)("div",{ref:l})]})},Q=d(((e,t)=>{var{children:n,as:s="div",asChild:i=!1}=e,c=a(e,["children","as","asChild"]);const l=i?B:s,{ref:u}=J(c);if(i&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(l,Object.assign({ref:M(t,u)},c,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const s=(0,o.useCallback)(((e,n)=>function(e){return S(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},s(e,t))))})},ee=g()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=X(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),s=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,s,(({target:t})=>{if(!r.current)return;const o=r.current,s=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!s&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:s="div",asChild:i=!1,onPointerDown:c,excludeRefs:l=[]}=e,u=a(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:l}),f=i?B:s;if(i&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:M(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const se=({itemKey:e,items:t=[],separator:n,renderItem:s,separatorInterval:i=1,includeLastSeparator:c=!1})=>{const l=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%i==0),[c,i,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[s(e,t),l(t)&&n]})})},ie=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function le(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function ae(e=!0){const t=C(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!s.current){s.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{s.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),s=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield b(e);return t(n),!0}catch{return t(null),!1}}))),[]),i=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield y(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),l=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:s,copyImage:i,readText:c,readContents:l}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],ge=me("localStorage"),be=e=>window.localStorage.getItem(e),we=e=>JSON.stringify(e),ye=e=>(ge.subscribe(e),()=>{ge.unsubscribe(e)});function ve(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=C(n)?n():n,s=(0,o.useSyncExternalStore)(ye,(()=>be(t)),(()=>we(r)));return{state:(0,o.useMemo)((()=>s?R(s):r),[s,r]),setState:(0,o.useCallback)((e=>{try{const n=be(t),o=n?R(n):r,s=C(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(s)),ge.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ge.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const ke=(e,t)=>g()?window.matchMedia(e).matches:t??!1;function xe(e,t){const[n,r]=(0,o.useState)(ke(e,t)),s=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",s),n}function Ce(){return xe("(prefers-color-scheme: dark)")?"dark":"light"}const je="color-scheme";function Se({defaultValue:e,key:t=je,shouldSetBodyClass:n=!1}={}){const r=Ce(),s=C(e)?e():e,{state:i,setState:c}=ve({key:t,initialValue:s??r}),l=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),a=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(i),()=>{n&&document.body.classList.remove(i)})),[i,n]),{colorScheme:i,preferredColorScheme:r,setToggleMode:l,setDarkMode:a,setLightMode:u,setPreferredMode:d}}function Ee(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),s=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),i=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:s,reset:i}}function Re({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,s]=(0,o.useState)(t),i=r0,l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),a=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const i=l(e,t);o&&o({prev:r,next:i}),s(i)}),[n,r,l]),u=(0,o.useCallback)((e=>{a("nextStep",!i,e)}),[i,a]),d=(0,o.useCallback)((e=>{a("prevStep",!c,e)}),[c,a]),f=(0,o.useCallback)(((t,n)=>{const o=C(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void s(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),s(t)}),[r,t]);return{currentStep:r,hasNextStep:i,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Me(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:s,resetStep:i}=Re({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:s,resetIndex:i}}function Oe(e,t,n={}){const[r,s]=(0,o.useState)(e);return[r,z(s,t,n)]}function Be(e,t={}){const[n,r]=(0,o.useState)(""),[s,i]=Oe("",e,t);return{value:n,debouncedValue:s,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),i(t)}),[i]),onReset:(0,o.useCallback)((()=>{r(""),i("")}),[i])}}function Ie(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onFocus:e=E,onBlur:t=E}={}){const[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(null),i=X((t=>{r(!0),e(t)})),c=X((e=>{r(!1),t(e)})),l=(0,o.useCallback)((()=>{s.current&&(s.current.focus(),r(!0))}),[]);return ne(s,"focus",i),ne(s,"blur",c),{ref:s,isFocus:n,setFocus:l}}function Ae({onEnter:e=E,onLeave:t=E}={}){const[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(null),i=X((t=>{r(!0),e(t)})),c=X((e=>{r(!1),t(e)}));return ne(s,"mouseenter",i),ne(s,"mouseleave",c),{ref:s,isHovered:n}}const Le=e=>{var t;return j(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function Fe(e,t){const n=(0,o.useRef)(),r=X(e),{delay:s,enabled:i}=Le(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,s)}),[r,s]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(s<0)&&i)return c(),()=>l()}),[l,c,i,s]),{set:c,reset:a,clear:l}}function Pe({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),s=X((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];C(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",s),()=>t.removeEventListener("keydown",s)}),[e,s]),r}const $e={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Te(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)($e),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:s,clientY:i,pageX:c,pageY:l}=t;let a=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();a=s-t.left,u=i-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:s,clientY:i,pageX:c,pageY:l,elementRelativeX:a,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Ve=()=>navigator.onLine,Ye=()=>!0,De=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function Xe({onlineAction:e=E,offlineAction:t=E}={}){const n=X((n=>De(n,e,t)));return(0,o.useSyncExternalStore)(n,Ve,Ye)}function We(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const _e={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function ze(e=E){const[t,n]=(0,o.useState)(_e),r=(0,o.useRef)(null),s=X((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(s);return t.observe(e),()=>{t.unobserve(e)}}),[s]),{ref:r,contentRect:t}}function Ue({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),s=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>s())),[e,r,s]),{ref:t,lock:r,unlock:s}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:s=0,alignY:i="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+s+Je(window.innerHeight,r.height,i),left:r.left+window.scrollX+o+Je(window.innerWidth,r.width,c)};const l=e.getBoundingClientRect();return{top:r.top-l.top+e.scrollTop+s+Je(l.height,r.height,i),left:r.left-l.left+e.scrollLeft+o+Je(l.width,r.width,c)}};function Ke(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:s,top:i}=He(r,t,n);r.scrollTo({top:i,left:s,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),qe=e=>window.sessionStorage.getItem(e),Qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=C(n)?n():n,s=(0,o.useSyncExternalStore)(Ge,(()=>qe(t)),(()=>Qe(r)));return{state:(0,o.useMemo)((()=>s?R(s):r),[s,r]),setState:(0,o.useCallback)((e=>{try{const n=qe(t),o=n?R(n):r,s=C(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(s)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:s}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[i,c]=(0,o.useState)(n),l=(0,o.useCallback)((e=>{c((t=>{const n=C(e)?e(t):e;return r&&s&&function(e,t,n){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=C(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,s,n),n}))}),[r,s]),a=(0,o.useCallback)((()=>{r&&s&&function(e,t){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,s),c(null)}),[r,s]);return Object.assign({state:i,setState:l,clearState:a},Re(e))}function nt(e,t,n={}){const r=X(e),s=_(n),i=(0,o.useMemo)((()=>(0,c.A)(r,t,s)),[r,t,s]);return W((()=>i.cancel())),i}const rt=e=>{var t;return j(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=X(e),{delay:s,enabled:i}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,s)}),[r,s]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(s<0)&&i)return c(),()=>l()}),[c,l,s,i]),{set:c,reset:a,clear:l}}function st(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function it(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new l.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const lt={width:null,height:null};function at({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?lt:{width:window.innerWidth,height:window.innerHeight})),r=z(n,e),s=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",s),t}function ut(e,t,n){const{delay:r,enabled:s}=rt(t),{set:i,reset:c,clear:l}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!s||c()}),[r,s,c,...n]),{set:i,reset:c,clear:l}}}}]); \ No newline at end of file diff --git a/assets/js/7b7be0e1.5bac0365.js b/assets/js/7b7be0e1.041efcab.js similarity index 98% rename from assets/js/7b7be0e1.5bac0365.js rename to assets/js/7b7be0e1.041efcab.js index f0d34c26e..ab20cca88 100644 --- a/assets/js/7b7be0e1.5bac0365.js +++ b/assets/js/7b7be0e1.041efcab.js @@ -1 +1 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[2746],{4076:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>d,contentTitle:()=>a,default:()=>h,frontMatter:()=>r,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"utils/validator/isEqual","title":"isEqual","description":"\uc778\uc790\ub85c \uc8fc\uc5b4\uc9c4 \ub450 \uac12\uc744 \uae4a\uc740 \ube44\uad50\ud574\uc11c \uac19\uc740\uc9c0 \ub2e4\ub978\uc9c0 \uc5ec\ubd80\ub97c \ubc18\ud658\ud574\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","source":"@site/docs/utils/validator/isEqual.md","sourceDirName":"utils/validator","slug":"/utils/validator/isEqual","permalink":"/modern-kit/docs/utils/validator/isEqual","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"isDate","permalink":"/modern-kit/docs/utils/validator/isDate"},"next":{"title":"isFloat","permalink":"/modern-kit/docs/utils/validator/isFloat"}}');var i=n(6206),l=n(3267);const r={},a="isEqual",d={},c=[{value:"Code",id:"code",level:2},{value:"Benchmark",id:"benchmark",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function o(e){const s={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,l.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(s.header,{children:(0,i.jsx)(s.h1,{id:"isequal",children:"isEqual"})}),"\n",(0,i.jsxs)(s.p,{children:["\uc778\uc790\ub85c \uc8fc\uc5b4\uc9c4 \ub450 \uac12\uc744 ",(0,i.jsx)(s.code,{children:"\uae4a\uc740 \ube44\uad50"}),"\ud574\uc11c \uac19\uc740\uc9c0 \ub2e4\ub978\uc9c0 \uc5ec\ubd80\ub97c \ubc18\ud658\ud574\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(s.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(s.p,{children:(0,i.jsx)(s.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/utils/src/validator/isEqual/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(s.h2,{id:"benchmark",children:"Benchmark"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"hz"}),": \ucd08\ub2f9 \uc791\uc5c5 \uc218"]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"mean"}),": \ud3c9\uade0 \uc751\ub2f5 \uc2dc\uac04(ms)"]}),"\n"]}),"\n",(0,i.jsxs)(s.table,{children:[(0,i.jsx)(s.thead,{children:(0,i.jsxs)(s.tr,{children:[(0,i.jsx)(s.th,{children:"\uc774\ub984"}),(0,i.jsx)(s.th,{children:"hz"}),(0,i.jsx)(s.th,{children:"mean"}),(0,i.jsx)(s.th,{children:"\uc131\ub2a5"})]})}),(0,i.jsxs)(s.tbody,{children:[(0,i.jsxs)(s.tr,{children:[(0,i.jsx)(s.td,{children:"modern-kit/isEqual"}),(0,i.jsx)(s.td,{children:"9,128,265.02"}),(0,i.jsx)(s.td,{children:"0.0001"}),(0,i.jsx)(s.td,{children:(0,i.jsx)(s.code,{children:"fastest"})})]}),(0,i.jsxs)(s.tr,{children:[(0,i.jsx)(s.td,{children:"lodash/isEqual"}),(0,i.jsx)(s.td,{children:"6,979,847.18"}),(0,i.jsx)(s.td,{children:"0.0001"}),(0,i.jsx)(s.td,{children:(0,i.jsx)(s.code,{children:"slowest"})})]})]})]}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"modern-kit/isEqual"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"1.31x"})," faster than lodash/isEqual"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(s.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="typescript"',children:"const isEqual: (source: any, target: any) => boolean\n"})}),"\n",(0,i.jsx)(s.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="typescript"',children:'import { isEqual } from \'@modern-kit/utils\';\n\nconst isEqual1 = isEqual(1, 1); // true\nconst isEqual2 = isEqual({ a: 1}, { a: 1}); // true\nconst isEqual3 = isEqual([1, 2, 3] [1, 2, 3]); // true\n\nconst isEqual4 = isEqual("1", "2"); // false\nconst isEqual5 = isEqual({ a: 1}, { a: 2}); // false\nconst isEqual6 = isEqual([1, 2, 3], [1, "2", 3]); // false\n'})})]})}function h(e={}){const{wrapper:s}={...(0,l.R)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(o,{...e})}):o(e)}},3267:(e,s,n)=>{n.d(s,{R:()=>r,x:()=>a});var t=n(4382);const i={},l=t.createContext(i);function r(e){const s=t.useContext(l);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),t.createElement(l.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[2746],{1695:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>d,contentTitle:()=>a,default:()=>h,frontMatter:()=>r,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"utils/validator/isEqual","title":"isEqual","description":"\uc778\uc790\ub85c \uc8fc\uc5b4\uc9c4 \ub450 \uac12\uc744 \uae4a\uc740 \ube44\uad50\ud574\uc11c \uac19\uc740\uc9c0 \ub2e4\ub978\uc9c0 \uc5ec\ubd80\ub97c \ubc18\ud658\ud574\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","source":"@site/docs/utils/validator/isEqual.md","sourceDirName":"utils/validator","slug":"/utils/validator/isEqual","permalink":"/modern-kit/docs/utils/validator/isEqual","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"isDate","permalink":"/modern-kit/docs/utils/validator/isDate"},"next":{"title":"isFloat","permalink":"/modern-kit/docs/utils/validator/isFloat"}}');var i=n(6206),l=n(3267);const r={},a="isEqual",d={},c=[{value:"Code",id:"code",level:2},{value:"Benchmark",id:"benchmark",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function o(e){const s={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,l.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(s.header,{children:(0,i.jsx)(s.h1,{id:"isequal",children:"isEqual"})}),"\n",(0,i.jsxs)(s.p,{children:["\uc778\uc790\ub85c \uc8fc\uc5b4\uc9c4 \ub450 \uac12\uc744 ",(0,i.jsx)(s.code,{children:"\uae4a\uc740 \ube44\uad50"}),"\ud574\uc11c \uac19\uc740\uc9c0 \ub2e4\ub978\uc9c0 \uc5ec\ubd80\ub97c \ubc18\ud658\ud574\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(s.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(s.p,{children:(0,i.jsx)(s.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/utils/src/validator/isEqual/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(s.h2,{id:"benchmark",children:"Benchmark"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"hz"}),": \ucd08\ub2f9 \uc791\uc5c5 \uc218"]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"mean"}),": \ud3c9\uade0 \uc751\ub2f5 \uc2dc\uac04(ms)"]}),"\n"]}),"\n",(0,i.jsxs)(s.table,{children:[(0,i.jsx)(s.thead,{children:(0,i.jsxs)(s.tr,{children:[(0,i.jsx)(s.th,{children:"\uc774\ub984"}),(0,i.jsx)(s.th,{children:"hz"}),(0,i.jsx)(s.th,{children:"mean"}),(0,i.jsx)(s.th,{children:"\uc131\ub2a5"})]})}),(0,i.jsxs)(s.tbody,{children:[(0,i.jsxs)(s.tr,{children:[(0,i.jsx)(s.td,{children:"modern-kit/isEqual"}),(0,i.jsx)(s.td,{children:"9,128,265.02"}),(0,i.jsx)(s.td,{children:"0.0001"}),(0,i.jsx)(s.td,{children:(0,i.jsx)(s.code,{children:"fastest"})})]}),(0,i.jsxs)(s.tr,{children:[(0,i.jsx)(s.td,{children:"lodash/isEqual"}),(0,i.jsx)(s.td,{children:"6,979,847.18"}),(0,i.jsx)(s.td,{children:"0.0001"}),(0,i.jsx)(s.td,{children:(0,i.jsx)(s.code,{children:"slowest"})})]})]})]}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"modern-kit/isEqual"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"1.31x"})," faster than lodash/isEqual"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(s.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="typescript"',children:"const isEqual: (source: any, target: any) => boolean\n"})}),"\n",(0,i.jsx)(s.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="typescript"',children:'import { isEqual } from \'@modern-kit/utils\';\n\nconst isEqual1 = isEqual(1, 1); // true\nconst isEqual2 = isEqual({ a: 1}, { a: 1}); // true\nconst isEqual3 = isEqual([1, 2, 3] [1, 2, 3]); // true\n\nconst isEqual4 = isEqual("1", "2"); // false\nconst isEqual5 = isEqual({ a: 1}, { a: 2}); // false\nconst isEqual6 = isEqual([1, 2, 3], [1, "2", 3]); // false\n'})})]})}function h(e={}){const{wrapper:s}={...(0,l.R)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(o,{...e})}):o(e)}},3267:(e,s,n)=>{n.d(s,{R:()=>r,x:()=>a});var t=n(4382);const i={},l=t.createContext(i);function r(e){const s=t.useContext(l);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),t.createElement(l.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/7da35ef8.5f20f679.js b/assets/js/7da35ef8.5f20f679.js new file mode 100644 index 000000000..1ae15393e --- /dev/null +++ b/assets/js/7da35ef8.5f20f679.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[6234],{4697:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>u,assets:()=>l,contentTitle:()=>i,default:()=>h,frontMatter:()=>a,metadata:()=>r,toc:()=>m});const r=JSON.parse('{"id":"react/components/Mounted","title":"Mounted","description":"\ucef4\ud3ec\ub10c\ud2b8\uac00 \ube0c\ub77c\uc6b0\uc800\uc5d0 mount \ub418\uc5c8\uc744 \ub54c children\uc774 \ub098\ud0c0\ub098\uac8c \ud574\uc8fc\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4. \uc989, children\uc744 \ub80c\ub354\ub9c1\ud558\ub294 \ud658\uacbd\uc774 \ud074\ub77c\uc774\uc5b8\ud2b8 \ud658\uacbd\uc784\uc744 \ubcf4\uc7a5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. mount \uc804\uc5d0\ub294 fallback\uc73c\ub85c \ub123\uc5b4\uc900 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ubcf4\uc5ec\uc90d\ub2c8\ub2e4.","source":"@site/docs/react/components/Mounted.mdx","sourceDirName":"react/components","slug":"/react/components/Mounted","permalink":"/modern-kit/docs/react/components/Mounted","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"LazyImage","permalink":"/modern-kit/docs/react/components/LazyImage"},"next":{"title":"OutsidePointerDownHandler","permalink":"/modern-kit/docs/react/components/OutsidePointerDownHandler"}}');var o=t(6206),c=t(3267),s=t(4382);const d=({fallback:e=(0,o.jsx)(o.Fragment,{}),children:n})=>function(){const[e,n]=(0,s.useState)(!1);return(0,s.useEffect)((()=>{n(!0)}),[]),e}()?(0,o.jsx)(o.Fragment,{children:n}):e,a={},i="Mounted",l={},u=()=>{const e={div:"div",...(0,c.R)()};return(0,o.jsx)(d,{fallback:(0,o.jsx)(e.div,{children:"mount\uac00 \uc644\ub8cc\ub418\uae30 \uc804\uc785\ub2c8\ub2e4."}),children:(0,o.jsx)(e.div,{children:"mount\uac00 \uc644\ub8cc\ub418\uc5c8\uc2b5\ub2c8\ub2e4."})})},m=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function p(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,c.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"mounted",children:"Mounted"})}),"\n",(0,o.jsx)(n.p,{children:"\ucef4\ud3ec\ub10c\ud2b8\uac00 \ube0c\ub77c\uc6b0\uc800\uc5d0 mount \ub418\uc5c8\uc744 \ub54c children\uc774 \ub098\ud0c0\ub098\uac8c \ud574\uc8fc\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4. \uc989, children\uc744 \ub80c\ub354\ub9c1\ud558\ub294 \ud658\uacbd\uc774 \ud074\ub77c\uc774\uc5b8\ud2b8 \ud658\uacbd\uc784\uc744 \ubcf4\uc7a5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. mount \uc804\uc5d0\ub294 fallback\uc73c\ub85c \ub123\uc5b4\uc900 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ubcf4\uc5ec\uc90d\ub2c8\ub2e4."}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"SSR"})," \ud658\uacbd\uc5d0\uc11c \ucef4\ud3ec\ub10c\ud2b8\uac00 \ube0c\ub77c\uc6b0\uc800\uc5d0 \ub9c8\uc6b4\ud2b8\ub418\uae30 \uc804\uacfc \ud6c4\uc758 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub2e4\ub8e8\uae30 \uc704\ud574 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/Mounted/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"\ninterface MountedProps {\n fallback?: JSX.Element;\n}\n\nconst Mounted: ({\n fallback = <>\n}: PropsWithChildren) => JSX.Element;\n"})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { Mounted } from '@modern-kit/react'\n\nconst Example = () => {\n return (\n mount\uac00 \uc644\ub8cc\ub418\uae30 \uc804\uc785\ub2c8\ub2e4.
}>\n
mount\uac00 \uc644\ub8cc\ub418\uc5c8\uc2b5\ub2c8\ub2e4.
\n \n );\n};\n"})}),"\n",(0,o.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(u,{})]})}function h(e={}){const{wrapper:n}={...(0,c.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},3267:(e,n,t)=>{t.d(n,{R:()=>s,x:()=>d});var r=t(4382);const o={},c=r.createContext(o);function s(e){const n=r.useContext(c);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),r.createElement(c.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/7da35ef8.af433888.js b/assets/js/7da35ef8.af433888.js deleted file mode 100644 index e5c070915..000000000 --- a/assets/js/7da35ef8.af433888.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[6234],{9343:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"react/components/Mounted","title":"Mounted","description":"\ucef4\ud3ec\ub10c\ud2b8\uac00 \ube0c\ub77c\uc6b0\uc800\uc5d0 mount \ub418\uc5c8\uc744 \ub54c children\uc774 \ub098\ud0c0\ub098\uac8c \ud574\uc8fc\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4. \uc989, children\uc744 \ub80c\ub354\ub9c1\ud558\ub294 \ud658\uacbd\uc774 \ud074\ub77c\uc774\uc5b8\ud2b8 \ud658\uacbd\uc784\uc744 \ubcf4\uc7a5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. mount \uc804\uc5d0\ub294 fallback\uc73c\ub85c \ub123\uc5b4\uc900 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ubcf4\uc5ec\uc90d\ub2c8\ub2e4.","source":"@site/docs/react/components/Mounted.mdx","sourceDirName":"react/components","slug":"/react/components/Mounted","permalink":"/modern-kit/docs/react/components/Mounted","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"LazyImage","permalink":"/modern-kit/docs/react/components/LazyImage"},"next":{"title":"OutsidePointerDownHandler","permalink":"/modern-kit/docs/react/components/OutsidePointerDownHandler"}}');var o=n(6206),i=n(3267),c=(n(4382),n(4027));const s={},a="Mounted",l={},u=()=>{const e={div:"div",...(0,i.R)()};return(0,o.jsx)(c.hN,{fallback:(0,o.jsx)(e.div,{children:"mount\uac00 \uc644\ub8cc\ub418\uae30 \uc804\uc785\ub2c8\ub2e4."}),children:(0,o.jsx)(e.div,{children:"mount\uac00 \uc644\ub8cc\ub418\uc5c8\uc2b5\ub2c8\ub2e4."})})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"mounted",children:"Mounted"})}),"\n",(0,o.jsx)(t.p,{children:"\ucef4\ud3ec\ub10c\ud2b8\uac00 \ube0c\ub77c\uc6b0\uc800\uc5d0 mount \ub418\uc5c8\uc744 \ub54c children\uc774 \ub098\ud0c0\ub098\uac8c \ud574\uc8fc\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4. \uc989, children\uc744 \ub80c\ub354\ub9c1\ud558\ub294 \ud658\uacbd\uc774 \ud074\ub77c\uc774\uc5b8\ud2b8 \ud658\uacbd\uc784\uc744 \ubcf4\uc7a5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. mount \uc804\uc5d0\ub294 fallback\uc73c\ub85c \ub123\uc5b4\uc900 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ubcf4\uc5ec\uc90d\ub2c8\ub2e4."}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"SSR"})," \ud658\uacbd\uc5d0\uc11c \ucef4\ud3ec\ub10c\ud2b8\uac00 \ube0c\ub77c\uc6b0\uc800\uc5d0 \ub9c8\uc6b4\ud2b8\ub418\uae30 \uc804\uacfc \ud6c4\uc758 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub2e4\ub8e8\uae30 \uc704\ud574 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/Mounted/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"\ninterface MountedProps {\n fallback?: JSX.Element;\n}\n\nconst Mounted: ({\n fallback = <>\n}: PropsWithChildren) => JSX.Element;\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { Mounted } from '@modern-kit/react'\n\nconst Example = () => {\n return (\n mount\uac00 \uc644\ub8cc\ub418\uae30 \uc804\uc785\ub2c8\ub2e4.
}>\n
mount\uac00 \uc644\ub8cc\ub418\uc5c8\uc2b5\ub2c8\ub2e4.
\n \n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(u,{})]})}function h(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(f,{...e})}):f(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>$e,$I:()=>oe,AE:()=>Ae,BL:()=>H,DX:()=>I,FT:()=>st,Fo:()=>et,Hn:()=>it,I5:()=>je,JF:()=>Te,K:()=>le,K$:()=>Je,M0:()=>Me,ML:()=>ne,Mj:()=>ye,Mk:()=>Ne,Mo:()=>ie,NT:()=>Xe,QV:()=>Ue,Ub:()=>ke,Ut:()=>Ee,W7:()=>U,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>We,Zu:()=>ae,_1:()=>Re,_g:()=>nt,aL:()=>J,aY:()=>Ie,bB:()=>D,d7:()=>B,eG:()=>ct,fN:()=>se,fm:()=>G,gl:()=>$,hN:()=>z,iD:()=>de,iQ:()=>Le,jd:()=>ce,lW:()=>lt,oD:()=>K,oo:()=>Oe,pL:()=>q,qi:()=>ue,rN:()=>Fe,tD:()=>Se,u8:()=>Q,wY:()=>Be,xV:()=>L,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),i=n(3683),c=n(5086),s=n(7197),a=(n(1604),n(5938));function l(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function g(){return!m()}function w(e){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const b=e=>f(void 0,0,void 0,(function*(){return w(yield(yield fetch(e)).text())}));function v(e,t){var n;return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return b(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield p(e,h[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||C(e)&&C(t)&&isNaN(e)&&isNaN(t))return!0;if(S(e)&&S(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function k(e,t){return x(e,t,new WeakMap)}function S(e){return"function"==typeof e}function C(e){return"number"==typeof e}function E(e){return!function(e){return Object(e)!==e}(e)}function j(){}function O(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const R=(...e)=>t=>e.forEach((e=>{if(S(e))e(t);else if(null!=e){e.current=t}}));function M(...e){return(0,o.useCallback)(R(...e),e)}const I=o.forwardRef(((e,t)=>{const{children:n}=e,i=l(e,["children"]),c=o.Children.toArray(n),s=c.find(N);if(s){const e=s.props.children,n=c.map((t=>t===s?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(F,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(F,Object.assign({},i,{ref:t,children:n}))}));I.displayName="Slot";const F=o.forwardRef(((e,t)=>{const{children:n}=e,r=l(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?R(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));F.displayName="SlotClone";const L=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function N(e){return o.isValidElement(e)&&e.type===L}var P="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const $=d(((e,t)=>{var{ratio:n,style:o,as:c="div",asChild:s=!1}=e,a=l(e,["ratio","style","as","asChild"]);const u=s?I:c,d=Object.assign({aspectRatio:n},o),f=s?a.className:i(P,a.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},a))})),T=()=>j,Y=()=>!1,X=()=>!0;function D({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(T,Y,X)?e:t}function V(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const z=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>V()?(0,r.jsx)(r.Fragment,{children:t}):e;function A(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function W(e){const t=A(e);(0,o.useEffect)((()=>()=>t()),[t])}function _(e,t=k){const[n,r]=(0,o.useState)(e),i=A(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function B(e,t,n){const r=A(e),i=_(n),s=(0,o.useMemo)((()=>(0,c.A)(r,t,i)),[r,t,i]);return W((()=>s.cancel())),s}const J=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),c=B(((...e)=>{const n=i?.props;if(n&&S(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:c})};function H({onIntersectStart:e=j,onIntersectEnd:t=j,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:c=0,rootMargin:s="0px 0px 0px 0px"}){const a=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=A((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(l.current=!0,a.current+=1,e(n)):l.current&&(l.current=!1,a.current+=1,t(n)),r&&a.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:c,root:i,rootMargin:s}),u.current.observe(e))}),[n,c,i,s,d])}}const K=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:c}=e,s=l(e,["src","threshold","root","rootMargin"]);const{ref:a}=H({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:c});return(0,r.jsx)("img",Object.assign({ref:M(t,a)},s))}));K.displayName="LazyImage";const U=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:c,className:s,style:a,duration:u="0.2s",onLoad:d}=e,f=l(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,g=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),w=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},a)),[m,u,a]),b=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),v=s?`lazy-image-wrapper ${s}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:g,children:[m&&c,(0,r.jsx)(K,Object.assign({ref:t,width:n,height:i,style:w,onLoad:b},f))]})}));U.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:c="after",rootMargin:s="150px 0px"})=>{const{ref:a}=H({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:s});return(0,r.jsxs)(r.Fragment,{children:["before"===c&&(0,r.jsx)("div",{ref:a}),t,"after"===c&&(0,r.jsx)("div",{ref:a})]})},q=d(((e,t)=>{var{children:n,as:i="div",asChild:c=!1}=e,s=l(e,["children","as","asChild"]);const a=c?I:i,{ref:u}=H(s);if(c&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(a,Object.assign({ref:R(t,u)},s,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return E(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=g()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=A(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:c=!1,onPointerDown:s,excludeRefs:a=[]}=e,u=l(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(s,{excludeRefs:a}),f=c?I:i;if(c&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:R(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:c=1,includeLastSeparator:s=!1})=>{const a=(0,o.useCallback)((e=>e===t.length-1?s:(e+1)%c==0),[s,c,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),a(t)&&n]})})},ce=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),se=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function ae(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function le(e=!0){const t=S(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield w(e);return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),a=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:c,readText:s,readContents:a}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],ge=me("localStorage"),we=e=>window.localStorage.getItem(e),be=e=>JSON.stringify(e),ve=e=>(ge.subscribe(e),()=>{ge.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(ve,(()=>we(t)),(()=>be(r)));return{state:(0,o.useMemo)((()=>i?O(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=we(t),o=n?O(n):r,i=S(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),ge.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ge.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>g()?window.matchMedia(e).matches:t??!1;function ke(e,t){const[n,r]=(0,o.useState)(xe(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function Se(){return ke("(prefers-color-scheme: dark)")?"dark":"light"}const Ce="color-scheme";function Ee({defaultValue:e,key:t=Ce,shouldSetBodyClass:n=!1}={}){const r=Se(),i=S(e)?e():e,{state:c,setState:s}=ye({key:t,initialValue:i??r}),a=(0,o.useCallback)((()=>{s((e=>"dark"===e?"light":"dark"))}),[s]),l=(0,o.useCallback)((()=>{s("dark")}),[s]),u=(0,o.useCallback)((()=>{s("light")}),[s]),d=(0,o.useCallback)((()=>{s(r)}),[s,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(c),()=>{n&&document.body.classList.remove(c)})),[c,n]),{colorScheme:c,preferredColorScheme:r,setToggleMode:a,setDarkMode:l,setLightMode:u,setPreferredMode:d}}function je(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),c=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:c}}function Oe({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),c=r0,a=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),l=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const c=a(e,t);o&&o({prev:r,next:c}),i(c)}),[n,r,a]),u=(0,o.useCallback)((e=>{l("nextStep",!c,e)}),[c,l]),d=(0,o.useCallback)((e=>{l("prevStep",!s,e)}),[s,l]),f=(0,o.useCallback)(((t,n)=>{const o=S(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:c,hasPrevStep:s,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Re(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:c}=Oe({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:c}}function Me(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,B(i,t,n)]}function Ie(e,t={}){const[n,r]=(0,o.useState)(""),[i,c]=Me("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),c(t)}),[c]),onReset:(0,o.useCallback)((()=>{r(""),c("")}),[c])}}function Fe(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Le({onFocus:e=j,onBlur:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),c=A((t=>{r(!0),e(t)})),s=A((e=>{r(!1),t(e)})),a=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",c),ne(i,"blur",s),{ref:i,isFocus:n,setFocus:a}}function Ne({onEnter:e=j,onLeave:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),c=A((t=>{r(!0),e(t)})),s=A((e=>{r(!1),t(e)}));return ne(i,"mouseenter",c),ne(i,"mouseleave",s),{ref:i,isHovered:n}}const Pe=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function $e(e,t){const n=(0,o.useRef)(),r=A(e),{delay:i,enabled:c}=Pe(t),s=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),s()}),[a,s]);return(0,o.useEffect)((()=>{if(!(i<0)&&c)return s(),()=>a()}),[a,s,c,i]),{set:s,reset:l,clear:a}}function Te({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=A((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];S(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const Ye={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Xe(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Ye),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:c,pageX:s,pageY:a}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=i-t.left,u=c-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:c,pageX:s,pageY:a,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const De=()=>navigator.onLine,Ve=()=>!0,ze=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function Ae({onlineAction:e=j,offlineAction:t=j}={}){const n=A((n=>ze(n,e,t)));return(0,o.useSyncExternalStore)(n,De,Ve)}function We(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const _e={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function Be(e=j){const[t,n]=(0,o.useState)(_e),r=(0,o.useRef)(null),i=A((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function Je({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const He=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:c="start",alignX:s="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+He(window.innerHeight,r.height,c),left:r.left+window.scrollX+o+He(window.innerWidth,r.width,s)};const a=e.getBoundingClientRect();return{top:r.top-a.top+e.scrollTop+i+He(a.height,r.height,c),left:r.left-a.left+e.scrollLeft+o+He(a.width,r.width,s)}};function Ue(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:c}=Ke(r,t,n);r.scrollTo({top:c,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>i?O(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?O(n):r,i=S(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[c,s]=(0,o.useState)(n),a=(0,o.useCallback)((e=>{s((t=>{const n=S(e)?e(t):e;return r&&i&&function(e,t,n){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=S(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),l=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),s(null)}),[r,i]);return Object.assign({state:c,setState:a,clearState:l},Oe(e))}function nt(e,t,n={}){const r=A(e),i=_(n),c=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return W((()=>c.cancel())),c}const rt=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=A(e),{delay:i,enabled:c}=rt(t),s=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),s()}),[a,s]);return(0,o.useEffect)((()=>{if(!(i<0)&&c)return s(),()=>a()}),[s,a,i,c]),{set:s,reset:l,clear:a}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function ct(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new a.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function st({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const at={width:null,height:null};function lt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?at:{width:window.innerWidth,height:window.innerHeight})),r=B(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:c,reset:s,clear:a}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||s()}),[r,i,s,...n]),{set:c,reset:s,clear:a}}}}]); \ No newline at end of file diff --git a/assets/js/8053496e.1a9e1459.js b/assets/js/8053496e.1a9e1459.js new file mode 100644 index 000000000..60a213e65 --- /dev/null +++ b/assets/js/8053496e.1a9e1459.js @@ -0,0 +1,2 @@ +/*! For license information please see 8053496e.1a9e1459.js.LICENSE.txt */ +(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[8313],{6933:(e,t,n)=>{"use strict";n.r(t),n.d(t,{Example:()=>m,assets:()=>f,contentTitle:()=>h,default:()=>j,frontMatter:()=>p,metadata:()=>r,toc:()=>x});const r=JSON.parse('{"id":"react/components/AspectRatio","title":"AspectRatio","description":"\uc8fc\uc5b4\uc9c4 aspect-ratio \ube44\uc728\uc744 \ub9de\ucdb0\uc8fc\uae30 \uc704\ud574 \uc120\uc5b8\uc801\uc73c\ub85c \uc0ac\uc6a9\ud558\ub294 \uc720\ud2f8 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","source":"@site/docs/react/components/AspectRatio.mdx","sourceDirName":"react/components","slug":"/react/components/AspectRatio","permalink":"/modern-kit/docs/react/components/AspectRatio","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"Introduce","permalink":"/modern-kit/docs/introduce/"},"next":{"title":"ClientGate","permalink":"/modern-kit/docs/react/components/ClientGate"}}');var i=n(6206),o=n(3267),s=(n(4382),n(4076)),c=n(7284),a=n(6807),l=n(3683);var d="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const u=(0,c.V)(((e,t)=>{var{ratio:n,style:r,as:o="div",asChild:c=!1}=e,u=(0,s._)(e,["ratio","style","as","asChild"]);const p=c?a.D:o,h=Object.assign({aspectRatio:n},r),f=c?u.className:l(d,u.className);return(0,i.jsx)(p,Object.assign({ref:t,style:h,className:f},u))})),p={},h="AspectRatio",f={},m=()=>{const e={br:"br",div:"div",h3:"h3",img:"img",...(0,o.R)()},t="https://github.com/user-attachments/assets/dd60ec12-afd7-44c9-bd6b-0069e16bf2c9";return(0,i.jsxs)(e.div,{style:{width:"500px"},children:[(0,i.jsx)(e.h3,{children:"Default"}),(0,i.jsx)(u,{ratio:427/640,children:(0,i.jsx)(e.img,{src:t})}),(0,i.jsx)(e.br,{}),(0,i.jsx)(e.h3,{children:"as article"}),(0,i.jsx)(u,{as:"article",ratio:427/640,children:(0,i.jsx)(e.img,{src:t})}),(0,i.jsx)(e.br,{}),(0,i.jsx)(e.h3,{children:"asChild"}),(0,i.jsx)(u,{asChild:!0,ratio:427/640,children:(0,i.jsx)(e.img,{src:t,style:{width:"100%"}})})]})},x=[{value:"\ub2e4\ud615\uc131(polymorphism)",id:"\ub2e4\ud615\uc131polymorphism",level:3},{value:"\ud569\uc131(Composition), \ub80c\ub354\ub9c1 \uc704\uc784(Rendering Delegation)",id:"\ud569\uc131composition-\ub80c\ub354\ub9c1-\uc704\uc784rendering-delegation",level:3},{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Default",id:"default",level:3},{value:"as",id:"as",level:3},{value:"asChild",id:"aschild",level:3},{value:"Example",id:"example",level:2}];function g(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"aspectratio",children:"AspectRatio"})}),"\n",(0,i.jsxs)(t.p,{children:["\uc8fc\uc5b4\uc9c4 ",(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio",children:"aspect-ratio"})})," \ube44\uc728\uc744 \ub9de\ucdb0\uc8fc\uae30 \uc704\ud574 \uc120\uc5b8\uc801\uc73c\ub85c \uc0ac\uc6a9\ud558\ub294 \uc720\ud2f8 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["\ubbf8\ub9ac \uc601\uc5ed\uc744 \ud655\ubcf4\ud558\uc5ec ",(0,i.jsx)(t.code,{children:"Layout Shift"}),"\ub97c \ubc29\uc9c0\ud558\ub294\ub370 \ud6a8\uacfc\uc801\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h3,{id:"\ub2e4\ud615\uc131polymorphism",children:"\ub2e4\ud615\uc131(polymorphism)"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"AspectRatio"})," \ucef4\ud3ec\ub10c\ud2b8\ub294 \ub2e4\ud615\uc131\uc744 \uc704\ud574 ",(0,i.jsx)(t.code,{children:"as"})," \uc18d\uc131\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["\uae30\ubcf8\uc801\uc73c\ub85c ",(0,i.jsx)(t.code,{children:"div"})," \ud0dc\uadf8\ub85c \uc790\uc2dd \uc694\uc18c\ub97c \uac10\uc2f8\uc11c \ub80c\ub354\ub9c1\ud558\uba70, ",(0,i.jsx)(t.code,{children:"as"})," \uc18d\uc131\uc744 \ud1b5\ud574 \uac10\uc2f8\ub294 ",(0,i.jsx)(t.code,{children:"Wrapper"})," \uc694\uc18c\uc758 \ud0dc\uadf8\ub97c \ubcc0\uacbd\ud574 \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. (ex. div -> article)"]}),"\n",(0,i.jsxs)(t.li,{children:["\uc774\ub54c, \ud574\ub2f9 ",(0,i.jsx)(t.code,{children:"Wrapper"})," \uc694\uc18c\uc5d0 ",(0,i.jsx)(t.code,{children:"aspect-ratio"})," \uc18d\uc131\uc744 \uc801\uc6a9\ud574 \uc601\uc5ed\uc744 \ud655\ubcf4\ud569\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,i.jsx)(t.h3,{id:"\ud569\uc131composition-\ub80c\ub354\ub9c1-\uc704\uc784rendering-delegation",children:"\ud569\uc131(Composition), \ub80c\ub354\ub9c1 \uc704\uc784(Rendering Delegation)"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"AspectRatio"})," \ucef4\ud3ec\ub10c\ud2b8\ub294 ",(0,i.jsx)(t.code,{children:"asChild"})," \uc18d\uc131\uc744 \ud1b5\ud574 ",(0,i.jsx)(t.code,{children:"\ud569\uc131(Composition)"}),", ",(0,i.jsx)(t.code,{children:"\ub80c\ub354\ub9c1 \uc704\uc784(Rendering Delegation)"})," \ud328\ud134\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"asChild"})," \uc18d\uc131\uc774 ",(0,i.jsx)(t.code,{children:"true"}),"\ub77c\uba74 ",(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot",children:"Slot"})})," \uc744 \ud1b5\ud574 \uc790\uc2dd \uc694\uc18c\ub97c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.li,{children:["\uc774\ub54c, \uc790\uc2dd \uc694\uc18c\uc5d0 ",(0,i.jsx)(t.code,{children:"aspect-ratio"})," \uc18d\uc131\uc744 \uc801\uc6a9\ud574 \uc601\uc5ed\uc744 \ud655\ubcf4\ud569\ub2c8\ub2e4.","\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["Slot\uc740 \uc790\uc2dd\uc73c\ub85c ",(0,i.jsx)(t.code,{children:"\ub2e8\uc77c \uc694\uc18c"}),"\ub9cc \ud5c8\uc6a9\ub429\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.li,{children:["Slot\uc740 \uc790\uc2dd\uc73c\ub85c \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc62c \uacbd\uc6b0 ",(0,i.jsx)(t.code,{children:"forwardRef"}),", ",(0,i.jsx)(t.code,{children:"props"}),"\ub97c \ud5c8\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4. \ud5c8\uc6a9\ud558\uc9c0 \uc54a\uc73c\uba74 \uc815\uc0c1\uc801\uc73c\ub85c \ub3d9\uc791\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"asChild"})," \uc18d\uc131\uc744 \uc0ac\uc6a9 \ud560 \uacbd\uc6b0 ",(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot",children:"Slot"})})," \ubb38\uc11c\ub97c \ucc38\uace0\ud574\uc8fc\uc138\uc694."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/AspectRatio/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface AspectRatioProps {\n children: JSX.Element;\n ratio: number;\n asChild?: boolean;\n style?: CSSProperties;\n className?: string;\n}\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:'const AspectRatio: PolyForwardComponent<"div", AspectRatioProps, React.ElementType>\n'})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.h3,{id:"default",children:"Default"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["\uae30\ubcf8\uc801\uc73c\ub85c ",(0,i.jsx)(t.code,{children:"div"})," \uc694\uc18c\uc5d0 \uac10\uc2f8\uc9c0\uba70 \ud574\ub2f9 ",(0,i.jsx)(t.code,{children:"div"}),"\uc5d0 ",(0,i.jsx)(t.code,{children:"aspect-ratio"})," \uc18d\uc131\uc744 \uc801\uc6a9\ud574 \uc601\uc5ed\uc744 \ud655\ubcf4\ud569\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { AspectRatio } from '@modern-kit/react'\n\nconst Example = () => {\n const imgUrl = 'https://github.com/user-attachments/assets/dd60ec12-afd7-44c9-bd6b-0069e16bf2c9';\n\n return (\n
\n \n \n \n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h3,{id:"as",children:"as"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"as"})," \uc18d\uc131\uc744 \ud1b5\ud574 \uac10\uc2f8\ub294 \uc694\uc18c\ub97c ",(0,i.jsx)(t.code,{children:"div"}),"\uac00 \uc544\ub2cc \ud2b9\uc815 \uc694\uc18c\ub85c \ubcc0\uacbd\ud574 \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc73c\uba70, \ud574\ub2f9 \uc694\uc18c\uc5d0 ",(0,i.jsx)(t.code,{children:"aspect-ratio"})," \uc18d\uc131\uc744 \uc801\uc6a9\ud574 \uc601\uc5ed\uc744 \ud655\ubcf4\ud569\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { AspectRatio } from '@modern-kit/react'\n\nconst Example = () => {\n const imgUrl = 'https://github.com/user-attachments/assets/dd60ec12-afd7-44c9-bd6b-0069e16bf2c9';\n\n return (\n
\n \n \n \n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h3,{id:"aschild",children:"asChild"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"asChild"})," \uc18d\uc131\uc774 ",(0,i.jsx)(t.code,{children:"true"}),"\ub77c\uba74 ",(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot",children:"Slot"})})," \uc744 \ud1b5\ud574 \uc790\uc2dd \uc694\uc18c\ub97c \uadf8\ub300\ub85c \ub80c\ub354\ub9c1\ud558\uace0, \uc790\uc2dd \uc694\uc18c\uc5d0 ",(0,i.jsx)(t.code,{children:"aspect-ratio"})," \uc18d\uc131\uc744 \uc801\uc6a9\ud574 \uc601\uc5ed\uc744 \ud655\ubcf4\ud569\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { AspectRatio } from '@modern-kit/react'\n\nconst Example = () => {\n const imgUrl = 'https://github.com/user-attachments/assets/dd60ec12-afd7-44c9-bd6b-0069e16bf2c9';\n\n return (\n
\n \n \n \n
\n );\n};\n"})}),"\n","\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n",(0,i.jsx)(m,{})]})}function j(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(g,{...e})}):g(e)}},4076:(e,t,n)=>{"use strict";function r(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(e);ir,a:()=>i}),"function"==typeof SuppressedError&&SuppressedError},3683:(e,t)=>{var n;!function(){"use strict";var r={}.hasOwnProperty;function i(){for(var e="",t=0;t{"use strict";n.d(t,{R:()=>s,x:()=>c});var r=n(4382);const i={},o=r.createContext(i);function s(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:s(e.components),r.createElement(o.Provider,{value:t},e.children)}},6807:(e,t,n)=>{"use strict";n.d(t,{D:()=>c,x:()=>l});var r=n(4076),i=n(6206),o=n(4382),s=n(2424);const c=o.forwardRef(((e,t)=>{const{children:n}=e,s=(0,r._)(e,["children"]),c=o.Children.toArray(n),l=c.find(d);if(l){const e=l.props.children,n=c.map((t=>t===l?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,i.jsx)(a,Object.assign({},s,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,i.jsx)(a,Object.assign({},s,{ref:t,children:n}))}));c.displayName="Slot";const a=o.forwardRef(((e,t)=>{const{children:n}=e,i=(0,r._)(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,i=r&&"isReactWarning"in r&&r.isReactWarning;return i?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,i=r&&"isReactWarning"in r&&r.isReactWarning,i?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const i=e[r],o=t[r];/^on[A-Z]/.test(r)?i&&o?n[r]=(...e)=>{o(...e),i(...e)}:i&&(n[r]=i):"style"===r?n[r]=Object.assign(Object.assign({},i),o):"className"===r&&(n[r]=[i,o].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(i,n.props)),{ref:t?(0,s.P)(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));a.displayName="SlotClone";const l=({children:e})=>(0,i.jsx)(i.Fragment,{children:e});function d(e){return o.isValidElement(e)&&e.type===l}},2424:(e,t,n)=>{"use strict";n.d(t,{P:()=>i});var r=n(9340);const i=(...e)=>t=>e.forEach((e=>{if((0,r.Tn)(e))e(t);else if(null!=e){e.current=t}}))},7284:(e,t,n)=>{"use strict";n.d(t,{V:()=>r});const r=n(4382).forwardRef},9340:(e,t,n)=>{"use strict";function r(e,t,n,r){return new(n||(n=Promise))((function(i,o){function s(e){try{a(r.next(e))}catch(t){o(t)}}function c(e){try{a(r.throw(e))}catch(t){o(t)}}function a(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(s,c)}a((r=r.apply(e,t||[])).next())}))}n.d(t,{Et:()=>v,Fr:()=>c,Gp:()=>g,Ol:()=>S,Qd:()=>w,S$:()=>s,Tn:()=>j,Zp:()=>p,dK:()=>l,fl:()=>A,gD:()=>y,i5:()=>f,if:()=>h,l6:()=>C,lQ:()=>R,nS:()=>u,ni:()=>k,oc:()=>a}),"function"==typeof SuppressedError&&SuppressedError;const i={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const o=(e,t)=>new Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function s(){return"undefined"==typeof window}function c(){if(s())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function a(){return!s()}function l(e){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const d=e=>r(void 0,void 0,void 0,(function*(){const t=yield fetch(e);return l(yield t.text())}));function u(e,t){var n;return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return d(e);if(!("write"in window.navigator.clipboard))return d(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return d(e);const s=yield function(e,t="png"){return new Promise(((n,s)=>{const c=new Image;c.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=c.width,e.height=c.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(c,0,0);const s=yield o(e,i[t]);n(s)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),s(r)}})),c.onerror=()=>{s(new Error("Failed to load image"))},c.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[s.type]:s})]),s}catch(s){throw console.error(`Failed to copy to clipboard. message: ${s.message}`),s}}))}function p(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function h(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function f(e,t){return Object.prototype.hasOwnProperty.call(e,t)}const m=(e,t,n)=>{const r=Object.keys(e),i=Object.keys(t);if(r.length!==i.length)return!1;for(let o=0;o{if(e===t)return!0;if(v(e)&&v(t)&&isNaN(e)&&isNaN(t))return!0;if(j(e)&&j(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],i=[...t];return m(r,i,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,i]of e)if(!t.has(r)||!x(i,t.get(r),n))return!1;return!0}return m(e,t,n)};function g(e,t){return x(e,t,new WeakMap)}function j(e){return"function"==typeof e}function y(e){return null==e}function v(e){return"number"==typeof e}function b(e){return!function(e){return Object(e)!==e}(e)}function w(e){return b(e)&&"[object Object]"===Object.prototype.toString.call(e)}function C(e){return e===window}function R(){}function S(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}function O(e){return Object.keys(e)}const E={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};O(E);function A(e,t){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}function k(e,t,n){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],i=j(n)?n():n;r.setItem(t,JSON.stringify(i))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/9358.cf0d0d27.js.LICENSE.txt b/assets/js/8053496e.1a9e1459.js.LICENSE.txt similarity index 100% rename from assets/js/9358.cf0d0d27.js.LICENSE.txt rename to assets/js/8053496e.1a9e1459.js.LICENSE.txt diff --git a/assets/js/8053496e.52db90d6.js b/assets/js/8053496e.52db90d6.js deleted file mode 100644 index 3d3622487..000000000 --- a/assets/js/8053496e.52db90d6.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[8313],{6970:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>a,contentTitle:()=>l,default:()=>f,frontMatter:()=>c,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"react/components/AspectRatio","title":"AspectRatio","description":"\uc8fc\uc5b4\uc9c4 aspect-ratio \ube44\uc728\uc744 \ub9de\ucdb0\uc8fc\uae30 \uc704\ud574 \uc120\uc5b8\uc801\uc73c\ub85c \uc0ac\uc6a9\ud558\ub294 \uc720\ud2f8 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","source":"@site/docs/react/components/AspectRatio.mdx","sourceDirName":"react/components","slug":"/react/components/AspectRatio","permalink":"/modern-kit/docs/react/components/AspectRatio","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"Introduce","permalink":"/modern-kit/docs/introduce/"},"next":{"title":"ClientGate","permalink":"/modern-kit/docs/react/components/ClientGate"}}');var o=n(6206),i=n(3267),s=(n(4382),n(4027));const c={},l="AspectRatio",a={},u=()=>{const e={br:"br",div:"div",h3:"h3",img:"img",...(0,i.R)()},t="https://github.com/user-attachments/assets/dd60ec12-afd7-44c9-bd6b-0069e16bf2c9";return(0,o.jsxs)(e.div,{style:{width:"500px"},children:[(0,o.jsx)(e.h3,{children:"Default"}),(0,o.jsx)(s.gl,{ratio:427/640,children:(0,o.jsx)(e.img,{src:t})}),(0,o.jsx)(e.br,{}),(0,o.jsx)(e.h3,{children:"as article"}),(0,o.jsx)(s.gl,{as:"article",ratio:427/640,children:(0,o.jsx)(e.img,{src:t})}),(0,o.jsx)(e.br,{}),(0,o.jsx)(e.h3,{children:"asChild"}),(0,o.jsx)(s.gl,{asChild:!0,ratio:427/640,children:(0,o.jsx)(e.img,{src:t,style:{width:"100%"}})})]})},d=[{value:"\ub2e4\ud615\uc131(polymorphism)",id:"\ub2e4\ud615\uc131polymorphism",level:3},{value:"\ud569\uc131(Composition), \ub80c\ub354\ub9c1 \uc704\uc784(Rendering Delegation)",id:"\ud569\uc131composition-\ub80c\ub354\ub9c1-\uc704\uc784rendering-delegation",level:3},{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Default",id:"default",level:3},{value:"as",id:"as",level:3},{value:"asChild",id:"aschild",level:3},{value:"Example",id:"example",level:2}];function h(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"aspectratio",children:"AspectRatio"})}),"\n",(0,o.jsxs)(t.p,{children:["\uc8fc\uc5b4\uc9c4 ",(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio",children:"aspect-ratio"})})," \ube44\uc728\uc744 \ub9de\ucdb0\uc8fc\uae30 \uc704\ud574 \uc120\uc5b8\uc801\uc73c\ub85c \uc0ac\uc6a9\ud558\ub294 \uc720\ud2f8 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:["\ubbf8\ub9ac \uc601\uc5ed\uc744 \ud655\ubcf4\ud558\uc5ec ",(0,o.jsx)(t.code,{children:"Layout Shift"}),"\ub97c \ubc29\uc9c0\ud558\ub294\ub370 \ud6a8\uacfc\uc801\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h3,{id:"\ub2e4\ud615\uc131polymorphism",children:"\ub2e4\ud615\uc131(polymorphism)"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"AspectRatio"})," \ucef4\ud3ec\ub10c\ud2b8\ub294 \ub2e4\ud615\uc131\uc744 \uc704\ud574 ",(0,o.jsx)(t.code,{children:"as"})," \uc18d\uc131\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:["\uae30\ubcf8\uc801\uc73c\ub85c ",(0,o.jsx)(t.code,{children:"div"})," \ud0dc\uadf8\ub85c \uc790\uc2dd \uc694\uc18c\ub97c \uac10\uc2f8\uc11c \ub80c\ub354\ub9c1\ud558\uba70, ",(0,o.jsx)(t.code,{children:"as"})," \uc18d\uc131\uc744 \ud1b5\ud574 \uac10\uc2f8\ub294 ",(0,o.jsx)(t.code,{children:"Wrapper"})," \uc694\uc18c\uc758 \ud0dc\uadf8\ub97c \ubcc0\uacbd\ud574 \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. (ex. div -> article)"]}),"\n",(0,o.jsxs)(t.li,{children:["\uc774\ub54c, \ud574\ub2f9 ",(0,o.jsx)(t.code,{children:"Wrapper"})," \uc694\uc18c\uc5d0 ",(0,o.jsx)(t.code,{children:"aspect-ratio"})," \uc18d\uc131\uc744 \uc801\uc6a9\ud574 \uc601\uc5ed\uc744 \ud655\ubcf4\ud569\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsx)(t.h3,{id:"\ud569\uc131composition-\ub80c\ub354\ub9c1-\uc704\uc784rendering-delegation",children:"\ud569\uc131(Composition), \ub80c\ub354\ub9c1 \uc704\uc784(Rendering Delegation)"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"AspectRatio"})," \ucef4\ud3ec\ub10c\ud2b8\ub294 ",(0,o.jsx)(t.code,{children:"asChild"})," \uc18d\uc131\uc744 \ud1b5\ud574 ",(0,o.jsx)(t.code,{children:"\ud569\uc131(Composition)"}),", ",(0,o.jsx)(t.code,{children:"\ub80c\ub354\ub9c1 \uc704\uc784(Rendering Delegation)"})," \ud328\ud134\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"asChild"})," \uc18d\uc131\uc774 ",(0,o.jsx)(t.code,{children:"true"}),"\ub77c\uba74 ",(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot",children:"Slot"})})," \uc744 \ud1b5\ud574 \uc790\uc2dd \uc694\uc18c\ub97c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.li,{children:["\uc774\ub54c, \uc790\uc2dd \uc694\uc18c\uc5d0 ",(0,o.jsx)(t.code,{children:"aspect-ratio"})," \uc18d\uc131\uc744 \uc801\uc6a9\ud574 \uc601\uc5ed\uc744 \ud655\ubcf4\ud569\ub2c8\ub2e4.","\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:["Slot\uc740 \uc790\uc2dd\uc73c\ub85c ",(0,o.jsx)(t.code,{children:"\ub2e8\uc77c \uc694\uc18c"}),"\ub9cc \ud5c8\uc6a9\ub429\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.li,{children:["Slot\uc740 \uc790\uc2dd\uc73c\ub85c \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc62c \uacbd\uc6b0 ",(0,o.jsx)(t.code,{children:"forwardRef"}),", ",(0,o.jsx)(t.code,{children:"props"}),"\ub97c \ud5c8\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4. \ud5c8\uc6a9\ud558\uc9c0 \uc54a\uc73c\uba74 \uc815\uc0c1\uc801\uc73c\ub85c \ub3d9\uc791\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"asChild"})," \uc18d\uc131\uc744 \uc0ac\uc6a9 \ud560 \uacbd\uc6b0 ",(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot",children:"Slot"})})," \ubb38\uc11c\ub97c \ucc38\uace0\ud574\uc8fc\uc138\uc694."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/AspectRatio/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface AspectRatioProps {\n children: JSX.Element;\n ratio: number;\n asChild?: boolean;\n style?: CSSProperties;\n className?: string;\n}\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:'const AspectRatio: PolyForwardComponent<"div", AspectRatioProps, React.ElementType>\n'})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.h3,{id:"default",children:"Default"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:["\uae30\ubcf8\uc801\uc73c\ub85c ",(0,o.jsx)(t.code,{children:"div"})," \uc694\uc18c\uc5d0 \uac10\uc2f8\uc9c0\uba70 \ud574\ub2f9 ",(0,o.jsx)(t.code,{children:"div"}),"\uc5d0 ",(0,o.jsx)(t.code,{children:"aspect-ratio"})," \uc18d\uc131\uc744 \uc801\uc6a9\ud574 \uc601\uc5ed\uc744 \ud655\ubcf4\ud569\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { AspectRatio } from '@modern-kit/react'\n\nconst Example = () => {\n const imgUrl = 'https://github.com/user-attachments/assets/dd60ec12-afd7-44c9-bd6b-0069e16bf2c9';\n\n return (\n
\n \n \n \n
\n );\n};\n"})}),"\n",(0,o.jsx)(t.h3,{id:"as",children:"as"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"as"})," \uc18d\uc131\uc744 \ud1b5\ud574 \uac10\uc2f8\ub294 \uc694\uc18c\ub97c ",(0,o.jsx)(t.code,{children:"div"}),"\uac00 \uc544\ub2cc \ud2b9\uc815 \uc694\uc18c\ub85c \ubcc0\uacbd\ud574 \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc73c\uba70, \ud574\ub2f9 \uc694\uc18c\uc5d0 ",(0,o.jsx)(t.code,{children:"aspect-ratio"})," \uc18d\uc131\uc744 \uc801\uc6a9\ud574 \uc601\uc5ed\uc744 \ud655\ubcf4\ud569\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { AspectRatio } from '@modern-kit/react'\n\nconst Example = () => {\n const imgUrl = 'https://github.com/user-attachments/assets/dd60ec12-afd7-44c9-bd6b-0069e16bf2c9';\n\n return (\n
\n \n \n \n
\n );\n};\n"})}),"\n",(0,o.jsx)(t.h3,{id:"aschild",children:"asChild"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"asChild"})," \uc18d\uc131\uc774 ",(0,o.jsx)(t.code,{children:"true"}),"\ub77c\uba74 ",(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot",children:"Slot"})})," \uc744 \ud1b5\ud574 \uc790\uc2dd \uc694\uc18c\ub97c \uadf8\ub300\ub85c \ub80c\ub354\ub9c1\ud558\uace0, \uc790\uc2dd \uc694\uc18c\uc5d0 ",(0,o.jsx)(t.code,{children:"aspect-ratio"})," \uc18d\uc131\uc744 \uc801\uc6a9\ud574 \uc601\uc5ed\uc744 \ud655\ubcf4\ud569\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { AspectRatio } from '@modern-kit/react'\n\nconst Example = () => {\n const imgUrl = 'https://github.com/user-attachments/assets/dd60ec12-afd7-44c9-bd6b-0069e16bf2c9';\n\n return (\n
\n \n \n \n
\n );\n};\n"})}),"\n","\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n",(0,o.jsx)(u,{})]})}function f(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>Me,$I:()=>oe,AE:()=>Ve,BL:()=>J,DX:()=>I,FT:()=>ct,Fo:()=>et,Hn:()=>it,I5:()=>Ee,JF:()=>$e,K:()=>ae,K$:()=>Ue,M0:()=>Ne,ML:()=>ne,Mj:()=>ve,Mk:()=>Le,Mo:()=>ie,NT:()=>De,QV:()=>Ke,Ub:()=>je,Ut:()=>ke,W7:()=>K,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>ze,Zu:()=>le,_1:()=>Oe,_g:()=>nt,aL:()=>U,aY:()=>Ie,bB:()=>Y,d7:()=>B,eG:()=>st,fN:()=>ce,fm:()=>q,gl:()=>M,hN:()=>W,iD:()=>de,iQ:()=>Fe,jd:()=>se,lW:()=>at,oD:()=>H,oo:()=>Re,pL:()=>Q,qi:()=>ue,rN:()=>Ae,tD:()=>Ce,u8:()=>G,wY:()=>Be,xV:()=>F,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),i=n(3683),s=n(5086),c=n(7197),l=(n(1604),n(5938));function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function g(){return!m()}function w(e){return h(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const b=e=>h(void 0,0,void 0,(function*(){return w(yield(yield fetch(e)).text())}));function x(e,t){var n;return h(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return b(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>h(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield p(e,f[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const v=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||S(e)&&S(t)&&isNaN(e)&&isNaN(t))return!0;if(C(e)&&C(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return v(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!y(o,t.get(r),n))return!1;return!0}return v(e,t,n)};function j(e,t){return y(e,t,new WeakMap)}function C(e){return"function"==typeof e}function S(e){return"number"==typeof e}function k(e){return!function(e){return Object(e)!==e}(e)}function E(){}function R(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const O=(...e)=>t=>e.forEach((e=>{if(C(e))e(t);else if(null!=e){e.current=t}}));function N(...e){return(0,o.useCallback)(O(...e),e)}const I=o.forwardRef(((e,t)=>{const{children:n}=e,i=a(e,["children"]),s=o.Children.toArray(n),c=s.find(L);if(c){const e=c.props.children,n=s.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(A,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(A,Object.assign({},i,{ref:t,children:n}))}));I.displayName="Slot";const A=o.forwardRef(((e,t)=>{const{children:n}=e,r=a(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?O(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));A.displayName="SlotClone";const F=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function L(e){return o.isValidElement(e)&&e.type===F}var P="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const M=d(((e,t)=>{var{ratio:n,style:o,as:s="div",asChild:c=!1}=e,l=a(e,["ratio","style","as","asChild"]);const u=c?I:s,d=Object.assign({aspectRatio:n},o),h=c?l.className:i(P,l.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:h},l))})),$=()=>E,T=()=>!1,D=()=>!0;function Y({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)($,T,D)?e:t}function X(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const W=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>X()?(0,r.jsx)(r.Fragment,{children:t}):e;function V(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function z(e){const t=V(e);(0,o.useEffect)((()=>()=>t()),[t])}function _(e,t=j){const[n,r]=(0,o.useState)(e),i=V(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function B(e,t,n){const r=V(e),i=_(n),c=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return z((()=>c.cancel())),c}const U=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),s=B(((...e)=>{const n=i?.props;if(n&&C(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:s})};function J({onIntersectStart:e=E,onIntersectEnd:t=E,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:s=0,rootMargin:c="0px 0px 0px 0px"}){const l=(0,o.useRef)(0),a=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=V((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(a.current=!0,l.current+=1,e(n)):a.current&&(a.current=!1,l.current+=1,t(n)),r&&l.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:s,root:i,rootMargin:c}),u.current.observe(e))}),[n,s,i,c,d])}}const H=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:s}=e,c=a(e,["src","threshold","root","rootMargin"]);const{ref:l}=J({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:N(t,l)},c))}));H.displayName="LazyImage";const K=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,h=a(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,p]=(0,o.useState)(!1),m=!f,g=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),w=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},l)),[m,u,l]),b=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),x=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:x,style:g,children:[m&&s,(0,r.jsx)(H,Object.assign({ref:t,width:n,height:i,style:w,onLoad:b},h))]})}));K.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},G=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:s="after",rootMargin:c="150px 0px"})=>{const{ref:l}=J({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:l}),t,"after"===s&&(0,r.jsx)("div",{ref:l})]})},Q=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1}=e,c=a(e,["children","as","asChild"]);const l=s?I:i,{ref:u}=J(c);if(s&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(l,Object.assign({ref:O(t,u)},c,{children:n}))})),q=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return k(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=g()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=V(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1,onPointerDown:c,excludeRefs:l=[]}=e,u=a(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:l}),h=s?I:i;if(s&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(h,Object.assign({ref:O(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:s=1,includeLastSeparator:c=!1})=>{const l=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%s==0),[c,s,t.length]);return(0,r.jsx)(q,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),l(t)&&n]})})},se=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function le(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function ae(e=!0){const t=C(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield w(e);return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield x(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return h(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),l=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return h(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:s,readText:c,readContents:l}}const he="modern-kit-local-storage",fe="modern-kit-session-storage",pe={localStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}},sessionStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}}},me=e=>pe[e],ge=me("localStorage"),we=e=>window.localStorage.getItem(e),be=e=>JSON.stringify(e),xe=e=>(ge.subscribe(e),()=>{ge.unsubscribe(e)});function ve(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=C(n)?n():n,i=(0,o.useSyncExternalStore)(xe,(()=>we(t)),(()=>be(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=we(t),o=n?R(n):r,i=C(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),ge.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ge.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const ye=(e,t)=>g()?window.matchMedia(e).matches:t??!1;function je(e,t){const[n,r]=(0,o.useState)(ye(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function Ce(){return je("(prefers-color-scheme: dark)")?"dark":"light"}const Se="color-scheme";function ke({defaultValue:e,key:t=Se,shouldSetBodyClass:n=!1}={}){const r=Ce(),i=C(e)?e():e,{state:s,setState:c}=ve({key:t,initialValue:i??r}),l=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),a=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(s),()=>{n&&document.body.classList.remove(s)})),[s,n]),{colorScheme:s,preferredColorScheme:r,setToggleMode:l,setDarkMode:a,setLightMode:u,setPreferredMode:d}}function Ee(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:s}}function Re({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),s=r0,l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),a=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const s=l(e,t);o&&o({prev:r,next:s}),i(s)}),[n,r,l]),u=(0,o.useCallback)((e=>{a("nextStep",!s,e)}),[s,a]),d=(0,o.useCallback)((e=>{a("prevStep",!c,e)}),[c,a]),h=(0,o.useCallback)(((t,n)=>{const o=C(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),f=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:s,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:h,resetStep:f}}function Oe(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=Re({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}function Ne(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,B(i,t,n)]}function Ie(e,t={}){const[n,r]=(0,o.useState)(""),[i,s]=Ne("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),s(t)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Ae(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Fe({onFocus:e=E,onBlur:t=E}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=V((t=>{r(!0),e(t)})),c=V((e=>{r(!1),t(e)})),l=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",s),ne(i,"blur",c),{ref:i,isFocus:n,setFocus:l}}function Le({onEnter:e=E,onLeave:t=E}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=V((t=>{r(!0),e(t)})),c=V((e=>{r(!1),t(e)}));return ne(i,"mouseenter",s),ne(i,"mouseleave",c),{ref:i,isHovered:n}}const Pe=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function Me(e,t){const n=(0,o.useRef)(),r=V(e),{delay:i,enabled:s}=Pe(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>l()}),[l,c,s,i]),{set:c,reset:a,clear:l}}function $e({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=V((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];C(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const Te={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function De(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Te),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l}=t;let a=null,u=null,d=null,h=null;if(e.current){const t=e.current.getBoundingClientRect();a=i-t.left,u=s-t.top,d=t.left+window.scrollX,h=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l,elementRelativeX:a,elementRelativeY:u,elementPositionX:d,elementPositionY:h})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Ye=()=>navigator.onLine,Xe=()=>!0,We=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function Ve({onlineAction:e=E,offlineAction:t=E}={}){const n=V((n=>We(n,e,t)));return(0,o.useSyncExternalStore)(n,Ye,Xe)}function ze(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const _e={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function Be(e=E){const[t,n]=(0,o.useState)(_e),r=(0,o.useRef)(null),i=V((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function Ue({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:s="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+Je(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+Je(window.innerWidth,r.width,c)};const l=e.getBoundingClientRect();return{top:r.top-l.top+e.scrollTop+i+Je(l.height,r.height,s),left:r.left-l.left+e.scrollLeft+o+Je(l.width,r.width,c)}};function Ke(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:s}=He(r,t,n);r.scrollTo({top:s,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Ge=e=>window.sessionStorage.getItem(e),Qe=e=>JSON.stringify(e),qe=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=C(n)?n():n,i=(0,o.useSyncExternalStore)(qe,(()=>Ge(t)),(()=>Qe(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Ge(t),o=n?R(n):r,i=C(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[s,c]=(0,o.useState)(n),l=(0,o.useCallback)((e=>{c((t=>{const n=C(e)?e(t):e;return r&&i&&function(e,t,n){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=C(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),a=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),c(null)}),[r,i]);return Object.assign({state:s,setState:l,clearState:a},Re(e))}function nt(e,t,n={}){const r=V(e),i=_(n),s=(0,o.useMemo)((()=>(0,c.A)(r,t,i)),[r,t,i]);return z((()=>s.cancel())),s}const rt=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=V(e),{delay:i,enabled:s}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>l()}),[c,l,i,s]),{set:c,reset:a,clear:l}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function st(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new l.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const lt={width:null,height:null};function at({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?lt:{width:window.innerWidth,height:window.innerHeight})),r=B(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:s,reset:c,clear:l}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||c()}),[r,i,c,...n]),{set:s,reset:c,clear:l}}}}]); \ No newline at end of file diff --git a/assets/js/8079f804.405bc534.js b/assets/js/8079f804.405bc534.js deleted file mode 100644 index 3e84368d3..000000000 --- a/assets/js/8079f804.405bc534.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[7581],{7706:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>c,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"react/hooks/useCounter","title":"useCounter","description":"\uce74\uc6b4\ud130\ub97c \uad00\ub9ac\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc73c\ub85c, \uc99d\uac00, \uac10\uc18c \ubc0f \ub9ac\uc14b \uae30\ub2a5 \ub4f1\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useCounter.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useCounter","permalink":"/modern-kit/docs/react/hooks/useCounter","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useColorScheme","permalink":"/modern-kit/docs/react/hooks/useColorScheme"},"next":{"title":"useCycleList","permalink":"/modern-kit/docs/react/hooks/useCycleList"}}');var o=n(6206),i=n(3267),s=(n(4382),n(4027));const c={},a="useCounter",l={},u=()=>{const e={button:"button",div:"div",p:"p",...(0,i.R)()},{counter:t,setCounter:n,increment:r,decrement:c,reset:a}=(0,s.I5)(10);return(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.button,{onClick:r,children:"\uc99d\uac00"}),(0,o.jsx)(e.button,{onClick:c,children:"\uac10\uc18c"}),(0,o.jsx)(e.button,{onClick:()=>n(20),children:"20\uc73c\ub85c \uc14b\ud305"}),(0,o.jsx)(e.button,{onClick:a,children:"\ucd08\uae30\ud654"})]}),(0,o.jsxs)(e.p,{children:["counter: ",t]})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usecounter",children:"useCounter"})}),"\n",(0,o.jsxs)(t.p,{children:["\uce74\uc6b4\ud130\ub97c \uad00\ub9ac\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc73c\ub85c, ",(0,o.jsx)(t.code,{children:"\uc99d\uac00"}),", ",(0,o.jsx)(t.code,{children:"\uac10\uc18c"})," \ubc0f ",(0,o.jsx)(t.code,{children:"\ub9ac\uc14b"})," \uae30\ub2a5 \ub4f1\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useCounter/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useCounter(initialValue: number = 0): {\n counter: number;\n setCounter: React.Dispatch>;\n increment: () => void;\n decrement: () => void;\n reset: () => void;\n}\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useCounter } from '@modern-kit/react';\n\nconst Example = () => {\n const { counter, setCounter, increment, decrement, reset } = useCounter(10);\n\n return (\n
\n
\n \n \n \n \n
\n

counter: {counter}

\n
\n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(u,{})]})}function h(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(f,{...e})}):f(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>Pe,$I:()=>oe,AE:()=>We,BL:()=>H,DX:()=>F,FT:()=>ct,Fo:()=>et,Hn:()=>it,I5:()=>je,JF:()=>Te,K:()=>le,K$:()=>Je,M0:()=>Ie,ML:()=>ne,Mj:()=>ye,Mk:()=>Me,Mo:()=>ie,NT:()=>Ve,QV:()=>Ue,Ub:()=>Ce,Ut:()=>Ee,W7:()=>U,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>_e,Zu:()=>ae,_1:()=>Oe,_g:()=>nt,aL:()=>J,aY:()=>Fe,bB:()=>X,d7:()=>B,eG:()=>st,fN:()=>ce,fm:()=>G,gl:()=>P,hN:()=>D,iD:()=>de,iQ:()=>Ne,jd:()=>se,lW:()=>lt,oD:()=>K,oo:()=>Re,pL:()=>q,qi:()=>ue,rN:()=>Le,tD:()=>ke,u8:()=>Q,wY:()=>Be,xV:()=>N,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),i=n(3683),s=n(5086),c=n(7197),a=(n(1604),n(5938));function l(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function g(){return!m()}function w(e){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const b=e=>f(void 0,0,void 0,(function*(){return w(yield(yield fetch(e)).text())}));function v(e,t){var n;return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return b(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield p(e,h[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||S(e)&&S(t)&&isNaN(e)&&isNaN(t))return!0;if(k(e)&&k(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function C(e,t){return x(e,t,new WeakMap)}function k(e){return"function"==typeof e}function S(e){return"number"==typeof e}function E(e){return!function(e){return Object(e)!==e}(e)}function j(){}function R(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const O=(...e)=>t=>e.forEach((e=>{if(k(e))e(t);else if(null!=e){e.current=t}}));function I(...e){return(0,o.useCallback)(O(...e),e)}const F=o.forwardRef(((e,t)=>{const{children:n}=e,i=l(e,["children"]),s=o.Children.toArray(n),c=s.find(M);if(c){const e=c.props.children,n=s.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(L,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(L,Object.assign({},i,{ref:t,children:n}))}));F.displayName="Slot";const L=o.forwardRef(((e,t)=>{const{children:n}=e,r=l(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?O(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));L.displayName="SlotClone";const N=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function M(e){return o.isValidElement(e)&&e.type===N}var $="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const P=d(((e,t)=>{var{ratio:n,style:o,as:s="div",asChild:c=!1}=e,a=l(e,["ratio","style","as","asChild"]);const u=c?F:s,d=Object.assign({aspectRatio:n},o),f=c?a.className:i($,a.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},a))})),T=()=>j,Y=()=>!1,V=()=>!0;function X({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(T,Y,V)?e:t}function A(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const D=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>A()?(0,r.jsx)(r.Fragment,{children:t}):e;function W(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function _(e){const t=W(e);(0,o.useEffect)((()=>()=>t()),[t])}function z(e,t=C){const[n,r]=(0,o.useState)(e),i=W(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function B(e,t,n){const r=W(e),i=z(n),c=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return _((()=>c.cancel())),c}const J=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),s=B(((...e)=>{const n=i?.props;if(n&&k(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:s})};function H({onIntersectStart:e=j,onIntersectEnd:t=j,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:s=0,rootMargin:c="0px 0px 0px 0px"}){const a=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=W((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(l.current=!0,a.current+=1,e(n)):l.current&&(l.current=!1,a.current+=1,t(n)),r&&a.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:s,root:i,rootMargin:c}),u.current.observe(e))}),[n,s,i,c,d])}}const K=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:s}=e,c=l(e,["src","threshold","root","rootMargin"]);const{ref:a}=H({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:I(t,a)},c))}));K.displayName="LazyImage";const U=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:s,className:c,style:a,duration:u="0.2s",onLoad:d}=e,f=l(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,g=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),w=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},a)),[m,u,a]),b=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),v=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:g,children:[m&&s,(0,r.jsx)(K,Object.assign({ref:t,width:n,height:i,style:w,onLoad:b},f))]})}));U.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:s="after",rootMargin:c="150px 0px"})=>{const{ref:a}=H({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:a}),t,"after"===s&&(0,r.jsx)("div",{ref:a})]})},q=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1}=e,c=l(e,["children","as","asChild"]);const a=s?F:i,{ref:u}=H(c);if(s&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(a,Object.assign({ref:O(t,u)},c,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return E(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=g()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=W(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1,onPointerDown:c,excludeRefs:a=[]}=e,u=l(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:a}),f=s?F:i;if(s&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:O(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:s=1,includeLastSeparator:c=!1})=>{const a=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%s==0),[c,s,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),a(t)&&n]})})},se=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function ae(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function le(e=!0){const t=k(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield w(e);return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),a=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:s,readText:c,readContents:a}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],ge=me("localStorage"),we=e=>window.localStorage.getItem(e),be=e=>JSON.stringify(e),ve=e=>(ge.subscribe(e),()=>{ge.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=k(n)?n():n,i=(0,o.useSyncExternalStore)(ve,(()=>we(t)),(()=>be(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=we(t),o=n?R(n):r,i=k(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),ge.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ge.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>g()?window.matchMedia(e).matches:t??!1;function Ce(e,t){const[n,r]=(0,o.useState)(xe(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function ke(){return Ce("(prefers-color-scheme: dark)")?"dark":"light"}const Se="color-scheme";function Ee({defaultValue:e,key:t=Se,shouldSetBodyClass:n=!1}={}){const r=ke(),i=k(e)?e():e,{state:s,setState:c}=ye({key:t,initialValue:i??r}),a=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),l=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(s),()=>{n&&document.body.classList.remove(s)})),[s,n]),{colorScheme:s,preferredColorScheme:r,setToggleMode:a,setDarkMode:l,setLightMode:u,setPreferredMode:d}}function je(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:s}}function Re({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),s=r0,a=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),l=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const s=a(e,t);o&&o({prev:r,next:s}),i(s)}),[n,r,a]),u=(0,o.useCallback)((e=>{l("nextStep",!s,e)}),[s,l]),d=(0,o.useCallback)((e=>{l("prevStep",!c,e)}),[c,l]),f=(0,o.useCallback)(((t,n)=>{const o=k(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:s,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Oe(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=Re({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}function Ie(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,B(i,t,n)]}function Fe(e,t={}){const[n,r]=(0,o.useState)(""),[i,s]=Ie("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),s(t)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Le(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onFocus:e=j,onBlur:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=W((t=>{r(!0),e(t)})),c=W((e=>{r(!1),t(e)})),a=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",s),ne(i,"blur",c),{ref:i,isFocus:n,setFocus:a}}function Me({onEnter:e=j,onLeave:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=W((t=>{r(!0),e(t)})),c=W((e=>{r(!1),t(e)}));return ne(i,"mouseenter",s),ne(i,"mouseleave",c),{ref:i,isHovered:n}}const $e=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function Pe(e,t){const n=(0,o.useRef)(),r=W(e),{delay:i,enabled:s}=$e(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>a()}),[a,c,s,i]),{set:c,reset:l,clear:a}}function Te({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=W((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];k(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const Ye={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Ve(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Ye),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:a}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=i-t.left,u=s-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:a,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Xe=()=>navigator.onLine,Ae=()=>!0,De=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function We({onlineAction:e=j,offlineAction:t=j}={}){const n=W((n=>De(n,e,t)));return(0,o.useSyncExternalStore)(n,Xe,Ae)}function _e(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const ze={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function Be(e=j){const[t,n]=(0,o.useState)(ze),r=(0,o.useRef)(null),i=W((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function Je({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const He=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:s="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+He(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+He(window.innerWidth,r.width,c)};const a=e.getBoundingClientRect();return{top:r.top-a.top+e.scrollTop+i+He(a.height,r.height,s),left:r.left-a.left+e.scrollLeft+o+He(a.width,r.width,c)}};function Ue(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:s}=Ke(r,t,n);r.scrollTo({top:s,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=k(n)?n():n,i=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?R(n):r,i=k(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[s,c]=(0,o.useState)(n),a=(0,o.useCallback)((e=>{c((t=>{const n=k(e)?e(t):e;return r&&i&&function(e,t,n){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=k(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),l=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),c(null)}),[r,i]);return Object.assign({state:s,setState:a,clearState:l},Re(e))}function nt(e,t,n={}){const r=W(e),i=z(n),s=(0,o.useMemo)((()=>(0,c.A)(r,t,i)),[r,t,i]);return _((()=>s.cancel())),s}const rt=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=W(e),{delay:i,enabled:s}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>a()}),[c,a,i,s]),{set:c,reset:l,clear:a}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function st(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new a.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const at={width:null,height:null};function lt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?at:{width:window.innerWidth,height:window.innerHeight})),r=B(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:s,reset:c,clear:a}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||c()}),[r,i,c,...n]),{set:s,reset:c,clear:a}}}}]); \ No newline at end of file diff --git a/assets/js/8079f804.846a7d09.js b/assets/js/8079f804.846a7d09.js new file mode 100644 index 000000000..af6017995 --- /dev/null +++ b/assets/js/8079f804.846a7d09.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[7581],{2395:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>a,assets:()=>d,contentTitle:()=>u,default:()=>m,frontMatter:()=>i,metadata:()=>r,toc:()=>l});const r=JSON.parse('{"id":"react/hooks/useCounter","title":"useCounter","description":"\uce74\uc6b4\ud130\ub97c \uad00\ub9ac\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc73c\ub85c, \uc99d\uac00, \uac10\uc18c \ubc0f \ub9ac\uc14b \uae30\ub2a5 \ub4f1\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useCounter.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useCounter","permalink":"/modern-kit/docs/react/hooks/useCounter","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useColorScheme","permalink":"/modern-kit/docs/react/hooks/useColorScheme"},"next":{"title":"useCycleList","permalink":"/modern-kit/docs/react/hooks/useCycleList"}}');var o=t(6206),s=t(3267),c=t(4382);const i={},u="useCounter",d={},a=()=>{const e={button:"button",div:"div",p:"p",...(0,s.R)()},{counter:n,setCounter:t,increment:r,decrement:i,reset:u}=function(e=0){const[n,t]=(0,c.useState)(e),r=(0,c.useCallback)((()=>{t((e=>e+1))}),[]),o=(0,c.useCallback)((()=>{t((e=>e-1))}),[]),s=(0,c.useCallback)((()=>{t(e)}),[e]);return{counter:n,setCounter:t,increment:r,decrement:o,reset:s}}(10);return(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.button,{onClick:r,children:"\uc99d\uac00"}),(0,o.jsx)(e.button,{onClick:i,children:"\uac10\uc18c"}),(0,o.jsx)(e.button,{onClick:()=>t(20),children:"20\uc73c\ub85c \uc14b\ud305"}),(0,o.jsx)(e.button,{onClick:u,children:"\ucd08\uae30\ud654"})]}),(0,o.jsxs)(e.p,{children:["counter: ",n]})]})},l=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function h(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"usecounter",children:"useCounter"})}),"\n",(0,o.jsxs)(n.p,{children:["\uce74\uc6b4\ud130\ub97c \uad00\ub9ac\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc73c\ub85c, ",(0,o.jsx)(n.code,{children:"\uc99d\uac00"}),", ",(0,o.jsx)(n.code,{children:"\uac10\uc18c"})," \ubc0f ",(0,o.jsx)(n.code,{children:"\ub9ac\uc14b"})," \uae30\ub2a5 \ub4f1\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useCounter/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"function useCounter(initialValue: number = 0): {\n counter: number;\n setCounter: React.Dispatch>;\n increment: () => void;\n decrement: () => void;\n reset: () => void;\n}\n"})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useCounter } from '@modern-kit/react';\n\nconst Example = () => {\n const { counter, setCounter, increment, decrement, reset } = useCounter(10);\n\n return (\n
\n
\n \n \n \n \n
\n

counter: {counter}

\n
\n );\n};\n"})}),"\n",(0,o.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(a,{})]})}function m(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},3267:(e,n,t)=>{t.d(n,{R:()=>c,x:()=>i});var r=t(4382);const o={},s=r.createContext(o);function c(e){const n=r.useContext(s);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),r.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/83b4ba0b.337ac227.js b/assets/js/83b4ba0b.337ac227.js new file mode 100644 index 000000000..138543457 --- /dev/null +++ b/assets/js/83b4ba0b.337ac227.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[1259],{4556:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>m,assets:()=>f,contentTitle:()=>h,default:()=>x,frontMatter:()=>u,metadata:()=>r,toc:()=>p});const r=JSON.parse('{"id":"react/hooks/useColorScheme","title":"useColorScheme","description":"\uc0ac\uc6a9\uc790\uc758 Color Scheme(\ub2e4\ud06c \ubaa8\ub4dc \ub610\ub294 \ub77c\uc774\ud2b8 \ubaa8\ub4dc)\uc744 \uad00\ub9ac\ud558\uae30 \uc704\ud55c \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useColorScheme.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useColorScheme","permalink":"/modern-kit/docs/react/hooks/useColorScheme","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useClipboard","permalink":"/modern-kit/docs/react/hooks/useClipboard"},"next":{"title":"useCounter","permalink":"/modern-kit/docs/react/hooks/useCounter"}}');var o=t(6206),c=t(3267),i=t(9340),s=t(8211),l=t(3411),d=t(4382);var a=t(9010);const u={},h="useColorScheme",f={},m=()=>{const e={button:"button",div:"div",p:"p",...(0,c.R)()},{colorScheme:n,preferredColorScheme:t,setToggleMode:r,setDarkMode:a,setLightMode:u,setPreferredMode:h}=function({defaultValue:e,key:n="color-scheme",shouldSetBodyClass:t=!1}={}){const r=(0,l.t)(),o=(0,i.Tn)(e)?e():e,{state:c,setState:a}=(0,s.M)({key:n,initialValue:null!=o?o:r}),u=(0,d.useCallback)((()=>{a((e=>"dark"===e?"light":"dark"))}),[a]),h=(0,d.useCallback)((()=>{a("dark")}),[a]),f=(0,d.useCallback)((()=>{a("light")}),[a]),m=(0,d.useCallback)((()=>{a(r)}),[a,r]);return(0,d.useEffect)((()=>(t&&document.body.classList.add(c),()=>{t&&document.body.classList.remove(c)})),[c,t]),{colorScheme:c,preferredColorScheme:r,setToggleMode:u,setDarkMode:h,setLightMode:f,setPreferredMode:m}}({shouldSetBodyClass:!0});return(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.p,{children:["colorScheme: ",`${n}`]}),(0,o.jsxs)(e.p,{children:["preferredColorScheme: ",`${t}`]}),(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.button,{onClick:r,children:"\ubaa8\ub4dc \ud1a0\uae00"}),(0,o.jsx)(e.button,{onClick:a,children:"\ub2e4\ud06c \ubaa8\ub4dc \ubcc0\uacbd"}),(0,o.jsx)(e.button,{onClick:u,children:"\ub77c\uc774\ud2b8 \ubaa8\ub4dc \ubcc0\uacbd"}),(0,o.jsx)(e.button,{onClick:h,children:"\uc0ac\uc6a9\uc790 \uc120\ud638 \ubaa8\ub4dc \ubcc0\uacbd"})]})]})},p=[{value:"state",id:"state",level:3},{value:"set",id:"set",level:3},{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function g(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,c.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"usecolorscheme",children:"useColorScheme"})}),"\n",(0,o.jsx)(n.p,{children:"\uc0ac\uc6a9\uc790\uc758 Color Scheme(\ub2e4\ud06c \ubaa8\ub4dc \ub610\ub294 \ub77c\uc774\ud2b8 \ubaa8\ub4dc)\uc744 \uad00\ub9ac\ud558\uae30 \uc704\ud55c \ud6c5\uc785\ub2c8\ub2e4."}),"\n",(0,o.jsx)(n.p,{children:"\ud604\uc7ac Color Scheme\uc744 \uc758\ubbf8\ud558\ub294 \uc0c1\ud0dc\uc640 \ud574\ub2f9 \uc0c1\ud0dc\ub97c \ud578\ub4e4\ub9c1\ud558\uae30 \uc704\ud55c set \ud568\uc218\ub4e4\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4."}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme",children:(0,o.jsx)(n.code,{children:"prefers-color-scheme"})})," \ub294 ",(0,o.jsx)(n.code,{children:"\uc548\ub4dc\ub85c\uc774\ub4dc \ubc84\uc80410 \ubbf8\ub9cc"}),"\uc5d0\uc11c\ub294 \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \uc774\uc288\uac00 \uc788\uc744 \uc218 \uc788\uc73c\uba70, Color Scheme \uad00\ub828 \uc815\ubcf4\ub97c \uc678\ubd80\uc5d0\uc11c \uc804\ub2ec\ubc1b\ub294 \ucf00\uc774\uc2a4\ub3c4 \uc788\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. (\uc608\ub97c \ub4e4\uc5b4 \uc571\uc5d0\uc11c \uc6f9\ubdf0\ub97c \ub744\uc6b8 \ub54c ",(0,o.jsx)(n.code,{children:"UserAgent"}),"\ub85c \uc804\ub2ec) \uc774\ub7f0 \uacbd\uc6b0 ",(0,o.jsx)(n.code,{children:"defaultValue"}),"\ub97c \ud65c\uc6a9 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.p,{children:["\uc704\uc640 \uac19\uc740 \ubc29\uc2dd\uc744 \ud1b5\ud574 ",(0,o.jsx)(n.code,{children:"\uc678\ubd80\uc5d0\uc11c \uc81c\uacf5 \ubc1b\ub294 Color Scheme\uc744 \uc720\uc9c0"}),"\ud560 \uc218\ub3c4 \uc788\uace0, \uc6f9\uc5d0\uc11c \ub2e8\ub3c5\uc73c\ub85c \uc0ac\uc6a9 \ud560 \ub54c\uc758 ",(0,o.jsx)(n.code,{children:"\uc790\uccb4\uc801\uc778 Color Scheme \uc815\ucc45"}),"\ub3c4 \uad00\ub9ac \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)(n.h3,{id:"state",children:"state"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"colorScheme"}),": \ud604\uc7ac \uc801\uc6a9\ub41c \uc0c9\uc0c1 \ud14c\ub9c8(",(0,o.jsx)(n.code,{children:"dark"}),", ",(0,o.jsx)(n.code,{children:"light"}),")\uc785\ub2c8\ub2e4. \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\uc5d0 \uc800\uc7a5\ub41c \uac12\uc774 \uc788\ub2e4\uba74 \ud574\ub2f9 \uac12\uc744 \uac00\uc838\uc635\ub2c8\ub2e4.\n\uc2a4\ud1a0\ub9ac\uc9c0\uc5d0 \uc800\uc7a5\ub41c \uac12\uc774 \uc5c6\ub294 \uc0c1\ud669\uc5d0\uc11c ",(0,o.jsx)(n.code,{children:"defaultValue"}),"\uac00 \uc124\uc815\ub418\uc5b4 \uc788\ub2e4\uba74 \uc6b0\uc120\uc801\uc73c\ub85c ",(0,o.jsx)(n.code,{children:"defaultValue"})," \uac12\uc744 \uac16\uc2b5\ub2c8\ub2e4.\n\ub9cc\uc57d, ",(0,o.jsx)(n.code,{children:"defaultValue"}),"\uac00 \uc5c6\ub2e4\uba74 \ub2e4\uc74c\uc73c\ub85c \uc0ac\uc6a9\uc790 \uc120\ud638 \uc0c9\uc0c1(",(0,o.jsx)(n.code,{children:"prefers-color-scheme"}),") \uac12\uc744 \uac00\uc838\uc635\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"preferredColorScheme"}),": \uc0ac\uc6a9\uc790\uc758 \uc120\ud638 \uc0c9\uc0c1 \ud14c\ub9c8\uc785\ub2c8\ub2e4. \uc0ac\uc6a9\uc790 \uc2dc\uc2a4\ud15c \uc124\uc815\uc5d0 \ub530\ub77c \ub2ec\ub77c\uc9d1\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsx)(n.h3,{id:"set",children:"set"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"setToggleMode"}),": \ud604\uc7ac \uc0c9\uc0c1 \ud14c\ub9c8\ub97c ",(0,o.jsx)(n.code,{children:"\ub2e4\ud06c \ubaa8\ub4dc"}),"\uc640 ",(0,o.jsx)(n.code,{children:"\ub77c\uc774\ud2b8 \ubaa8\ub4dc"})," \uc0ac\uc774\uc5d0\uc11c \uc804\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"setDarkMode"}),": \ud604\uc81c \uc0c9\uc0c1 \ud14c\ub9c8\ub97c ",(0,o.jsx)(n.code,{children:"\ub2e4\ud06c \ubaa8\ub4dc"}),"\ub85c \uc124\uc815\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"setLightMode"}),": \ud604\uc7ac \uc0c9\uc0c1 \ud14c\ub9c8\ub97c ",(0,o.jsx)(n.code,{children:"\ub77c\uc774\ud2b8 \ubaa8\ub4dc"}),"\ub85c \uc124\uc815\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"setPreferredMode"})," - \ud604\uc7ac \uc0c9\uc0c1 \ud14c\ub9c8\ub97c \uc0ac\uc6a9\uc790\uc758 \uc120\ud638 \uc0c9\uc0c1(",(0,o.jsx)(n.code,{children:"prefers-color-scheme"}),")\uc73c\ub85c \uc124\uc815\ud569\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useColorScheme/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseColorSchemeOptions {\n defaultValue?: (() => ColorScheme) | ColorScheme;\n key?: string; // dafault: COLOR_SCHEME_DEFAULT_KEY: 'color-scheme'\n shouldSetBodyClass?: boolean; // default: false\n}\n\ninterface UseColorSchemeReturnType {\n colorScheme: ColorScheme;\n preferredColorScheme: ColorScheme;\n setToggleMode: () => void;\n setDarkMode: () => void;\n setLightMode: () => void;\n setPreferredMode: () => void;\n}\n"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"function useColorScheme({\n defaultValue,\n key,\n shouldSetBodyClass,\n}: UseColorSchemeOptions = {}): UseColorSchemeReturnType;\n"})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"const Example = () => {\n const {\n colorScheme,\n preferredColorScheme,\n setToggleMode,\n setDarkMode,\n setLightMode,\n setPreferredMode,\n } = useColorScheme({\n shouldSetBodyClass: true, // true\ub77c\uba74 body class\uc5d0 colorScheme\uc774 \ucd94\uac00\n });\n\n return (\n
\n

colorScheme: {`${colorScheme}`}

\n

preferredColorScheme: {`${preferredColorScheme}`}

\n
\n \n \n \n \n
\n
\n );\n};\n"})}),"\n",(0,o.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(a.A,{children:()=>(0,o.jsx)(m,{})})]})}function x(e={}){const{wrapper:n}={...(0,c.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(g,{...e})}):g(e)}},9010:(e,n,t)=>{t.d(n,{A:()=>c});t(4382);var r=t(3555),o=t(6206);function c(e){let{children:n,fallback:t}=e;return(0,r.A)()?(0,o.jsx)(o.Fragment,{children:n?.()}):t??null}},3267:(e,n,t)=>{t.d(n,{R:()=>i,x:()=>s});var r=t(4382);const o={},c=r.createContext(o);function i(e){const n=r.useContext(c);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),r.createElement(c.Provider,{value:n},e.children)}},1351:(e,n,t)=>{t.d(n,{M:()=>s});var r=t(6765),o=t(5907),c=t(9340);t(4382);const i=e=>!!e&&(0,c.i5)(e,"current");function s(e,n,t,c){const s=(0,r.p)(t);(0,o.E)((()=>{const t=i(e)?e.current:e;if(t)return t.addEventListener(n,s,c),()=>{t.removeEventListener(n,s,c)}}),[n,e,c,s])}},5907:(e,n,t)=>{t.d(n,{E:()=>c});var r=t(9340),o=t(4382);const c=(0,r.oc)()?o.useLayoutEffect:o.useEffect},8211:(e,n,t)=>{t.d(n,{M:()=>a});var r=t(9340),o=t(4382);const c="modern-kit-local-storage",i={key:c,subscribe:e=>{window.addEventListener(c,e)},unsubscribe:e=>{window.removeEventListener(c,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(c))}},s=e=>window.localStorage.getItem(e),l=e=>JSON.stringify(e),d=e=>(i.subscribe(e),()=>{i.unsubscribe(e)});function a(e){const{key:n}=e,t="initialValue"in e?e.initialValue:null,c=(0,r.Tn)(t)?t():t,a=(0,o.useSyncExternalStore)(d,(()=>s(n)),(()=>l(c)));return{state:(0,o.useMemo)((()=>a?(0,r.Ol)(a):c),[a,c]),setState:(0,o.useCallback)((e=>{try{const t=s(n),o=t?(0,r.Ol)(t):c,l=(0,r.Tn)(e)?e(o):e;window.localStorage.setItem(n,JSON.stringify(l)),i.dispatchEvent()}catch(t){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${n}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${t}`)}}),[n,c]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(n),i.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${n}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[n])}}},9659:(e,n,t)=>{t.d(n,{U:()=>s});var r=t(9340),o=t(1351),c=t(4382);const i=(e,n)=>(0,r.oc)()?window.matchMedia(e).matches:null!=n&&n;function s(e,n){const[t,r]=(0,c.useState)(i(e,n)),s=(0,c.useCallback)((e=>r(e.matches)),[]);return(0,o.M)(window.matchMedia(e),"change",s),t}},3411:(e,n,t)=>{t.d(n,{t:()=>o});var r=t(9659);t(4382);function o(){return(0,r.U)("(prefers-color-scheme: dark)")?"dark":"light"}},6765:(e,n,t)=>{t.d(n,{p:()=>o});var r=t(4382);function o(e){const n=(0,r.useRef)(e);return n.current=e,(0,r.useCallback)(((...e)=>n.current(...e)),[])}},9340:(e,n,t)=>{function r(e,n,t,r){return new(t||(t=Promise))((function(o,c){function i(e){try{l(r.next(e))}catch(n){c(n)}}function s(e){try{l(r.throw(e))}catch(n){c(n)}}function l(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(i,s)}l((r=r.apply(e,n||[])).next())}))}t.d(n,{Et:()=>b,Fr:()=>s,Gp:()=>x,Ol:()=>k,Qd:()=>C,S$:()=>i,Tn:()=>v,Zp:()=>h,dK:()=>d,fl:()=>$,gD:()=>w,i5:()=>m,if:()=>f,l6:()=>y,lQ:()=>S,nS:()=>u,ni:()=>O,oc:()=>l}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const c=(e,n)=>new Promise(((t,r)=>{e.toBlob((e=>{e?t(e):r(new Error(`Failed to create blob with format ${n}`))}),n)}));function i(){return"undefined"==typeof window}function s(){if(i())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function l(){return!i()}function d(e){return r(this,void 0,void 0,(function*(){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const a=e=>r(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return d(yield n.text())}));function u(e,n){var t;return r(this,void 0,void 0,(function*(){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return a(e);if(!("write"in window.navigator.clipboard))return a(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return a(e);const i=yield function(e,n="png"){return new Promise(((t,i)=>{const s=new Image;s.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=s.width,e.height=s.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(s,0,0);const i=yield c(e,o[n]);t(i)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),i(r)}})),s.onerror=()=>{i(new Error("Failed to load image"))},s.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(i){throw console.error(`Failed to copy to clipboard. message: ${i.message}`),i}}))}function h(){return r(this,void 0,void 0,(function*(){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function f(){return r(this,void 0,void 0,(function*(){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function m(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const p=(e,n,t)=>{const r=Object.keys(e),o=Object.keys(n);if(r.length!==o.length)return!1;for(let c=0;c{if(e===n)return!0;if(b(e)&&b(n)&&isNaN(e)&&isNaN(n))return!0;if(v(e)&&v(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const r=[...e],o=[...n];return p(r,o,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[r,o]of e)if(!n.has(r)||!g(o,n.get(r),t))return!1;return!0}return p(e,n,t)};function x(e,n){return g(e,n,new WeakMap)}function v(e){return"function"==typeof e}function w(e){return null==e}function b(e){return"number"==typeof e}function j(e){return!function(e){return Object(e)!==e}(e)}function C(e){return j(e)&&"[object Object]"===Object.prototype.toString.call(e)}function y(e){return e===window}function S(){}function k(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function E(e){return Object.keys(e)}const M={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};E(M);function $(e,n){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function O(e,n,t){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=v(t)?t():t;r.setItem(n,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${n}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/83b4ba0b.925129e0.js b/assets/js/83b4ba0b.925129e0.js deleted file mode 100644 index 1e030e799..000000000 --- a/assets/js/83b4ba0b.925129e0.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[1259],{4464:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>a,default:()=>p,frontMatter:()=>l,metadata:()=>r,toc:()=>h});const r=JSON.parse('{"id":"react/hooks/useColorScheme","title":"useColorScheme","description":"\uc0ac\uc6a9\uc790\uc758 Color Scheme(\ub2e4\ud06c \ubaa8\ub4dc \ub610\ub294 \ub77c\uc774\ud2b8 \ubaa8\ub4dc)\uc744 \uad00\ub9ac\ud558\uae30 \uc704\ud55c \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useColorScheme.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useColorScheme","permalink":"/modern-kit/docs/react/hooks/useColorScheme","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useClipboard","permalink":"/modern-kit/docs/react/hooks/useClipboard"},"next":{"title":"useCounter","permalink":"/modern-kit/docs/react/hooks/useCounter"}}');var o=n(6206),s=n(3267),c=n(4027),i=n(9010);const l={},a="useColorScheme",u={},d=()=>{const e={button:"button",div:"div",p:"p",...(0,s.R)()},{colorScheme:t,preferredColorScheme:n,setToggleMode:r,setDarkMode:i,setLightMode:l,setPreferredMode:a}=(0,c.Ut)({shouldSetBodyClass:!0});return(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.p,{children:["colorScheme: ",`${t}`]}),(0,o.jsxs)(e.p,{children:["preferredColorScheme: ",`${n}`]}),(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.button,{onClick:r,children:"\ubaa8\ub4dc \ud1a0\uae00"}),(0,o.jsx)(e.button,{onClick:i,children:"\ub2e4\ud06c \ubaa8\ub4dc \ubcc0\uacbd"}),(0,o.jsx)(e.button,{onClick:l,children:"\ub77c\uc774\ud2b8 \ubaa8\ub4dc \ubcc0\uacbd"}),(0,o.jsx)(e.button,{onClick:a,children:"\uc0ac\uc6a9\uc790 \uc120\ud638 \ubaa8\ub4dc \ubcc0\uacbd"})]})]})},h=[{value:"state",id:"state",level:3},{value:"set",id:"set",level:3},{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usecolorscheme",children:"useColorScheme"})}),"\n",(0,o.jsx)(t.p,{children:"\uc0ac\uc6a9\uc790\uc758 Color Scheme(\ub2e4\ud06c \ubaa8\ub4dc \ub610\ub294 \ub77c\uc774\ud2b8 \ubaa8\ub4dc)\uc744 \uad00\ub9ac\ud558\uae30 \uc704\ud55c \ud6c5\uc785\ub2c8\ub2e4."}),"\n",(0,o.jsx)(t.p,{children:"\ud604\uc7ac Color Scheme\uc744 \uc758\ubbf8\ud558\ub294 \uc0c1\ud0dc\uc640 \ud574\ub2f9 \uc0c1\ud0dc\ub97c \ud578\ub4e4\ub9c1\ud558\uae30 \uc704\ud55c set \ud568\uc218\ub4e4\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4."}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme",children:(0,o.jsx)(t.code,{children:"prefers-color-scheme"})})," \ub294 ",(0,o.jsx)(t.code,{children:"\uc548\ub4dc\ub85c\uc774\ub4dc \ubc84\uc80410 \ubbf8\ub9cc"}),"\uc5d0\uc11c\ub294 \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \uc774\uc288\uac00 \uc788\uc744 \uc218 \uc788\uc73c\uba70, Color Scheme \uad00\ub828 \uc815\ubcf4\ub97c \uc678\ubd80\uc5d0\uc11c \uc804\ub2ec\ubc1b\ub294 \ucf00\uc774\uc2a4\ub3c4 \uc788\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. (\uc608\ub97c \ub4e4\uc5b4 \uc571\uc5d0\uc11c \uc6f9\ubdf0\ub97c \ub744\uc6b8 \ub54c ",(0,o.jsx)(t.code,{children:"UserAgent"}),"\ub85c \uc804\ub2ec) \uc774\ub7f0 \uacbd\uc6b0 ",(0,o.jsx)(t.code,{children:"defaultValue"}),"\ub97c \ud65c\uc6a9 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:["\uc704\uc640 \uac19\uc740 \ubc29\uc2dd\uc744 \ud1b5\ud574 ",(0,o.jsx)(t.code,{children:"\uc678\ubd80\uc5d0\uc11c \uc81c\uacf5 \ubc1b\ub294 Color Scheme\uc744 \uc720\uc9c0"}),"\ud560 \uc218\ub3c4 \uc788\uace0, \uc6f9\uc5d0\uc11c \ub2e8\ub3c5\uc73c\ub85c \uc0ac\uc6a9 \ud560 \ub54c\uc758 ",(0,o.jsx)(t.code,{children:"\uc790\uccb4\uc801\uc778 Color Scheme \uc815\ucc45"}),"\ub3c4 \uad00\ub9ac \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)(t.h3,{id:"state",children:"state"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"colorScheme"}),": \ud604\uc7ac \uc801\uc6a9\ub41c \uc0c9\uc0c1 \ud14c\ub9c8(",(0,o.jsx)(t.code,{children:"dark"}),", ",(0,o.jsx)(t.code,{children:"light"}),")\uc785\ub2c8\ub2e4. \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\uc5d0 \uc800\uc7a5\ub41c \uac12\uc774 \uc788\ub2e4\uba74 \ud574\ub2f9 \uac12\uc744 \uac00\uc838\uc635\ub2c8\ub2e4.\n\uc2a4\ud1a0\ub9ac\uc9c0\uc5d0 \uc800\uc7a5\ub41c \uac12\uc774 \uc5c6\ub294 \uc0c1\ud669\uc5d0\uc11c ",(0,o.jsx)(t.code,{children:"defaultValue"}),"\uac00 \uc124\uc815\ub418\uc5b4 \uc788\ub2e4\uba74 \uc6b0\uc120\uc801\uc73c\ub85c ",(0,o.jsx)(t.code,{children:"defaultValue"})," \uac12\uc744 \uac16\uc2b5\ub2c8\ub2e4.\n\ub9cc\uc57d, ",(0,o.jsx)(t.code,{children:"defaultValue"}),"\uac00 \uc5c6\ub2e4\uba74 \ub2e4\uc74c\uc73c\ub85c \uc0ac\uc6a9\uc790 \uc120\ud638 \uc0c9\uc0c1(",(0,o.jsx)(t.code,{children:"prefers-color-scheme"}),") \uac12\uc744 \uac00\uc838\uc635\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"preferredColorScheme"}),": \uc0ac\uc6a9\uc790\uc758 \uc120\ud638 \uc0c9\uc0c1 \ud14c\ub9c8\uc785\ub2c8\ub2e4. \uc0ac\uc6a9\uc790 \uc2dc\uc2a4\ud15c \uc124\uc815\uc5d0 \ub530\ub77c \ub2ec\ub77c\uc9d1\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsx)(t.h3,{id:"set",children:"set"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"setToggleMode"}),": \ud604\uc7ac \uc0c9\uc0c1 \ud14c\ub9c8\ub97c ",(0,o.jsx)(t.code,{children:"\ub2e4\ud06c \ubaa8\ub4dc"}),"\uc640 ",(0,o.jsx)(t.code,{children:"\ub77c\uc774\ud2b8 \ubaa8\ub4dc"})," \uc0ac\uc774\uc5d0\uc11c \uc804\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"setDarkMode"}),": \ud604\uc81c \uc0c9\uc0c1 \ud14c\ub9c8\ub97c ",(0,o.jsx)(t.code,{children:"\ub2e4\ud06c \ubaa8\ub4dc"}),"\ub85c \uc124\uc815\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"setLightMode"}),": \ud604\uc7ac \uc0c9\uc0c1 \ud14c\ub9c8\ub97c ",(0,o.jsx)(t.code,{children:"\ub77c\uc774\ud2b8 \ubaa8\ub4dc"}),"\ub85c \uc124\uc815\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"setPreferredMode"})," - \ud604\uc7ac \uc0c9\uc0c1 \ud14c\ub9c8\ub97c \uc0ac\uc6a9\uc790\uc758 \uc120\ud638 \uc0c9\uc0c1(",(0,o.jsx)(t.code,{children:"prefers-color-scheme"}),")\uc73c\ub85c \uc124\uc815\ud569\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useColorScheme/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseColorSchemeOptions {\n defaultValue?: (() => ColorScheme) | ColorScheme;\n key?: string; // dafault: COLOR_SCHEME_DEFAULT_KEY: 'color-scheme'\n shouldSetBodyClass?: boolean; // default: false\n}\n\ninterface UseColorSchemeReturnType {\n colorScheme: ColorScheme;\n preferredColorScheme: ColorScheme;\n setToggleMode: () => void;\n setDarkMode: () => void;\n setLightMode: () => void;\n setPreferredMode: () => void;\n}\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useColorScheme({\n defaultValue,\n key,\n shouldSetBodyClass,\n}: UseColorSchemeOptions = {}): UseColorSchemeReturnType;\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"const Example = () => {\n const {\n colorScheme,\n preferredColorScheme,\n setToggleMode,\n setDarkMode,\n setLightMode,\n setPreferredMode,\n } = useColorScheme({\n shouldSetBodyClass: true, // true\ub77c\uba74 body class\uc5d0 colorScheme\uc774 \ucd94\uac00\n });\n\n return (\n
\n

colorScheme: {`${colorScheme}`}

\n

preferredColorScheme: {`${preferredColorScheme}`}

\n
\n \n \n \n \n
\n
\n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(i.A,{children:()=>(0,o.jsx)(d,{})})]})}function p(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(f,{...e})}):f(e)}},9010:(e,t,n)=>{n.d(t,{A:()=>s});n(4382);var r=n(3555),o=n(6206);function s(e){let{children:t,fallback:n}=e;return(0,r.A)()?(0,o.jsx)(o.Fragment,{children:t?.()}):n??null}},4027:(e,t,n)=>{n.d(t,{$$:()=>$e,$I:()=>oe,AE:()=>Xe,BL:()=>H,DX:()=>L,FT:()=>it,Fo:()=>et,Hn:()=>st,I5:()=>Ee,JF:()=>Te,K:()=>ae,K$:()=>Ue,M0:()=>Me,ML:()=>ne,Mj:()=>ye,Mk:()=>Ne,Mo:()=>se,NT:()=>De,QV:()=>Ke,Ub:()=>Ce,Ut:()=>ke,W7:()=>K,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>_e,Zu:()=>le,_1:()=>Re,_g:()=>nt,aL:()=>U,aY:()=>Le,bB:()=>Y,d7:()=>z,eG:()=>ct,fN:()=>ie,fm:()=>G,gl:()=>$,hN:()=>B,iD:()=>de,iQ:()=>Ie,jd:()=>ce,lW:()=>at,oD:()=>J,oo:()=>Oe,pL:()=>q,qi:()=>ue,rN:()=>Fe,tD:()=>Se,u8:()=>Q,wY:()=>ze,xV:()=>I,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),s=n(3683),c=n(5086),i=n(7197),l=(n(1604),n(5938));function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function g(){return!m()}function w(e){return h(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const b=e=>h(void 0,0,void 0,(function*(){return w(yield(yield fetch(e)).text())}));function v(e,t){var n;return h(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return b(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>h(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const s=yield p(e,f[t]);n(s)}catch(s){console.error(`Failed to load image. message: ${s.mesaage}`),r(s)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let s=0;s{if(e===t||j(e)&&j(t)&&isNaN(e)&&isNaN(t))return!0;if(S(e)&&S(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function C(e,t){return x(e,t,new WeakMap)}function S(e){return"function"==typeof e}function j(e){return"number"==typeof e}function k(e){return!function(e){return Object(e)!==e}(e)}function E(){}function O(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const R=(...e)=>t=>e.forEach((e=>{if(S(e))e(t);else if(null!=e){e.current=t}}));function M(...e){return(0,o.useCallback)(R(...e),e)}const L=o.forwardRef(((e,t)=>{const{children:n}=e,s=a(e,["children"]),c=o.Children.toArray(n),i=c.find(N);if(i){const e=i.props.children,n=c.map((t=>t===i?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(F,Object.assign({},s,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(F,Object.assign({},s,{ref:t,children:n}))}));L.displayName="Slot";const F=o.forwardRef(((e,t)=>{const{children:n}=e,r=a(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],s=t[r];/^on[A-Z]/.test(r)?o&&s?n[r]=(...e)=>{s(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),s):"className"===r&&(n[r]=[o,s].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?R(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));F.displayName="SlotClone";const I=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function N(e){return o.isValidElement(e)&&e.type===I}var P="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const $=d(((e,t)=>{var{ratio:n,style:o,as:c="div",asChild:i=!1}=e,l=a(e,["ratio","style","as","asChild"]);const u=i?L:c,d=Object.assign({aspectRatio:n},o),h=i?l.className:s(P,l.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:h},l))})),T=()=>E,V=()=>!1,D=()=>!0;function Y({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(T,V,D)?e:t}function A(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const B=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>A()?(0,r.jsx)(r.Fragment,{children:t}):e;function X(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function _(e){const t=X(e);(0,o.useEffect)((()=>()=>t()),[t])}function W(e,t=C){const[n,r]=(0,o.useState)(e),s=X(t);return(0,o.useEffect)((()=>{s(n,e)||r(e)}),[s,n,e]),n}function z(e,t,n){const r=X(e),s=W(n),i=(0,o.useMemo)((()=>(0,c.A)(r,t,s)),[r,t,s]);return _((()=>i.cancel())),i}const U=({children:e,capture:t,wait:n,options:r})=>{const s=o.Children.only(e),c=z(((...e)=>{const n=s?.props;if(n&&S(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(s,{[t]:c})};function H({onIntersectStart:e=E,onIntersectEnd:t=E,enabled:n=!0,calledOnce:r=!1,root:s=null,threshold:c=0,rootMargin:i="0px 0px 0px 0px"}){const l=(0,o.useRef)(0),a=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=X((([n],o)=>{if(!n)return;const s=n.target;n.isIntersecting?(a.current=!0,l.current+=1,e(n)):a.current&&(a.current=!1,l.current+=1,t(n)),r&&l.current>1&&o.unobserve(s)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:c,root:s,rootMargin:i}),u.current.observe(e))}),[n,c,s,i,d])}}const J=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:s,rootMargin:c}=e,i=a(e,["src","threshold","root","rootMargin"]);const{ref:l}=H({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:s,rootMargin:c});return(0,r.jsx)("img",Object.assign({ref:M(t,l)},i))}));J.displayName="LazyImage";const K=(0,o.forwardRef)(((e,t)=>{var{width:n,height:s,fallback:c,className:i,style:l,duration:u="0.2s",onLoad:d}=e,h=a(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,p]=(0,o.useState)(!1),m=!f,g=(0,o.useMemo)((()=>({position:"relative",width:n,height:s})),[n,s]),w=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},l)),[m,u,l]),b=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),v=i?`lazy-image-wrapper ${i}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:g,children:[m&&c,(0,r.jsx)(J,Object.assign({ref:t,width:n,height:s,style:w,onLoad:b},h))]})}));K.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const s=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:s?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:s,triggerPosition:c="after",rootMargin:i="150px 0px"})=>{const{ref:l}=H({onIntersectStart:e,root:n,threshold:o,enabled:s,rootMargin:i});return(0,r.jsxs)(r.Fragment,{children:["before"===c&&(0,r.jsx)("div",{ref:l}),t,"after"===c&&(0,r.jsx)("div",{ref:l})]})},q=d(((e,t)=>{var{children:n,as:s="div",asChild:c=!1}=e,i=a(e,["children","as","asChild"]);const l=c?L:s,{ref:u}=H(i);if(c&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(l,Object.assign({ref:R(t,u)},i,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const s=(0,o.useCallback)(((e,n)=>function(e){return k(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},s(e,t))))})},ee=g()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=X(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),s=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,s,(({target:t})=>{if(!r.current)return;const o=r.current,s=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!s&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:s="div",asChild:c=!1,onPointerDown:i,excludeRefs:l=[]}=e,u=a(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(i,{excludeRefs:l}),h=c?L:s;if(c&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(h,Object.assign({ref:R(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const se=({itemKey:e,items:t=[],separator:n,renderItem:s,separatorInterval:c=1,includeLastSeparator:i=!1})=>{const l=(0,o.useCallback)((e=>e===t.length-1?i:(e+1)%c==0),[i,c,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[s(e,t),l(t)&&n]})})},ce=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ie=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function le(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function ae(e=!0){const t=S(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!s.current){s.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{s.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),s=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield w(e);return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),i=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return h(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),l=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return h(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:s,copyImage:c,readText:i,readContents:l}}const he="modern-kit-local-storage",fe="modern-kit-session-storage",pe={localStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}},sessionStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}}},me=e=>pe[e],ge=me("localStorage"),we=e=>window.localStorage.getItem(e),be=e=>JSON.stringify(e),ve=e=>(ge.subscribe(e),()=>{ge.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,s=(0,o.useSyncExternalStore)(ve,(()=>we(t)),(()=>be(r)));return{state:(0,o.useMemo)((()=>s?O(s):r),[s,r]),setState:(0,o.useCallback)((e=>{try{const n=we(t),o=n?O(n):r,s=S(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(s)),ge.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ge.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>g()?window.matchMedia(e).matches:t??!1;function Ce(e,t){const[n,r]=(0,o.useState)(xe(e,t)),s=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",s),n}function Se(){return Ce("(prefers-color-scheme: dark)")?"dark":"light"}const je="color-scheme";function ke({defaultValue:e,key:t=je,shouldSetBodyClass:n=!1}={}){const r=Se(),s=S(e)?e():e,{state:c,setState:i}=ye({key:t,initialValue:s??r}),l=(0,o.useCallback)((()=>{i((e=>"dark"===e?"light":"dark"))}),[i]),a=(0,o.useCallback)((()=>{i("dark")}),[i]),u=(0,o.useCallback)((()=>{i("light")}),[i]),d=(0,o.useCallback)((()=>{i(r)}),[i,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(c),()=>{n&&document.body.classList.remove(c)})),[c,n]),{colorScheme:c,preferredColorScheme:r,setToggleMode:l,setDarkMode:a,setLightMode:u,setPreferredMode:d}}function Ee(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),s=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),c=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:s,reset:c}}function Oe({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,s]=(0,o.useState)(t),c=r0,l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),a=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const c=l(e,t);o&&o({prev:r,next:c}),s(c)}),[n,r,l]),u=(0,o.useCallback)((e=>{a("nextStep",!c,e)}),[c,a]),d=(0,o.useCallback)((e=>{a("prevStep",!i,e)}),[i,a]),h=(0,o.useCallback)(((t,n)=>{const o=S(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void s(t);throw new Error("Step not valid")}),[r,e]),f=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),s(t)}),[r,t]);return{currentStep:r,hasNextStep:c,hasPrevStep:i,goToNextStep:u,goToPrevStep:d,setStep:h,resetStep:f}}function Re(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:s,resetStep:c}=Oe({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:s,resetIndex:c}}function Me(e,t,n={}){const[r,s]=(0,o.useState)(e);return[r,z(s,t,n)]}function Le(e,t={}){const[n,r]=(0,o.useState)(""),[s,c]=Me("",e,t);return{value:n,debouncedValue:s,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),c(t)}),[c]),onReset:(0,o.useCallback)((()=>{r(""),c("")}),[c])}}function Fe(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ie({onFocus:e=E,onBlur:t=E}={}){const[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(null),c=X((t=>{r(!0),e(t)})),i=X((e=>{r(!1),t(e)})),l=(0,o.useCallback)((()=>{s.current&&(s.current.focus(),r(!0))}),[]);return ne(s,"focus",c),ne(s,"blur",i),{ref:s,isFocus:n,setFocus:l}}function Ne({onEnter:e=E,onLeave:t=E}={}){const[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(null),c=X((t=>{r(!0),e(t)})),i=X((e=>{r(!1),t(e)}));return ne(s,"mouseenter",c),ne(s,"mouseleave",i),{ref:s,isHovered:n}}const Pe=e=>{var t;return j(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function $e(e,t){const n=(0,o.useRef)(),r=X(e),{delay:s,enabled:c}=Pe(t),i=(0,o.useCallback)((()=>{n.current=window.setInterval(r,s)}),[r,s]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),i()}),[l,i]);return(0,o.useEffect)((()=>{if(!(s<0)&&c)return i(),()=>l()}),[l,i,c,s]),{set:i,reset:a,clear:l}}function Te({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),s=X((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];S(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",s),()=>t.removeEventListener("keydown",s)}),[e,s]),r}const Ve={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function De(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Ve),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:s,clientY:c,pageX:i,pageY:l}=t;let a=null,u=null,d=null,h=null;if(e.current){const t=e.current.getBoundingClientRect();a=s-t.left,u=c-t.top,d=t.left+window.scrollX,h=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:s,clientY:c,pageX:i,pageY:l,elementRelativeX:a,elementRelativeY:u,elementPositionX:d,elementPositionY:h})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Ye=()=>navigator.onLine,Ae=()=>!0,Be=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function Xe({onlineAction:e=E,offlineAction:t=E}={}){const n=X((n=>Be(n,e,t)));return(0,o.useSyncExternalStore)(n,Ye,Ae)}function _e(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const We={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function ze(e=E){const[t,n]=(0,o.useState)(We),r=(0,o.useRef)(null),s=X((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(s);return t.observe(e),()=>{t.unobserve(e)}}),[s]),{ref:r,contentRect:t}}function Ue({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),s=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>s())),[e,r,s]),{ref:t,lock:r,unlock:s}}const He=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Je=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:s=0,alignY:c="start",alignX:i="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+s+He(window.innerHeight,r.height,c),left:r.left+window.scrollX+o+He(window.innerWidth,r.width,i)};const l=e.getBoundingClientRect();return{top:r.top-l.top+e.scrollTop+s+He(l.height,r.height,c),left:r.left-l.left+e.scrollLeft+o+He(l.width,r.width,i)}};function Ke(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:s,top:c}=Je(r,t,n);r.scrollTo({top:c,left:s,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,s=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>s?O(s):r),[s,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?O(n):r,s=S(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(s)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:s}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[c,i]=(0,o.useState)(n),l=(0,o.useCallback)((e=>{i((t=>{const n=S(e)?e(t):e;return r&&s&&function(e,t,n){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=S(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,s,n),n}))}),[r,s]),a=(0,o.useCallback)((()=>{r&&s&&function(e,t){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,s),i(null)}),[r,s]);return Object.assign({state:c,setState:l,clearState:a},Oe(e))}function nt(e,t,n={}){const r=X(e),s=W(n),c=(0,o.useMemo)((()=>(0,i.A)(r,t,s)),[r,t,s]);return _((()=>c.cancel())),c}const rt=e=>{var t;return j(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=X(e),{delay:s,enabled:c}=rt(t),i=(0,o.useCallback)((()=>{n.current=setTimeout(r,s)}),[r,s]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),i()}),[l,i]);return(0,o.useEffect)((()=>{if(!(s<0)&&c)return i(),()=>l()}),[i,l,s,c]),{set:i,reset:a,clear:l}}function st(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function ct(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new l.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function it({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const lt={width:null,height:null};function at({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?lt:{width:window.innerWidth,height:window.innerHeight})),r=z(n,e),s=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",s),t}function ut(e,t,n){const{delay:r,enabled:s}=rt(t),{set:c,reset:i,clear:l}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!s||i()}),[r,s,i,...n]),{set:c,reset:i,clear:l}}}}]); \ No newline at end of file diff --git a/assets/js/8a16b8e9.81b7a2bd.js b/assets/js/8a16b8e9.81b7a2bd.js deleted file mode 100644 index a611ebf9f..000000000 --- a/assets/js/8a16b8e9.81b7a2bd.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[1503],{4905:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>a,default:()=>p,frontMatter:()=>l,metadata:()=>r,toc:()=>f});const r=JSON.parse('{"id":"react/hooks/useDocumentTitle","title":"useDocumentTitle","description":"SEO\uc640\ub294 \uad00\uacc4 \uc5c6\uc774 document.title\uc744 \ub3d9\uc801\uc73c\ub85c \ubcc0\uacbd\uc2dc\ucf1c\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useDocumentTitle.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useDocumentTitle","permalink":"/modern-kit/docs/react/hooks/useDocumentTitle","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useDependencyTimeout","permalink":"/modern-kit/docs/react/hooks/useDependencyTimeout"},"next":{"title":"useEventListener","permalink":"/modern-kit/docs/react/hooks/useEventListener"}}');var o=n(6206),i=n(3267),s=n(4027),c=n(4382);const l={},a="useDocumentTitle",u={},d=()=>{const e={button:"button",div:"div",input:"input",...(0,i.R)()},[t,n]=(0,c.useState)("useDocumentTitle"),[r,l]=(0,c.useState)("");return(0,s.rN)(t,{preserveTitleOnUnmount:!1}),(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.input,{type:"text",value:r,onChange:e=>l(e.target.value)}),(0,o.jsx)(e.button,{onClick:()=>{n(r),alert("\ud0c0\uc774\ud2c0\uc774 \ubcc0\uacbd\ub410\uc2b5\ub2c8\ub2e4.")},children:"\ud0c0\uc774\ud2c0 \ubcc0\uacbd"})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function h(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usedocumenttitle",children:"useDocumentTitle"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"SEO"}),"\uc640\ub294 \uad00\uacc4 \uc5c6\uc774 ",(0,o.jsx)(t.code,{children:"document.title"}),"\uc744 \ub3d9\uc801\uc73c\ub85c \ubcc0\uacbd\uc2dc\ucf1c\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"preserveTitleOnUnmount"})," \uc635\uc158\uc744 ",(0,o.jsx)(t.code,{children:"true"}),"\ub85c \uc900\ub2e4\uba74 ",(0,o.jsx)(t.code,{children:"unmount"})," \uc2dc\uc5d0 \ubcc0\uacbd \ub41c \ud0c0\uc774\ud2c0\ub85c \uc720\uc9c0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useDocumentTitle/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseDocumentTitleOption {\n preserveTitleOnUnmount?: boolean; // default: false\n}\n\nconst useDocumentTitle: (\n title: string,\n { preserveTitleOnUnmount }?: UseDocumentTitleOption\n) => void;\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useState } from 'react';\nimport { useDocumentTitle } from '@modern-kit/react';\n\nconst Example = () => {\n const [title, setTitle] = useState('useDocumentTitle');\n const [inputValue, setInputValue] = useState('');\n\n const handleChangeTitle = () => {\n setTitle(inputValue);\n alert('\ud0c0\uc774\ud2c0\uc774 \ubcc0\uacbd\ub410\uc2b5\ub2c8\ub2e4.');\n };\n\n useDocumentTitle(title, {\n preserveTitleOnUnmount: false, // default: false\n });\n\n return (\n
\n setInputValue(e.target.value)}\n />\n \n
\n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(d,{})]})}function p(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>Me,$I:()=>oe,AE:()=>We,BL:()=>J,DX:()=>I,FT:()=>ct,Fo:()=>et,Hn:()=>it,I5:()=>je,JF:()=>$e,K:()=>ae,K$:()=>Ue,M0:()=>Te,ML:()=>ne,Mj:()=>ye,Mk:()=>Ne,Mo:()=>ie,NT:()=>Ve,QV:()=>Ke,Ub:()=>ke,Ut:()=>Ee,W7:()=>K,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>_e,Zu:()=>le,_1:()=>Re,_g:()=>nt,aL:()=>U,aY:()=>Ie,bB:()=>Y,d7:()=>B,eG:()=>st,fN:()=>ce,fm:()=>G,gl:()=>M,hN:()=>A,iD:()=>de,iQ:()=>Le,jd:()=>se,lW:()=>at,oD:()=>H,oo:()=>Oe,pL:()=>q,qi:()=>ue,rN:()=>Fe,tD:()=>Se,u8:()=>Q,wY:()=>Be,xV:()=>L,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),i=n(3683),s=n(5086),c=n(7197),l=(n(1604),n(5938));function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function g(){return!m()}function w(e){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const v=e=>f(void 0,0,void 0,(function*(){return w(yield(yield fetch(e)).text())}));function b(e,t){var n;return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return v(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield p(e,h[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||C(e)&&C(t)&&isNaN(e)&&isNaN(t))return!0;if(S(e)&&S(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function k(e,t){return x(e,t,new WeakMap)}function S(e){return"function"==typeof e}function C(e){return"number"==typeof e}function E(e){return!function(e){return Object(e)!==e}(e)}function j(){}function O(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const R=(...e)=>t=>e.forEach((e=>{if(S(e))e(t);else if(null!=e){e.current=t}}));function T(...e){return(0,o.useCallback)(R(...e),e)}const I=o.forwardRef(((e,t)=>{const{children:n}=e,i=a(e,["children"]),s=o.Children.toArray(n),c=s.find(N);if(c){const e=c.props.children,n=s.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(F,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(F,Object.assign({},i,{ref:t,children:n}))}));I.displayName="Slot";const F=o.forwardRef(((e,t)=>{const{children:n}=e,r=a(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?R(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));F.displayName="SlotClone";const L=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function N(e){return o.isValidElement(e)&&e.type===L}var D="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const M=d(((e,t)=>{var{ratio:n,style:o,as:s="div",asChild:c=!1}=e,l=a(e,["ratio","style","as","asChild"]);const u=c?I:s,d=Object.assign({aspectRatio:n},o),f=c?l.className:i(D,l.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},l))})),$=()=>j,P=()=>!1,V=()=>!0;function Y({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)($,P,V)?e:t}function X(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const A=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>X()?(0,r.jsx)(r.Fragment,{children:t}):e;function W(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function _(e){const t=W(e);(0,o.useEffect)((()=>()=>t()),[t])}function z(e,t=k){const[n,r]=(0,o.useState)(e),i=W(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function B(e,t,n){const r=W(e),i=z(n),c=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return _((()=>c.cancel())),c}const U=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),s=B(((...e)=>{const n=i?.props;if(n&&S(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:s})};function J({onIntersectStart:e=j,onIntersectEnd:t=j,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:s=0,rootMargin:c="0px 0px 0px 0px"}){const l=(0,o.useRef)(0),a=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=W((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(a.current=!0,l.current+=1,e(n)):a.current&&(a.current=!1,l.current+=1,t(n)),r&&l.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:s,root:i,rootMargin:c}),u.current.observe(e))}),[n,s,i,c,d])}}const H=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:s}=e,c=a(e,["src","threshold","root","rootMargin"]);const{ref:l}=J({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:T(t,l)},c))}));H.displayName="LazyImage";const K=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=a(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,g=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),w=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},l)),[m,u,l]),v=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),b=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:b,style:g,children:[m&&s,(0,r.jsx)(H,Object.assign({ref:t,width:n,height:i,style:w,onLoad:v},f))]})}));K.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:s="after",rootMargin:c="150px 0px"})=>{const{ref:l}=J({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:l}),t,"after"===s&&(0,r.jsx)("div",{ref:l})]})},q=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1}=e,c=a(e,["children","as","asChild"]);const l=s?I:i,{ref:u}=J(c);if(s&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(l,Object.assign({ref:R(t,u)},c,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return E(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=g()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=W(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1,onPointerDown:c,excludeRefs:l=[]}=e,u=a(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:l}),f=s?I:i;if(s&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:R(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:s=1,includeLastSeparator:c=!1})=>{const l=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%s==0),[c,s,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),l(t)&&n]})})},se=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function le(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function ae(e=!0){const t=S(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield w(e);return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield b(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),l=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:s,readText:c,readContents:l}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],ge=me("localStorage"),we=e=>window.localStorage.getItem(e),ve=e=>JSON.stringify(e),be=e=>(ge.subscribe(e),()=>{ge.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(be,(()=>we(t)),(()=>ve(r)));return{state:(0,o.useMemo)((()=>i?O(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=we(t),o=n?O(n):r,i=S(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),ge.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ge.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>g()?window.matchMedia(e).matches:t??!1;function ke(e,t){const[n,r]=(0,o.useState)(xe(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function Se(){return ke("(prefers-color-scheme: dark)")?"dark":"light"}const Ce="color-scheme";function Ee({defaultValue:e,key:t=Ce,shouldSetBodyClass:n=!1}={}){const r=Se(),i=S(e)?e():e,{state:s,setState:c}=ye({key:t,initialValue:i??r}),l=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),a=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(s),()=>{n&&document.body.classList.remove(s)})),[s,n]),{colorScheme:s,preferredColorScheme:r,setToggleMode:l,setDarkMode:a,setLightMode:u,setPreferredMode:d}}function je(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:s}}function Oe({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),s=r0,l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),a=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const s=l(e,t);o&&o({prev:r,next:s}),i(s)}),[n,r,l]),u=(0,o.useCallback)((e=>{a("nextStep",!s,e)}),[s,a]),d=(0,o.useCallback)((e=>{a("prevStep",!c,e)}),[c,a]),f=(0,o.useCallback)(((t,n)=>{const o=S(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:s,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Re(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=Oe({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}function Te(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,B(i,t,n)]}function Ie(e,t={}){const[n,r]=(0,o.useState)(""),[i,s]=Te("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),s(t)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Fe(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Le({onFocus:e=j,onBlur:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=W((t=>{r(!0),e(t)})),c=W((e=>{r(!1),t(e)})),l=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",s),ne(i,"blur",c),{ref:i,isFocus:n,setFocus:l}}function Ne({onEnter:e=j,onLeave:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=W((t=>{r(!0),e(t)})),c=W((e=>{r(!1),t(e)}));return ne(i,"mouseenter",s),ne(i,"mouseleave",c),{ref:i,isHovered:n}}const De=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function Me(e,t){const n=(0,o.useRef)(),r=W(e),{delay:i,enabled:s}=De(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>l()}),[l,c,s,i]),{set:c,reset:a,clear:l}}function $e({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=W((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];S(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const Pe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Ve(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Pe),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l}=t;let a=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();a=i-t.left,u=s-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l,elementRelativeX:a,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Ye=()=>navigator.onLine,Xe=()=>!0,Ae=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function We({onlineAction:e=j,offlineAction:t=j}={}){const n=W((n=>Ae(n,e,t)));return(0,o.useSyncExternalStore)(n,Ye,Xe)}function _e(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const ze={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function Be(e=j){const[t,n]=(0,o.useState)(ze),r=(0,o.useRef)(null),i=W((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function Ue({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:s="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+Je(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+Je(window.innerWidth,r.width,c)};const l=e.getBoundingClientRect();return{top:r.top-l.top+e.scrollTop+i+Je(l.height,r.height,s),left:r.left-l.left+e.scrollLeft+o+Je(l.width,r.width,c)}};function Ke(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:s}=He(r,t,n);r.scrollTo({top:s,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>i?O(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?O(n):r,i=S(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[s,c]=(0,o.useState)(n),l=(0,o.useCallback)((e=>{c((t=>{const n=S(e)?e(t):e;return r&&i&&function(e,t,n){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=S(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),a=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),c(null)}),[r,i]);return Object.assign({state:s,setState:l,clearState:a},Oe(e))}function nt(e,t,n={}){const r=W(e),i=z(n),s=(0,o.useMemo)((()=>(0,c.A)(r,t,i)),[r,t,i]);return _((()=>s.cancel())),s}const rt=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=W(e),{delay:i,enabled:s}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>l()}),[c,l,i,s]),{set:c,reset:a,clear:l}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function st(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new l.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const lt={width:null,height:null};function at({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?lt:{width:window.innerWidth,height:window.innerHeight})),r=B(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:s,reset:c,clear:l}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||c()}),[r,i,c,...n]),{set:s,reset:c,clear:l}}}}]); \ No newline at end of file diff --git a/assets/js/8a16b8e9.b6ef01ce.js b/assets/js/8a16b8e9.b6ef01ce.js new file mode 100644 index 000000000..f6d3a19ec --- /dev/null +++ b/assets/js/8a16b8e9.b6ef01ce.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[1503],{3404:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>l,contentTitle:()=>u,default:()=>m,frontMatter:()=>a,metadata:()=>r,toc:()=>f});const r=JSON.parse('{"id":"react/hooks/useDocumentTitle","title":"useDocumentTitle","description":"SEO\uc640\ub294 \uad00\uacc4 \uc5c6\uc774 document.title\uc744 \ub3d9\uc801\uc73c\ub85c \ubcc0\uacbd\uc2dc\ucf1c\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useDocumentTitle.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useDocumentTitle","permalink":"/modern-kit/docs/react/hooks/useDocumentTitle","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useDependencyTimeout","permalink":"/modern-kit/docs/react/hooks/useDependencyTimeout"},"next":{"title":"useEventListener","permalink":"/modern-kit/docs/react/hooks/useEventListener"}}');var o=n(6206),i=n(3267),c=n(5907),s=n(4382);const a={},u="useDocumentTitle",l={},d=()=>{const e={button:"button",div:"div",input:"input",...(0,i.R)()},[t,n]=(0,s.useState)("useDocumentTitle"),[r,a]=(0,s.useState)("");return function(e,{preserveTitleOnUnmount:t=!1}={}){(0,c.E)((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}(t,{preserveTitleOnUnmount:!1}),(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.input,{type:"text",value:r,onChange:e=>a(e.target.value)}),(0,o.jsx)(e.button,{onClick:()=>{n(r),alert("\ud0c0\uc774\ud2c0\uc774 \ubcc0\uacbd\ub410\uc2b5\ub2c8\ub2e4.")},children:"\ud0c0\uc774\ud2c0 \ubcc0\uacbd"})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function p(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usedocumenttitle",children:"useDocumentTitle"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"SEO"}),"\uc640\ub294 \uad00\uacc4 \uc5c6\uc774 ",(0,o.jsx)(t.code,{children:"document.title"}),"\uc744 \ub3d9\uc801\uc73c\ub85c \ubcc0\uacbd\uc2dc\ucf1c\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"preserveTitleOnUnmount"})," \uc635\uc158\uc744 ",(0,o.jsx)(t.code,{children:"true"}),"\ub85c \uc900\ub2e4\uba74 ",(0,o.jsx)(t.code,{children:"unmount"})," \uc2dc\uc5d0 \ubcc0\uacbd \ub41c \ud0c0\uc774\ud2c0\ub85c \uc720\uc9c0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useDocumentTitle/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseDocumentTitleOption {\n preserveTitleOnUnmount?: boolean; // default: false\n}\n\nconst useDocumentTitle: (\n title: string,\n { preserveTitleOnUnmount }?: UseDocumentTitleOption\n) => void;\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useState } from 'react';\nimport { useDocumentTitle } from '@modern-kit/react';\n\nconst Example = () => {\n const [title, setTitle] = useState('useDocumentTitle');\n const [inputValue, setInputValue] = useState('');\n\n const handleChangeTitle = () => {\n setTitle(inputValue);\n alert('\ud0c0\uc774\ud2c0\uc774 \ubcc0\uacbd\ub410\uc2b5\ub2c8\ub2e4.');\n };\n\n useDocumentTitle(title, {\n preserveTitleOnUnmount: false, // default: false\n });\n\n return (\n
\n setInputValue(e.target.value)}\n />\n \n
\n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(d,{})]})}function m(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},3267:(e,t,n)=>{n.d(t,{R:()=>c,x:()=>s});var r=n(4382);const o={},i=r.createContext(o);function c(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),r.createElement(i.Provider,{value:t},e.children)}},5907:(e,t,n)=>{n.d(t,{E:()=>i});var r=n(9340),o=n(4382);const i=(0,r.oc)()?o.useLayoutEffect:o.useEffect},9340:(e,t,n)=>{function r(e,t,n,r){return new(n||(n=Promise))((function(o,i){function c(e){try{a(r.next(e))}catch(t){i(t)}}function s(e){try{a(r.throw(e))}catch(t){i(t)}}function a(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(c,s)}a((r=r.apply(e,t||[])).next())}))}n.d(t,{Et:()=>y,Fr:()=>s,Gp:()=>v,Ol:()=>E,Qd:()=>j,S$:()=>c,Tn:()=>w,Zp:()=>f,dK:()=>u,fl:()=>S,gD:()=>x,i5:()=>m,if:()=>p,l6:()=>k,lQ:()=>T,nS:()=>d,ni:()=>D,oc:()=>a}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,t)=>new Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function c(){return"undefined"==typeof window}function s(){if(c())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function a(){return!c()}function u(e){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const l=e=>r(void 0,void 0,void 0,(function*(){const t=yield fetch(e);return u(yield t.text())}));function d(e,t){var n;return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return l(e);if(!("write"in window.navigator.clipboard))return l(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return l(e);const c=yield function(e,t="png"){return new Promise(((n,c)=>{const s=new Image;s.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=s.width,e.height=s.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(s,0,0);const c=yield i(e,o[t]);n(c)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),c(r)}})),s.onerror=()=>{c(new Error("Failed to load image"))},s.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[c.type]:c})]),c}catch(c){throw console.error(`Failed to copy to clipboard. message: ${c.message}`),c}}))}function f(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function m(e,t){return Object.prototype.hasOwnProperty.call(e,t)}const h=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t)return!0;if(y(e)&&y(t)&&isNaN(e)&&isNaN(t))return!0;if(w(e)&&w(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return h(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!g(o,t.get(r),n))return!1;return!0}return h(e,t,n)};function v(e,t){return g(e,t,new WeakMap)}function w(e){return"function"==typeof e}function x(e){return null==e}function y(e){return"number"==typeof e}function b(e){return!function(e){return Object(e)!==e}(e)}function j(e){return b(e)&&"[object Object]"===Object.prototype.toString.call(e)}function k(e){return e===window}function T(){}function E(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}function C(e){return Object.keys(e)}const O={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};C(O);function S(e,t){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}function D(e,t,n){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=w(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/932ca9ec.70922df5.js b/assets/js/932ca9ec.70922df5.js new file mode 100644 index 000000000..a06cac446 --- /dev/null +++ b/assets/js/932ca9ec.70922df5.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[6748],{1368:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>u,assets:()=>d,contentTitle:()=>a,default:()=>p,frontMatter:()=>l,metadata:()=>o,toc:()=>f});const o=JSON.parse('{"id":"react/hooks/useScrollLock","title":"useScrollLock","description":"\ud2b9\uc815 \uc694\uc18c\uc758 \uc2a4\ud06c\ub864\uc744 lock, unlock \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useScrollLock.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useScrollLock","permalink":"/modern-kit/docs/react/hooks/useScrollLock","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useResizeObserver","permalink":"/modern-kit/docs/react/hooks/useResizeObserver"},"next":{"title":"useScrollTo","permalink":"/modern-kit/docs/react/hooks/useScrollTo"}}');var r=t(6206),c=t(3267),i=t(4382),s=t(5907);const l={},a="useScrollLock",d={},u=()=>{const e={button:"button",div:"div",...(0,c.R)()},{ref:n,lock:t,unlock:o}=function({autoLock:e=!0}={}){const n=(0,i.useRef)(null),t=(0,i.useRef)(null),o=(0,i.useCallback)((()=>{const e=n.current;t.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),r=(0,i.useCallback)((()=>{t.current&&(n.current.style.overflow=t.current)}),[]);return(0,s.E)((()=>(n.current||(n.current=document.body),e&&o(),()=>r())),[e,o,r]),{ref:n,lock:o,unlock:r}}({autoLock:!0}),l={width:"100%",height:"500px"};return(0,r.jsxs)(e.div,{children:[(0,r.jsx)(e.button,{onClick:t,children:"\uc2a4\ud06c\ub864 \uc7a0\uae08"}),(0,r.jsx)(e.button,{onClick:o,children:"\uc2a4\ud06c\ub864 \uc7a0\uae08 \ud574\uc81c"}),(0,r.jsxs)(e.div,{ref:n,style:{width:"400px",maxHeight:"600px",overflowY:"scroll"},children:[(0,r.jsx)(e.div,{style:{...l,backgroundColor:"red"}}),(0,r.jsx)(e.div,{style:{...l,backgroundColor:"green"}}),(0,r.jsx)(e.div,{style:{...l,backgroundColor:"blue"}})]})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"document.body",id:"documentbody",level:3},{value:"Specific element",id:"specific-element",level:3},{value:"Example",id:"example",level:3}];function h(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",p:"p",pre:"pre",...(0,c.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"usescrolllock",children:"useScrollLock"})}),"\n",(0,r.jsxs)(n.p,{children:["\ud2b9\uc815 \uc694\uc18c\uc758 \uc2a4\ud06c\ub864\uc744 ",(0,r.jsx)(n.code,{children:"lock"}),", ",(0,r.jsx)(n.code,{children:"unlock"})," \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"Modal"}),"\uacfc \uac19\uc740 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub80c\ub354\ub9c1 \ub410\uc744 \ub54c, \ubc30\uacbd \uc694\uc18c(",(0,r.jsx)(n.code,{children:"ex. document.body"}),")\uc758 \uc2a4\ud06c\ub864\uc744 \uc7a0\uae00 \ub54c \ud65c\uc6a9\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(n.p,{children:["\uae30\ubcf8\uc801\uc73c\ub85c ",(0,r.jsx)(n.code,{children:"document.body"}),"\uc744 \ub300\uc0c1\uc73c\ub85c mount \uc2dc\uc5d0 \uc790\ub3d9\uc73c\ub85c \uc2a4\ud06c\ub864\uc744 \uc7a0\uae09\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"unmount"})," \uc2dc\uc5d0\ub294 \ud0c0\uac9f \uc694\uc18c\uc758 \uc6d0\ub798 ",(0,r.jsx)(n.code,{children:"overflow"})," \uac12\uc73c\ub85c \ub2e4\uc2dc \ub3cc\ub824\ub193\uc2b5\ub2c8\ub2e4."]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useScrollLock/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,r.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseScrollLockProps {\n autoLock?: boolean;\n}\n\nconst useScrollLock: ({\n autoLock,\n}?: UseScrollLockProps) => {\n ref: React.MutableRefObject>;\n lock: () => void;\n unlock: () => void;\n};\n"})}),"\n",(0,r.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(n.h3,{id:"documentbody",children:"document.body"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useScrollLock } from '@modern-kit/react';\n\nconst Example = () => {\n useScrollLock(); // \uc790\ub3d9\uc73c\ub85c \uc7a0\uadf8\uc9c0 \uc54a\uc73c\ub824\uba74 { authLock: false }\ub85c \uc14b\ud305\ud558\uc138\uc694.\n\n return
{/* ... */}
;\n};\n"})}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(n.h3,{id:"specific-element",children:"Specific element"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useScrollLock } from '@modern-kit/react';\n\nconst Example = () => {\n const { ref, lock, unlock } = useScrollLock({ autoLock: false });\n\n const wrapperStyle = {\n width: '400px',\n maxHeight: '600px',\n overflowY: 'scroll',\n };\n const boxStyle = {\n width: '100%',\n maxHeight: '500px',\n };\n return (\n
\n \n \n
\n
\n
\n
\n
\n
\n );\n};\n"})}),"\n",(0,r.jsx)(n.h3,{id:"example",children:"Example"}),"\n","\n",(0,r.jsx)(u,{})]})}function p(e={}){const{wrapper:n}={...(0,c.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},3267:(e,n,t)=>{t.d(n,{R:()=>i,x:()=>s});var o=t(4382);const r={},c=o.createContext(r);function i(e){const n=o.useContext(c);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),o.createElement(c.Provider,{value:n},e.children)}},5907:(e,n,t)=>{t.d(n,{E:()=>c});var o=t(9340),r=t(4382);const c=(0,o.oc)()?r.useLayoutEffect:r.useEffect},9340:(e,n,t)=>{function o(e,n,t,o){return new(t||(t=Promise))((function(r,c){function i(e){try{l(o.next(e))}catch(n){c(n)}}function s(e){try{l(o.throw(e))}catch(n){c(n)}}function l(e){var n;e.done?r(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(i,s)}l((o=o.apply(e,n||[])).next())}))}t.d(n,{Et:()=>w,Fr:()=>s,Gp:()=>b,Ol:()=>C,Qd:()=>y,S$:()=>i,Tn:()=>g,Zp:()=>f,dK:()=>a,fl:()=>O,gD:()=>v,i5:()=>p,if:()=>h,l6:()=>j,lQ:()=>S,nS:()=>u,ni:()=>$,oc:()=>l}),"function"==typeof SuppressedError&&SuppressedError;const r={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const c=(e,n)=>new Promise(((t,o)=>{e.toBlob((e=>{e?t(e):o(new Error(`Failed to create blob with format ${n}`))}),n)}));function i(){return"undefined"==typeof window}function s(){if(i())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function l(){return!i()}function a(e){return o(this,void 0,void 0,(function*(){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const d=e=>o(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return a(yield n.text())}));function u(e,n){var t;return o(this,void 0,void 0,(function*(){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return d(e);if(!("write"in window.navigator.clipboard))return d(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return d(e);const i=yield function(e,n="png"){return new Promise(((t,i)=>{const s=new Image;s.onload=()=>o(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=s.width,e.height=s.height;try{const o=e.getContext("2d");if(!o)throw new Error("Failed to get 2d context");o.drawImage(s,0,0);const i=yield c(e,r[n]);t(i)}catch(o){console.error(`Failed to load image. message: ${o.mesaage}`),i(o)}})),s.onerror=()=>{i(new Error("Failed to load image"))},s.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(i){throw console.error(`Failed to copy to clipboard. message: ${i.message}`),i}}))}function f(){return o(this,void 0,void 0,(function*(){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function h(){return o(this,void 0,void 0,(function*(){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const m=(e,n,t)=>{const o=Object.keys(e),r=Object.keys(n);if(o.length!==r.length)return!1;for(let c=0;c{if(e===n)return!0;if(w(e)&&w(n)&&isNaN(e)&&isNaN(n))return!0;if(g(e)&&g(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const o=[...e],r=[...n];return m(o,r,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[o,r]of e)if(!n.has(o)||!x(r,n.get(o),t))return!1;return!0}return m(e,n,t)};function b(e,n){return x(e,n,new WeakMap)}function g(e){return"function"==typeof e}function v(e){return null==e}function w(e){return"number"==typeof e}function k(e){return!function(e){return Object(e)!==e}(e)}function y(e){return k(e)&&"[object Object]"===Object.prototype.toString.call(e)}function j(e){return e===window}function S(){}function C(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function E(e){return Object.keys(e)}const L={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};E(L);function O(e,n){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function $(e,n,t){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{const o=window[e],r=g(t)?t():t;o.setItem(n,JSON.stringify(r))}catch(o){throw new Error(`Failed to store data for key "${n}" in ${e}: ${o}`)}}}}]); \ No newline at end of file diff --git a/assets/js/932ca9ec.db37b8df.js b/assets/js/932ca9ec.db37b8df.js deleted file mode 100644 index be84066d5..000000000 --- a/assets/js/932ca9ec.db37b8df.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[6748],{7499:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>a,contentTitle:()=>l,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"react/hooks/useScrollLock","title":"useScrollLock","description":"\ud2b9\uc815 \uc694\uc18c\uc758 \uc2a4\ud06c\ub864\uc744 lock, unlock \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useScrollLock.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useScrollLock","permalink":"/modern-kit/docs/react/hooks/useScrollLock","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useResizeObserver","permalink":"/modern-kit/docs/react/hooks/useResizeObserver"},"next":{"title":"useScrollTo","permalink":"/modern-kit/docs/react/hooks/useScrollTo"}}');var o=n(6206),c=n(3267),i=n(4027);const s={},l="useScrollLock",a={},u=()=>{const e={button:"button",div:"div",...(0,c.R)()},{ref:t,lock:n,unlock:r}=(0,i.K$)({autoLock:!0}),s={width:"100%",height:"500px"};return(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.button,{onClick:n,children:"\uc2a4\ud06c\ub864 \uc7a0\uae08"}),(0,o.jsx)(e.button,{onClick:r,children:"\uc2a4\ud06c\ub864 \uc7a0\uae08 \ud574\uc81c"}),(0,o.jsxs)(e.div,{ref:t,style:{width:"400px",maxHeight:"600px",overflowY:"scroll"},children:[(0,o.jsx)(e.div,{style:{...s,backgroundColor:"red"}}),(0,o.jsx)(e.div,{style:{...s,backgroundColor:"green"}}),(0,o.jsx)(e.div,{style:{...s,backgroundColor:"blue"}})]})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"document.body",id:"documentbody",level:3},{value:"Specific element",id:"specific-element",level:3},{value:"Example",id:"example",level:3}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",p:"p",pre:"pre",...(0,c.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usescrolllock",children:"useScrollLock"})}),"\n",(0,o.jsxs)(t.p,{children:["\ud2b9\uc815 \uc694\uc18c\uc758 \uc2a4\ud06c\ub864\uc744 ",(0,o.jsx)(t.code,{children:"lock"}),", ",(0,o.jsx)(t.code,{children:"unlock"})," \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"Modal"}),"\uacfc \uac19\uc740 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub80c\ub354\ub9c1 \ub410\uc744 \ub54c, \ubc30\uacbd \uc694\uc18c(",(0,o.jsx)(t.code,{children:"ex. document.body"}),")\uc758 \uc2a4\ud06c\ub864\uc744 \uc7a0\uae00 \ub54c \ud65c\uc6a9\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:["\uae30\ubcf8\uc801\uc73c\ub85c ",(0,o.jsx)(t.code,{children:"document.body"}),"\uc744 \ub300\uc0c1\uc73c\ub85c mount \uc2dc\uc5d0 \uc790\ub3d9\uc73c\ub85c \uc2a4\ud06c\ub864\uc744 \uc7a0\uae09\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"unmount"})," \uc2dc\uc5d0\ub294 \ud0c0\uac9f \uc694\uc18c\uc758 \uc6d0\ub798 ",(0,o.jsx)(t.code,{children:"overflow"})," \uac12\uc73c\ub85c \ub2e4\uc2dc \ub3cc\ub824\ub193\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useScrollLock/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseScrollLockProps {\n autoLock?: boolean;\n}\n\nconst useScrollLock: ({\n autoLock,\n}?: UseScrollLockProps) => {\n ref: React.MutableRefObject>;\n lock: () => void;\n unlock: () => void;\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.h3,{id:"documentbody",children:"document.body"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useScrollLock } from '@modern-kit/react';\n\nconst Example = () => {\n useScrollLock(); // \uc790\ub3d9\uc73c\ub85c \uc7a0\uadf8\uc9c0 \uc54a\uc73c\ub824\uba74 { authLock: false }\ub85c \uc14b\ud305\ud558\uc138\uc694.\n\n return
{/* ... */}
;\n};\n"})}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h3,{id:"specific-element",children:"Specific element"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useScrollLock } from '@modern-kit/react';\n\nconst Example = () => {\n const { ref, lock, unlock } = useScrollLock({ autoLock: false });\n\n const wrapperStyle = {\n width: '400px',\n maxHeight: '600px',\n overflowY: 'scroll',\n };\n const boxStyle = {\n width: '100%',\n maxHeight: '500px',\n };\n return (\n
\n \n \n
\n
\n
\n
\n
\n
\n );\n};\n"})}),"\n",(0,o.jsx)(t.h3,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(u,{})]})}function h(e={}){const{wrapper:t}={...(0,c.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(f,{...e})}):f(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>$e,$I:()=>oe,AE:()=>Ae,BL:()=>J,DX:()=>I,FT:()=>st,Fo:()=>et,Hn:()=>ct,I5:()=>Ee,JF:()=>Te,K:()=>ae,K$:()=>He,M0:()=>Oe,ML:()=>ne,Mj:()=>ye,Mk:()=>Me,Mo:()=>ce,NT:()=>Xe,QV:()=>Ke,Ub:()=>xe,Ut:()=>je,W7:()=>K,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>We,Zu:()=>le,_1:()=>Le,_g:()=>nt,aL:()=>H,aY:()=>Ie,bB:()=>D,d7:()=>B,eG:()=>it,fN:()=>se,fm:()=>G,gl:()=>$,hN:()=>z,iD:()=>de,iQ:()=>Fe,jd:()=>ie,lW:()=>at,oD:()=>U,oo:()=>Re,pL:()=>q,qi:()=>ue,rN:()=>Ne,tD:()=>Se,u8:()=>Q,wY:()=>Be,xV:()=>F,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),c=n(3683),i=n(5086),s=n(7197),l=(n(1604),n(5938));function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function g(){return!m()}function b(e){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const w=e=>f(void 0,0,void 0,(function*(){return b(yield(yield fetch(e)).text())}));function v(e,t){var n;return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return w(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const c=yield p(e,h[t]);n(c)}catch(c){console.error(`Failed to load image. message: ${c.mesaage}`),r(c)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let c=0;c{if(e===t||C(e)&&C(t)&&isNaN(e)&&isNaN(t))return!0;if(S(e)&&S(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!k(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function x(e,t){return k(e,t,new WeakMap)}function S(e){return"function"==typeof e}function C(e){return"number"==typeof e}function j(e){return!function(e){return Object(e)!==e}(e)}function E(){}function R(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const L=(...e)=>t=>e.forEach((e=>{if(S(e))e(t);else if(null!=e){e.current=t}}));function O(...e){return(0,o.useCallback)(L(...e),e)}const I=o.forwardRef(((e,t)=>{const{children:n}=e,c=a(e,["children"]),i=o.Children.toArray(n),s=i.find(M);if(s){const e=s.props.children,n=i.map((t=>t===s?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(N,Object.assign({},c,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(N,Object.assign({},c,{ref:t,children:n}))}));I.displayName="Slot";const N=o.forwardRef(((e,t)=>{const{children:n}=e,r=a(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],c=t[r];/^on[A-Z]/.test(r)?o&&c?n[r]=(...e)=>{c(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),c):"className"===r&&(n[r]=[o,c].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?L(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));N.displayName="SlotClone";const F=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function M(e){return o.isValidElement(e)&&e.type===F}var P="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const $=d(((e,t)=>{var{ratio:n,style:o,as:i="div",asChild:s=!1}=e,l=a(e,["ratio","style","as","asChild"]);const u=s?I:i,d=Object.assign({aspectRatio:n},o),f=s?l.className:c(P,l.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},l))})),T=()=>E,Y=()=>!1,X=()=>!0;function D({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(T,Y,X)?e:t}function V(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const z=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>V()?(0,r.jsx)(r.Fragment,{children:t}):e;function A(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function W(e){const t=A(e);(0,o.useEffect)((()=>()=>t()),[t])}function _(e,t=x){const[n,r]=(0,o.useState)(e),c=A(t);return(0,o.useEffect)((()=>{c(n,e)||r(e)}),[c,n,e]),n}function B(e,t,n){const r=A(e),c=_(n),s=(0,o.useMemo)((()=>(0,i.A)(r,t,c)),[r,t,c]);return W((()=>s.cancel())),s}const H=({children:e,capture:t,wait:n,options:r})=>{const c=o.Children.only(e),i=B(((...e)=>{const n=c?.props;if(n&&S(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(c,{[t]:i})};function J({onIntersectStart:e=E,onIntersectEnd:t=E,enabled:n=!0,calledOnce:r=!1,root:c=null,threshold:i=0,rootMargin:s="0px 0px 0px 0px"}){const l=(0,o.useRef)(0),a=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=A((([n],o)=>{if(!n)return;const c=n.target;n.isIntersecting?(a.current=!0,l.current+=1,e(n)):a.current&&(a.current=!1,l.current+=1,t(n)),r&&l.current>1&&o.unobserve(c)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:i,root:c,rootMargin:s}),u.current.observe(e))}),[n,i,c,s,d])}}const U=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:c,rootMargin:i}=e,s=a(e,["src","threshold","root","rootMargin"]);const{ref:l}=J({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:c,rootMargin:i});return(0,r.jsx)("img",Object.assign({ref:O(t,l)},s))}));U.displayName="LazyImage";const K=(0,o.forwardRef)(((e,t)=>{var{width:n,height:c,fallback:i,className:s,style:l,duration:u="0.2s",onLoad:d}=e,f=a(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,g=(0,o.useMemo)((()=>({position:"relative",width:n,height:c})),[n,c]),b=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},l)),[m,u,l]),w=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),v=s?`lazy-image-wrapper ${s}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:g,children:[m&&i,(0,r.jsx)(U,Object.assign({ref:t,width:n,height:c,style:b,onLoad:w},f))]})}));K.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const c=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:c?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:c,triggerPosition:i="after",rootMargin:s="150px 0px"})=>{const{ref:l}=J({onIntersectStart:e,root:n,threshold:o,enabled:c,rootMargin:s});return(0,r.jsxs)(r.Fragment,{children:["before"===i&&(0,r.jsx)("div",{ref:l}),t,"after"===i&&(0,r.jsx)("div",{ref:l})]})},q=d(((e,t)=>{var{children:n,as:c="div",asChild:i=!1}=e,s=a(e,["children","as","asChild"]);const l=i?I:c,{ref:u}=J(s);if(i&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(l,Object.assign({ref:L(t,u)},s,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const c=(0,o.useCallback)(((e,n)=>function(e){return j(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},c(e,t))))})},ee=g()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=A(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),c=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,c,(({target:t})=>{if(!r.current)return;const o=r.current,c=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!c&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:c="div",asChild:i=!1,onPointerDown:s,excludeRefs:l=[]}=e,u=a(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(s,{excludeRefs:l}),f=i?I:c;if(i&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:L(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ce=({itemKey:e,items:t=[],separator:n,renderItem:c,separatorInterval:i=1,includeLastSeparator:s=!1})=>{const l=(0,o.useCallback)((e=>e===t.length-1?s:(e+1)%i==0),[s,i,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[c(e,t),l(t)&&n]})})},ie=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),se=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function le(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function ae(e=!0){const t=S(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),c=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!c.current){c.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{c.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),c=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield b(e);return t(n),!0}catch{return t(null),!1}}))),[]),i=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),l=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:c,copyImage:i,readText:s,readContents:l}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],ge=me("localStorage"),be=e=>window.localStorage.getItem(e),we=e=>JSON.stringify(e),ve=e=>(ge.subscribe(e),()=>{ge.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,c=(0,o.useSyncExternalStore)(ve,(()=>be(t)),(()=>we(r)));return{state:(0,o.useMemo)((()=>c?R(c):r),[c,r]),setState:(0,o.useCallback)((e=>{try{const n=be(t),o=n?R(n):r,c=S(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(c)),ge.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ge.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const ke=(e,t)=>g()?window.matchMedia(e).matches:t??!1;function xe(e,t){const[n,r]=(0,o.useState)(ke(e,t)),c=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",c),n}function Se(){return xe("(prefers-color-scheme: dark)")?"dark":"light"}const Ce="color-scheme";function je({defaultValue:e,key:t=Ce,shouldSetBodyClass:n=!1}={}){const r=Se(),c=S(e)?e():e,{state:i,setState:s}=ye({key:t,initialValue:c??r}),l=(0,o.useCallback)((()=>{s((e=>"dark"===e?"light":"dark"))}),[s]),a=(0,o.useCallback)((()=>{s("dark")}),[s]),u=(0,o.useCallback)((()=>{s("light")}),[s]),d=(0,o.useCallback)((()=>{s(r)}),[s,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(i),()=>{n&&document.body.classList.remove(i)})),[i,n]),{colorScheme:i,preferredColorScheme:r,setToggleMode:l,setDarkMode:a,setLightMode:u,setPreferredMode:d}}function Ee(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),c=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),i=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:c,reset:i}}function Re({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,c]=(0,o.useState)(t),i=r0,l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),a=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const i=l(e,t);o&&o({prev:r,next:i}),c(i)}),[n,r,l]),u=(0,o.useCallback)((e=>{a("nextStep",!i,e)}),[i,a]),d=(0,o.useCallback)((e=>{a("prevStep",!s,e)}),[s,a]),f=(0,o.useCallback)(((t,n)=>{const o=S(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void c(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),c(t)}),[r,t]);return{currentStep:r,hasNextStep:i,hasPrevStep:s,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Le(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:c,resetStep:i}=Re({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:c,resetIndex:i}}function Oe(e,t,n={}){const[r,c]=(0,o.useState)(e);return[r,B(c,t,n)]}function Ie(e,t={}){const[n,r]=(0,o.useState)(""),[c,i]=Oe("",e,t);return{value:n,debouncedValue:c,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),i(t)}),[i]),onReset:(0,o.useCallback)((()=>{r(""),i("")}),[i])}}function Ne(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Fe({onFocus:e=E,onBlur:t=E}={}){const[n,r]=(0,o.useState)(!1),c=(0,o.useRef)(null),i=A((t=>{r(!0),e(t)})),s=A((e=>{r(!1),t(e)})),l=(0,o.useCallback)((()=>{c.current&&(c.current.focus(),r(!0))}),[]);return ne(c,"focus",i),ne(c,"blur",s),{ref:c,isFocus:n,setFocus:l}}function Me({onEnter:e=E,onLeave:t=E}={}){const[n,r]=(0,o.useState)(!1),c=(0,o.useRef)(null),i=A((t=>{r(!0),e(t)})),s=A((e=>{r(!1),t(e)}));return ne(c,"mouseenter",i),ne(c,"mouseleave",s),{ref:c,isHovered:n}}const Pe=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function $e(e,t){const n=(0,o.useRef)(),r=A(e),{delay:c,enabled:i}=Pe(t),s=(0,o.useCallback)((()=>{n.current=window.setInterval(r,c)}),[r,c]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),s()}),[l,s]);return(0,o.useEffect)((()=>{if(!(c<0)&&i)return s(),()=>l()}),[l,s,i,c]),{set:s,reset:a,clear:l}}function Te({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),c=A((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];S(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",c),()=>t.removeEventListener("keydown",c)}),[e,c]),r}const Ye={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Xe(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Ye),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:c,clientY:i,pageX:s,pageY:l}=t;let a=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();a=c-t.left,u=i-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:c,clientY:i,pageX:s,pageY:l,elementRelativeX:a,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const De=()=>navigator.onLine,Ve=()=>!0,ze=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function Ae({onlineAction:e=E,offlineAction:t=E}={}){const n=A((n=>ze(n,e,t)));return(0,o.useSyncExternalStore)(n,De,Ve)}function We(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const _e={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function Be(e=E){const[t,n]=(0,o.useState)(_e),r=(0,o.useRef)(null),c=A((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(c);return t.observe(e),()=>{t.unobserve(e)}}),[c]),{ref:r,contentRect:t}}function He({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),c=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>c())),[e,r,c]),{ref:t,lock:r,unlock:c}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ue=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:c=0,alignY:i="start",alignX:s="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+c+Je(window.innerHeight,r.height,i),left:r.left+window.scrollX+o+Je(window.innerWidth,r.width,s)};const l=e.getBoundingClientRect();return{top:r.top-l.top+e.scrollTop+c+Je(l.height,r.height,i),left:r.left-l.left+e.scrollLeft+o+Je(l.width,r.width,s)}};function Ke(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:c,top:i}=Ue(r,t,n);r.scrollTo({top:i,left:c,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,c=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>c?R(c):r),[c,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?R(n):r,c=S(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(c)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:c}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[i,s]=(0,o.useState)(n),l=(0,o.useCallback)((e=>{s((t=>{const n=S(e)?e(t):e;return r&&c&&function(e,t,n){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=S(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,c,n),n}))}),[r,c]),a=(0,o.useCallback)((()=>{r&&c&&function(e,t){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,c),s(null)}),[r,c]);return Object.assign({state:i,setState:l,clearState:a},Re(e))}function nt(e,t,n={}){const r=A(e),c=_(n),i=(0,o.useMemo)((()=>(0,s.A)(r,t,c)),[r,t,c]);return W((()=>i.cancel())),i}const rt=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=A(e),{delay:c,enabled:i}=rt(t),s=(0,o.useCallback)((()=>{n.current=setTimeout(r,c)}),[r,c]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),s()}),[l,s]);return(0,o.useEffect)((()=>{if(!(c<0)&&i)return s(),()=>l()}),[s,l,c,i]),{set:s,reset:a,clear:l}}function ct(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function it(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new l.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function st({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const lt={width:null,height:null};function at({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?lt:{width:window.innerWidth,height:window.innerHeight})),r=B(n,e),c=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",c),t}function ut(e,t,n){const{delay:r,enabled:c}=rt(t),{set:i,reset:s,clear:l}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!c||s()}),[r,c,s,...n]),{set:i,reset:s,clear:l}}}}]); \ No newline at end of file diff --git a/assets/js/9358.cf0d0d27.js b/assets/js/9358.cf0d0d27.js deleted file mode 100644 index b208113ee..000000000 --- a/assets/js/9358.cf0d0d27.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 9358.cf0d0d27.js.LICENSE.txt */ -(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[9358],{5938:function(i,e,o){var t;!function(r,n){"use strict";var a="function",s="undefined",b="object",c="string",l="major",u="model",w="name",d="type",p="vendor",f="version",m="architecture",v="console",h="mobile",g="tablet",x="smarttv",k="wearable",y="embedded",_="Amazon",T="Apple",S="ASUS",A="BlackBerry",O="Browser",j="Chrome",N="Firefox",q="Google",z="Huawei",E="LG",C="Microsoft",P="Motorola",U="Opera",M="Samsung",B="Sharp",R="Sony",D="Xiaomi",V="Zebra",I="Facebook",$="Chromium OS",G="Mac OS",L=" Browser",W=function(i){for(var e={},o=0;o0?2===s.length?typeof s[1]==a?this[s[0]]=s[1].call(this,l):this[s[0]]=s[1]:3===s.length?typeof s[1]!==a||s[1].exec&&s[1].test?this[s[0]]=l?l.replace(s[1],s[2]):n:this[s[0]]=l?s[1].call(this,l,s[2]):n:4===s.length&&(this[s[0]]=l?s[3].call(this,l.replace(s[1],s[2])):n):this[s]=l||n;u+=2}},K=function(i,e){for(var o in e)if(typeof e[o]===b&&e[o].length>0){for(var t=0;t2&&(i[u]="iPad",i[d]=g),i},this.getEngine=function(){var i={};return i[w]=n,i[f]=n,X.call(i,t,x.engine),i},this.getOS=function(){var i={};return i[w]=n,i[f]=n,X.call(i,t,x.os),k&&!i[w]&&v&&v.platform&&"Unknown"!=v.platform&&(i[w]=v.platform.replace(/chrome os/i,$).replace(/macos/i,G)),i},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return t},this.setUA=function(i){return t=typeof i===c&&i.length>500?Z(i,500):i,this},this.setUA(t),this};J.VERSION="1.0.39",J.BROWSER=W([w,f,l]),J.CPU=W([m]),J.DEVICE=W([u,p,d,v,h,x,g,k,y]),J.ENGINE=J.OS=W([w,f]),typeof e!==s?(i.exports&&(e=i.exports=J),e.UAParser=J):o.amdO?(t=function(){return J}.call(e,o,e,i))===n||(i.exports=t):typeof r!==s&&(r.UAParser=J);var ii=typeof r!==s&&(r.jQuery||r.Zepto);if(ii&&!ii.ua){var ei=new J;ii.ua=ei.getResult(),ii.ua.get=function(){return ei.getUA()},ii.ua.set=function(i){ei.setUA(i);var e=ei.getResult();for(var o in e)ii.ua[o]=e[o]}}}("object"==typeof window?window:this)},3683:(i,e)=>{var o;!function(){"use strict";var t={}.hasOwnProperty;function r(){for(var i="",e=0;e{"use strict";o.d(e,{R:()=>a,x:()=>s});var t=o(4382);const r={},n=t.createContext(r);function a(i){const e=t.useContext(n);return t.useMemo((function(){return"function"==typeof i?i(e):{...e,...i}}),[e,i])}function s(i){let e;return e=i.disableParentContext?"function"==typeof i.components?i.components(r):i.components||r:a(i.components),t.createElement(n.Provider,{value:e},i.children)}},5086:(i,e,o)=>{"use strict";o.d(e,{A:()=>z});var t=o(322);const r="object"==typeof global&&global&&global.Object===Object&&global;var n="object"==typeof self&&self&&self.Object===Object&&self;const a=r||n||Function("return this")();const s=function(){return a.Date.now()};var b=/\s/;const c=function(i){for(var e=i.length;e--&&b.test(i.charAt(e)););return e};var l=/^\s+/;const u=function(i){return i?i.slice(0,c(i)+1).replace(l,""):i};const w=a.Symbol;var d=Object.prototype,p=d.hasOwnProperty,f=d.toString,m=w?w.toStringTag:void 0;const v=function(i){var e=p.call(i,m),o=i[m];try{i[m]=void 0;var t=!0}catch(n){}var r=f.call(i);return t&&(e?i[m]=o:delete i[m]),r};var h=Object.prototype.toString;const g=function(i){return h.call(i)};var x=w?w.toStringTag:void 0;const k=function(i){return null==i?void 0===i?"[object Undefined]":"[object Null]":x&&x in Object(i)?v(i):g(i)};const y=function(i){return null!=i&&"object"==typeof i};const _=function(i){return"symbol"==typeof i||y(i)&&"[object Symbol]"==k(i)};var T=/^[-+]0x[0-9a-f]+$/i,S=/^0b[01]+$/i,A=/^0o[0-7]+$/i,O=parseInt;const j=function(i){if("number"==typeof i)return i;if(_(i))return NaN;if((0,t.A)(i)){var e="function"==typeof i.valueOf?i.valueOf():i;i=(0,t.A)(e)?e+"":e}if("string"!=typeof i)return 0===i?i:+i;i=u(i);var o=S.test(i);return o||A.test(i)?O(i.slice(2),o?2:8):T.test(i)?NaN:+i};var N=Math.max,q=Math.min;const z=function(i,e,o){var r,n,a,b,c,l,u=0,w=!1,d=!1,p=!0;if("function"!=typeof i)throw new TypeError("Expected a function");function f(e){var o=r,t=n;return r=n=void 0,u=e,b=i.apply(t,o)}function m(i){var o=i-l;return void 0===l||o>=e||o<0||d&&i-u>=a}function v(){var i=s();if(m(i))return h(i);c=setTimeout(v,function(i){var o=e-(i-l);return d?q(o,a-(i-u)):o}(i))}function h(i){return c=void 0,p&&r?f(i):(r=n=void 0,b)}function g(){var i=s(),o=m(i);if(r=arguments,n=this,l=i,o){if(void 0===c)return function(i){return u=i,c=setTimeout(v,e),w?f(i):b}(l);if(d)return clearTimeout(c),c=setTimeout(v,e),f(l)}return void 0===c&&(c=setTimeout(v,e)),b}return e=j(e)||0,(0,t.A)(o)&&(w=!!o.leading,a=(d="maxWait"in o)?N(j(o.maxWait)||0,e):a,p="trailing"in o?!!o.trailing:p),g.cancel=function(){void 0!==c&&clearTimeout(c),u=0,r=l=n=c=void 0},g.flush=function(){return void 0===c?b:h(s())},g}},322:(i,e,o)=>{"use strict";o.d(e,{A:()=>t});const t=function(i){var e=typeof i;return null!=i&&("object"==e||"function"==e)}},7197:(i,e,o)=>{"use strict";o.d(e,{A:()=>n});var t=o(5086),r=o(322);const n=function(i,e,o){var n=!0,a=!0;if("function"!=typeof i)throw new TypeError("Expected a function");return(0,r.A)(o)&&(n="leading"in o?!!o.leading:n,a="trailing"in o?!!o.trailing:a),(0,t.A)(i,e,{leading:n,maxWait:e,trailing:a})}}}]); \ No newline at end of file diff --git a/assets/js/9602.e7bd29f4.js b/assets/js/9602.e7bd29f4.js new file mode 100644 index 000000000..09e4ccbc0 --- /dev/null +++ b/assets/js/9602.e7bd29f4.js @@ -0,0 +1 @@ +(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[9602],{5938:function(i,e,o){var a;!function(r,n){"use strict";var t="function",s="undefined",b="object",w="string",d="major",l="model",c="name",u="type",p="vendor",m="version",h="architecture",f="console",v="mobile",g="tablet",k="smarttv",x="wearable",y="embedded",_="Amazon",T="Apple",S="ASUS",q="BlackBerry",z="Browser",N="Chrome",A="Firefox",C="Google",O="Huawei",E="LG",P="Microsoft",U="Motorola",j="Opera",B="Samsung",M="Sharp",R="Sony",D="Xiaomi",V="Zebra",I="Facebook",G="Chromium OS",L="Mac OS",F=" Browser",H=function(i){for(var e={},o=0;o0?2===s.length?typeof s[1]==t?this[s[0]]=s[1].call(this,d):this[s[0]]=s[1]:3===s.length?typeof s[1]!==t||s[1].exec&&s[1].test?this[s[0]]=d?d.replace(s[1],s[2]):n:this[s[0]]=d?s[1].call(this,d,s[2]):n:4===s.length&&(this[s[0]]=d?s[3].call(this,d.replace(s[1],s[2])):n):this[s]=d||n;l+=2}},K=function(i,e){for(var o in e)if(typeof e[o]===b&&e[o].length>0){for(var a=0;a2&&(i[l]="iPad",i[u]=g),i},this.getEngine=function(){var i={};return i[c]=n,i[m]=n,X.call(i,a,k.engine),i},this.getOS=function(){var i={};return i[c]=n,i[m]=n,X.call(i,a,k.os),x&&!i[c]&&f&&f.platform&&"Unknown"!=f.platform&&(i[c]=f.platform.replace(/chrome os/i,G).replace(/macos/i,L)),i},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return a},this.setUA=function(i){return a=typeof i===w&&i.length>500?W(i,500):i,this},this.setUA(a),this};J.VERSION="1.0.39",J.BROWSER=H([c,m,d]),J.CPU=H([h]),J.DEVICE=H([l,p,u,f,v,k,g,x,y]),J.ENGINE=J.OS=H([c,m]),typeof e!==s?(i.exports&&(e=i.exports=J),e.UAParser=J):o.amdO?(a=function(){return J}.call(e,o,e,i))===n||(i.exports=a):typeof r!==s&&(r.UAParser=J);var ii=typeof r!==s&&(r.jQuery||r.Zepto);if(ii&&!ii.ua){var ei=new J;ii.ua=ei.getResult(),ii.ua.get=function(){return ei.getUA()},ii.ua.set=function(i){ei.setUA(i);var e=ei.getResult();for(var o in e)ii.ua[o]=e[o]}}}("object"==typeof window?window:this)},3267:(i,e,o)=>{"use strict";o.d(e,{R:()=>t,x:()=>s});var a=o(4382);const r={},n=a.createContext(r);function t(i){const e=a.useContext(n);return a.useMemo((function(){return"function"==typeof i?i(e):{...e,...i}}),[e,i])}function s(i){let e;return e=i.disableParentContext?"function"==typeof i.components?i.components(r):i.components||r:t(i.components),a.createElement(n.Provider,{value:e},i.children)}}}]); \ No newline at end of file diff --git a/assets/js/9be130a4.4d76744e.js b/assets/js/9be130a4.4d76744e.js new file mode 100644 index 000000000..2e6ae9585 --- /dev/null +++ b/assets/js/9be130a4.4d76744e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[2086],{5085:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>d,assets:()=>a,contentTitle:()=>u,default:()=>v,frontMatter:()=>c,metadata:()=>s,toc:()=>l});const s=JSON.parse('{"id":"react/hooks/usePrevious","title":"usePrevious","description":"\uc774\uc804 \ub80c\ub354\ub9c1\uc5d0\uc11c \uc778\uc218\uc758 \uac12\uc744 \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/usePrevious.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/usePrevious","permalink":"/modern-kit/docs/react/hooks/usePrevious","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"usePreservedState","permalink":"/modern-kit/docs/react/hooks/usePreservedState"},"next":{"title":"useResizeObserver","permalink":"/modern-kit/docs/react/hooks/useResizeObserver"}}');var r=t(6206),o=t(3267),i=t(4382);const c={},u="usePrevious",a={},d=()=>{const e={button:"button",div:"div",...(0,o.R)()},[n,t]=(0,i.useState)(0),s=function(e){const n=(0,i.useRef)(e);return(0,i.useEffect)((()=>{n.current=e}),[e]),n.current}(n);return(0,r.jsxs)(e.div,{children:[(0,r.jsxs)(e.div,{children:["Current Count is - ",n]}),(0,r.jsxs)(e.div,{children:["Previous Count is - ",s]}),(0,r.jsx)(e.button,{onClick:()=>{t(n+1)},children:"Increment"})]})},l=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function h(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"useprevious",children:"usePrevious"})}),"\n",(0,r.jsx)(n.p,{children:"\uc774\uc804 \ub80c\ub354\ub9c1\uc5d0\uc11c \uc778\uc218\uc758 \uac12\uc744 \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/usePrevious/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,r.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"const usePrevious: (value: T) => T;\n"})}),"\n",(0,r.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useState } from 'react';\nimport { usePrevious } from '@modern-kit/react';\n\nconst Example = () => {\n const [count, setCount] = useState(0);\n const previousCount = usePrevious(count);\n\n const onIncrementCount = () => {\n setCount(count + 1);\n };\n\n return (\n
\n
Current Count is - {count}
\n
Previous Count is - {previousCount}
\n \n
\n );\n};\n"})}),"\n","\n",(0,r.jsx)(d,{})]})}function v(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},3267:(e,n,t)=>{t.d(n,{R:()=>i,x:()=>c});var s=t(4382);const r={},o=s.createContext(r);function i(e){const n=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),s.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/9be130a4.7890da22.js b/assets/js/9be130a4.7890da22.js deleted file mode 100644 index 91cadb643..000000000 --- a/assets/js/9be130a4.7890da22.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[2086],{486:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>l,default:()=>p,frontMatter:()=>a,metadata:()=>r,toc:()=>f});const r=JSON.parse('{"id":"react/hooks/usePrevious","title":"usePrevious","description":"\uc774\uc804 \ub80c\ub354\ub9c1\uc5d0\uc11c \uc778\uc218\uc758 \uac12\uc744 \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/usePrevious.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/usePrevious","permalink":"/modern-kit/docs/react/hooks/usePrevious","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"usePreservedState","permalink":"/modern-kit/docs/react/hooks/usePreservedState"},"next":{"title":"useResizeObserver","permalink":"/modern-kit/docs/react/hooks/useResizeObserver"}}');var o=n(6206),i=n(3267),s=n(4027),c=n(4382);const a={},l="usePrevious",u={},d=()=>{const e={button:"button",div:"div",...(0,i.R)()},[t,n]=(0,c.useState)(0),r=(0,s.ZC)(t);return(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.div,{children:["Current Count is - ",t]}),(0,o.jsxs)(e.div,{children:["Previous Count is - ",r]}),(0,o.jsx)(e.button,{onClick:()=>{n(t+1)},children:"Increment"})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function h(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"useprevious",children:"usePrevious"})}),"\n",(0,o.jsx)(t.p,{children:"\uc774\uc804 \ub80c\ub354\ub9c1\uc5d0\uc11c \uc778\uc218\uc758 \uac12\uc744 \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/usePrevious/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"const usePrevious: (value: T) => T;\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useState } from 'react';\nimport { usePrevious } from '@modern-kit/react';\n\nconst Example = () => {\n const [count, setCount] = useState(0);\n const previousCount = usePrevious(count);\n\n const onIncrementCount = () => {\n setCount(count + 1);\n };\n\n return (\n
\n
Current Count is - {count}
\n
Previous Count is - {previousCount}
\n \n
\n );\n};\n"})}),"\n","\n",(0,o.jsx)(d,{})]})}function p(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>$e,$I:()=>oe,AE:()=>De,BL:()=>H,DX:()=>I,FT:()=>ct,Fo:()=>et,Hn:()=>it,I5:()=>je,JF:()=>Te,K:()=>le,K$:()=>Je,M0:()=>Pe,ML:()=>ne,Mj:()=>ye,Mk:()=>Le,Mo:()=>ie,NT:()=>Xe,QV:()=>Ue,Ub:()=>xe,Ut:()=>Ee,W7:()=>U,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>We,Zu:()=>ae,_1:()=>Oe,_g:()=>nt,aL:()=>J,aY:()=>Ie,bB:()=>V,d7:()=>B,eG:()=>st,fN:()=>ce,fm:()=>G,gl:()=>$,hN:()=>A,iD:()=>de,iQ:()=>Ne,jd:()=>se,lW:()=>lt,oD:()=>K,oo:()=>Re,pL:()=>q,qi:()=>ue,rN:()=>Fe,tD:()=>Ce,u8:()=>Q,wY:()=>Be,xV:()=>N,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),i=n(3683),s=n(5086),c=n(7197),a=(n(1604),n(5938));function l(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function v(){return!m()}function g(e){return f(this,0,void 0,(function*(){if(!v())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const w=e=>f(void 0,0,void 0,(function*(){return g(yield(yield fetch(e)).text())}));function b(e,t){var n;return f(this,0,void 0,(function*(){if(!v())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return w(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield p(e,h[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||S(e)&&S(t)&&isNaN(e)&&isNaN(t))return!0;if(C(e)&&C(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!k(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function x(e,t){return k(e,t,new WeakMap)}function C(e){return"function"==typeof e}function S(e){return"number"==typeof e}function E(e){return!function(e){return Object(e)!==e}(e)}function j(){}function R(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const O=(...e)=>t=>e.forEach((e=>{if(C(e))e(t);else if(null!=e){e.current=t}}));function P(...e){return(0,o.useCallback)(O(...e),e)}const I=o.forwardRef(((e,t)=>{const{children:n}=e,i=l(e,["children"]),s=o.Children.toArray(n),c=s.find(L);if(c){const e=c.props.children,n=s.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(F,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(F,Object.assign({},i,{ref:t,children:n}))}));I.displayName="Slot";const F=o.forwardRef(((e,t)=>{const{children:n}=e,r=l(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?O(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));F.displayName="SlotClone";const N=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function L(e){return o.isValidElement(e)&&e.type===N}var M="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const $=d(((e,t)=>{var{ratio:n,style:o,as:s="div",asChild:c=!1}=e,a=l(e,["ratio","style","as","asChild"]);const u=c?I:s,d=Object.assign({aspectRatio:n},o),f=c?a.className:i(M,a.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},a))})),T=()=>j,Y=()=>!1,X=()=>!0;function V({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(T,Y,X)?e:t}function z(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const A=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>z()?(0,r.jsx)(r.Fragment,{children:t}):e;function D(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function W(e){const t=D(e);(0,o.useEffect)((()=>()=>t()),[t])}function _(e,t=x){const[n,r]=(0,o.useState)(e),i=D(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function B(e,t,n){const r=D(e),i=_(n),c=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return W((()=>c.cancel())),c}const J=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),s=B(((...e)=>{const n=i?.props;if(n&&C(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:s})};function H({onIntersectStart:e=j,onIntersectEnd:t=j,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:s=0,rootMargin:c="0px 0px 0px 0px"}){const a=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=D((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(l.current=!0,a.current+=1,e(n)):l.current&&(l.current=!1,a.current+=1,t(n)),r&&a.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:s,root:i,rootMargin:c}),u.current.observe(e))}),[n,s,i,c,d])}}const K=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:s}=e,c=l(e,["src","threshold","root","rootMargin"]);const{ref:a}=H({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:P(t,a)},c))}));K.displayName="LazyImage";const U=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:s,className:c,style:a,duration:u="0.2s",onLoad:d}=e,f=l(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,v=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),g=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},a)),[m,u,a]),w=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),b=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:b,style:v,children:[m&&s,(0,r.jsx)(K,Object.assign({ref:t,width:n,height:i,style:g,onLoad:w},f))]})}));U.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:s="after",rootMargin:c="150px 0px"})=>{const{ref:a}=H({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:a}),t,"after"===s&&(0,r.jsx)("div",{ref:a})]})},q=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1}=e,c=l(e,["children","as","asChild"]);const a=s?I:i,{ref:u}=H(c);if(s&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(a,Object.assign({ref:O(t,u)},c,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return E(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=v()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=D(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1,onPointerDown:c,excludeRefs:a=[]}=e,u=l(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:a}),f=s?I:i;if(s&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:O(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:s=1,includeLastSeparator:c=!1})=>{const a=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%s==0),[c,s,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),a(t)&&n]})})},se=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function ae(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function le(e=!0){const t=C(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield g(e);return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield b(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!v())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),a=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!v())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:s,readText:c,readContents:a}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],ve=me("localStorage"),ge=e=>window.localStorage.getItem(e),we=e=>JSON.stringify(e),be=e=>(ve.subscribe(e),()=>{ve.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=C(n)?n():n,i=(0,o.useSyncExternalStore)(be,(()=>ge(t)),(()=>we(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=ge(t),o=n?R(n):r,i=C(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),ve.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ve.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const ke=(e,t)=>v()?window.matchMedia(e).matches:t??!1;function xe(e,t){const[n,r]=(0,o.useState)(ke(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function Ce(){return xe("(prefers-color-scheme: dark)")?"dark":"light"}const Se="color-scheme";function Ee({defaultValue:e,key:t=Se,shouldSetBodyClass:n=!1}={}){const r=Ce(),i=C(e)?e():e,{state:s,setState:c}=ye({key:t,initialValue:i??r}),a=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),l=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(s),()=>{n&&document.body.classList.remove(s)})),[s,n]),{colorScheme:s,preferredColorScheme:r,setToggleMode:a,setDarkMode:l,setLightMode:u,setPreferredMode:d}}function je(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:s}}function Re({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),s=r0,a=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),l=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const s=a(e,t);o&&o({prev:r,next:s}),i(s)}),[n,r,a]),u=(0,o.useCallback)((e=>{l("nextStep",!s,e)}),[s,l]),d=(0,o.useCallback)((e=>{l("prevStep",!c,e)}),[c,l]),f=(0,o.useCallback)(((t,n)=>{const o=C(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:s,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Oe(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=Re({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}function Pe(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,B(i,t,n)]}function Ie(e,t={}){const[n,r]=(0,o.useState)(""),[i,s]=Pe("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),s(t)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Fe(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onFocus:e=j,onBlur:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=D((t=>{r(!0),e(t)})),c=D((e=>{r(!1),t(e)})),a=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",s),ne(i,"blur",c),{ref:i,isFocus:n,setFocus:a}}function Le({onEnter:e=j,onLeave:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=D((t=>{r(!0),e(t)})),c=D((e=>{r(!1),t(e)}));return ne(i,"mouseenter",s),ne(i,"mouseleave",c),{ref:i,isHovered:n}}const Me=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function $e(e,t){const n=(0,o.useRef)(),r=D(e),{delay:i,enabled:s}=Me(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>a()}),[a,c,s,i]),{set:c,reset:l,clear:a}}function Te({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=D((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];C(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const Ye={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Xe(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Ye),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:a}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=i-t.left,u=s-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:a,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Ve=()=>navigator.onLine,ze=()=>!0,Ae=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function De({onlineAction:e=j,offlineAction:t=j}={}){const n=D((n=>Ae(n,e,t)));return(0,o.useSyncExternalStore)(n,Ve,ze)}function We(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const _e={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function Be(e=j){const[t,n]=(0,o.useState)(_e),r=(0,o.useRef)(null),i=D((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function Je({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const He=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:s="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+He(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+He(window.innerWidth,r.width,c)};const a=e.getBoundingClientRect();return{top:r.top-a.top+e.scrollTop+i+He(a.height,r.height,s),left:r.left-a.left+e.scrollLeft+o+He(a.width,r.width,c)}};function Ue(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:s}=Ke(r,t,n);r.scrollTo({top:s,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=C(n)?n():n,i=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?R(n):r,i=C(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[s,c]=(0,o.useState)(n),a=(0,o.useCallback)((e=>{c((t=>{const n=C(e)?e(t):e;return r&&i&&function(e,t,n){if(!v())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=C(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),l=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!v())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),c(null)}),[r,i]);return Object.assign({state:s,setState:a,clearState:l},Re(e))}function nt(e,t,n={}){const r=D(e),i=_(n),s=(0,o.useMemo)((()=>(0,c.A)(r,t,i)),[r,t,i]);return W((()=>s.cancel())),s}const rt=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=D(e),{delay:i,enabled:s}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>a()}),[c,a,i,s]),{set:c,reset:l,clear:a}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function st(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new a.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const at={width:null,height:null};function lt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?at:{width:window.innerWidth,height:window.innerHeight})),r=B(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:s,reset:c,clear:a}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||c()}),[r,i,c,...n]),{set:s,reset:c,clear:a}}}}]); \ No newline at end of file diff --git a/assets/js/a45fe377.41d28a11.js b/assets/js/a45fe377.41d28a11.js new file mode 100644 index 000000000..eeea90c73 --- /dev/null +++ b/assets/js/a45fe377.41d28a11.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[8051],{1908:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>u,assets:()=>d,contentTitle:()=>a,default:()=>x,frontMatter:()=>s,metadata:()=>r,toc:()=>l});const r=JSON.parse('{"id":"react/hooks/useCycleList","title":"useCycleList","description":"\ubc30\uc5f4\uc744 \uc694\uc18c\ub97c \uc21c\ud658\ud558\uba70 \ub2e4\uc74c(nextIndex), \uc774\uc804(prevIndex) \ub610\ub294 \ud2b9\uc815 \uc778\ub371\uc2a4\ub85c \uc774\ub3d9(setIndex) \ud560 \uc218 \uc788\ub294 \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useCycleList.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useCycleList","permalink":"/modern-kit/docs/react/hooks/useCycleList","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useCounter","permalink":"/modern-kit/docs/react/hooks/useCounter"},"next":{"title":"useDebounce","permalink":"/modern-kit/docs/react/hooks/useDebounce"}}');var o=t(6206),i=t(3267),c=t(4731);t(4382);const s={},a="useCycleList",d={},u=()=>{const e={button:"button",div:"div",...(0,i.R)()},{currentItem:n,nextIndex:t,prevIndex:r,setIndex:s}=function(e,n=0){const{currentStep:t,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=(0,c.o)({maxStep:e.length-1,initialStep:n,infinite:!0});return{currentItem:e[t],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}([(0,o.jsx)(e.div,{children:"\uccab \ubc88\uc9f8 \uc694\uc18c"}),(0,o.jsx)(e.div,{children:"\ub450 \ubc88\uc9f8 \uc694\uc18c"}),(0,o.jsx)(e.div,{children:"\uc138 \ubc88\uc9f8 \uc694\uc18c"})]);return(0,o.jsxs)(e.div,{children:[n,(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.button,{onClick:()=>t(),children:"nextIndex"}),(0,o.jsx)(e.button,{onClick:()=>r(),children:"prveIndex"}),(0,o.jsx)(e.button,{onClick:()=>s(2),children:"setIndex(2)"})]})]})},l=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function p(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"usecyclelist",children:"useCycleList"})}),"\n",(0,o.jsxs)(n.p,{children:["\ubc30\uc5f4\uc744 \uc694\uc18c\ub97c ",(0,o.jsx)(n.code,{children:"\uc21c\ud658"}),"\ud558\uba70 \ub2e4\uc74c(",(0,o.jsx)(n.code,{children:"nextIndex"}),"), \uc774\uc804(",(0,o.jsx)(n.code,{children:"prevIndex"}),") \ub610\ub294 \ud2b9\uc815 \uc778\ub371\uc2a4\ub85c \uc774\ub3d9(",(0,o.jsx)(n.code,{children:"setIndex"}),") \ud560 \uc218 \uc788\ub294 \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.p,{children:["nextIndex, prevIndex, setIndex, resetIndex \ud638\ucd9c \uc2dc ",(0,o.jsx)(n.code,{children:"action"})," \ud568\uc218\ub97c \uc778\uc790\ub85c \ub123\uc5b4 \uc6d0\ud558\ub294 action\uc744 \uc2e4\ud589 \uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useCycleList/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"type StepAction = ({ prev, next }: {\n prev: number;\n next: number;\n}) => void;\n\ninterface UseCycleListReturnType {\n currentItem: T;\n nextIndex: (action?: StepAction) => void;\n prevIndex: (action?: StepAction) => void;\n setIndex: (index: SetStateAction, action?: StepAction) => void;\n resetIndex: (action?: StepAction) => void;\n}\n"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"const useCycleList: (\n arr: T[] | readonly T[],\n initialIndex?: number\n) => UseCycleListReturnType;\n"})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useCycleList } from '@modern-kit/react';\n\nconst Example = () => {\n const { currentItem, nextIndex, prevIndex, setIndex } = useCycleList([\n
\uccab \ubc88\uc9f8 \uc694\uc18c
,\n
\ub450 \ubc88\uc9f8 \uc694\uc18c
,\n
\uc138 \ubc88\uc9f8 \uc694\uc18c
,\n ]);\n\n return (\n
\n {currentItem}\n
\n \n \n \n
\n
\n );\n};\n"})}),"\n",(0,o.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(u,{})]})}function x(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},3267:(e,n,t)=>{t.d(n,{R:()=>c,x:()=>s});var r=t(4382);const o={},i=r.createContext(o);function c(e){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),r.createElement(i.Provider,{value:n},e.children)}},4731:(e,n,t)=>{t.d(n,{o:()=>i});var r=t(4382),o=t(9340);function i({maxStep:e,initialStep:n=0,infinite:t=!1}){const[i,c]=(0,r.useState)(n),s=i0,d=(0,r.useCallback)(((n,t)=>{const r="nextStep"===n;return t?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,n,r)=>{if(n&&!t)return;const o=d(e,n);r&&r({prev:i,next:o}),c(o)}),[t,i,d]),l=(0,r.useCallback)((e=>{u("nextStep",!s,e)}),[s,u]),p=(0,r.useCallback)((e=>{u("prevStep",!a,e)}),[a,u]),x=(0,r.useCallback)(((n,t)=>{const r=(0,o.Tn)(n)?n(i):n;if(r>=0&&r<=e)return t&&t({prev:i,next:r}),void c(n);throw new Error("Step not valid")}),[i,e]),f=(0,r.useCallback)((e=>{e&&e({prev:i,next:n}),c(n)}),[i,n]);return{currentStep:i,hasNextStep:s,hasPrevStep:a,goToNextStep:l,goToPrevStep:p,setStep:x,resetStep:f}}},9340:(e,n,t)=>{function r(e,n,t,r){return new(t||(t=Promise))((function(o,i){function c(e){try{a(r.next(e))}catch(n){i(n)}}function s(e){try{a(r.throw(e))}catch(n){i(n)}}function a(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(c,s)}a((r=r.apply(e,n||[])).next())}))}t.d(n,{Et:()=>y,Fr:()=>s,Gp:()=>v,Ol:()=>k,Qd:()=>j,S$:()=>c,Tn:()=>g,Zp:()=>p,dK:()=>d,fl:()=>T,gD:()=>b,i5:()=>f,if:()=>x,l6:()=>I,lQ:()=>C,nS:()=>l,ni:()=>$,oc:()=>a}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,n)=>new Promise(((t,r)=>{e.toBlob((e=>{e?t(e):r(new Error(`Failed to create blob with format ${n}`))}),n)}));function c(){return"undefined"==typeof window}function s(){if(c())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function a(){return!c()}function d(e){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const u=e=>r(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return d(yield n.text())}));function l(e,n){var t;return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return u(e);if(!("write"in window.navigator.clipboard))return u(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return u(e);const c=yield function(e,n="png"){return new Promise(((t,c)=>{const s=new Image;s.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=s.width,e.height=s.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(s,0,0);const c=yield i(e,o[n]);t(c)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),c(r)}})),s.onerror=()=>{c(new Error("Failed to load image"))},s.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[c.type]:c})]),c}catch(c){throw console.error(`Failed to copy to clipboard. message: ${c.message}`),c}}))}function p(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function x(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function f(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const h=(e,n,t)=>{const r=Object.keys(e),o=Object.keys(n);if(r.length!==o.length)return!1;for(let i=0;i{if(e===n)return!0;if(y(e)&&y(n)&&isNaN(e)&&isNaN(n))return!0;if(g(e)&&g(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const r=[...e],o=[...n];return h(r,o,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[r,o]of e)if(!n.has(r)||!m(o,n.get(r),t))return!1;return!0}return h(e,n,t)};function v(e,n){return m(e,n,new WeakMap)}function g(e){return"function"==typeof e}function b(e){return null==e}function y(e){return"number"==typeof e}function w(e){return!function(e){return Object(e)!==e}(e)}function j(e){return w(e)&&"[object Object]"===Object.prototype.toString.call(e)}function I(e){return e===window}function C(){}function k(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function S(e){return Object.keys(e)}const E={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};S(E);function T(e,n){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function $(e,n,t){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=g(t)?t():t;r.setItem(n,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${n}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/a45fe377.4da78159.js b/assets/js/a45fe377.4da78159.js deleted file mode 100644 index 0f212b2f9..000000000 --- a/assets/js/a45fe377.4da78159.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[8051],{4070:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>a,contentTitle:()=>l,default:()=>h,frontMatter:()=>c,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"react/hooks/useCycleList","title":"useCycleList","description":"\ubc30\uc5f4\uc744 \uc694\uc18c\ub97c \uc21c\ud658\ud558\uba70 \ub2e4\uc74c(nextIndex), \uc774\uc804(prevIndex) \ub610\ub294 \ud2b9\uc815 \uc778\ub371\uc2a4\ub85c \uc774\ub3d9(setIndex) \ud560 \uc218 \uc788\ub294 \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useCycleList.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useCycleList","permalink":"/modern-kit/docs/react/hooks/useCycleList","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useCounter","permalink":"/modern-kit/docs/react/hooks/useCounter"},"next":{"title":"useDebounce","permalink":"/modern-kit/docs/react/hooks/useDebounce"}}');var o=n(6206),i=n(3267),s=n(4027);const c={},l="useCycleList",a={},u=()=>{const e={button:"button",div:"div",...(0,i.R)()},{currentItem:t,nextIndex:n,prevIndex:r,setIndex:c}=(0,s._1)([(0,o.jsx)(e.div,{children:"\uccab \ubc88\uc9f8 \uc694\uc18c"}),(0,o.jsx)(e.div,{children:"\ub450 \ubc88\uc9f8 \uc694\uc18c"}),(0,o.jsx)(e.div,{children:"\uc138 \ubc88\uc9f8 \uc694\uc18c"})]);return(0,o.jsxs)(e.div,{children:[t,(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.button,{onClick:()=>n(),children:"nextIndex"}),(0,o.jsx)(e.button,{onClick:()=>r(),children:"prveIndex"}),(0,o.jsx)(e.button,{onClick:()=>c(2),children:"setIndex(2)"})]})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usecyclelist",children:"useCycleList"})}),"\n",(0,o.jsxs)(t.p,{children:["\ubc30\uc5f4\uc744 \uc694\uc18c\ub97c ",(0,o.jsx)(t.code,{children:"\uc21c\ud658"}),"\ud558\uba70 \ub2e4\uc74c(",(0,o.jsx)(t.code,{children:"nextIndex"}),"), \uc774\uc804(",(0,o.jsx)(t.code,{children:"prevIndex"}),") \ub610\ub294 \ud2b9\uc815 \uc778\ub371\uc2a4\ub85c \uc774\ub3d9(",(0,o.jsx)(t.code,{children:"setIndex"}),") \ud560 \uc218 \uc788\ub294 \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:["nextIndex, prevIndex, setIndex, resetIndex \ud638\ucd9c \uc2dc ",(0,o.jsx)(t.code,{children:"action"})," \ud568\uc218\ub97c \uc778\uc790\ub85c \ub123\uc5b4 \uc6d0\ud558\ub294 action\uc744 \uc2e4\ud589 \uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useCycleList/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"type StepAction = ({ prev, next }: {\n prev: number;\n next: number;\n}) => void;\n\ninterface UseCycleListReturnType {\n currentItem: T;\n nextIndex: (action?: StepAction) => void;\n prevIndex: (action?: StepAction) => void;\n setIndex: (index: SetStateAction, action?: StepAction) => void;\n resetIndex: (action?: StepAction) => void;\n}\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"const useCycleList: (\n arr: T[] | readonly T[],\n initialIndex?: number\n) => UseCycleListReturnType;\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useCycleList } from '@modern-kit/react';\n\nconst Example = () => {\n const { currentItem, nextIndex, prevIndex, setIndex } = useCycleList([\n
\uccab \ubc88\uc9f8 \uc694\uc18c
,\n
\ub450 \ubc88\uc9f8 \uc694\uc18c
,\n
\uc138 \ubc88\uc9f8 \uc694\uc18c
,\n ]);\n\n return (\n
\n {currentItem}\n
\n \n \n \n
\n
\n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(u,{})]})}function h(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(f,{...e})}):f(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>$e,$I:()=>oe,AE:()=>_e,BL:()=>U,DX:()=>L,FT:()=>ct,Fo:()=>et,Hn:()=>it,I5:()=>Ee,JF:()=>Pe,K:()=>ae,K$:()=>Je,M0:()=>Oe,ML:()=>ne,Mj:()=>ye,Mk:()=>Te,Mo:()=>ie,NT:()=>Ye,QV:()=>Ke,Ub:()=>ke,Ut:()=>je,W7:()=>K,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>We,Zu:()=>le,_1:()=>Re,_g:()=>nt,aL:()=>J,aY:()=>Le,bB:()=>D,d7:()=>B,eG:()=>st,fN:()=>ce,fm:()=>G,gl:()=>$,hN:()=>V,iD:()=>de,iQ:()=>Ne,jd:()=>se,lW:()=>at,oD:()=>H,oo:()=>Ie,pL:()=>q,qi:()=>ue,rN:()=>Fe,tD:()=>Ce,u8:()=>Q,wY:()=>Be,xV:()=>N,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),i=n(3683),s=n(5086),c=n(7197),l=(n(1604),n(5938));function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function v(){return!m()}function g(e){return f(this,0,void 0,(function*(){if(!v())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const w=e=>f(void 0,0,void 0,(function*(){return g(yield(yield fetch(e)).text())}));function b(e,t){var n;return f(this,0,void 0,(function*(){if(!v())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return w(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield p(e,h[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||S(e)&&S(t)&&isNaN(e)&&isNaN(t))return!0;if(C(e)&&C(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function k(e,t){return x(e,t,new WeakMap)}function C(e){return"function"==typeof e}function S(e){return"number"==typeof e}function j(e){return!function(e){return Object(e)!==e}(e)}function E(){}function I(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const R=(...e)=>t=>e.forEach((e=>{if(C(e))e(t);else if(null!=e){e.current=t}}));function O(...e){return(0,o.useCallback)(R(...e),e)}const L=o.forwardRef(((e,t)=>{const{children:n}=e,i=a(e,["children"]),s=o.Children.toArray(n),c=s.find(T);if(c){const e=c.props.children,n=s.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(F,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(F,Object.assign({},i,{ref:t,children:n}))}));L.displayName="Slot";const F=o.forwardRef(((e,t)=>{const{children:n}=e,r=a(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?R(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));F.displayName="SlotClone";const N=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function T(e){return o.isValidElement(e)&&e.type===N}var M="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const $=d(((e,t)=>{var{ratio:n,style:o,as:s="div",asChild:c=!1}=e,l=a(e,["ratio","style","as","asChild"]);const u=c?L:s,d=Object.assign({aspectRatio:n},o),f=c?l.className:i(M,l.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},l))})),P=()=>E,A=()=>!1,Y=()=>!0;function D({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(P,A,Y)?e:t}function X(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const V=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>X()?(0,r.jsx)(r.Fragment,{children:t}):e;function _(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function W(e){const t=_(e);(0,o.useEffect)((()=>()=>t()),[t])}function z(e,t=k){const[n,r]=(0,o.useState)(e),i=_(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function B(e,t,n){const r=_(e),i=z(n),c=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return W((()=>c.cancel())),c}const J=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),s=B(((...e)=>{const n=i?.props;if(n&&C(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:s})};function U({onIntersectStart:e=E,onIntersectEnd:t=E,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:s=0,rootMargin:c="0px 0px 0px 0px"}){const l=(0,o.useRef)(0),a=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=_((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(a.current=!0,l.current+=1,e(n)):a.current&&(a.current=!1,l.current+=1,t(n)),r&&l.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:s,root:i,rootMargin:c}),u.current.observe(e))}),[n,s,i,c,d])}}const H=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:s}=e,c=a(e,["src","threshold","root","rootMargin"]);const{ref:l}=U({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:O(t,l)},c))}));H.displayName="LazyImage";const K=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=a(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,v=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),g=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},l)),[m,u,l]),w=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),b=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:b,style:v,children:[m&&s,(0,r.jsx)(H,Object.assign({ref:t,width:n,height:i,style:g,onLoad:w},f))]})}));K.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:s="after",rootMargin:c="150px 0px"})=>{const{ref:l}=U({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:l}),t,"after"===s&&(0,r.jsx)("div",{ref:l})]})},q=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1}=e,c=a(e,["children","as","asChild"]);const l=s?L:i,{ref:u}=U(c);if(s&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(l,Object.assign({ref:R(t,u)},c,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return j(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=v()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=_(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1,onPointerDown:c,excludeRefs:l=[]}=e,u=a(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:l}),f=s?L:i;if(s&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:R(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:s=1,includeLastSeparator:c=!1})=>{const l=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%s==0),[c,s,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),l(t)&&n]})})},se=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function le(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function ae(e=!0){const t=C(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield g(e);return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield b(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!v())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),l=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!v())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:s,readText:c,readContents:l}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],ve=me("localStorage"),ge=e=>window.localStorage.getItem(e),we=e=>JSON.stringify(e),be=e=>(ve.subscribe(e),()=>{ve.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=C(n)?n():n,i=(0,o.useSyncExternalStore)(be,(()=>ge(t)),(()=>we(r)));return{state:(0,o.useMemo)((()=>i?I(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=ge(t),o=n?I(n):r,i=C(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),ve.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ve.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>v()?window.matchMedia(e).matches:t??!1;function ke(e,t){const[n,r]=(0,o.useState)(xe(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function Ce(){return ke("(prefers-color-scheme: dark)")?"dark":"light"}const Se="color-scheme";function je({defaultValue:e,key:t=Se,shouldSetBodyClass:n=!1}={}){const r=Ce(),i=C(e)?e():e,{state:s,setState:c}=ye({key:t,initialValue:i??r}),l=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),a=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(s),()=>{n&&document.body.classList.remove(s)})),[s,n]),{colorScheme:s,preferredColorScheme:r,setToggleMode:l,setDarkMode:a,setLightMode:u,setPreferredMode:d}}function Ee(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:s}}function Ie({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),s=r0,l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),a=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const s=l(e,t);o&&o({prev:r,next:s}),i(s)}),[n,r,l]),u=(0,o.useCallback)((e=>{a("nextStep",!s,e)}),[s,a]),d=(0,o.useCallback)((e=>{a("prevStep",!c,e)}),[c,a]),f=(0,o.useCallback)(((t,n)=>{const o=C(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:s,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Re(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=Ie({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}function Oe(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,B(i,t,n)]}function Le(e,t={}){const[n,r]=(0,o.useState)(""),[i,s]=Oe("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),s(t)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Fe(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onFocus:e=E,onBlur:t=E}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=_((t=>{r(!0),e(t)})),c=_((e=>{r(!1),t(e)})),l=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",s),ne(i,"blur",c),{ref:i,isFocus:n,setFocus:l}}function Te({onEnter:e=E,onLeave:t=E}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=_((t=>{r(!0),e(t)})),c=_((e=>{r(!1),t(e)}));return ne(i,"mouseenter",s),ne(i,"mouseleave",c),{ref:i,isHovered:n}}const Me=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function $e(e,t){const n=(0,o.useRef)(),r=_(e),{delay:i,enabled:s}=Me(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>l()}),[l,c,s,i]),{set:c,reset:a,clear:l}}function Pe({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=_((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];C(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const Ae={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Ye(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Ae),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l}=t;let a=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();a=i-t.left,u=s-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l,elementRelativeX:a,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const De=()=>navigator.onLine,Xe=()=>!0,Ve=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function _e({onlineAction:e=E,offlineAction:t=E}={}){const n=_((n=>Ve(n,e,t)));return(0,o.useSyncExternalStore)(n,De,Xe)}function We(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const ze={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function Be(e=E){const[t,n]=(0,o.useState)(ze),r=(0,o.useRef)(null),i=_((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function Je({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const Ue=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:s="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+Ue(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+Ue(window.innerWidth,r.width,c)};const l=e.getBoundingClientRect();return{top:r.top-l.top+e.scrollTop+i+Ue(l.height,r.height,s),left:r.left-l.left+e.scrollLeft+o+Ue(l.width,r.width,c)}};function Ke(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:s}=He(r,t,n);r.scrollTo({top:s,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=C(n)?n():n,i=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>i?I(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?I(n):r,i=C(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[s,c]=(0,o.useState)(n),l=(0,o.useCallback)((e=>{c((t=>{const n=C(e)?e(t):e;return r&&i&&function(e,t,n){if(!v())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=C(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),a=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!v())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),c(null)}),[r,i]);return Object.assign({state:s,setState:l,clearState:a},Ie(e))}function nt(e,t,n={}){const r=_(e),i=z(n),s=(0,o.useMemo)((()=>(0,c.A)(r,t,i)),[r,t,i]);return W((()=>s.cancel())),s}const rt=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=_(e),{delay:i,enabled:s}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>l()}),[c,l,i,s]),{set:c,reset:a,clear:l}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function st(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new l.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const lt={width:null,height:null};function at({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?lt:{width:window.innerWidth,height:window.innerHeight})),r=B(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:s,reset:c,clear:l}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||c()}),[r,i,c,...n]),{set:s,reset:c,clear:l}}}}]); \ No newline at end of file diff --git a/assets/js/aa089504.030a7252.js b/assets/js/aa089504.030a7252.js deleted file mode 100644 index f9f9080ce..000000000 --- a/assets/js/aa089504.030a7252.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[7867],{8483:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>a,default:()=>m,frontMatter:()=>l,metadata:()=>r,toc:()=>f});const r=JSON.parse('{"id":"react/hooks/usePreferredColorScheme","title":"usePreferredColorScheme","description":"\uc0ac\uc6a9\uc790\uc758 \uc0c9\uc0c1 \uc2a4\ud0b4 \uc120\ud638\ub3c4(prefers-coloc-scheme) \uc5d0 \ub530\ub77c dark, light\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4.","source":"@site/docs/react/hooks/usePreferredColorScheme.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/usePreferredColorScheme","permalink":"/modern-kit/docs/react/hooks/usePreferredColorScheme","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useOutsidePointerDown","permalink":"/modern-kit/docs/react/hooks/useOutsidePointerDown"},"next":{"title":"usePreservedCallback","permalink":"/modern-kit/docs/react/hooks/usePreservedCallback"}}');var o=n(6206),i=n(3267),s=n(4027),c=n(9010);const l={},a="usePreferredColorScheme",u={},d=()=>{const e={b:"b",div:"div",p:"p",...(0,i.R)()},t=(0,s.tD)();return(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.p,{children:"OS \uc2dc\uc2a4\ud15c \uc124\uc815\uc5d0\uc11c \ud14c\ub9c8\ub97c \ubcc0\uacbd\ud574\ubcf4\uc138\uc694."}),(0,o.jsxs)(e.p,{children:["ColorScheme: ",(0,o.jsx)(e.b,{children:t})]})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2},{value:"Image",id:"image",level:2},{value:"1. Light Theme",id:"1-light-theme",level:3},{value:"2. Dark Theme",id:"2-dark-theme",level:3},{value:"Note",id:"note",level:2}];function h(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usepreferredcolorscheme",children:"usePreferredColorScheme"})}),"\n",(0,o.jsxs)(t.p,{children:["\uc0ac\uc6a9\uc790\uc758 \uc0c9\uc0c1 \uc2a4\ud0b4 \uc120\ud638\ub3c4(",(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme",children:"prefers-coloc-scheme"})}),") \uc5d0 \ub530\ub77c ",(0,o.jsx)(t.code,{children:"dark"}),", ",(0,o.jsx)(t.code,{children:"light"}),"\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:["ligth: \uc0ac\uc6a9\uc790\uac00 \uc2dc\uc2a4\ud15c\uc5d0 ",(0,o.jsx)(t.code,{children:"ligth"})," \ud14c\ub9c8\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc744 \uc120\ud638\ud558\uac70\ub098 \uc120\ud638\ud558\ub294 \ud14c\ub9c8\ub97c \uc54c\ub9ac\uc9c0 \uc54a\uc558\uc744 \ub54c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.li,{children:["dark: \uc0ac\uc6a9\uc790\uac00 \uc2dc\uc2a4\ud15c\uc5d0 ",(0,o.jsx)(t.code,{children:"dark"})," \ud14c\ub9c8\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc744 \uc120\ud638\ud55c\ub2e4\uace0 \uc54c\ub838\uc744 \ub54c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsxs)(t.p,{children:["\uc0ac\uc6a9\uc790\ub294 ",(0,o.jsx)(t.code,{children:"\uc6b4\uc601\uccb4\uc81c \uc124\uc815"}),"\uc774\ub098 ",(0,o.jsx)(t.code,{children:"\uc0ac\uc6a9\uc790 \uc5d0\uc774\uc804\ud2b8 \uc124\uc815"}),"\uc5d0\uc11c \uc120\ud638\ud558\ub294 \ud14c\ub9c8\ub97c \uc9c0\uc815 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/usePreferredColorScheme/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:'const usePreferredColorScheme: () => "dark" | "light"\n'})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { usePreferredColorScheme } from '@modern-kit/react';\n\nconst Example = () => {\n const colorScheme = usePreferredColorScheme();\n\n return (\n
\n

OS \uc2dc\uc2a4\ud15c \uc124\uc815\uc5d0\uc11c \ud14c\ub9c8\ub97c \ubcc0\uacbd\ud574\ubcf4\uc138\uc694.

\n

ColorScheme: {colorScheme}

\n
\n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(c.A,{children:()=>(0,o.jsx)(d,{})}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"image",children:"Image"}),"\n",(0,o.jsx)(t.h3,{id:"1-light-theme",children:"1. Light Theme"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.img,{src:"https://github.com/modern-agile-team/modern-kit/assets/64779472/79c6298b-72f1-4f50-b644-93762d4d59e1",alt:"\u1109\u1173\u110f\u1173\u1105\u1175\u11ab\u1109\u1163\u11ba 2024-07-10 \u110b\u1169\u1112\u116e 8 09 33"})}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h3,{id:"2-dark-theme",children:"2. Dark Theme"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.img,{src:"https://github.com/modern-agile-team/modern-kit/assets/64779472/ab735906-9f8c-4e8e-9688-f6cde1786ec9",alt:"\u1109\u1173\u110f\u1173\u1105\u1175\u11ab\u1109\u1163\u11ba 2024-07-10 \u110b\u1169\u1112\u116e 8 09 39"})}),"\n",(0,o.jsx)(t.h2,{id:"note",children:"Note"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme",children:"Prefers Color Scheme - MDN"})}),"\n"]})]})}function m(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},9010:(e,t,n)=>{n.d(t,{A:()=>i});n(4382);var r=n(3555),o=n(6206);function i(e){let{children:t,fallback:n}=e;return(0,r.A)()?(0,o.jsx)(o.Fragment,{children:t?.()}):n??null}},4027:(e,t,n)=>{n.d(t,{$$:()=>$e,$I:()=>oe,AE:()=>We,BL:()=>U,DX:()=>I,FT:()=>ct,Fo:()=>et,Hn:()=>it,I5:()=>Ee,JF:()=>Te,K:()=>ae,K$:()=>Je,M0:()=>Pe,ML:()=>ne,Mj:()=>ye,Mk:()=>Le,Mo:()=>ie,NT:()=>Ye,QV:()=>Ke,Ub:()=>ke,Ut:()=>je,W7:()=>K,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>ze,Zu:()=>le,_1:()=>Re,_g:()=>nt,aL:()=>J,aY:()=>Ie,bB:()=>A,d7:()=>B,eG:()=>st,fN:()=>ce,fm:()=>G,gl:()=>$,hN:()=>V,iD:()=>de,iQ:()=>Fe,jd:()=>se,lW:()=>at,oD:()=>H,oo:()=>Oe,pL:()=>q,qi:()=>ue,rN:()=>Ne,tD:()=>Se,u8:()=>Q,wY:()=>Be,xV:()=>F,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),i=n(3683),s=n(5086),c=n(7197),l=(n(1604),n(5938));function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function p(){return typeof window>"u"}function g(){return!p()}function w(e){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const b=e=>f(void 0,0,void 0,(function*(){return w(yield(yield fetch(e)).text())}));function v(e,t){var n;return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return b(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield m(e,h[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||C(e)&&C(t)&&isNaN(e)&&isNaN(t))return!0;if(S(e)&&S(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function k(e,t){return x(e,t,new WeakMap)}function S(e){return"function"==typeof e}function C(e){return"number"==typeof e}function j(e){return!function(e){return Object(e)!==e}(e)}function E(){}function O(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const R=(...e)=>t=>e.forEach((e=>{if(S(e))e(t);else if(null!=e){e.current=t}}));function P(...e){return(0,o.useCallback)(R(...e),e)}const I=o.forwardRef(((e,t)=>{const{children:n}=e,i=a(e,["children"]),s=o.Children.toArray(n),c=s.find(L);if(c){const e=c.props.children,n=s.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(N,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(N,Object.assign({},i,{ref:t,children:n}))}));I.displayName="Slot";const N=o.forwardRef(((e,t)=>{const{children:n}=e,r=a(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?R(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));N.displayName="SlotClone";const F=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function L(e){return o.isValidElement(e)&&e.type===F}var M="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const $=d(((e,t)=>{var{ratio:n,style:o,as:s="div",asChild:c=!1}=e,l=a(e,["ratio","style","as","asChild"]);const u=c?I:s,d=Object.assign({aspectRatio:n},o),f=c?l.className:i(M,l.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},l))})),T=()=>E,D=()=>!1,Y=()=>!0;function A({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(T,D,Y)?e:t}function X(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const V=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>X()?(0,r.jsx)(r.Fragment,{children:t}):e;function W(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function z(e){const t=W(e);(0,o.useEffect)((()=>()=>t()),[t])}function _(e,t=k){const[n,r]=(0,o.useState)(e),i=W(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function B(e,t,n){const r=W(e),i=_(n),c=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return z((()=>c.cancel())),c}const J=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),s=B(((...e)=>{const n=i?.props;if(n&&S(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:s})};function U({onIntersectStart:e=E,onIntersectEnd:t=E,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:s=0,rootMargin:c="0px 0px 0px 0px"}){const l=(0,o.useRef)(0),a=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=W((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(a.current=!0,l.current+=1,e(n)):a.current&&(a.current=!1,l.current+=1,t(n)),r&&l.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:s,root:i,rootMargin:c}),u.current.observe(e))}),[n,s,i,c,d])}}const H=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:s}=e,c=a(e,["src","threshold","root","rootMargin"]);const{ref:l}=U({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:P(t,l)},c))}));H.displayName="LazyImage";const K=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=a(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,m]=(0,o.useState)(!1),p=!h,g=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),w=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),b=(0,o.useCallback)((e=>{d&&d(e),m(!0)}),[d]),v=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:g,children:[p&&s,(0,r.jsx)(H,Object.assign({ref:t,width:n,height:i,style:w,onLoad:b},f))]})}));K.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:s="after",rootMargin:c="150px 0px"})=>{const{ref:l}=U({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:l}),t,"after"===s&&(0,r.jsx)("div",{ref:l})]})},q=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1}=e,c=a(e,["children","as","asChild"]);const l=s?I:i,{ref:u}=U(c);if(s&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(l,Object.assign({ref:R(t,u)},c,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return j(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=g()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=W(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(p())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1,onPointerDown:c,excludeRefs:l=[]}=e,u=a(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:l}),f=s?I:i;if(s&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:R(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:s=1,includeLastSeparator:c=!1})=>{const l=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%s==0),[c,s,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),l(t)&&n]})})},se=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function le(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function ae(e=!0){const t=S(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield w(e);return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),l=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:s,readText:c,readContents:l}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",me={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},pe=e=>me[e],ge=pe("localStorage"),we=e=>window.localStorage.getItem(e),be=e=>JSON.stringify(e),ve=e=>(ge.subscribe(e),()=>{ge.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(ve,(()=>we(t)),(()=>be(r)));return{state:(0,o.useMemo)((()=>i?O(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=we(t),o=n?O(n):r,i=S(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),ge.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ge.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>g()?window.matchMedia(e).matches:t??!1;function ke(e,t){const[n,r]=(0,o.useState)(xe(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function Se(){return ke("(prefers-color-scheme: dark)")?"dark":"light"}const Ce="color-scheme";function je({defaultValue:e,key:t=Ce,shouldSetBodyClass:n=!1}={}){const r=Se(),i=S(e)?e():e,{state:s,setState:c}=ye({key:t,initialValue:i??r}),l=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),a=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(s),()=>{n&&document.body.classList.remove(s)})),[s,n]),{colorScheme:s,preferredColorScheme:r,setToggleMode:l,setDarkMode:a,setLightMode:u,setPreferredMode:d}}function Ee(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:s}}function Oe({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),s=r0,l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),a=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const s=l(e,t);o&&o({prev:r,next:s}),i(s)}),[n,r,l]),u=(0,o.useCallback)((e=>{a("nextStep",!s,e)}),[s,a]),d=(0,o.useCallback)((e=>{a("prevStep",!c,e)}),[c,a]),f=(0,o.useCallback)(((t,n)=>{const o=S(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:s,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Re(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=Oe({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}function Pe(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,B(i,t,n)]}function Ie(e,t={}){const[n,r]=(0,o.useState)(""),[i,s]=Pe("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),s(t)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Ne(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Fe({onFocus:e=E,onBlur:t=E}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=W((t=>{r(!0),e(t)})),c=W((e=>{r(!1),t(e)})),l=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",s),ne(i,"blur",c),{ref:i,isFocus:n,setFocus:l}}function Le({onEnter:e=E,onLeave:t=E}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=W((t=>{r(!0),e(t)})),c=W((e=>{r(!1),t(e)}));return ne(i,"mouseenter",s),ne(i,"mouseleave",c),{ref:i,isHovered:n}}const Me=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function $e(e,t){const n=(0,o.useRef)(),r=W(e),{delay:i,enabled:s}=Me(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>l()}),[l,c,s,i]),{set:c,reset:a,clear:l}}function Te({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=W((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];S(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const De={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Ye(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(De),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l}=t;let a=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();a=i-t.left,u=s-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l,elementRelativeX:a,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Ae=()=>navigator.onLine,Xe=()=>!0,Ve=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function We({onlineAction:e=E,offlineAction:t=E}={}){const n=W((n=>Ve(n,e,t)));return(0,o.useSyncExternalStore)(n,Ae,Xe)}function ze(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const _e={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function Be(e=E){const[t,n]=(0,o.useState)(_e),r=(0,o.useRef)(null),i=W((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function Je({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const Ue=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:s="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+Ue(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+Ue(window.innerWidth,r.width,c)};const l=e.getBoundingClientRect();return{top:r.top-l.top+e.scrollTop+i+Ue(l.height,r.height,s),left:r.left-l.left+e.scrollLeft+o+Ue(l.width,r.width,c)}};function Ke(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:s}=He(r,t,n);r.scrollTo({top:s,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=pe("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>i?O(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?O(n):r,i=S(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[s,c]=(0,o.useState)(n),l=(0,o.useCallback)((e=>{c((t=>{const n=S(e)?e(t):e;return r&&i&&function(e,t,n){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=S(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),a=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),c(null)}),[r,i]);return Object.assign({state:s,setState:l,clearState:a},Oe(e))}function nt(e,t,n={}){const r=W(e),i=_(n),s=(0,o.useMemo)((()=>(0,c.A)(r,t,i)),[r,t,i]);return z((()=>s.cancel())),s}const rt=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=W(e),{delay:i,enabled:s}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>l()}),[c,l,i,s]),{set:c,reset:a,clear:l}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function st(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new l.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const lt={width:null,height:null};function at({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>p()?lt:{width:window.innerWidth,height:window.innerHeight})),r=B(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:s,reset:c,clear:l}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||c()}),[r,i,c,...n]),{set:s,reset:c,clear:l}}}}]); \ No newline at end of file diff --git a/assets/js/aa089504.c58fc7eb.js b/assets/js/aa089504.c58fc7eb.js new file mode 100644 index 000000000..2a115bd2f --- /dev/null +++ b/assets/js/aa089504.c58fc7eb.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[7867],{8483:(e,r,n)=>{n.r(r),n.d(r,{Example:()=>u,assets:()=>l,contentTitle:()=>d,default:()=>m,frontMatter:()=>a,metadata:()=>t,toc:()=>h});const t=JSON.parse('{"id":"react/hooks/usePreferredColorScheme","title":"usePreferredColorScheme","description":"\uc0ac\uc6a9\uc790\uc758 \uc0c9\uc0c1 \uc2a4\ud0b4 \uc120\ud638\ub3c4(prefers-coloc-scheme) \uc5d0 \ub530\ub77c dark, light\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4.","source":"@site/docs/react/hooks/usePreferredColorScheme.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/usePreferredColorScheme","permalink":"/modern-kit/docs/react/hooks/usePreferredColorScheme","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useOutsidePointerDown","permalink":"/modern-kit/docs/react/hooks/useOutsidePointerDown"},"next":{"title":"usePreservedCallback","permalink":"/modern-kit/docs/react/hooks/usePreservedCallback"}}');var o=n(6206),i=n(3267),c=n(3411),s=n(9010);const a={},d="usePreferredColorScheme",l={},u=()=>{const e={b:"b",div:"div",p:"p",...(0,i.R)()},r=(0,c.t)();return(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.p,{children:"OS \uc2dc\uc2a4\ud15c \uc124\uc815\uc5d0\uc11c \ud14c\ub9c8\ub97c \ubcc0\uacbd\ud574\ubcf4\uc138\uc694."}),(0,o.jsxs)(e.p,{children:["ColorScheme: ",(0,o.jsx)(e.b,{children:r})]})]})},h=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2},{value:"Image",id:"image",level:2},{value:"1. Light Theme",id:"1-light-theme",level:3},{value:"2. Dark Theme",id:"2-dark-theme",level:3},{value:"Note",id:"note",level:2}];function f(e){const r={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(r.header,{children:(0,o.jsx)(r.h1,{id:"usepreferredcolorscheme",children:"usePreferredColorScheme"})}),"\n",(0,o.jsxs)(r.p,{children:["\uc0ac\uc6a9\uc790\uc758 \uc0c9\uc0c1 \uc2a4\ud0b4 \uc120\ud638\ub3c4(",(0,o.jsx)(r.strong,{children:(0,o.jsx)(r.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme",children:"prefers-coloc-scheme"})}),") \uc5d0 \ub530\ub77c ",(0,o.jsx)(r.code,{children:"dark"}),", ",(0,o.jsx)(r.code,{children:"light"}),"\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsxs)(r.li,{children:["ligth: \uc0ac\uc6a9\uc790\uac00 \uc2dc\uc2a4\ud15c\uc5d0 ",(0,o.jsx)(r.code,{children:"ligth"})," \ud14c\ub9c8\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc744 \uc120\ud638\ud558\uac70\ub098 \uc120\ud638\ud558\ub294 \ud14c\ub9c8\ub97c \uc54c\ub9ac\uc9c0 \uc54a\uc558\uc744 \ub54c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(r.li,{children:["dark: \uc0ac\uc6a9\uc790\uac00 \uc2dc\uc2a4\ud15c\uc5d0 ",(0,o.jsx)(r.code,{children:"dark"})," \ud14c\ub9c8\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc744 \uc120\ud638\ud55c\ub2e4\uace0 \uc54c\ub838\uc744 \ub54c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsxs)(r.p,{children:["\uc0ac\uc6a9\uc790\ub294 ",(0,o.jsx)(r.code,{children:"\uc6b4\uc601\uccb4\uc81c \uc124\uc815"}),"\uc774\ub098 ",(0,o.jsx)(r.code,{children:"\uc0ac\uc6a9\uc790 \uc5d0\uc774\uc804\ud2b8 \uc124\uc815"}),"\uc5d0\uc11c \uc120\ud638\ud558\ub294 \ud14c\ub9c8\ub97c \uc9c0\uc815 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(r.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(r.p,{children:(0,o.jsx)(r.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/usePreferredColorScheme/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(r.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-ts",metastring:'title="typescript"',children:'const usePreferredColorScheme: () => "dark" | "light"\n'})}),"\n",(0,o.jsx)(r.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { usePreferredColorScheme } from '@modern-kit/react';\n\nconst Example = () => {\n const colorScheme = usePreferredColorScheme();\n\n return (\n
\n

OS \uc2dc\uc2a4\ud15c \uc124\uc815\uc5d0\uc11c \ud14c\ub9c8\ub97c \ubcc0\uacbd\ud574\ubcf4\uc138\uc694.

\n

ColorScheme: {colorScheme}

\n
\n );\n};\n"})}),"\n",(0,o.jsx)(r.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(s.A,{children:()=>(0,o.jsx)(u,{})}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(r.h2,{id:"image",children:"Image"}),"\n",(0,o.jsx)(r.h3,{id:"1-light-theme",children:"1. Light Theme"}),"\n",(0,o.jsx)(r.p,{children:(0,o.jsx)(r.img,{src:"https://github.com/modern-agile-team/modern-kit/assets/64779472/79c6298b-72f1-4f50-b644-93762d4d59e1",alt:"\u1109\u1173\u110f\u1173\u1105\u1175\u11ab\u1109\u1163\u11ba 2024-07-10 \u110b\u1169\u1112\u116e 8 09 33"})}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(r.h3,{id:"2-dark-theme",children:"2. Dark Theme"}),"\n",(0,o.jsx)(r.p,{children:(0,o.jsx)(r.img,{src:"https://github.com/modern-agile-team/modern-kit/assets/64779472/ab735906-9f8c-4e8e-9688-f6cde1786ec9",alt:"\u1109\u1173\u110f\u1173\u1105\u1175\u11ab\u1109\u1163\u11ba 2024-07-10 \u110b\u1169\u1112\u116e 8 09 39"})}),"\n",(0,o.jsx)(r.h2,{id:"note",children:"Note"}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsx)(r.li,{children:(0,o.jsx)(r.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme",children:"Prefers Color Scheme - MDN"})}),"\n"]})]})}function m(e={}){const{wrapper:r}={...(0,i.R)(),...e.components};return r?(0,o.jsx)(r,{...e,children:(0,o.jsx)(f,{...e})}):f(e)}},9010:(e,r,n)=>{n.d(r,{A:()=>i});n(4382);var t=n(3555),o=n(6206);function i(e){let{children:r,fallback:n}=e;return(0,t.A)()?(0,o.jsx)(o.Fragment,{children:r?.()}):n??null}},3267:(e,r,n)=>{n.d(r,{R:()=>c,x:()=>s});var t=n(4382);const o={},i=t.createContext(o);function c(e){const r=t.useContext(i);return t.useMemo((function(){return"function"==typeof e?e(r):{...r,...e}}),[r,e])}function s(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),t.createElement(i.Provider,{value:r},e.children)}},1351:(e,r,n)=>{n.d(r,{M:()=>s});var t=n(6765),o=n(5907),i=n(9340);n(4382);const c=e=>!!e&&(0,i.i5)(e,"current");function s(e,r,n,i){const s=(0,t.p)(n);(0,o.E)((()=>{const n=c(e)?e.current:e;if(n)return n.addEventListener(r,s,i),()=>{n.removeEventListener(r,s,i)}}),[r,e,i,s])}},5907:(e,r,n)=>{n.d(r,{E:()=>i});var t=n(9340),o=n(4382);const i=(0,t.oc)()?o.useLayoutEffect:o.useEffect},9659:(e,r,n)=>{n.d(r,{U:()=>s});var t=n(9340),o=n(1351),i=n(4382);const c=(e,r)=>(0,t.oc)()?window.matchMedia(e).matches:null!=r&&r;function s(e,r){const[n,t]=(0,i.useState)(c(e,r)),s=(0,i.useCallback)((e=>t(e.matches)),[]);return(0,o.M)(window.matchMedia(e),"change",s),n}},3411:(e,r,n)=>{n.d(r,{t:()=>o});var t=n(9659);n(4382);function o(){return(0,t.U)("(prefers-color-scheme: dark)")?"dark":"light"}},6765:(e,r,n)=>{n.d(r,{p:()=>o});var t=n(4382);function o(e){const r=(0,t.useRef)(e);return r.current=e,(0,t.useCallback)(((...e)=>r.current(...e)),[])}},9340:(e,r,n)=>{function t(e,r,n,t){return new(n||(n=Promise))((function(o,i){function c(e){try{a(t.next(e))}catch(r){i(r)}}function s(e){try{a(t.throw(e))}catch(r){i(r)}}function a(e){var r;e.done?o(e.value):(r=e.value,r instanceof n?r:new n((function(e){e(r)}))).then(c,s)}a((t=t.apply(e,r||[])).next())}))}n.d(r,{Et:()=>b,Fr:()=>s,Gp:()=>x,Ol:()=>S,Qd:()=>y,S$:()=>c,Tn:()=>v,Zp:()=>h,dK:()=>d,fl:()=>O,gD:()=>w,i5:()=>m,if:()=>f,l6:()=>k,lQ:()=>C,nS:()=>u,ni:()=>F,oc:()=>a}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,r)=>new Promise(((n,t)=>{e.toBlob((e=>{e?n(e):t(new Error(`Failed to create blob with format ${r}`))}),r)}));function c(){return"undefined"==typeof window}function s(){if(c())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function a(){return!c()}function d(e){return t(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const r=document.createElement("textarea");r.value=e,r.style.opacity="0",document.body.appendChild(r),r.focus(),r.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(r)}}(e)}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const l=e=>t(void 0,void 0,void 0,(function*(){const r=yield fetch(e);return d(yield r.text())}));function u(e,r){var n;return t(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return l(e);if(!("write"in window.navigator.clipboard))return l(e);if(null!==(n=null==r?void 0:r.toText)&&void 0!==n&&n)return l(e);const c=yield function(e,r="png"){return new Promise(((n,c)=>{const s=new Image;s.onload=()=>t(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=s.width,e.height=s.height;try{const t=e.getContext("2d");if(!t)throw new Error("Failed to get 2d context");t.drawImage(s,0,0);const c=yield i(e,o[r]);n(c)}catch(t){console.error(`Failed to load image. message: ${t.mesaage}`),c(t)}})),s.onerror=()=>{c(new Error("Failed to load image"))},s.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[c.type]:c})]),c}catch(c){throw console.error(`Failed to copy to clipboard. message: ${c.message}`),c}}))}function h(){return t(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function f(){return t(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function m(e,r){return Object.prototype.hasOwnProperty.call(e,r)}const p=(e,r,n)=>{const t=Object.keys(e),o=Object.keys(r);if(t.length!==o.length)return!1;for(let i=0;i{if(e===r)return!0;if(b(e)&&b(r)&&isNaN(e)&&isNaN(r))return!0;if(v(e)&&v(r))return e.toString()===r.toString();if("object"!=typeof e||"object"!=typeof r||null===e||null===r)return!1;if(n.has(e)&&n.get(e)===r)return!0;if(n.set(e,r),e.constructor!==r.constructor)return!1;if(e instanceof Set){if(e.size!==r.size)return!1;const t=[...e],o=[...r];return p(t,o,n)}if(e instanceof Map){if(e.size!==r.size)return!1;for(const[t,o]of e)if(!r.has(t)||!g(o,r.get(t),n))return!1;return!0}return p(e,r,n)};function x(e,r){return g(e,r,new WeakMap)}function v(e){return"function"==typeof e}function w(e){return null==e}function b(e){return"number"==typeof e}function j(e){return!function(e){return Object(e)!==e}(e)}function y(e){return j(e)&&"[object Object]"===Object.prototype.toString.call(e)}function k(e){return e===window}function C(){}function S(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(r){throw new Error(`Failed to parse data: ${r}`)}}function E(e){return Object.keys(e)}const P={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};E(P);function O(e,r){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(r)}catch(n){throw new Error(`Failed to remove key "${r}" from ${e}: ${n}`)}}function F(e,r,n){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{const t=window[e],o=v(n)?n():n;t.setItem(r,JSON.stringify(o))}catch(t){throw new Error(`Failed to store data for key "${r}" in ${e}: ${t}`)}}}}]); \ No newline at end of file diff --git a/assets/js/ab7af1d3.d2f1107c.js b/assets/js/ab7af1d3.d2f1107c.js deleted file mode 100644 index 3c6d303aa..000000000 --- a/assets/js/ab7af1d3.d2f1107c.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[7930],{8748:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>c,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"react/hooks/useToggleState","title":"useToggleState","description":"\ub450 \uac1c\uc758 \uac12\uc744 \ud1a0\uae00\ud558\ub294 \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useToggleState.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useToggleState","permalink":"/modern-kit/docs/react/hooks/useToggleState","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useToggle","permalink":"/modern-kit/docs/react/hooks/useToggle"},"next":{"title":"useUnMount","permalink":"/modern-kit/docs/react/hooks/useUnmount"}}');var o=n(6206),i=n(3267),s=n(4027);const c={},a="useToggleState",l={},u=()=>{const e={button:"button",div:"div",...(0,i.R)()},[t,n]=(0,s.Hn)("ON","OFF");return(0,o.jsxs)(e.div,{children:[t,(0,o.jsx)(e.button,{onClick:n,children:"Toggle Button"})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usetogglestate",children:"useToggleState"})}),"\n",(0,o.jsx)(t.p,{children:"\ub450 \uac1c\uc758 \uac12\uc744 \ud1a0\uae00\ud558\ub294 \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \ud6c5\uc785\ub2c8\ub2e4."}),"\n",(0,o.jsx)(t.p,{children:"\uae30\ubcf8\uac12\uc73c\ub85c \uc81c\uacf5\ub41c \ub450 \uac1c\uc758 \uac12\uc744 \uad00\ub9ac\ud558\uba70, \uc120\ud0dd\ub41c \uac12\uacfc \ub450 \uac12\uc744 \ud1a0\uae00\ud560 \uc218 \uc788\ub294 \ud568\uc218\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4."}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useToggleState/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useToggleState(value1: T, value2: T): [T, () => void]\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useToggleState } from '@modern-kit/react';\n\nconst Example = () => {\n const [value, toggle] = useToggleState('ON', 'OFF');\n\n return (\n
\n {value}\n \n
\n );\n}\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(u,{})]})}function h(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(f,{...e})}):f(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>$e,$I:()=>oe,AE:()=>De,BL:()=>J,DX:()=>F,FT:()=>ct,Fo:()=>et,Hn:()=>it,I5:()=>je,JF:()=>Pe,K:()=>le,K$:()=>He,M0:()=>Te,ML:()=>ne,Mj:()=>ye,Mk:()=>Le,Mo:()=>ie,NT:()=>Xe,QV:()=>Ke,Ub:()=>ke,Ut:()=>Ee,W7:()=>K,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>We,Zu:()=>ae,_1:()=>Re,_g:()=>nt,aL:()=>H,aY:()=>Fe,bB:()=>V,d7:()=>z,eG:()=>st,fN:()=>ce,fm:()=>G,gl:()=>$,hN:()=>B,iD:()=>de,iQ:()=>Ne,jd:()=>se,lW:()=>lt,oD:()=>U,oo:()=>Oe,pL:()=>q,qi:()=>ue,rN:()=>Ie,tD:()=>Se,u8:()=>Q,wY:()=>ze,xV:()=>N,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),i=n(3683),s=n(5086),c=n(7197),a=(n(1604),n(5938));function l(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function g(){return typeof window>"u"}function m(){return!g()}function w(e){return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const b=e=>f(void 0,0,void 0,(function*(){return w(yield(yield fetch(e)).text())}));function v(e,t){var n;return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return b(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield p(e,h[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||C(e)&&C(t)&&isNaN(e)&&isNaN(t))return!0;if(S(e)&&S(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function k(e,t){return x(e,t,new WeakMap)}function S(e){return"function"==typeof e}function C(e){return"number"==typeof e}function E(e){return!function(e){return Object(e)!==e}(e)}function j(){}function O(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const R=(...e)=>t=>e.forEach((e=>{if(S(e))e(t);else if(null!=e){e.current=t}}));function T(...e){return(0,o.useCallback)(R(...e),e)}const F=o.forwardRef(((e,t)=>{const{children:n}=e,i=l(e,["children"]),s=o.Children.toArray(n),c=s.find(L);if(c){const e=c.props.children,n=s.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(I,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(I,Object.assign({},i,{ref:t,children:n}))}));F.displayName="Slot";const I=o.forwardRef(((e,t)=>{const{children:n}=e,r=l(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?R(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));I.displayName="SlotClone";const N=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function L(e){return o.isValidElement(e)&&e.type===N}var M="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const $=d(((e,t)=>{var{ratio:n,style:o,as:s="div",asChild:c=!1}=e,a=l(e,["ratio","style","as","asChild"]);const u=c?F:s,d=Object.assign({aspectRatio:n},o),f=c?a.className:i(M,a.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},a))})),P=()=>j,Y=()=>!1,X=()=>!0;function V({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(P,Y,X)?e:t}function A(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const B=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>A()?(0,r.jsx)(r.Fragment,{children:t}):e;function D(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function W(e){const t=D(e);(0,o.useEffect)((()=>()=>t()),[t])}function _(e,t=k){const[n,r]=(0,o.useState)(e),i=D(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function z(e,t,n){const r=D(e),i=_(n),c=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return W((()=>c.cancel())),c}const H=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),s=z(((...e)=>{const n=i?.props;if(n&&S(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:s})};function J({onIntersectStart:e=j,onIntersectEnd:t=j,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:s=0,rootMargin:c="0px 0px 0px 0px"}){const a=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=D((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(l.current=!0,a.current+=1,e(n)):l.current&&(l.current=!1,a.current+=1,t(n)),r&&a.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:s,root:i,rootMargin:c}),u.current.observe(e))}),[n,s,i,c,d])}}const U=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:s}=e,c=l(e,["src","threshold","root","rootMargin"]);const{ref:a}=J({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:T(t,a)},c))}));U.displayName="LazyImage";const K=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:s,className:c,style:a,duration:u="0.2s",onLoad:d}=e,f=l(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),g=!h,m=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),w=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:g?0:1,transition:`opacity ${u}`},a)),[g,u,a]),b=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),v=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:m,children:[g&&s,(0,r.jsx)(U,Object.assign({ref:t,width:n,height:i,style:w,onLoad:b},f))]})}));K.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:s="after",rootMargin:c="150px 0px"})=>{const{ref:a}=J({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:a}),t,"after"===s&&(0,r.jsx)("div",{ref:a})]})},q=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1}=e,c=l(e,["children","as","asChild"]);const a=s?F:i,{ref:u}=J(c);if(s&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(a,Object.assign({ref:R(t,u)},c,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return E(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=m()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=D(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(g())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1,onPointerDown:c,excludeRefs:a=[]}=e,u=l(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:a}),f=s?F:i;if(s&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:R(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:s=1,includeLastSeparator:c=!1})=>{const a=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%s==0),[c,s,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),a(t)&&n]})})},se=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function ae(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function le(e=!0){const t=S(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield w(e);return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),a=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:s,readText:c,readContents:a}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},ge=e=>pe[e],me=ge("localStorage"),we=e=>window.localStorage.getItem(e),be=e=>JSON.stringify(e),ve=e=>(me.subscribe(e),()=>{me.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(ve,(()=>we(t)),(()=>be(r)));return{state:(0,o.useMemo)((()=>i?O(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=we(t),o=n?O(n):r,i=S(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),me.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),me.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>m()?window.matchMedia(e).matches:t??!1;function ke(e,t){const[n,r]=(0,o.useState)(xe(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function Se(){return ke("(prefers-color-scheme: dark)")?"dark":"light"}const Ce="color-scheme";function Ee({defaultValue:e,key:t=Ce,shouldSetBodyClass:n=!1}={}){const r=Se(),i=S(e)?e():e,{state:s,setState:c}=ye({key:t,initialValue:i??r}),a=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),l=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(s),()=>{n&&document.body.classList.remove(s)})),[s,n]),{colorScheme:s,preferredColorScheme:r,setToggleMode:a,setDarkMode:l,setLightMode:u,setPreferredMode:d}}function je(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:s}}function Oe({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),s=r0,a=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),l=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const s=a(e,t);o&&o({prev:r,next:s}),i(s)}),[n,r,a]),u=(0,o.useCallback)((e=>{l("nextStep",!s,e)}),[s,l]),d=(0,o.useCallback)((e=>{l("prevStep",!c,e)}),[c,l]),f=(0,o.useCallback)(((t,n)=>{const o=S(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:s,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Re(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=Oe({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}function Te(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,z(i,t,n)]}function Fe(e,t={}){const[n,r]=(0,o.useState)(""),[i,s]=Te("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),s(t)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Ie(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onFocus:e=j,onBlur:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=D((t=>{r(!0),e(t)})),c=D((e=>{r(!1),t(e)})),a=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",s),ne(i,"blur",c),{ref:i,isFocus:n,setFocus:a}}function Le({onEnter:e=j,onLeave:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=D((t=>{r(!0),e(t)})),c=D((e=>{r(!1),t(e)}));return ne(i,"mouseenter",s),ne(i,"mouseleave",c),{ref:i,isHovered:n}}const Me=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function $e(e,t){const n=(0,o.useRef)(),r=D(e),{delay:i,enabled:s}=Me(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>a()}),[a,c,s,i]),{set:c,reset:l,clear:a}}function Pe({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=D((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];S(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const Ye={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Xe(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Ye),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:a}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=i-t.left,u=s-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:a,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Ve=()=>navigator.onLine,Ae=()=>!0,Be=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function De({onlineAction:e=j,offlineAction:t=j}={}){const n=D((n=>Be(n,e,t)));return(0,o.useSyncExternalStore)(n,Ve,Ae)}function We(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const _e={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function ze(e=j){const[t,n]=(0,o.useState)(_e),r=(0,o.useRef)(null),i=D((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function He({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ue=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:s="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+Je(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+Je(window.innerWidth,r.width,c)};const a=e.getBoundingClientRect();return{top:r.top-a.top+e.scrollTop+i+Je(a.height,r.height,s),left:r.left-a.left+e.scrollLeft+o+Je(a.width,r.width,c)}};function Ke(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:s}=Ue(r,t,n);r.scrollTo({top:s,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=ge("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>i?O(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?O(n):r,i=S(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[s,c]=(0,o.useState)(n),a=(0,o.useCallback)((e=>{c((t=>{const n=S(e)?e(t):e;return r&&i&&function(e,t,n){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=S(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),l=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),c(null)}),[r,i]);return Object.assign({state:s,setState:a,clearState:l},Oe(e))}function nt(e,t,n={}){const r=D(e),i=_(n),s=(0,o.useMemo)((()=>(0,c.A)(r,t,i)),[r,t,i]);return W((()=>s.cancel())),s}const rt=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=D(e),{delay:i,enabled:s}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>a()}),[c,a,i,s]),{set:c,reset:l,clear:a}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function st(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new a.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const at={width:null,height:null};function lt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>g()?at:{width:window.innerWidth,height:window.innerHeight})),r=z(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:s,reset:c,clear:a}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||c()}),[r,i,c,...n]),{set:s,reset:c,clear:a}}}}]); \ No newline at end of file diff --git a/assets/js/ab7af1d3.e6628944.js b/assets/js/ab7af1d3.e6628944.js new file mode 100644 index 000000000..1a35b4c12 --- /dev/null +++ b/assets/js/ab7af1d3.e6628944.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[7930],{961:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>i,contentTitle:()=>l,default:()=>h,frontMatter:()=>c,metadata:()=>o,toc:()=>u});const o=JSON.parse('{"id":"react/hooks/useToggleState","title":"useToggleState","description":"\ub450 \uac1c\uc758 \uac12\uc744 \ud1a0\uae00\ud558\ub294 \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useToggleState.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useToggleState","permalink":"/modern-kit/docs/react/hooks/useToggleState","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useToggle","permalink":"/modern-kit/docs/react/hooks/useToggle"},"next":{"title":"useUnMount","permalink":"/modern-kit/docs/react/hooks/useUnmount"}}');var s=n(6206),r=n(3267),a=n(4382);const c={},l="useToggleState",i={},d=()=>{const e={button:"button",div:"div",...(0,r.R)()},[t,n]=function(e,t){const[n,o]=(0,a.useState)(e);return[n,(0,a.useCallback)((()=>{o((n=>n===e?t:e))}),[e,t])]}("ON","OFF");return(0,s.jsxs)(e.div,{children:[t,(0,s.jsx)(e.button,{onClick:n,children:"Toggle Button"})]})},u=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function g(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"usetogglestate",children:"useToggleState"})}),"\n",(0,s.jsx)(t.p,{children:"\ub450 \uac1c\uc758 \uac12\uc744 \ud1a0\uae00\ud558\ub294 \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \ud6c5\uc785\ub2c8\ub2e4."}),"\n",(0,s.jsx)(t.p,{children:"\uae30\ubcf8\uac12\uc73c\ub85c \uc81c\uacf5\ub41c \ub450 \uac1c\uc758 \uac12\uc744 \uad00\ub9ac\ud558\uba70, \uc120\ud0dd\ub41c \uac12\uacfc \ub450 \uac12\uc744 \ud1a0\uae00\ud560 \uc218 \uc788\ub294 \ud568\uc218\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4."}),"\n",(0,s.jsx)("br",{}),"\n",(0,s.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useToggleState/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,s.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useToggleState(value1: T, value2: T): [T, () => void]\n"})}),"\n",(0,s.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useToggleState } from '@modern-kit/react';\n\nconst Example = () => {\n const [value, toggle] = useToggleState('ON', 'OFF');\n\n return (\n
\n {value}\n \n
\n );\n}\n"})}),"\n",(0,s.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,s.jsx)(d,{})]})}function h(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(g,{...e})}):g(e)}},3267:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>c});var o=n(4382);const s={},r=o.createContext(s);function a(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/ad8813a3.4fede0e4.js b/assets/js/ad8813a3.4fede0e4.js deleted file mode 100644 index cb857fb9e..000000000 --- a/assets/js/ad8813a3.4fede0e4.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[632],{8807:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>c,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"react/hooks/useUserAgent","title":"useUserAgent","description":"ua-parser-js \ub97c \ud65c\uc6a9\ud574\uc11c window.navigator.userAgent \uc815\ubcf4\ub97c \ubd84\uc11d\ud558\uace0 \ud30c\uc2f1\ud55c \ub370\uc774\ud130\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useUserAgent.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useUserAgent","permalink":"/modern-kit/docs/react/hooks/useUserAgent","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useUnMount","permalink":"/modern-kit/docs/react/hooks/useUnmount"},"next":{"title":"useVhProperty","permalink":"/modern-kit/docs/react/hooks/useVhProperty"}}');var o=n(6206),s=n(3267),i=n(4027);const c={},a="useUserAgent",l={},u=()=>{const e={div:"div",h3:"h3",p:"p",...(0,s.R)()},t=(0,i.eG)();return(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.h3,{children:"UserAgent String"}),(0,o.jsx)(e.p,{children:`${t?.ua}`})]}),(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.h3,{children:"Browser"}),(0,o.jsxs)(e.p,{children:["name: ",`${t?.browser.name}`]}),(0,o.jsxs)(e.p,{children:["version: ",`${t?.browser.version}`]}),(0,o.jsxs)(e.p,{children:["major: ",`${t?.browser.major}`]})]}),(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.h3,{children:"Engine"}),(0,o.jsxs)(e.p,{children:["name: ",`${t?.engine.name}`]}),(0,o.jsxs)(e.p,{children:["version: ",`${t?.engine.version}`]})]}),(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.h3,{children:"OS"}),(0,o.jsxs)(e.p,{children:["name: ",`${t?.os.name}`]}),(0,o.jsxs)(e.p,{children:["version: ",`${t?.os.version}`]})]}),(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.h3,{children:"Device"}),(0,o.jsxs)(e.p,{children:["vendor: ",`${t?.device.vendor}`]}),(0,o.jsxs)(e.p,{children:["model: ",`${t?.device.model}`]}),(0,o.jsxs)(e.p,{children:["type: ",`${t?.device.type}`]})]}),(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.h3,{children:"CPU"}),(0,o.jsxs)(e.p,{children:["architecture: ",`${t?.cpu.architecture}`]})]})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",strong:"strong",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"useuseragent",children:"useUserAgent"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.a,{href:"https://github.com/faisalman/ua-parser-js",children:"ua-parser-js"})})," \ub97c \ud65c\uc6a9\ud574\uc11c ",(0,o.jsx)(t.code,{children:"window.navigator.userAgent"})," \uc815\ubcf4\ub97c \ubd84\uc11d\ud558\uace0 \ud30c\uc2f1\ud55c \ub370\uc774\ud130\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useUserAgent/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"const useUserAgent: () => UAParser.IResult | null\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useUserAgent } from '@modern-kit/react';\n\nconst Example = () => {\n const userAgent = useUserAgent();\n\n return (\n
\n
\n

UserAgent String

\n

ua: {`${userAgent?.ua}`}

\n
\n
\n

Browser

\n

name: {`${userAgent?.browser.name}`}

\n

version: {`${userAgent?.browser.version}`}

\n

major: {`${userAgent?.browser.major}`}

\n
\n
\n

Engine

\n

name: {`${userAgent?.engine.name}`}

\n

version: {`${userAgent?.engine.version}`}

\n
\n
\n

OS

\n

name: {`${userAgent?.os.name}`}

\n

version: {`${userAgent?.os.version}`}

\n
\n
\n

Device

\n

vendor: {`${userAgent?.device.vendor}`}

\n

model: {`${userAgent?.device.model}`}

\n

type: {`${userAgent?.device.type}`}

\n
\n
\n

CPU

\n

architecture: {`${userAgent?.cpu.architecture}`}

\n
\n
\n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"})]})}function h(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(f,{...e})}):f(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>Le,$I:()=>oe,AE:()=>Xe,BL:()=>J,DX:()=>A,FT:()=>ct,Fo:()=>et,Hn:()=>st,I5:()=>Ee,JF:()=>Me,K:()=>le,K$:()=>ze,M0:()=>Re,ML:()=>ne,Mj:()=>ye,Mk:()=>Ne,Mo:()=>se,NT:()=>Ue,QV:()=>Ke,Ub:()=>je,Ut:()=>Ce,W7:()=>K,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>Be,Zu:()=>ae,_1:()=>Oe,_g:()=>nt,aL:()=>z,aY:()=>Ae,bB:()=>Y,d7:()=>_,eG:()=>it,fN:()=>ce,fm:()=>q,gl:()=>L,hN:()=>D,iD:()=>de,iQ:()=>Fe,jd:()=>ie,lW:()=>lt,oD:()=>H,oo:()=>$e,pL:()=>Q,qi:()=>ue,rN:()=>Ie,tD:()=>ke,u8:()=>G,wY:()=>_e,xV:()=>F,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),s=n(3683),i=n(5086),c=n(7197),a=(n(1604),n(5938));function l(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function g(){return typeof window>"u"}function m(){return!g()}function v(e){return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const w=e=>f(void 0,0,void 0,(function*(){return v(yield(yield fetch(e)).text())}));function b(e,t){var n;return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return w(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const s=yield p(e,h[t]);n(s)}catch(s){console.error(`Failed to load image. message: ${s.mesaage}`),r(s)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let s=0;s{if(e===t||S(e)&&S(t)&&isNaN(e)&&isNaN(t))return!0;if(k(e)&&k(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function j(e,t){return x(e,t,new WeakMap)}function k(e){return"function"==typeof e}function S(e){return"number"==typeof e}function C(e){return!function(e){return Object(e)!==e}(e)}function E(){}function $(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const O=(...e)=>t=>e.forEach((e=>{if(k(e))e(t);else if(null!=e){e.current=t}}));function R(...e){return(0,o.useCallback)(O(...e),e)}const A=o.forwardRef(((e,t)=>{const{children:n}=e,s=l(e,["children"]),i=o.Children.toArray(n),c=i.find(N);if(c){const e=c.props.children,n=i.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(I,Object.assign({},s,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(I,Object.assign({},s,{ref:t,children:n}))}));A.displayName="Slot";const I=o.forwardRef(((e,t)=>{const{children:n}=e,r=l(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],s=t[r];/^on[A-Z]/.test(r)?o&&s?n[r]=(...e)=>{s(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),s):"className"===r&&(n[r]=[o,s].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?O(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));I.displayName="SlotClone";const F=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function N(e){return o.isValidElement(e)&&e.type===F}var P="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const L=d(((e,t)=>{var{ratio:n,style:o,as:i="div",asChild:c=!1}=e,a=l(e,["ratio","style","as","asChild"]);const u=c?A:i,d=Object.assign({aspectRatio:n},o),f=c?a.className:s(P,a.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},a))})),M=()=>E,T=()=>!1,U=()=>!0;function Y({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(M,T,U)?e:t}function V(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const D=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>V()?(0,r.jsx)(r.Fragment,{children:t}):e;function X(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function B(e){const t=X(e);(0,o.useEffect)((()=>()=>t()),[t])}function W(e,t=j){const[n,r]=(0,o.useState)(e),s=X(t);return(0,o.useEffect)((()=>{s(n,e)||r(e)}),[s,n,e]),n}function _(e,t,n){const r=X(e),s=W(n),c=(0,o.useMemo)((()=>(0,i.A)(r,t,s)),[r,t,s]);return B((()=>c.cancel())),c}const z=({children:e,capture:t,wait:n,options:r})=>{const s=o.Children.only(e),i=_(((...e)=>{const n=s?.props;if(n&&k(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(s,{[t]:i})};function J({onIntersectStart:e=E,onIntersectEnd:t=E,enabled:n=!0,calledOnce:r=!1,root:s=null,threshold:i=0,rootMargin:c="0px 0px 0px 0px"}){const a=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=X((([n],o)=>{if(!n)return;const s=n.target;n.isIntersecting?(l.current=!0,a.current+=1,e(n)):l.current&&(l.current=!1,a.current+=1,t(n)),r&&a.current>1&&o.unobserve(s)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:i,root:s,rootMargin:c}),u.current.observe(e))}),[n,i,s,c,d])}}const H=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:s,rootMargin:i}=e,c=l(e,["src","threshold","root","rootMargin"]);const{ref:a}=J({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:s,rootMargin:i});return(0,r.jsx)("img",Object.assign({ref:R(t,a)},c))}));H.displayName="LazyImage";const K=(0,o.forwardRef)(((e,t)=>{var{width:n,height:s,fallback:i,className:c,style:a,duration:u="0.2s",onLoad:d}=e,f=l(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),g=!h,m=(0,o.useMemo)((()=>({position:"relative",width:n,height:s})),[n,s]),v=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:g?0:1,transition:`opacity ${u}`},a)),[g,u,a]),w=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),b=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:b,style:m,children:[g&&i,(0,r.jsx)(H,Object.assign({ref:t,width:n,height:s,style:v,onLoad:w},f))]})}));K.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const s=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:s?t:n})},G=({onScrollAction:e,children:t,root:n,threshold:o,enabled:s,triggerPosition:i="after",rootMargin:c="150px 0px"})=>{const{ref:a}=J({onIntersectStart:e,root:n,threshold:o,enabled:s,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===i&&(0,r.jsx)("div",{ref:a}),t,"after"===i&&(0,r.jsx)("div",{ref:a})]})},Q=d(((e,t)=>{var{children:n,as:s="div",asChild:i=!1}=e,c=l(e,["children","as","asChild"]);const a=i?A:s,{ref:u}=J(c);if(i&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(a,Object.assign({ref:O(t,u)},c,{children:n}))})),q=({items:e=[],itemKey:t,renderItem:n})=>{const s=(0,o.useCallback)(((e,n)=>function(e){return C(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},s(e,t))))})},ee=m()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=X(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),s=(0,o.useMemo)((()=>function(){if(g())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,s,(({target:t})=>{if(!r.current)return;const o=r.current,s=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!s&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:s="div",asChild:i=!1,onPointerDown:c,excludeRefs:a=[]}=e,u=l(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:a}),f=i?A:s;if(i&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:O(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const se=({itemKey:e,items:t=[],separator:n,renderItem:s,separatorInterval:i=1,includeLastSeparator:c=!1})=>{const a=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%i==0),[c,i,t.length]);return(0,r.jsx)(q,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[s(e,t),a(t)&&n]})})},ie=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function ae(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function le(e=!0){const t=k(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!s.current){s.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{s.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),s=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield v(e);return t(n),!0}catch{return t(null),!1}}))),[]),i=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield b(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),a=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:s,copyImage:i,readText:c,readContents:a}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},ge=e=>pe[e],me=ge("localStorage"),ve=e=>window.localStorage.getItem(e),we=e=>JSON.stringify(e),be=e=>(me.subscribe(e),()=>{me.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=k(n)?n():n,s=(0,o.useSyncExternalStore)(be,(()=>ve(t)),(()=>we(r)));return{state:(0,o.useMemo)((()=>s?$(s):r),[s,r]),setState:(0,o.useCallback)((e=>{try{const n=ve(t),o=n?$(n):r,s=k(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(s)),me.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),me.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>m()?window.matchMedia(e).matches:t??!1;function je(e,t){const[n,r]=(0,o.useState)(xe(e,t)),s=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",s),n}function ke(){return je("(prefers-color-scheme: dark)")?"dark":"light"}const Se="color-scheme";function Ce({defaultValue:e,key:t=Se,shouldSetBodyClass:n=!1}={}){const r=ke(),s=k(e)?e():e,{state:i,setState:c}=ye({key:t,initialValue:s??r}),a=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),l=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(i),()=>{n&&document.body.classList.remove(i)})),[i,n]),{colorScheme:i,preferredColorScheme:r,setToggleMode:a,setDarkMode:l,setLightMode:u,setPreferredMode:d}}function Ee(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),s=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),i=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:s,reset:i}}function $e({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,s]=(0,o.useState)(t),i=r0,a=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),l=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const i=a(e,t);o&&o({prev:r,next:i}),s(i)}),[n,r,a]),u=(0,o.useCallback)((e=>{l("nextStep",!i,e)}),[i,l]),d=(0,o.useCallback)((e=>{l("prevStep",!c,e)}),[c,l]),f=(0,o.useCallback)(((t,n)=>{const o=k(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void s(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),s(t)}),[r,t]);return{currentStep:r,hasNextStep:i,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Oe(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:s,resetStep:i}=$e({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:s,resetIndex:i}}function Re(e,t,n={}){const[r,s]=(0,o.useState)(e);return[r,_(s,t,n)]}function Ae(e,t={}){const[n,r]=(0,o.useState)(""),[s,i]=Re("",e,t);return{value:n,debouncedValue:s,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),i(t)}),[i]),onReset:(0,o.useCallback)((()=>{r(""),i("")}),[i])}}function Ie(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Fe({onFocus:e=E,onBlur:t=E}={}){const[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(null),i=X((t=>{r(!0),e(t)})),c=X((e=>{r(!1),t(e)})),a=(0,o.useCallback)((()=>{s.current&&(s.current.focus(),r(!0))}),[]);return ne(s,"focus",i),ne(s,"blur",c),{ref:s,isFocus:n,setFocus:a}}function Ne({onEnter:e=E,onLeave:t=E}={}){const[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(null),i=X((t=>{r(!0),e(t)})),c=X((e=>{r(!1),t(e)}));return ne(s,"mouseenter",i),ne(s,"mouseleave",c),{ref:s,isHovered:n}}const Pe=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function Le(e,t){const n=(0,o.useRef)(),r=X(e),{delay:s,enabled:i}=Pe(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,s)}),[r,s]),a=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(s<0)&&i)return c(),()=>a()}),[a,c,i,s]),{set:c,reset:l,clear:a}}function Me({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),s=X((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];k(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",s),()=>t.removeEventListener("keydown",s)}),[e,s]),r}const Te={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Ue(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Te),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:s,clientY:i,pageX:c,pageY:a}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=s-t.left,u=i-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:s,clientY:i,pageX:c,pageY:a,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Ye=()=>navigator.onLine,Ve=()=>!0,De=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function Xe({onlineAction:e=E,offlineAction:t=E}={}){const n=X((n=>De(n,e,t)));return(0,o.useSyncExternalStore)(n,Ye,Ve)}function Be(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const We={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function _e(e=E){const[t,n]=(0,o.useState)(We),r=(0,o.useRef)(null),s=X((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(s);return t.observe(e),()=>{t.unobserve(e)}}),[s]),{ref:r,contentRect:t}}function ze({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),s=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>s())),[e,r,s]),{ref:t,lock:r,unlock:s}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:s=0,alignY:i="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+s+Je(window.innerHeight,r.height,i),left:r.left+window.scrollX+o+Je(window.innerWidth,r.width,c)};const a=e.getBoundingClientRect();return{top:r.top-a.top+e.scrollTop+s+Je(a.height,r.height,i),left:r.left-a.left+e.scrollLeft+o+Je(a.width,r.width,c)}};function Ke(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:s,top:i}=He(r,t,n);r.scrollTo({top:i,left:s,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=ge("sessionStorage"),Ge=e=>window.sessionStorage.getItem(e),Qe=e=>JSON.stringify(e),qe=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=k(n)?n():n,s=(0,o.useSyncExternalStore)(qe,(()=>Ge(t)),(()=>Qe(r)));return{state:(0,o.useMemo)((()=>s?$(s):r),[s,r]),setState:(0,o.useCallback)((e=>{try{const n=Ge(t),o=n?$(n):r,s=k(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(s)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:s}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[i,c]=(0,o.useState)(n),a=(0,o.useCallback)((e=>{c((t=>{const n=k(e)?e(t):e;return r&&s&&function(e,t,n){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=k(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,s,n),n}))}),[r,s]),l=(0,o.useCallback)((()=>{r&&s&&function(e,t){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,s),c(null)}),[r,s]);return Object.assign({state:i,setState:a,clearState:l},$e(e))}function nt(e,t,n={}){const r=X(e),s=W(n),i=(0,o.useMemo)((()=>(0,c.A)(r,t,s)),[r,t,s]);return B((()=>i.cancel())),i}const rt=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=X(e),{delay:s,enabled:i}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,s)}),[r,s]),a=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(s<0)&&i)return c(),()=>a()}),[c,a,s,i]),{set:c,reset:l,clear:a}}function st(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function it(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new a.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const at={width:null,height:null};function lt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>g()?at:{width:window.innerWidth,height:window.innerHeight})),r=_(n,e),s=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",s),t}function ut(e,t,n){const{delay:r,enabled:s}=rt(t),{set:i,reset:c,clear:a}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!s||c()}),[r,s,c,...n]),{set:i,reset:c,clear:a}}}}]); \ No newline at end of file diff --git a/assets/js/ad8813a3.b73e934f.js b/assets/js/ad8813a3.b73e934f.js new file mode 100644 index 000000000..f5480025c --- /dev/null +++ b/assets/js/ad8813a3.b73e934f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[632],{255:(e,n,r)=>{r.r(n),r.d(n,{Example:()=>h,assets:()=>l,contentTitle:()=>u,default:()=>f,frontMatter:()=>d,metadata:()=>t,toc:()=>p});const t=JSON.parse('{"id":"react/hooks/useUserAgent","title":"useUserAgent","description":"ua-parser-js \ub97c \ud65c\uc6a9\ud574\uc11c window.navigator.userAgent \uc815\ubcf4\ub97c \ubd84\uc11d\ud558\uace0 \ud30c\uc2f1\ud55c \ub370\uc774\ud130\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useUserAgent.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useUserAgent","permalink":"/modern-kit/docs/react/hooks/useUserAgent","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useUnMount","permalink":"/modern-kit/docs/react/hooks/useUnmount"},"next":{"title":"useVhProperty","permalink":"/modern-kit/docs/react/hooks/useVhProperty"}}');var o=r(6206),i=r(3267),s=r(4382),c=r(5938),a=r(5907);const d={},u="useUserAgent",l={},h=()=>{const e={div:"div",h3:"h3",p:"p",...(0,i.R)()},n=function(){const[e,n]=(0,s.useState)(null);return(0,a.E)((()=>{const e=new c.UAParser(window.navigator.userAgent);n(e.getResult())}),[]),e}();return(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.h3,{children:"UserAgent String"}),(0,o.jsx)(e.p,{children:`${n?.ua}`})]}),(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.h3,{children:"Browser"}),(0,o.jsxs)(e.p,{children:["name: ",`${n?.browser.name}`]}),(0,o.jsxs)(e.p,{children:["version: ",`${n?.browser.version}`]}),(0,o.jsxs)(e.p,{children:["major: ",`${n?.browser.major}`]})]}),(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.h3,{children:"Engine"}),(0,o.jsxs)(e.p,{children:["name: ",`${n?.engine.name}`]}),(0,o.jsxs)(e.p,{children:["version: ",`${n?.engine.version}`]})]}),(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.h3,{children:"OS"}),(0,o.jsxs)(e.p,{children:["name: ",`${n?.os.name}`]}),(0,o.jsxs)(e.p,{children:["version: ",`${n?.os.version}`]})]}),(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.h3,{children:"Device"}),(0,o.jsxs)(e.p,{children:["vendor: ",`${n?.device.vendor}`]}),(0,o.jsxs)(e.p,{children:["model: ",`${n?.device.model}`]}),(0,o.jsxs)(e.p,{children:["type: ",`${n?.device.type}`]})]}),(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.h3,{children:"CPU"}),(0,o.jsxs)(e.p,{children:["architecture: ",`${n?.cpu.architecture}`]})]})]})},p=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function g(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"useuseragent",children:"useUserAgent"})}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.a,{href:"https://github.com/faisalman/ua-parser-js",children:"ua-parser-js"})})," \ub97c \ud65c\uc6a9\ud574\uc11c ",(0,o.jsx)(n.code,{children:"window.navigator.userAgent"})," \uc815\ubcf4\ub97c \ubd84\uc11d\ud558\uace0 \ud30c\uc2f1\ud55c \ub370\uc774\ud130\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useUserAgent/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"const useUserAgent: () => UAParser.IResult | null\n"})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useUserAgent } from '@modern-kit/react';\n\nconst Example = () => {\n const userAgent = useUserAgent();\n\n return (\n
\n
\n

UserAgent String

\n

ua: {`${userAgent?.ua}`}

\n
\n
\n

Browser

\n

name: {`${userAgent?.browser.name}`}

\n

version: {`${userAgent?.browser.version}`}

\n

major: {`${userAgent?.browser.major}`}

\n
\n
\n

Engine

\n

name: {`${userAgent?.engine.name}`}

\n

version: {`${userAgent?.engine.version}`}

\n
\n
\n

OS

\n

name: {`${userAgent?.os.name}`}

\n

version: {`${userAgent?.os.version}`}

\n
\n
\n

Device

\n

vendor: {`${userAgent?.device.vendor}`}

\n

model: {`${userAgent?.device.model}`}

\n

type: {`${userAgent?.device.type}`}

\n
\n
\n

CPU

\n

architecture: {`${userAgent?.cpu.architecture}`}

\n
\n
\n );\n};\n"})}),"\n",(0,o.jsx)(n.h2,{id:"example",children:"Example"})]})}function f(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(g,{...e})}):g(e)}},5907:(e,n,r)=>{r.d(n,{E:()=>i});var t=r(9340),o=r(4382);const i=(0,t.oc)()?o.useLayoutEffect:o.useEffect},9340:(e,n,r)=>{function t(e,n,r,t){return new(r||(r=Promise))((function(o,i){function s(e){try{a(t.next(e))}catch(n){i(n)}}function c(e){try{a(t.throw(e))}catch(n){i(n)}}function a(e){var n;e.done?o(e.value):(n=e.value,n instanceof r?n:new r((function(e){e(n)}))).then(s,c)}a((t=t.apply(e,n||[])).next())}))}r.d(n,{Et:()=>j,Fr:()=>c,Gp:()=>v,Ol:()=>k,Qd:()=>b,S$:()=>s,Tn:()=>w,Zp:()=>h,dK:()=>d,fl:()=>S,gD:()=>x,i5:()=>g,if:()=>p,l6:()=>$,lQ:()=>A,nS:()=>l,ni:()=>C,oc:()=>a}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,n)=>new Promise(((r,t)=>{e.toBlob((e=>{e?r(e):t(new Error(`Failed to create blob with format ${n}`))}),n)}));function s(){return"undefined"==typeof window}function c(){if(s())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function a(){return!s()}function d(e){return t(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const u=e=>t(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return d(yield n.text())}));function l(e,n){var r;return t(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return u(e);if(!("write"in window.navigator.clipboard))return u(e);if(null!==(r=null==n?void 0:n.toText)&&void 0!==r&&r)return u(e);const s=yield function(e,n="png"){return new Promise(((r,s)=>{const c=new Image;c.onload=()=>t(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=c.width,e.height=c.height;try{const t=e.getContext("2d");if(!t)throw new Error("Failed to get 2d context");t.drawImage(c,0,0);const s=yield i(e,o[n]);r(s)}catch(t){console.error(`Failed to load image. message: ${t.mesaage}`),s(t)}})),c.onerror=()=>{s(new Error("Failed to load image"))},c.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[s.type]:s})]),s}catch(s){throw console.error(`Failed to copy to clipboard. message: ${s.message}`),s}}))}function h(){return t(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(){return t(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function g(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const f=(e,n,r)=>{const t=Object.keys(e),o=Object.keys(n);if(t.length!==o.length)return!1;for(let i=0;i{if(e===n)return!0;if(j(e)&&j(n)&&isNaN(e)&&isNaN(n))return!0;if(w(e)&&w(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(r.has(e)&&r.get(e)===n)return!0;if(r.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const t=[...e],o=[...n];return f(t,o,r)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[t,o]of e)if(!n.has(t)||!m(o,n.get(t),r))return!1;return!0}return f(e,n,r)};function v(e,n){return m(e,n,new WeakMap)}function w(e){return"function"==typeof e}function x(e){return null==e}function j(e){return"number"==typeof e}function y(e){return!function(e){return Object(e)!==e}(e)}function b(e){return y(e)&&"[object Object]"===Object.prototype.toString.call(e)}function $(e){return e===window}function A(){}function k(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function E(e){return Object.keys(e)}const U={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};E(U);function S(e,n){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(r){throw new Error(`Failed to remove key "${n}" from ${e}: ${r}`)}}function C(e,n,r){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{const t=window[e],o=w(r)?r():r;t.setItem(n,JSON.stringify(o))}catch(t){throw new Error(`Failed to store data for key "${n}" in ${e}: ${t}`)}}}}]); \ No newline at end of file diff --git a/assets/js/af3233c2.b6ff46a8.js b/assets/js/af3233c2.b6ff46a8.js deleted file mode 100644 index 069f6ec84..000000000 --- a/assets/js/af3233c2.b6ff46a8.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[1376],{3614:(e,t,n)=>{n.r(t),n.d(t,{Button:()=>u,SlottableButton:()=>d,assets:()=>a,contentTitle:()=>c,default:()=>p,frontMatter:()=>l,metadata:()=>r,toc:()=>h});const r=JSON.parse('{"id":"react/components/Slot","title":"Slot","description":"\uc8fc\uc5b4\uc9c4 Props\ub97c \uc9c1\uacc4 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ubcd1\ud569\ud558\uace0, \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","source":"@site/docs/react/components/Slot.mdx","sourceDirName":"react/components","slug":"/react/components/Slot","permalink":"/modern-kit/docs/react/components/Slot","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"SeparatedIterator","permalink":"/modern-kit/docs/react/components/SeparatedIterator"},"next":{"title":"SwitchCase","permalink":"/modern-kit/docs/react/components/SwithCase"}}');var o=n(6206),i=n(3267),s=n(4027);const l={},c="Slot",a={},u=({asChild:e,...t})=>{const n=e?s.DX:"button";return(0,o.jsx)(n,{...t})},d=({asChild:e,leftElement:t,rightElement:n,...r})=>{const i=e?s.DX:"button";return(0,o.jsxs)(i,{...r,children:[t,(0,o.jsx)(s.xV,{children:r.children}),n]})},h=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Default",id:"default",level:3},{value:"With Slottable",id:"with-slottable",level:3},{value:"Example",id:"example",level:2},{value:"Default",id:"default-1",level:3},{value:"AsChild",id:"aschild",level:3},{value:"Slottable",id:"slottable",level:3}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"slot",children:"Slot"})}),"\n",(0,o.jsx)(t.p,{children:"\uc8fc\uc5b4\uc9c4 Props\ub97c \uc9c1\uacc4 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ubcd1\ud569\ud558\uace0, \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."}),"\n",(0,o.jsxs)(t.p,{children:["Slot\uc740 \ubd80\ubaa8 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uae30\ub2a5\uc744 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uc640 \ud569\uc131\ud558\ub294 ",(0,o.jsx)(t.code,{children:"\ud569\uc131(Composition)"})," \ud328\ud134\uc744 \uad6c\ud604\ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574:"]}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:["\ubd80\ubaa8 \ucef4\ud3ec\ub10c\ud2b8\uc758 ",(0,o.jsx)(t.code,{children:"props"}),", ",(0,o.jsx)(t.code,{children:"ref"}),", ",(0,o.jsx)(t.code,{children:"\uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec"})," \ub4f1\uc744 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc804\ub2ec\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4"]}),"\n",(0,o.jsx)(t.li,{children:"\uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uc758 \uad6c\ud604\uc744 \ubcc0\uacbd\ud558\uc9c0 \uc54a\uace0\ub3c4 \uc0c8\ub85c\uc6b4 \uae30\ub2a5\uc744 \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4"}),"\n",(0,o.jsx)(t.li,{children:"\ucef4\ud3ec\ub10c\ud2b8 \uac04\uc758 \uacb0\ud569\ub3c4\ub97c \ub0ae\ucd94\uace0 \uc7ac\uc0ac\uc6a9\uc131\uc744 \ub192\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4"}),"\n"]}),"\n",(0,o.jsxs)(t.p,{children:["\uc608\ub97c \ub4e4\uc5b4 ",(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/InView",children:"InView"})})," \ub098 ",(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/AspectRatio",children:"AspectRatio"})})," \uc640 \uac19\uc740 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c ",(0,o.jsx)(t.code,{children:"asChild"})," prop\uc744 \uc0ac\uc6a9\ud574\uc11c, \ub798\ud37c \uc694\uc18c \uc5c6\uc774 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc9c1\uc811 \uae30\ub2a5\uc744 \uc8fc\uc785\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)(t.p,{children:"Slot\uc740 \uc544\ub798\uc640 \uac19\uc740 \ud2b9\uc9d5\uc774 \uc788\uc2b5\ub2c8\ub2e4."}),"\n",(0,o.jsxs)(t.ol,{children:["\n",(0,o.jsxs)(t.li,{children:["\uc790\uc2dd \uc694\uc18c\ub85c ",(0,o.jsx)(t.code,{children:"\ub2e8\uc77c \uc694\uc18c"}),"\ub9cc \ud5c8\uc6a9\ub429\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"// \uac00\ub2a5\n\n
Contents
\n\n\n// \uac00\ub2a5\n\n
\n
Contents1
\n
Contents2
\n
\n\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"// \ubd88\uac00\ub2a5\n\n
Contents1
\n
Contents2
\n\n"})}),"\n",(0,o.jsxs)(t.ol,{start:"2",children:["\n",(0,o.jsxs)(t.li,{children:["\uc790\uc2dd \uc694\uc18c\ub85c \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc628\ub2e4\uba74 \ud574\ub2f9 \ucef4\ud3ec\ub10c\ud2b8\ub294 \ud544\uc218\uc801\uc73c\ub85c ",(0,o.jsx)(t.code,{children:"forwardRef"}),", ",(0,o.jsx)(t.code,{children:"props"}),"\ub97c \ud5c8\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4. \ud5c8\uc6a9\ud558\uc9c0 \uc54a\uc73c\uba74 \uae30\ub2a5\uc774 \uc815\uc0c1\uc801\uc73c\ub85c \ub3d9\uc791\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.a,{href:"https://www.radix-ui.com/primitives/docs/guides/composition#your-component-must-spread-props",children:"radix-ui#your-component-must-spread-props"})})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.a,{href:"https://www.radix-ui.com/primitives/docs/guides/composition#your-component-must-forward-ref",children:"radix-ui#your-component-must-forward-ref"})})}),"\n"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"const MyButton = React.forwardRef((props, forwardedRef) => (\n \n"})}),"\n",(0,o.jsx)(u,{onClick:()=>console.log("click"),children:"Button"}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h3,{id:"aschild",children:"AsChild"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"// AsChild Usage\n\n"})}),"\n",(0,o.jsx)(u,{asChild:!0,onClick:()=>console.log("click"),children:(0,o.jsx)("div",{children:"asChild Button"})}),"\n",(0,o.jsx)(t.h3,{id:"slottable",children:"Slottable"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"left} rightElement={right}>\n Slottable Button \n\n"})}),"\n",(0,o.jsx)(d,{leftElement:(0,o.jsx)(t.span,{children:"left"}),rightElement:(0,o.jsx)(t.span,{children:"right"}),children:(0,o.jsx)("span",{children:" Slottable Button "})})]})}function p(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(f,{...e})}):f(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>Be,$I:()=>oe,AE:()=>Ve,BL:()=>J,DX:()=>I,FT:()=>lt,Fo:()=>et,Hn:()=>it,I5:()=>Ee,JF:()=>$e,K:()=>ae,K$:()=>He,M0:()=>Ne,ML:()=>ne,Mj:()=>xe,Mk:()=>Le,Mo:()=>ie,NT:()=>Ae,QV:()=>Ke,Ub:()=>je,Ut:()=>ke,W7:()=>K,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>We,Zu:()=>ce,_1:()=>Oe,_g:()=>nt,aL:()=>H,aY:()=>Ie,bB:()=>D,d7:()=>z,eG:()=>st,fN:()=>le,fm:()=>G,gl:()=>B,hN:()=>Y,iD:()=>de,iQ:()=>Fe,jd:()=>se,lW:()=>at,oD:()=>U,oo:()=>Re,pL:()=>q,qi:()=>ue,rN:()=>Me,tD:()=>Se,u8:()=>Q,wY:()=>ze,xV:()=>F,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),i=n(3683),s=n(5086),l=n(7197),c=(n(1604),n(5938));function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function g(){return!m()}function w(e){return h(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const b=e=>h(void 0,0,void 0,(function*(){return w(yield(yield fetch(e)).text())}));function v(e,t){var n;return h(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return b(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>h(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield p(e,f[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const x=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||C(e)&&C(t)&&isNaN(e)&&isNaN(t))return!0;if(S(e)&&S(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return x(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!y(o,t.get(r),n))return!1;return!0}return x(e,t,n)};function j(e,t){return y(e,t,new WeakMap)}function S(e){return"function"==typeof e}function C(e){return"number"==typeof e}function k(e){return!function(e){return Object(e)!==e}(e)}function E(){}function R(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const O=(...e)=>t=>e.forEach((e=>{if(S(e))e(t);else if(null!=e){e.current=t}}));function N(...e){return(0,o.useCallback)(O(...e),e)}const I=o.forwardRef(((e,t)=>{const{children:n}=e,i=a(e,["children"]),s=o.Children.toArray(n),l=s.find(L);if(l){const e=l.props.children,n=s.map((t=>t===l?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(M,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(M,Object.assign({},i,{ref:t,children:n}))}));I.displayName="Slot";const M=o.forwardRef(((e,t)=>{const{children:n}=e,r=a(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?O(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));M.displayName="SlotClone";const F=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function L(e){return o.isValidElement(e)&&e.type===F}var P="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const B=d(((e,t)=>{var{ratio:n,style:o,as:s="div",asChild:l=!1}=e,c=a(e,["ratio","style","as","asChild"]);const u=l?I:s,d=Object.assign({aspectRatio:n},o),h=l?c.className:i(P,c.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:h},c))})),$=()=>E,T=()=>!1,A=()=>!0;function D({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)($,T,A)?e:t}function X(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const Y=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>X()?(0,r.jsx)(r.Fragment,{children:t}):e;function V(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function W(e){const t=V(e);(0,o.useEffect)((()=>()=>t()),[t])}function _(e,t=j){const[n,r]=(0,o.useState)(e),i=V(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function z(e,t,n){const r=V(e),i=_(n),l=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return W((()=>l.cancel())),l}const H=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),s=z(((...e)=>{const n=i?.props;if(n&&S(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:s})};function J({onIntersectStart:e=E,onIntersectEnd:t=E,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:s=0,rootMargin:l="0px 0px 0px 0px"}){const c=(0,o.useRef)(0),a=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=V((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(a.current=!0,c.current+=1,e(n)):a.current&&(a.current=!1,c.current+=1,t(n)),r&&c.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:s,root:i,rootMargin:l}),u.current.observe(e))}),[n,s,i,l,d])}}const U=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:s}=e,l=a(e,["src","threshold","root","rootMargin"]);const{ref:c}=J({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:N(t,c)},l))}));U.displayName="LazyImage";const K=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:s,className:l,style:c,duration:u="0.2s",onLoad:d}=e,h=a(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,p]=(0,o.useState)(!1),m=!f,g=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),w=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},c)),[m,u,c]),b=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),v=l?`lazy-image-wrapper ${l}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:g,children:[m&&s,(0,r.jsx)(U,Object.assign({ref:t,width:n,height:i,style:w,onLoad:b},h))]})}));K.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:s="after",rootMargin:l="150px 0px"})=>{const{ref:c}=J({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:l});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:c}),t,"after"===s&&(0,r.jsx)("div",{ref:c})]})},q=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1}=e,l=a(e,["children","as","asChild"]);const c=s?I:i,{ref:u}=J(l);if(s&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(c,Object.assign({ref:O(t,u)},l,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return k(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=g()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=V(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1,onPointerDown:l,excludeRefs:c=[]}=e,u=a(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(l,{excludeRefs:c}),h=s?I:i;if(s&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(h,Object.assign({ref:O(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:s=1,includeLastSeparator:l=!1})=>{const c=(0,o.useCallback)((e=>e===t.length-1?l:(e+1)%s==0),[l,s,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),c(t)&&n]})})},se=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),le=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function ce(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function ae(e=!0){const t=S(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield w(e);return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),l=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return h(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return h(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:s,readText:l,readContents:c}}const he="modern-kit-local-storage",fe="modern-kit-session-storage",pe={localStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}},sessionStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}}},me=e=>pe[e],ge=me("localStorage"),we=e=>window.localStorage.getItem(e),be=e=>JSON.stringify(e),ve=e=>(ge.subscribe(e),()=>{ge.unsubscribe(e)});function xe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(ve,(()=>we(t)),(()=>be(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=we(t),o=n?R(n):r,i=S(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),ge.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ge.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const ye=(e,t)=>g()?window.matchMedia(e).matches:t??!1;function je(e,t){const[n,r]=(0,o.useState)(ye(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function Se(){return je("(prefers-color-scheme: dark)")?"dark":"light"}const Ce="color-scheme";function ke({defaultValue:e,key:t=Ce,shouldSetBodyClass:n=!1}={}){const r=Se(),i=S(e)?e():e,{state:s,setState:l}=xe({key:t,initialValue:i??r}),c=(0,o.useCallback)((()=>{l((e=>"dark"===e?"light":"dark"))}),[l]),a=(0,o.useCallback)((()=>{l("dark")}),[l]),u=(0,o.useCallback)((()=>{l("light")}),[l]),d=(0,o.useCallback)((()=>{l(r)}),[l,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(s),()=>{n&&document.body.classList.remove(s)})),[s,n]),{colorScheme:s,preferredColorScheme:r,setToggleMode:c,setDarkMode:a,setLightMode:u,setPreferredMode:d}}function Ee(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:s}}function Re({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),s=r0,c=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),a=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const s=c(e,t);o&&o({prev:r,next:s}),i(s)}),[n,r,c]),u=(0,o.useCallback)((e=>{a("nextStep",!s,e)}),[s,a]),d=(0,o.useCallback)((e=>{a("prevStep",!l,e)}),[l,a]),h=(0,o.useCallback)(((t,n)=>{const o=S(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),f=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:s,hasPrevStep:l,goToNextStep:u,goToPrevStep:d,setStep:h,resetStep:f}}function Oe(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=Re({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}function Ne(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,z(i,t,n)]}function Ie(e,t={}){const[n,r]=(0,o.useState)(""),[i,s]=Ne("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),s(t)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Me(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Fe({onFocus:e=E,onBlur:t=E}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=V((t=>{r(!0),e(t)})),l=V((e=>{r(!1),t(e)})),c=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",s),ne(i,"blur",l),{ref:i,isFocus:n,setFocus:c}}function Le({onEnter:e=E,onLeave:t=E}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=V((t=>{r(!0),e(t)})),l=V((e=>{r(!1),t(e)}));return ne(i,"mouseenter",s),ne(i,"mouseleave",l),{ref:i,isHovered:n}}const Pe=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function Be(e,t){const n=(0,o.useRef)(),r=V(e),{delay:i,enabled:s}=Pe(t),l=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),c=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{c(),l()}),[c,l]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return l(),()=>c()}),[c,l,s,i]),{set:l,reset:a,clear:c}}function $e({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=V((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];S(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const Te={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Ae(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Te),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:l,pageY:c}=t;let a=null,u=null,d=null,h=null;if(e.current){const t=e.current.getBoundingClientRect();a=i-t.left,u=s-t.top,d=t.left+window.scrollX,h=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:s,pageX:l,pageY:c,elementRelativeX:a,elementRelativeY:u,elementPositionX:d,elementPositionY:h})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const De=()=>navigator.onLine,Xe=()=>!0,Ye=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function Ve({onlineAction:e=E,offlineAction:t=E}={}){const n=V((n=>Ye(n,e,t)));return(0,o.useSyncExternalStore)(n,De,Xe)}function We(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const _e={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function ze(e=E){const[t,n]=(0,o.useState)(_e),r=(0,o.useRef)(null),i=V((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function He({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ue=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:s="start",alignX:l="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+Je(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+Je(window.innerWidth,r.width,l)};const c=e.getBoundingClientRect();return{top:r.top-c.top+e.scrollTop+i+Je(c.height,r.height,s),left:r.left-c.left+e.scrollLeft+o+Je(c.width,r.width,l)}};function Ke(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:s}=Ue(r,t,n);r.scrollTo({top:s,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?R(n):r,i=S(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[s,l]=(0,o.useState)(n),c=(0,o.useCallback)((e=>{l((t=>{const n=S(e)?e(t):e;return r&&i&&function(e,t,n){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=S(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),a=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),l(null)}),[r,i]);return Object.assign({state:s,setState:c,clearState:a},Re(e))}function nt(e,t,n={}){const r=V(e),i=_(n),s=(0,o.useMemo)((()=>(0,l.A)(r,t,i)),[r,t,i]);return W((()=>s.cancel())),s}const rt=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=V(e),{delay:i,enabled:s}=rt(t),l=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),c=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{c(),l()}),[c,l]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return l(),()=>c()}),[l,c,i,s]),{set:l,reset:a,clear:c}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function st(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new c.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ct={width:null,height:null};function at({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?ct:{width:window.innerWidth,height:window.innerHeight})),r=z(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:s,reset:l,clear:c}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||l()}),[r,i,l,...n]),{set:s,reset:l,clear:c}}}}]); \ No newline at end of file diff --git a/assets/js/af3233c2.e18844a5.js b/assets/js/af3233c2.e18844a5.js new file mode 100644 index 000000000..7532aa495 --- /dev/null +++ b/assets/js/af3233c2.e18844a5.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[1376],{3614:(e,n,t)=>{t.r(n),t.d(n,{Button:()=>d,SlottableButton:()=>u,assets:()=>a,contentTitle:()=>c,default:()=>f,frontMatter:()=>l,metadata:()=>r,toc:()=>p});const r=JSON.parse('{"id":"react/components/Slot","title":"Slot","description":"\uc8fc\uc5b4\uc9c4 Props\ub97c \uc9c1\uacc4 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ubcd1\ud569\ud558\uace0, \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","source":"@site/docs/react/components/Slot.mdx","sourceDirName":"react/components","slug":"/react/components/Slot","permalink":"/modern-kit/docs/react/components/Slot","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"SeparatedIterator","permalink":"/modern-kit/docs/react/components/SeparatedIterator"},"next":{"title":"SwitchCase","permalink":"/modern-kit/docs/react/components/SwithCase"}}');var o=t(6206),i=t(3267),s=t(6807);const l={},c="Slot",a={},d=({asChild:e,...n})=>{const t=e?s.D:"button";return(0,o.jsx)(t,{...n})},u=({asChild:e,leftElement:n,rightElement:t,...r})=>{const i=e?s.D:"button";return(0,o.jsxs)(i,{...r,children:[n,(0,o.jsx)(s.x,{children:r.children}),t]})},p=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Default",id:"default",level:3},{value:"With Slottable",id:"with-slottable",level:3},{value:"Example",id:"example",level:2},{value:"Default",id:"default-1",level:3},{value:"AsChild",id:"aschild",level:3},{value:"Slottable",id:"slottable",level:3}];function h(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"slot",children:"Slot"})}),"\n",(0,o.jsx)(n.p,{children:"\uc8fc\uc5b4\uc9c4 Props\ub97c \uc9c1\uacc4 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ubcd1\ud569\ud558\uace0, \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."}),"\n",(0,o.jsxs)(n.p,{children:["Slot\uc740 \ubd80\ubaa8 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uae30\ub2a5\uc744 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uc640 \ud569\uc131\ud558\ub294 ",(0,o.jsx)(n.code,{children:"\ud569\uc131(Composition)"})," \ud328\ud134\uc744 \uad6c\ud604\ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574:"]}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["\ubd80\ubaa8 \ucef4\ud3ec\ub10c\ud2b8\uc758 ",(0,o.jsx)(n.code,{children:"props"}),", ",(0,o.jsx)(n.code,{children:"ref"}),", ",(0,o.jsx)(n.code,{children:"\uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec"})," \ub4f1\uc744 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc804\ub2ec\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4"]}),"\n",(0,o.jsx)(n.li,{children:"\uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uc758 \uad6c\ud604\uc744 \ubcc0\uacbd\ud558\uc9c0 \uc54a\uace0\ub3c4 \uc0c8\ub85c\uc6b4 \uae30\ub2a5\uc744 \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4"}),"\n",(0,o.jsx)(n.li,{children:"\ucef4\ud3ec\ub10c\ud2b8 \uac04\uc758 \uacb0\ud569\ub3c4\ub97c \ub0ae\ucd94\uace0 \uc7ac\uc0ac\uc6a9\uc131\uc744 \ub192\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4"}),"\n"]}),"\n",(0,o.jsxs)(n.p,{children:["\uc608\ub97c \ub4e4\uc5b4 ",(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/InView",children:"InView"})})," \ub098 ",(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/AspectRatio",children:"AspectRatio"})})," \uc640 \uac19\uc740 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c ",(0,o.jsx)(n.code,{children:"asChild"})," prop\uc744 \uc0ac\uc6a9\ud574\uc11c, \ub798\ud37c \uc694\uc18c \uc5c6\uc774 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc9c1\uc811 \uae30\ub2a5\uc744 \uc8fc\uc785\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)(n.p,{children:"Slot\uc740 \uc544\ub798\uc640 \uac19\uc740 \ud2b9\uc9d5\uc774 \uc788\uc2b5\ub2c8\ub2e4."}),"\n",(0,o.jsxs)(n.ol,{children:["\n",(0,o.jsxs)(n.li,{children:["\uc790\uc2dd \uc694\uc18c\ub85c ",(0,o.jsx)(n.code,{children:"\ub2e8\uc77c \uc694\uc18c"}),"\ub9cc \ud5c8\uc6a9\ub429\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"// \uac00\ub2a5\n\n
Contents
\n\n\n// \uac00\ub2a5\n\n
\n
Contents1
\n
Contents2
\n
\n\n"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"// \ubd88\uac00\ub2a5\n\n
Contents1
\n
Contents2
\n\n"})}),"\n",(0,o.jsxs)(n.ol,{start:"2",children:["\n",(0,o.jsxs)(n.li,{children:["\uc790\uc2dd \uc694\uc18c\ub85c \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc628\ub2e4\uba74 \ud574\ub2f9 \ucef4\ud3ec\ub10c\ud2b8\ub294 \ud544\uc218\uc801\uc73c\ub85c ",(0,o.jsx)(n.code,{children:"forwardRef"}),", ",(0,o.jsx)(n.code,{children:"props"}),"\ub97c \ud5c8\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4. \ud5c8\uc6a9\ud558\uc9c0 \uc54a\uc73c\uba74 \uae30\ub2a5\uc774 \uc815\uc0c1\uc801\uc73c\ub85c \ub3d9\uc791\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.a,{href:"https://www.radix-ui.com/primitives/docs/guides/composition#your-component-must-spread-props",children:"radix-ui#your-component-must-spread-props"})})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.a,{href:"https://www.radix-ui.com/primitives/docs/guides/composition#your-component-must-forward-ref",children:"radix-ui#your-component-must-forward-ref"})})}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"const MyButton = React.forwardRef((props, forwardedRef) => (\n \n"})}),"\n",(0,o.jsx)(d,{onClick:()=>console.log("click"),children:"Button"}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h3,{id:"aschild",children:"AsChild"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"// AsChild Usage\n\n"})}),"\n",(0,o.jsx)(d,{asChild:!0,onClick:()=>console.log("click"),children:(0,o.jsx)("div",{children:"asChild Button"})}),"\n",(0,o.jsx)(n.h3,{id:"slottable",children:"Slottable"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"left} rightElement={right}>\n Slottable Button \n\n"})}),"\n",(0,o.jsx)(u,{leftElement:(0,o.jsx)(n.span,{children:"left"}),rightElement:(0,o.jsx)(n.span,{children:"right"}),children:(0,o.jsx)("span",{children:" Slottable Button "})})]})}function f(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},4076:(e,n,t)=>{function r(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);or,a:()=>o}),"function"==typeof SuppressedError&&SuppressedError},3267:(e,n,t)=>{t.d(n,{R:()=>s,x:()=>l});var r=t(4382);const o={},i=r.createContext(o);function s(e){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),r.createElement(i.Provider,{value:n},e.children)}},6807:(e,n,t)=>{t.d(n,{D:()=>l,x:()=>a});var r=t(4076),o=t(6206),i=t(4382),s=t(2424);const l=i.forwardRef(((e,n)=>{const{children:t}=e,s=(0,r._)(e,["children"]),l=i.Children.toArray(t),a=l.find(d);if(a){const e=a.props.children,t=l.map((n=>n===a?i.Children.count(e)>1?i.Children.only(null):i.isValidElement(e)?e.props.children:null:n));return(0,o.jsx)(c,Object.assign({},s,{ref:n,children:i.isValidElement(e)?i.cloneElement(e,void 0,t):null}))}return(0,o.jsx)(c,Object.assign({},s,{ref:n,children:t}))}));l.displayName="Slot";const c=i.forwardRef(((e,n)=>{const{children:t}=e,o=(0,r._)(e,["children"]);if(i.isValidElement(t)){const e=function(e){var n,t;let r=null===(n=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(t=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(t);return i.cloneElement(t,Object.assign(Object.assign({},function(e,n){const t=Object.assign({},n);for(const r in n){const o=e[r],i=n[r];/^on[A-Z]/.test(r)?o&&i?t[r]=(...e)=>{i(...e),o(...e)}:o&&(t[r]=o):"style"===r?t[r]=Object.assign(Object.assign({},o),i):"className"===r&&(t[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),t)}(o,t.props)),{ref:n?(0,s.P)(n,e):e}))}return i.Children.count(t)>1?i.Children.only(null):null}));c.displayName="SlotClone";const a=({children:e})=>(0,o.jsx)(o.Fragment,{children:e});function d(e){return i.isValidElement(e)&&e.type===a}},2424:(e,n,t)=>{t.d(n,{P:()=>o});var r=t(9340);const o=(...e)=>n=>e.forEach((e=>{if((0,r.Tn)(e))e(n);else if(null!=e){e.current=n}}))},9340:(e,n,t)=>{function r(e,n,t,r){return new(t||(t=Promise))((function(o,i){function s(e){try{c(r.next(e))}catch(n){i(n)}}function l(e){try{c(r.throw(e))}catch(n){i(n)}}function c(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(s,l)}c((r=r.apply(e,n||[])).next())}))}t.d(n,{Et:()=>w,Fr:()=>l,Gp:()=>x,Ol:()=>E,Qd:()=>y,S$:()=>s,Tn:()=>j,Zp:()=>p,dK:()=>a,fl:()=>R,gD:()=>b,i5:()=>f,if:()=>h,l6:()=>C,lQ:()=>S,nS:()=>u,ni:()=>B,oc:()=>c}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,n)=>new Promise(((t,r)=>{e.toBlob((e=>{e?t(e):r(new Error(`Failed to create blob with format ${n}`))}),n)}));function s(){return"undefined"==typeof window}function l(){if(s())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function c(){return!s()}function a(e){return r(this,void 0,void 0,(function*(){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const d=e=>r(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return a(yield n.text())}));function u(e,n){var t;return r(this,void 0,void 0,(function*(){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return d(e);if(!("write"in window.navigator.clipboard))return d(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return d(e);const s=yield function(e,n="png"){return new Promise(((t,s)=>{const l=new Image;l.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=l.width,e.height=l.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(l,0,0);const s=yield i(e,o[n]);t(s)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),s(r)}})),l.onerror=()=>{s(new Error("Failed to load image"))},l.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[s.type]:s})]),s}catch(s){throw console.error(`Failed to copy to clipboard. message: ${s.message}`),s}}))}function p(){return r(this,void 0,void 0,(function*(){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function h(){return r(this,void 0,void 0,(function*(){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function f(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const m=(e,n,t)=>{const r=Object.keys(e),o=Object.keys(n);if(r.length!==o.length)return!1;for(let i=0;i{if(e===n)return!0;if(w(e)&&w(n)&&isNaN(e)&&isNaN(n))return!0;if(j(e)&&j(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const r=[...e],o=[...n];return m(r,o,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[r,o]of e)if(!n.has(r)||!g(o,n.get(r),t))return!1;return!0}return m(e,n,t)};function x(e,n){return g(e,n,new WeakMap)}function j(e){return"function"==typeof e}function b(e){return null==e}function w(e){return"number"==typeof e}function v(e){return!function(e){return Object(e)!==e}(e)}function y(e){return v(e)&&"[object Object]"===Object.prototype.toString.call(e)}function C(e){return e===window}function S(){}function E(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function O(e){return Object.keys(e)}const k={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};O(k);function R(e,n){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function B(e,n,t){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=j(t)?t():t;r.setItem(n,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${n}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/b35b1276.32da6ca7.js b/assets/js/b35b1276.32da6ca7.js deleted file mode 100644 index eefc5296c..000000000 --- a/assets/js/b35b1276.32da6ca7.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[6649],{7424:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>l,default:()=>p,frontMatter:()=>a,metadata:()=>r,toc:()=>f});const r=JSON.parse('{"id":"react/components/When","title":"When","description":"condition prop\uc774 true\uba74 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud558\uace0, false\uba74 \ub80c\ub354\ub9c1\ud558\uc9c0 \uc54a\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","source":"@site/docs/react/components/When.mdx","sourceDirName":"react/components","slug":"/react/components/When","permalink":"/modern-kit/docs/react/components/When","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"SwitchCase","permalink":"/modern-kit/docs/react/components/SwithCase"},"next":{"title":"useAsyncEffect","permalink":"/modern-kit/docs/react/hooks/useAsyncEffect"}}');var o=n(6206),i=n(3267),c=n(4382),s=n(4027);const a={},l="When",u={},d=()=>{const e={button:"button",h1:"h1",p:"p",...(0,i.R)()},[t,n]=(0,c.useState)(!1);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.button,{onClick:()=>n(!t),children:"Toggle Button"}),(0,o.jsx)(s.jd,{condition:t,fallback:(0,o.jsx)(e.p,{children:"Fallback"}),children:(0,o.jsx)(e.h1,{children:"Render"})})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function h(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"when",children:"When"})}),"\n",(0,o.jsxs)(t.p,{children:["condition prop\uc774 ",(0,o.jsx)(t.code,{children:"true"}),"\uba74 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud558\uace0, ",(0,o.jsx)(t.code,{children:"false"}),"\uba74 \ub80c\ub354\ub9c1\ud558\uc9c0 \uc54a\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:["condition prop\uc73c\ub85c ",(0,o.jsx)(t.code,{children:"boolean\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218"}),"\ub3c4 \ud5c8\uc6a9\ub429\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/When/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"type Condition = boolean | (() => boolean);\n\ninterface WhenProps {\n condition: Condition;\n fallback?: React.ReactNode;\n}\n\nconst When: ({\n children,\n condition,\n fallback,\n}: PropsWithChildren) => JSX.Element;\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { When } from '@modern-kit/react';\n\nconst Example = () => {\n const [state, setState] = useState(false);\n\n return (\n <>\n \n\n Fallback

}>\n

Render

\n \n \n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(d,{})]})}function p(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>$e,$I:()=>oe,AE:()=>Be,BL:()=>H,DX:()=>I,FT:()=>st,Fo:()=>et,Hn:()=>it,I5:()=>je,JF:()=>We,K:()=>le,K$:()=>Je,M0:()=>Fe,ML:()=>ne,Mj:()=>ye,Mk:()=>Pe,Mo:()=>ie,NT:()=>Ye,QV:()=>Ue,Ub:()=>ke,Ut:()=>Ee,W7:()=>U,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>De,Zu:()=>ae,_1:()=>Oe,_g:()=>nt,aL:()=>J,aY:()=>Ie,bB:()=>X,d7:()=>z,eG:()=>ct,fN:()=>se,fm:()=>G,gl:()=>$,hN:()=>V,iD:()=>de,iQ:()=>Le,jd:()=>ce,lW:()=>lt,oD:()=>K,oo:()=>Re,pL:()=>q,qi:()=>ue,rN:()=>Ne,tD:()=>Se,u8:()=>Q,wY:()=>ze,xV:()=>L,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),i=n(3683),c=n(5086),s=n(7197),a=(n(1604),n(5938));function l(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function g(){return!m()}function w(e){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const b=e=>f(void 0,0,void 0,(function*(){return w(yield(yield fetch(e)).text())}));function v(e,t){var n;return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return b(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield p(e,h[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||C(e)&&C(t)&&isNaN(e)&&isNaN(t))return!0;if(S(e)&&S(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function k(e,t){return x(e,t,new WeakMap)}function S(e){return"function"==typeof e}function C(e){return"number"==typeof e}function E(e){return!function(e){return Object(e)!==e}(e)}function j(){}function R(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const O=(...e)=>t=>e.forEach((e=>{if(S(e))e(t);else if(null!=e){e.current=t}}));function F(...e){return(0,o.useCallback)(O(...e),e)}const I=o.forwardRef(((e,t)=>{const{children:n}=e,i=l(e,["children"]),c=o.Children.toArray(n),s=c.find(P);if(s){const e=s.props.children,n=c.map((t=>t===s?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(N,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(N,Object.assign({},i,{ref:t,children:n}))}));I.displayName="Slot";const N=o.forwardRef(((e,t)=>{const{children:n}=e,r=l(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?O(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));N.displayName="SlotClone";const L=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function P(e){return o.isValidElement(e)&&e.type===L}var M="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const $=d(((e,t)=>{var{ratio:n,style:o,as:c="div",asChild:s=!1}=e,a=l(e,["ratio","style","as","asChild"]);const u=s?I:c,d=Object.assign({aspectRatio:n},o),f=s?a.className:i(M,a.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},a))})),W=()=>j,T=()=>!1,Y=()=>!0;function X({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(W,T,Y)?e:t}function A(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const V=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>A()?(0,r.jsx)(r.Fragment,{children:t}):e;function B(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function D(e){const t=B(e);(0,o.useEffect)((()=>()=>t()),[t])}function _(e,t=k){const[n,r]=(0,o.useState)(e),i=B(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function z(e,t,n){const r=B(e),i=_(n),s=(0,o.useMemo)((()=>(0,c.A)(r,t,i)),[r,t,i]);return D((()=>s.cancel())),s}const J=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),c=z(((...e)=>{const n=i?.props;if(n&&S(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:c})};function H({onIntersectStart:e=j,onIntersectEnd:t=j,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:c=0,rootMargin:s="0px 0px 0px 0px"}){const a=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=B((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(l.current=!0,a.current+=1,e(n)):l.current&&(l.current=!1,a.current+=1,t(n)),r&&a.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:c,root:i,rootMargin:s}),u.current.observe(e))}),[n,c,i,s,d])}}const K=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:c}=e,s=l(e,["src","threshold","root","rootMargin"]);const{ref:a}=H({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:c});return(0,r.jsx)("img",Object.assign({ref:F(t,a)},s))}));K.displayName="LazyImage";const U=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:c,className:s,style:a,duration:u="0.2s",onLoad:d}=e,f=l(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,g=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),w=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},a)),[m,u,a]),b=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),v=s?`lazy-image-wrapper ${s}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:g,children:[m&&c,(0,r.jsx)(K,Object.assign({ref:t,width:n,height:i,style:w,onLoad:b},f))]})}));U.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:c="after",rootMargin:s="150px 0px"})=>{const{ref:a}=H({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:s});return(0,r.jsxs)(r.Fragment,{children:["before"===c&&(0,r.jsx)("div",{ref:a}),t,"after"===c&&(0,r.jsx)("div",{ref:a})]})},q=d(((e,t)=>{var{children:n,as:i="div",asChild:c=!1}=e,s=l(e,["children","as","asChild"]);const a=c?I:i,{ref:u}=H(s);if(c&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(a,Object.assign({ref:O(t,u)},s,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return E(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=g()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=B(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:c=!1,onPointerDown:s,excludeRefs:a=[]}=e,u=l(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(s,{excludeRefs:a}),f=c?I:i;if(c&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:O(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:c=1,includeLastSeparator:s=!1})=>{const a=(0,o.useCallback)((e=>e===t.length-1?s:(e+1)%c==0),[s,c,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),a(t)&&n]})})},ce=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),se=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function ae(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function le(e=!0){const t=S(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield w(e);return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),a=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:c,readText:s,readContents:a}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],ge=me("localStorage"),we=e=>window.localStorage.getItem(e),be=e=>JSON.stringify(e),ve=e=>(ge.subscribe(e),()=>{ge.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(ve,(()=>we(t)),(()=>be(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=we(t),o=n?R(n):r,i=S(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),ge.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ge.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>g()?window.matchMedia(e).matches:t??!1;function ke(e,t){const[n,r]=(0,o.useState)(xe(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function Se(){return ke("(prefers-color-scheme: dark)")?"dark":"light"}const Ce="color-scheme";function Ee({defaultValue:e,key:t=Ce,shouldSetBodyClass:n=!1}={}){const r=Se(),i=S(e)?e():e,{state:c,setState:s}=ye({key:t,initialValue:i??r}),a=(0,o.useCallback)((()=>{s((e=>"dark"===e?"light":"dark"))}),[s]),l=(0,o.useCallback)((()=>{s("dark")}),[s]),u=(0,o.useCallback)((()=>{s("light")}),[s]),d=(0,o.useCallback)((()=>{s(r)}),[s,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(c),()=>{n&&document.body.classList.remove(c)})),[c,n]),{colorScheme:c,preferredColorScheme:r,setToggleMode:a,setDarkMode:l,setLightMode:u,setPreferredMode:d}}function je(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),c=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:c}}function Re({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),c=r0,a=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),l=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const c=a(e,t);o&&o({prev:r,next:c}),i(c)}),[n,r,a]),u=(0,o.useCallback)((e=>{l("nextStep",!c,e)}),[c,l]),d=(0,o.useCallback)((e=>{l("prevStep",!s,e)}),[s,l]),f=(0,o.useCallback)(((t,n)=>{const o=S(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:c,hasPrevStep:s,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Oe(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:c}=Re({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:c}}function Fe(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,z(i,t,n)]}function Ie(e,t={}){const[n,r]=(0,o.useState)(""),[i,c]=Fe("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),c(t)}),[c]),onReset:(0,o.useCallback)((()=>{r(""),c("")}),[c])}}function Ne(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Le({onFocus:e=j,onBlur:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),c=B((t=>{r(!0),e(t)})),s=B((e=>{r(!1),t(e)})),a=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",c),ne(i,"blur",s),{ref:i,isFocus:n,setFocus:a}}function Pe({onEnter:e=j,onLeave:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),c=B((t=>{r(!0),e(t)})),s=B((e=>{r(!1),t(e)}));return ne(i,"mouseenter",c),ne(i,"mouseleave",s),{ref:i,isHovered:n}}const Me=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function $e(e,t){const n=(0,o.useRef)(),r=B(e),{delay:i,enabled:c}=Me(t),s=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),s()}),[a,s]);return(0,o.useEffect)((()=>{if(!(i<0)&&c)return s(),()=>a()}),[a,s,c,i]),{set:s,reset:l,clear:a}}function We({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=B((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];S(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const Te={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Ye(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Te),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:c,pageX:s,pageY:a}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=i-t.left,u=c-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:c,pageX:s,pageY:a,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Xe=()=>navigator.onLine,Ae=()=>!0,Ve=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function Be({onlineAction:e=j,offlineAction:t=j}={}){const n=B((n=>Ve(n,e,t)));return(0,o.useSyncExternalStore)(n,Xe,Ae)}function De(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const _e={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function ze(e=j){const[t,n]=(0,o.useState)(_e),r=(0,o.useRef)(null),i=B((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function Je({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const He=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:c="start",alignX:s="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+He(window.innerHeight,r.height,c),left:r.left+window.scrollX+o+He(window.innerWidth,r.width,s)};const a=e.getBoundingClientRect();return{top:r.top-a.top+e.scrollTop+i+He(a.height,r.height,c),left:r.left-a.left+e.scrollLeft+o+He(a.width,r.width,s)}};function Ue(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:c}=Ke(r,t,n);r.scrollTo({top:c,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?R(n):r,i=S(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[c,s]=(0,o.useState)(n),a=(0,o.useCallback)((e=>{s((t=>{const n=S(e)?e(t):e;return r&&i&&function(e,t,n){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=S(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),l=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),s(null)}),[r,i]);return Object.assign({state:c,setState:a,clearState:l},Re(e))}function nt(e,t,n={}){const r=B(e),i=_(n),c=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return D((()=>c.cancel())),c}const rt=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=B(e),{delay:i,enabled:c}=rt(t),s=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),s()}),[a,s]);return(0,o.useEffect)((()=>{if(!(i<0)&&c)return s(),()=>a()}),[s,a,i,c]),{set:s,reset:l,clear:a}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function ct(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new a.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function st({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const at={width:null,height:null};function lt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?at:{width:window.innerWidth,height:window.innerHeight})),r=z(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:c,reset:s,clear:a}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||s()}),[r,i,s,...n]),{set:c,reset:s,clear:a}}}}]); \ No newline at end of file diff --git a/assets/js/b35b1276.f4904be4.js b/assets/js/b35b1276.f4904be4.js new file mode 100644 index 000000000..bd4558acd --- /dev/null +++ b/assets/js/b35b1276.f4904be4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[6649],{9308:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>h,assets:()=>d,contentTitle:()=>l,default:()=>m,frontMatter:()=>a,metadata:()=>o,toc:()=>p});const o=JSON.parse('{"id":"react/components/When","title":"When","description":"condition prop\uc774 true\uba74 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud558\uace0, false\uba74 \ub80c\ub354\ub9c1\ud558\uc9c0 \uc54a\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","source":"@site/docs/react/components/When.mdx","sourceDirName":"react/components","slug":"/react/components/When","permalink":"/modern-kit/docs/react/components/When","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"SwitchCase","permalink":"/modern-kit/docs/react/components/SwithCase"},"next":{"title":"useAsyncEffect","permalink":"/modern-kit/docs/react/hooks/useAsyncEffect"}}');var c=t(6206),r=t(3267),s=t(4382);const i=({children:e,condition:n,fallback:t=null})=>{const o=(e=>"function"==typeof e?e():e)(n);return o?(0,c.jsx)(s.Fragment,{children:e}):(0,c.jsx)(s.Fragment,{children:t})},a={},l="When",d={},h=()=>{const e={button:"button",h1:"h1",p:"p",...(0,r.R)()},[n,t]=(0,s.useState)(!1);return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(e.button,{onClick:()=>t(!n),children:"Toggle Button"}),(0,c.jsx)(i,{condition:n,fallback:(0,c.jsx)(e.p,{children:"Fallback"}),children:(0,c.jsx)(e.h1,{children:"Render"})})]})},p=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function u(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.R)(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(n.header,{children:(0,c.jsx)(n.h1,{id:"when",children:"When"})}),"\n",(0,c.jsxs)(n.p,{children:["condition prop\uc774 ",(0,c.jsx)(n.code,{children:"true"}),"\uba74 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud558\uace0, ",(0,c.jsx)(n.code,{children:"false"}),"\uba74 \ub80c\ub354\ub9c1\ud558\uc9c0 \uc54a\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,c.jsxs)(n.p,{children:["condition prop\uc73c\ub85c ",(0,c.jsx)(n.code,{children:"boolean\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218"}),"\ub3c4 \ud5c8\uc6a9\ub429\ub2c8\ub2e4."]}),"\n",(0,c.jsx)("br",{}),"\n",(0,c.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,c.jsx)(n.p,{children:(0,c.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/When/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,c.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"type Condition = boolean | (() => boolean);\n\ninterface WhenProps {\n condition: Condition;\n fallback?: React.ReactNode;\n}\n\nconst When: ({\n children,\n condition,\n fallback,\n}: PropsWithChildren) => JSX.Element;\n"})}),"\n",(0,c.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { When } from '@modern-kit/react';\n\nconst Example = () => {\n const [state, setState] = useState(false);\n\n return (\n <>\n \n\n Fallback

}>\n

Render

\n \n \n );\n};\n"})}),"\n",(0,c.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,c.jsx)(h,{})]})}function m(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,c.jsx)(n,{...e,children:(0,c.jsx)(u,{...e})}):u(e)}},3267:(e,n,t)=>{t.d(n,{R:()=>s,x:()=>i});var o=t(4382);const c={},r=o.createContext(c);function s(e){const n=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(c):e.components||c:s(e.components),o.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/b3bf5b56.15e7497a.js b/assets/js/b3bf5b56.15e7497a.js new file mode 100644 index 000000000..29d23e1d8 --- /dev/null +++ b/assets/js/b3bf5b56.15e7497a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[3110],{7464:(e,n,t)=>{t.r(n),t.d(n,{DebounceExample:()=>b,DefaultExample:()=>m,assets:()=>w,contentTitle:()=>p,default:()=>y,frontMatter:()=>h,metadata:()=>r,toc:()=>v});const r=JSON.parse('{"id":"react/hooks/useWindowSize","title":"useWindowSize","description":"\ud604\uc7ac \ube0c\ub77c\uc6b0\uc800 \ucc3d\uc758 \ub108\ube44\uc640 \ub192\uc774 \uc815\ubcf4\ub97c \ucd94\uc801\ud558\uace0, \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4. \ub610\ud55c, \ubd88 \ud544\uc694\ud55c \ud638\ucd9c\uc744 \ubc29\uc9c0\ud558\uae30\uc704\ud55c debounce \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useWindowSize.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useWindowSize","permalink":"/modern-kit/docs/react/hooks/useWindowSize","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useVisibilityChange","permalink":"/modern-kit/docs/react/hooks/useVisibilityChange"},"next":{"title":"at","permalink":"/modern-kit/docs/utils/array/at"}}');var o=t(6206),i=t(3267),c=t(4382),s=t(5115),a=t(1351),u=t(9340);const d={width:null,height:null};function l({debounceWait:e}={}){const[n,t]=(0,c.useState)((()=>(0,u.S$)()?d:{width:window.innerWidth,height:window.innerHeight})),r=(0,s.d)(t,e),o=(0,c.useCallback)((()=>{(e?r:t)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return(0,a.M)(window,"resize",o),n}var f=t(9010);const h={},p="useWindowSize",w={},m=()=>{const e={br:"br",div:"div",...(0,i.R)()},n=l(),t=(0,c.useMemo)((()=>({width:"100%",background:"#439966",fontSize:"2rem",color:"#fff"})),[]);return(0,o.jsxs)(e.div,{style:t,children:["\ube0c\ub77c\uc6b0\uc800 \ud06c\uae30\ub97c \uc904\uc5ec\ubcf4\uc138\uc694. ",(0,o.jsx)(e.br,{}),"width: ",n.width,"px ",(0,o.jsx)(e.br,{}),"height: ",n.height,"px"]})},b=()=>{const e={br:"br",div:"div",...(0,i.R)()},n=l({debounceWait:300}),t=(0,c.useMemo)((()=>({width:"100%",background:"#0067A3",fontSize:"2rem",color:"#fff"})),[]);return(0,o.jsxs)(e.div,{style:t,children:["\ube0c\ub77c\uc6b0\uc800 \ud06c\uae30\ub97c \uc904\uc5ec\ubcf4\uc138\uc694. ",(0,o.jsx)(e.br,{}),"width: ",n.width,"px ",(0,o.jsx)(e.br,{}),"height: ",n.height,"px"]})},v=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Default",id:"default",level:3},{value:"Debounce",id:"debounce",level:3}];function g(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"usewindowsize",children:"useWindowSize"})}),"\n",(0,o.jsxs)(n.p,{children:["\ud604\uc7ac \ube0c\ub77c\uc6b0\uc800 \ucc3d\uc758 \ub108\ube44\uc640 \ub192\uc774 \uc815\ubcf4\ub97c \ucd94\uc801\ud558\uace0, \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4. \ub610\ud55c, \ubd88 \ud544\uc694\ud55c \ud638\ucd9c\uc744 \ubc29\uc9c0\ud558\uae30\uc704\ud55c ",(0,o.jsx)(n.code,{children:"debounce"})," \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useWindowSize/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"interface WindowSize {\n width: number | null;\n height: number | null;\n}\n\ninterface useWindowSizeProps {\n debounceWait?: number; // debounce delay time, default: 300\n}\n"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"function useWindowSize({ debounceWait }: useWindowSizeProps = {}): WindowSize\n"})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.h3,{id:"default",children:"Default"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useWindowSize } from '@modern-kit/react';\n\nconst Example = () => {\n const windowSize = useWindowSize();\n const boxStyle = useMemo(() => {\n return {\n width: '100%', \n background: '#439966', \n fontSize: '2rem',\n color: '#fff',\n }\n }, []);\n\n return (\n
\n \ube0c\ub77c\uc6b0\uc800 \ud06c\uae30\ub97c \uc904\uc5ec\ubcf4\uc138\uc694.
\n width: {windowSize.width}px
\n height: {windowSize.height}px\n
\n );\n};\n"})}),"\n","\n",(0,o.jsx)(f.A,{children:()=>(0,o.jsx)(m,{})}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h3,{id:"debounce",children:"Debounce"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useWindowSize } from '@modern-kit/react';\n\nconst DebounceExample = () => {\n const windowSize = useWindowSize({ debounceWait: 300 });\n const boxStyle = useMemo(() => {\n return {\n width: '100%', \n background: '#0067A3', \n fontSize: '2rem',\n color: '#fff',\n }\n }, []);\n\n return (\n
\n \ube0c\ub77c\uc6b0\uc800 \ud06c\uae30\ub97c \uc904\uc5ec\ubcf4\uc138\uc694.
\n width: {windowSize.width}px
\n height: {windowSize.height}px\n
\n );\n};\n"})}),"\n","\n",(0,o.jsx)(f.A,{children:()=>(0,o.jsx)(b,{})}),"\n",(0,o.jsx)("br",{})]})}function y(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(g,{...e})}):g(e)}},9010:(e,n,t)=>{t.d(n,{A:()=>i});t(4382);var r=t(3555),o=t(6206);function i(e){let{children:n,fallback:t}=e;return(0,r.A)()?(0,o.jsx)(o.Fragment,{children:n?.()}):t??null}},3267:(e,n,t)=>{t.d(n,{R:()=>c,x:()=>s});var r=t(4382);const o={},i=r.createContext(o);function c(e){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),r.createElement(i.Provider,{value:n},e.children)}},5115:(e,n,t)=>{t.d(n,{d:()=>a});var r=t(4382),o=t(5086),i=t(3311),c=t(6765),s=t(5423);function a(e,n,t){const a=(0,c.p)(e),u=(0,s.B)(t),d=(0,r.useMemo)((()=>(0,o.A)(a,n,u)),[a,n,u]);return(0,i.i)((()=>d.cancel())),d}},1351:(e,n,t)=>{t.d(n,{M:()=>s});var r=t(6765),o=t(5907),i=t(9340);t(4382);const c=e=>!!e&&(0,i.i5)(e,"current");function s(e,n,t,i){const s=(0,r.p)(t);(0,o.E)((()=>{const t=c(e)?e.current:e;if(t)return t.addEventListener(n,s,i),()=>{t.removeEventListener(n,s,i)}}),[n,e,i,s])}},5907:(e,n,t)=>{t.d(n,{E:()=>i});var r=t(9340),o=t(4382);const i=(0,r.oc)()?o.useLayoutEffect:o.useEffect},6765:(e,n,t)=>{t.d(n,{p:()=>o});var r=t(4382);function o(e){const n=(0,r.useRef)(e);return n.current=e,(0,r.useCallback)(((...e)=>n.current(...e)),[])}},5423:(e,n,t)=>{t.d(n,{B:()=>c});var r=t(4382),o=t(6765),i=t(9340);function c(e,n=i.Gp){const[t,c]=(0,r.useState)(e),s=(0,o.p)(n);return(0,r.useEffect)((()=>{s(t,e)||c(e)}),[s,t,e]),t}},3311:(e,n,t)=>{t.d(n,{i:()=>i});var r=t(6765),o=t(4382);function i(e){const n=(0,r.p)(e);(0,o.useEffect)((()=>()=>n()),[n])}},5086:(e,n,t)=>{t.d(n,{A:()=>N});var r=t(322);const o="object"==typeof global&&global&&global.Object===Object&&global;var i="object"==typeof self&&self&&self.Object===Object&&self;const c=o||i||Function("return this")();const s=function(){return c.Date.now()};var a=/\s/;const u=function(e){for(var n=e.length;n--&&a.test(e.charAt(n)););return n};var d=/^\s+/;const l=function(e){return e?e.slice(0,u(e)+1).replace(d,""):e};const f=c.Symbol;var h=Object.prototype,p=h.hasOwnProperty,w=h.toString,m=f?f.toStringTag:void 0;const b=function(e){var n=p.call(e,m),t=e[m];try{e[m]=void 0;var r=!0}catch(i){}var o=w.call(e);return r&&(n?e[m]=t:delete e[m]),o};var v=Object.prototype.toString;const g=function(e){return v.call(e)};var y=f?f.toStringTag:void 0;const x=function(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":y&&y in Object(e)?b(e):g(e)};const j=function(e){return null!=e&&"object"==typeof e};const S=function(e){return"symbol"==typeof e||j(e)&&"[object Symbol]"==x(e)};var k=/^[-+]0x[0-9a-f]+$/i,z=/^0b[01]+$/i,E=/^0o[0-7]+$/i,W=parseInt;const O=function(e){if("number"==typeof e)return e;if(S(e))return NaN;if((0,r.A)(e)){var n="function"==typeof e.valueOf?e.valueOf():e;e=(0,r.A)(n)?n+"":n}if("string"!=typeof e)return 0===e?e:+e;e=l(e);var t=z.test(e);return t||E.test(e)?W(e.slice(2),t?2:8):k.test(e)?NaN:+e};var C=Math.max,$=Math.min;const N=function(e,n,t){var o,i,c,a,u,d,l=0,f=!1,h=!1,p=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function w(n){var t=o,r=i;return o=i=void 0,l=n,a=e.apply(r,t)}function m(e){var t=e-d;return void 0===d||t>=n||t<0||h&&e-l>=c}function b(){var e=s();if(m(e))return v(e);u=setTimeout(b,function(e){var t=n-(e-d);return h?$(t,c-(e-l)):t}(e))}function v(e){return u=void 0,p&&o?w(e):(o=i=void 0,a)}function g(){var e=s(),t=m(e);if(o=arguments,i=this,d=e,t){if(void 0===u)return function(e){return l=e,u=setTimeout(b,n),f?w(e):a}(d);if(h)return clearTimeout(u),u=setTimeout(b,n),w(d)}return void 0===u&&(u=setTimeout(b,n)),a}return n=O(n)||0,(0,r.A)(t)&&(f=!!t.leading,c=(h="maxWait"in t)?C(O(t.maxWait)||0,n):c,p="trailing"in t?!!t.trailing:p),g.cancel=function(){void 0!==u&&clearTimeout(u),l=0,o=d=i=u=void 0},g.flush=function(){return void 0===u?a:v(s())},g}},322:(e,n,t)=>{t.d(n,{A:()=>r});const r=function(e){var n=typeof e;return null!=e&&("object"==n||"function"==n)}},9340:(e,n,t)=>{function r(e,n,t,r){return new(t||(t=Promise))((function(o,i){function c(e){try{a(r.next(e))}catch(n){i(n)}}function s(e){try{a(r.throw(e))}catch(n){i(n)}}function a(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(c,s)}a((r=r.apply(e,n||[])).next())}))}t.d(n,{Et:()=>y,Fr:()=>s,Gp:()=>b,Ol:()=>z,Qd:()=>j,S$:()=>c,Tn:()=>v,Zp:()=>f,dK:()=>u,fl:()=>O,gD:()=>g,i5:()=>p,if:()=>h,l6:()=>S,lQ:()=>k,nS:()=>l,ni:()=>C,oc:()=>a}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,n)=>new Promise(((t,r)=>{e.toBlob((e=>{e?t(e):r(new Error(`Failed to create blob with format ${n}`))}),n)}));function c(){return"undefined"==typeof window}function s(){if(c())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function a(){return!c()}function u(e){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const d=e=>r(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return u(yield n.text())}));function l(e,n){var t;return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return d(e);if(!("write"in window.navigator.clipboard))return d(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return d(e);const c=yield function(e,n="png"){return new Promise(((t,c)=>{const s=new Image;s.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=s.width,e.height=s.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(s,0,0);const c=yield i(e,o[n]);t(c)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),c(r)}})),s.onerror=()=>{c(new Error("Failed to load image"))},s.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[c.type]:c})]),c}catch(c){throw console.error(`Failed to copy to clipboard. message: ${c.message}`),c}}))}function f(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function h(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const w=(e,n,t)=>{const r=Object.keys(e),o=Object.keys(n);if(r.length!==o.length)return!1;for(let i=0;i{if(e===n)return!0;if(y(e)&&y(n)&&isNaN(e)&&isNaN(n))return!0;if(v(e)&&v(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const r=[...e],o=[...n];return w(r,o,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[r,o]of e)if(!n.has(r)||!m(o,n.get(r),t))return!1;return!0}return w(e,n,t)};function b(e,n){return m(e,n,new WeakMap)}function v(e){return"function"==typeof e}function g(e){return null==e}function y(e){return"number"==typeof e}function x(e){return!function(e){return Object(e)!==e}(e)}function j(e){return x(e)&&"[object Object]"===Object.prototype.toString.call(e)}function S(e){return e===window}function k(){}function z(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function E(e){return Object.keys(e)}const W={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};E(W);function O(e,n){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function C(e,n,t){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=v(t)?t():t;r.setItem(n,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${n}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/b3bf5b56.3de72384.js b/assets/js/b3bf5b56.3de72384.js deleted file mode 100644 index 8815b9096..000000000 --- a/assets/js/b3bf5b56.3de72384.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[3110],{4256:(e,t,n)=>{n.r(t),n.d(t,{DebounceExample:()=>h,DefaultExample:()=>f,assets:()=>d,contentTitle:()=>u,default:()=>m,frontMatter:()=>l,metadata:()=>r,toc:()=>p});const r=JSON.parse('{"id":"react/hooks/useWindowSize","title":"useWindowSize","description":"\ud604\uc7ac \ube0c\ub77c\uc6b0\uc800 \ucc3d\uc758 \ub108\ube44\uc640 \ub192\uc774 \uc815\ubcf4\ub97c \ucd94\uc801\ud558\uace0, \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4. \ub610\ud55c, \ubd88 \ud544\uc694\ud55c \ud638\ucd9c\uc744 \ubc29\uc9c0\ud558\uae30\uc704\ud55c debounce \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useWindowSize.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useWindowSize","permalink":"/modern-kit/docs/react/hooks/useWindowSize","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useVisibilityChange","permalink":"/modern-kit/docs/react/hooks/useVisibilityChange"},"next":{"title":"at","permalink":"/modern-kit/docs/utils/array/at"}}');var o=n(6206),i=n(3267),s=n(4027),c=n(4382),a=n(9010);const l={},u="useWindowSize",d={},f=()=>{const e={br:"br",div:"div",...(0,i.R)()},t=(0,s.lW)(),n=(0,c.useMemo)((()=>({width:"100%",background:"#439966",fontSize:"2rem",color:"#fff"})),[]);return(0,o.jsxs)(e.div,{style:n,children:["\ube0c\ub77c\uc6b0\uc800 \ud06c\uae30\ub97c \uc904\uc5ec\ubcf4\uc138\uc694. ",(0,o.jsx)(e.br,{}),"width: ",t.width,"px ",(0,o.jsx)(e.br,{}),"height: ",t.height,"px"]})},h=()=>{const e={br:"br",div:"div",...(0,i.R)()},t=(0,s.lW)({debounceWait:300}),n=(0,c.useMemo)((()=>({width:"100%",background:"#0067A3",fontSize:"2rem",color:"#fff"})),[]);return(0,o.jsxs)(e.div,{style:n,children:["\ube0c\ub77c\uc6b0\uc800 \ud06c\uae30\ub97c \uc904\uc5ec\ubcf4\uc138\uc694. ",(0,o.jsx)(e.br,{}),"width: ",t.width,"px ",(0,o.jsx)(e.br,{}),"height: ",t.height,"px"]})},p=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Default",id:"default",level:3},{value:"Debounce",id:"debounce",level:3}];function w(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usewindowsize",children:"useWindowSize"})}),"\n",(0,o.jsxs)(t.p,{children:["\ud604\uc7ac \ube0c\ub77c\uc6b0\uc800 \ucc3d\uc758 \ub108\ube44\uc640 \ub192\uc774 \uc815\ubcf4\ub97c \ucd94\uc801\ud558\uace0, \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4. \ub610\ud55c, \ubd88 \ud544\uc694\ud55c \ud638\ucd9c\uc744 \ubc29\uc9c0\ud558\uae30\uc704\ud55c ",(0,o.jsx)(t.code,{children:"debounce"})," \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useWindowSize/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface WindowSize {\n width: number | null;\n height: number | null;\n}\n\ninterface useWindowSizeProps {\n debounceWait?: number; // debounce delay time, default: 300\n}\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useWindowSize({ debounceWait }: useWindowSizeProps = {}): WindowSize\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.h3,{id:"default",children:"Default"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useWindowSize } from '@modern-kit/react';\n\nconst Example = () => {\n const windowSize = useWindowSize();\n const boxStyle = useMemo(() => {\n return {\n width: '100%', \n background: '#439966', \n fontSize: '2rem',\n color: '#fff',\n }\n }, []);\n\n return (\n
\n \ube0c\ub77c\uc6b0\uc800 \ud06c\uae30\ub97c \uc904\uc5ec\ubcf4\uc138\uc694.
\n width: {windowSize.width}px
\n height: {windowSize.height}px\n
\n );\n};\n"})}),"\n","\n",(0,o.jsx)(a.A,{children:()=>(0,o.jsx)(f,{})}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h3,{id:"debounce",children:"Debounce"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useWindowSize } from '@modern-kit/react';\n\nconst DebounceExample = () => {\n const windowSize = useWindowSize({ debounceWait: 300 });\n const boxStyle = useMemo(() => {\n return {\n width: '100%', \n background: '#0067A3', \n fontSize: '2rem',\n color: '#fff',\n }\n }, []);\n\n return (\n
\n \ube0c\ub77c\uc6b0\uc800 \ud06c\uae30\ub97c \uc904\uc5ec\ubcf4\uc138\uc694.
\n width: {windowSize.width}px
\n height: {windowSize.height}px\n
\n );\n};\n"})}),"\n","\n",(0,o.jsx)(a.A,{children:()=>(0,o.jsx)(h,{})}),"\n",(0,o.jsx)("br",{})]})}function m(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(w,{...e})}):w(e)}},9010:(e,t,n)=>{n.d(t,{A:()=>i});n(4382);var r=n(3555),o=n(6206);function i(e){let{children:t,fallback:n}=e;return(0,r.A)()?(0,o.jsx)(o.Fragment,{children:t?.()}):n??null}},4027:(e,t,n)=>{n.d(t,{$$:()=>Le,$I:()=>oe,AE:()=>Ve,BL:()=>H,DX:()=>F,FT:()=>ct,Fo:()=>et,Hn:()=>it,I5:()=>Ee,JF:()=>Pe,K:()=>le,K$:()=>Je,M0:()=>ze,ML:()=>ne,Mj:()=>ye,Mk:()=>We,Mo:()=>ie,NT:()=>Te,QV:()=>Ue,Ub:()=>Se,Ut:()=>je,W7:()=>U,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>Xe,Zu:()=>ae,_1:()=>Oe,_g:()=>nt,aL:()=>J,aY:()=>Fe,bB:()=>D,d7:()=>B,eG:()=>st,fN:()=>ce,fm:()=>G,gl:()=>L,hN:()=>Y,iD:()=>de,iQ:()=>Ne,jd:()=>se,lW:()=>lt,oD:()=>K,oo:()=>Re,pL:()=>q,qi:()=>ue,rN:()=>Ie,tD:()=>ke,u8:()=>Q,wY:()=>Be,xV:()=>N,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),i=n(3683),s=n(5086),c=n(7197),a=(n(1604),n(5938));function l(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function w(){return typeof window>"u"}function m(){return!w()}function g(e){return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const b=e=>f(void 0,0,void 0,(function*(){return g(yield(yield fetch(e)).text())}));function v(e,t){var n;return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return b(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield p(e,h[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||C(e)&&C(t)&&isNaN(e)&&isNaN(t))return!0;if(k(e)&&k(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function S(e,t){return x(e,t,new WeakMap)}function k(e){return"function"==typeof e}function C(e){return"number"==typeof e}function j(e){return!function(e){return Object(e)!==e}(e)}function E(){}function R(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const O=(...e)=>t=>e.forEach((e=>{if(k(e))e(t);else if(null!=e){e.current=t}}));function z(...e){return(0,o.useCallback)(O(...e),e)}const F=o.forwardRef(((e,t)=>{const{children:n}=e,i=l(e,["children"]),s=o.Children.toArray(n),c=s.find(W);if(c){const e=c.props.children,n=s.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(I,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(I,Object.assign({},i,{ref:t,children:n}))}));F.displayName="Slot";const I=o.forwardRef(((e,t)=>{const{children:n}=e,r=l(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?O(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));I.displayName="SlotClone";const N=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function W(e){return o.isValidElement(e)&&e.type===N}var M="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const L=d(((e,t)=>{var{ratio:n,style:o,as:s="div",asChild:c=!1}=e,a=l(e,["ratio","style","as","asChild"]);const u=c?F:s,d=Object.assign({aspectRatio:n},o),f=c?a.className:i(M,a.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},a))})),P=()=>E,$=()=>!1,T=()=>!0;function D({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(P,$,T)?e:t}function A(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const Y=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>A()?(0,r.jsx)(r.Fragment,{children:t}):e;function V(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function X(e){const t=V(e);(0,o.useEffect)((()=>()=>t()),[t])}function _(e,t=S){const[n,r]=(0,o.useState)(e),i=V(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function B(e,t,n){const r=V(e),i=_(n),c=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return X((()=>c.cancel())),c}const J=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),s=B(((...e)=>{const n=i?.props;if(n&&k(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:s})};function H({onIntersectStart:e=E,onIntersectEnd:t=E,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:s=0,rootMargin:c="0px 0px 0px 0px"}){const a=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=V((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(l.current=!0,a.current+=1,e(n)):l.current&&(l.current=!1,a.current+=1,t(n)),r&&a.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:s,root:i,rootMargin:c}),u.current.observe(e))}),[n,s,i,c,d])}}const K=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:s}=e,c=l(e,["src","threshold","root","rootMargin"]);const{ref:a}=H({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:z(t,a)},c))}));K.displayName="LazyImage";const U=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:s,className:c,style:a,duration:u="0.2s",onLoad:d}=e,f=l(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),w=!h,m=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),g=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:w?0:1,transition:`opacity ${u}`},a)),[w,u,a]),b=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),v=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:m,children:[w&&s,(0,r.jsx)(K,Object.assign({ref:t,width:n,height:i,style:g,onLoad:b},f))]})}));U.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:s="after",rootMargin:c="150px 0px"})=>{const{ref:a}=H({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:a}),t,"after"===s&&(0,r.jsx)("div",{ref:a})]})},q=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1}=e,c=l(e,["children","as","asChild"]);const a=s?F:i,{ref:u}=H(c);if(s&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(a,Object.assign({ref:O(t,u)},c,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return j(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=m()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=V(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(w())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1,onPointerDown:c,excludeRefs:a=[]}=e,u=l(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:a}),f=s?F:i;if(s&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:O(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:s=1,includeLastSeparator:c=!1})=>{const a=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%s==0),[c,s,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),a(t)&&n]})})},se=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function ae(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function le(e=!0){const t=k(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield g(e);return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),a=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:s,readText:c,readContents:a}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},we=e=>pe[e],me=we("localStorage"),ge=e=>window.localStorage.getItem(e),be=e=>JSON.stringify(e),ve=e=>(me.subscribe(e),()=>{me.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=k(n)?n():n,i=(0,o.useSyncExternalStore)(ve,(()=>ge(t)),(()=>be(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=ge(t),o=n?R(n):r,i=k(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),me.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),me.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>m()?window.matchMedia(e).matches:t??!1;function Se(e,t){const[n,r]=(0,o.useState)(xe(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function ke(){return Se("(prefers-color-scheme: dark)")?"dark":"light"}const Ce="color-scheme";function je({defaultValue:e,key:t=Ce,shouldSetBodyClass:n=!1}={}){const r=ke(),i=k(e)?e():e,{state:s,setState:c}=ye({key:t,initialValue:i??r}),a=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),l=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(s),()=>{n&&document.body.classList.remove(s)})),[s,n]),{colorScheme:s,preferredColorScheme:r,setToggleMode:a,setDarkMode:l,setLightMode:u,setPreferredMode:d}}function Ee(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:s}}function Re({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),s=r0,a=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),l=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const s=a(e,t);o&&o({prev:r,next:s}),i(s)}),[n,r,a]),u=(0,o.useCallback)((e=>{l("nextStep",!s,e)}),[s,l]),d=(0,o.useCallback)((e=>{l("prevStep",!c,e)}),[c,l]),f=(0,o.useCallback)(((t,n)=>{const o=k(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:s,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Oe(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=Re({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}function ze(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,B(i,t,n)]}function Fe(e,t={}){const[n,r]=(0,o.useState)(""),[i,s]=ze("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),s(t)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Ie(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onFocus:e=E,onBlur:t=E}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=V((t=>{r(!0),e(t)})),c=V((e=>{r(!1),t(e)})),a=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",s),ne(i,"blur",c),{ref:i,isFocus:n,setFocus:a}}function We({onEnter:e=E,onLeave:t=E}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=V((t=>{r(!0),e(t)})),c=V((e=>{r(!1),t(e)}));return ne(i,"mouseenter",s),ne(i,"mouseleave",c),{ref:i,isHovered:n}}const Me=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function Le(e,t){const n=(0,o.useRef)(),r=V(e),{delay:i,enabled:s}=Me(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>a()}),[a,c,s,i]),{set:c,reset:l,clear:a}}function Pe({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=V((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];k(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const $e={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Te(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)($e),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:a}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=i-t.left,u=s-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:a,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const De=()=>navigator.onLine,Ae=()=>!0,Ye=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function Ve({onlineAction:e=E,offlineAction:t=E}={}){const n=V((n=>Ye(n,e,t)));return(0,o.useSyncExternalStore)(n,De,Ae)}function Xe(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const _e={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function Be(e=E){const[t,n]=(0,o.useState)(_e),r=(0,o.useRef)(null),i=V((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function Je({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const He=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:s="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+He(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+He(window.innerWidth,r.width,c)};const a=e.getBoundingClientRect();return{top:r.top-a.top+e.scrollTop+i+He(a.height,r.height,s),left:r.left-a.left+e.scrollLeft+o+He(a.width,r.width,c)}};function Ue(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:s}=Ke(r,t,n);r.scrollTo({top:s,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=we("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=k(n)?n():n,i=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?R(n):r,i=k(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[s,c]=(0,o.useState)(n),a=(0,o.useCallback)((e=>{c((t=>{const n=k(e)?e(t):e;return r&&i&&function(e,t,n){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=k(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),l=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),c(null)}),[r,i]);return Object.assign({state:s,setState:a,clearState:l},Re(e))}function nt(e,t,n={}){const r=V(e),i=_(n),s=(0,o.useMemo)((()=>(0,c.A)(r,t,i)),[r,t,i]);return X((()=>s.cancel())),s}const rt=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=V(e),{delay:i,enabled:s}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>a()}),[c,a,i,s]),{set:c,reset:l,clear:a}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function st(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new a.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const at={width:null,height:null};function lt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>w()?at:{width:window.innerWidth,height:window.innerHeight})),r=B(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:s,reset:c,clear:a}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||c()}),[r,i,c,...n]),{set:s,reset:c,clear:a}}}}]); \ No newline at end of file diff --git a/assets/js/b506dfd1.75ad62c0.js b/assets/js/b506dfd1.75ad62c0.js deleted file mode 100644 index 41976e351..000000000 --- a/assets/js/b506dfd1.75ad62c0.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[1569],{8190:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>a,contentTitle:()=>l,default:()=>h,frontMatter:()=>c,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"react/hooks/useFocus","title":"useFocus","description":"\ub300\uc0c1 \uc694\uc18c\ub97c \uae30\uc900\uc73c\ub85c \ud3ec\ucee4\uc2a4 \uc0c1\ud0dc\ub97c \ubc18\ud658\ud558\uace0, \ud3ec\ucee4\uc2a4 \uc0c1\ud0dc\uc5d0 \ub530\ub978 \uc561\uc158\uc744 \uc815\uc758\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useFocus.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useFocus","permalink":"/modern-kit/docs/react/hooks/useFocus","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useFileReader","permalink":"/modern-kit/docs/react/hooks/useFileReader"},"next":{"title":"useForceUpdate","permalink":"/modern-kit/docs/react/hooks/useForceUpdate"}}');var o=n(6206),s=n(3267),i=n(4027);const c={},l="useFocus",a={},u=()=>{const e={button:"button",div:"div",input:"input",...(0,s.R)()},{ref:t,isFocus:n,setFocus:r}=(0,i.iQ)({onFocus:()=>console.log("focus"),onBlur:()=>console.log("blur")});return(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.input,{ref:t}),(0,o.jsx)(e.button,{onClick:()=>r(),children:"focus trigger"}),(0,o.jsx)(e.div,{children:n?"Focus":"Blur"})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usefocus",children:"useFocus"})}),"\n",(0,o.jsx)(t.p,{children:"\ub300\uc0c1 \uc694\uc18c\ub97c \uae30\uc900\uc73c\ub85c \ud3ec\ucee4\uc2a4 \uc0c1\ud0dc\ub97c \ubc18\ud658\ud558\uace0, \ud3ec\ucee4\uc2a4 \uc0c1\ud0dc\uc5d0 \ub530\ub978 \uc561\uc158\uc744 \uc815\uc758\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useFocus/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"\ninterface UseFocusProps {\n onFocus?: (event: FocusEvent) => void;\n onBlur?: (event: FocusEvent) => void;\n}\n\ninterface UseFocusReturnType {\n ref: RefObject;\n isFocus: boolean;\n setFocus: () => void;\n}\n\nfunction useFocus({\n onFocus,\n onBlur,\n}: UseFocusProps = {}): UseFocusReturnType\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useFocus } from '@modern-kit/react';\n\nconst Example = () => {\n const { ref, isFocus, setFocus } = useFocus({\n onFocus: () => console.log(\"focus\"),\n onBlur: () => console.log(\"blur\"),\n });\n\n return (\n
\n \n \n
{isFocus ? 'Focus' : 'Blur'}
\n
\n )\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(u,{})]})}function h(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(f,{...e})}):f(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>Pe,$I:()=>oe,AE:()=>De,BL:()=>H,DX:()=>I,FT:()=>ct,Fo:()=>et,Hn:()=>st,I5:()=>je,JF:()=>$e,K:()=>ae,K$:()=>Ue,M0:()=>Oe,ML:()=>ne,Mj:()=>ye,Mk:()=>Ne,Mo:()=>se,NT:()=>Be,QV:()=>Ke,Ub:()=>ke,Ut:()=>Ee,W7:()=>K,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>We,Zu:()=>le,_1:()=>Re,_g:()=>nt,aL:()=>U,aY:()=>Ie,bB:()=>X,d7:()=>z,eG:()=>it,fN:()=>ce,fm:()=>G,gl:()=>P,hN:()=>A,iD:()=>de,iQ:()=>Me,jd:()=>ie,lW:()=>at,oD:()=>J,oo:()=>Fe,pL:()=>q,qi:()=>ue,rN:()=>Le,tD:()=>Se,u8:()=>Q,wY:()=>ze,xV:()=>M,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),s=n(3683),i=n(5086),c=n(7197),l=(n(1604),n(5938));function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function g(){return!m()}function w(e){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const b=e=>f(void 0,0,void 0,(function*(){return w(yield(yield fetch(e)).text())}));function v(e,t){var n;return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return b(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const s=yield p(e,h[t]);n(s)}catch(s){console.error(`Failed to load image. message: ${s.mesaage}`),r(s)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let s=0;s{if(e===t||C(e)&&C(t)&&isNaN(e)&&isNaN(t))return!0;if(S(e)&&S(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function k(e,t){return x(e,t,new WeakMap)}function S(e){return"function"==typeof e}function C(e){return"number"==typeof e}function E(e){return!function(e){return Object(e)!==e}(e)}function j(){}function F(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const R=(...e)=>t=>e.forEach((e=>{if(S(e))e(t);else if(null!=e){e.current=t}}));function O(...e){return(0,o.useCallback)(R(...e),e)}const I=o.forwardRef(((e,t)=>{const{children:n}=e,s=a(e,["children"]),i=o.Children.toArray(n),c=i.find(N);if(c){const e=c.props.children,n=i.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(L,Object.assign({},s,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(L,Object.assign({},s,{ref:t,children:n}))}));I.displayName="Slot";const L=o.forwardRef(((e,t)=>{const{children:n}=e,r=a(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],s=t[r];/^on[A-Z]/.test(r)?o&&s?n[r]=(...e)=>{s(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),s):"className"===r&&(n[r]=[o,s].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?R(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));L.displayName="SlotClone";const M=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function N(e){return o.isValidElement(e)&&e.type===M}var T="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const P=d(((e,t)=>{var{ratio:n,style:o,as:i="div",asChild:c=!1}=e,l=a(e,["ratio","style","as","asChild"]);const u=c?I:i,d=Object.assign({aspectRatio:n},o),f=c?l.className:s(T,l.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},l))})),$=()=>j,Y=()=>!1,B=()=>!0;function X({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)($,Y,B)?e:t}function V(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const A=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>V()?(0,r.jsx)(r.Fragment,{children:t}):e;function D(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function W(e){const t=D(e);(0,o.useEffect)((()=>()=>t()),[t])}function _(e,t=k){const[n,r]=(0,o.useState)(e),s=D(t);return(0,o.useEffect)((()=>{s(n,e)||r(e)}),[s,n,e]),n}function z(e,t,n){const r=D(e),s=_(n),c=(0,o.useMemo)((()=>(0,i.A)(r,t,s)),[r,t,s]);return W((()=>c.cancel())),c}const U=({children:e,capture:t,wait:n,options:r})=>{const s=o.Children.only(e),i=z(((...e)=>{const n=s?.props;if(n&&S(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(s,{[t]:i})};function H({onIntersectStart:e=j,onIntersectEnd:t=j,enabled:n=!0,calledOnce:r=!1,root:s=null,threshold:i=0,rootMargin:c="0px 0px 0px 0px"}){const l=(0,o.useRef)(0),a=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=D((([n],o)=>{if(!n)return;const s=n.target;n.isIntersecting?(a.current=!0,l.current+=1,e(n)):a.current&&(a.current=!1,l.current+=1,t(n)),r&&l.current>1&&o.unobserve(s)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:i,root:s,rootMargin:c}),u.current.observe(e))}),[n,i,s,c,d])}}const J=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:s,rootMargin:i}=e,c=a(e,["src","threshold","root","rootMargin"]);const{ref:l}=H({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:s,rootMargin:i});return(0,r.jsx)("img",Object.assign({ref:O(t,l)},c))}));J.displayName="LazyImage";const K=(0,o.forwardRef)(((e,t)=>{var{width:n,height:s,fallback:i,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=a(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,g=(0,o.useMemo)((()=>({position:"relative",width:n,height:s})),[n,s]),w=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},l)),[m,u,l]),b=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),v=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:g,children:[m&&i,(0,r.jsx)(J,Object.assign({ref:t,width:n,height:s,style:w,onLoad:b},f))]})}));K.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const s=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:s?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:s,triggerPosition:i="after",rootMargin:c="150px 0px"})=>{const{ref:l}=H({onIntersectStart:e,root:n,threshold:o,enabled:s,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===i&&(0,r.jsx)("div",{ref:l}),t,"after"===i&&(0,r.jsx)("div",{ref:l})]})},q=d(((e,t)=>{var{children:n,as:s="div",asChild:i=!1}=e,c=a(e,["children","as","asChild"]);const l=i?I:s,{ref:u}=H(c);if(i&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(l,Object.assign({ref:R(t,u)},c,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const s=(0,o.useCallback)(((e,n)=>function(e){return E(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},s(e,t))))})},ee=g()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=D(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),s=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,s,(({target:t})=>{if(!r.current)return;const o=r.current,s=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!s&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:s="div",asChild:i=!1,onPointerDown:c,excludeRefs:l=[]}=e,u=a(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:l}),f=i?I:s;if(i&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:R(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const se=({itemKey:e,items:t=[],separator:n,renderItem:s,separatorInterval:i=1,includeLastSeparator:c=!1})=>{const l=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%i==0),[c,i,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[s(e,t),l(t)&&n]})})},ie=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function le(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function ae(e=!0){const t=S(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!s.current){s.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{s.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),s=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield w(e);return t(n),!0}catch{return t(null),!1}}))),[]),i=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),l=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:s,copyImage:i,readText:c,readContents:l}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],ge=me("localStorage"),we=e=>window.localStorage.getItem(e),be=e=>JSON.stringify(e),ve=e=>(ge.subscribe(e),()=>{ge.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,s=(0,o.useSyncExternalStore)(ve,(()=>we(t)),(()=>be(r)));return{state:(0,o.useMemo)((()=>s?F(s):r),[s,r]),setState:(0,o.useCallback)((e=>{try{const n=we(t),o=n?F(n):r,s=S(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(s)),ge.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ge.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>g()?window.matchMedia(e).matches:t??!1;function ke(e,t){const[n,r]=(0,o.useState)(xe(e,t)),s=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",s),n}function Se(){return ke("(prefers-color-scheme: dark)")?"dark":"light"}const Ce="color-scheme";function Ee({defaultValue:e,key:t=Ce,shouldSetBodyClass:n=!1}={}){const r=Se(),s=S(e)?e():e,{state:i,setState:c}=ye({key:t,initialValue:s??r}),l=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),a=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(i),()=>{n&&document.body.classList.remove(i)})),[i,n]),{colorScheme:i,preferredColorScheme:r,setToggleMode:l,setDarkMode:a,setLightMode:u,setPreferredMode:d}}function je(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),s=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),i=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:s,reset:i}}function Fe({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,s]=(0,o.useState)(t),i=r0,l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),a=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const i=l(e,t);o&&o({prev:r,next:i}),s(i)}),[n,r,l]),u=(0,o.useCallback)((e=>{a("nextStep",!i,e)}),[i,a]),d=(0,o.useCallback)((e=>{a("prevStep",!c,e)}),[c,a]),f=(0,o.useCallback)(((t,n)=>{const o=S(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void s(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),s(t)}),[r,t]);return{currentStep:r,hasNextStep:i,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Re(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:s,resetStep:i}=Fe({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:s,resetIndex:i}}function Oe(e,t,n={}){const[r,s]=(0,o.useState)(e);return[r,z(s,t,n)]}function Ie(e,t={}){const[n,r]=(0,o.useState)(""),[s,i]=Oe("",e,t);return{value:n,debouncedValue:s,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),i(t)}),[i]),onReset:(0,o.useCallback)((()=>{r(""),i("")}),[i])}}function Le(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Me({onFocus:e=j,onBlur:t=j}={}){const[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(null),i=D((t=>{r(!0),e(t)})),c=D((e=>{r(!1),t(e)})),l=(0,o.useCallback)((()=>{s.current&&(s.current.focus(),r(!0))}),[]);return ne(s,"focus",i),ne(s,"blur",c),{ref:s,isFocus:n,setFocus:l}}function Ne({onEnter:e=j,onLeave:t=j}={}){const[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(null),i=D((t=>{r(!0),e(t)})),c=D((e=>{r(!1),t(e)}));return ne(s,"mouseenter",i),ne(s,"mouseleave",c),{ref:s,isHovered:n}}const Te=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function Pe(e,t){const n=(0,o.useRef)(),r=D(e),{delay:s,enabled:i}=Te(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,s)}),[r,s]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(s<0)&&i)return c(),()=>l()}),[l,c,i,s]),{set:c,reset:a,clear:l}}function $e({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),s=D((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];S(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",s),()=>t.removeEventListener("keydown",s)}),[e,s]),r}const Ye={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Be(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Ye),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:s,clientY:i,pageX:c,pageY:l}=t;let a=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();a=s-t.left,u=i-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:s,clientY:i,pageX:c,pageY:l,elementRelativeX:a,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Xe=()=>navigator.onLine,Ve=()=>!0,Ae=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function De({onlineAction:e=j,offlineAction:t=j}={}){const n=D((n=>Ae(n,e,t)));return(0,o.useSyncExternalStore)(n,Xe,Ve)}function We(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const _e={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function ze(e=j){const[t,n]=(0,o.useState)(_e),r=(0,o.useRef)(null),s=D((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(s);return t.observe(e),()=>{t.unobserve(e)}}),[s]),{ref:r,contentRect:t}}function Ue({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),s=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>s())),[e,r,s]),{ref:t,lock:r,unlock:s}}const He=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Je=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:s=0,alignY:i="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+s+He(window.innerHeight,r.height,i),left:r.left+window.scrollX+o+He(window.innerWidth,r.width,c)};const l=e.getBoundingClientRect();return{top:r.top-l.top+e.scrollTop+s+He(l.height,r.height,i),left:r.left-l.left+e.scrollLeft+o+He(l.width,r.width,c)}};function Ke(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:s,top:i}=Je(r,t,n);r.scrollTo({top:i,left:s,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,s=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>s?F(s):r),[s,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?F(n):r,s=S(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(s)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:s}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[i,c]=(0,o.useState)(n),l=(0,o.useCallback)((e=>{c((t=>{const n=S(e)?e(t):e;return r&&s&&function(e,t,n){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=S(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,s,n),n}))}),[r,s]),a=(0,o.useCallback)((()=>{r&&s&&function(e,t){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,s),c(null)}),[r,s]);return Object.assign({state:i,setState:l,clearState:a},Fe(e))}function nt(e,t,n={}){const r=D(e),s=_(n),i=(0,o.useMemo)((()=>(0,c.A)(r,t,s)),[r,t,s]);return W((()=>i.cancel())),i}const rt=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=D(e),{delay:s,enabled:i}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,s)}),[r,s]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(s<0)&&i)return c(),()=>l()}),[c,l,s,i]),{set:c,reset:a,clear:l}}function st(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function it(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new l.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const lt={width:null,height:null};function at({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?lt:{width:window.innerWidth,height:window.innerHeight})),r=z(n,e),s=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",s),t}function ut(e,t,n){const{delay:r,enabled:s}=rt(t),{set:i,reset:c,clear:l}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!s||c()}),[r,s,c,...n]),{set:i,reset:c,clear:l}}}}]); \ No newline at end of file diff --git a/assets/js/b506dfd1.a3ce067b.js b/assets/js/b506dfd1.a3ce067b.js new file mode 100644 index 000000000..4aedba81f --- /dev/null +++ b/assets/js/b506dfd1.a3ce067b.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[1569],{8722:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>p,assets:()=>f,contentTitle:()=>l,default:()=>g,frontMatter:()=>d,metadata:()=>o,toc:()=>h});const o=JSON.parse('{"id":"react/hooks/useFocus","title":"useFocus","description":"\ub300\uc0c1 \uc694\uc18c\ub97c \uae30\uc900\uc73c\ub85c \ud3ec\ucee4\uc2a4 \uc0c1\ud0dc\ub97c \ubc18\ud658\ud558\uace0, \ud3ec\ucee4\uc2a4 \uc0c1\ud0dc\uc5d0 \ub530\ub978 \uc561\uc158\uc744 \uc815\uc758\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useFocus.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useFocus","permalink":"/modern-kit/docs/react/hooks/useFocus","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useFileReader","permalink":"/modern-kit/docs/react/hooks/useFileReader"},"next":{"title":"useForceUpdate","permalink":"/modern-kit/docs/react/hooks/useForceUpdate"}}');var r=t(6206),i=t(3267),c=t(9340),s=t(4382),u=t(1351),a=t(6765);const d={},l="useFocus",f={},p=()=>{const e={button:"button",div:"div",input:"input",...(0,i.R)()},{ref:n,isFocus:t,setFocus:o}=function({onFocus:e=c.lQ,onBlur:n=c.lQ}={}){const[t,o]=(0,s.useState)(!1),r=(0,s.useRef)(null),i=(0,a.p)((n=>{o(!0),e(n)})),d=(0,a.p)((e=>{o(!1),n(e)})),l=(0,s.useCallback)((()=>{r.current&&(r.current.focus(),o(!0))}),[]);return(0,u.M)(r,"focus",i),(0,u.M)(r,"blur",d),{ref:r,isFocus:t,setFocus:l}}({onFocus:()=>console.log("focus"),onBlur:()=>console.log("blur")});return(0,r.jsxs)(e.div,{children:[(0,r.jsx)(e.input,{ref:n}),(0,r.jsx)(e.button,{onClick:()=>o(),children:"focus trigger"}),(0,r.jsx)(e.div,{children:t?"Focus":"Blur"})]})},h=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function m(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"usefocus",children:"useFocus"})}),"\n",(0,r.jsx)(n.p,{children:"\ub300\uc0c1 \uc694\uc18c\ub97c \uae30\uc900\uc73c\ub85c \ud3ec\ucee4\uc2a4 \uc0c1\ud0dc\ub97c \ubc18\ud658\ud558\uace0, \ud3ec\ucee4\uc2a4 \uc0c1\ud0dc\uc5d0 \ub530\ub978 \uc561\uc158\uc744 \uc815\uc758\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useFocus/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,r.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"\ninterface UseFocusProps {\n onFocus?: (event: FocusEvent) => void;\n onBlur?: (event: FocusEvent) => void;\n}\n\ninterface UseFocusReturnType {\n ref: RefObject;\n isFocus: boolean;\n setFocus: () => void;\n}\n\nfunction useFocus({\n onFocus,\n onBlur,\n}: UseFocusProps = {}): UseFocusReturnType\n"})}),"\n",(0,r.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useFocus } from '@modern-kit/react';\n\nconst Example = () => {\n const { ref, isFocus, setFocus } = useFocus({\n onFocus: () => console.log(\"focus\"),\n onBlur: () => console.log(\"blur\"),\n });\n\n return (\n
\n \n \n
{isFocus ? 'Focus' : 'Blur'}
\n
\n )\n};\n"})}),"\n",(0,r.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,r.jsx)(p,{})]})}function g(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},3267:(e,n,t)=>{t.d(n,{R:()=>c,x:()=>s});var o=t(4382);const r={},i=o.createContext(r);function c(e){const n=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:c(e.components),o.createElement(i.Provider,{value:n},e.children)}},1351:(e,n,t)=>{t.d(n,{M:()=>s});var o=t(6765),r=t(5907),i=t(9340);t(4382);const c=e=>!!e&&(0,i.i5)(e,"current");function s(e,n,t,i){const s=(0,o.p)(t);(0,r.E)((()=>{const t=c(e)?e.current:e;if(t)return t.addEventListener(n,s,i),()=>{t.removeEventListener(n,s,i)}}),[n,e,i,s])}},5907:(e,n,t)=>{t.d(n,{E:()=>i});var o=t(9340),r=t(4382);const i=(0,o.oc)()?r.useLayoutEffect:r.useEffect},6765:(e,n,t)=>{t.d(n,{p:()=>r});var o=t(4382);function r(e){const n=(0,o.useRef)(e);return n.current=e,(0,o.useCallback)(((...e)=>n.current(...e)),[])}},9340:(e,n,t)=>{function o(e,n,t,o){return new(t||(t=Promise))((function(r,i){function c(e){try{u(o.next(e))}catch(n){i(n)}}function s(e){try{u(o.throw(e))}catch(n){i(n)}}function u(e){var n;e.done?r(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(c,s)}u((o=o.apply(e,n||[])).next())}))}t.d(n,{Et:()=>y,Fr:()=>s,Gp:()=>v,Ol:()=>E,Qd:()=>F,S$:()=>c,Tn:()=>w,Zp:()=>f,dK:()=>a,fl:()=>$,gD:()=>b,i5:()=>h,if:()=>p,l6:()=>j,lQ:()=>k,nS:()=>l,ni:()=>S,oc:()=>u}),"function"==typeof SuppressedError&&SuppressedError;const r={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,n)=>new Promise(((t,o)=>{e.toBlob((e=>{e?t(e):o(new Error(`Failed to create blob with format ${n}`))}),n)}));function c(){return"undefined"==typeof window}function s(){if(c())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function u(){return!c()}function a(e){return o(this,void 0,void 0,(function*(){if(!u())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const d=e=>o(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return a(yield n.text())}));function l(e,n){var t;return o(this,void 0,void 0,(function*(){if(!u())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return d(e);if(!("write"in window.navigator.clipboard))return d(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return d(e);const c=yield function(e,n="png"){return new Promise(((t,c)=>{const s=new Image;s.onload=()=>o(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=s.width,e.height=s.height;try{const o=e.getContext("2d");if(!o)throw new Error("Failed to get 2d context");o.drawImage(s,0,0);const c=yield i(e,r[n]);t(c)}catch(o){console.error(`Failed to load image. message: ${o.mesaage}`),c(o)}})),s.onerror=()=>{c(new Error("Failed to load image"))},s.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[c.type]:c})]),c}catch(c){throw console.error(`Failed to copy to clipboard. message: ${c.message}`),c}}))}function f(){return o(this,void 0,void 0,(function*(){if(!u())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(){return o(this,void 0,void 0,(function*(){if(!u())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function h(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const m=(e,n,t)=>{const o=Object.keys(e),r=Object.keys(n);if(o.length!==r.length)return!1;for(let i=0;i{if(e===n)return!0;if(y(e)&&y(n)&&isNaN(e)&&isNaN(n))return!0;if(w(e)&&w(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const o=[...e],r=[...n];return m(o,r,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[o,r]of e)if(!n.has(o)||!g(r,n.get(o),t))return!1;return!0}return m(e,n,t)};function v(e,n){return g(e,n,new WeakMap)}function w(e){return"function"==typeof e}function b(e){return null==e}function y(e){return"number"==typeof e}function x(e){return!function(e){return Object(e)!==e}(e)}function F(e){return x(e)&&"[object Object]"===Object.prototype.toString.call(e)}function j(e){return e===window}function k(){}function E(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function C(e){return Object.keys(e)}const O={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};C(O);function $(e,n){if(!u())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function S(e,n,t){if(!u())throw new Error("Cannot be executed unless it is a client environment.");try{const o=window[e],r=w(t)?t():t;o.setItem(n,JSON.stringify(r))}catch(o){throw new Error(`Failed to store data for key "${n}" in ${e}: ${o}`)}}}}]); \ No newline at end of file diff --git a/assets/js/b743ea75.67047af2.js b/assets/js/b743ea75.67047af2.js new file mode 100644 index 000000000..8e02d696b --- /dev/null +++ b/assets/js/b743ea75.67047af2.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[9571],{3163:(e,n,t)=>{t.r(n),t.d(n,{AsChildExample:()=>j,AsExample:()=>w,DefaultExample:()=>g,assets:()=>x,contentTitle:()=>m,default:()=>b,frontMatter:()=>f,metadata:()=>r,toc:()=>v});const r=JSON.parse('{"id":"react/components/OutsidePointerDownHandler","title":"OutsidePointerDownHandler","description":"@modern-kit/useOutsidePointerDown \ud6c5\uc744 \uc120\uc5b8\uc801\uc73c\ub85c \ud65c\uc6a9 \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","source":"@site/docs/react/components/OutsidePointerDownHandler.mdx","sourceDirName":"react/components","slug":"/react/components/OutsidePointerDownHandler","permalink":"/modern-kit/docs/react/components/OutsidePointerDownHandler","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"Mounted","permalink":"/modern-kit/docs/react/components/Mounted"},"next":{"title":"Portal","permalink":"/modern-kit/docs/react/components/Portal"}}');var o=t(6206),i=t(3267),s=t(4382),c=t(4076),l=t(9115),d=t(2424),a=t(7284),u=t(6807);const h=(0,a.V)(((e,n)=>{var{children:t,as:r="div",asChild:i=!1,onPointerDown:a,excludeRefs:h=[]}=e,p=(0,c._)(e,["children","as","asChild","onPointerDown","excludeRefs"]);const f=(0,l.W)(a,{excludeRefs:h}),m=i?u.D:r;if(i&&!s.isValidElement(t))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,o.jsx)(m,Object.assign({ref:(0,d.P)(f,n)},p,{children:t}))}));var p=t(9010);const f={},m="OutsidePointerDownHandler",x={},g=()=>{const e={div:"div",...(0,i.R)()},n=(0,s.useRef)(null);return(0,o.jsxs)(e.div,{style:{background:"gray"},children:[(0,o.jsx)(h,{style:{width:"500px",backgroundColor:"skyBlue",padding:"20px"},onPointerDown:()=>console.log("DefaultExample Outside Clicked!"),excludeRefs:[n],children:(0,o.jsx)(e.div,{children:"\uc678\ubd80 \uc601\uc5ed \ud074\ub9ad \ud6c4 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694."})}),(0,o.jsx)(e.div,{ref:n,style:{width:"300px",backgroundColor:"#439966",color:"white",padding:"20px"},children:"\uc678\ubd80 \ud074\ub9ad \ubc0f \ud130\uce58 \uac10\uc9c0\ub97c \uc81c\uc678\ud560 \uc694\uc18c\uc758 ref \ubc30\uc5f4\uc785\ub2c8\ub2e4."})]})},w=()=>{const e={li:"li",...(0,i.R)()};return(0,o.jsxs)(h,{as:"ul",placeholder:"\uc678\ubd80 \uc601\uc5ed \ud074\ub9ad \ud6c4 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.",onPointerDown:()=>console.log("As-Example Outside Clicked!"),children:[(0,o.jsx)(e.li,{children:"List Item1"}),(0,o.jsx)(e.li,{children:"List Item2"})]})},j=()=>{const e={input:"input",...(0,i.R)()};return(0,o.jsx)(h,{asChild:!0,onPointerDown:()=>console.log("AsChild-Example Outside Clicked!"),children:(0,o.jsx)(e.input,{type:"text",placeholder:"\uc678\ubd80 \uc601\uc5ed \ud074\ub9ad \ud6c4 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694."})})},v=[{value:"\ub2e4\ud615\uc131(polymorphism)",id:"\ub2e4\ud615\uc131polymorphism",level:3},{value:"\ud569\uc131(Composition), \ub80c\ub354\ub9c1 \uc704\uc784(Rendering Delegation)",id:"\ud569\uc131composition-\ub80c\ub354\ub9c1-\uc704\uc784rendering-delegation",level:3},{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Default",id:"default",level:3},{value:"as",id:"as",level:3},{value:"asChild",id:"aschild",level:3}];function y(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"outsidepointerdownhandler",children:"OutsidePointerDownHandler"})}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/hooks/useOutsidePointerDown",children:"@modern-kit/useOutsidePointerDown"})})," \ud6c5\uc744 \uc120\uc5b8\uc801\uc73c\ub85c \ud65c\uc6a9 \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.p,{children:["\ucef4\ud3ec\ub10c\ud2b8 \uc678\ubd80 \uc601\uc5ed \ud074\ub9ad \ubc0f \ud130\uce58 \uc2dc ",(0,o.jsx)(n.code,{children:"onPointerDown"})," \ud568\uc218\ub97c \uc2e4\ud589\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h3,{id:"\ub2e4\ud615\uc131polymorphism",children:"\ub2e4\ud615\uc131(polymorphism)"}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"OutsidePointerDownHandler"}),"\ucef4\ud3ec\ub10c\ud2b8\ub294 ",(0,o.jsx)(n.code,{children:"\ub2e4\ud615\uc131"}),"\uc744 \uc704\ud574 ",(0,o.jsx)(n.code,{children:"as"})," \uc18d\uc131\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["\uae30\ubcf8\uc801\uc73c\ub85c ",(0,o.jsx)(n.code,{children:"div"})," \ud0dc\uadf8\ub85c \uc790\uc2dd \uc694\uc18c\ub97c \uac10\uc2f8\uc11c \ub80c\ub354\ub9c1\ud558\uba70, ",(0,o.jsx)(n.code,{children:"as"})," \uc18d\uc131\uc744 \ud1b5\ud574 \uac10\uc2f8\ub294 ",(0,o.jsx)(n.code,{children:"Wrapper"})," \uc694\uc18c\uc758 \ud0dc\uadf8\ub97c \ubcc0\uacbd\ud574 \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. (ex. div -> article)"]}),"\n",(0,o.jsxs)(n.li,{children:["\uc774\ub54c, \ud574\ub2f9 ",(0,o.jsx)(n.code,{children:"Wrapper"})," \uc694\uc18c\uc758 \uc678\ubd80 \uc601\uc5ed\uc744 \ud074\ub9ad \ubc0f \ud130\uce58 \uc2dc ",(0,o.jsx)(n.code,{children:"onPointerDown"})," \ucf5c\ubc31 \ud568\uc218\uac00 \ud638\ucd9c\ub429\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsx)(n.h3,{id:"\ud569\uc131composition-\ub80c\ub354\ub9c1-\uc704\uc784rendering-delegation",children:"\ud569\uc131(Composition), \ub80c\ub354\ub9c1 \uc704\uc784(Rendering Delegation)"}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"OutsidePointerDownHandler"})," \ucef4\ud3ec\ub10c\ud2b8\ub294 ",(0,o.jsx)(n.code,{children:"asChild"})," \uc18d\uc131\uc744 \ud1b5\ud574 ",(0,o.jsx)(n.code,{children:"\ud569\uc131(Composition)"}),", ",(0,o.jsx)(n.code,{children:"\ub80c\ub354\ub9c1 \uc704\uc784(Rendering Delegation)"})," \ud328\ud134\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"asChild"})," \uc18d\uc131\uc774 ",(0,o.jsx)(n.code,{children:"true"}),"\ub77c\uba74 ",(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot",children:"Slot"})})," \uc744 \ud1b5\ud574 \ub798\ud37c \uc694\uc18c \uc5c6\uc774 \uc790\uc2dd \uc694\uc18c\ub97c \uadf8\ub300\ub85c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.li,{children:["\uc774\ub54c, \uc790\uc2dd \uc694\uc18c\uc758 \uc678\ubd80 \uc601\uc5ed\uc744 \ud074\ub9ad \ubc0f \ud130\uce58 \uc2dc ",(0,o.jsx)(n.code,{children:"onPointerDown"})," \ucf5c\ubc31 \ud568\uc218\uac00 \ud638\ucd9c\ub429\ub2c8\ub2e4.","\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["Slot\uc758 \uc790\uc2dd\uc740 ",(0,o.jsx)(n.code,{children:"\ub2e8\uc77c \uc694\uc18c"}),"\ub9cc \ud5c8\uc6a9\ub429\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.li,{children:["Slot\uc740 \uc790\uc2dd\uc73c\ub85c \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc62c \uacbd\uc6b0 ",(0,o.jsx)(n.code,{children:"forwardRef"}),", ",(0,o.jsx)(n.code,{children:"props"}),"\ub97c \ud5c8\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4. \ud5c8\uc6a9\ud558\uc9c0 \uc54a\uc73c\uba74 \uc815\uc0c1\uc801\uc73c\ub85c \ub3d9\uc791\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"asChild"})," \uc18d\uc131\uc744 \uc0ac\uc6a9 \ud560 \uacbd\uc6b0 ",(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot",children:"Slot"})})," \ubb38\uc11c\ub97c \ucc38\uace0\ud574\uc8fc\uc138\uc694."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/OutsidePointerDownHandler/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"interface OutsidePointerDownHandlerProps {\n children: ReactNode;\n onPointerDown: (targetElement: HTMLElement) => void;\n excludeRefs?: React.RefObject[];\n asChild?: boolean;\n}\n"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"const OutsidePointerDown: PolyForwardComponent<\n 'div',\n OutsidePointerDownProps,\n React.ElementType\n>;\n"})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.h3,{id:"default",children:"Default"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { OutsidePointerDownHandler } from '@modern-kit/react';\n\nconst DefaultExample = () => {\n const excludeRef = useRef(null);\n const style = {\n // ...\n };\n const excludeStyle = {\n // ...\n };\n return (\n
\n console.log('DefaultExample Outside Clicked!')}\n excludeRefs={[excludeRef]}\n >\n
\uc678\ubd80 \uc601\uc5ed \ud074\ub9ad \ud6c4 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.
\n \n
\uc678\ubd80 \ud074\ub9ad \ubc0f \ud130\uce58 \uac10\uc9c0\ub97c \uc81c\uc678\ud560 \uc694\uc18c\uc758 ref \ubc30\uc5f4\uc785\ub2c8\ub2e4.
\n
\n );\n};\n"})}),"\n","\n",(0,o.jsx)(p.A,{children:()=>(0,o.jsx)(g,{})}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h3,{id:"as",children:"as"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { OutsidePointerDownHandler } from '@modern-kit/react';\n\nconst Example = () => {\n return (\n console.log('As-Example Outside Clicked!')}\n >\n
  • List Item1
    • \n
  • List Item2
    • \n \n );\n};\n"})}),"\n","\n",(0,o.jsx)(p.A,{children:()=>(0,o.jsx)(w,{})}),"\n",(0,o.jsx)(n.h3,{id:"aschild",children:"asChild"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { OutsidePointerDownHandler } from '@modern-kit/react';\n\nconst AsChildExample = () => {\n return (\n console.log('AsChild-Example Outside Clicked!')}\n >\n \n \n );\n};\n"})}),"\n","\n",(0,o.jsx)(p.A,{children:()=>(0,o.jsx)(j,{})})]})}function b(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(y,{...e})}):y(e)}},9010:(e,n,t)=>{t.d(n,{A:()=>i});t(4382);var r=t(3555),o=t(6206);function i(e){let{children:n,fallback:t}=e;return(0,r.A)()?(0,o.jsx)(o.Fragment,{children:n?.()}):t??null}},4076:(e,n,t)=>{function r(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);or,a:()=>o}),"function"==typeof SuppressedError&&SuppressedError},3267:(e,n,t)=>{t.d(n,{R:()=>s,x:()=>c});var r=t(4382);const o={},i=r.createContext(o);function s(e){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),r.createElement(i.Provider,{value:n},e.children)}},6807:(e,n,t)=>{t.d(n,{D:()=>c,x:()=>d});var r=t(4076),o=t(6206),i=t(4382),s=t(2424);const c=i.forwardRef(((e,n)=>{const{children:t}=e,s=(0,r._)(e,["children"]),c=i.Children.toArray(t),d=c.find(a);if(d){const e=d.props.children,t=c.map((n=>n===d?i.Children.count(e)>1?i.Children.only(null):i.isValidElement(e)?e.props.children:null:n));return(0,o.jsx)(l,Object.assign({},s,{ref:n,children:i.isValidElement(e)?i.cloneElement(e,void 0,t):null}))}return(0,o.jsx)(l,Object.assign({},s,{ref:n,children:t}))}));c.displayName="Slot";const l=i.forwardRef(((e,n)=>{const{children:t}=e,o=(0,r._)(e,["children"]);if(i.isValidElement(t)){const e=function(e){var n,t;let r=null===(n=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(t=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(t);return i.cloneElement(t,Object.assign(Object.assign({},function(e,n){const t=Object.assign({},n);for(const r in n){const o=e[r],i=n[r];/^on[A-Z]/.test(r)?o&&i?t[r]=(...e)=>{i(...e),o(...e)}:o&&(t[r]=o):"style"===r?t[r]=Object.assign(Object.assign({},o),i):"className"===r&&(t[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),t)}(o,t.props)),{ref:n?(0,s.P)(n,e):e}))}return i.Children.count(t)>1?i.Children.only(null):null}));l.displayName="SlotClone";const d=({children:e})=>(0,o.jsx)(o.Fragment,{children:e});function a(e){return i.isValidElement(e)&&e.type===d}},1351:(e,n,t)=>{t.d(n,{M:()=>c});var r=t(6765),o=t(5907),i=t(9340);t(4382);const s=e=>!!e&&(0,i.i5)(e,"current");function c(e,n,t,i){const c=(0,r.p)(t);(0,o.E)((()=>{const t=s(e)?e.current:e;if(t)return t.addEventListener(n,c,i),()=>{t.removeEventListener(n,c,i)}}),[n,e,i,c])}},5907:(e,n,t)=>{t.d(n,{E:()=>i});var r=t(9340),o=t(4382);const i=(0,r.oc)()?o.useLayoutEffect:o.useEffect},9115:(e,n,t)=>{t.d(n,{W:()=>s});var r=t(4382),o=t(9340),i=t(1351);function s(e,n){const{excludeRefs:t}=null!=n?n:{},s=(0,r.useRef)(null),c=(0,r.useMemo)((()=>(0,o.Fr)()?"touchstart":"mousedown"),[]);return(0,i.M)(document,c,(({target:n})=>{if(!s.current)return;const r=s.current,o=null==t?void 0:t.some((e=>{var t;return null===(t=e.current)||void 0===t?void 0:t.contains(n)}));!r.contains(n)&&!o&&e(r)})),s}},6765:(e,n,t)=>{t.d(n,{p:()=>o});var r=t(4382);function o(e){const n=(0,r.useRef)(e);return n.current=e,(0,r.useCallback)(((...e)=>n.current(...e)),[])}},2424:(e,n,t)=>{t.d(n,{P:()=>o});var r=t(9340);const o=(...e)=>n=>e.forEach((e=>{if((0,r.Tn)(e))e(n);else if(null!=e){e.current=n}}))},7284:(e,n,t)=>{t.d(n,{V:()=>r});const r=t(4382).forwardRef},9340:(e,n,t)=>{function r(e,n,t,r){return new(t||(t=Promise))((function(o,i){function s(e){try{l(r.next(e))}catch(n){i(n)}}function c(e){try{l(r.throw(e))}catch(n){i(n)}}function l(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(s,c)}l((r=r.apply(e,n||[])).next())}))}t.d(n,{Et:()=>v,Fr:()=>c,Gp:()=>g,Ol:()=>D,Qd:()=>b,S$:()=>s,Tn:()=>w,Zp:()=>h,dK:()=>d,fl:()=>k,gD:()=>j,i5:()=>f,if:()=>p,l6:()=>O,lQ:()=>P,nS:()=>u,ni:()=>R,oc:()=>l}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,n)=>new Promise(((t,r)=>{e.toBlob((e=>{e?t(e):r(new Error(`Failed to create blob with format ${n}`))}),n)}));function s(){return"undefined"==typeof window}function c(){if(s())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function l(){return!s()}function d(e){return r(this,void 0,void 0,(function*(){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const a=e=>r(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return d(yield n.text())}));function u(e,n){var t;return r(this,void 0,void 0,(function*(){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return a(e);if(!("write"in window.navigator.clipboard))return a(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return a(e);const s=yield function(e,n="png"){return new Promise(((t,s)=>{const c=new Image;c.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=c.width,e.height=c.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(c,0,0);const s=yield i(e,o[n]);t(s)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),s(r)}})),c.onerror=()=>{s(new Error("Failed to load image"))},c.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[s.type]:s})]),s}catch(s){throw console.error(`Failed to copy to clipboard. message: ${s.message}`),s}}))}function h(){return r(this,void 0,void 0,(function*(){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(){return r(this,void 0,void 0,(function*(){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function f(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const m=(e,n,t)=>{const r=Object.keys(e),o=Object.keys(n);if(r.length!==o.length)return!1;for(let i=0;i{if(e===n)return!0;if(v(e)&&v(n)&&isNaN(e)&&isNaN(n))return!0;if(w(e)&&w(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const r=[...e],o=[...n];return m(r,o,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[r,o]of e)if(!n.has(r)||!x(o,n.get(r),t))return!1;return!0}return m(e,n,t)};function g(e,n){return x(e,n,new WeakMap)}function w(e){return"function"==typeof e}function j(e){return null==e}function v(e){return"number"==typeof e}function y(e){return!function(e){return Object(e)!==e}(e)}function b(e){return y(e)&&"[object Object]"===Object.prototype.toString.call(e)}function O(e){return e===window}function P(){}function D(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function E(e){return Object.keys(e)}const C={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};E(C);function k(e,n){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function R(e,n,t){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=w(t)?t():t;r.setItem(n,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${n}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/b743ea75.ef78621a.js b/assets/js/b743ea75.ef78621a.js deleted file mode 100644 index 77135a89a..000000000 --- a/assets/js/b743ea75.ef78621a.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[9571],{9635:(e,n,t)=>{t.r(n),t.d(n,{AsChildExample:()=>p,AsExample:()=>h,DefaultExample:()=>f,assets:()=>d,contentTitle:()=>u,default:()=>w,frontMatter:()=>a,metadata:()=>r,toc:()=>m});const r=JSON.parse('{"id":"react/components/OutsidePointerDownHandler","title":"OutsidePointerDownHandler","description":"@modern-kit/useOutsidePointerDown \ud6c5\uc744 \uc120\uc5b8\uc801\uc73c\ub85c \ud65c\uc6a9 \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","source":"@site/docs/react/components/OutsidePointerDownHandler.mdx","sourceDirName":"react/components","slug":"/react/components/OutsidePointerDownHandler","permalink":"/modern-kit/docs/react/components/OutsidePointerDownHandler","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"Mounted","permalink":"/modern-kit/docs/react/components/Mounted"},"next":{"title":"Portal","permalink":"/modern-kit/docs/react/components/Portal"}}');var o=t(6206),i=t(3267),s=t(4382),l=t(4027),c=t(9010);const a={},u="OutsidePointerDownHandler",d={},f=()=>{const e={div:"div",...(0,i.R)()},n=(0,s.useRef)(null);return(0,o.jsxs)(e.div,{style:{background:"gray"},children:[(0,o.jsx)(l.$I,{style:{width:"500px",backgroundColor:"skyBlue",padding:"20px"},onPointerDown:()=>console.log("DefaultExample Outside Clicked!"),excludeRefs:[n],children:(0,o.jsx)(e.div,{children:"\uc678\ubd80 \uc601\uc5ed \ud074\ub9ad \ud6c4 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694."})}),(0,o.jsx)(e.div,{ref:n,style:{width:"300px",backgroundColor:"#439966",color:"white",padding:"20px"},children:"\uc678\ubd80 \ud074\ub9ad \ubc0f \ud130\uce58 \uac10\uc9c0\ub97c \uc81c\uc678\ud560 \uc694\uc18c\uc758 ref \ubc30\uc5f4\uc785\ub2c8\ub2e4."})]})},h=()=>{const e={li:"li",...(0,i.R)()};return(0,o.jsxs)(l.$I,{as:"ul",placeholder:"\uc678\ubd80 \uc601\uc5ed \ud074\ub9ad \ud6c4 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.",onPointerDown:()=>console.log("As-Example Outside Clicked!"),children:[(0,o.jsx)(e.li,{children:"List Item1"}),(0,o.jsx)(e.li,{children:"List Item2"})]})},p=()=>{const e={input:"input",...(0,i.R)()};return(0,o.jsx)(l.$I,{asChild:!0,onPointerDown:()=>console.log("AsChild-Example Outside Clicked!"),children:(0,o.jsx)(e.input,{type:"text",placeholder:"\uc678\ubd80 \uc601\uc5ed \ud074\ub9ad \ud6c4 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694."})})},m=[{value:"\ub2e4\ud615\uc131(polymorphism)",id:"\ub2e4\ud615\uc131polymorphism",level:3},{value:"\ud569\uc131(Composition), \ub80c\ub354\ub9c1 \uc704\uc784(Rendering Delegation)",id:"\ud569\uc131composition-\ub80c\ub354\ub9c1-\uc704\uc784rendering-delegation",level:3},{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Default",id:"default",level:3},{value:"as",id:"as",level:3},{value:"asChild",id:"aschild",level:3}];function g(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"outsidepointerdownhandler",children:"OutsidePointerDownHandler"})}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/hooks/useOutsidePointerDown",children:"@modern-kit/useOutsidePointerDown"})})," \ud6c5\uc744 \uc120\uc5b8\uc801\uc73c\ub85c \ud65c\uc6a9 \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.p,{children:["\ucef4\ud3ec\ub10c\ud2b8 \uc678\ubd80 \uc601\uc5ed \ud074\ub9ad \ubc0f \ud130\uce58 \uc2dc ",(0,o.jsx)(n.code,{children:"onPointerDown"})," \ud568\uc218\ub97c \uc2e4\ud589\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h3,{id:"\ub2e4\ud615\uc131polymorphism",children:"\ub2e4\ud615\uc131(polymorphism)"}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"OutsidePointerDownHandler"}),"\ucef4\ud3ec\ub10c\ud2b8\ub294 ",(0,o.jsx)(n.code,{children:"\ub2e4\ud615\uc131"}),"\uc744 \uc704\ud574 ",(0,o.jsx)(n.code,{children:"as"})," \uc18d\uc131\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["\uae30\ubcf8\uc801\uc73c\ub85c ",(0,o.jsx)(n.code,{children:"div"})," \ud0dc\uadf8\ub85c \uc790\uc2dd \uc694\uc18c\ub97c \uac10\uc2f8\uc11c \ub80c\ub354\ub9c1\ud558\uba70, ",(0,o.jsx)(n.code,{children:"as"})," \uc18d\uc131\uc744 \ud1b5\ud574 \uac10\uc2f8\ub294 ",(0,o.jsx)(n.code,{children:"Wrapper"})," \uc694\uc18c\uc758 \ud0dc\uadf8\ub97c \ubcc0\uacbd\ud574 \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. (ex. div -> article)"]}),"\n",(0,o.jsxs)(n.li,{children:["\uc774\ub54c, \ud574\ub2f9 ",(0,o.jsx)(n.code,{children:"Wrapper"})," \uc694\uc18c\uc758 \uc678\ubd80 \uc601\uc5ed\uc744 \ud074\ub9ad \ubc0f \ud130\uce58 \uc2dc ",(0,o.jsx)(n.code,{children:"onPointerDown"})," \ucf5c\ubc31 \ud568\uc218\uac00 \ud638\ucd9c\ub429\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsx)(n.h3,{id:"\ud569\uc131composition-\ub80c\ub354\ub9c1-\uc704\uc784rendering-delegation",children:"\ud569\uc131(Composition), \ub80c\ub354\ub9c1 \uc704\uc784(Rendering Delegation)"}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"OutsidePointerDownHandler"})," \ucef4\ud3ec\ub10c\ud2b8\ub294 ",(0,o.jsx)(n.code,{children:"asChild"})," \uc18d\uc131\uc744 \ud1b5\ud574 ",(0,o.jsx)(n.code,{children:"\ud569\uc131(Composition)"}),", ",(0,o.jsx)(n.code,{children:"\ub80c\ub354\ub9c1 \uc704\uc784(Rendering Delegation)"})," \ud328\ud134\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"asChild"})," \uc18d\uc131\uc774 ",(0,o.jsx)(n.code,{children:"true"}),"\ub77c\uba74 ",(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot",children:"Slot"})})," \uc744 \ud1b5\ud574 \ub798\ud37c \uc694\uc18c \uc5c6\uc774 \uc790\uc2dd \uc694\uc18c\ub97c \uadf8\ub300\ub85c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.li,{children:["\uc774\ub54c, \uc790\uc2dd \uc694\uc18c\uc758 \uc678\ubd80 \uc601\uc5ed\uc744 \ud074\ub9ad \ubc0f \ud130\uce58 \uc2dc ",(0,o.jsx)(n.code,{children:"onPointerDown"})," \ucf5c\ubc31 \ud568\uc218\uac00 \ud638\ucd9c\ub429\ub2c8\ub2e4.","\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["Slot\uc758 \uc790\uc2dd\uc740 ",(0,o.jsx)(n.code,{children:"\ub2e8\uc77c \uc694\uc18c"}),"\ub9cc \ud5c8\uc6a9\ub429\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.li,{children:["Slot\uc740 \uc790\uc2dd\uc73c\ub85c \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc62c \uacbd\uc6b0 ",(0,o.jsx)(n.code,{children:"forwardRef"}),", ",(0,o.jsx)(n.code,{children:"props"}),"\ub97c \ud5c8\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4. \ud5c8\uc6a9\ud558\uc9c0 \uc54a\uc73c\uba74 \uc815\uc0c1\uc801\uc73c\ub85c \ub3d9\uc791\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"asChild"})," \uc18d\uc131\uc744 \uc0ac\uc6a9 \ud560 \uacbd\uc6b0 ",(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot",children:"Slot"})})," \ubb38\uc11c\ub97c \ucc38\uace0\ud574\uc8fc\uc138\uc694."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/OutsidePointerDownHandler/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"interface OutsidePointerDownHandlerProps {\n children: ReactNode;\n onPointerDown: (targetElement: HTMLElement) => void;\n excludeRefs?: React.RefObject[];\n asChild?: boolean;\n}\n"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"const OutsidePointerDown: PolyForwardComponent<\n 'div',\n OutsidePointerDownProps,\n React.ElementType\n>;\n"})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.h3,{id:"default",children:"Default"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { OutsidePointerDownHandler } from '@modern-kit/react';\n\nconst DefaultExample = () => {\n const excludeRef = useRef(null);\n const style = {\n // ...\n };\n const excludeStyle = {\n // ...\n };\n return (\n
    \n console.log('DefaultExample Outside Clicked!')}\n excludeRefs={[excludeRef]}\n >\n
    \uc678\ubd80 \uc601\uc5ed \ud074\ub9ad \ud6c4 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.
    \n \n
    \uc678\ubd80 \ud074\ub9ad \ubc0f \ud130\uce58 \uac10\uc9c0\ub97c \uc81c\uc678\ud560 \uc694\uc18c\uc758 ref \ubc30\uc5f4\uc785\ub2c8\ub2e4.
    \n
    \n );\n};\n"})}),"\n","\n",(0,o.jsx)(c.A,{children:()=>(0,o.jsx)(f,{})}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h3,{id:"as",children:"as"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { OutsidePointerDownHandler } from '@modern-kit/react';\n\nconst Example = () => {\n return (\n console.log('As-Example Outside Clicked!')}\n >\n
  • List Item1
    • \n
  • List Item2
    • \n \n );\n};\n"})}),"\n","\n",(0,o.jsx)(c.A,{children:()=>(0,o.jsx)(h,{})}),"\n",(0,o.jsx)(n.h3,{id:"aschild",children:"asChild"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { OutsidePointerDownHandler } from '@modern-kit/react';\n\nconst AsChildExample = () => {\n return (\n console.log('AsChild-Example Outside Clicked!')}\n >\n \n \n );\n};\n"})}),"\n","\n",(0,o.jsx)(c.A,{children:()=>(0,o.jsx)(p,{})})]})}function w(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(g,{...e})}):g(e)}},9010:(e,n,t)=>{t.d(n,{A:()=>i});t(4382);var r=t(3555),o=t(6206);function i(e){let{children:n,fallback:t}=e;return(0,r.A)()?(0,o.jsx)(o.Fragment,{children:n?.()}):t??null}},4027:(e,n,t)=>{t.d(n,{$$:()=>Me,$I:()=>oe,AE:()=>Ve,BL:()=>J,DX:()=>D,FT:()=>cn,Fo:()=>en,Hn:()=>sn,I5:()=>Ee,JF:()=>$e,K:()=>ae,K$:()=>ze,M0:()=>Pe,ML:()=>te,Mj:()=>be,Mk:()=>Ne,Mo:()=>ie,NT:()=>Te,QV:()=>Ue,Ub:()=>je,Ut:()=>Se,W7:()=>U,WY:()=>re,Y1:()=>dn,Z3:()=>on,ZC:()=>We,Zu:()=>ce,_1:()=>Re,_g:()=>tn,aL:()=>z,aY:()=>De,bB:()=>A,d7:()=>_,eG:()=>ln,fN:()=>le,fm:()=>G,gl:()=>M,hN:()=>X,iD:()=>de,iQ:()=>Le,jd:()=>se,lW:()=>un,oD:()=>K,oo:()=>Oe,pL:()=>q,qi:()=>ue,rN:()=>Ie,tD:()=>ke,u8:()=>Q,wY:()=>_e,xV:()=>L,xh:()=>nn,zy:()=>Z});var r=t(6206),o=t(4382),i=t(3683),s=t(5086),l=t(7197),c=(t(1604),t(5938));function a(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((t,r)=>{e.toBlob((e=>{e?t(e):r(new Error(`Failed to create blob with format ${n}`))}),n)}));function m(){return typeof window>"u"}function g(){return!m()}function w(e){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const x=e=>f(void 0,0,void 0,(function*(){return w(yield(yield fetch(e)).text())}));function v(e,n){var t;return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(t=n?.toText)&&void 0!==t&&t)return x(e);const r=yield function(e,n="png"){return new Promise(((t,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield p(e,h[n]);t(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const b=(e,n,t)=>{const r=Object.keys(e),o=Object.keys(n);if(r.length!==o.length)return!1;for(let i=0;i{if(e===n||C(e)&&C(n)&&isNaN(e)&&isNaN(n))return!0;if(k(e)&&k(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const r=[...e],o=[...n];return b(r,o,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[r,o]of e)if(!n.has(r)||!y(o,n.get(r),t))return!1;return!0}return b(e,n,t)};function j(e,n){return y(e,n,new WeakMap)}function k(e){return"function"==typeof e}function C(e){return"number"==typeof e}function S(e){return!function(e){return Object(e)!==e}(e)}function E(){}function O(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}const R=(...e)=>n=>e.forEach((e=>{if(k(e))e(n);else if(null!=e){e.current=n}}));function P(...e){return(0,o.useCallback)(R(...e),e)}const D=o.forwardRef(((e,n)=>{const{children:t}=e,i=a(e,["children"]),s=o.Children.toArray(t),l=s.find(N);if(l){const e=l.props.children,t=s.map((n=>n===l?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:n));return(0,r.jsx)(I,Object.assign({},i,{ref:n,children:o.isValidElement(e)?o.cloneElement(e,void 0,t):null}))}return(0,r.jsx)(I,Object.assign({},i,{ref:n,children:t}))}));D.displayName="Slot";const I=o.forwardRef(((e,n)=>{const{children:t}=e,r=a(e,["children"]);if(o.isValidElement(t)){const e=function(e){var n,t;let r=null===(n=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(t=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(t);return o.cloneElement(t,Object.assign(Object.assign({},function(e,n){const t=Object.assign({},n);for(const r in n){const o=e[r],i=n[r];/^on[A-Z]/.test(r)?o&&i?t[r]=(...e)=>{i(...e),o(...e)}:o&&(t[r]=o):"style"===r?t[r]=Object.assign(Object.assign({},o),i):"className"===r&&(t[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),t)}(r,t.props)),{ref:n?R(n,e):e}))}return o.Children.count(t)>1?o.Children.only(null):null}));I.displayName="SlotClone";const L=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function N(e){return o.isValidElement(e)&&e.type===L}var F="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const M=d(((e,n)=>{var{ratio:t,style:o,as:s="div",asChild:l=!1}=e,c=a(e,["ratio","style","as","asChild"]);const u=l?D:s,d=Object.assign({aspectRatio:t},o),f=l?c.className:i(F,c.className);return(0,r.jsx)(u,Object.assign({ref:n,style:d,className:f},c))})),$=()=>E,H=()=>!1,T=()=>!0;function A({fallback:e=(0,r.jsx)(r.Fragment,{}),children:n}){return(0,o.useSyncExternalStore)($,H,T)?e:n}function Y(){const[e,n]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{n(!0)}),[]),e}const X=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:n})=>Y()?(0,r.jsx)(r.Fragment,{children:n}):e;function V(e){const n=(0,o.useRef)(e);return n.current=e,(0,o.useCallback)(((...e)=>n.current(...e)),[])}function W(e){const n=V(e);(0,o.useEffect)((()=>()=>n()),[n])}function B(e,n=j){const[t,r]=(0,o.useState)(e),i=V(n);return(0,o.useEffect)((()=>{i(t,e)||r(e)}),[i,t,e]),t}function _(e,n,t){const r=V(e),i=B(t),l=(0,o.useMemo)((()=>(0,s.A)(r,n,i)),[r,n,i]);return W((()=>l.cancel())),l}const z=({children:e,capture:n,wait:t,options:r})=>{const i=o.Children.only(e),s=_(((...e)=>{const t=i?.props;if(t&&k(t[n]))return t[n](...e)}),t,r);return(0,o.cloneElement)(i,{[n]:s})};function J({onIntersectStart:e=E,onIntersectEnd:n=E,enabled:t=!0,calledOnce:r=!1,root:i=null,threshold:s=0,rootMargin:l="0px 0px 0px 0px"}){const c=(0,o.useRef)(0),a=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=V((([t],o)=>{if(!t)return;const i=t.target;t.isIntersecting?(a.current=!0,c.current+=1,e(t)):a.current&&(a.current=!1,c.current+=1,n(t)),r&&c.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&t&&(u.current=new IntersectionObserver(d,{threshold:s,root:i,rootMargin:l}),u.current.observe(e))}),[t,s,i,l,d])}}const K=(0,o.forwardRef)(((e,n)=>{var{src:t,threshold:o,root:i,rootMargin:s}=e,l=a(e,["src","threshold","root","rootMargin"]);const{ref:c}=J({onIntersectStart:e=>{e.target.src=t},calledOnce:!0,threshold:o,root:i,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:P(n,c)},l))}));K.displayName="LazyImage";const U=(0,o.forwardRef)(((e,n)=>{var{width:t,height:i,fallback:s,className:l,style:c,duration:u="0.2s",onLoad:d}=e,f=a(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,g=(0,o.useMemo)((()=>({position:"relative",width:t,height:i})),[t,i]),w=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},c)),[m,u,c]),x=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),v=l?`lazy-image-wrapper ${l}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:g,children:[m&&s,(0,r.jsx)(K,Object.assign({ref:n,width:t,height:i,style:w,onLoad:x},f))]})}));U.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:n,falseComponent:t})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?n:t})},Q=({onScrollAction:e,children:n,root:t,threshold:o,enabled:i,triggerPosition:s="after",rootMargin:l="150px 0px"})=>{const{ref:c}=J({onIntersectStart:e,root:t,threshold:o,enabled:i,rootMargin:l});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:c}),n,"after"===s&&(0,r.jsx)("div",{ref:c})]})},q=d(((e,n)=>{var{children:t,as:i="div",asChild:s=!1}=e,l=a(e,["children","as","asChild"]);const c=s?D:i,{ref:u}=J(l);if(s&&!o.isValidElement(t))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(c,Object.assign({ref:R(n,u)},l,{children:t}))})),G=({items:e=[],itemKey:n,renderItem:t})=>{const i=(0,o.useCallback)(((e,t)=>function(e){return S(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[n]||t:`${t}_${e}`),[n]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,n)=>(0,r.jsx)(o.Fragment,{children:t(e,n)},i(e,n))))})},ee=g()?o.useLayoutEffect:o.useEffect,ne=e=>!!e&&function(e,n){return Object.prototype.hasOwnProperty.call(e,n)}(e,"current");function te(e,n,t,r){const o=V(t);ee((()=>{const t=ne(e)?e.current:e;if(t)return t.addEventListener(n,o,r),()=>{t.removeEventListener(n,o,r)}}),[n,e,r,o])}function re(e,n){const{excludeRefs:t}=n??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return te(document,i,(({target:n})=>{if(!r.current)return;const o=r.current,i=t?.some((e=>{var t;return null===(t=e.current)||void 0===t?void 0:t.contains(n)}));!o.contains(n)&&!i&&e(o)})),r}const oe=d(((e,n)=>{var{children:t,as:i="div",asChild:s=!1,onPointerDown:l,excludeRefs:c=[]}=e,u=a(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(l,{excludeRefs:c}),f=s?D:i;if(s&&!o.isValidElement(t))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:R(d,n)},u,{children:t}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:n=[],separator:t,renderItem:i,separatorInterval:s=1,includeLastSeparator:l=!1})=>{const c=(0,o.useCallback)((e=>e===n.length-1?l:(e+1)%s==0),[l,s,n.length]);return(0,r.jsx)(G,{items:n,itemKey:e,renderItem:(e,n)=>(0,r.jsxs)(r.Fragment,{children:[i(e,n),c(n)&&t]})})},se=({children:e,condition:n,fallback:t=null})=>(e=>"function"==typeof e?e():e)(n)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:t}),le=({caseBy:e,value:n,defaultComponent:t=null})=>{var o;return function(e){return null==e}(n)?(0,r.jsx)(r.Fragment,{children:t}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[n])&&void 0!==o?o:t})};function ce(e,n){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),n)}function ae(e=!0){const n=k(e)?e():e;(0,o.useEffect)((()=>{if(!n)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[n])}function ue(){const[e,n]=(0,o.useState)(!1),[t,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:t,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,n(!0),r(!1);try{return yield e()}catch(t){throw r(!0),t}finally{i.current=!1,n(!1)}}}))),[])}}function de(){const[e,n]=(0,o.useState)(null),[t,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const t=yield w(e);return n(t),!0}catch{return n(null),!1}}))),[]),s=(0,o.useCallback)(((e,t)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=t?.toText)&&void 0!==r&&r;try{const t=yield v(e,{toText:o});return n(t),!0}catch{return n(null),!1}}))),[]),l=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const n=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(n),!0}catch{return r(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const n=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(n),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:t,copyText:i,copyImage:s,readText:l,readContents:c}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],ge=me("localStorage"),we=e=>window.localStorage.getItem(e),xe=e=>JSON.stringify(e),ve=e=>(ge.subscribe(e),()=>{ge.unsubscribe(e)});function be(e){const{key:n}=e,t="initialValue"in e?e.initialValue:null,r=k(t)?t():t,i=(0,o.useSyncExternalStore)(ve,(()=>we(n)),(()=>xe(r)));return{state:(0,o.useMemo)((()=>i?O(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const t=we(n),o=t?O(t):r,i=k(e)?e(o):e;window.localStorage.setItem(n,JSON.stringify(i)),ge.dispatchEvent()}catch(t){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${n}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${t}`)}}),[n,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(n),ge.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${n}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[n])}}const ye=(e,n)=>g()?window.matchMedia(e).matches:n??!1;function je(e,n){const[t,r]=(0,o.useState)(ye(e,n)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return te(window.matchMedia(e),"change",i),t}function ke(){return je("(prefers-color-scheme: dark)")?"dark":"light"}const Ce="color-scheme";function Se({defaultValue:e,key:n=Ce,shouldSetBodyClass:t=!1}={}){const r=ke(),i=k(e)?e():e,{state:s,setState:l}=be({key:n,initialValue:i??r}),c=(0,o.useCallback)((()=>{l((e=>"dark"===e?"light":"dark"))}),[l]),a=(0,o.useCallback)((()=>{l("dark")}),[l]),u=(0,o.useCallback)((()=>{l("light")}),[l]),d=(0,o.useCallback)((()=>{l(r)}),[l,r]);return(0,o.useEffect)((()=>(t&&document.body.classList.add(s),()=>{t&&document.body.classList.remove(s)})),[s,t]),{colorScheme:s,preferredColorScheme:r,setToggleMode:c,setDarkMode:a,setLightMode:u,setPreferredMode:d}}function Ee(e=0){const[n,t]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{t((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{t((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{t(e)}),[e]);return{counter:n,setCounter:t,increment:r,decrement:i,reset:s}}function Oe({maxStep:e,initialStep:n=0,infinite:t=!1}){const[r,i]=(0,o.useState)(n),s=r0,c=(0,o.useCallback)(((n,t)=>{const o="nextStep"===n;return t?o?0:e:o?r+1:r-1}),[e,r]),a=(0,o.useCallback)(((e,n,o)=>{if(n&&!t)return;const s=c(e,n);o&&o({prev:r,next:s}),i(s)}),[t,r,c]),u=(0,o.useCallback)((e=>{a("nextStep",!s,e)}),[s,a]),d=(0,o.useCallback)((e=>{a("prevStep",!l,e)}),[l,a]),f=(0,o.useCallback)(((n,t)=>{const o=k(n)?n(r):n;if(o>=0&&o<=e)return t&&t({prev:r,next:o}),void i(n);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:n}),i(n)}),[r,n]);return{currentStep:r,hasNextStep:s,hasPrevStep:l,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Re(e,n=0){const{currentStep:t,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=Oe({maxStep:e.length-1,initialStep:n,infinite:!0});return{currentItem:e[t],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}function Pe(e,n,t={}){const[r,i]=(0,o.useState)(e);return[r,_(i,n,t)]}function De(e,n={}){const[t,r]=(0,o.useState)(""),[i,s]=Pe("",e,n);return{value:t,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:n}=e.target;r(n),s(n)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Ie(e,{preserveTitleOnUnmount:n=!1}={}){ee((()=>{const t=document.title;return document.title=e,()=>{n||(document.title=t)}}),[e,n])}function Le({onFocus:e=E,onBlur:n=E}={}){const[t,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=V((n=>{r(!0),e(n)})),l=V((e=>{r(!1),n(e)})),c=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return te(i,"focus",s),te(i,"blur",l),{ref:i,isFocus:t,setFocus:c}}function Ne({onEnter:e=E,onLeave:n=E}={}){const[t,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=V((n=>{r(!0),e(n)})),l=V((e=>{r(!1),n(e)}));return te(i,"mouseenter",s),te(i,"mouseleave",l),{ref:i,isHovered:t}}const Fe=e=>{var n;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(n=e?.enabled)||void 0===n||n}};function Me(e,n){const t=(0,o.useRef)(),r=V(e),{delay:i,enabled:s}=Fe(n),l=(0,o.useCallback)((()=>{t.current=window.setInterval(r,i)}),[r,i]),c=(0,o.useCallback)((()=>{t.current&&(clearInterval(t.current),t.current=null)}),[]),a=(0,o.useCallback)((()=>{c(),l()}),[c,l]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return l(),()=>c()}),[c,l,s,i]),{set:l,reset:a,clear:c}}function $e({enabled:e=!0,keyDownCallbackMap:n={},allKeyDownCallback:t}){const r=(0,o.useRef)(null),i=V((e=>{if(e.stopPropagation(),t)return void t(e);const r=e.key,o=n[r];k(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const n=r.current;return n.addEventListener("keydown",i),()=>n.removeEventListener("keydown",i)}),[e,i]),r}const He={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Te(){const e=(0,o.useRef)(null),[n,t]=(0,o.useState)(He),r=(0,o.useCallback)((n=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:l,pageY:c}=n;let a=null,u=null,d=null,f=null;if(e.current){const n=e.current.getBoundingClientRect();a=i-n.left,u=s-n.top,d=n.left+window.scrollX,f=n.top+window.scrollY}t({screenX:r,screenY:o,clientX:i,clientY:s,pageX:l,pageY:c,elementRelativeX:a,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return te(document,"mousemove",r),{ref:e,position:n}}const Ae=()=>navigator.onLine,Ye=()=>!0,Xe=(e,n,t)=>{const r=t=>(n(t),e()),o=n=>(t(n),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function Ve({onlineAction:e=E,offlineAction:n=E}={}){const t=V((t=>Xe(t,e,n)));return(0,o.useSyncExternalStore)(t,Ae,Ye)}function We(e){const n=(0,o.useRef)(e);return(0,o.useEffect)((()=>{n.current=e}),[e]),n.current}const Be={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function _e(e=E){const[n,t]=(0,o.useState)(Be),r=(0,o.useRef)(null),i=V((([n])=>{n&&(e(n),t(n.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,n=new ResizeObserver(i);return n.observe(e),()=>{n.unobserve(e)}}),[i]),{ref:r,contentRect:n}}function ze({autoLock:e=!0}={}){const n=(0,o.useRef)(null),t=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=n.current;t.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!t.current)return;n.current.style.overflow=t.current}),[]);return ee((()=>(n.current||(n.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:n,lock:r,unlock:i}}const Je=(e,n,t)=>"start"===t?0:"center"===t?-e/2+n/2:-e+n,Ke=(e,n,t)=>{const r=n.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:s="start",alignX:l="start"}=t;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+Je(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+Je(window.innerWidth,r.width,l)};const c=e.getBoundingClientRect();return{top:r.top-c.top+e.scrollTop+i+Je(c.height,r.height,s),left:r.left-c.left+e.scrollLeft+o+Je(c.width,r.width,l)}};function Ue(){const e=(0,o.useRef)(null),n=(0,o.useCallback)(((n={})=>{if(!e.current)return;const{left:t=0,top:r=0,behavior:o="auto"}=n;e.current.scrollTo({left:t,top:r,behavior:o})}),[]),t=(0,o.useCallback)(((n,t={})=>{if(!n||!e.current)return;const r=e.current,{behavior:o="auto"}=t,{left:i,top:s}=Ke(r,n,t);r.scrollTo({top:s,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:n,scrollToElement:t}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function en(e){const{key:n}=e,t="initialValue"in e?e.initialValue:null,r=k(t)?t():t,i=(0,o.useSyncExternalStore)(Ge,(()=>Qe(n)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>i?O(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const t=Qe(n),o=t?O(t):r,i=k(e)?e(o):e;window.sessionStorage.setItem(n,JSON.stringify(i)),Ze.dispatchEvent()}catch(t){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${n}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${t}`)}}),[n,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(n),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${n}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[n])}}function nn(e){var n;const t="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(n=e?.storageOptions)&&void 0!==n?n:{},[s,l]=(0,o.useState)(t),c=(0,o.useCallback)((e=>{l((n=>{const t=k(e)?e(n):e;return r&&i&&function(e,n,t){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=k(t)?t():t;r.setItem(n,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${n}" in ${e}: ${r}`)}}(r,i,t),t}))}),[r,i]),a=(0,o.useCallback)((()=>{r&&i&&function(e,n){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}(r,i),l(null)}),[r,i]);return Object.assign({state:s,setState:c,clearState:a},Oe(e))}function tn(e,n,t={}){const r=V(e),i=B(t),s=(0,o.useMemo)((()=>(0,l.A)(r,n,i)),[r,n,i]);return W((()=>s.cancel())),s}const rn=e=>{var n;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(n=e?.enabled)||void 0===n||n}};function on(e,n){const t=(0,o.useRef)(),r=V(e),{delay:i,enabled:s}=rn(n),l=(0,o.useCallback)((()=>{t.current=setTimeout(r,i)}),[r,i]),c=(0,o.useCallback)((()=>{t.current&&(clearTimeout(t.current),t.current=null)}),[]),a=(0,o.useCallback)((()=>{c(),l()}),[c,l]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return l(),()=>c()}),[l,c,i,s]),{set:l,reset:a,clear:c}}function sn(e,n){const[t,r]=(0,o.useState)(e);return[t,(0,o.useCallback)((()=>{r((t=>t===e?n:e))}),[e,n])]}function ln(){const[e,n]=(0,o.useState)(null);return ee((()=>{const e=new c.UAParser(window.navigator.userAgent);n(e.getResult())}),[]),e}function cn({name:e="vh",enabledResize:n=!1}={}){ee((()=>{const t=()=>{const n=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${n}px`)};return t(),n&&window.addEventListener("resize",t),()=>{n&&window.removeEventListener("resize",t)}}),[e,n])}const an={width:null,height:null};function un({debounceWait:e}={}){const[n,t]=(0,o.useState)((()=>m()?an:{width:window.innerWidth,height:window.innerHeight})),r=_(t,e),i=(0,o.useCallback)((()=>{(e?r:t)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return te(window,"resize",i),n}function dn(e,n,t){const{delay:r,enabled:i}=rn(n),{set:s,reset:l,clear:c}=on(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||l()}),[r,i,l,...t]),{set:s,reset:l,clear:c}}}}]); \ No newline at end of file diff --git a/assets/js/b862475b.723acd2d.js b/assets/js/b862475b.723acd2d.js new file mode 100644 index 000000000..7013e34ac --- /dev/null +++ b/assets/js/b862475b.723acd2d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[1075],{5399:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>h,assets:()=>p,contentTitle:()=>u,default:()=>x,frontMatter:()=>d,metadata:()=>o,toc:()=>f});const o=JSON.parse('{"id":"react/hooks/useClipboard","title":"useClipboard","description":"\ud074\ub9bd\ubcf4\ub4dc\uc640 \uc0c1\ud638\uc791\uc6a9\ud558\ub294 \ud568\uc218\ub4e4\uacfc \uc800\uc7a5\ub41c \ub370\uc774\ud130\ub97c \ud3ec\ud568\ud55c \uac1d\uccb4\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useClipboard.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useClipboard","permalink":"/modern-kit/docs/react/hooks/useClipboard","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useBlockMultipleAsyncCalls","permalink":"/modern-kit/docs/react/hooks/useBlockMultipleAsyncCalls"},"next":{"title":"useColorScheme","permalink":"/modern-kit/docs/react/hooks/useColorScheme"}}');var r=t(6206),i=t(3267),c=t(4076),s=t(4382),a=t(9340);const l=t.p+"assets/images/react-ae427fdb9d33efc24fa0dec698c3dfab.png",d={},u="useClipboard",p={},h=()=>{const e={br:"br",button:"button",div:"div",img:"img",input:"input",...(0,i.R)()},{copiedData:n,readData:t,copyText:o,copyImage:d,readContents:u,readText:p}=function(){const[e,n]=(0,s.useState)(null),[t,o]=(0,s.useState)(null);return{copiedData:e,readData:t,copyText:(0,s.useCallback)((e=>(0,c.a)(this,void 0,void 0,(function*(){try{const t=yield(0,a.dK)(e);return n(t),!0}catch(t){return n(null),!1}}))),[]),copyImage:(0,s.useCallback)(((e,t)=>(0,c.a)(this,void 0,void 0,(function*(){var o;const r=null!==(o=null==t?void 0:t.toText)&&void 0!==o&&o;try{const t=yield(0,a.nS)(e,{toText:r});return n(t),!0}catch(i){return n(null),!1}}))),[]),readText:(0,s.useCallback)((()=>(0,c.a)(this,void 0,void 0,(function*(){try{const e=yield(0,a.if)();return o(e),!0}catch(e){return o(null),!1}}))),[]),readContents:(0,s.useCallback)((()=>(0,c.a)(this,void 0,void 0,(function*(){try{const e=yield(0,a.Zp)();return o(e),!0}catch(e){return o(null),!1}}))),[])}}(),[h,f]=(0,s.useState)("");return(0,s.useEffect)((()=>{console.log("copiedData: ",n),console.log("readData: ",t)}),[n,t]),(0,r.jsxs)(e.div,{children:[(0,r.jsxs)(e.div,{children:[(0,r.jsx)(e.input,{type:"text",value:h,onChange:e=>f(e.target.value)}),(0,r.jsx)(e.button,{onClick:async()=>{const e=await o(h);alert(`isSuccess: ${e}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ub410\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`)},children:"\ud14d\uc2a4\ud2b8 \ud074\ub9bd\ubcf4\ub4dc \ubcf5\uc0ac"})]}),(0,r.jsx)(e.br,{}),(0,r.jsxs)(e.div,{children:[(0,r.jsx)(e.img,{src:l,alt:"\uc774\ubbf8\uc9c0",width:120,height:120}),(0,r.jsx)(e.button,{onClick:async()=>{const e=await d(l);alert(`isSuccess: ${e}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ub410\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`)},children:"\uc774\ubbf8\uc9c0 \ud074\ub9bd\ubcf4\ub4dc \ubcf5\uc0ac"})]}),(0,r.jsx)(e.br,{}),(0,r.jsxs)(e.div,{children:[(0,r.jsx)(e.button,{onClick:async()=>{const e=await p(h);alert(`isSuccess: ${e}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ub370\uc774\ud130\ub97c \uac00\uc838\uc654\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`)},children:"\ud074\ub9bd\ubcf4\ub4dc \ud14d\uc2a4\ud2b8 \uc77d\uae30"}),(0,r.jsx)(e.button,{onClick:async()=>{const e=await u(l);alert(`isSuccess: ${e}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ub370\uc774\ud130\ub97c \uac00\uc838\uc654\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`)},children:"\ud074\ub9bd\ubcf4\ub4dc \ucee8\ud150\uce20 \uc77d\uae30"})]})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function m(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"useclipboard",children:"useClipboard"})}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"\ud074\ub9bd\ubcf4\ub4dc"}),"\uc640 \uc0c1\ud638\uc791\uc6a9\ud558\ub294 \ud568\uc218\ub4e4\uacfc \uc800\uc7a5\ub41c \ub370\uc774\ud130\ub97c \ud3ec\ud568\ud55c \uac1d\uccb4\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(n.p,{children:["\ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ub41c \ub370\uc774\ud130\ub294 ",(0,r.jsx)(n.code,{children:"copiedData"})," \uc0c1\ud0dc\uc5d0 \uc800\uc7a5\ub429\ub2c8\ub2e4. ",(0,r.jsx)(n.code,{children:"copyText"}),"\uc640 ",(0,r.jsx)(n.code,{children:"copyImage"}),"\ub294 ",(0,r.jsx)(n.code,{children:"\uc131\uacf5 \uc5ec\ubd80(Boolean)"}),"\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"copyText"}),"\ub294 \uc8fc\uc5b4\uc9c4 \ud14d\uc2a4\ud2b8\ub97c \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"copyImage"}),"\ub294 \uc8fc\uc5b4\uc9c4 \uc774\ubbf8\uc9c0 URL\uc744 \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["\ud074\ub9bd\ubcf4\ub4dc\uc5d0\uc11c \uc77d\uc5b4\uc628 \ub370\uc774\ud130\ub294 ",(0,r.jsx)(n.code,{children:"readData"})," \uc0c1\ud0dc\uc5d0 \uc800\uc7a5\ub429\ub2c8\ub2e4. ",(0,r.jsx)(n.code,{children:"readText"}),"\uc640 ",(0,r.jsx)(n.code,{children:"readContents"}),"\ub294 ",(0,r.jsx)(n.code,{children:"\uc131\uacf5 \uc5ec\ubd80(Boolean)"}),"\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"readText"}),"\ub294 \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \uc800\uc7a5\ub41c \ud14d\uc2a4\ud2b8 \ub370\uc774\ud130\ub97c \uc77d\uc5b4\uc624\ub294 \ud568\uc218\uc785\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"readContents"}),"\ub294 \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \uc800\uc7a5\ub41c \ud14d\uc2a4\ud2b8\ub97c \ud3ec\ud568\ud55c html, \uc774\ubbf8\uc9c0 \ub4f1 \ub2e4\uc591\ud55c \uc720\ud615\uc758 \ucee8\ud150\uce20\ub97c \uc77d\uc5b4\uc624\ub294 \ud568\uc218\uc785\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useClipboard/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,r.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"function useClipboard(): {\n copiedData: string | Blob | null;\n readData: string | ClipboardItems | null;\n readText: () => Promise;\n readContents: () => Promise;\n copyText: (value: string) => Promise;\n copyImage: (src: string, options?: { toText: boolean }) => Promise;\n};\n"})}),"\n",(0,r.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:'import { useClipboard } from \'@modern-kit/react\';\nimport img from \'../../assets/img.png\';\n\nconst Example = () => {\n const { copiedData, readData, copyText, copyImage, readContents, readText } = useClipboard();\n const [text, setText] = useState(\'\');\n\n const handleCopyText = async () => {\n const isSuccess = await copyText(text);\n alert(`isSuccess: ${isSuccess}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ub410\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`);\n };\n\n const handleCopyImage = async () => {\n const isSuccess = await copyImage(img);\n alert(`isSuccess: ${isSuccess}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ub410\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`);\n };\n\n const handleReadText = async () => {\n const isSuccess = await readText(text);\n alert(`isSuccess: ${isSuccess}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ub370\uc774\ud130\ub97c \uac00\uc838\uc654\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`);\n };\n\n const handleReadContents = async () => {\n const isSuccess = await readContents(img);\n alert(`isSuccess: ${isSuccess}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ub370\uc774\ud130\ub97c \uac00\uc838\uc654\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`);\n };\n\n useEffect(() => {\n console.log("copiedData: ", copiedData);\n console.log("readData: ", readData);\n }, [copiedData, readData])\n\n return (\n
    \n
    \n setText(e.target.value)}\n />\n \n
    \n
    \n
    \n \uc774\ubbf8\uc9c0\n \n
    \n
    \n
    \n \n \n
    \n
    \n );\n};\n'})}),"\n",(0,r.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,r.jsx)(h,{})]})}function x(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},4076:(e,n,t)=>{function o(e,n){var t={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&n.indexOf(o)<0&&(t[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);ro,a:()=>r}),"function"==typeof SuppressedError&&SuppressedError},3267:(e,n,t)=>{t.d(n,{R:()=>c,x:()=>s});var o=t(4382);const r={},i=o.createContext(r);function c(e){const n=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:c(e.components),o.createElement(i.Provider,{value:n},e.children)}},9340:(e,n,t)=>{function o(e,n,t,o){return new(t||(t=Promise))((function(r,i){function c(e){try{a(o.next(e))}catch(n){i(n)}}function s(e){try{a(o.throw(e))}catch(n){i(n)}}function a(e){var n;e.done?r(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(c,s)}a((o=o.apply(e,n||[])).next())}))}t.d(n,{Et:()=>v,Fr:()=>s,Gp:()=>g,Ol:()=>S,Qd:()=>j,S$:()=>c,Tn:()=>y,Zp:()=>p,dK:()=>l,fl:()=>O,gD:()=>b,i5:()=>f,if:()=>h,l6:()=>C,lQ:()=>k,nS:()=>u,ni:()=>$,oc:()=>a}),"function"==typeof SuppressedError&&SuppressedError;const r={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,n)=>new Promise(((t,o)=>{e.toBlob((e=>{e?t(e):o(new Error(`Failed to create blob with format ${n}`))}),n)}));function c(){return"undefined"==typeof window}function s(){if(c())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function a(){return!c()}function l(e){return o(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const d=e=>o(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return l(yield n.text())}));function u(e,n){var t;return o(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return d(e);if(!("write"in window.navigator.clipboard))return d(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return d(e);const c=yield function(e,n="png"){return new Promise(((t,c)=>{const s=new Image;s.onload=()=>o(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=s.width,e.height=s.height;try{const o=e.getContext("2d");if(!o)throw new Error("Failed to get 2d context");o.drawImage(s,0,0);const c=yield i(e,r[n]);t(c)}catch(o){console.error(`Failed to load image. message: ${o.mesaage}`),c(o)}})),s.onerror=()=>{c(new Error("Failed to load image"))},s.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[c.type]:c})]),c}catch(c){throw console.error(`Failed to copy to clipboard. message: ${c.message}`),c}}))}function p(){return o(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function h(){return o(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function f(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const m=(e,n,t)=>{const o=Object.keys(e),r=Object.keys(n);if(o.length!==r.length)return!1;for(let i=0;i{if(e===n)return!0;if(v(e)&&v(n)&&isNaN(e)&&isNaN(n))return!0;if(y(e)&&y(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const o=[...e],r=[...n];return m(o,r,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[o,r]of e)if(!n.has(o)||!x(r,n.get(o),t))return!1;return!0}return m(e,n,t)};function g(e,n){return x(e,n,new WeakMap)}function y(e){return"function"==typeof e}function b(e){return null==e}function v(e){return"number"==typeof e}function w(e){return!function(e){return Object(e)!==e}(e)}function j(e){return w(e)&&"[object Object]"===Object.prototype.toString.call(e)}function C(e){return e===window}function k(){}function S(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function E(e){return Object.keys(e)}const T={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};E(T);function O(e,n){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function $(e,n,t){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{const o=window[e],r=y(t)?t():t;o.setItem(n,JSON.stringify(r))}catch(o){throw new Error(`Failed to store data for key "${n}" in ${e}: ${o}`)}}}}]); \ No newline at end of file diff --git a/assets/js/b862475b.bee34558.js b/assets/js/b862475b.bee34558.js deleted file mode 100644 index eda240498..000000000 --- a/assets/js/b862475b.bee34558.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[1075],{7911:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>f,assets:()=>d,contentTitle:()=>u,default:()=>m,frontMatter:()=>l,metadata:()=>r,toc:()=>h});const r=JSON.parse('{"id":"react/hooks/useClipboard","title":"useClipboard","description":"\ud074\ub9bd\ubcf4\ub4dc\uc640 \uc0c1\ud638\uc791\uc6a9\ud558\ub294 \ud568\uc218\ub4e4\uacfc \uc800\uc7a5\ub41c \ub370\uc774\ud130\ub97c \ud3ec\ud568\ud55c \uac1d\uccb4\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useClipboard.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useClipboard","permalink":"/modern-kit/docs/react/hooks/useClipboard","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useBlockMultipleAsyncCalls","permalink":"/modern-kit/docs/react/hooks/useBlockMultipleAsyncCalls"},"next":{"title":"useColorScheme","permalink":"/modern-kit/docs/react/hooks/useColorScheme"}}');var o=n(6206),s=n(3267),i=n(4027),c=n(4382);const a=n.p+"assets/images/react-ae427fdb9d33efc24fa0dec698c3dfab.png",l={},u="useClipboard",d={},f=()=>{const e={br:"br",button:"button",div:"div",img:"img",input:"input",...(0,s.R)()},{copiedData:t,readData:n,copyText:r,copyImage:l,readContents:u,readText:d}=(0,i.iD)(),[f,h]=(0,c.useState)("");return(0,c.useEffect)((()=>{console.log("copiedData: ",t),console.log("readData: ",n)}),[t,n]),(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.input,{type:"text",value:f,onChange:e=>h(e.target.value)}),(0,o.jsx)(e.button,{onClick:async()=>{const e=await r(f);alert(`isSuccess: ${e}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ub410\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`)},children:"\ud14d\uc2a4\ud2b8 \ud074\ub9bd\ubcf4\ub4dc \ubcf5\uc0ac"})]}),(0,o.jsx)(e.br,{}),(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.img,{src:a,alt:"\uc774\ubbf8\uc9c0",width:120,height:120}),(0,o.jsx)(e.button,{onClick:async()=>{const e=await l(a);alert(`isSuccess: ${e}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ub410\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`)},children:"\uc774\ubbf8\uc9c0 \ud074\ub9bd\ubcf4\ub4dc \ubcf5\uc0ac"})]}),(0,o.jsx)(e.br,{}),(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.button,{onClick:async()=>{const e=await d(f);alert(`isSuccess: ${e}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ub370\uc774\ud130\ub97c \uac00\uc838\uc654\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`)},children:"\ud074\ub9bd\ubcf4\ub4dc \ud14d\uc2a4\ud2b8 \uc77d\uae30"}),(0,o.jsx)(e.button,{onClick:async()=>{const e=await u(a);alert(`isSuccess: ${e}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ub370\uc774\ud130\ub97c \uac00\uc838\uc654\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`)},children:"\ud074\ub9bd\ubcf4\ub4dc \ucee8\ud150\uce20 \uc77d\uae30"})]})]})},h=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function p(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"useclipboard",children:"useClipboard"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"\ud074\ub9bd\ubcf4\ub4dc"}),"\uc640 \uc0c1\ud638\uc791\uc6a9\ud558\ub294 \ud568\uc218\ub4e4\uacfc \uc800\uc7a5\ub41c \ub370\uc774\ud130\ub97c \ud3ec\ud568\ud55c \uac1d\uccb4\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:["\ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ub41c \ub370\uc774\ud130\ub294 ",(0,o.jsx)(t.code,{children:"copiedData"})," \uc0c1\ud0dc\uc5d0 \uc800\uc7a5\ub429\ub2c8\ub2e4. ",(0,o.jsx)(t.code,{children:"copyText"}),"\uc640 ",(0,o.jsx)(t.code,{children:"copyImage"}),"\ub294 ",(0,o.jsx)(t.code,{children:"\uc131\uacf5 \uc5ec\ubd80(Boolean)"}),"\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"copyText"}),"\ub294 \uc8fc\uc5b4\uc9c4 \ud14d\uc2a4\ud2b8\ub97c \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"copyImage"}),"\ub294 \uc8fc\uc5b4\uc9c4 \uc774\ubbf8\uc9c0 URL\uc744 \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsxs)(t.p,{children:["\ud074\ub9bd\ubcf4\ub4dc\uc5d0\uc11c \uc77d\uc5b4\uc628 \ub370\uc774\ud130\ub294 ",(0,o.jsx)(t.code,{children:"readData"})," \uc0c1\ud0dc\uc5d0 \uc800\uc7a5\ub429\ub2c8\ub2e4. ",(0,o.jsx)(t.code,{children:"readText"}),"\uc640 ",(0,o.jsx)(t.code,{children:"readContents"}),"\ub294 ",(0,o.jsx)(t.code,{children:"\uc131\uacf5 \uc5ec\ubd80(Boolean)"}),"\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"readText"}),"\ub294 \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \uc800\uc7a5\ub41c \ud14d\uc2a4\ud2b8 \ub370\uc774\ud130\ub97c \uc77d\uc5b4\uc624\ub294 \ud568\uc218\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"readContents"}),"\ub294 \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \uc800\uc7a5\ub41c \ud14d\uc2a4\ud2b8\ub97c \ud3ec\ud568\ud55c html, \uc774\ubbf8\uc9c0 \ub4f1 \ub2e4\uc591\ud55c \uc720\ud615\uc758 \ucee8\ud150\uce20\ub97c \uc77d\uc5b4\uc624\ub294 \ud568\uc218\uc785\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useClipboard/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useClipboard(): {\n copiedData: string | Blob | null;\n readData: string | ClipboardItems | null;\n readText: () => Promise;\n readContents: () => Promise;\n copyText: (value: string) => Promise;\n copyImage: (src: string, options?: { toText: boolean }) => Promise;\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:'import { useClipboard } from \'@modern-kit/react\';\nimport img from \'../../assets/img.png\';\n\nconst Example = () => {\n const { copiedData, readData, copyText, copyImage, readContents, readText } = useClipboard();\n const [text, setText] = useState(\'\');\n\n const handleCopyText = async () => {\n const isSuccess = await copyText(text);\n alert(`isSuccess: ${isSuccess}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ub410\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`);\n };\n\n const handleCopyImage = async () => {\n const isSuccess = await copyImage(img);\n alert(`isSuccess: ${isSuccess}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ub410\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`);\n };\n\n const handleReadText = async () => {\n const isSuccess = await readText(text);\n alert(`isSuccess: ${isSuccess}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ub370\uc774\ud130\ub97c \uac00\uc838\uc654\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`);\n };\n\n const handleReadContents = async () => {\n const isSuccess = await readContents(img);\n alert(`isSuccess: ${isSuccess}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ub370\uc774\ud130\ub97c \uac00\uc838\uc654\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`);\n };\n\n useEffect(() => {\n console.log("copiedData: ", copiedData);\n console.log("readData: ", readData);\n }, [copiedData, readData])\n\n return (\n
    \n
    \n setText(e.target.value)}\n />\n \n
    \n
    \n
    \n \uc774\ubbf8\uc9c0\n \n
    \n
    \n
    \n \n \n
    \n
    \n );\n};\n'})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(f,{})]})}function m(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>Me,$I:()=>oe,AE:()=>Ve,BL:()=>H,DX:()=>T,FT:()=>ct,Fo:()=>et,Hn:()=>st,I5:()=>Ee,JF:()=>Pe,K:()=>le,K$:()=>Je,M0:()=>Ie,ML:()=>ne,Mj:()=>ye,Mk:()=>Le,Mo:()=>se,NT:()=>Ye,QV:()=>Ke,Ub:()=>Ce,Ut:()=>je,W7:()=>K,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>We,Zu:()=>ae,_1:()=>Oe,_g:()=>nt,aL:()=>J,aY:()=>Te,bB:()=>B,d7:()=>z,eG:()=>it,fN:()=>ce,fm:()=>G,gl:()=>M,hN:()=>X,iD:()=>de,iQ:()=>Fe,jd:()=>ie,lW:()=>lt,oD:()=>U,oo:()=>Re,pL:()=>q,qi:()=>ue,rN:()=>$e,tD:()=>ke,u8:()=>Q,wY:()=>ze,xV:()=>F,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),s=n(3683),i=n(5086),c=n(7197),a=(n(1604),n(5938));function l(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function g(){return!m()}function b(e){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const w=e=>f(void 0,0,void 0,(function*(){return b(yield(yield fetch(e)).text())}));function v(e,t){var n;return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return w(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const s=yield p(e,h[t]);n(s)}catch(s){console.error(`Failed to load image. message: ${s.mesaage}`),r(s)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let s=0;s{if(e===t||S(e)&&S(t)&&isNaN(e)&&isNaN(t))return!0;if(k(e)&&k(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function C(e,t){return x(e,t,new WeakMap)}function k(e){return"function"==typeof e}function S(e){return"number"==typeof e}function j(e){return!function(e){return Object(e)!==e}(e)}function E(){}function R(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const O=(...e)=>t=>e.forEach((e=>{if(k(e))e(t);else if(null!=e){e.current=t}}));function I(...e){return(0,o.useCallback)(O(...e),e)}const T=o.forwardRef(((e,t)=>{const{children:n}=e,s=l(e,["children"]),i=o.Children.toArray(n),c=i.find(L);if(c){const e=c.props.children,n=i.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)($,Object.assign({},s,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)($,Object.assign({},s,{ref:t,children:n}))}));T.displayName="Slot";const $=o.forwardRef(((e,t)=>{const{children:n}=e,r=l(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],s=t[r];/^on[A-Z]/.test(r)?o&&s?n[r]=(...e)=>{s(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),s):"className"===r&&(n[r]=[o,s].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?O(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));$.displayName="SlotClone";const F=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function L(e){return o.isValidElement(e)&&e.type===F}var N="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const M=d(((e,t)=>{var{ratio:n,style:o,as:i="div",asChild:c=!1}=e,a=l(e,["ratio","style","as","asChild"]);const u=c?T:i,d=Object.assign({aspectRatio:n},o),f=c?a.className:s(N,a.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},a))})),P=()=>E,D=()=>!1,Y=()=>!0;function B({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(P,D,Y)?e:t}function A(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const X=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>A()?(0,r.jsx)(r.Fragment,{children:t}):e;function V(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function W(e){const t=V(e);(0,o.useEffect)((()=>()=>t()),[t])}function _(e,t=C){const[n,r]=(0,o.useState)(e),s=V(t);return(0,o.useEffect)((()=>{s(n,e)||r(e)}),[s,n,e]),n}function z(e,t,n){const r=V(e),s=_(n),c=(0,o.useMemo)((()=>(0,i.A)(r,t,s)),[r,t,s]);return W((()=>c.cancel())),c}const J=({children:e,capture:t,wait:n,options:r})=>{const s=o.Children.only(e),i=z(((...e)=>{const n=s?.props;if(n&&k(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(s,{[t]:i})};function H({onIntersectStart:e=E,onIntersectEnd:t=E,enabled:n=!0,calledOnce:r=!1,root:s=null,threshold:i=0,rootMargin:c="0px 0px 0px 0px"}){const a=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=V((([n],o)=>{if(!n)return;const s=n.target;n.isIntersecting?(l.current=!0,a.current+=1,e(n)):l.current&&(l.current=!1,a.current+=1,t(n)),r&&a.current>1&&o.unobserve(s)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:i,root:s,rootMargin:c}),u.current.observe(e))}),[n,i,s,c,d])}}const U=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:s,rootMargin:i}=e,c=l(e,["src","threshold","root","rootMargin"]);const{ref:a}=H({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:s,rootMargin:i});return(0,r.jsx)("img",Object.assign({ref:I(t,a)},c))}));U.displayName="LazyImage";const K=(0,o.forwardRef)(((e,t)=>{var{width:n,height:s,fallback:i,className:c,style:a,duration:u="0.2s",onLoad:d}=e,f=l(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,g=(0,o.useMemo)((()=>({position:"relative",width:n,height:s})),[n,s]),b=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},a)),[m,u,a]),w=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),v=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:g,children:[m&&i,(0,r.jsx)(U,Object.assign({ref:t,width:n,height:s,style:b,onLoad:w},f))]})}));K.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const s=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:s?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:s,triggerPosition:i="after",rootMargin:c="150px 0px"})=>{const{ref:a}=H({onIntersectStart:e,root:n,threshold:o,enabled:s,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===i&&(0,r.jsx)("div",{ref:a}),t,"after"===i&&(0,r.jsx)("div",{ref:a})]})},q=d(((e,t)=>{var{children:n,as:s="div",asChild:i=!1}=e,c=l(e,["children","as","asChild"]);const a=i?T:s,{ref:u}=H(c);if(i&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(a,Object.assign({ref:O(t,u)},c,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const s=(0,o.useCallback)(((e,n)=>function(e){return j(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},s(e,t))))})},ee=g()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=V(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),s=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,s,(({target:t})=>{if(!r.current)return;const o=r.current,s=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!s&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:s="div",asChild:i=!1,onPointerDown:c,excludeRefs:a=[]}=e,u=l(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:a}),f=i?T:s;if(i&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:O(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const se=({itemKey:e,items:t=[],separator:n,renderItem:s,separatorInterval:i=1,includeLastSeparator:c=!1})=>{const a=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%i==0),[c,i,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[s(e,t),a(t)&&n]})})},ie=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function ae(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function le(e=!0){const t=k(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!s.current){s.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{s.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),s=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield b(e);return t(n),!0}catch{return t(null),!1}}))),[]),i=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),a=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:s,copyImage:i,readText:c,readContents:a}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],ge=me("localStorage"),be=e=>window.localStorage.getItem(e),we=e=>JSON.stringify(e),ve=e=>(ge.subscribe(e),()=>{ge.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=k(n)?n():n,s=(0,o.useSyncExternalStore)(ve,(()=>be(t)),(()=>we(r)));return{state:(0,o.useMemo)((()=>s?R(s):r),[s,r]),setState:(0,o.useCallback)((e=>{try{const n=be(t),o=n?R(n):r,s=k(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(s)),ge.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ge.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>g()?window.matchMedia(e).matches:t??!1;function Ce(e,t){const[n,r]=(0,o.useState)(xe(e,t)),s=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",s),n}function ke(){return Ce("(prefers-color-scheme: dark)")?"dark":"light"}const Se="color-scheme";function je({defaultValue:e,key:t=Se,shouldSetBodyClass:n=!1}={}){const r=ke(),s=k(e)?e():e,{state:i,setState:c}=ye({key:t,initialValue:s??r}),a=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),l=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(i),()=>{n&&document.body.classList.remove(i)})),[i,n]),{colorScheme:i,preferredColorScheme:r,setToggleMode:a,setDarkMode:l,setLightMode:u,setPreferredMode:d}}function Ee(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),s=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),i=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:s,reset:i}}function Re({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,s]=(0,o.useState)(t),i=r0,a=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),l=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const i=a(e,t);o&&o({prev:r,next:i}),s(i)}),[n,r,a]),u=(0,o.useCallback)((e=>{l("nextStep",!i,e)}),[i,l]),d=(0,o.useCallback)((e=>{l("prevStep",!c,e)}),[c,l]),f=(0,o.useCallback)(((t,n)=>{const o=k(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void s(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),s(t)}),[r,t]);return{currentStep:r,hasNextStep:i,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Oe(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:s,resetStep:i}=Re({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:s,resetIndex:i}}function Ie(e,t,n={}){const[r,s]=(0,o.useState)(e);return[r,z(s,t,n)]}function Te(e,t={}){const[n,r]=(0,o.useState)(""),[s,i]=Ie("",e,t);return{value:n,debouncedValue:s,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),i(t)}),[i]),onReset:(0,o.useCallback)((()=>{r(""),i("")}),[i])}}function $e(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Fe({onFocus:e=E,onBlur:t=E}={}){const[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(null),i=V((t=>{r(!0),e(t)})),c=V((e=>{r(!1),t(e)})),a=(0,o.useCallback)((()=>{s.current&&(s.current.focus(),r(!0))}),[]);return ne(s,"focus",i),ne(s,"blur",c),{ref:s,isFocus:n,setFocus:a}}function Le({onEnter:e=E,onLeave:t=E}={}){const[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(null),i=V((t=>{r(!0),e(t)})),c=V((e=>{r(!1),t(e)}));return ne(s,"mouseenter",i),ne(s,"mouseleave",c),{ref:s,isHovered:n}}const Ne=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function Me(e,t){const n=(0,o.useRef)(),r=V(e),{delay:s,enabled:i}=Ne(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,s)}),[r,s]),a=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(s<0)&&i)return c(),()=>a()}),[a,c,i,s]),{set:c,reset:l,clear:a}}function Pe({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),s=V((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];k(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",s),()=>t.removeEventListener("keydown",s)}),[e,s]),r}const De={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Ye(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(De),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:s,clientY:i,pageX:c,pageY:a}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=s-t.left,u=i-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:s,clientY:i,pageX:c,pageY:a,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Be=()=>navigator.onLine,Ae=()=>!0,Xe=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function Ve({onlineAction:e=E,offlineAction:t=E}={}){const n=V((n=>Xe(n,e,t)));return(0,o.useSyncExternalStore)(n,Be,Ae)}function We(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const _e={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function ze(e=E){const[t,n]=(0,o.useState)(_e),r=(0,o.useRef)(null),s=V((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(s);return t.observe(e),()=>{t.unobserve(e)}}),[s]),{ref:r,contentRect:t}}function Je({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),s=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>s())),[e,r,s]),{ref:t,lock:r,unlock:s}}const He=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ue=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:s=0,alignY:i="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+s+He(window.innerHeight,r.height,i),left:r.left+window.scrollX+o+He(window.innerWidth,r.width,c)};const a=e.getBoundingClientRect();return{top:r.top-a.top+e.scrollTop+s+He(a.height,r.height,i),left:r.left-a.left+e.scrollLeft+o+He(a.width,r.width,c)}};function Ke(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:s,top:i}=Ue(r,t,n);r.scrollTo({top:i,left:s,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=k(n)?n():n,s=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>s?R(s):r),[s,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?R(n):r,s=k(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(s)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:s}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[i,c]=(0,o.useState)(n),a=(0,o.useCallback)((e=>{c((t=>{const n=k(e)?e(t):e;return r&&s&&function(e,t,n){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=k(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,s,n),n}))}),[r,s]),l=(0,o.useCallback)((()=>{r&&s&&function(e,t){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,s),c(null)}),[r,s]);return Object.assign({state:i,setState:a,clearState:l},Re(e))}function nt(e,t,n={}){const r=V(e),s=_(n),i=(0,o.useMemo)((()=>(0,c.A)(r,t,s)),[r,t,s]);return W((()=>i.cancel())),i}const rt=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=V(e),{delay:s,enabled:i}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,s)}),[r,s]),a=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(s<0)&&i)return c(),()=>a()}),[c,a,s,i]),{set:c,reset:l,clear:a}}function st(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function it(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new a.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const at={width:null,height:null};function lt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?at:{width:window.innerWidth,height:window.innerHeight})),r=z(n,e),s=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",s),t}function ut(e,t,n){const{delay:r,enabled:s}=rt(t),{set:i,reset:c,clear:a}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!s||c()}),[r,s,c,...n]),{set:i,reset:c,clear:a}}}}]); \ No newline at end of file diff --git a/assets/js/bf0dbc92.22073d5b.js b/assets/js/bf0dbc92.22073d5b.js new file mode 100644 index 000000000..693e7e28e --- /dev/null +++ b/assets/js/bf0dbc92.22073d5b.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[6595],{7112:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>m,assets:()=>f,contentTitle:()=>x,default:()=>v,frontMatter:()=>p,metadata:()=>r,toc:()=>j});const r=JSON.parse('{"id":"react/components/InView","title":"InView","description":"InView\ub294 IntersectionObserver\ub97c \uc120\uc5b8\uc801\uc73c\ub85c \ud65c\uc6a9 \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","source":"@site/docs/react/components/InView.mdx","sourceDirName":"react/components","slug":"/react/components/InView","permalink":"/modern-kit/docs/react/components/InView","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"IfElse","permalink":"/modern-kit/docs/react/components/IfElse"},"next":{"title":"InfiniteScroll","permalink":"/modern-kit/docs/react/components/InfiniteScroll"}}');var i=t(6206),o=t(3267),c=t(4076),s=t(4382),l=t(7399),d=t(7284),a=t(2424),h=t(6807);const u=(0,d.V)(((e,n)=>{var{children:t,as:r="div",asChild:o=!1}=e,d=(0,c._)(e,["children","as","asChild"]);const u=o?h.D:r,{ref:p}=(0,l.B)(d);if(o&&!s.isValidElement(t))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,i.jsx)(u,Object.assign({ref:(0,a.P)(n,p)},d,{children:t}))})),p={},x="InView",f={},m=()=>{const e={div:"div",li:"li",p:"p",...(0,o.R)()},n={width:"100%",color:"white",textAlign:"center",fontSize:"21px",padding:"0 20px"};return(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.div,{style:{height:"500px",textAlign:"center",fontSize:"1.7rem"},children:[(0,i.jsx)(e.p,{children:"\uc2a4\ud06c\ub864 \ud574\uc8fc\uc138\uc694."}),(0,i.jsx)(e.p,{children:"\ube0c\ub77c\uc6b0\uc800 \uac1c\ubc1c\uc790 \ub3c4\uad6c\uc758 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694."})]}),(0,i.jsxs)(u,{onIntersectStart:()=>console.log("action onIntersectStart(1)"),onIntersectEnd:()=>console.log("action onIntersectEnd(1)"),style:{...n,background:"#c0392B"},calledOnce:!0,children:[(0,i.jsx)(e.p,{children:"Box1"}),(0,i.jsx)(e.p,{children:"calledOnce: true"}),(0,i.jsx)(e.p,{children:"as: div"})]}),(0,i.jsx)(e.div,{style:{height:"300px"}}),(0,i.jsxs)(u,{onIntersectStart:()=>console.log("action onIntersectStart(2)"),onIntersectEnd:()=>console.log("action onIntersectEnd(2)"),style:{...n,background:"#89a5ea"},children:[(0,i.jsx)(e.li,{children:"Box2"}),(0,i.jsx)(e.li,{children:"calledOnce: false"}),(0,i.jsx)(e.li,{children:"as: ul"})]}),(0,i.jsx)(e.div,{style:{height:"300px"}}),(0,i.jsx)(u,{asChild:!0,onIntersectStart:()=>console.log("action onIntersectStart(3)"),onIntersectEnd:()=>console.log("action onIntersectEnd(3)"),style:{...n,background:"#77DD77"},children:(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.p,{children:"Box3"}),(0,i.jsx)(e.p,{children:"calledOnce: false"}),(0,i.jsx)(e.p,{children:"asChild: true"})]})}),(0,i.jsx)(e.div,{style:{width:"100%",height:"500px",textAlign:"center"}})]})},j=[{value:"\ub2e4\ud615\uc131(polymorphism)",id:"\ub2e4\ud615\uc131polymorphism",level:3},{value:"\ud569\uc131(Composition), \ub80c\ub354\ub9c1 \uc704\uc784(Rendering Delegation)",id:"\ud569\uc131composition-\ub80c\ub354\ub9c1-\uc704\uc784rendering-delegation",level:3},{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Default",id:"default",level:3},{value:"as",id:"as",level:3},{value:"asChild",id:"aschild",level:3},{value:"Example",id:"example",level:2},{value:"Note",id:"note",level:2}];function g(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"inview",children:"InView"})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"InView"}),"\ub294 ",(0,i.jsx)(n.code,{children:"IntersectionObserver"}),"\ub97c \uc120\uc5b8\uc801\uc73c\ub85c \ud65c\uc6a9 \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"@modern-kit/react"}),"\uc758 ",(0,i.jsx)(n.strong,{children:(0,i.jsx)(n.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/hooks/useIntersectionObserver",children:"useIntersectionObserver"})})," \ud6c5\uc744 \uc0ac\uc6a9\ud558\uc5ec \uad6c\ud604\ub418\uc5c8\uc2b5\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["\uad00\ucc30 \ub300\uc0c1\uc774 ",(0,i.jsx)(n.code,{children:"Viewport"}),"\uc5d0 \ub178\ucd9c\ub420 \ub54c(",(0,i.jsx)(n.code,{children:"onIntersectStart"}),") \ud639\uc740 \ub098\uac08 \ub54c(",(0,i.jsx)(n.code,{children:"onIntersectEnd"}),") \ud2b9\uc815 action \ud568\uc218\ub97c \ud638\ucd9c \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(n.h3,{id:"\ub2e4\ud615\uc131polymorphism",children:"\ub2e4\ud615\uc131(polymorphism)"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"InView"})," \ucef4\ud3ec\ub10c\ud2b8\ub294 ",(0,i.jsx)(n.code,{children:"\ub2e4\ud615\uc131"}),"\uc744 \uc704\ud574 ",(0,i.jsx)(n.code,{children:"as"})," \uc18d\uc131\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\uae30\ubcf8\uc801\uc73c\ub85c ",(0,i.jsx)(n.code,{children:"div"})," \ud0dc\uadf8\ub85c \uc790\uc2dd \uc694\uc18c\ub97c \uac10\uc2f8\uc11c \ub80c\ub354\ub9c1\ud558\uba70, ",(0,i.jsx)(n.code,{children:"as"})," \uc18d\uc131\uc744 \ud1b5\ud574 \uac10\uc2f8\ub294 ",(0,i.jsx)(n.code,{children:"Wrapper"})," \uc694\uc18c\uc758 \ud0dc\uadf8\ub97c \ubcc0\uacbd\ud574 \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. (ex. div -> article)"]}),"\n",(0,i.jsxs)(n.li,{children:["\uc774\ub54c, \ud574\ub2f9 ",(0,i.jsx)(n.code,{children:"Wrapper"})," \uc694\uc18c\uac00 ",(0,i.jsx)(n.code,{children:"IntersectionObserver"}),"\uc758 \uad00\ucc30 \ub300\uc0c1\uc774 \ub429\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"\ud569\uc131composition-\ub80c\ub354\ub9c1-\uc704\uc784rendering-delegation",children:"\ud569\uc131(Composition), \ub80c\ub354\ub9c1 \uc704\uc784(Rendering Delegation)"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"InView"})," \ucef4\ud3ec\ub10c\ud2b8\ub294 ",(0,i.jsx)(n.code,{children:"asChild"})," \uc18d\uc131\uc744 \ud1b5\ud574 ",(0,i.jsx)(n.code,{children:"\ud569\uc131(Composition)"}),", ",(0,i.jsx)(n.code,{children:"\ub80c\ub354\ub9c1 \uc704\uc784(Rendering Delegation)"})," \ud328\ud134\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"asChild"})," \uc18d\uc131\uc774 ",(0,i.jsx)(n.code,{children:"true"}),"\ub77c\uba74 ",(0,i.jsx)(n.strong,{children:(0,i.jsx)(n.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot",children:"Slot"})})," \uc744 \ud1b5\ud574 \ub798\ud37c \uc694\uc18c \uc5c6\uc774 \uc790\uc2dd \uc694\uc18c\ub97c \uadf8\ub300\ub85c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(n.li,{children:["\uc774\ub54c, \ud574\ub2f9 \uc790\uc2dd \uc694\uc18c\uac00 ",(0,i.jsx)(n.code,{children:"IntersectionObserver"}),"\uc758 \uad00\ucc30 \ub300\uc0c1\uc774 \ub429\ub2c8\ub2e4.","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["Slot\uc758 \uc790\uc2dd\uc740 ",(0,i.jsx)(n.code,{children:"\ub2e8\uc77c \uc694\uc18c"}),"\ub9cc \ud5c8\uc6a9\ub429\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(n.li,{children:["Slot\uc740 \uc790\uc2dd\uc73c\ub85c \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc62c \uacbd\uc6b0 ",(0,i.jsx)(n.code,{children:"forwardRef"}),", ",(0,i.jsx)(n.code,{children:"props"}),"\ub97c \ud5c8\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4. \ud5c8\uc6a9\ud558\uc9c0 \uc54a\uc73c\uba74 \uc815\uc0c1\uc801\uc73c\ub85c \ub3d9\uc791\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"asChild"})," \uc18d\uc131\uc744 \uc0ac\uc6a9 \ud560 \uacbd\uc6b0 ",(0,i.jsx)(n.strong,{children:(0,i.jsx)(n.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot",children:"Slot"})})," \ubb38\uc11c\ub97c \ucc38\uace0\ud574\uc8fc\uc138\uc694."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/InView/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"interface InViewProps extends UseIntersectionObserverProps {\n children: React.ReactNode;\n asChild?: boolean;\n}\n"})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:'const InView: PolyForwardComponent<"div", InViewProps, React.ElementType>\n'})}),"\n",(0,i.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(n.h3,{id:"default",children:"Default"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\uae30\ubcf8\uc801\uc73c\ub85c ",(0,i.jsx)(n.code,{children:"div"}),"\ub85c \uac10\uc2f8\uc9c0\uba70, \ud574\ub2f9 ",(0,i.jsx)(n.code,{children:"div"}),"\uac00 ",(0,i.jsx)(n.code,{children:"IntersectionObserver"}),"\uc758 \uad00\ucc30 \ub300\uc0c1\uc774 \ub429\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(n.li,{children:["\ud574\ub2f9 ",(0,i.jsx)(n.code,{children:"div"}),"\uac00 viewport\uc5d0 \ub178\ucd9c\ub418\uac70\ub098 \uc228\uaca8\uc9c8 \ub54c ",(0,i.jsx)(n.code,{children:"onIntersectStart/onIntersectEnd"})," \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { InView } from '@modern-kit/react';\n\nconst Example = () => {\n const handleIntersectStart = () => {/* action */}\n const handleIntersectEnd = () => {/* action */}\n\n return (\n \n
    Box1
    \n     \n );\n}; \n"})}),"\n",(0,i.jsx)(n.h3,{id:"as",children:"as"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"as"})," \uc18d\uc131\uc744 \ud1b5\ud574 \ud2b9\uc815 \uc694\uc18c\ub85c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc73c\uba70, \ud574\ub2f9 \uc694\uc18c\uac00 ",(0,i.jsx)(n.code,{children:"IntersectionObserver"}),"\uc758 \uad00\ucc30 \ub300\uc0c1\uc774 \ub429\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(n.li,{children:["\ud574\ub2f9 \uc694\uc18c\uac00 viewport\uc5d0 \ub178\ucd9c\ub418\uac70\ub098 \uc228\uaca8\uc9c8 \ub54c ",(0,i.jsx)(n.code,{children:"onIntersectStart/onIntersectEnd"})," \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { InView } from '@modern-kit/react';\n\nconst Example = () => {\n const handleIntersectStart = () => {/* action */}\n const handleIntersectEnd = () => {/* action */}\n\n return (\n \n
  • List Item1
    • \n
  • List Item2
    • \n \n );\n}; \n"})}),"\n",(0,i.jsx)(n.h3,{id:"aschild",children:"asChild"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"asChild"})," \uc18d\uc131\uc774 ",(0,i.jsx)(n.code,{children:"true"}),"\ub77c\uba74 ",(0,i.jsx)(n.strong,{children:(0,i.jsx)(n.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot",children:"Slot"})})," \uc744 \ud1b5\ud574 \ub798\ud37c \uc694\uc18c \uc5c6\uc774 \uc790\uc2dd \uc694\uc18c\ub97c \uadf8\ub300\ub85c \ub80c\ub354\ub9c1\ud558\uace0, \ud574\ub2f9 \uc790\uc2dd \uc694\uc18c\uac00 ",(0,i.jsx)(n.code,{children:"IntersectionObserver"}),"\uc758 \uad00\ucc30 \ub300\uc0c1\uc774 \ub429\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(n.li,{children:["\uc790\uc2dd \uc694\uc18c\uac00 viewport\uc5d0 \ub178\ucd9c\ub418\uac70\ub098 \uc228\uaca8\uc9c8 \ub54c ",(0,i.jsx)(n.code,{children:"onIntersectStart/onIntersectEnd"})," \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { InView } from '@modern-kit/react';\n\nconst Example = () => {\n const handleIntersectStart = () => {/* action */}\n const handleIntersectEnd = () => {/* action */}\n\n return (\n \n
    Box1
    \n     \n );\n}; \n"})}),"\n",(0,i.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(m,{}),"\n",(0,i.jsx)(n.h2,{id:"note",children:"Note"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver",children:"Intersection Observer API"})}),"\n"]})]})}function v(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(g,{...e})}):g(e)}},4076:(e,n,t)=>{function r(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(e);ir,a:()=>i}),"function"==typeof SuppressedError&&SuppressedError},3267:(e,n,t)=>{t.d(n,{R:()=>c,x:()=>s});var r=t(4382);const i={},o=r.createContext(i);function c(e){const n=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:c(e.components),r.createElement(o.Provider,{value:n},e.children)}},6807:(e,n,t)=>{t.d(n,{D:()=>s,x:()=>d});var r=t(4076),i=t(6206),o=t(4382),c=t(2424);const s=o.forwardRef(((e,n)=>{const{children:t}=e,c=(0,r._)(e,["children"]),s=o.Children.toArray(t),d=s.find(a);if(d){const e=d.props.children,t=s.map((n=>n===d?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:n));return(0,i.jsx)(l,Object.assign({},c,{ref:n,children:o.isValidElement(e)?o.cloneElement(e,void 0,t):null}))}return(0,i.jsx)(l,Object.assign({},c,{ref:n,children:t}))}));s.displayName="Slot";const l=o.forwardRef(((e,n)=>{const{children:t}=e,i=(0,r._)(e,["children"]);if(o.isValidElement(t)){const e=function(e){var n,t;let r=null===(n=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===n?void 0:n.get,i=r&&"isReactWarning"in r&&r.isReactWarning;return i?e.ref:(r=null===(t=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===t?void 0:t.get,i=r&&"isReactWarning"in r&&r.isReactWarning,i?e.props.ref:e.props.ref||e.ref)}(t);return o.cloneElement(t,Object.assign(Object.assign({},function(e,n){const t=Object.assign({},n);for(const r in n){const i=e[r],o=n[r];/^on[A-Z]/.test(r)?i&&o?t[r]=(...e)=>{o(...e),i(...e)}:i&&(t[r]=i):"style"===r?t[r]=Object.assign(Object.assign({},i),o):"className"===r&&(t[r]=[i,o].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),t)}(i,t.props)),{ref:n?(0,c.P)(n,e):e}))}return o.Children.count(t)>1?o.Children.only(null):null}));l.displayName="SlotClone";const d=({children:e})=>(0,i.jsx)(i.Fragment,{children:e});function a(e){return o.isValidElement(e)&&e.type===d}},7399:(e,n,t)=>{t.d(n,{B:()=>c});var r=t(4382),i=t(6765),o=t(9340);function c({onIntersectStart:e=o.lQ,onIntersectEnd:n=o.lQ,enabled:t=!0,calledOnce:c=!1,root:s=null,threshold:l=0,rootMargin:d="0px 0px 0px 0px"}){const a=(0,r.useRef)(0),h=(0,r.useRef)(!1),u=(0,r.useRef)(null),p=(0,i.p)((([t],r)=>{if(!t)return;const i=t.target;t.isIntersecting?(h.current=!0,a.current+=1,e(t)):h.current&&(h.current=!1,a.current+=1,n(t)),c&&a.current>1&&r.unobserve(i)}));return{ref:(0,r.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&t&&(u.current=new IntersectionObserver(p,{threshold:l,root:s,rootMargin:d}),u.current.observe(e))}),[t,l,s,d,p])}}},6765:(e,n,t)=>{t.d(n,{p:()=>i});var r=t(4382);function i(e){const n=(0,r.useRef)(e);return n.current=e,(0,r.useCallback)(((...e)=>n.current(...e)),[])}},2424:(e,n,t)=>{t.d(n,{P:()=>i});var r=t(9340);const i=(...e)=>n=>e.forEach((e=>{if((0,r.Tn)(e))e(n);else if(null!=e){e.current=n}}))},7284:(e,n,t)=>{t.d(n,{V:()=>r});const r=t(4382).forwardRef},9340:(e,n,t)=>{function r(e,n,t,r){return new(t||(t=Promise))((function(i,o){function c(e){try{l(r.next(e))}catch(n){o(n)}}function s(e){try{l(r.throw(e))}catch(n){o(n)}}function l(e){var n;e.done?i(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(c,s)}l((r=r.apply(e,n||[])).next())}))}t.d(n,{Et:()=>w,Fr:()=>s,Gp:()=>j,Ol:()=>O,Qd:()=>b,S$:()=>c,Tn:()=>g,Zp:()=>u,dK:()=>d,fl:()=>k,gD:()=>v,i5:()=>x,if:()=>p,l6:()=>y,lQ:()=>E,nS:()=>h,ni:()=>V,oc:()=>l}),"function"==typeof SuppressedError&&SuppressedError;const i={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const o=(e,n)=>new Promise(((t,r)=>{e.toBlob((e=>{e?t(e):r(new Error(`Failed to create blob with format ${n}`))}),n)}));function c(){return"undefined"==typeof window}function s(){if(c())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function l(){return!c()}function d(e){return r(this,void 0,void 0,(function*(){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const a=e=>r(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return d(yield n.text())}));function h(e,n){var t;return r(this,void 0,void 0,(function*(){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return a(e);if(!("write"in window.navigator.clipboard))return a(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return a(e);const c=yield function(e,n="png"){return new Promise(((t,c)=>{const s=new Image;s.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=s.width,e.height=s.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(s,0,0);const c=yield o(e,i[n]);t(c)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),c(r)}})),s.onerror=()=>{c(new Error("Failed to load image"))},s.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[c.type]:c})]),c}catch(c){throw console.error(`Failed to copy to clipboard. message: ${c.message}`),c}}))}function u(){return r(this,void 0,void 0,(function*(){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(){return r(this,void 0,void 0,(function*(){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function x(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const f=(e,n,t)=>{const r=Object.keys(e),i=Object.keys(n);if(r.length!==i.length)return!1;for(let o=0;o{if(e===n)return!0;if(w(e)&&w(n)&&isNaN(e)&&isNaN(n))return!0;if(g(e)&&g(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const r=[...e],i=[...n];return f(r,i,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[r,i]of e)if(!n.has(r)||!m(i,n.get(r),t))return!1;return!0}return f(e,n,t)};function j(e,n){return m(e,n,new WeakMap)}function g(e){return"function"==typeof e}function v(e){return null==e}function w(e){return"number"==typeof e}function I(e){return!function(e){return Object(e)!==e}(e)}function b(e){return I(e)&&"[object Object]"===Object.prototype.toString.call(e)}function y(e){return e===window}function E(){}function O(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function S(e){return Object.keys(e)}const C={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};S(C);function k(e,n){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function V(e,n,t){if(!l())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],i=g(t)?t():t;r.setItem(n,JSON.stringify(i))}catch(r){throw new Error(`Failed to store data for key "${n}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/bf0dbc92.786703fe.js b/assets/js/bf0dbc92.786703fe.js deleted file mode 100644 index a1e28f6a6..000000000 --- a/assets/js/bf0dbc92.786703fe.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[6595],{4066:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>d,assets:()=>a,contentTitle:()=>l,default:()=>f,frontMatter:()=>c,metadata:()=>r,toc:()=>u});const r=JSON.parse('{"id":"react/components/InView","title":"InView","description":"InView\ub294 IntersectionObserver\ub97c \uc120\uc5b8\uc801\uc73c\ub85c \ud65c\uc6a9 \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","source":"@site/docs/react/components/InView.mdx","sourceDirName":"react/components","slug":"/react/components/InView","permalink":"/modern-kit/docs/react/components/InView","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"IfElse","permalink":"/modern-kit/docs/react/components/IfElse"},"next":{"title":"InfiniteScroll","permalink":"/modern-kit/docs/react/components/InfiniteScroll"}}');var o=t(6206),i=t(3267),s=t(4027);const c={},l="InView",a={},d=()=>{const e={div:"div",li:"li",p:"p",...(0,i.R)()},n={width:"100%",color:"white",textAlign:"center",fontSize:"21px",padding:"0 20px"};return(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.div,{style:{height:"500px",textAlign:"center",fontSize:"1.7rem"},children:[(0,o.jsx)(e.p,{children:"\uc2a4\ud06c\ub864 \ud574\uc8fc\uc138\uc694."}),(0,o.jsx)(e.p,{children:"\ube0c\ub77c\uc6b0\uc800 \uac1c\ubc1c\uc790 \ub3c4\uad6c\uc758 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694."})]}),(0,o.jsxs)(s.pL,{onIntersectStart:()=>console.log("action onIntersectStart(1)"),onIntersectEnd:()=>console.log("action onIntersectEnd(1)"),style:{...n,background:"#c0392B"},calledOnce:!0,children:[(0,o.jsx)(e.p,{children:"Box1"}),(0,o.jsx)(e.p,{children:"calledOnce: true"}),(0,o.jsx)(e.p,{children:"as: div"})]}),(0,o.jsx)(e.div,{style:{height:"300px"}}),(0,o.jsxs)(s.pL,{onIntersectStart:()=>console.log("action onIntersectStart(2)"),onIntersectEnd:()=>console.log("action onIntersectEnd(2)"),style:{...n,background:"#89a5ea"},children:[(0,o.jsx)(e.li,{children:"Box2"}),(0,o.jsx)(e.li,{children:"calledOnce: false"}),(0,o.jsx)(e.li,{children:"as: ul"})]}),(0,o.jsx)(e.div,{style:{height:"300px"}}),(0,o.jsx)(s.pL,{asChild:!0,onIntersectStart:()=>console.log("action onIntersectStart(3)"),onIntersectEnd:()=>console.log("action onIntersectEnd(3)"),style:{...n,background:"#77DD77"},children:(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.p,{children:"Box3"}),(0,o.jsx)(e.p,{children:"calledOnce: false"}),(0,o.jsx)(e.p,{children:"asChild: true"})]})}),(0,o.jsx)(e.div,{style:{width:"100%",height:"500px",textAlign:"center"}})]})},u=[{value:"\ub2e4\ud615\uc131(polymorphism)",id:"\ub2e4\ud615\uc131polymorphism",level:3},{value:"\ud569\uc131(Composition), \ub80c\ub354\ub9c1 \uc704\uc784(Rendering Delegation)",id:"\ud569\uc131composition-\ub80c\ub354\ub9c1-\uc704\uc784rendering-delegation",level:3},{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Default",id:"default",level:3},{value:"as",id:"as",level:3},{value:"asChild",id:"aschild",level:3},{value:"Example",id:"example",level:2},{value:"Note",id:"note",level:2}];function h(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"inview",children:"InView"})}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"InView"}),"\ub294 ",(0,o.jsx)(n.code,{children:"IntersectionObserver"}),"\ub97c \uc120\uc5b8\uc801\uc73c\ub85c \ud65c\uc6a9 \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"@modern-kit/react"}),"\uc758 ",(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/hooks/useIntersectionObserver",children:"useIntersectionObserver"})})," \ud6c5\uc744 \uc0ac\uc6a9\ud558\uc5ec \uad6c\ud604\ub418\uc5c8\uc2b5\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsxs)(n.p,{children:["\uad00\ucc30 \ub300\uc0c1\uc774 ",(0,o.jsx)(n.code,{children:"Viewport"}),"\uc5d0 \ub178\ucd9c\ub420 \ub54c(",(0,o.jsx)(n.code,{children:"onIntersectStart"}),") \ud639\uc740 \ub098\uac08 \ub54c(",(0,o.jsx)(n.code,{children:"onIntersectEnd"}),") \ud2b9\uc815 action \ud568\uc218\ub97c \ud638\ucd9c \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h3,{id:"\ub2e4\ud615\uc131polymorphism",children:"\ub2e4\ud615\uc131(polymorphism)"}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"InView"})," \ucef4\ud3ec\ub10c\ud2b8\ub294 ",(0,o.jsx)(n.code,{children:"\ub2e4\ud615\uc131"}),"\uc744 \uc704\ud574 ",(0,o.jsx)(n.code,{children:"as"})," \uc18d\uc131\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["\uae30\ubcf8\uc801\uc73c\ub85c ",(0,o.jsx)(n.code,{children:"div"})," \ud0dc\uadf8\ub85c \uc790\uc2dd \uc694\uc18c\ub97c \uac10\uc2f8\uc11c \ub80c\ub354\ub9c1\ud558\uba70, ",(0,o.jsx)(n.code,{children:"as"})," \uc18d\uc131\uc744 \ud1b5\ud574 \uac10\uc2f8\ub294 ",(0,o.jsx)(n.code,{children:"Wrapper"})," \uc694\uc18c\uc758 \ud0dc\uadf8\ub97c \ubcc0\uacbd\ud574 \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. (ex. div -> article)"]}),"\n",(0,o.jsxs)(n.li,{children:["\uc774\ub54c, \ud574\ub2f9 ",(0,o.jsx)(n.code,{children:"Wrapper"})," \uc694\uc18c\uac00 ",(0,o.jsx)(n.code,{children:"IntersectionObserver"}),"\uc758 \uad00\ucc30 \ub300\uc0c1\uc774 \ub429\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsx)(n.h3,{id:"\ud569\uc131composition-\ub80c\ub354\ub9c1-\uc704\uc784rendering-delegation",children:"\ud569\uc131(Composition), \ub80c\ub354\ub9c1 \uc704\uc784(Rendering Delegation)"}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"InView"})," \ucef4\ud3ec\ub10c\ud2b8\ub294 ",(0,o.jsx)(n.code,{children:"asChild"})," \uc18d\uc131\uc744 \ud1b5\ud574 ",(0,o.jsx)(n.code,{children:"\ud569\uc131(Composition)"}),", ",(0,o.jsx)(n.code,{children:"\ub80c\ub354\ub9c1 \uc704\uc784(Rendering Delegation)"})," \ud328\ud134\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"asChild"})," \uc18d\uc131\uc774 ",(0,o.jsx)(n.code,{children:"true"}),"\ub77c\uba74 ",(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot",children:"Slot"})})," \uc744 \ud1b5\ud574 \ub798\ud37c \uc694\uc18c \uc5c6\uc774 \uc790\uc2dd \uc694\uc18c\ub97c \uadf8\ub300\ub85c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.li,{children:["\uc774\ub54c, \ud574\ub2f9 \uc790\uc2dd \uc694\uc18c\uac00 ",(0,o.jsx)(n.code,{children:"IntersectionObserver"}),"\uc758 \uad00\ucc30 \ub300\uc0c1\uc774 \ub429\ub2c8\ub2e4.","\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["Slot\uc758 \uc790\uc2dd\uc740 ",(0,o.jsx)(n.code,{children:"\ub2e8\uc77c \uc694\uc18c"}),"\ub9cc \ud5c8\uc6a9\ub429\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.li,{children:["Slot\uc740 \uc790\uc2dd\uc73c\ub85c \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc62c \uacbd\uc6b0 ",(0,o.jsx)(n.code,{children:"forwardRef"}),", ",(0,o.jsx)(n.code,{children:"props"}),"\ub97c \ud5c8\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4. \ud5c8\uc6a9\ud558\uc9c0 \uc54a\uc73c\uba74 \uc815\uc0c1\uc801\uc73c\ub85c \ub3d9\uc791\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"asChild"})," \uc18d\uc131\uc744 \uc0ac\uc6a9 \ud560 \uacbd\uc6b0 ",(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot",children:"Slot"})})," \ubb38\uc11c\ub97c \ucc38\uace0\ud574\uc8fc\uc138\uc694."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/InView/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"interface InViewProps extends UseIntersectionObserverProps {\n children: React.ReactNode;\n asChild?: boolean;\n}\n"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:'const InView: PolyForwardComponent<"div", InViewProps, React.ElementType>\n'})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.h3,{id:"default",children:"Default"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["\uae30\ubcf8\uc801\uc73c\ub85c ",(0,o.jsx)(n.code,{children:"div"}),"\ub85c \uac10\uc2f8\uc9c0\uba70, \ud574\ub2f9 ",(0,o.jsx)(n.code,{children:"div"}),"\uac00 ",(0,o.jsx)(n.code,{children:"IntersectionObserver"}),"\uc758 \uad00\ucc30 \ub300\uc0c1\uc774 \ub429\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.li,{children:["\ud574\ub2f9 ",(0,o.jsx)(n.code,{children:"div"}),"\uac00 viewport\uc5d0 \ub178\ucd9c\ub418\uac70\ub098 \uc228\uaca8\uc9c8 \ub54c ",(0,o.jsx)(n.code,{children:"onIntersectStart/onIntersectEnd"})," \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { InView } from '@modern-kit/react';\n\nconst Example = () => {\n const handleIntersectStart = () => {/* action */}\n const handleIntersectEnd = () => {/* action */}\n\n return (\n \n
    Box1
    \n     \n );\n}; \n"})}),"\n",(0,o.jsx)(n.h3,{id:"as",children:"as"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"as"})," \uc18d\uc131\uc744 \ud1b5\ud574 \ud2b9\uc815 \uc694\uc18c\ub85c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc73c\uba70, \ud574\ub2f9 \uc694\uc18c\uac00 ",(0,o.jsx)(n.code,{children:"IntersectionObserver"}),"\uc758 \uad00\ucc30 \ub300\uc0c1\uc774 \ub429\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.li,{children:["\ud574\ub2f9 \uc694\uc18c\uac00 viewport\uc5d0 \ub178\ucd9c\ub418\uac70\ub098 \uc228\uaca8\uc9c8 \ub54c ",(0,o.jsx)(n.code,{children:"onIntersectStart/onIntersectEnd"})," \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { InView } from '@modern-kit/react';\n\nconst Example = () => {\n const handleIntersectStart = () => {/* action */}\n const handleIntersectEnd = () => {/* action */}\n\n return (\n \n
  • List Item1
    • \n
  • List Item2
    • \n \n );\n}; \n"})}),"\n",(0,o.jsx)(n.h3,{id:"aschild",children:"asChild"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"asChild"})," \uc18d\uc131\uc774 ",(0,o.jsx)(n.code,{children:"true"}),"\ub77c\uba74 ",(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot",children:"Slot"})})," \uc744 \ud1b5\ud574 \ub798\ud37c \uc694\uc18c \uc5c6\uc774 \uc790\uc2dd \uc694\uc18c\ub97c \uadf8\ub300\ub85c \ub80c\ub354\ub9c1\ud558\uace0, \ud574\ub2f9 \uc790\uc2dd \uc694\uc18c\uac00 ",(0,o.jsx)(n.code,{children:"IntersectionObserver"}),"\uc758 \uad00\ucc30 \ub300\uc0c1\uc774 \ub429\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.li,{children:["\uc790\uc2dd \uc694\uc18c\uac00 viewport\uc5d0 \ub178\ucd9c\ub418\uac70\ub098 \uc228\uaca8\uc9c8 \ub54c ",(0,o.jsx)(n.code,{children:"onIntersectStart/onIntersectEnd"})," \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { InView } from '@modern-kit/react';\n\nconst Example = () => {\n const handleIntersectStart = () => {/* action */}\n const handleIntersectEnd = () => {/* action */}\n\n return (\n \n
    Box1
    \n     \n );\n}; \n"})}),"\n",(0,o.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(d,{}),"\n",(0,o.jsx)(n.h2,{id:"note",children:"Note"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver",children:"Intersection Observer API"})}),"\n"]})]})}function f(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},4027:(e,n,t)=>{t.d(n,{$$:()=>Me,$I:()=>oe,AE:()=>We,BL:()=>H,DX:()=>N,FT:()=>ln,Fo:()=>en,Hn:()=>sn,I5:()=>ke,JF:()=>$e,K:()=>ae,K$:()=>Je,M0:()=>Re,ML:()=>te,Mj:()=>be,Mk:()=>Fe,Mo:()=>ie,NT:()=>De,QV:()=>Ke,Ub:()=>ye,Ut:()=>Ee,W7:()=>K,WY:()=>re,Y1:()=>un,Z3:()=>on,ZC:()=>Xe,Zu:()=>le,_1:()=>Oe,_g:()=>tn,aL:()=>J,aY:()=>Ne,bB:()=>A,d7:()=>_,eG:()=>cn,fN:()=>ce,fm:()=>G,gl:()=>M,hN:()=>B,iD:()=>ue,iQ:()=>Le,jd:()=>se,lW:()=>dn,oD:()=>U,oo:()=>Ce,pL:()=>q,qi:()=>de,rN:()=>Ve,tD:()=>Se,u8:()=>Q,wY:()=>_e,xV:()=>L,xh:()=>nn,zy:()=>Z});var r=t(6206),o=t(4382),i=t(3683),s=t(5086),c=t(7197),l=(t(1604),t(5938));function a(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((t,r)=>{e.toBlob((e=>{e?t(e):r(new Error(`Failed to create blob with format ${n}`))}),n)}));function m(){return typeof window>"u"}function g(){return!m()}function x(e){return h(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const w=e=>h(void 0,0,void 0,(function*(){return x(yield(yield fetch(e)).text())}));function v(e,n){var t;return h(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(t=n?.toText)&&void 0!==t&&t)return w(e);const r=yield function(e,n="png"){return new Promise(((t,r)=>{const o=new Image;o.onload=()=>h(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield p(e,f[n]);t(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const b=(e,n,t)=>{const r=Object.keys(e),o=Object.keys(n);if(r.length!==o.length)return!1;for(let i=0;i{if(e===n||I(e)&&I(n)&&isNaN(e)&&isNaN(n))return!0;if(S(e)&&S(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const r=[...e],o=[...n];return b(r,o,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[r,o]of e)if(!n.has(r)||!j(o,n.get(r),t))return!1;return!0}return b(e,n,t)};function y(e,n){return j(e,n,new WeakMap)}function S(e){return"function"==typeof e}function I(e){return"number"==typeof e}function E(e){return!function(e){return Object(e)!==e}(e)}function k(){}function C(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}const O=(...e)=>n=>e.forEach((e=>{if(S(e))e(n);else if(null!=e){e.current=n}}));function R(...e){return(0,o.useCallback)(O(...e),e)}const N=o.forwardRef(((e,n)=>{const{children:t}=e,i=a(e,["children"]),s=o.Children.toArray(t),c=s.find(F);if(c){const e=c.props.children,t=s.map((n=>n===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:n));return(0,r.jsx)(V,Object.assign({},i,{ref:n,children:o.isValidElement(e)?o.cloneElement(e,void 0,t):null}))}return(0,r.jsx)(V,Object.assign({},i,{ref:n,children:t}))}));N.displayName="Slot";const V=o.forwardRef(((e,n)=>{const{children:t}=e,r=a(e,["children"]);if(o.isValidElement(t)){const e=function(e){var n,t;let r=null===(n=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(t=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(t);return o.cloneElement(t,Object.assign(Object.assign({},function(e,n){const t=Object.assign({},n);for(const r in n){const o=e[r],i=n[r];/^on[A-Z]/.test(r)?o&&i?t[r]=(...e)=>{i(...e),o(...e)}:o&&(t[r]=o):"style"===r?t[r]=Object.assign(Object.assign({},o),i):"className"===r&&(t[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),t)}(r,t.props)),{ref:n?O(n,e):e}))}return o.Children.count(t)>1?o.Children.only(null):null}));V.displayName="SlotClone";const L=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function F(e){return o.isValidElement(e)&&e.type===L}var P="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const M=u(((e,n)=>{var{ratio:t,style:o,as:s="div",asChild:c=!1}=e,l=a(e,["ratio","style","as","asChild"]);const d=c?N:s,u=Object.assign({aspectRatio:t},o),h=c?l.className:i(P,l.className);return(0,r.jsx)(d,Object.assign({ref:n,style:u,className:h},l))})),$=()=>k,T=()=>!1,D=()=>!0;function A({fallback:e=(0,r.jsx)(r.Fragment,{}),children:n}){return(0,o.useSyncExternalStore)($,T,D)?e:n}function Y(){const[e,n]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{n(!0)}),[]),e}const B=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:n})=>Y()?(0,r.jsx)(r.Fragment,{children:n}):e;function W(e){const n=(0,o.useRef)(e);return n.current=e,(0,o.useCallback)(((...e)=>n.current(...e)),[])}function X(e){const n=W(e);(0,o.useEffect)((()=>()=>n()),[n])}function z(e,n=y){const[t,r]=(0,o.useState)(e),i=W(n);return(0,o.useEffect)((()=>{i(t,e)||r(e)}),[i,t,e]),t}function _(e,n,t){const r=W(e),i=z(t),c=(0,o.useMemo)((()=>(0,s.A)(r,n,i)),[r,n,i]);return X((()=>c.cancel())),c}const J=({children:e,capture:n,wait:t,options:r})=>{const i=o.Children.only(e),s=_(((...e)=>{const t=i?.props;if(t&&S(t[n]))return t[n](...e)}),t,r);return(0,o.cloneElement)(i,{[n]:s})};function H({onIntersectStart:e=k,onIntersectEnd:n=k,enabled:t=!0,calledOnce:r=!1,root:i=null,threshold:s=0,rootMargin:c="0px 0px 0px 0px"}){const l=(0,o.useRef)(0),a=(0,o.useRef)(!1),d=(0,o.useRef)(null),u=W((([t],o)=>{if(!t)return;const i=t.target;t.isIntersecting?(a.current=!0,l.current+=1,e(t)):a.current&&(a.current=!1,l.current+=1,n(t)),r&&l.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{d.current&&(d.current.disconnect(),d.current=null),null!==e&&t&&(d.current=new IntersectionObserver(u,{threshold:s,root:i,rootMargin:c}),d.current.observe(e))}),[t,s,i,c,u])}}const U=(0,o.forwardRef)(((e,n)=>{var{src:t,threshold:o,root:i,rootMargin:s}=e,c=a(e,["src","threshold","root","rootMargin"]);const{ref:l}=H({onIntersectStart:e=>{e.target.src=t},calledOnce:!0,threshold:o,root:i,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:R(n,l)},c))}));U.displayName="LazyImage";const K=(0,o.forwardRef)(((e,n)=>{var{width:t,height:i,fallback:s,className:c,style:l,duration:d="0.2s",onLoad:u}=e,h=a(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,p]=(0,o.useState)(!1),m=!f,g=(0,o.useMemo)((()=>({position:"relative",width:t,height:i})),[t,i]),x=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${d}`},l)),[m,d,l]),w=(0,o.useCallback)((e=>{u&&u(e),p(!0)}),[u]),v=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:g,children:[m&&s,(0,r.jsx)(U,Object.assign({ref:n,width:t,height:i,style:x,onLoad:w},h))]})}));K.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:n,falseComponent:t})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?n:t})},Q=({onScrollAction:e,children:n,root:t,threshold:o,enabled:i,triggerPosition:s="after",rootMargin:c="150px 0px"})=>{const{ref:l}=H({onIntersectStart:e,root:t,threshold:o,enabled:i,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:l}),n,"after"===s&&(0,r.jsx)("div",{ref:l})]})},q=u(((e,n)=>{var{children:t,as:i="div",asChild:s=!1}=e,c=a(e,["children","as","asChild"]);const l=s?N:i,{ref:d}=H(c);if(s&&!o.isValidElement(t))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(l,Object.assign({ref:O(n,d)},c,{children:t}))})),G=({items:e=[],itemKey:n,renderItem:t})=>{const i=(0,o.useCallback)(((e,t)=>function(e){return E(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[n]||t:`${t}_${e}`),[n]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,n)=>(0,r.jsx)(o.Fragment,{children:t(e,n)},i(e,n))))})},ee=g()?o.useLayoutEffect:o.useEffect,ne=e=>!!e&&function(e,n){return Object.prototype.hasOwnProperty.call(e,n)}(e,"current");function te(e,n,t,r){const o=W(t);ee((()=>{const t=ne(e)?e.current:e;if(t)return t.addEventListener(n,o,r),()=>{t.removeEventListener(n,o,r)}}),[n,e,r,o])}function re(e,n){const{excludeRefs:t}=n??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return te(document,i,(({target:n})=>{if(!r.current)return;const o=r.current,i=t?.some((e=>{var t;return null===(t=e.current)||void 0===t?void 0:t.contains(n)}));!o.contains(n)&&!i&&e(o)})),r}const oe=u(((e,n)=>{var{children:t,as:i="div",asChild:s=!1,onPointerDown:c,excludeRefs:l=[]}=e,d=a(e,["children","as","asChild","onPointerDown","excludeRefs"]);const u=re(c,{excludeRefs:l}),h=s?N:i;if(s&&!o.isValidElement(t))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(h,Object.assign({ref:O(u,n)},d,{children:t}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:n=[],separator:t,renderItem:i,separatorInterval:s=1,includeLastSeparator:c=!1})=>{const l=(0,o.useCallback)((e=>e===n.length-1?c:(e+1)%s==0),[c,s,n.length]);return(0,r.jsx)(G,{items:n,itemKey:e,renderItem:(e,n)=>(0,r.jsxs)(r.Fragment,{children:[i(e,n),l(n)&&t]})})},se=({children:e,condition:n,fallback:t=null})=>(e=>"function"==typeof e?e():e)(n)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:t}),ce=({caseBy:e,value:n,defaultComponent:t=null})=>{var o;return function(e){return null==e}(n)?(0,r.jsx)(r.Fragment,{children:t}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[n])&&void 0!==o?o:t})};function le(e,n){(0,o.useEffect)((()=>{d(this,void 0,void 0,(function*(){yield e()}))}),n)}function ae(e=!0){const n=S(e)?e():e;(0,o.useEffect)((()=>{if(!n)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[n])}function de(){const[e,n]=(0,o.useState)(!1),[t,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:t,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>d(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,n(!0),r(!1);try{return yield e()}catch(t){throw r(!0),t}finally{i.current=!1,n(!1)}}}))),[])}}function ue(){const[e,n]=(0,o.useState)(null),[t,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>d(this,void 0,void 0,(function*(){try{const t=yield x(e);return n(t),!0}catch{return n(null),!1}}))),[]),s=(0,o.useCallback)(((e,t)=>d(this,void 0,void 0,(function*(){var r;const o=null!==(r=t?.toText)&&void 0!==r&&r;try{const t=yield v(e,{toText:o});return n(t),!0}catch{return n(null),!1}}))),[]),c=(0,o.useCallback)((()=>d(this,void 0,void 0,(function*(){try{const n=yield function(){return h(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(n),!0}catch{return r(null),!1}}))),[]),l=(0,o.useCallback)((()=>d(this,void 0,void 0,(function*(){try{const n=yield function(){return h(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(n),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:t,copyText:i,copyImage:s,readText:c,readContents:l}}const he="modern-kit-local-storage",fe="modern-kit-session-storage",pe={localStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}},sessionStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}}},me=e=>pe[e],ge=me("localStorage"),xe=e=>window.localStorage.getItem(e),we=e=>JSON.stringify(e),ve=e=>(ge.subscribe(e),()=>{ge.unsubscribe(e)});function be(e){const{key:n}=e,t="initialValue"in e?e.initialValue:null,r=S(t)?t():t,i=(0,o.useSyncExternalStore)(ve,(()=>xe(n)),(()=>we(r)));return{state:(0,o.useMemo)((()=>i?C(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const t=xe(n),o=t?C(t):r,i=S(e)?e(o):e;window.localStorage.setItem(n,JSON.stringify(i)),ge.dispatchEvent()}catch(t){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${n}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${t}`)}}),[n,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(n),ge.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${n}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[n])}}const je=(e,n)=>g()?window.matchMedia(e).matches:n??!1;function ye(e,n){const[t,r]=(0,o.useState)(je(e,n)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return te(window.matchMedia(e),"change",i),t}function Se(){return ye("(prefers-color-scheme: dark)")?"dark":"light"}const Ie="color-scheme";function Ee({defaultValue:e,key:n=Ie,shouldSetBodyClass:t=!1}={}){const r=Se(),i=S(e)?e():e,{state:s,setState:c}=be({key:n,initialValue:i??r}),l=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),a=(0,o.useCallback)((()=>{c("dark")}),[c]),d=(0,o.useCallback)((()=>{c("light")}),[c]),u=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(t&&document.body.classList.add(s),()=>{t&&document.body.classList.remove(s)})),[s,t]),{colorScheme:s,preferredColorScheme:r,setToggleMode:l,setDarkMode:a,setLightMode:d,setPreferredMode:u}}function ke(e=0){const[n,t]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{t((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{t((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{t(e)}),[e]);return{counter:n,setCounter:t,increment:r,decrement:i,reset:s}}function Ce({maxStep:e,initialStep:n=0,infinite:t=!1}){const[r,i]=(0,o.useState)(n),s=r0,l=(0,o.useCallback)(((n,t)=>{const o="nextStep"===n;return t?o?0:e:o?r+1:r-1}),[e,r]),a=(0,o.useCallback)(((e,n,o)=>{if(n&&!t)return;const s=l(e,n);o&&o({prev:r,next:s}),i(s)}),[t,r,l]),d=(0,o.useCallback)((e=>{a("nextStep",!s,e)}),[s,a]),u=(0,o.useCallback)((e=>{a("prevStep",!c,e)}),[c,a]),h=(0,o.useCallback)(((n,t)=>{const o=S(n)?n(r):n;if(o>=0&&o<=e)return t&&t({prev:r,next:o}),void i(n);throw new Error("Step not valid")}),[r,e]),f=(0,o.useCallback)((e=>{e&&e({prev:r,next:n}),i(n)}),[r,n]);return{currentStep:r,hasNextStep:s,hasPrevStep:c,goToNextStep:d,goToPrevStep:u,setStep:h,resetStep:f}}function Oe(e,n=0){const{currentStep:t,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=Ce({maxStep:e.length-1,initialStep:n,infinite:!0});return{currentItem:e[t],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}function Re(e,n,t={}){const[r,i]=(0,o.useState)(e);return[r,_(i,n,t)]}function Ne(e,n={}){const[t,r]=(0,o.useState)(""),[i,s]=Re("",e,n);return{value:t,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:n}=e.target;r(n),s(n)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Ve(e,{preserveTitleOnUnmount:n=!1}={}){ee((()=>{const t=document.title;return document.title=e,()=>{n||(document.title=t)}}),[e,n])}function Le({onFocus:e=k,onBlur:n=k}={}){const[t,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=W((n=>{r(!0),e(n)})),c=W((e=>{r(!1),n(e)})),l=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return te(i,"focus",s),te(i,"blur",c),{ref:i,isFocus:t,setFocus:l}}function Fe({onEnter:e=k,onLeave:n=k}={}){const[t,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=W((n=>{r(!0),e(n)})),c=W((e=>{r(!1),n(e)}));return te(i,"mouseenter",s),te(i,"mouseleave",c),{ref:i,isHovered:t}}const Pe=e=>{var n;return I(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(n=e?.enabled)||void 0===n||n}};function Me(e,n){const t=(0,o.useRef)(),r=W(e),{delay:i,enabled:s}=Pe(n),c=(0,o.useCallback)((()=>{t.current=window.setInterval(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{t.current&&(clearInterval(t.current),t.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>l()}),[l,c,s,i]),{set:c,reset:a,clear:l}}function $e({enabled:e=!0,keyDownCallbackMap:n={},allKeyDownCallback:t}){const r=(0,o.useRef)(null),i=W((e=>{if(e.stopPropagation(),t)return void t(e);const r=e.key,o=n[r];S(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const n=r.current;return n.addEventListener("keydown",i),()=>n.removeEventListener("keydown",i)}),[e,i]),r}const Te={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function De(){const e=(0,o.useRef)(null),[n,t]=(0,o.useState)(Te),r=(0,o.useCallback)((n=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l}=n;let a=null,d=null,u=null,h=null;if(e.current){const n=e.current.getBoundingClientRect();a=i-n.left,d=s-n.top,u=n.left+window.scrollX,h=n.top+window.scrollY}t({screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l,elementRelativeX:a,elementRelativeY:d,elementPositionX:u,elementPositionY:h})}),[]);return te(document,"mousemove",r),{ref:e,position:n}}const Ae=()=>navigator.onLine,Ye=()=>!0,Be=(e,n,t)=>{const r=t=>(n(t),e()),o=n=>(t(n),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function We({onlineAction:e=k,offlineAction:n=k}={}){const t=W((t=>Be(t,e,n)));return(0,o.useSyncExternalStore)(t,Ae,Ye)}function Xe(e){const n=(0,o.useRef)(e);return(0,o.useEffect)((()=>{n.current=e}),[e]),n.current}const ze={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function _e(e=k){const[n,t]=(0,o.useState)(ze),r=(0,o.useRef)(null),i=W((([n])=>{n&&(e(n),t(n.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,n=new ResizeObserver(i);return n.observe(e),()=>{n.unobserve(e)}}),[i]),{ref:r,contentRect:n}}function Je({autoLock:e=!0}={}){const n=(0,o.useRef)(null),t=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=n.current;t.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!t.current)return;n.current.style.overflow=t.current}),[]);return ee((()=>(n.current||(n.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:n,lock:r,unlock:i}}const He=(e,n,t)=>"start"===t?0:"center"===t?-e/2+n/2:-e+n,Ue=(e,n,t)=>{const r=n.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:s="start",alignX:c="start"}=t;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+He(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+He(window.innerWidth,r.width,c)};const l=e.getBoundingClientRect();return{top:r.top-l.top+e.scrollTop+i+He(l.height,r.height,s),left:r.left-l.left+e.scrollLeft+o+He(l.width,r.width,c)}};function Ke(){const e=(0,o.useRef)(null),n=(0,o.useCallback)(((n={})=>{if(!e.current)return;const{left:t=0,top:r=0,behavior:o="auto"}=n;e.current.scrollTo({left:t,top:r,behavior:o})}),[]),t=(0,o.useCallback)(((n,t={})=>{if(!n||!e.current)return;const r=e.current,{behavior:o="auto"}=t,{left:i,top:s}=Ue(r,n,t);r.scrollTo({top:s,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:n,scrollToElement:t}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function en(e){const{key:n}=e,t="initialValue"in e?e.initialValue:null,r=S(t)?t():t,i=(0,o.useSyncExternalStore)(Ge,(()=>Qe(n)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>i?C(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const t=Qe(n),o=t?C(t):r,i=S(e)?e(o):e;window.sessionStorage.setItem(n,JSON.stringify(i)),Ze.dispatchEvent()}catch(t){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${n}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${t}`)}}),[n,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(n),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${n}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[n])}}function nn(e){var n;const t="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(n=e?.storageOptions)&&void 0!==n?n:{},[s,c]=(0,o.useState)(t),l=(0,o.useCallback)((e=>{c((n=>{const t=S(e)?e(n):e;return r&&i&&function(e,n,t){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=S(t)?t():t;r.setItem(n,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${n}" in ${e}: ${r}`)}}(r,i,t),t}))}),[r,i]),a=(0,o.useCallback)((()=>{r&&i&&function(e,n){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}(r,i),c(null)}),[r,i]);return Object.assign({state:s,setState:l,clearState:a},Ce(e))}function tn(e,n,t={}){const r=W(e),i=z(t),s=(0,o.useMemo)((()=>(0,c.A)(r,n,i)),[r,n,i]);return X((()=>s.cancel())),s}const rn=e=>{var n;return I(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(n=e?.enabled)||void 0===n||n}};function on(e,n){const t=(0,o.useRef)(),r=W(e),{delay:i,enabled:s}=rn(n),c=(0,o.useCallback)((()=>{t.current=setTimeout(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{t.current&&(clearTimeout(t.current),t.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>l()}),[c,l,i,s]),{set:c,reset:a,clear:l}}function sn(e,n){const[t,r]=(0,o.useState)(e);return[t,(0,o.useCallback)((()=>{r((t=>t===e?n:e))}),[e,n])]}function cn(){const[e,n]=(0,o.useState)(null);return ee((()=>{const e=new l.UAParser(window.navigator.userAgent);n(e.getResult())}),[]),e}function ln({name:e="vh",enabledResize:n=!1}={}){ee((()=>{const t=()=>{const n=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${n}px`)};return t(),n&&window.addEventListener("resize",t),()=>{n&&window.removeEventListener("resize",t)}}),[e,n])}const an={width:null,height:null};function dn({debounceWait:e}={}){const[n,t]=(0,o.useState)((()=>m()?an:{width:window.innerWidth,height:window.innerHeight})),r=_(t,e),i=(0,o.useCallback)((()=>{(e?r:t)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return te(window,"resize",i),n}function un(e,n,t){const{delay:r,enabled:i}=rn(n),{set:s,reset:c,clear:l}=on(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||c()}),[r,i,c,...t]),{set:s,reset:c,clear:l}}}}]); \ No newline at end of file diff --git a/assets/js/c060fdc4.e3c170be.js b/assets/js/c060fdc4.e3c170be.js deleted file mode 100644 index 63b0cec36..000000000 --- a/assets/js/c060fdc4.e3c170be.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[4991],{125:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"react/components/ClientGate","title":"ClientGate","description":"Client Side\uc5d0\uc11c\ub294 children\uc744, Server Side\uc5d0\uc11c\ub294 fallback component\ub97c \ubcf4\uc5ec\uc8fc\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","source":"@site/docs/react/components/ClientGate.mdx","sourceDirName":"react/components","slug":"/react/components/ClientGate","permalink":"/modern-kit/docs/react/components/ClientGate","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"AspectRatio","permalink":"/modern-kit/docs/react/components/AspectRatio"},"next":{"title":"DebounceHandler","permalink":"/modern-kit/docs/react/components/DebounceHandler"}}');var o=n(6206),i=n(3267),c=(n(4382),n(4027));const s={},a="ClientGate",l={},u=()=>{const e={div:"div",...(0,i.R)()};return(0,o.jsx)(c.bB,{fallback:(0,o.jsx)(e.div,{children:"\uc11c\ubc84 \ud658\uacbd\uc785\ub2c8\ub2e4."}),children:(0,o.jsx)(e.div,{children:"\ud074\ub77c\uc774\uc5b8\ud2b8 \ud658\uacbd\uc785\ub2c8\ub2e4."})})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"clientgate",children:"ClientGate"})}),"\n",(0,o.jsx)(t.p,{children:"Client Side\uc5d0\uc11c\ub294 children\uc744, Server Side\uc5d0\uc11c\ub294 fallback component\ub97c \ubcf4\uc5ec\uc8fc\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."}),"\n",(0,o.jsx)(t.p,{children:"Pure CSR \ud658\uacbd\uc5d0\uc11c \ub80c\ub354\uc2dc\uc5d0\ub294 \uccab \ub77c\uc774\ud504 \uc0ac\uc774\ud074\uc774 \uc218\ud589\ub418\uc5b4 mount\uac00 \uc644\ub8cc\ub418\uae30 \uc804\ubd80\ud130 \ud574\ub2f9 component\ub97c \ubcf4\uc5ec\uc90d\ub2c8\ub2e4."}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/ClientGate/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"\ninterface ClientGateProps {\n fallback?: JSX.Element;\n}\n\nconst ClientGate: ({\n fallback = <>\n}: PropsWithChildren) => JSX.Element;\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { ClientGate } from '@modern-kit/react'\n\nconst Example = () => {\n return (\n \uc11c\ubc84 \ud658\uacbd\uc785\ub2c8\ub2e4.
    }>\n
    \ud074\ub77c\uc774\uc5b8\ud2b8 \ud658\uacbd\uc785\ub2c8\ub2e4.
    \n \n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(u,{})]})}function h(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(f,{...e})}):f(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>$e,$I:()=>oe,AE:()=>We,BL:()=>J,DX:()=>F,FT:()=>st,Fo:()=>et,Hn:()=>it,I5:()=>je,JF:()=>Te,K:()=>le,K$:()=>ze,M0:()=>Ie,ML:()=>ne,Mj:()=>ye,Mk:()=>Pe,Mo:()=>ie,NT:()=>Xe,QV:()=>Ke,Ub:()=>Ce,Ut:()=>Ee,W7:()=>K,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>Be,Zu:()=>ae,_1:()=>Oe,_g:()=>nt,aL:()=>z,aY:()=>Fe,bB:()=>A,d7:()=>_,eG:()=>ct,fN:()=>se,fm:()=>q,gl:()=>$,hN:()=>V,iD:()=>de,iQ:()=>Le,jd:()=>ce,lW:()=>lt,oD:()=>H,oo:()=>Re,pL:()=>Q,qi:()=>ue,rN:()=>Ne,tD:()=>ke,u8:()=>Z,wY:()=>_e,xV:()=>L,xh:()=>tt,zy:()=>U});var r=n(6206),o=n(4382),i=n(3683),c=n(5086),s=n(7197),a=(n(1604),n(5938));function l(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function g(){return!m()}function w(e){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const b=e=>f(void 0,0,void 0,(function*(){return w(yield(yield fetch(e)).text())}));function v(e,t){var n;return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return b(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield p(e,h[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||S(e)&&S(t)&&isNaN(e)&&isNaN(t))return!0;if(k(e)&&k(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function C(e,t){return x(e,t,new WeakMap)}function k(e){return"function"==typeof e}function S(e){return"number"==typeof e}function E(e){return!function(e){return Object(e)!==e}(e)}function j(){}function R(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const O=(...e)=>t=>e.forEach((e=>{if(k(e))e(t);else if(null!=e){e.current=t}}));function I(...e){return(0,o.useCallback)(O(...e),e)}const F=o.forwardRef(((e,t)=>{const{children:n}=e,i=l(e,["children"]),c=o.Children.toArray(n),s=c.find(P);if(s){const e=s.props.children,n=c.map((t=>t===s?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(N,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(N,Object.assign({},i,{ref:t,children:n}))}));F.displayName="Slot";const N=o.forwardRef(((e,t)=>{const{children:n}=e,r=l(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?O(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));N.displayName="SlotClone";const L=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function P(e){return o.isValidElement(e)&&e.type===L}var M="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const $=d(((e,t)=>{var{ratio:n,style:o,as:c="div",asChild:s=!1}=e,a=l(e,["ratio","style","as","asChild"]);const u=s?F:c,d=Object.assign({aspectRatio:n},o),f=s?a.className:i(M,a.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},a))})),T=()=>j,Y=()=>!1,X=()=>!0;function A({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(T,Y,X)?e:t}function D(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const V=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>D()?(0,r.jsx)(r.Fragment,{children:t}):e;function W(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function B(e){const t=W(e);(0,o.useEffect)((()=>()=>t()),[t])}function G(e,t=C){const[n,r]=(0,o.useState)(e),i=W(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function _(e,t,n){const r=W(e),i=G(n),s=(0,o.useMemo)((()=>(0,c.A)(r,t,i)),[r,t,i]);return B((()=>s.cancel())),s}const z=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),c=_(((...e)=>{const n=i?.props;if(n&&k(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:c})};function J({onIntersectStart:e=j,onIntersectEnd:t=j,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:c=0,rootMargin:s="0px 0px 0px 0px"}){const a=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=W((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(l.current=!0,a.current+=1,e(n)):l.current&&(l.current=!1,a.current+=1,t(n)),r&&a.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:c,root:i,rootMargin:s}),u.current.observe(e))}),[n,c,i,s,d])}}const H=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:c}=e,s=l(e,["src","threshold","root","rootMargin"]);const{ref:a}=J({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:c});return(0,r.jsx)("img",Object.assign({ref:I(t,a)},s))}));H.displayName="LazyImage";const K=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:c,className:s,style:a,duration:u="0.2s",onLoad:d}=e,f=l(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,g=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),w=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},a)),[m,u,a]),b=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),v=s?`lazy-image-wrapper ${s}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:g,children:[m&&c,(0,r.jsx)(H,Object.assign({ref:t,width:n,height:i,style:w,onLoad:b},f))]})}));K.displayName="FallbackLazyImage";const U=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},Z=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:c="after",rootMargin:s="150px 0px"})=>{const{ref:a}=J({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:s});return(0,r.jsxs)(r.Fragment,{children:["before"===c&&(0,r.jsx)("div",{ref:a}),t,"after"===c&&(0,r.jsx)("div",{ref:a})]})},Q=d(((e,t)=>{var{children:n,as:i="div",asChild:c=!1}=e,s=l(e,["children","as","asChild"]);const a=c?F:i,{ref:u}=J(s);if(c&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(a,Object.assign({ref:O(t,u)},s,{children:n}))})),q=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return E(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=g()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=W(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:c=!1,onPointerDown:s,excludeRefs:a=[]}=e,u=l(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(s,{excludeRefs:a}),f=c?F:i;if(c&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:O(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:c=1,includeLastSeparator:s=!1})=>{const a=(0,o.useCallback)((e=>e===t.length-1?s:(e+1)%c==0),[s,c,t.length]);return(0,r.jsx)(q,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),a(t)&&n]})})},ce=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),se=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function ae(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function le(e=!0){const t=k(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield w(e);return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),a=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:c,readText:s,readContents:a}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],ge=me("localStorage"),we=e=>window.localStorage.getItem(e),be=e=>JSON.stringify(e),ve=e=>(ge.subscribe(e),()=>{ge.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=k(n)?n():n,i=(0,o.useSyncExternalStore)(ve,(()=>we(t)),(()=>be(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=we(t),o=n?R(n):r,i=k(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),ge.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ge.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>g()?window.matchMedia(e).matches:t??!1;function Ce(e,t){const[n,r]=(0,o.useState)(xe(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function ke(){return Ce("(prefers-color-scheme: dark)")?"dark":"light"}const Se="color-scheme";function Ee({defaultValue:e,key:t=Se,shouldSetBodyClass:n=!1}={}){const r=ke(),i=k(e)?e():e,{state:c,setState:s}=ye({key:t,initialValue:i??r}),a=(0,o.useCallback)((()=>{s((e=>"dark"===e?"light":"dark"))}),[s]),l=(0,o.useCallback)((()=>{s("dark")}),[s]),u=(0,o.useCallback)((()=>{s("light")}),[s]),d=(0,o.useCallback)((()=>{s(r)}),[s,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(c),()=>{n&&document.body.classList.remove(c)})),[c,n]),{colorScheme:c,preferredColorScheme:r,setToggleMode:a,setDarkMode:l,setLightMode:u,setPreferredMode:d}}function je(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),c=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:c}}function Re({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),c=r0,a=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),l=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const c=a(e,t);o&&o({prev:r,next:c}),i(c)}),[n,r,a]),u=(0,o.useCallback)((e=>{l("nextStep",!c,e)}),[c,l]),d=(0,o.useCallback)((e=>{l("prevStep",!s,e)}),[s,l]),f=(0,o.useCallback)(((t,n)=>{const o=k(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:c,hasPrevStep:s,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Oe(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:c}=Re({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:c}}function Ie(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,_(i,t,n)]}function Fe(e,t={}){const[n,r]=(0,o.useState)(""),[i,c]=Ie("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),c(t)}),[c]),onReset:(0,o.useCallback)((()=>{r(""),c("")}),[c])}}function Ne(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Le({onFocus:e=j,onBlur:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),c=W((t=>{r(!0),e(t)})),s=W((e=>{r(!1),t(e)})),a=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",c),ne(i,"blur",s),{ref:i,isFocus:n,setFocus:a}}function Pe({onEnter:e=j,onLeave:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),c=W((t=>{r(!0),e(t)})),s=W((e=>{r(!1),t(e)}));return ne(i,"mouseenter",c),ne(i,"mouseleave",s),{ref:i,isHovered:n}}const Me=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function $e(e,t){const n=(0,o.useRef)(),r=W(e),{delay:i,enabled:c}=Me(t),s=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),s()}),[a,s]);return(0,o.useEffect)((()=>{if(!(i<0)&&c)return s(),()=>a()}),[a,s,c,i]),{set:s,reset:l,clear:a}}function Te({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=W((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];k(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const Ye={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Xe(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Ye),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:c,pageX:s,pageY:a}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=i-t.left,u=c-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:c,pageX:s,pageY:a,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Ae=()=>navigator.onLine,De=()=>!0,Ve=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function We({onlineAction:e=j,offlineAction:t=j}={}){const n=W((n=>Ve(n,e,t)));return(0,o.useSyncExternalStore)(n,Ae,De)}function Be(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const Ge={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function _e(e=j){const[t,n]=(0,o.useState)(Ge),r=(0,o.useRef)(null),i=W((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function ze({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:c="start",alignX:s="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+Je(window.innerHeight,r.height,c),left:r.left+window.scrollX+o+Je(window.innerWidth,r.width,s)};const a=e.getBoundingClientRect();return{top:r.top-a.top+e.scrollTop+i+Je(a.height,r.height,c),left:r.left-a.left+e.scrollLeft+o+Je(a.width,r.width,s)}};function Ke(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:c}=He(r,t,n);r.scrollTo({top:c,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ue=me("sessionStorage"),Ze=e=>window.sessionStorage.getItem(e),Qe=e=>JSON.stringify(e),qe=e=>(Ue.subscribe(e),()=>{Ue.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=k(n)?n():n,i=(0,o.useSyncExternalStore)(qe,(()=>Ze(t)),(()=>Qe(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Ze(t),o=n?R(n):r,i=k(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ue.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ue.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[c,s]=(0,o.useState)(n),a=(0,o.useCallback)((e=>{s((t=>{const n=k(e)?e(t):e;return r&&i&&function(e,t,n){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=k(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),l=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),s(null)}),[r,i]);return Object.assign({state:c,setState:a,clearState:l},Re(e))}function nt(e,t,n={}){const r=W(e),i=G(n),c=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return B((()=>c.cancel())),c}const rt=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=W(e),{delay:i,enabled:c}=rt(t),s=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),s()}),[a,s]);return(0,o.useEffect)((()=>{if(!(i<0)&&c)return s(),()=>a()}),[s,a,i,c]),{set:s,reset:l,clear:a}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function ct(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new a.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function st({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const at={width:null,height:null};function lt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?at:{width:window.innerWidth,height:window.innerHeight})),r=_(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:c,reset:s,clear:a}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||s()}),[r,i,s,...n]),{set:c,reset:s,clear:a}}}}]); \ No newline at end of file diff --git a/assets/js/c060fdc4.f6ac9307.js b/assets/js/c060fdc4.f6ac9307.js new file mode 100644 index 000000000..5cf975721 --- /dev/null +++ b/assets/js/c060fdc4.f6ac9307.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[4991],{1526:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>h,assets:()=>m,contentTitle:()=>p,default:()=>v,frontMatter:()=>f,metadata:()=>r,toc:()=>g});const r=JSON.parse('{"id":"react/components/ClientGate","title":"ClientGate","description":"Client Side\uc5d0\uc11c\ub294 children\uc744, Server Side\uc5d0\uc11c\ub294 fallback component\ub97c \ubcf4\uc5ec\uc8fc\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","source":"@site/docs/react/components/ClientGate.mdx","sourceDirName":"react/components","slug":"/react/components/ClientGate","permalink":"/modern-kit/docs/react/components/ClientGate","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"AspectRatio","permalink":"/modern-kit/docs/react/components/AspectRatio"},"next":{"title":"DebounceHandler","permalink":"/modern-kit/docs/react/components/DebounceHandler"}}');var o=t(6206),i=t(3267),c=t(4382),a=t(9340);const s=()=>a.lQ,l=()=>!1,d=()=>!0;function u({fallback:e=(0,o.jsx)(o.Fragment,{}),children:n}){return(0,c.useSyncExternalStore)(s,l,d)?e:n}const f={},p="ClientGate",m={},h=()=>{const e={div:"div",...(0,i.R)()};return(0,o.jsx)(u,{fallback:(0,o.jsx)(e.div,{children:"\uc11c\ubc84 \ud658\uacbd\uc785\ub2c8\ub2e4."}),children:(0,o.jsx)(e.div,{children:"\ud074\ub77c\uc774\uc5b8\ud2b8 \ud658\uacbd\uc785\ub2c8\ub2e4."})})},g=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function w(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"clientgate",children:"ClientGate"})}),"\n",(0,o.jsx)(n.p,{children:"Client Side\uc5d0\uc11c\ub294 children\uc744, Server Side\uc5d0\uc11c\ub294 fallback component\ub97c \ubcf4\uc5ec\uc8fc\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."}),"\n",(0,o.jsx)(n.p,{children:"Pure CSR \ud658\uacbd\uc5d0\uc11c \ub80c\ub354\uc2dc\uc5d0\ub294 \uccab \ub77c\uc774\ud504 \uc0ac\uc774\ud074\uc774 \uc218\ud589\ub418\uc5b4 mount\uac00 \uc644\ub8cc\ub418\uae30 \uc804\ubd80\ud130 \ud574\ub2f9 component\ub97c \ubcf4\uc5ec\uc90d\ub2c8\ub2e4."}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/ClientGate/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"\ninterface ClientGateProps {\n fallback?: JSX.Element;\n}\n\nconst ClientGate: ({\n fallback = <>\n}: PropsWithChildren) => JSX.Element;\n"})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { ClientGate } from '@modern-kit/react'\n\nconst Example = () => {\n return (\n \uc11c\ubc84 \ud658\uacbd\uc785\ub2c8\ub2e4.
    }>\n
    \ud074\ub77c\uc774\uc5b8\ud2b8 \ud658\uacbd\uc785\ub2c8\ub2e4.
    \n \n );\n};\n"})}),"\n",(0,o.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(h,{})]})}function v(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(w,{...e})}):w(e)}},3267:(e,n,t)=>{t.d(n,{R:()=>c,x:()=>a});var r=t(4382);const o={},i=r.createContext(o);function c(e){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),r.createElement(i.Provider,{value:n},e.children)}},9340:(e,n,t)=>{function r(e,n,t,r){return new(t||(t=Promise))((function(o,i){function c(e){try{s(r.next(e))}catch(n){i(n)}}function a(e){try{s(r.throw(e))}catch(n){i(n)}}function s(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(c,a)}s((r=r.apply(e,n||[])).next())}))}t.d(n,{Et:()=>x,Fr:()=>a,Gp:()=>w,Ol:()=>E,Qd:()=>j,S$:()=>c,Tn:()=>v,Zp:()=>f,dK:()=>l,fl:()=>G,gD:()=>b,i5:()=>m,if:()=>p,l6:()=>C,lQ:()=>k,nS:()=>u,ni:()=>$,oc:()=>s}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,n)=>new Promise(((t,r)=>{e.toBlob((e=>{e?t(e):r(new Error(`Failed to create blob with format ${n}`))}),n)}));function c(){return"undefined"==typeof window}function a(){if(c())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function s(){return!c()}function l(e){return r(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const d=e=>r(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return l(yield n.text())}));function u(e,n){var t;return r(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return d(e);if(!("write"in window.navigator.clipboard))return d(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return d(e);const c=yield function(e,n="png"){return new Promise(((t,c)=>{const a=new Image;a.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=a.width,e.height=a.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(a,0,0);const c=yield i(e,o[n]);t(c)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),c(r)}})),a.onerror=()=>{c(new Error("Failed to load image"))},a.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[c.type]:c})]),c}catch(c){throw console.error(`Failed to copy to clipboard. message: ${c.message}`),c}}))}function f(){return r(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(){return r(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function m(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const h=(e,n,t)=>{const r=Object.keys(e),o=Object.keys(n);if(r.length!==o.length)return!1;for(let i=0;i{if(e===n)return!0;if(x(e)&&x(n)&&isNaN(e)&&isNaN(n))return!0;if(v(e)&&v(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const r=[...e],o=[...n];return h(r,o,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[r,o]of e)if(!n.has(r)||!g(o,n.get(r),t))return!1;return!0}return h(e,n,t)};function w(e,n){return g(e,n,new WeakMap)}function v(e){return"function"==typeof e}function b(e){return null==e}function x(e){return"number"==typeof e}function y(e){return!function(e){return Object(e)!==e}(e)}function j(e){return y(e)&&"[object Object]"===Object.prototype.toString.call(e)}function C(e){return e===window}function k(){}function E(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function S(e){return Object.keys(e)}const F={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};S(F);function G(e,n){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function $(e,n,t){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=v(t)?t():t;r.setItem(n,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${n}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/c55bf516.d54c1b72.js b/assets/js/c55bf516.d54c1b72.js deleted file mode 100644 index 57c793c6f..000000000 --- a/assets/js/c55bf516.d54c1b72.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[1196],{3613:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>u,assets:()=>a,contentTitle:()=>i,default:()=>h,frontMatter:()=>c,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"react/hooks/useKeyDown","title":"useKeyDown","description":"ref\ub97c \uc804\ub2ec\ud55c \uc694\uc18c\uac00 \ud3ec\ucee4\uc2f1\ub41c \uc0c1\ud0dc\uc5d0\uc11c keydown \uc774\ubca4\ud2b8 \ubc1c\uc0dd \uc2dc keyDownCallbackMap\ub85c \uc9c0\uc815\ud55c key\uc5d0 \ud2b8\ub9ac\uac70\ub418\uc5b4 \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useKeyDown.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useKeyDown","permalink":"/modern-kit/docs/react/hooks/useKeyDown","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useIsomorphicLayoutEffect","permalink":"/modern-kit/docs/react/hooks/useIsomorphicLayoutEffect"},"next":{"title":"useLocalStorage","permalink":"/modern-kit/docs/react/hooks/useLocalStorage"}}');var o=t(6206),l=t(3267),s=t(4027);const c={},i="useKeyDown",a={},u=()=>{const e={input:"input",...(0,l.R)()},n=(0,s.JF)({enabled:!0,keyDownCallbackMap:{Enter:e=>console.log("Enter",e.key),Shift:e=>console.log("Shift",e.key)," ":e=>console.log("Space",e.key)}});return(0,o.jsx)(e.input,{ref:n,placeholder:"\ud3ec\ucee4\uc2a4\ub97c \ud558\uace0, Enter, Shift, Space \ub20c\ub7ec\ubcf4\uc138\uc694",style:{width:"300px"}})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"AllKeyDownCallback",id:"allkeydowncallback",level:3},{value:"KeyDownCallbackMap",id:"keydowncallbackmap",level:3},{value:"Example",id:"example",level:2},{value:"Note",id:"note",level:2}];function f(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,l.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"usekeydown",children:"useKeyDown"})}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"ref"}),"\ub97c \uc804\ub2ec\ud55c \uc694\uc18c\uac00 \ud3ec\ucee4\uc2f1\ub41c \uc0c1\ud0dc\uc5d0\uc11c ",(0,o.jsx)(n.code,{children:"keydown"})," \uc774\ubca4\ud2b8 \ubc1c\uc0dd \uc2dc ",(0,o.jsx)(n.code,{children:"keyDownCallbackMap"}),"\ub85c \uc9c0\uc815\ud55c ",(0,o.jsx)(n.code,{children:"key"}),"\uc5d0 \ud2b8\ub9ac\uac70\ub418\uc5b4 \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"keyDownCallbackMap"}),"\uc758 key\ub294 ",(0,o.jsx)(n.code,{children:"KeyboardEvent.key"}),"\uac00 \ubc18\ud658\ud558\ub294 \uac12\uc774 \ub4e4\uc5b4\uac00\uc57c \ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["\ud83d\udca1 ",(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values",children:"Key values for keyboard events - MDN"})})," \uc744 \uae30\ubc18\uc73c\ub85c \uc790\uc8fc \uc0ac\uc6a9\ub418\ub294 ",(0,o.jsx)(n.code,{children:"KeyboardEvent.key"}),"\ub4e4\uc740 ",(0,o.jsx)(n.code,{children:"\ud0c0\uc785 \ucd94\ub860"}),"\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4. \ud0c0\uc785 \ucd94\ub860\ub418\uc9c0 \uc54a\uc740 ",(0,o.jsx)(n.code,{children:"KeyboardEvent.key"}),"\ub294 \uc9c1\uc811 \uc785\ub825\ud558\uc154\uc57c \ub429\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.li,{children:["\ud83d\udca1 ",(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useKeyDown/keyDownCallbackMap.ts",children:"\ud0c0\uc785 \ucd94\ub860\uc744 \uc704\ud574 \uc81c\uacf5\ud558\ub294 KeyDownCallbackMap \uc778\ud130\ud398\uc774\uc2a4"})})]}),"\n"]}),"\n",(0,o.jsxs)(n.p,{children:["\ub9cc\uc57d ",(0,o.jsx)(n.code,{children:"\ubaa8\ub4e0 KeyboardEvent.key"}),"\uc5d0 \ub300\ud574 \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud558\uace0 \uc2f6\ub2e4\uba74 ",(0,o.jsx)(n.code,{children:"allKeyDownCallback"})," props\ub97c \uc774\uc6a9 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["\ud83d\udca1 ",(0,o.jsx)(n.strong,{children:"allKeyDownCallback\uc774 \uc874\uc7ac \ud560 \uacbd\uc6b0 keyDownCallbackMap\uc73c\ub85c \uc9c0\uc815\ud55c \ucf5c\ubc31 \ud568\uc218\ub294 \ubb34\uc2dc\ud569\ub2c8\ub2e4."})]}),"\n"]}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"enabled"})," \uc635\uc158\uc744 \ud1b5\ud574 \uc6d0\ud558\ub294 \uc870\uac74\uc5d0 keydown \uc774\ubca4\ud2b8\ub97c \ubc14\uc778\ub529 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"targetRef"}),"\uac00 \ud560\ub2f9\ub418\uc9c0 \uc54a\uc73c\uba74 \uae30\ubcf8\uc801\uc73c\ub85c ",(0,o.jsx)(n.code,{children:"window"}),"\uc5d0 \uc774\ubca4\ud2b8\uac00 \ubc14\uc778\ub529 \ub429\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useKeyDown/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseKeyDownProps {\n enabled?: boolean; // default: true\n keyDownCallbackMap?: Partial; // default: {}\n allKeyDownCallback?: (event: KeyboardEvent) => void;\n}\n"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"function useKeyDown({\n enabled,\n keyDownCallbackMap,\n allKeyDownCallback,\n}: UseKeyDownProps): RefObject;\n\nfunction useKeyDown({\n enabled,\n keyDownCallbackMap,\n allKeyDownCallback,\n}: UseKeyDownProps): RefObject;\n\nfunction useKeyDown({\n enabled,\n keyDownCallbackMap,\n allKeyDownCallback,\n}: UseKeyDownProps): RefObject \n"})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.h3,{id:"allkeydowncallback",children:"AllKeyDownCallback"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"\ubaa8\ub4e0 \ud0a4\uac00 \ub20c\ub838\uc744 \ub54c \ud638\ucd9c\ub420 \uacf5\ud1b5 \ucf5c\ubc31 \ud568\uc218\uc785\ub2c8\ub2e4."}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useKeyDown } from '@modern-kit/react';\n\nconst Example = () => {\n const targetRef = useKeyDown({\n enabled: true, // default: true\n allKeyDownCallback: (event) => console.log('All Key', event.key)\n });\n\n return ;\n};\n"})}),"\n",(0,o.jsx)(n.h3,{id:"keydowncallbackmap",children:"KeyDownCallbackMap"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"\ud2b9\uc815 \ud0a4\uc5d0 \ud574\ub2f9\ud558\ub294 \ucf5c\ubc31\uc744 \ub9e4\ud551\ud558\uace0, \ud574\ub2f9 \ud0a4\uac00 \ub20c\ub838\uc744 \ub54c \ud638\ucd9c\ub420 \ucf5c\ubc31 \ud568\uc218\ub4e4\uc744 \ud638\ucd9c\ud569\ub2c8\ub2e4."}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useKeyDown } from '@modern-kit/react';\n\nconst Example = () => {\n const targetRef = useKeyDown({\n enabled: true, // default: true\n keyDownCallbackMap: {\n Enter: (event) => console.log('Enter', event.key), \n Shift: (event) => console.log('Shift', event.key),\n ' ': (event) => console.log('Space', event.key),\n }\n });\n\n return (\n \n );\n};\n"})}),"\n",(0,o.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(u,{}),"\n",(0,o.jsx)(n.h2,{id:"note",children:"Note"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values",children:"Key values for keyboard events(en) - MDN"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key",children:"KeyboardEvent.key(en) - MDN"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://developer.mozilla.org/ko/docs/Web/API/KeyboardEvent/key",children:"KeyboardEvent.key(ko) - MDN"})}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(f,{...e})}):f(e)}},4027:(e,n,t)=>{t.d(n,{$$:()=>Pe,$I:()=>oe,AE:()=>Ye,BL:()=>U,DX:()=>O,FT:()=>cn,Fo:()=>en,Hn:()=>ln,I5:()=>Se,JF:()=>Fe,K:()=>ae,K$:()=>Be,M0:()=>Me,ML:()=>te,Mj:()=>ve,Mk:()=>Ne,Mo:()=>le,NT:()=>$e,QV:()=>Je,Ub:()=>xe,Ut:()=>Ee,W7:()=>J,WY:()=>re,Y1:()=>dn,Z3:()=>on,ZC:()=>ze,Zu:()=>ie,_1:()=>Re,_g:()=>tn,aL:()=>B,aY:()=>Oe,bB:()=>A,d7:()=>V,eG:()=>sn,fN:()=>ce,fm:()=>G,gl:()=>P,hN:()=>W,iD:()=>de,iQ:()=>Ie,jd:()=>se,lW:()=>un,oD:()=>H,oo:()=>De,pL:()=>q,qi:()=>ue,rN:()=>Ke,tD:()=>je,u8:()=>Q,wY:()=>Ve,xV:()=>I,xh:()=>nn,zy:()=>Z});var r=t(6206),o=t(4382),l=t(3683),s=t(5086),c=t(7197),i=(t(1604),t(5938));function a(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((t,r)=>{e.toBlob((e=>{e?t(e):r(new Error(`Failed to create blob with format ${n}`))}),n)}));function w(){return typeof window>"u"}function y(){return!w()}function m(e){return f(this,0,void 0,(function*(){if(!y())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const b=e=>f(void 0,0,void 0,(function*(){return m(yield(yield fetch(e)).text())}));function g(e,n){var t;return f(this,0,void 0,(function*(){if(!y())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(t=n?.toText)&&void 0!==t&&t)return b(e);const r=yield function(e,n="png"){return new Promise(((t,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const l=yield p(e,h[n]);t(l)}catch(l){console.error(`Failed to load image. message: ${l.mesaage}`),r(l)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const v=(e,n,t)=>{const r=Object.keys(e),o=Object.keys(n);if(r.length!==o.length)return!1;for(let l=0;l{if(e===n||C(e)&&C(n)&&isNaN(e)&&isNaN(n))return!0;if(j(e)&&j(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const r=[...e],o=[...n];return v(r,o,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[r,o]of e)if(!n.has(r)||!k(o,n.get(r),t))return!1;return!0}return v(e,n,t)};function x(e,n){return k(e,n,new WeakMap)}function j(e){return"function"==typeof e}function C(e){return"number"==typeof e}function E(e){return!function(e){return Object(e)!==e}(e)}function S(){}function D(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}const R=(...e)=>n=>e.forEach((e=>{if(j(e))e(n);else if(null!=e){e.current=n}}));function M(...e){return(0,o.useCallback)(R(...e),e)}const O=o.forwardRef(((e,n)=>{const{children:t}=e,l=a(e,["children"]),s=o.Children.toArray(t),c=s.find(N);if(c){const e=c.props.children,t=s.map((n=>n===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:n));return(0,r.jsx)(K,Object.assign({},l,{ref:n,children:o.isValidElement(e)?o.cloneElement(e,void 0,t):null}))}return(0,r.jsx)(K,Object.assign({},l,{ref:n,children:t}))}));O.displayName="Slot";const K=o.forwardRef(((e,n)=>{const{children:t}=e,r=a(e,["children"]);if(o.isValidElement(t)){const e=function(e){var n,t;let r=null===(n=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(t=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(t);return o.cloneElement(t,Object.assign(Object.assign({},function(e,n){const t=Object.assign({},n);for(const r in n){const o=e[r],l=n[r];/^on[A-Z]/.test(r)?o&&l?t[r]=(...e)=>{l(...e),o(...e)}:o&&(t[r]=o):"style"===r?t[r]=Object.assign(Object.assign({},o),l):"className"===r&&(t[r]=[o,l].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),t)}(r,t.props)),{ref:n?R(n,e):e}))}return o.Children.count(t)>1?o.Children.only(null):null}));K.displayName="SlotClone";const I=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function N(e){return o.isValidElement(e)&&e.type===I}var L="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const P=d(((e,n)=>{var{ratio:t,style:o,as:s="div",asChild:c=!1}=e,i=a(e,["ratio","style","as","asChild"]);const u=c?O:s,d=Object.assign({aspectRatio:t},o),f=c?i.className:l(L,i.className);return(0,r.jsx)(u,Object.assign({ref:n,style:d,className:f},i))})),F=()=>S,T=()=>!1,$=()=>!0;function A({fallback:e=(0,r.jsx)(r.Fragment,{}),children:n}){return(0,o.useSyncExternalStore)(F,T,$)?e:n}function _(){const[e,n]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{n(!0)}),[]),e}const W=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:n})=>_()?(0,r.jsx)(r.Fragment,{children:n}):e;function Y(e){const n=(0,o.useRef)(e);return n.current=e,(0,o.useCallback)(((...e)=>n.current(...e)),[])}function z(e){const n=Y(e);(0,o.useEffect)((()=>()=>n()),[n])}function X(e,n=x){const[t,r]=(0,o.useState)(e),l=Y(n);return(0,o.useEffect)((()=>{l(t,e)||r(e)}),[l,t,e]),t}function V(e,n,t){const r=Y(e),l=X(t),c=(0,o.useMemo)((()=>(0,s.A)(r,n,l)),[r,n,l]);return z((()=>c.cancel())),c}const B=({children:e,capture:n,wait:t,options:r})=>{const l=o.Children.only(e),s=V(((...e)=>{const t=l?.props;if(t&&j(t[n]))return t[n](...e)}),t,r);return(0,o.cloneElement)(l,{[n]:s})};function U({onIntersectStart:e=S,onIntersectEnd:n=S,enabled:t=!0,calledOnce:r=!1,root:l=null,threshold:s=0,rootMargin:c="0px 0px 0px 0px"}){const i=(0,o.useRef)(0),a=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=Y((([t],o)=>{if(!t)return;const l=t.target;t.isIntersecting?(a.current=!0,i.current+=1,e(t)):a.current&&(a.current=!1,i.current+=1,n(t)),r&&i.current>1&&o.unobserve(l)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&t&&(u.current=new IntersectionObserver(d,{threshold:s,root:l,rootMargin:c}),u.current.observe(e))}),[t,s,l,c,d])}}const H=(0,o.forwardRef)(((e,n)=>{var{src:t,threshold:o,root:l,rootMargin:s}=e,c=a(e,["src","threshold","root","rootMargin"]);const{ref:i}=U({onIntersectStart:e=>{e.target.src=t},calledOnce:!0,threshold:o,root:l,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:M(n,i)},c))}));H.displayName="LazyImage";const J=(0,o.forwardRef)(((e,n)=>{var{width:t,height:l,fallback:s,className:c,style:i,duration:u="0.2s",onLoad:d}=e,f=a(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),w=!h,y=(0,o.useMemo)((()=>({position:"relative",width:t,height:l})),[t,l]),m=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:w?0:1,transition:`opacity ${u}`},i)),[w,u,i]),b=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),g=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:g,style:y,children:[w&&s,(0,r.jsx)(H,Object.assign({ref:n,width:t,height:l,style:m,onLoad:b},f))]})}));J.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:n,falseComponent:t})=>{const l=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:l?n:t})},Q=({onScrollAction:e,children:n,root:t,threshold:o,enabled:l,triggerPosition:s="after",rootMargin:c="150px 0px"})=>{const{ref:i}=U({onIntersectStart:e,root:t,threshold:o,enabled:l,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:i}),n,"after"===s&&(0,r.jsx)("div",{ref:i})]})},q=d(((e,n)=>{var{children:t,as:l="div",asChild:s=!1}=e,c=a(e,["children","as","asChild"]);const i=s?O:l,{ref:u}=U(c);if(s&&!o.isValidElement(t))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(i,Object.assign({ref:R(n,u)},c,{children:t}))})),G=({items:e=[],itemKey:n,renderItem:t})=>{const l=(0,o.useCallback)(((e,t)=>function(e){return E(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[n]||t:`${t}_${e}`),[n]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,n)=>(0,r.jsx)(o.Fragment,{children:t(e,n)},l(e,n))))})},ee=y()?o.useLayoutEffect:o.useEffect,ne=e=>!!e&&function(e,n){return Object.prototype.hasOwnProperty.call(e,n)}(e,"current");function te(e,n,t,r){const o=Y(t);ee((()=>{const t=ne(e)?e.current:e;if(t)return t.addEventListener(n,o,r),()=>{t.removeEventListener(n,o,r)}}),[n,e,r,o])}function re(e,n){const{excludeRefs:t}=n??{},r=(0,o.useRef)(null),l=(0,o.useMemo)((()=>function(){if(w())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return te(document,l,(({target:n})=>{if(!r.current)return;const o=r.current,l=t?.some((e=>{var t;return null===(t=e.current)||void 0===t?void 0:t.contains(n)}));!o.contains(n)&&!l&&e(o)})),r}const oe=d(((e,n)=>{var{children:t,as:l="div",asChild:s=!1,onPointerDown:c,excludeRefs:i=[]}=e,u=a(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:i}),f=s?O:l;if(s&&!o.isValidElement(t))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:R(d,n)},u,{children:t}))}));(0,o.createContext)({parentPortalElement:null});const le=({itemKey:e,items:n=[],separator:t,renderItem:l,separatorInterval:s=1,includeLastSeparator:c=!1})=>{const i=(0,o.useCallback)((e=>e===n.length-1?c:(e+1)%s==0),[c,s,n.length]);return(0,r.jsx)(G,{items:n,itemKey:e,renderItem:(e,n)=>(0,r.jsxs)(r.Fragment,{children:[l(e,n),i(n)&&t]})})},se=({children:e,condition:n,fallback:t=null})=>(e=>"function"==typeof e?e():e)(n)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:t}),ce=({caseBy:e,value:n,defaultComponent:t=null})=>{var o;return function(e){return null==e}(n)?(0,r.jsx)(r.Fragment,{children:t}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[n])&&void 0!==o?o:t})};function ie(e,n){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),n)}function ae(e=!0){const n=j(e)?e():e;(0,o.useEffect)((()=>{if(!n)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[n])}function ue(){const[e,n]=(0,o.useState)(!1),[t,r]=(0,o.useState)(!1),l=(0,o.useRef)(!1);return{isError:t,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!l.current){l.current=!0,n(!0),r(!1);try{return yield e()}catch(t){throw r(!0),t}finally{l.current=!1,n(!1)}}}))),[])}}function de(){const[e,n]=(0,o.useState)(null),[t,r]=(0,o.useState)(null),l=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const t=yield m(e);return n(t),!0}catch{return n(null),!1}}))),[]),s=(0,o.useCallback)(((e,t)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=t?.toText)&&void 0!==r&&r;try{const t=yield g(e,{toText:o});return n(t),!0}catch{return n(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const n=yield function(){return f(this,0,void 0,(function*(){if(!y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(n),!0}catch{return r(null),!1}}))),[]),i=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const n=yield function(){return f(this,0,void 0,(function*(){if(!y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(n),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:t,copyText:l,copyImage:s,readText:c,readContents:i}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},we=e=>pe[e],ye=we("localStorage"),me=e=>window.localStorage.getItem(e),be=e=>JSON.stringify(e),ge=e=>(ye.subscribe(e),()=>{ye.unsubscribe(e)});function ve(e){const{key:n}=e,t="initialValue"in e?e.initialValue:null,r=j(t)?t():t,l=(0,o.useSyncExternalStore)(ge,(()=>me(n)),(()=>be(r)));return{state:(0,o.useMemo)((()=>l?D(l):r),[l,r]),setState:(0,o.useCallback)((e=>{try{const t=me(n),o=t?D(t):r,l=j(e)?e(o):e;window.localStorage.setItem(n,JSON.stringify(l)),ye.dispatchEvent()}catch(t){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${n}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${t}`)}}),[n,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(n),ye.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${n}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[n])}}const ke=(e,n)=>y()?window.matchMedia(e).matches:n??!1;function xe(e,n){const[t,r]=(0,o.useState)(ke(e,n)),l=(0,o.useCallback)((e=>r(e.matches)),[]);return te(window.matchMedia(e),"change",l),t}function je(){return xe("(prefers-color-scheme: dark)")?"dark":"light"}const Ce="color-scheme";function Ee({defaultValue:e,key:n=Ce,shouldSetBodyClass:t=!1}={}){const r=je(),l=j(e)?e():e,{state:s,setState:c}=ve({key:n,initialValue:l??r}),i=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),a=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(t&&document.body.classList.add(s),()=>{t&&document.body.classList.remove(s)})),[s,t]),{colorScheme:s,preferredColorScheme:r,setToggleMode:i,setDarkMode:a,setLightMode:u,setPreferredMode:d}}function Se(e=0){const[n,t]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{t((e=>e+1))}),[]),l=(0,o.useCallback)((()=>{t((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{t(e)}),[e]);return{counter:n,setCounter:t,increment:r,decrement:l,reset:s}}function De({maxStep:e,initialStep:n=0,infinite:t=!1}){const[r,l]=(0,o.useState)(n),s=r0,i=(0,o.useCallback)(((n,t)=>{const o="nextStep"===n;return t?o?0:e:o?r+1:r-1}),[e,r]),a=(0,o.useCallback)(((e,n,o)=>{if(n&&!t)return;const s=i(e,n);o&&o({prev:r,next:s}),l(s)}),[t,r,i]),u=(0,o.useCallback)((e=>{a("nextStep",!s,e)}),[s,a]),d=(0,o.useCallback)((e=>{a("prevStep",!c,e)}),[c,a]),f=(0,o.useCallback)(((n,t)=>{const o=j(n)?n(r):n;if(o>=0&&o<=e)return t&&t({prev:r,next:o}),void l(n);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:n}),l(n)}),[r,n]);return{currentStep:r,hasNextStep:s,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Re(e,n=0){const{currentStep:t,goToNextStep:r,goToPrevStep:o,setStep:l,resetStep:s}=De({maxStep:e.length-1,initialStep:n,infinite:!0});return{currentItem:e[t],nextIndex:r,prevIndex:o,setIndex:l,resetIndex:s}}function Me(e,n,t={}){const[r,l]=(0,o.useState)(e);return[r,V(l,n,t)]}function Oe(e,n={}){const[t,r]=(0,o.useState)(""),[l,s]=Me("",e,n);return{value:t,debouncedValue:l,onChange:(0,o.useCallback)((e=>{const{value:n}=e.target;r(n),s(n)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Ke(e,{preserveTitleOnUnmount:n=!1}={}){ee((()=>{const t=document.title;return document.title=e,()=>{n||(document.title=t)}}),[e,n])}function Ie({onFocus:e=S,onBlur:n=S}={}){const[t,r]=(0,o.useState)(!1),l=(0,o.useRef)(null),s=Y((n=>{r(!0),e(n)})),c=Y((e=>{r(!1),n(e)})),i=(0,o.useCallback)((()=>{l.current&&(l.current.focus(),r(!0))}),[]);return te(l,"focus",s),te(l,"blur",c),{ref:l,isFocus:t,setFocus:i}}function Ne({onEnter:e=S,onLeave:n=S}={}){const[t,r]=(0,o.useState)(!1),l=(0,o.useRef)(null),s=Y((n=>{r(!0),e(n)})),c=Y((e=>{r(!1),n(e)}));return te(l,"mouseenter",s),te(l,"mouseleave",c),{ref:l,isHovered:t}}const Le=e=>{var n;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(n=e?.enabled)||void 0===n||n}};function Pe(e,n){const t=(0,o.useRef)(),r=Y(e),{delay:l,enabled:s}=Le(n),c=(0,o.useCallback)((()=>{t.current=window.setInterval(r,l)}),[r,l]),i=(0,o.useCallback)((()=>{t.current&&(clearInterval(t.current),t.current=null)}),[]),a=(0,o.useCallback)((()=>{i(),c()}),[i,c]);return(0,o.useEffect)((()=>{if(!(l<0)&&s)return c(),()=>i()}),[i,c,s,l]),{set:c,reset:a,clear:i}}function Fe({enabled:e=!0,keyDownCallbackMap:n={},allKeyDownCallback:t}){const r=(0,o.useRef)(null),l=Y((e=>{if(e.stopPropagation(),t)return void t(e);const r=e.key,o=n[r];j(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const n=r.current;return n.addEventListener("keydown",l),()=>n.removeEventListener("keydown",l)}),[e,l]),r}const Te={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function $e(){const e=(0,o.useRef)(null),[n,t]=(0,o.useState)(Te),r=(0,o.useCallback)((n=>{const{screenX:r,screenY:o,clientX:l,clientY:s,pageX:c,pageY:i}=n;let a=null,u=null,d=null,f=null;if(e.current){const n=e.current.getBoundingClientRect();a=l-n.left,u=s-n.top,d=n.left+window.scrollX,f=n.top+window.scrollY}t({screenX:r,screenY:o,clientX:l,clientY:s,pageX:c,pageY:i,elementRelativeX:a,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return te(document,"mousemove",r),{ref:e,position:n}}const Ae=()=>navigator.onLine,_e=()=>!0,We=(e,n,t)=>{const r=t=>(n(t),e()),o=n=>(t(n),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function Ye({onlineAction:e=S,offlineAction:n=S}={}){const t=Y((t=>We(t,e,n)));return(0,o.useSyncExternalStore)(t,Ae,_e)}function ze(e){const n=(0,o.useRef)(e);return(0,o.useEffect)((()=>{n.current=e}),[e]),n.current}const Xe={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function Ve(e=S){const[n,t]=(0,o.useState)(Xe),r=(0,o.useRef)(null),l=Y((([n])=>{n&&(e(n),t(n.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,n=new ResizeObserver(l);return n.observe(e),()=>{n.unobserve(e)}}),[l]),{ref:r,contentRect:n}}function Be({autoLock:e=!0}={}){const n=(0,o.useRef)(null),t=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=n.current;t.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),l=(0,o.useCallback)((()=>{if(!t.current)return;n.current.style.overflow=t.current}),[]);return ee((()=>(n.current||(n.current=document.body),e&&r(),()=>l())),[e,r,l]),{ref:n,lock:r,unlock:l}}const Ue=(e,n,t)=>"start"===t?0:"center"===t?-e/2+n/2:-e+n,He=(e,n,t)=>{const r=n.getBoundingClientRect(),{offsetX:o=0,offsetY:l=0,alignY:s="start",alignX:c="start"}=t;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+l+Ue(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+Ue(window.innerWidth,r.width,c)};const i=e.getBoundingClientRect();return{top:r.top-i.top+e.scrollTop+l+Ue(i.height,r.height,s),left:r.left-i.left+e.scrollLeft+o+Ue(i.width,r.width,c)}};function Je(){const e=(0,o.useRef)(null),n=(0,o.useCallback)(((n={})=>{if(!e.current)return;const{left:t=0,top:r=0,behavior:o="auto"}=n;e.current.scrollTo({left:t,top:r,behavior:o})}),[]),t=(0,o.useCallback)(((n,t={})=>{if(!n||!e.current)return;const r=e.current,{behavior:o="auto"}=t,{left:l,top:s}=He(r,n,t);r.scrollTo({top:s,left:l,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:n,scrollToElement:t}}const Ze=we("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function en(e){const{key:n}=e,t="initialValue"in e?e.initialValue:null,r=j(t)?t():t,l=(0,o.useSyncExternalStore)(Ge,(()=>Qe(n)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>l?D(l):r),[l,r]),setState:(0,o.useCallback)((e=>{try{const t=Qe(n),o=t?D(t):r,l=j(e)?e(o):e;window.sessionStorage.setItem(n,JSON.stringify(l)),Ze.dispatchEvent()}catch(t){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${n}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${t}`)}}),[n,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(n),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${n}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[n])}}function nn(e){var n;const t="initialState"in e?e.initialState:null,{type:r,key:l}=null!==(n=e?.storageOptions)&&void 0!==n?n:{},[s,c]=(0,o.useState)(t),i=(0,o.useCallback)((e=>{c((n=>{const t=j(e)?e(n):e;return r&&l&&function(e,n,t){if(!y())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=j(t)?t():t;r.setItem(n,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${n}" in ${e}: ${r}`)}}(r,l,t),t}))}),[r,l]),a=(0,o.useCallback)((()=>{r&&l&&function(e,n){if(!y())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}(r,l),c(null)}),[r,l]);return Object.assign({state:s,setState:i,clearState:a},De(e))}function tn(e,n,t={}){const r=Y(e),l=X(t),s=(0,o.useMemo)((()=>(0,c.A)(r,n,l)),[r,n,l]);return z((()=>s.cancel())),s}const rn=e=>{var n;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(n=e?.enabled)||void 0===n||n}};function on(e,n){const t=(0,o.useRef)(),r=Y(e),{delay:l,enabled:s}=rn(n),c=(0,o.useCallback)((()=>{t.current=setTimeout(r,l)}),[r,l]),i=(0,o.useCallback)((()=>{t.current&&(clearTimeout(t.current),t.current=null)}),[]),a=(0,o.useCallback)((()=>{i(),c()}),[i,c]);return(0,o.useEffect)((()=>{if(!(l<0)&&s)return c(),()=>i()}),[c,i,l,s]),{set:c,reset:a,clear:i}}function ln(e,n){const[t,r]=(0,o.useState)(e);return[t,(0,o.useCallback)((()=>{r((t=>t===e?n:e))}),[e,n])]}function sn(){const[e,n]=(0,o.useState)(null);return ee((()=>{const e=new i.UAParser(window.navigator.userAgent);n(e.getResult())}),[]),e}function cn({name:e="vh",enabledResize:n=!1}={}){ee((()=>{const t=()=>{const n=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${n}px`)};return t(),n&&window.addEventListener("resize",t),()=>{n&&window.removeEventListener("resize",t)}}),[e,n])}const an={width:null,height:null};function un({debounceWait:e}={}){const[n,t]=(0,o.useState)((()=>w()?an:{width:window.innerWidth,height:window.innerHeight})),r=V(t,e),l=(0,o.useCallback)((()=>{(e?r:t)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return te(window,"resize",l),n}function dn(e,n,t){const{delay:r,enabled:l}=rn(n),{set:s,reset:c,clear:i}=on(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!l||c()}),[r,l,c,...t]),{set:s,reset:c,clear:i}}}}]); \ No newline at end of file diff --git a/assets/js/c55bf516.dc1b8151.js b/assets/js/c55bf516.dc1b8151.js new file mode 100644 index 000000000..39c0f4d40 --- /dev/null +++ b/assets/js/c55bf516.dc1b8151.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[1196],{8228:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>h,assets:()=>u,contentTitle:()=>d,default:()=>y,frontMatter:()=>s,metadata:()=>o,toc:()=>p});const o=JSON.parse('{"id":"react/hooks/useKeyDown","title":"useKeyDown","description":"ref\ub97c \uc804\ub2ec\ud55c \uc694\uc18c\uac00 \ud3ec\ucee4\uc2f1\ub41c \uc0c1\ud0dc\uc5d0\uc11c keydown \uc774\ubca4\ud2b8 \ubc1c\uc0dd \uc2dc keyDownCallbackMap\ub85c \uc9c0\uc815\ud55c key\uc5d0 \ud2b8\ub9ac\uac70\ub418\uc5b4 \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useKeyDown.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useKeyDown","permalink":"/modern-kit/docs/react/hooks/useKeyDown","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useIsomorphicLayoutEffect","permalink":"/modern-kit/docs/react/hooks/useIsomorphicLayoutEffect"},"next":{"title":"useLocalStorage","permalink":"/modern-kit/docs/react/hooks/useLocalStorage"}}');var r=t(6206),i=t(3267),a=t(6765),l=t(4382),c=t(9340);const s={},d="useKeyDown",u={},h=()=>{const e={input:"input",...(0,i.R)()},n=function({enabled:e=!0,keyDownCallbackMap:n={},allKeyDownCallback:t}){const o=(0,l.useRef)(null),r=(0,a.p)((e=>{if(e.stopPropagation(),t)return void t(e);const o=e.key,r=n[o];(0,c.Tn)(r)&&r(e)}));return(0,l.useEffect)((()=>{if(!e)return;o.current||(o.current=window);const n=o.current;return n.addEventListener("keydown",r),()=>n.removeEventListener("keydown",r)}),[e,r]),o}({enabled:!0,keyDownCallbackMap:{Enter:e=>console.log("Enter",e.key),Shift:e=>console.log("Shift",e.key)," ":e=>console.log("Space",e.key)}});return(0,r.jsx)(e.input,{ref:n,placeholder:"\ud3ec\ucee4\uc2a4\ub97c \ud558\uace0, Enter, Shift, Space \ub20c\ub7ec\ubcf4\uc138\uc694",style:{width:"300px"}})},p=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"AllKeyDownCallback",id:"allkeydowncallback",level:3},{value:"KeyDownCallbackMap",id:"keydowncallbackmap",level:3},{value:"Example",id:"example",level:2},{value:"Note",id:"note",level:2}];function f(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"usekeydown",children:"useKeyDown"})}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"ref"}),"\ub97c \uc804\ub2ec\ud55c \uc694\uc18c\uac00 \ud3ec\ucee4\uc2f1\ub41c \uc0c1\ud0dc\uc5d0\uc11c ",(0,r.jsx)(n.code,{children:"keydown"})," \uc774\ubca4\ud2b8 \ubc1c\uc0dd \uc2dc ",(0,r.jsx)(n.code,{children:"keyDownCallbackMap"}),"\ub85c \uc9c0\uc815\ud55c ",(0,r.jsx)(n.code,{children:"key"}),"\uc5d0 \ud2b8\ub9ac\uac70\ub418\uc5b4 \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"keyDownCallbackMap"}),"\uc758 key\ub294 ",(0,r.jsx)(n.code,{children:"KeyboardEvent.key"}),"\uac00 \ubc18\ud658\ud558\ub294 \uac12\uc774 \ub4e4\uc5b4\uac00\uc57c \ud569\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\ud83d\udca1 ",(0,r.jsx)(n.strong,{children:(0,r.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values",children:"Key values for keyboard events - MDN"})})," \uc744 \uae30\ubc18\uc73c\ub85c \uc790\uc8fc \uc0ac\uc6a9\ub418\ub294 ",(0,r.jsx)(n.code,{children:"KeyboardEvent.key"}),"\ub4e4\uc740 ",(0,r.jsx)(n.code,{children:"\ud0c0\uc785 \ucd94\ub860"}),"\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4. \ud0c0\uc785 \ucd94\ub860\ub418\uc9c0 \uc54a\uc740 ",(0,r.jsx)(n.code,{children:"KeyboardEvent.key"}),"\ub294 \uc9c1\uc811 \uc785\ub825\ud558\uc154\uc57c \ub429\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(n.li,{children:["\ud83d\udca1 ",(0,r.jsx)(n.strong,{children:(0,r.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useKeyDown/keyDownCallbackMap.ts",children:"\ud0c0\uc785 \ucd94\ub860\uc744 \uc704\ud574 \uc81c\uacf5\ud558\ub294 KeyDownCallbackMap \uc778\ud130\ud398\uc774\uc2a4"})})]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["\ub9cc\uc57d ",(0,r.jsx)(n.code,{children:"\ubaa8\ub4e0 KeyboardEvent.key"}),"\uc5d0 \ub300\ud574 \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud558\uace0 \uc2f6\ub2e4\uba74 ",(0,r.jsx)(n.code,{children:"allKeyDownCallback"})," props\ub97c \uc774\uc6a9 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\ud83d\udca1 ",(0,r.jsx)(n.strong,{children:"allKeyDownCallback\uc774 \uc874\uc7ac \ud560 \uacbd\uc6b0 keyDownCallbackMap\uc73c\ub85c \uc9c0\uc815\ud55c \ucf5c\ubc31 \ud568\uc218\ub294 \ubb34\uc2dc\ud569\ub2c8\ub2e4."})]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"enabled"})," \uc635\uc158\uc744 \ud1b5\ud574 \uc6d0\ud558\ub294 \uc870\uac74\uc5d0 keydown \uc774\ubca4\ud2b8\ub97c \ubc14\uc778\ub529 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"targetRef"}),"\uac00 \ud560\ub2f9\ub418\uc9c0 \uc54a\uc73c\uba74 \uae30\ubcf8\uc801\uc73c\ub85c ",(0,r.jsx)(n.code,{children:"window"}),"\uc5d0 \uc774\ubca4\ud2b8\uac00 \ubc14\uc778\ub529 \ub429\ub2c8\ub2e4."]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useKeyDown/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,r.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseKeyDownProps {\n enabled?: boolean; // default: true\n keyDownCallbackMap?: Partial; // default: {}\n allKeyDownCallback?: (event: KeyboardEvent) => void;\n}\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"function useKeyDown({\n enabled,\n keyDownCallbackMap,\n allKeyDownCallback,\n}: UseKeyDownProps): RefObject;\n\nfunction useKeyDown({\n enabled,\n keyDownCallbackMap,\n allKeyDownCallback,\n}: UseKeyDownProps): RefObject;\n\nfunction useKeyDown({\n enabled,\n keyDownCallbackMap,\n allKeyDownCallback,\n}: UseKeyDownProps): RefObject \n"})}),"\n",(0,r.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(n.h3,{id:"allkeydowncallback",children:"AllKeyDownCallback"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"\ubaa8\ub4e0 \ud0a4\uac00 \ub20c\ub838\uc744 \ub54c \ud638\ucd9c\ub420 \uacf5\ud1b5 \ucf5c\ubc31 \ud568\uc218\uc785\ub2c8\ub2e4."}),"\n"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useKeyDown } from '@modern-kit/react';\n\nconst Example = () => {\n const targetRef = useKeyDown({\n enabled: true, // default: true\n allKeyDownCallback: (event) => console.log('All Key', event.key)\n });\n\n return ;\n};\n"})}),"\n",(0,r.jsx)(n.h3,{id:"keydowncallbackmap",children:"KeyDownCallbackMap"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"\ud2b9\uc815 \ud0a4\uc5d0 \ud574\ub2f9\ud558\ub294 \ucf5c\ubc31\uc744 \ub9e4\ud551\ud558\uace0, \ud574\ub2f9 \ud0a4\uac00 \ub20c\ub838\uc744 \ub54c \ud638\ucd9c\ub420 \ucf5c\ubc31 \ud568\uc218\ub4e4\uc744 \ud638\ucd9c\ud569\ub2c8\ub2e4."}),"\n"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useKeyDown } from '@modern-kit/react';\n\nconst Example = () => {\n const targetRef = useKeyDown({\n enabled: true, // default: true\n keyDownCallbackMap: {\n Enter: (event) => console.log('Enter', event.key), \n Shift: (event) => console.log('Shift', event.key),\n ' ': (event) => console.log('Space', event.key),\n }\n });\n\n return (\n \n );\n};\n"})}),"\n",(0,r.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,r.jsx)(h,{}),"\n",(0,r.jsx)(n.h2,{id:"note",children:"Note"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values",children:"Key values for keyboard events(en) - MDN"})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key",children:"KeyboardEvent.key(en) - MDN"})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"https://developer.mozilla.org/ko/docs/Web/API/KeyboardEvent/key",children:"KeyboardEvent.key(ko) - MDN"})}),"\n"]})]})}function y(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(f,{...e})}):f(e)}},3267:(e,n,t)=>{t.d(n,{R:()=>a,x:()=>l});var o=t(4382);const r={},i=o.createContext(r);function a(e){const n=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),o.createElement(i.Provider,{value:n},e.children)}},6765:(e,n,t)=>{t.d(n,{p:()=>r});var o=t(4382);function r(e){const n=(0,o.useRef)(e);return n.current=e,(0,o.useCallback)(((...e)=>n.current(...e)),[])}},9340:(e,n,t)=>{function o(e,n,t,o){return new(t||(t=Promise))((function(r,i){function a(e){try{c(o.next(e))}catch(n){i(n)}}function l(e){try{c(o.throw(e))}catch(n){i(n)}}function c(e){var n;e.done?r(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(a,l)}c((o=o.apply(e,n||[])).next())}))}t.d(n,{Et:()=>g,Fr:()=>l,Gp:()=>b,Ol:()=>E,Qd:()=>v,S$:()=>a,Tn:()=>k,Zp:()=>h,dK:()=>s,fl:()=>M,gD:()=>m,i5:()=>f,if:()=>p,l6:()=>j,lQ:()=>D,nS:()=>u,ni:()=>S,oc:()=>c}),"function"==typeof SuppressedError&&SuppressedError;const r={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,n)=>new Promise(((t,o)=>{e.toBlob((e=>{e?t(e):o(new Error(`Failed to create blob with format ${n}`))}),n)}));function a(){return"undefined"==typeof window}function l(){if(a())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function c(){return!a()}function s(e){return o(this,void 0,void 0,(function*(){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const d=e=>o(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return s(yield n.text())}));function u(e,n){var t;return o(this,void 0,void 0,(function*(){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return d(e);if(!("write"in window.navigator.clipboard))return d(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return d(e);const a=yield function(e,n="png"){return new Promise(((t,a)=>{const l=new Image;l.onload=()=>o(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=l.width,e.height=l.height;try{const o=e.getContext("2d");if(!o)throw new Error("Failed to get 2d context");o.drawImage(l,0,0);const a=yield i(e,r[n]);t(a)}catch(o){console.error(`Failed to load image. message: ${o.mesaage}`),a(o)}})),l.onerror=()=>{a(new Error("Failed to load image"))},l.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[a.type]:a})]),a}catch(a){throw console.error(`Failed to copy to clipboard. message: ${a.message}`),a}}))}function h(){return o(this,void 0,void 0,(function*(){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(){return o(this,void 0,void 0,(function*(){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function f(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const y=(e,n,t)=>{const o=Object.keys(e),r=Object.keys(n);if(o.length!==r.length)return!1;for(let i=0;i{if(e===n)return!0;if(g(e)&&g(n)&&isNaN(e)&&isNaN(n))return!0;if(k(e)&&k(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const o=[...e],r=[...n];return y(o,r,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[o,r]of e)if(!n.has(o)||!w(r,n.get(o),t))return!1;return!0}return y(e,n,t)};function b(e,n){return w(e,n,new WeakMap)}function k(e){return"function"==typeof e}function m(e){return null==e}function g(e){return"number"==typeof e}function x(e){return!function(e){return Object(e)!==e}(e)}function v(e){return x(e)&&"[object Object]"===Object.prototype.toString.call(e)}function j(e){return e===window}function D(){}function E(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function K(e){return Object.keys(e)}const C={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};K(C);function M(e,n){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function S(e,n,t){if(!c())throw new Error("Cannot be executed unless it is a client environment.");try{const o=window[e],r=k(t)?t():t;o.setItem(n,JSON.stringify(r))}catch(o){throw new Error(`Failed to store data for key "${n}" in ${e}: ${o}`)}}}}]); \ No newline at end of file diff --git a/assets/js/c55c9b0f.2c631495.js b/assets/js/c55c9b0f.2c631495.js deleted file mode 100644 index 6f8ad79e3..000000000 --- a/assets/js/c55c9b0f.2c631495.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[3972],{6850:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>l,default:()=>p,frontMatter:()=>a,metadata:()=>r,toc:()=>f});const r=JSON.parse('{"id":"react/components/SwithCase","title":"SwitchCase","description":"Switch \ubb38\uc744 \ucef4\ud3ec\ub10c\ud2b8 \ud615\ud0dc\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","source":"@site/docs/react/components/SwithCase.mdx","sourceDirName":"react/components","slug":"/react/components/SwithCase","permalink":"/modern-kit/docs/react/components/SwithCase","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"Slot","permalink":"/modern-kit/docs/react/components/Slot"},"next":{"title":"When","permalink":"/modern-kit/docs/react/components/When"}}');var o=n(6206),i=n(3267),s=n(4382),c=n(4027);const a={},l="SwitchCase",u={},d=()=>{const e={button:"button",div:"div",h3:"h3",...(0,i.R)()},[t,n]=(0,s.useState)(1);return(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.button,{onClick:()=>n(1),children:"Change to case 1"}),(0,o.jsx)(e.button,{onClick:()=>n(2),children:"Change to case 2"}),(0,o.jsx)(e.button,{onClick:()=>n(3),children:"Change to case 3"})]}),(0,o.jsx)(c.fN,{condition:t,cases:{1:(0,o.jsx)(e.h3,{children:"Case No.1"}),2:(0,o.jsx)(e.h3,{children:"Case No.2"}),3:(0,o.jsx)(e.h3,{children:"Case No.3"})}})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function h(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"switchcase",children:"SwitchCase"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"Switch"})," \ubb38\uc744 \ucef4\ud3ec\ub10c\ud2b8 \ud615\ud0dc\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"cases"}),"\uc5d0\ub294 ",(0,o.jsx)(t.code,{children:"key(condition):value(component)"})," \ud615\ud0dc\uc758 \ud504\ub85c\ud37c\ud2f0\ub97c \uac16\ub294 \uac1d\uccb4\ub97c \ub118\uaca8\uc8fc\uace0, ",(0,o.jsx)(t.code,{children:"condition"})," props\uc5d0 \ub9e4\uce6d\ub418\ub294 ",(0,o.jsx)(t.code,{children:"value(\ucef4\ud3ec\ub10c\ud2b8)"}),"\ub97c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"cases"}),"\uc5d0 \ub9e4\uce6d\ub418\ub294 ",(0,o.jsx)(t.code,{children:"condition"}),"\uc774 \uc5c6\uc744 \ub54c \uc784\uc2dc\ub85c \ubcf4\uc5ec\uc904 \uc218 \uc788\ub294 ",(0,o.jsx)(t.code,{children:"defaultCaseComponent"}),"\ub97c ",(0,o.jsx)(t.code,{children:"props"}),"\ub85c \ub118\uaca8\uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/SwitchCase/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface SwitchCaseProps {\n value: Case | null | undefined;\n caseBy: Record;\n defaultComponent?: React.ReactNode;\n}\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"const SwitchCase: ({\n caseBy,\n value,\n defaultComponent,\n}: SwitchCaseProps) => JSX.Element;\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { SwitchCase } from '@modern-kit/react';\n\n\nconst Example = () => {\n const [condition, setCondition] = useState(1);\n\n return (\n
    \n
    \n \n \n \n
    \n\n Case No.1,\n 2:

    Case No.2

    ,\n 3:

    Case No.3

    ,\n }}\n />\n
    \n );\n};\n"})}),"\n","\n",(0,o.jsx)(d,{})]})}function p(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>$e,$I:()=>oe,AE:()=>Be,BL:()=>K,DX:()=>I,FT:()=>ct,Fo:()=>et,Hn:()=>it,I5:()=>Ee,JF:()=>Te,K:()=>le,K$:()=>Je,M0:()=>Ne,ML:()=>ne,Mj:()=>ye,Mk:()=>Pe,Mo:()=>ie,NT:()=>Xe,QV:()=>Ue,Ub:()=>xe,Ut:()=>je,W7:()=>U,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>De,Zu:()=>ae,_1:()=>Oe,_g:()=>nt,aL:()=>J,aY:()=>Ie,bB:()=>V,d7:()=>z,eG:()=>st,fN:()=>ce,fm:()=>G,gl:()=>$,hN:()=>A,iD:()=>de,iQ:()=>Le,jd:()=>se,lW:()=>lt,oD:()=>H,oo:()=>Re,pL:()=>q,qi:()=>ue,rN:()=>Fe,tD:()=>Se,u8:()=>Q,wY:()=>ze,xV:()=>L,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),i=n(3683),s=n(5086),c=n(7197),a=(n(1604),n(5938));function l(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function w(){return!m()}function g(e){return f(this,0,void 0,(function*(){if(!w())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const b=e=>f(void 0,0,void 0,(function*(){return g(yield(yield fetch(e)).text())}));function v(e,t){var n;return f(this,0,void 0,(function*(){if(!w())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return b(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield p(e,h[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||k(e)&&k(t)&&isNaN(e)&&isNaN(t))return!0;if(S(e)&&S(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!C(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function x(e,t){return C(e,t,new WeakMap)}function S(e){return"function"==typeof e}function k(e){return"number"==typeof e}function j(e){return!function(e){return Object(e)!==e}(e)}function E(){}function R(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const O=(...e)=>t=>e.forEach((e=>{if(S(e))e(t);else if(null!=e){e.current=t}}));function N(...e){return(0,o.useCallback)(O(...e),e)}const I=o.forwardRef(((e,t)=>{const{children:n}=e,i=l(e,["children"]),s=o.Children.toArray(n),c=s.find(P);if(c){const e=c.props.children,n=s.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(F,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(F,Object.assign({},i,{ref:t,children:n}))}));I.displayName="Slot";const F=o.forwardRef(((e,t)=>{const{children:n}=e,r=l(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?O(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));F.displayName="SlotClone";const L=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function P(e){return o.isValidElement(e)&&e.type===L}var M="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const $=d(((e,t)=>{var{ratio:n,style:o,as:s="div",asChild:c=!1}=e,a=l(e,["ratio","style","as","asChild"]);const u=c?I:s,d=Object.assign({aspectRatio:n},o),f=c?a.className:i(M,a.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},a))})),T=()=>E,Y=()=>!1,X=()=>!0;function V({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(T,Y,X)?e:t}function W(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const A=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>W()?(0,r.jsx)(r.Fragment,{children:t}):e;function B(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function D(e){const t=B(e);(0,o.useEffect)((()=>()=>t()),[t])}function _(e,t=x){const[n,r]=(0,o.useState)(e),i=B(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function z(e,t,n){const r=B(e),i=_(n),c=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return D((()=>c.cancel())),c}const J=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),s=z(((...e)=>{const n=i?.props;if(n&&S(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:s})};function K({onIntersectStart:e=E,onIntersectEnd:t=E,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:s=0,rootMargin:c="0px 0px 0px 0px"}){const a=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=B((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(l.current=!0,a.current+=1,e(n)):l.current&&(l.current=!1,a.current+=1,t(n)),r&&a.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:s,root:i,rootMargin:c}),u.current.observe(e))}),[n,s,i,c,d])}}const H=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:s}=e,c=l(e,["src","threshold","root","rootMargin"]);const{ref:a}=K({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:N(t,a)},c))}));H.displayName="LazyImage";const U=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:s,className:c,style:a,duration:u="0.2s",onLoad:d}=e,f=l(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,w=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),g=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},a)),[m,u,a]),b=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),v=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:w,children:[m&&s,(0,r.jsx)(H,Object.assign({ref:t,width:n,height:i,style:g,onLoad:b},f))]})}));U.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:s="after",rootMargin:c="150px 0px"})=>{const{ref:a}=K({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:a}),t,"after"===s&&(0,r.jsx)("div",{ref:a})]})},q=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1}=e,c=l(e,["children","as","asChild"]);const a=s?I:i,{ref:u}=K(c);if(s&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(a,Object.assign({ref:O(t,u)},c,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return j(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=w()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=B(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1,onPointerDown:c,excludeRefs:a=[]}=e,u=l(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:a}),f=s?I:i;if(s&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:O(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:s=1,includeLastSeparator:c=!1})=>{const a=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%s==0),[c,s,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),a(t)&&n]})})},se=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function ae(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function le(e=!0){const t=S(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield g(e);return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!w())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),a=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!w())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:s,readText:c,readContents:a}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],we=me("localStorage"),ge=e=>window.localStorage.getItem(e),be=e=>JSON.stringify(e),ve=e=>(we.subscribe(e),()=>{we.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(ve,(()=>ge(t)),(()=>be(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=ge(t),o=n?R(n):r,i=S(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),we.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),we.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const Ce=(e,t)=>w()?window.matchMedia(e).matches:t??!1;function xe(e,t){const[n,r]=(0,o.useState)(Ce(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function Se(){return xe("(prefers-color-scheme: dark)")?"dark":"light"}const ke="color-scheme";function je({defaultValue:e,key:t=ke,shouldSetBodyClass:n=!1}={}){const r=Se(),i=S(e)?e():e,{state:s,setState:c}=ye({key:t,initialValue:i??r}),a=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),l=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(s),()=>{n&&document.body.classList.remove(s)})),[s,n]),{colorScheme:s,preferredColorScheme:r,setToggleMode:a,setDarkMode:l,setLightMode:u,setPreferredMode:d}}function Ee(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:s}}function Re({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),s=r0,a=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),l=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const s=a(e,t);o&&o({prev:r,next:s}),i(s)}),[n,r,a]),u=(0,o.useCallback)((e=>{l("nextStep",!s,e)}),[s,l]),d=(0,o.useCallback)((e=>{l("prevStep",!c,e)}),[c,l]),f=(0,o.useCallback)(((t,n)=>{const o=S(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:s,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Oe(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=Re({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}function Ne(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,z(i,t,n)]}function Ie(e,t={}){const[n,r]=(0,o.useState)(""),[i,s]=Ne("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),s(t)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Fe(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Le({onFocus:e=E,onBlur:t=E}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=B((t=>{r(!0),e(t)})),c=B((e=>{r(!1),t(e)})),a=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",s),ne(i,"blur",c),{ref:i,isFocus:n,setFocus:a}}function Pe({onEnter:e=E,onLeave:t=E}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=B((t=>{r(!0),e(t)})),c=B((e=>{r(!1),t(e)}));return ne(i,"mouseenter",s),ne(i,"mouseleave",c),{ref:i,isHovered:n}}const Me=e=>{var t;return k(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function $e(e,t){const n=(0,o.useRef)(),r=B(e),{delay:i,enabled:s}=Me(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>a()}),[a,c,s,i]),{set:c,reset:l,clear:a}}function Te({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=B((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];S(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const Ye={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Xe(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Ye),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:a}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=i-t.left,u=s-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:a,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Ve=()=>navigator.onLine,We=()=>!0,Ae=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function Be({onlineAction:e=E,offlineAction:t=E}={}){const n=B((n=>Ae(n,e,t)));return(0,o.useSyncExternalStore)(n,Ve,We)}function De(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const _e={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function ze(e=E){const[t,n]=(0,o.useState)(_e),r=(0,o.useRef)(null),i=B((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function Je({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const Ke=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:s="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+Ke(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+Ke(window.innerWidth,r.width,c)};const a=e.getBoundingClientRect();return{top:r.top-a.top+e.scrollTop+i+Ke(a.height,r.height,s),left:r.left-a.left+e.scrollLeft+o+Ke(a.width,r.width,c)}};function Ue(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:s}=He(r,t,n);r.scrollTo({top:s,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?R(n):r,i=S(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[s,c]=(0,o.useState)(n),a=(0,o.useCallback)((e=>{c((t=>{const n=S(e)?e(t):e;return r&&i&&function(e,t,n){if(!w())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=S(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),l=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!w())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),c(null)}),[r,i]);return Object.assign({state:s,setState:a,clearState:l},Re(e))}function nt(e,t,n={}){const r=B(e),i=_(n),s=(0,o.useMemo)((()=>(0,c.A)(r,t,i)),[r,t,i]);return D((()=>s.cancel())),s}const rt=e=>{var t;return k(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=B(e),{delay:i,enabled:s}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>a()}),[c,a,i,s]),{set:c,reset:l,clear:a}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function st(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new a.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const at={width:null,height:null};function lt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?at:{width:window.innerWidth,height:window.innerHeight})),r=z(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:s,reset:c,clear:a}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||c()}),[r,i,c,...n]),{set:s,reset:c,clear:a}}}}]); \ No newline at end of file diff --git a/assets/js/c55c9b0f.b843329f.js b/assets/js/c55c9b0f.b843329f.js new file mode 100644 index 000000000..9d031df4c --- /dev/null +++ b/assets/js/c55c9b0f.b843329f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[3972],{338:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>h,assets:()=>u,contentTitle:()=>l,default:()=>m,frontMatter:()=>d,metadata:()=>o,toc:()=>p});const o=JSON.parse('{"id":"react/components/SwithCase","title":"SwitchCase","description":"Switch \ubb38\uc744 \ucef4\ud3ec\ub10c\ud2b8 \ud615\ud0dc\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","source":"@site/docs/react/components/SwithCase.mdx","sourceDirName":"react/components","slug":"/react/components/SwithCase","permalink":"/modern-kit/docs/react/components/SwithCase","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"Slot","permalink":"/modern-kit/docs/react/components/Slot"},"next":{"title":"When","permalink":"/modern-kit/docs/react/components/When"}}');var r=t(6206),i=t(3267),c=t(4382),s=t(9340);const a=({caseBy:e,value:n,defaultComponent:t=null})=>{var o;return(0,s.gD)(n)?(0,r.jsx)(r.Fragment,{children:t}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[n])&&void 0!==o?o:t})},d={},l="SwitchCase",u={},h=()=>{const e={button:"button",div:"div",h3:"h3",...(0,i.R)()},[n,t]=(0,c.useState)(1);return(0,r.jsxs)(e.div,{children:[(0,r.jsxs)(e.div,{children:[(0,r.jsx)(e.button,{onClick:()=>t(1),children:"Change to case 1"}),(0,r.jsx)(e.button,{onClick:()=>t(2),children:"Change to case 2"}),(0,r.jsx)(e.button,{onClick:()=>t(3),children:"Change to case 3"})]}),(0,r.jsx)(a,{condition:n,cases:{1:(0,r.jsx)(e.h3,{children:"Case No.1"}),2:(0,r.jsx)(e.h3,{children:"Case No.2"}),3:(0,r.jsx)(e.h3,{children:"Case No.3"})}})]})},p=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function f(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"switchcase",children:"SwitchCase"})}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"Switch"})," \ubb38\uc744 \ucef4\ud3ec\ub10c\ud2b8 \ud615\ud0dc\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"cases"}),"\uc5d0\ub294 ",(0,r.jsx)(n.code,{children:"key(condition):value(component)"})," \ud615\ud0dc\uc758 \ud504\ub85c\ud37c\ud2f0\ub97c \uac16\ub294 \uac1d\uccb4\ub97c \ub118\uaca8\uc8fc\uace0, ",(0,r.jsx)(n.code,{children:"condition"})," props\uc5d0 \ub9e4\uce6d\ub418\ub294 ",(0,r.jsx)(n.code,{children:"value(\ucef4\ud3ec\ub10c\ud2b8)"}),"\ub97c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"cases"}),"\uc5d0 \ub9e4\uce6d\ub418\ub294 ",(0,r.jsx)(n.code,{children:"condition"}),"\uc774 \uc5c6\uc744 \ub54c \uc784\uc2dc\ub85c \ubcf4\uc5ec\uc904 \uc218 \uc788\ub294 ",(0,r.jsx)(n.code,{children:"defaultCaseComponent"}),"\ub97c ",(0,r.jsx)(n.code,{children:"props"}),"\ub85c \ub118\uaca8\uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/SwitchCase/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,r.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"interface SwitchCaseProps {\n value: Case | null | undefined;\n caseBy: Record;\n defaultComponent?: React.ReactNode;\n}\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"const SwitchCase: ({\n caseBy,\n value,\n defaultComponent,\n}: SwitchCaseProps) => JSX.Element;\n"})}),"\n",(0,r.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { SwitchCase } from '@modern-kit/react';\n\n\nconst Example = () => {\n const [condition, setCondition] = useState(1);\n\n return (\n
    \n
    \n \n \n \n
    \n\n Case No.1,\n 2:

    Case No.2

    ,\n 3:

    Case No.3

    ,\n }}\n />\n
    \n );\n};\n"})}),"\n","\n",(0,r.jsx)(h,{})]})}function m(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(f,{...e})}):f(e)}},3267:(e,n,t)=>{t.d(n,{R:()=>c,x:()=>s});var o=t(4382);const r={},i=o.createContext(r);function c(e){const n=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:c(e.components),o.createElement(i.Provider,{value:n},e.children)}},9340:(e,n,t)=>{function o(e,n,t,o){return new(t||(t=Promise))((function(r,i){function c(e){try{a(o.next(e))}catch(n){i(n)}}function s(e){try{a(o.throw(e))}catch(n){i(n)}}function a(e){var n;e.done?r(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(c,s)}a((o=o.apply(e,n||[])).next())}))}t.d(n,{Et:()=>C,Fr:()=>s,Gp:()=>g,Ol:()=>k,Qd:()=>b,S$:()=>c,Tn:()=>x,Zp:()=>h,dK:()=>d,fl:()=>F,gD:()=>v,i5:()=>f,if:()=>p,l6:()=>j,lQ:()=>S,nS:()=>u,ni:()=>$,oc:()=>a}),"function"==typeof SuppressedError&&SuppressedError;const r={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,n)=>new Promise(((t,o)=>{e.toBlob((e=>{e?t(e):o(new Error(`Failed to create blob with format ${n}`))}),n)}));function c(){return"undefined"==typeof window}function s(){if(c())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function a(){return!c()}function d(e){return o(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const l=e=>o(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return d(yield n.text())}));function u(e,n){var t;return o(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return l(e);if(!("write"in window.navigator.clipboard))return l(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return l(e);const c=yield function(e,n="png"){return new Promise(((t,c)=>{const s=new Image;s.onload=()=>o(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=s.width,e.height=s.height;try{const o=e.getContext("2d");if(!o)throw new Error("Failed to get 2d context");o.drawImage(s,0,0);const c=yield i(e,r[n]);t(c)}catch(o){console.error(`Failed to load image. message: ${o.mesaage}`),c(o)}})),s.onerror=()=>{c(new Error("Failed to load image"))},s.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[c.type]:c})]),c}catch(c){throw console.error(`Failed to copy to clipboard. message: ${c.message}`),c}}))}function h(){return o(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(){return o(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function f(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const m=(e,n,t)=>{const o=Object.keys(e),r=Object.keys(n);if(o.length!==r.length)return!1;for(let i=0;i{if(e===n)return!0;if(C(e)&&C(n)&&isNaN(e)&&isNaN(n))return!0;if(x(e)&&x(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const o=[...e],r=[...n];return m(o,r,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[o,r]of e)if(!n.has(o)||!w(r,n.get(o),t))return!1;return!0}return m(e,n,t)};function g(e,n){return w(e,n,new WeakMap)}function x(e){return"function"==typeof e}function v(e){return null==e}function C(e){return"number"==typeof e}function y(e){return!function(e){return Object(e)!==e}(e)}function b(e){return y(e)&&"[object Object]"===Object.prototype.toString.call(e)}function j(e){return e===window}function S(){}function k(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function E(e){return Object.keys(e)}const N={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};E(N);function F(e,n){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function $(e,n,t){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{const o=window[e],r=x(t)?t():t;o.setItem(n,JSON.stringify(r))}catch(o){throw new Error(`Failed to store data for key "${n}" in ${e}: ${o}`)}}}}]); \ No newline at end of file diff --git a/assets/js/cb3f6f96.467289bb.js b/assets/js/cb3f6f96.467289bb.js new file mode 100644 index 000000000..e3a7216fd --- /dev/null +++ b/assets/js/cb3f6f96.467289bb.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[8562],{8475:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>l,assets:()=>d,contentTitle:()=>s,default:()=>f,frontMatter:()=>a,metadata:()=>r,toc:()=>u});const r=JSON.parse('{"id":"react/components/Iterator","title":"Iterator","description":"items props\ub85c \uc8fc\uc5b4\uc9c4 \ubc30\uc5f4\uc744 \ubc18\ubcf5\ud558\uba74\uc11c, \uac01 \ud56d\ubaa9\uc5d0 \ub300\ud574 \ud2b9\uc815 \uc694\uc18c \ubc0f \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","source":"@site/docs/react/components/Iterator.mdx","sourceDirName":"react/components","slug":"/react/components/Iterator","permalink":"/modern-kit/docs/react/components/Iterator","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"InfiniteScroll","permalink":"/modern-kit/docs/react/components/InfiniteScroll"},"next":{"title":"LazyImage","permalink":"/modern-kit/docs/react/components/LazyImage"}}');var o=t(6206),i=t(3267),c=t(8111);const a={},s="Iterator",d={},l=()=>{const e={h3:"h3",...(0,i.R)()};return(0,o.jsx)(c.f,{itemKey:"id",items:[{id:1,name:"Gromit"},{id:2,name:"Dylan"},{id:3,name:"Minjae"}],renderItem:n=>(0,o.jsxs)(e.h3,{children:["id: ",n.id,", name: ",n.name]})})},u=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function m(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"iterator",children:"Iterator"})}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"items props"}),"\ub85c \uc8fc\uc5b4\uc9c4 \ubc30\uc5f4\uc744 \ubc18\ubcf5\ud558\uba74\uc11c, \uac01 \ud56d\ubaa9\uc5d0 \ub300\ud574 ",(0,o.jsx)(n.code,{children:"\ud2b9\uc815 \uc694\uc18c \ubc0f \ucef4\ud3ec\ub10c\ud2b8"}),"\ub97c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"itemKey"}),"\ub85c \ubb38\uc790\uc5f4\uc744 \ub123\uc73c\uba74, \uac01 \uc694\uc18c\uc5d0\uc11c \ud574\ub2f9 \ud504\ub85c\ud37c\ud2f0 key\uc758 \uac12\uc744 \uac01 \uc694\uc18c\uc758 ",(0,o.jsx)(n.code,{children:"unique key"}),"\ub85c \uc124\uc815\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.p,{children:["\ubb38\uc790\uc5f4/\uc22b\uc790 \ubc30\uc5f4\uc758 \uacbd\uc6b0 itemKey\ub97c \ub118\uae30\uc9c0 \uc54a\uc544\ub3c4. \uc790\ub3d9\uc73c\ub85c ",(0,o.jsx)(n.code,{children:"{index}_{item}"}),"\ud615\ud0dc\ub85c \uc9c0\uc815\ub429\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/Iterator/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"interface IteratorProps {\n items: T[] | readonly T[] | undefined;\n itemKey?: T extends Record ? keyof T : string;\n renderItem: (item: T, index: number) => JSX.Element;\n}\n\nconst Iterator: ({\n items,\n itemKey,\n renderItem,\n}: IteratorProps) => JSX.Element;\n"})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { Iterator } from '@modern-kit/react';\n\ninterface Item {\n id: number;\n name: string;\n}\n\nconst Example = () => {\n const items: Item[] = [\n { id: 1, name: 'Gromit' },\n { id: 2, name: 'Dylan' },\n { id: 3, name: 'Minjae' },\n ];\n\n return (\n (\n

    \n id: {item.id}, name: {item.name}\n

    \n )}\n />\n );\n};\n"})}),"\n",(0,o.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(l,{})]})}function f(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(m,{...e})}):m(e)}},3267:(e,n,t)=>{t.d(n,{R:()=>c,x:()=>a});var r=t(4382);const o={},i=r.createContext(o);function c(e){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),r.createElement(i.Provider,{value:n},e.children)}},8111:(e,n,t)=>{t.d(n,{f:()=>c});var r=t(6206),o=t(9340),i=t(4382);const c=({items:e=[],itemKey:n,renderItem:t})=>{const c=(0,i.useCallback)(((e,t)=>(0,o.Qd)(e)?(null==e?void 0:e[n])||t:`${t}_${e}`),[n]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,n)=>(0,r.jsx)(i.Fragment,{children:t(e,n)},c(e,n))))})}},9340:(e,n,t)=>{function r(e,n,t,r){return new(t||(t=Promise))((function(o,i){function c(e){try{s(r.next(e))}catch(n){i(n)}}function a(e){try{s(r.throw(e))}catch(n){i(n)}}function s(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(c,a)}s((r=r.apply(e,n||[])).next())}))}t.d(n,{Et:()=>v,Fr:()=>a,Gp:()=>y,Ol:()=>E,Qd:()=>j,S$:()=>c,Tn:()=>w,Zp:()=>m,dK:()=>d,fl:()=>$,gD:()=>x,i5:()=>p,if:()=>f,l6:()=>I,lQ:()=>k,nS:()=>u,ni:()=>F,oc:()=>s}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,n)=>new Promise(((t,r)=>{e.toBlob((e=>{e?t(e):r(new Error(`Failed to create blob with format ${n}`))}),n)}));function c(){return"undefined"==typeof window}function a(){if(c())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function s(){return!c()}function d(e){return r(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const l=e=>r(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return d(yield n.text())}));function u(e,n){var t;return r(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return l(e);if(!("write"in window.navigator.clipboard))return l(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return l(e);const c=yield function(e,n="png"){return new Promise(((t,c)=>{const a=new Image;a.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=a.width,e.height=a.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(a,0,0);const c=yield i(e,o[n]);t(c)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),c(r)}})),a.onerror=()=>{c(new Error("Failed to load image"))},a.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[c.type]:c})]),c}catch(c){throw console.error(`Failed to copy to clipboard. message: ${c.message}`),c}}))}function m(){return r(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function f(){return r(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const h=(e,n,t)=>{const r=Object.keys(e),o=Object.keys(n);if(r.length!==o.length)return!1;for(let i=0;i{if(e===n)return!0;if(v(e)&&v(n)&&isNaN(e)&&isNaN(n))return!0;if(w(e)&&w(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const r=[...e],o=[...n];return h(r,o,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[r,o]of e)if(!n.has(r)||!g(o,n.get(r),t))return!1;return!0}return h(e,n,t)};function y(e,n){return g(e,n,new WeakMap)}function w(e){return"function"==typeof e}function x(e){return null==e}function v(e){return"number"==typeof e}function b(e){return!function(e){return Object(e)!==e}(e)}function j(e){return b(e)&&"[object Object]"===Object.prototype.toString.call(e)}function I(e){return e===window}function k(){}function E(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function C(e){return Object.keys(e)}const S={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};C(S);function $(e,n){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function F(e,n,t){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=w(t)?t():t;r.setItem(n,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${n}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/cb3f6f96.981f1a69.js b/assets/js/cb3f6f96.981f1a69.js deleted file mode 100644 index 8ae932e06..000000000 --- a/assets/js/cb3f6f96.981f1a69.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[8562],{8475:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>c,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"react/components/Iterator","title":"Iterator","description":"items props\ub85c \uc8fc\uc5b4\uc9c4 \ubc30\uc5f4\uc744 \ubc18\ubcf5\ud558\uba74\uc11c, \uac01 \ud56d\ubaa9\uc5d0 \ub300\ud574 \ud2b9\uc815 \uc694\uc18c \ubc0f \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","source":"@site/docs/react/components/Iterator.mdx","sourceDirName":"react/components","slug":"/react/components/Iterator","permalink":"/modern-kit/docs/react/components/Iterator","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"InfiniteScroll","permalink":"/modern-kit/docs/react/components/InfiniteScroll"},"next":{"title":"LazyImage","permalink":"/modern-kit/docs/react/components/LazyImage"}}');var o=n(6206),i=n(3267),s=n(4027);const c={},a="Iterator",l={},u=()=>{const e={h3:"h3",...(0,i.R)()};return(0,o.jsx)(s.fm,{itemKey:"id",items:[{id:1,name:"Gromit"},{id:2,name:"Dylan"},{id:3,name:"Minjae"}],renderItem:t=>(0,o.jsxs)(e.h3,{children:["id: ",t.id,", name: ",t.name]})})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"iterator",children:"Iterator"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"items props"}),"\ub85c \uc8fc\uc5b4\uc9c4 \ubc30\uc5f4\uc744 \ubc18\ubcf5\ud558\uba74\uc11c, \uac01 \ud56d\ubaa9\uc5d0 \ub300\ud574 ",(0,o.jsx)(t.code,{children:"\ud2b9\uc815 \uc694\uc18c \ubc0f \ucef4\ud3ec\ub10c\ud2b8"}),"\ub97c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"itemKey"}),"\ub85c \ubb38\uc790\uc5f4\uc744 \ub123\uc73c\uba74, \uac01 \uc694\uc18c\uc5d0\uc11c \ud574\ub2f9 \ud504\ub85c\ud37c\ud2f0 key\uc758 \uac12\uc744 \uac01 \uc694\uc18c\uc758 ",(0,o.jsx)(t.code,{children:"unique key"}),"\ub85c \uc124\uc815\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:["\ubb38\uc790\uc5f4/\uc22b\uc790 \ubc30\uc5f4\uc758 \uacbd\uc6b0 itemKey\ub97c \ub118\uae30\uc9c0 \uc54a\uc544\ub3c4. \uc790\ub3d9\uc73c\ub85c ",(0,o.jsx)(t.code,{children:"{index}_{item}"}),"\ud615\ud0dc\ub85c \uc9c0\uc815\ub429\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/Iterator/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface IteratorProps {\n items: T[] | readonly T[] | undefined;\n itemKey?: T extends Record ? keyof T : string;\n renderItem: (item: T, index: number) => JSX.Element;\n}\n\nconst Iterator: ({\n items,\n itemKey,\n renderItem,\n}: IteratorProps) => JSX.Element;\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { Iterator } from '@modern-kit/react';\n\ninterface Item {\n id: number;\n name: string;\n}\n\nconst Example = () => {\n const items: Item[] = [\n { id: 1, name: 'Gromit' },\n { id: 2, name: 'Dylan' },\n { id: 3, name: 'Minjae' },\n ];\n\n return (\n (\n

    \n id: {item.id}, name: {item.name}\n

    \n )}\n />\n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(u,{})]})}function h(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(f,{...e})}):f(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>Te,$I:()=>oe,AE:()=>Ae,BL:()=>J,DX:()=>F,FT:()=>ct,Fo:()=>et,Hn:()=>it,I5:()=>je,JF:()=>$e,K:()=>le,K$:()=>Ke,M0:()=>Oe,ML:()=>ne,Mj:()=>ve,Mk:()=>Me,Mo:()=>ie,NT:()=>Xe,QV:()=>Ue,Ub:()=>ke,Ut:()=>Ee,W7:()=>U,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>_e,Zu:()=>ae,_1:()=>Re,_g:()=>nt,aL:()=>K,aY:()=>Fe,bB:()=>D,d7:()=>B,eG:()=>st,fN:()=>ce,fm:()=>Q,gl:()=>T,hN:()=>z,iD:()=>de,iQ:()=>Ne,jd:()=>se,lW:()=>lt,oD:()=>H,oo:()=>Ie,pL:()=>q,qi:()=>ue,rN:()=>Le,tD:()=>Se,u8:()=>G,wY:()=>Be,xV:()=>N,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),i=n(3683),s=n(5086),c=n(7197),a=(n(1604),n(5938));function l(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function p(){return typeof window>"u"}function g(){return!p()}function w(e){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const b=e=>f(void 0,0,void 0,(function*(){return w(yield(yield fetch(e)).text())}));function y(e,t){var n;return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return b(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield m(e,h[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const v=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||C(e)&&C(t)&&isNaN(e)&&isNaN(t))return!0;if(S(e)&&S(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return v(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return v(e,t,n)};function k(e,t){return x(e,t,new WeakMap)}function S(e){return"function"==typeof e}function C(e){return"number"==typeof e}function E(e){return!function(e){return Object(e)!==e}(e)}function j(){}function I(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const R=(...e)=>t=>e.forEach((e=>{if(S(e))e(t);else if(null!=e){e.current=t}}));function O(...e){return(0,o.useCallback)(R(...e),e)}const F=o.forwardRef(((e,t)=>{const{children:n}=e,i=l(e,["children"]),s=o.Children.toArray(n),c=s.find(M);if(c){const e=c.props.children,n=s.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(L,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(L,Object.assign({},i,{ref:t,children:n}))}));F.displayName="Slot";const L=o.forwardRef(((e,t)=>{const{children:n}=e,r=l(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?R(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));L.displayName="SlotClone";const N=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function M(e){return o.isValidElement(e)&&e.type===N}var P="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const T=d(((e,t)=>{var{ratio:n,style:o,as:s="div",asChild:c=!1}=e,a=l(e,["ratio","style","as","asChild"]);const u=c?F:s,d=Object.assign({aspectRatio:n},o),f=c?a.className:i(P,a.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},a))})),$=()=>j,Y=()=>!1,X=()=>!0;function D({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)($,Y,X)?e:t}function V(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const z=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>V()?(0,r.jsx)(r.Fragment,{children:t}):e;function A(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function _(e){const t=A(e);(0,o.useEffect)((()=>()=>t()),[t])}function W(e,t=k){const[n,r]=(0,o.useState)(e),i=A(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function B(e,t,n){const r=A(e),i=W(n),c=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return _((()=>c.cancel())),c}const K=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),s=B(((...e)=>{const n=i?.props;if(n&&S(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:s})};function J({onIntersectStart:e=j,onIntersectEnd:t=j,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:s=0,rootMargin:c="0px 0px 0px 0px"}){const a=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=A((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(l.current=!0,a.current+=1,e(n)):l.current&&(l.current=!1,a.current+=1,t(n)),r&&a.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:s,root:i,rootMargin:c}),u.current.observe(e))}),[n,s,i,c,d])}}const H=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:s}=e,c=l(e,["src","threshold","root","rootMargin"]);const{ref:a}=J({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:O(t,a)},c))}));H.displayName="LazyImage";const U=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:s,className:c,style:a,duration:u="0.2s",onLoad:d}=e,f=l(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,m]=(0,o.useState)(!1),p=!h,g=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),w=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},a)),[p,u,a]),b=(0,o.useCallback)((e=>{d&&d(e),m(!0)}),[d]),y=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:y,style:g,children:[p&&s,(0,r.jsx)(H,Object.assign({ref:t,width:n,height:i,style:w,onLoad:b},f))]})}));U.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},G=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:s="after",rootMargin:c="150px 0px"})=>{const{ref:a}=J({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:a}),t,"after"===s&&(0,r.jsx)("div",{ref:a})]})},q=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1}=e,c=l(e,["children","as","asChild"]);const a=s?F:i,{ref:u}=J(c);if(s&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(a,Object.assign({ref:R(t,u)},c,{children:n}))})),Q=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return E(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=g()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=A(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(p())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1,onPointerDown:c,excludeRefs:a=[]}=e,u=l(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:a}),f=s?F:i;if(s&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:R(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:s=1,includeLastSeparator:c=!1})=>{const a=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%s==0),[c,s,t.length]);return(0,r.jsx)(Q,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),a(t)&&n]})})},se=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function ae(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function le(e=!0){const t=S(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield w(e);return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield y(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),a=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:s,readText:c,readContents:a}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",me={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},pe=e=>me[e],ge=pe("localStorage"),we=e=>window.localStorage.getItem(e),be=e=>JSON.stringify(e),ye=e=>(ge.subscribe(e),()=>{ge.unsubscribe(e)});function ve(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(ye,(()=>we(t)),(()=>be(r)));return{state:(0,o.useMemo)((()=>i?I(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=we(t),o=n?I(n):r,i=S(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),ge.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ge.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>g()?window.matchMedia(e).matches:t??!1;function ke(e,t){const[n,r]=(0,o.useState)(xe(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function Se(){return ke("(prefers-color-scheme: dark)")?"dark":"light"}const Ce="color-scheme";function Ee({defaultValue:e,key:t=Ce,shouldSetBodyClass:n=!1}={}){const r=Se(),i=S(e)?e():e,{state:s,setState:c}=ve({key:t,initialValue:i??r}),a=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),l=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(s),()=>{n&&document.body.classList.remove(s)})),[s,n]),{colorScheme:s,preferredColorScheme:r,setToggleMode:a,setDarkMode:l,setLightMode:u,setPreferredMode:d}}function je(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:s}}function Ie({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),s=r0,a=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),l=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const s=a(e,t);o&&o({prev:r,next:s}),i(s)}),[n,r,a]),u=(0,o.useCallback)((e=>{l("nextStep",!s,e)}),[s,l]),d=(0,o.useCallback)((e=>{l("prevStep",!c,e)}),[c,l]),f=(0,o.useCallback)(((t,n)=>{const o=S(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:s,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Re(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=Ie({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}function Oe(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,B(i,t,n)]}function Fe(e,t={}){const[n,r]=(0,o.useState)(""),[i,s]=Oe("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),s(t)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Le(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onFocus:e=j,onBlur:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=A((t=>{r(!0),e(t)})),c=A((e=>{r(!1),t(e)})),a=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",s),ne(i,"blur",c),{ref:i,isFocus:n,setFocus:a}}function Me({onEnter:e=j,onLeave:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=A((t=>{r(!0),e(t)})),c=A((e=>{r(!1),t(e)}));return ne(i,"mouseenter",s),ne(i,"mouseleave",c),{ref:i,isHovered:n}}const Pe=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function Te(e,t){const n=(0,o.useRef)(),r=A(e),{delay:i,enabled:s}=Pe(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>a()}),[a,c,s,i]),{set:c,reset:l,clear:a}}function $e({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=A((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];S(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const Ye={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Xe(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Ye),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:a}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=i-t.left,u=s-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:a,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const De=()=>navigator.onLine,Ve=()=>!0,ze=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function Ae({onlineAction:e=j,offlineAction:t=j}={}){const n=A((n=>ze(n,e,t)));return(0,o.useSyncExternalStore)(n,De,Ve)}function _e(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const We={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function Be(e=j){const[t,n]=(0,o.useState)(We),r=(0,o.useRef)(null),i=A((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function Ke({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:s="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+Je(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+Je(window.innerWidth,r.width,c)};const a=e.getBoundingClientRect();return{top:r.top-a.top+e.scrollTop+i+Je(a.height,r.height,s),left:r.left-a.left+e.scrollLeft+o+Je(a.width,r.width,c)}};function Ue(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:s}=He(r,t,n);r.scrollTo({top:s,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=pe("sessionStorage"),Ge=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Qe=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(Qe,(()=>Ge(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>i?I(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Ge(t),o=n?I(n):r,i=S(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[s,c]=(0,o.useState)(n),a=(0,o.useCallback)((e=>{c((t=>{const n=S(e)?e(t):e;return r&&i&&function(e,t,n){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=S(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),l=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),c(null)}),[r,i]);return Object.assign({state:s,setState:a,clearState:l},Ie(e))}function nt(e,t,n={}){const r=A(e),i=W(n),s=(0,o.useMemo)((()=>(0,c.A)(r,t,i)),[r,t,i]);return _((()=>s.cancel())),s}const rt=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=A(e),{delay:i,enabled:s}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>a()}),[c,a,i,s]),{set:c,reset:l,clear:a}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function st(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new a.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const at={width:null,height:null};function lt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>p()?at:{width:window.innerWidth,height:window.innerHeight})),r=B(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:s,reset:c,clear:a}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||c()}),[r,i,c,...n]),{set:s,reset:c,clear:a}}}}]); \ No newline at end of file diff --git a/assets/js/cc0ca23c.3f2a29ee.js b/assets/js/cc0ca23c.3f2a29ee.js new file mode 100644 index 000000000..93c9f635a --- /dev/null +++ b/assets/js/cc0ca23c.3f2a29ee.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[33],{9982:(t,e,n)=>{n.r(e),n.d(e,{Example:()=>v,assets:()=>m,contentTitle:()=>h,default:()=>y,frontMatter:()=>p,metadata:()=>r,toc:()=>g});const r=JSON.parse('{"id":"react/hooks/useThrottle","title":"useThrottle","description":"debounce\ub97c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useThrottle.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useThrottle","permalink":"/modern-kit/docs/react/hooks/useThrottle","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useStepState","permalink":"/modern-kit/docs/react/hooks/useStepState"},"next":{"title":"useTimeout","permalink":"/modern-kit/docs/react/hooks/useTimeout"}}');var o=n(6206),i=n(3267),c=n(4382),a=n(5086),s=n(322);const u=function(t,e,n){var r=!0,o=!0;if("function"!=typeof t)throw new TypeError("Expected a function");return(0,s.A)(n)&&(r="leading"in n?!!n.leading:r,o="trailing"in n?!!n.trailing:o),(0,a.A)(t,e,{leading:r,maxWait:e,trailing:o})};var l=n(3311),d=n(5423),f=n(6765);const p={},h="useThrottle",m={},v=()=>{const t={button:"button",div:"div",p:"p",...(0,i.R)()},[e,n]=(0,c.useState)(1),[r,a]=(0,c.useState)(1),s=function(t,e,n={}){const r=(0,f.p)(t),o=(0,d.B)(n),i=(0,c.useMemo)((()=>u(r,e,o)),[r,e,o]);return(0,l.i)((()=>i.cancel())),i}((()=>{a(r+1)}),1e3);return(0,o.jsxs)(t.div,{children:[(0,o.jsxs)(t.div,{style:{display:"flex"},children:[(0,o.jsx)(t.button,{onClick:()=>{n(e+1)},children:"\ubc84\ud2bc \ud074\ub9ad"}),(0,o.jsx)(t.div,{style:{width:"50px"}}),(0,o.jsx)(t.button,{onClick:s,children:"debounce \ubc84\ud2bc \ud074\ub9ad"})]}),(0,o.jsxs)(t.div,{children:[(0,o.jsxs)(t.p,{children:["count: ",e]}),(0,o.jsxs)(t.p,{children:["throttledCount: ",r]})]})]})},g=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function b(t){const e={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...t.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.header,{children:(0,o.jsx)(e.h1,{id:"usethrottle",children:"useThrottle"})}),"\n",(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:"debounce"}),"\ub97c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(e.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(e.p,{children:(0,o.jsx)(e.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useThrottle/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(e.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-ts",metastring:'title="typescript"',children:"interface ThrottleSettings {\n leading?: boolean | undefined;\n trailing?: boolean | undefined;\n}\n\ntype ThrottleParameters = Parameters;\n"})}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-ts",metastring:'title="typescript"',children:"function useThrottle any>(\n callback: T,\n wait: ThrottleParameters[1],\n options?: ThrottleParameters[2]\n): ThrottleReturnType;\n"})}),"\n",(0,o.jsx)(e.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useState } from 'react';\nimport { useThrottle } from '@modern-kit/react';\n\nconst Example = () => {\n const [count, setCount] = useState(1);\n const [throttledCount, setThrottledCount] = useState(1);\n\n const countUp = () => {\n setCount(count + 1);\n };\n\n const throttledCountUp = useThrottle(() => {\n setThrottledCount(throttledCount + 1);\n }, 1000);\n\n return (\n
    \n
    \n \n
    \n \n
    \n
    \n

    count: {count}

    \n

    throttledCount: {throttledCount}

    \n
    \n
    \n );\n};\n"})}),"\n",(0,o.jsx)(e.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(v,{})]})}function y(t={}){const{wrapper:e}={...(0,i.R)(),...t.components};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(b,{...t})}):b(t)}},3267:(t,e,n)=>{n.d(e,{R:()=>c,x:()=>a});var r=n(4382);const o={},i=r.createContext(o);function c(t){const e=r.useContext(i);return r.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function a(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(o):t.components||o:c(t.components),r.createElement(i.Provider,{value:e},t.children)}},6765:(t,e,n)=>{n.d(e,{p:()=>o});var r=n(4382);function o(t){const e=(0,r.useRef)(t);return e.current=t,(0,r.useCallback)(((...t)=>e.current(...t)),[])}},5423:(t,e,n)=>{n.d(e,{B:()=>c});var r=n(4382),o=n(6765),i=n(9340);function c(t,e=i.Gp){const[n,c]=(0,r.useState)(t),a=(0,o.p)(e);return(0,r.useEffect)((()=>{a(n,t)||c(t)}),[a,n,t]),n}},3311:(t,e,n)=>{n.d(e,{i:()=>i});var r=n(6765),o=n(4382);function i(t){const e=(0,r.p)(t);(0,o.useEffect)((()=>()=>e()),[e])}},5086:(t,e,n)=>{n.d(e,{A:()=>F});var r=n(322);const o="object"==typeof global&&global&&global.Object===Object&&global;var i="object"==typeof self&&self&&self.Object===Object&&self;const c=o||i||Function("return this")();const a=function(){return c.Date.now()};var s=/\s/;const u=function(t){for(var e=t.length;e--&&s.test(t.charAt(e)););return e};var l=/^\s+/;const d=function(t){return t?t.slice(0,u(t)+1).replace(l,""):t};const f=c.Symbol;var p=Object.prototype,h=p.hasOwnProperty,m=p.toString,v=f?f.toStringTag:void 0;const g=function(t){var e=h.call(t,v),n=t[v];try{t[v]=void 0;var r=!0}catch(i){}var o=m.call(t);return r&&(e?t[v]=n:delete t[v]),o};var b=Object.prototype.toString;const y=function(t){return b.call(t)};var w=f?f.toStringTag:void 0;const x=function(t){return null==t?void 0===t?"[object Undefined]":"[object Null]":w&&w in Object(t)?g(t):y(t)};const j=function(t){return null!=t&&"object"==typeof t};const T=function(t){return"symbol"==typeof t||j(t)&&"[object Symbol]"==x(t)};var k=/^[-+]0x[0-9a-f]+$/i,C=/^0b[01]+$/i,S=/^0o[0-7]+$/i,E=parseInt;const O=function(t){if("number"==typeof t)return t;if(T(t))return NaN;if((0,r.A)(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=(0,r.A)(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=d(t);var n=C.test(t);return n||S.test(t)?E(t.slice(2),n?2:8):k.test(t)?NaN:+t};var $=Math.max,N=Math.min;const F=function(t,e,n){var o,i,c,s,u,l,d=0,f=!1,p=!1,h=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function m(e){var n=o,r=i;return o=i=void 0,d=e,s=t.apply(r,n)}function v(t){var n=t-l;return void 0===l||n>=e||n<0||p&&t-d>=c}function g(){var t=a();if(v(t))return b(t);u=setTimeout(g,function(t){var n=e-(t-l);return p?N(n,c-(t-d)):n}(t))}function b(t){return u=void 0,h&&o?m(t):(o=i=void 0,s)}function y(){var t=a(),n=v(t);if(o=arguments,i=this,l=t,n){if(void 0===u)return function(t){return d=t,u=setTimeout(g,e),f?m(t):s}(l);if(p)return clearTimeout(u),u=setTimeout(g,e),m(l)}return void 0===u&&(u=setTimeout(g,e)),s}return e=O(e)||0,(0,r.A)(n)&&(f=!!n.leading,c=(p="maxWait"in n)?$(O(n.maxWait)||0,e):c,h="trailing"in n?!!n.trailing:h),y.cancel=function(){void 0!==u&&clearTimeout(u),d=0,o=l=i=u=void 0},y.flush=function(){return void 0===u?s:b(a())},y}},322:(t,e,n)=>{n.d(e,{A:()=>r});const r=function(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)}},9340:(t,e,n)=>{function r(t,e,n,r){return new(n||(n=Promise))((function(o,i){function c(t){try{s(r.next(t))}catch(e){i(e)}}function a(t){try{s(r.throw(t))}catch(e){i(e)}}function s(t){var e;t.done?o(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(c,a)}s((r=r.apply(t,e||[])).next())}))}n.d(e,{Et:()=>w,Fr:()=>a,Gp:()=>g,Ol:()=>C,Qd:()=>j,S$:()=>c,Tn:()=>b,Zp:()=>f,dK:()=>u,fl:()=>O,gD:()=>y,i5:()=>h,if:()=>p,l6:()=>T,lQ:()=>k,nS:()=>d,ni:()=>$,oc:()=>s}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(t,e)=>new Promise(((n,r)=>{t.toBlob((t=>{t?n(t):r(new Error(`Failed to create blob with format ${e}`))}),e)}));function c(){return"undefined"==typeof window}function a(){if(c())return!1;const t=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(t)}function s(){return!c()}function u(t){return r(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(t),t):function(t){const e=document.createElement("textarea");e.value=t,e.style.opacity="0",document.body.appendChild(e),e.focus(),e.select();try{return document.execCommand("copy"),t}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(e)}}(t)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const l=t=>r(void 0,void 0,void 0,(function*(){const e=yield fetch(t);return u(yield e.text())}));function d(t,e){var n;return r(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return l(t);if(!("write"in window.navigator.clipboard))return l(t);if(null!==(n=null==e?void 0:e.toText)&&void 0!==n&&n)return l(t);const c=yield function(t,e="png"){return new Promise(((n,c)=>{const a=new Image;a.onload=()=>r(this,void 0,void 0,(function*(){const t=document.createElement("canvas");t.width=a.width,t.height=a.height;try{const r=t.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(a,0,0);const c=yield i(t,o[e]);n(c)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),c(r)}})),a.onerror=()=>{c(new Error("Failed to load image"))},a.src=t}))}(t,"png");return yield navigator.clipboard.write([new ClipboardItem({[c.type]:c})]),c}catch(c){throw console.error(`Failed to copy to clipboard. message: ${c.message}`),c}}))}function f(){return r(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(t){throw console.error(`Failed to read clipboard. message: ${t.message}`),t}}))}function p(){return r(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(t){throw console.error(`Failed to read clipboard. message: ${t.message}`),t}}))}function h(t,e){return Object.prototype.hasOwnProperty.call(t,e)}const m=(t,e,n)=>{const r=Object.keys(t),o=Object.keys(e);if(r.length!==o.length)return!1;for(let i=0;i{if(t===e)return!0;if(w(t)&&w(e)&&isNaN(t)&&isNaN(e))return!0;if(b(t)&&b(e))return t.toString()===e.toString();if("object"!=typeof t||"object"!=typeof e||null===t||null===e)return!1;if(n.has(t)&&n.get(t)===e)return!0;if(n.set(t,e),t.constructor!==e.constructor)return!1;if(t instanceof Set){if(t.size!==e.size)return!1;const r=[...t],o=[...e];return m(r,o,n)}if(t instanceof Map){if(t.size!==e.size)return!1;for(const[r,o]of t)if(!e.has(r)||!v(o,e.get(r),n))return!1;return!0}return m(t,e,n)};function g(t,e){return v(t,e,new WeakMap)}function b(t){return"function"==typeof t}function y(t){return null==t}function w(t){return"number"==typeof t}function x(t){return!function(t){return Object(t)!==t}(t)}function j(t){return x(t)&&"[object Object]"===Object.prototype.toString.call(t)}function T(t){return t===window}function k(){}function C(t){if("string"!=typeof t)return t;try{return JSON.parse(t)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function S(t){return Object.keys(t)}const E={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};S(E);function O(t,e){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{window[t].removeItem(e)}catch(n){throw new Error(`Failed to remove key "${e}" from ${t}: ${n}`)}}function $(t,e,n){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[t],o=b(n)?n():n;r.setItem(e,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${e}" in ${t}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/cc0ca23c.6e15d121.js b/assets/js/cc0ca23c.6e15d121.js deleted file mode 100644 index 9dcaa28c1..000000000 --- a/assets/js/cc0ca23c.6e15d121.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[33],{4117:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>a,default:()=>p,frontMatter:()=>l,metadata:()=>r,toc:()=>f});const r=JSON.parse('{"id":"react/hooks/useThrottle","title":"useThrottle","description":"debounce\ub97c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useThrottle.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useThrottle","permalink":"/modern-kit/docs/react/hooks/useThrottle","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useStepState","permalink":"/modern-kit/docs/react/hooks/useStepState"},"next":{"title":"useTimeout","permalink":"/modern-kit/docs/react/hooks/useTimeout"}}');var o=n(6206),i=n(3267),s=n(4382),c=n(4027);const l={},a="useThrottle",u={},d=()=>{const e={button:"button",div:"div",p:"p",...(0,i.R)()},[t,n]=(0,s.useState)(1),[r,l]=(0,s.useState)(1),a=(0,c._g)((()=>{l(r+1)}),1e3);return(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.div,{style:{display:"flex"},children:[(0,o.jsx)(e.button,{onClick:()=>{n(t+1)},children:"\ubc84\ud2bc \ud074\ub9ad"}),(0,o.jsx)(e.div,{style:{width:"50px"}}),(0,o.jsx)(e.button,{onClick:a,children:"debounce \ubc84\ud2bc \ud074\ub9ad"})]}),(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.p,{children:["count: ",t]}),(0,o.jsxs)(e.p,{children:["throttledCount: ",r]})]})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function h(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usethrottle",children:"useThrottle"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"debounce"}),"\ub97c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useThrottle/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface ThrottleSettings {\n leading?: boolean | undefined;\n trailing?: boolean | undefined;\n}\n\ntype ThrottleParameters = Parameters;\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useThrottle any>(\n callback: T,\n wait: ThrottleParameters[1],\n options?: ThrottleParameters[2]\n): ThrottleReturnType;\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useState } from 'react';\nimport { useThrottle } from '@modern-kit/react';\n\nconst Example = () => {\n const [count, setCount] = useState(1);\n const [throttledCount, setThrottledCount] = useState(1);\n\n const countUp = () => {\n setCount(count + 1);\n };\n\n const throttledCountUp = useThrottle(() => {\n setThrottledCount(throttledCount + 1);\n }, 1000);\n\n return (\n
    \n
    \n \n
    \n \n
    \n
    \n

    count: {count}

    \n

    throttledCount: {throttledCount}

    \n
    \n
    \n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(d,{})]})}function p(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>Me,$I:()=>oe,AE:()=>_e,BL:()=>J,DX:()=>I,FT:()=>ct,Fo:()=>et,Hn:()=>it,I5:()=>je,JF:()=>$e,K:()=>ae,K$:()=>Ue,M0:()=>Te,ML:()=>ne,Mj:()=>ye,Mk:()=>Le,Mo:()=>ie,NT:()=>Xe,QV:()=>Ke,Ub:()=>ke,Ut:()=>Ee,W7:()=>K,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>We,Zu:()=>le,_1:()=>Oe,_g:()=>nt,aL:()=>U,aY:()=>Ie,bB:()=>V,d7:()=>B,eG:()=>st,fN:()=>ce,fm:()=>G,gl:()=>M,hN:()=>D,iD:()=>de,iQ:()=>Ne,jd:()=>se,lW:()=>at,oD:()=>H,oo:()=>Re,pL:()=>q,qi:()=>ue,rN:()=>Fe,tD:()=>Ce,u8:()=>Q,wY:()=>Be,xV:()=>N,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),i=n(3683),s=n(5086),c=n(7197),l=(n(1604),n(5938));function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function g(){return!m()}function w(e){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const b=e=>f(void 0,0,void 0,(function*(){return w(yield(yield fetch(e)).text())}));function v(e,t){var n;return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return b(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield p(e,h[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||S(e)&&S(t)&&isNaN(e)&&isNaN(t))return!0;if(C(e)&&C(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function k(e,t){return x(e,t,new WeakMap)}function C(e){return"function"==typeof e}function S(e){return"number"==typeof e}function E(e){return!function(e){return Object(e)!==e}(e)}function j(){}function R(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const O=(...e)=>t=>e.forEach((e=>{if(C(e))e(t);else if(null!=e){e.current=t}}));function T(...e){return(0,o.useCallback)(O(...e),e)}const I=o.forwardRef(((e,t)=>{const{children:n}=e,i=a(e,["children"]),s=o.Children.toArray(n),c=s.find(L);if(c){const e=c.props.children,n=s.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(F,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(F,Object.assign({},i,{ref:t,children:n}))}));I.displayName="Slot";const F=o.forwardRef(((e,t)=>{const{children:n}=e,r=a(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?O(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));F.displayName="SlotClone";const N=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function L(e){return o.isValidElement(e)&&e.type===N}var P="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const M=d(((e,t)=>{var{ratio:n,style:o,as:s="div",asChild:c=!1}=e,l=a(e,["ratio","style","as","asChild"]);const u=c?I:s,d=Object.assign({aspectRatio:n},o),f=c?l.className:i(P,l.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},l))})),$=()=>j,Y=()=>!1,X=()=>!0;function V({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)($,Y,X)?e:t}function A(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const D=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>A()?(0,r.jsx)(r.Fragment,{children:t}):e;function _(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function W(e){const t=_(e);(0,o.useEffect)((()=>()=>t()),[t])}function z(e,t=k){const[n,r]=(0,o.useState)(e),i=_(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function B(e,t,n){const r=_(e),i=z(n),c=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return W((()=>c.cancel())),c}const U=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),s=B(((...e)=>{const n=i?.props;if(n&&C(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:s})};function J({onIntersectStart:e=j,onIntersectEnd:t=j,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:s=0,rootMargin:c="0px 0px 0px 0px"}){const l=(0,o.useRef)(0),a=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=_((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(a.current=!0,l.current+=1,e(n)):a.current&&(a.current=!1,l.current+=1,t(n)),r&&l.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:s,root:i,rootMargin:c}),u.current.observe(e))}),[n,s,i,c,d])}}const H=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:s}=e,c=a(e,["src","threshold","root","rootMargin"]);const{ref:l}=J({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:T(t,l)},c))}));H.displayName="LazyImage";const K=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=a(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,g=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),w=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},l)),[m,u,l]),b=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),v=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:g,children:[m&&s,(0,r.jsx)(H,Object.assign({ref:t,width:n,height:i,style:w,onLoad:b},f))]})}));K.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:s="after",rootMargin:c="150px 0px"})=>{const{ref:l}=J({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:l}),t,"after"===s&&(0,r.jsx)("div",{ref:l})]})},q=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1}=e,c=a(e,["children","as","asChild"]);const l=s?I:i,{ref:u}=J(c);if(s&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(l,Object.assign({ref:O(t,u)},c,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return E(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=g()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=_(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1,onPointerDown:c,excludeRefs:l=[]}=e,u=a(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:l}),f=s?I:i;if(s&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:O(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:s=1,includeLastSeparator:c=!1})=>{const l=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%s==0),[c,s,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),l(t)&&n]})})},se=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function le(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function ae(e=!0){const t=C(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield w(e);return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),l=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:s,readText:c,readContents:l}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],ge=me("localStorage"),we=e=>window.localStorage.getItem(e),be=e=>JSON.stringify(e),ve=e=>(ge.subscribe(e),()=>{ge.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=C(n)?n():n,i=(0,o.useSyncExternalStore)(ve,(()=>we(t)),(()=>be(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=we(t),o=n?R(n):r,i=C(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),ge.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ge.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>g()?window.matchMedia(e).matches:t??!1;function ke(e,t){const[n,r]=(0,o.useState)(xe(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function Ce(){return ke("(prefers-color-scheme: dark)")?"dark":"light"}const Se="color-scheme";function Ee({defaultValue:e,key:t=Se,shouldSetBodyClass:n=!1}={}){const r=Ce(),i=C(e)?e():e,{state:s,setState:c}=ye({key:t,initialValue:i??r}),l=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),a=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(s),()=>{n&&document.body.classList.remove(s)})),[s,n]),{colorScheme:s,preferredColorScheme:r,setToggleMode:l,setDarkMode:a,setLightMode:u,setPreferredMode:d}}function je(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:s}}function Re({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),s=r0,l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),a=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const s=l(e,t);o&&o({prev:r,next:s}),i(s)}),[n,r,l]),u=(0,o.useCallback)((e=>{a("nextStep",!s,e)}),[s,a]),d=(0,o.useCallback)((e=>{a("prevStep",!c,e)}),[c,a]),f=(0,o.useCallback)(((t,n)=>{const o=C(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:s,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Oe(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=Re({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}function Te(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,B(i,t,n)]}function Ie(e,t={}){const[n,r]=(0,o.useState)(""),[i,s]=Te("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),s(t)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Fe(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onFocus:e=j,onBlur:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=_((t=>{r(!0),e(t)})),c=_((e=>{r(!1),t(e)})),l=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",s),ne(i,"blur",c),{ref:i,isFocus:n,setFocus:l}}function Le({onEnter:e=j,onLeave:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=_((t=>{r(!0),e(t)})),c=_((e=>{r(!1),t(e)}));return ne(i,"mouseenter",s),ne(i,"mouseleave",c),{ref:i,isHovered:n}}const Pe=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function Me(e,t){const n=(0,o.useRef)(),r=_(e),{delay:i,enabled:s}=Pe(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>l()}),[l,c,s,i]),{set:c,reset:a,clear:l}}function $e({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=_((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];C(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const Ye={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Xe(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Ye),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l}=t;let a=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();a=i-t.left,u=s-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l,elementRelativeX:a,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Ve=()=>navigator.onLine,Ae=()=>!0,De=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function _e({onlineAction:e=j,offlineAction:t=j}={}){const n=_((n=>De(n,e,t)));return(0,o.useSyncExternalStore)(n,Ve,Ae)}function We(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const ze={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function Be(e=j){const[t,n]=(0,o.useState)(ze),r=(0,o.useRef)(null),i=_((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function Ue({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:s="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+Je(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+Je(window.innerWidth,r.width,c)};const l=e.getBoundingClientRect();return{top:r.top-l.top+e.scrollTop+i+Je(l.height,r.height,s),left:r.left-l.left+e.scrollLeft+o+Je(l.width,r.width,c)}};function Ke(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:s}=He(r,t,n);r.scrollTo({top:s,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=C(n)?n():n,i=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?R(n):r,i=C(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[s,c]=(0,o.useState)(n),l=(0,o.useCallback)((e=>{c((t=>{const n=C(e)?e(t):e;return r&&i&&function(e,t,n){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=C(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),a=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),c(null)}),[r,i]);return Object.assign({state:s,setState:l,clearState:a},Re(e))}function nt(e,t,n={}){const r=_(e),i=z(n),s=(0,o.useMemo)((()=>(0,c.A)(r,t,i)),[r,t,i]);return W((()=>s.cancel())),s}const rt=e=>{var t;return S(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=_(e),{delay:i,enabled:s}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>l()}),[c,l,i,s]),{set:c,reset:a,clear:l}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function st(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new l.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const lt={width:null,height:null};function at({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?lt:{width:window.innerWidth,height:window.innerHeight})),r=B(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:s,reset:c,clear:l}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||c()}),[r,i,c,...n]),{set:s,reset:c,clear:l}}}}]); \ No newline at end of file diff --git a/assets/js/e3446db6.0af37d96.js b/assets/js/e3446db6.0af37d96.js deleted file mode 100644 index 300d8370d..000000000 --- a/assets/js/e3446db6.0af37d96.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[3461],{9785:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>l,default:()=>p,frontMatter:()=>a,metadata:()=>r,toc:()=>f});const r=JSON.parse('{"id":"react/hooks/useVhProperty","title":"useVhProperty","description":"iOS \uc6f9 \ud658\uacbd\uc5d0\uc11c\ub294 \uc8fc\uc18c\ud45c\uc2dc\uc904\uc758 \ub192\uc774\ub85c \uc778\ud574 100vh\uac00 \uc2e4\uc81c \ubcf4\uc774\ub294 \ud654\uba74\uc758 \ub192\uc774\ubcf4\ub2e4 \ud06c\uac8c \uce21\uc815\ub429\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useVhProperty.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useVhProperty","permalink":"/modern-kit/docs/react/hooks/useVhProperty","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useUserAgent","permalink":"/modern-kit/docs/react/hooks/useUserAgent"},"next":{"title":"useVisibilityChange","permalink":"/modern-kit/docs/react/hooks/useVisibilityChange"}}');var o=n(6206),i=n(3267),s=n(4382),c=n(4027);const a={},l="useVhProperty",u={},d=()=>{const e={div:"div",p:"p",...(0,i.R)()};(0,c.FT)();const t=(0,s.useMemo)((()=>({height:"calc(var(--vh, 1vh) * 100)",display:"flex",alignItems:"center",justifyContent:"center",background:"purple",fontSize:"2rem",color:"#fff"})),[]);return(0,o.jsx)(e.div,{style:t,children:(0,o.jsx)(e.p,{children:"100vh\ub97c \uc2e4\uc81c \ud654\uba74\uc758 \ub192\uc774\ub85c \uacc4\uc0b0\ud560 \uc218 \uc788\ub3c4\ub85d \uc124\uc815\ud574\uc90d\ub2c8\ub2e4."})})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function h(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usevhproperty",children:"useVhProperty"})}),"\n",(0,o.jsx)(t.p,{children:"iOS \uc6f9 \ud658\uacbd\uc5d0\uc11c\ub294 \uc8fc\uc18c\ud45c\uc2dc\uc904\uc758 \ub192\uc774\ub85c \uc778\ud574 100vh\uac00 \uc2e4\uc81c \ubcf4\uc774\ub294 \ud654\uba74\uc758 \ub192\uc774\ubcf4\ub2e4 \ud06c\uac8c \uce21\uc815\ub429\ub2c8\ub2e4."}),"\n",(0,o.jsxs)(t.p,{children:["\uc774\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574 ",(0,o.jsx)(t.code,{children:"useVhProperty"})," \ud6c5\uc744 \uc0ac\uc6a9\ud558\uba74 ",(0,o.jsx)(t.code,{children:"100vh"}),"\ub97c \uc2e4\uc81c \ud654\uba74\uc758 \ub192\uc774\ub85c \uacc4\uc0b0\ud560 \uc218 \uc788\ub3c4\ub85d css\ubcc0\uc218\ub97c \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:["\uc77c\ubc18\uc801\uc73c\ub85c iOS \ud658\uacbd\uc5d0\uc11c resize\ub294 \uac00\ub85c/\uc138\ub85c \uc804\ud658\uc2dc\uc5d0\ub9cc \ubc1c\uc0dd\ud558\uc9c0\ub9cc, \ub450\ubc88\uc9f8 \uc778\uc790\uc758 ",(0,o.jsx)(t.code,{children:"enableResize"}),"\ub97c \uc635\uc158\uc744 \uc0ac\uc6a9\ud558\uba74 iOS \ud658\uacbd\uc5d0\uc11c\ub3c4 ",(0,o.jsx)(t.code,{children:"resize"})," \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud560 \ub54c\ub9c8\ub2e4 css\ubcc0\uc218\ub97c \ub2e4\uc2dc \uacc4\uc0b0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useVhProperty/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"\ninterface UseVhPropertyProps {\n name?: string;\n enableResize?: boolean;\n}\n\nconst useVhProperty: ({ name, enableResize }?: UseVhPropertyProps) => void;\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useVhProperty } from '@modern-kit/react';\n\nconst Example = () => {\n useVhProperty(); \n // Resize: useVhProperty({ enableResize: true });\n\n const style: CSSProperties = useMemo(() => {\n return {\n height: 'calc(var(--vh, 1vh) * 100)',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n background: 'purple',\n fontSize: '2rem',\n color: '#fff',\n }\n }, []);\n\n return (\n
    \n

    100vh\ub97c \uc2e4\uc81c \ud654\uba74\uc758 \ub192\uc774\ub85c \uacc4\uc0b0\ud560 \uc218 \uc788\ub3c4\ub85d \uc124\uc815\ud574\uc90d\ub2c8\ub2e4.

    \n
    \n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(d,{})]})}function p(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>Ve,$I:()=>oe,AE:()=>De,BL:()=>J,DX:()=>I,FT:()=>ct,Fo:()=>et,Hn:()=>it,I5:()=>je,JF:()=>$e,K:()=>le,K$:()=>Ue,M0:()=>Pe,ML:()=>ne,Mj:()=>ye,Mk:()=>Le,Mo:()=>ie,NT:()=>ze,QV:()=>Ke,Ub:()=>ke,Ut:()=>Ee,W7:()=>K,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>We,Zu:()=>ae,_1:()=>Oe,_g:()=>nt,aL:()=>U,aY:()=>Ie,bB:()=>Y,d7:()=>B,eG:()=>st,fN:()=>ce,fm:()=>G,gl:()=>V,hN:()=>X,iD:()=>de,iQ:()=>Ne,jd:()=>se,lW:()=>lt,oD:()=>H,oo:()=>Re,pL:()=>q,qi:()=>ue,rN:()=>Fe,tD:()=>Se,u8:()=>Q,wY:()=>Be,xV:()=>N,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),i=n(3683),s=n(5086),c=n(7197),a=(n(1604),n(5938));function l(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function g(){return!m()}function w(e){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const v=e=>f(void 0,0,void 0,(function*(){return w(yield(yield fetch(e)).text())}));function b(e,t){var n;return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return v(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield p(e,h[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||C(e)&&C(t)&&isNaN(e)&&isNaN(t))return!0;if(S(e)&&S(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function k(e,t){return x(e,t,new WeakMap)}function S(e){return"function"==typeof e}function C(e){return"number"==typeof e}function E(e){return!function(e){return Object(e)!==e}(e)}function j(){}function R(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const O=(...e)=>t=>e.forEach((e=>{if(S(e))e(t);else if(null!=e){e.current=t}}));function P(...e){return(0,o.useCallback)(O(...e),e)}const I=o.forwardRef(((e,t)=>{const{children:n}=e,i=l(e,["children"]),s=o.Children.toArray(n),c=s.find(L);if(c){const e=c.props.children,n=s.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(F,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(F,Object.assign({},i,{ref:t,children:n}))}));I.displayName="Slot";const F=o.forwardRef(((e,t)=>{const{children:n}=e,r=l(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?O(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));F.displayName="SlotClone";const N=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function L(e){return o.isValidElement(e)&&e.type===N}var M="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const V=d(((e,t)=>{var{ratio:n,style:o,as:s="div",asChild:c=!1}=e,a=l(e,["ratio","style","as","asChild"]);const u=c?I:s,d=Object.assign({aspectRatio:n},o),f=c?a.className:i(M,a.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},a))})),$=()=>j,T=()=>!1,z=()=>!0;function Y({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)($,T,z)?e:t}function A(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const X=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>A()?(0,r.jsx)(r.Fragment,{children:t}):e;function D(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function W(e){const t=D(e);(0,o.useEffect)((()=>()=>t()),[t])}function _(e,t=k){const[n,r]=(0,o.useState)(e),i=D(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function B(e,t,n){const r=D(e),i=_(n),c=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return W((()=>c.cancel())),c}const U=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),s=B(((...e)=>{const n=i?.props;if(n&&S(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:s})};function J({onIntersectStart:e=j,onIntersectEnd:t=j,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:s=0,rootMargin:c="0px 0px 0px 0px"}){const a=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=D((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(l.current=!0,a.current+=1,e(n)):l.current&&(l.current=!1,a.current+=1,t(n)),r&&a.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:s,root:i,rootMargin:c}),u.current.observe(e))}),[n,s,i,c,d])}}const H=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:s}=e,c=l(e,["src","threshold","root","rootMargin"]);const{ref:a}=J({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:P(t,a)},c))}));H.displayName="LazyImage";const K=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:s,className:c,style:a,duration:u="0.2s",onLoad:d}=e,f=l(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,g=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),w=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},a)),[m,u,a]),v=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),b=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:b,style:g,children:[m&&s,(0,r.jsx)(H,Object.assign({ref:t,width:n,height:i,style:w,onLoad:v},f))]})}));K.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:s="after",rootMargin:c="150px 0px"})=>{const{ref:a}=J({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:a}),t,"after"===s&&(0,r.jsx)("div",{ref:a})]})},q=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1}=e,c=l(e,["children","as","asChild"]);const a=s?I:i,{ref:u}=J(c);if(s&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(a,Object.assign({ref:O(t,u)},c,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return E(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=g()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=D(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1,onPointerDown:c,excludeRefs:a=[]}=e,u=l(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:a}),f=s?I:i;if(s&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:O(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:s=1,includeLastSeparator:c=!1})=>{const a=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%s==0),[c,s,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),a(t)&&n]})})},se=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function ae(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function le(e=!0){const t=S(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield w(e);return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield b(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),a=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:s,readText:c,readContents:a}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],ge=me("localStorage"),we=e=>window.localStorage.getItem(e),ve=e=>JSON.stringify(e),be=e=>(ge.subscribe(e),()=>{ge.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(be,(()=>we(t)),(()=>ve(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=we(t),o=n?R(n):r,i=S(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),ge.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ge.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>g()?window.matchMedia(e).matches:t??!1;function ke(e,t){const[n,r]=(0,o.useState)(xe(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function Se(){return ke("(prefers-color-scheme: dark)")?"dark":"light"}const Ce="color-scheme";function Ee({defaultValue:e,key:t=Ce,shouldSetBodyClass:n=!1}={}){const r=Se(),i=S(e)?e():e,{state:s,setState:c}=ye({key:t,initialValue:i??r}),a=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),l=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(s),()=>{n&&document.body.classList.remove(s)})),[s,n]),{colorScheme:s,preferredColorScheme:r,setToggleMode:a,setDarkMode:l,setLightMode:u,setPreferredMode:d}}function je(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:s}}function Re({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),s=r0,a=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),l=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const s=a(e,t);o&&o({prev:r,next:s}),i(s)}),[n,r,a]),u=(0,o.useCallback)((e=>{l("nextStep",!s,e)}),[s,l]),d=(0,o.useCallback)((e=>{l("prevStep",!c,e)}),[c,l]),f=(0,o.useCallback)(((t,n)=>{const o=S(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:s,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Oe(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=Re({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}function Pe(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,B(i,t,n)]}function Ie(e,t={}){const[n,r]=(0,o.useState)(""),[i,s]=Pe("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),s(t)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Fe(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onFocus:e=j,onBlur:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=D((t=>{r(!0),e(t)})),c=D((e=>{r(!1),t(e)})),a=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",s),ne(i,"blur",c),{ref:i,isFocus:n,setFocus:a}}function Le({onEnter:e=j,onLeave:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=D((t=>{r(!0),e(t)})),c=D((e=>{r(!1),t(e)}));return ne(i,"mouseenter",s),ne(i,"mouseleave",c),{ref:i,isHovered:n}}const Me=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function Ve(e,t){const n=(0,o.useRef)(),r=D(e),{delay:i,enabled:s}=Me(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>a()}),[a,c,s,i]),{set:c,reset:l,clear:a}}function $e({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=D((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];S(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const Te={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function ze(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Te),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:a}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=i-t.left,u=s-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:a,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Ye=()=>navigator.onLine,Ae=()=>!0,Xe=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function De({onlineAction:e=j,offlineAction:t=j}={}){const n=D((n=>Xe(n,e,t)));return(0,o.useSyncExternalStore)(n,Ye,Ae)}function We(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const _e={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function Be(e=j){const[t,n]=(0,o.useState)(_e),r=(0,o.useRef)(null),i=D((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function Ue({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:s="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+Je(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+Je(window.innerWidth,r.width,c)};const a=e.getBoundingClientRect();return{top:r.top-a.top+e.scrollTop+i+Je(a.height,r.height,s),left:r.left-a.left+e.scrollLeft+o+Je(a.width,r.width,c)}};function Ke(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:s}=He(r,t,n);r.scrollTo({top:s,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?R(n):r,i=S(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[s,c]=(0,o.useState)(n),a=(0,o.useCallback)((e=>{c((t=>{const n=S(e)?e(t):e;return r&&i&&function(e,t,n){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=S(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),l=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!g())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),c(null)}),[r,i]);return Object.assign({state:s,setState:a,clearState:l},Re(e))}function nt(e,t,n={}){const r=D(e),i=_(n),s=(0,o.useMemo)((()=>(0,c.A)(r,t,i)),[r,t,i]);return W((()=>s.cancel())),s}const rt=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=D(e),{delay:i,enabled:s}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),a=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),c()}),[a,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>a()}),[c,a,i,s]),{set:c,reset:l,clear:a}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function st(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new a.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const at={width:null,height:null};function lt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?at:{width:window.innerWidth,height:window.innerHeight})),r=B(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:s,reset:c,clear:a}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||c()}),[r,i,c,...n]),{set:s,reset:c,clear:a}}}}]); \ No newline at end of file diff --git a/assets/js/e3446db6.60006c6a.js b/assets/js/e3446db6.60006c6a.js new file mode 100644 index 000000000..733727184 --- /dev/null +++ b/assets/js/e3446db6.60006c6a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[3461],{8975:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>l,assets:()=>u,contentTitle:()=>d,default:()=>f,frontMatter:()=>a,metadata:()=>r,toc:()=>h});const r=JSON.parse('{"id":"react/hooks/useVhProperty","title":"useVhProperty","description":"iOS \uc6f9 \ud658\uacbd\uc5d0\uc11c\ub294 \uc8fc\uc18c\ud45c\uc2dc\uc904\uc758 \ub192\uc774\ub85c \uc778\ud574 100vh\uac00 \uc2e4\uc81c \ubcf4\uc774\ub294 \ud654\uba74\uc758 \ub192\uc774\ubcf4\ub2e4 \ud06c\uac8c \uce21\uc815\ub429\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useVhProperty.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useVhProperty","permalink":"/modern-kit/docs/react/hooks/useVhProperty","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useUserAgent","permalink":"/modern-kit/docs/react/hooks/useUserAgent"},"next":{"title":"useVisibilityChange","permalink":"/modern-kit/docs/react/hooks/useVisibilityChange"}}');var o=t(6206),i=t(3267),s=t(4382),c=t(5907);const a={},d="useVhProperty",u={},l=()=>{const e={div:"div",p:"p",...(0,i.R)()};!function({name:e="vh",enabledResize:n=!1}={}){(0,c.E)((()=>{const t=()=>{const n=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${n}px`)};return t(),n&&window.addEventListener("resize",t),()=>{n&&window.removeEventListener("resize",t)}}),[e,n])}();const n=(0,s.useMemo)((()=>({height:"calc(var(--vh, 1vh) * 100)",display:"flex",alignItems:"center",justifyContent:"center",background:"purple",fontSize:"2rem",color:"#fff"})),[]);return(0,o.jsx)(e.div,{style:n,children:(0,o.jsx)(e.p,{children:"100vh\ub97c \uc2e4\uc81c \ud654\uba74\uc758 \ub192\uc774\ub85c \uacc4\uc0b0\ud560 \uc218 \uc788\ub3c4\ub85d \uc124\uc815\ud574\uc90d\ub2c8\ub2e4."})})},h=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function p(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"usevhproperty",children:"useVhProperty"})}),"\n",(0,o.jsx)(n.p,{children:"iOS \uc6f9 \ud658\uacbd\uc5d0\uc11c\ub294 \uc8fc\uc18c\ud45c\uc2dc\uc904\uc758 \ub192\uc774\ub85c \uc778\ud574 100vh\uac00 \uc2e4\uc81c \ubcf4\uc774\ub294 \ud654\uba74\uc758 \ub192\uc774\ubcf4\ub2e4 \ud06c\uac8c \uce21\uc815\ub429\ub2c8\ub2e4."}),"\n",(0,o.jsxs)(n.p,{children:["\uc774\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574 ",(0,o.jsx)(n.code,{children:"useVhProperty"})," \ud6c5\uc744 \uc0ac\uc6a9\ud558\uba74 ",(0,o.jsx)(n.code,{children:"100vh"}),"\ub97c \uc2e4\uc81c \ud654\uba74\uc758 \ub192\uc774\ub85c \uacc4\uc0b0\ud560 \uc218 \uc788\ub3c4\ub85d css\ubcc0\uc218\ub97c \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.p,{children:["\uc77c\ubc18\uc801\uc73c\ub85c iOS \ud658\uacbd\uc5d0\uc11c resize\ub294 \uac00\ub85c/\uc138\ub85c \uc804\ud658\uc2dc\uc5d0\ub9cc \ubc1c\uc0dd\ud558\uc9c0\ub9cc, \ub450\ubc88\uc9f8 \uc778\uc790\uc758 ",(0,o.jsx)(n.code,{children:"enableResize"}),"\ub97c \uc635\uc158\uc744 \uc0ac\uc6a9\ud558\uba74 iOS \ud658\uacbd\uc5d0\uc11c\ub3c4 ",(0,o.jsx)(n.code,{children:"resize"})," \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud560 \ub54c\ub9c8\ub2e4 css\ubcc0\uc218\ub97c \ub2e4\uc2dc \uacc4\uc0b0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useVhProperty/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"\ninterface UseVhPropertyProps {\n name?: string;\n enableResize?: boolean;\n}\n\nconst useVhProperty: ({ name, enableResize }?: UseVhPropertyProps) => void;\n"})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useVhProperty } from '@modern-kit/react';\n\nconst Example = () => {\n useVhProperty(); \n // Resize: useVhProperty({ enableResize: true });\n\n const style: CSSProperties = useMemo(() => {\n return {\n height: 'calc(var(--vh, 1vh) * 100)',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n background: 'purple',\n fontSize: '2rem',\n color: '#fff',\n }\n }, []);\n\n return (\n
    \n

    100vh\ub97c \uc2e4\uc81c \ud654\uba74\uc758 \ub192\uc774\ub85c \uacc4\uc0b0\ud560 \uc218 \uc788\ub3c4\ub85d \uc124\uc815\ud574\uc90d\ub2c8\ub2e4.

    \n
    \n );\n};\n"})}),"\n",(0,o.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(l,{})]})}function f(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},3267:(e,n,t)=>{t.d(n,{R:()=>s,x:()=>c});var r=t(4382);const o={},i=r.createContext(o);function s(e){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),r.createElement(i.Provider,{value:n},e.children)}},5907:(e,n,t)=>{t.d(n,{E:()=>i});var r=t(9340),o=t(4382);const i=(0,r.oc)()?o.useLayoutEffect:o.useEffect},9340:(e,n,t)=>{function r(e,n,t,r){return new(t||(t=Promise))((function(o,i){function s(e){try{a(r.next(e))}catch(n){i(n)}}function c(e){try{a(r.throw(e))}catch(n){i(n)}}function a(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(s,c)}a((r=r.apply(e,n||[])).next())}))}t.d(n,{Et:()=>x,Fr:()=>c,Gp:()=>g,Ol:()=>P,Qd:()=>j,S$:()=>s,Tn:()=>v,Zp:()=>h,dK:()=>d,fl:()=>O,gD:()=>w,i5:()=>f,if:()=>p,l6:()=>k,lQ:()=>E,nS:()=>l,ni:()=>V,oc:()=>a}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,n)=>new Promise(((t,r)=>{e.toBlob((e=>{e?t(e):r(new Error(`Failed to create blob with format ${n}`))}),n)}));function s(){return"undefined"==typeof window}function c(){if(s())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function a(){return!s()}function d(e){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const u=e=>r(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return d(yield n.text())}));function l(e,n){var t;return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return u(e);if(!("write"in window.navigator.clipboard))return u(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return u(e);const s=yield function(e,n="png"){return new Promise(((t,s)=>{const c=new Image;c.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=c.width,e.height=c.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(c,0,0);const s=yield i(e,o[n]);t(s)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),s(r)}})),c.onerror=()=>{s(new Error("Failed to load image"))},c.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[s.type]:s})]),s}catch(s){throw console.error(`Failed to copy to clipboard. message: ${s.message}`),s}}))}function h(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function f(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const m=(e,n,t)=>{const r=Object.keys(e),o=Object.keys(n);if(r.length!==o.length)return!1;for(let i=0;i{if(e===n)return!0;if(x(e)&&x(n)&&isNaN(e)&&isNaN(n))return!0;if(v(e)&&v(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const r=[...e],o=[...n];return m(r,o,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[r,o]of e)if(!n.has(r)||!y(o,n.get(r),t))return!1;return!0}return m(e,n,t)};function g(e,n){return y(e,n,new WeakMap)}function v(e){return"function"==typeof e}function w(e){return null==e}function x(e){return"number"==typeof e}function b(e){return!function(e){return Object(e)!==e}(e)}function j(e){return b(e)&&"[object Object]"===Object.prototype.toString.call(e)}function k(e){return e===window}function E(){}function P(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function C(e){return Object.keys(e)}const S={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};C(S);function O(e,n){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function V(e,n,t){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=v(t)?t():t;r.setItem(n,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${n}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/eb0f0f4b.a2aa0ab8.js b/assets/js/eb0f0f4b.a2aa0ab8.js new file mode 100644 index 000000000..c8fc7c8d3 --- /dev/null +++ b/assets/js/eb0f0f4b.a2aa0ab8.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[3348],{8353:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>w,assets:()=>p,contentTitle:()=>h,default:()=>g,frontMatter:()=>f,metadata:()=>r,toc:()=>m});const r=JSON.parse('{"id":"react/hooks/useNetwork","title":"useNetwork","description":"useSyncExternalStore\uc744 \uc0ac\uc6a9\ud574 \ube0c\ub77c\uc6b0\uc800 \ub124\ud2b8\uc6cc\ud06c \uc5f0\uacb0 \uc0c1\ud0dc\ub97c \uad6c\ub3c5 \ud6c4 online \uc0c1\ud0dc \uc5ec\ubd80\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useNetwork.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useNetwork","permalink":"/modern-kit/docs/react/hooks/useNetwork","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useMouse","permalink":"/modern-kit/docs/react/hooks/useMouse"},"next":{"title":"useOutsidePointerDown","permalink":"/modern-kit/docs/react/hooks/useOutsidePointerDown"}}');var o=t(6206),i=t(3267),c=t(9340),s=t(6765),a=t(4382);const l=()=>navigator.onLine,d=()=>!0;function u({onlineAction:e=c.lQ,offlineAction:n=c.lQ}={}){const t=(0,s.p)((t=>((e,n,t)=>{const r=t=>(n(t),e()),o=n=>(t(n),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}})(t,e,n)));return(0,a.useSyncExternalStore)(t,l,d)}const f={},h="useNetwork",p={},w=()=>{const e={div:"div",p:"p",...(0,i.R)()},{isOnline:n}=u({onlineCallback:()=>{alert("online")},offlineCallback:()=>{alert("offline")}});return(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.p,{children:"\uac1c\ubc1c\uc790 \ub3c4\uad6c\uc758 \ub124\ud2b8\uc6cc\ud06c \ud0ed\uc5d0\uc11c \ub514\ubc14\uc774\uc2a4 \uc5f0\uacb0\uc744 \ub04a\uc5b4\ubcf4\uc138\uc694."}),(0,o.jsx)(e.p,{children:n?"\ud83d\udfe2 Online":"\u274c Offline"})]})},m=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2},{value:"Note",id:"note",level:2}];function v(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"usenetwork",children:"useNetwork"})}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"useSyncExternalStore"}),"\uc744 \uc0ac\uc6a9\ud574 \ube0c\ub77c\uc6b0\uc800 \ub124\ud2b8\uc6cc\ud06c \uc5f0\uacb0 \uc0c1\ud0dc\ub97c \uad6c\ub3c5 \ud6c4 online \uc0c1\ud0dc \uc5ec\ubd80\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"onlineCallback"}),", ",(0,o.jsx)(n.code,{children:"offlineCallback"}),"\uc744 \ud1b5\ud574 \ub124\ud2b8\uc6cc\ud06c \uc0c1\ud0dc\uac00 \ubcc0\uacbd \ub420 \ub54c \uc6d0\ud558\ub294 \ud568\uc218\ub97c \ud638\ucd9c \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useNetwork/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseNetworkProps {\n onlineCallback?: (event: Event) => void;\n offlineCallback?: (event: Event) => void;\n}\n\nconst useNetwork: ({ onlineCallback, offlineCallback }?: UseNetworkProps) => {\n isOnline: boolean;\n};\n"})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useNetwork } from '@modern-kit/react';\n\nconst Example = () => {\n const { isOnline } = useNetwork({\n onlineCallback: () => {\n alert('online');\n },\n offlineCallback: () => {\n alert('offline');\n },\n });\n\n return (\n
    \n

    \uac1c\ubc1c\uc790 \ub3c4\uad6c\uc758 \ub124\ud2b8\uc6cc\ud06c \ud0ed\uc5d0\uc11c \ub514\ubc14\uc774\uc2a4 \uc5f0\uacb0\uc744 \ub04a\uc5b4\ubcf4\uc138\uc694.

    \n

    {isOnline ? '\ud83d\udfe2 online' : '\u274c offline'}

    \n
    \n );\n};\n"})}),"\n",(0,o.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(w,{}),"\n",(0,o.jsx)(n.h2,{id:"note",children:"Note"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://react.dev/reference/react/useSyncExternalStore",children:"useSyncExternalStore(en) - react.dev"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://ko.react.dev/reference/react/useSyncExternalStore",children:"useSyncExternalStore(ko) - react.dev"})}),"\n"]})]})}function g(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(v,{...e})}):v(e)}},3267:(e,n,t)=>{t.d(n,{R:()=>c,x:()=>s});var r=t(4382);const o={},i=r.createContext(o);function c(e){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),r.createElement(i.Provider,{value:n},e.children)}},6765:(e,n,t)=>{t.d(n,{p:()=>o});var r=t(4382);function o(e){const n=(0,r.useRef)(e);return n.current=e,(0,r.useCallback)(((...e)=>n.current(...e)),[])}},9340:(e,n,t)=>{function r(e,n,t,r){return new(t||(t=Promise))((function(o,i){function c(e){try{a(r.next(e))}catch(n){i(n)}}function s(e){try{a(r.throw(e))}catch(n){i(n)}}function a(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(c,s)}a((r=r.apply(e,n||[])).next())}))}t.d(n,{Et:()=>b,Fr:()=>s,Gp:()=>v,Ol:()=>C,Qd:()=>k,S$:()=>c,Tn:()=>g,Zp:()=>f,dK:()=>l,fl:()=>O,gD:()=>x,i5:()=>p,if:()=>h,l6:()=>j,lQ:()=>E,nS:()=>u,ni:()=>$,oc:()=>a}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,n)=>new Promise(((t,r)=>{e.toBlob((e=>{e?t(e):r(new Error(`Failed to create blob with format ${n}`))}),n)}));function c(){return"undefined"==typeof window}function s(){if(c())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function a(){return!c()}function l(e){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const n=document.createElement("textarea");n.value=e,n.style.opacity="0",document.body.appendChild(n),n.focus(),n.select();try{return document.execCommand("copy"),e}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}finally{document.body.removeChild(n)}}(e)}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}}))}const d=e=>r(void 0,void 0,void 0,(function*(){const n=yield fetch(e);return l(yield n.text())}));function u(e,n){var t;return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return d(e);if(!("write"in window.navigator.clipboard))return d(e);if(null!==(t=null==n?void 0:n.toText)&&void 0!==t&&t)return d(e);const c=yield function(e,n="png"){return new Promise(((t,c)=>{const s=new Image;s.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=s.width,e.height=s.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(s,0,0);const c=yield i(e,o[n]);t(c)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),c(r)}})),s.onerror=()=>{c(new Error("Failed to load image"))},s.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[c.type]:c})]),c}catch(c){throw console.error(`Failed to copy to clipboard. message: ${c.message}`),c}}))}function f(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function h(){return r(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(e,n){return Object.prototype.hasOwnProperty.call(e,n)}const w=(e,n,t)=>{const r=Object.keys(e),o=Object.keys(n);if(r.length!==o.length)return!1;for(let i=0;i{if(e===n)return!0;if(b(e)&&b(n)&&isNaN(e)&&isNaN(n))return!0;if(g(e)&&g(n))return e.toString()===n.toString();if("object"!=typeof e||"object"!=typeof n||null===e||null===n)return!1;if(t.has(e)&&t.get(e)===n)return!0;if(t.set(e,n),e.constructor!==n.constructor)return!1;if(e instanceof Set){if(e.size!==n.size)return!1;const r=[...e],o=[...n];return w(r,o,t)}if(e instanceof Map){if(e.size!==n.size)return!1;for(const[r,o]of e)if(!n.has(r)||!m(o,n.get(r),t))return!1;return!0}return w(e,n,t)};function v(e,n){return m(e,n,new WeakMap)}function g(e){return"function"==typeof e}function x(e){return null==e}function b(e){return"number"==typeof e}function y(e){return!function(e){return Object(e)!==e}(e)}function k(e){return y(e)&&"[object Object]"===Object.prototype.toString.call(e)}function j(e){return e===window}function E(){}function C(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(n){throw new Error(`Failed to parse data: ${n}`)}}function S(e){return Object.keys(e)}const N={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};S(N);function O(e,n){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(n)}catch(t){throw new Error(`Failed to remove key "${n}" from ${e}: ${t}`)}}function $(e,n,t){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=g(t)?t():t;r.setItem(n,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${n}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/eb0f0f4b.a3f4489a.js b/assets/js/eb0f0f4b.a3f4489a.js deleted file mode 100644 index df8aaaf69..000000000 --- a/assets/js/eb0f0f4b.a3f4489a.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[3348],{6836:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>a,contentTitle:()=>l,default:()=>h,frontMatter:()=>c,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"react/hooks/useNetwork","title":"useNetwork","description":"useSyncExternalStore\uc744 \uc0ac\uc6a9\ud574 \ube0c\ub77c\uc6b0\uc800 \ub124\ud2b8\uc6cc\ud06c \uc5f0\uacb0 \uc0c1\ud0dc\ub97c \uad6c\ub3c5 \ud6c4 online \uc0c1\ud0dc \uc5ec\ubd80\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useNetwork.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useNetwork","permalink":"/modern-kit/docs/react/hooks/useNetwork","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useMouse","permalink":"/modern-kit/docs/react/hooks/useMouse"},"next":{"title":"useOutsidePointerDown","permalink":"/modern-kit/docs/react/hooks/useOutsidePointerDown"}}');var o=n(6206),i=n(3267),s=n(4027);const c={},l="useNetwork",a={},u=()=>{const e={div:"div",p:"p",...(0,i.R)()},{isOnline:t}=(0,s.AE)({onlineCallback:()=>{alert("online")},offlineCallback:()=>{alert("offline")}});return(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.p,{children:"\uac1c\ubc1c\uc790 \ub3c4\uad6c\uc758 \ub124\ud2b8\uc6cc\ud06c \ud0ed\uc5d0\uc11c \ub514\ubc14\uc774\uc2a4 \uc5f0\uacb0\uc744 \ub04a\uc5b4\ubcf4\uc138\uc694."}),(0,o.jsx)(e.p,{children:t?"\ud83d\udfe2 Online":"\u274c Offline"})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2},{value:"Note",id:"note",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usenetwork",children:"useNetwork"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"useSyncExternalStore"}),"\uc744 \uc0ac\uc6a9\ud574 \ube0c\ub77c\uc6b0\uc800 \ub124\ud2b8\uc6cc\ud06c \uc5f0\uacb0 \uc0c1\ud0dc\ub97c \uad6c\ub3c5 \ud6c4 online \uc0c1\ud0dc \uc5ec\ubd80\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"onlineCallback"}),", ",(0,o.jsx)(t.code,{children:"offlineCallback"}),"\uc744 \ud1b5\ud574 \ub124\ud2b8\uc6cc\ud06c \uc0c1\ud0dc\uac00 \ubcc0\uacbd \ub420 \ub54c \uc6d0\ud558\ub294 \ud568\uc218\ub97c \ud638\ucd9c \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useNetwork/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseNetworkProps {\n onlineCallback?: (event: Event) => void;\n offlineCallback?: (event: Event) => void;\n}\n\nconst useNetwork: ({ onlineCallback, offlineCallback }?: UseNetworkProps) => {\n isOnline: boolean;\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useNetwork } from '@modern-kit/react';\n\nconst Example = () => {\n const { isOnline } = useNetwork({\n onlineCallback: () => {\n alert('online');\n },\n offlineCallback: () => {\n alert('offline');\n },\n });\n\n return (\n
    \n

    \uac1c\ubc1c\uc790 \ub3c4\uad6c\uc758 \ub124\ud2b8\uc6cc\ud06c \ud0ed\uc5d0\uc11c \ub514\ubc14\uc774\uc2a4 \uc5f0\uacb0\uc744 \ub04a\uc5b4\ubcf4\uc138\uc694.

    \n

    {isOnline ? '\ud83d\udfe2 online' : '\u274c offline'}

    \n
    \n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(u,{}),"\n",(0,o.jsx)(t.h2,{id:"note",children:"Note"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://react.dev/reference/react/useSyncExternalStore",children:"useSyncExternalStore(en) - react.dev"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://ko.react.dev/reference/react/useSyncExternalStore",children:"useSyncExternalStore(ko) - react.dev"})}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(f,{...e})}):f(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>$e,$I:()=>oe,AE:()=>We,BL:()=>U,DX:()=>I,FT:()=>ct,Fo:()=>et,Hn:()=>it,I5:()=>je,JF:()=>Te,K:()=>ae,K$:()=>Je,M0:()=>Ne,ML:()=>ne,Mj:()=>ye,Mk:()=>Me,Mo:()=>ie,NT:()=>De,QV:()=>Ke,Ub:()=>xe,Ut:()=>Ee,W7:()=>K,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>_e,Zu:()=>le,_1:()=>Re,_g:()=>nt,aL:()=>J,aY:()=>Ie,bB:()=>X,d7:()=>B,eG:()=>st,fN:()=>ce,fm:()=>G,gl:()=>$,hN:()=>V,iD:()=>de,iQ:()=>Le,jd:()=>se,lW:()=>at,oD:()=>H,oo:()=>Oe,pL:()=>q,qi:()=>ue,rN:()=>Fe,tD:()=>Se,u8:()=>Q,wY:()=>Be,xV:()=>L,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),i=n(3683),s=n(5086),c=n(7197),l=(n(1604),n(5938));function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function w(){return!m()}function g(e){return f(this,0,void 0,(function*(){if(!w())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const b=e=>f(void 0,0,void 0,(function*(){return g(yield(yield fetch(e)).text())}));function v(e,t){var n;return f(this,0,void 0,(function*(){if(!w())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return b(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield p(e,h[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const y=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||C(e)&&C(t)&&isNaN(e)&&isNaN(t))return!0;if(S(e)&&S(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return y(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!k(o,t.get(r),n))return!1;return!0}return y(e,t,n)};function x(e,t){return k(e,t,new WeakMap)}function S(e){return"function"==typeof e}function C(e){return"number"==typeof e}function E(e){return!function(e){return Object(e)!==e}(e)}function j(){}function O(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const R=(...e)=>t=>e.forEach((e=>{if(S(e))e(t);else if(null!=e){e.current=t}}));function N(...e){return(0,o.useCallback)(R(...e),e)}const I=o.forwardRef(((e,t)=>{const{children:n}=e,i=a(e,["children"]),s=o.Children.toArray(n),c=s.find(M);if(c){const e=c.props.children,n=s.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(F,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(F,Object.assign({},i,{ref:t,children:n}))}));I.displayName="Slot";const F=o.forwardRef(((e,t)=>{const{children:n}=e,r=a(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?R(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));F.displayName="SlotClone";const L=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function M(e){return o.isValidElement(e)&&e.type===L}var P="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const $=d(((e,t)=>{var{ratio:n,style:o,as:s="div",asChild:c=!1}=e,l=a(e,["ratio","style","as","asChild"]);const u=c?I:s,d=Object.assign({aspectRatio:n},o),f=c?l.className:i(P,l.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},l))})),T=()=>j,Y=()=>!1,D=()=>!0;function X({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(T,Y,D)?e:t}function A(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const V=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>A()?(0,r.jsx)(r.Fragment,{children:t}):e;function W(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function _(e){const t=W(e);(0,o.useEffect)((()=>()=>t()),[t])}function z(e,t=x){const[n,r]=(0,o.useState)(e),i=W(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function B(e,t,n){const r=W(e),i=z(n),c=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return _((()=>c.cancel())),c}const J=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),s=B(((...e)=>{const n=i?.props;if(n&&S(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:s})};function U({onIntersectStart:e=j,onIntersectEnd:t=j,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:s=0,rootMargin:c="0px 0px 0px 0px"}){const l=(0,o.useRef)(0),a=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=W((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(a.current=!0,l.current+=1,e(n)):a.current&&(a.current=!1,l.current+=1,t(n)),r&&l.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:s,root:i,rootMargin:c}),u.current.observe(e))}),[n,s,i,c,d])}}const H=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:s}=e,c=a(e,["src","threshold","root","rootMargin"]);const{ref:l}=U({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:N(t,l)},c))}));H.displayName="LazyImage";const K=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=a(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,w=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),g=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},l)),[m,u,l]),b=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),v=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:v,style:w,children:[m&&s,(0,r.jsx)(H,Object.assign({ref:t,width:n,height:i,style:g,onLoad:b},f))]})}));K.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:s="after",rootMargin:c="150px 0px"})=>{const{ref:l}=U({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:l}),t,"after"===s&&(0,r.jsx)("div",{ref:l})]})},q=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1}=e,c=a(e,["children","as","asChild"]);const l=s?I:i,{ref:u}=U(c);if(s&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(l,Object.assign({ref:R(t,u)},c,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return E(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=w()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=W(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1,onPointerDown:c,excludeRefs:l=[]}=e,u=a(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:l}),f=s?I:i;if(s&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:R(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:s=1,includeLastSeparator:c=!1})=>{const l=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%s==0),[c,s,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),l(t)&&n]})})},se=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function le(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function ae(e=!0){const t=S(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield g(e);return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield v(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!w())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),l=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!w())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:s,readText:c,readContents:l}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],we=me("localStorage"),ge=e=>window.localStorage.getItem(e),be=e=>JSON.stringify(e),ve=e=>(we.subscribe(e),()=>{we.unsubscribe(e)});function ye(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(ve,(()=>ge(t)),(()=>be(r)));return{state:(0,o.useMemo)((()=>i?O(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=ge(t),o=n?O(n):r,i=S(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),we.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),we.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const ke=(e,t)=>w()?window.matchMedia(e).matches:t??!1;function xe(e,t){const[n,r]=(0,o.useState)(ke(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function Se(){return xe("(prefers-color-scheme: dark)")?"dark":"light"}const Ce="color-scheme";function Ee({defaultValue:e,key:t=Ce,shouldSetBodyClass:n=!1}={}){const r=Se(),i=S(e)?e():e,{state:s,setState:c}=ye({key:t,initialValue:i??r}),l=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),a=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(s),()=>{n&&document.body.classList.remove(s)})),[s,n]),{colorScheme:s,preferredColorScheme:r,setToggleMode:l,setDarkMode:a,setLightMode:u,setPreferredMode:d}}function je(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:s}}function Oe({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),s=r0,l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),a=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const s=l(e,t);o&&o({prev:r,next:s}),i(s)}),[n,r,l]),u=(0,o.useCallback)((e=>{a("nextStep",!s,e)}),[s,a]),d=(0,o.useCallback)((e=>{a("prevStep",!c,e)}),[c,a]),f=(0,o.useCallback)(((t,n)=>{const o=S(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:s,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Re(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=Oe({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}function Ne(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,B(i,t,n)]}function Ie(e,t={}){const[n,r]=(0,o.useState)(""),[i,s]=Ne("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),s(t)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Fe(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Le({onFocus:e=j,onBlur:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=W((t=>{r(!0),e(t)})),c=W((e=>{r(!1),t(e)})),l=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",s),ne(i,"blur",c),{ref:i,isFocus:n,setFocus:l}}function Me({onEnter:e=j,onLeave:t=j}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=W((t=>{r(!0),e(t)})),c=W((e=>{r(!1),t(e)}));return ne(i,"mouseenter",s),ne(i,"mouseleave",c),{ref:i,isHovered:n}}const Pe=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function $e(e,t){const n=(0,o.useRef)(),r=W(e),{delay:i,enabled:s}=Pe(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>l()}),[l,c,s,i]),{set:c,reset:a,clear:l}}function Te({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=W((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];S(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const Ye={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function De(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Ye),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l}=t;let a=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();a=i-t.left,u=s-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l,elementRelativeX:a,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Xe=()=>navigator.onLine,Ae=()=>!0,Ve=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function We({onlineAction:e=j,offlineAction:t=j}={}){const n=W((n=>Ve(n,e,t)));return(0,o.useSyncExternalStore)(n,Xe,Ae)}function _e(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const ze={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function Be(e=j){const[t,n]=(0,o.useState)(ze),r=(0,o.useRef)(null),i=W((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function Je({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const Ue=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:s="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+Ue(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+Ue(window.innerWidth,r.width,c)};const l=e.getBoundingClientRect();return{top:r.top-l.top+e.scrollTop+i+Ue(l.height,r.height,s),left:r.left-l.left+e.scrollLeft+o+Ue(l.width,r.width,c)}};function Ke(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:s}=He(r,t,n);r.scrollTo({top:s,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=S(n)?n():n,i=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>i?O(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?O(n):r,i=S(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[s,c]=(0,o.useState)(n),l=(0,o.useCallback)((e=>{c((t=>{const n=S(e)?e(t):e;return r&&i&&function(e,t,n){if(!w())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=S(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),a=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!w())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),c(null)}),[r,i]);return Object.assign({state:s,setState:l,clearState:a},Oe(e))}function nt(e,t,n={}){const r=W(e),i=z(n),s=(0,o.useMemo)((()=>(0,c.A)(r,t,i)),[r,t,i]);return _((()=>s.cancel())),s}const rt=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=W(e),{delay:i,enabled:s}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>l()}),[c,l,i,s]),{set:c,reset:a,clear:l}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function st(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new l.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const lt={width:null,height:null};function at({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?lt:{width:window.innerWidth,height:window.innerHeight})),r=B(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:s,reset:c,clear:l}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||c()}),[r,i,c,...n]),{set:s,reset:c,clear:l}}}}]); \ No newline at end of file diff --git a/assets/js/eea24eaa.a4df495e.js b/assets/js/eea24eaa.4dae6214.js similarity index 98% rename from assets/js/eea24eaa.a4df495e.js rename to assets/js/eea24eaa.4dae6214.js index fec864ff4..cde5baccb 100644 --- a/assets/js/eea24eaa.a4df495e.js +++ b/assets/js/eea24eaa.4dae6214.js @@ -1 +1 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[1439],{2395:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>l,default:()=>u,frontMatter:()=>r,metadata:()=>i,toc:()=>o});const i=JSON.parse('{"id":"utils/validator/isPlainObject","title":"isPlainObject","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 Plain Object(\uc77c\ubc18 \uac1d\uccb4) \uc778\uc9c0 \uac80\uc0ac\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","source":"@site/docs/utils/validator/isPlainObject.md","sourceDirName":"utils/validator","slug":"/utils/validator/isPlainObject","permalink":"/modern-kit/docs/utils/validator/isPlainObject","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"isNumericString","permalink":"/modern-kit/docs/utils/validator/isNumericString"},"next":{"title":"isPrimitive","permalink":"/modern-kit/docs/utils/validator/isPrimitive"}}');var s=t(6206),a=t(3267);const r={},l="isPlainObject",c={},o=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function d(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"isplainobject",children:"isPlainObject"})}),"\n",(0,s.jsxs)(n.p,{children:["\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 ",(0,s.jsx)(n.code,{children:"Plain Object(\uc77c\ubc18 \uac1d\uccb4)"})," \uc778\uc9c0 \uac80\uc0ac\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4."]}),"\n",(0,s.jsxs)(n.p,{children:["Plain Object\ub780, \uae30\ubcf8\uc801\uc73c\ub85c ",(0,s.jsx)(n.code,{children:"\uac1d\uccb4 \ub9ac\ud130\ub7f4({})"})," \ud639\uc740 ",(0,s.jsx)(n.code,{children:"new Object()"}),"\ub85c \uc0dd\uc131\ub41c \uac1d\uccb4\ub97c \ub9d0\ud569\ub2c8\ub2e4."]}),"\n",(0,s.jsx)("br",{}),"\n",(0,s.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/utils/src/validator/isPlainObject/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,s.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"const isPlainObject: (value: unknown) => value is Record\n"})}),"\n",(0,s.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"import { isPlainObject } from '@modern-kit/utils';\n\nisPlainObject({}) // true \nisPlainObject(new Object()) // true \n\nisPlainObject(function() {}) // false \nisPlainObject(() => {}) // false \nisPlainObject([]) // false \nisPlainObject(new Set()) // false \nisPlainObject(new Map()) // false \nisPlainObject(null) // false \nisPlainObject(undefined) // false \n"})})]})}function u(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},3267:(e,n,t)=>{t.d(n,{R:()=>r,x:()=>l});var i=t(4382);const s={},a=i.createContext(s);function r(e){const n=i.useContext(a);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),i.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[1439],{4776:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>l,default:()=>u,frontMatter:()=>r,metadata:()=>i,toc:()=>o});const i=JSON.parse('{"id":"utils/validator/isPlainObject","title":"isPlainObject","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 Plain Object(\uc77c\ubc18 \uac1d\uccb4) \uc778\uc9c0 \uac80\uc0ac\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","source":"@site/docs/utils/validator/isPlainObject.md","sourceDirName":"utils/validator","slug":"/utils/validator/isPlainObject","permalink":"/modern-kit/docs/utils/validator/isPlainObject","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"isNumericString","permalink":"/modern-kit/docs/utils/validator/isNumericString"},"next":{"title":"isPrimitive","permalink":"/modern-kit/docs/utils/validator/isPrimitive"}}');var s=t(6206),a=t(3267);const r={},l="isPlainObject",c={},o=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function d(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"isplainobject",children:"isPlainObject"})}),"\n",(0,s.jsxs)(n.p,{children:["\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 ",(0,s.jsx)(n.code,{children:"Plain Object(\uc77c\ubc18 \uac1d\uccb4)"})," \uc778\uc9c0 \uac80\uc0ac\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4."]}),"\n",(0,s.jsxs)(n.p,{children:["Plain Object\ub780, \uae30\ubcf8\uc801\uc73c\ub85c ",(0,s.jsx)(n.code,{children:"\uac1d\uccb4 \ub9ac\ud130\ub7f4({})"})," \ud639\uc740 ",(0,s.jsx)(n.code,{children:"new Object()"}),"\ub85c \uc0dd\uc131\ub41c \uac1d\uccb4\ub97c \ub9d0\ud569\ub2c8\ub2e4."]}),"\n",(0,s.jsx)("br",{}),"\n",(0,s.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/utils/src/validator/isPlainObject/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,s.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"const isPlainObject: (value: unknown) => value is Record\n"})}),"\n",(0,s.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"import { isPlainObject } from '@modern-kit/utils';\n\nisPlainObject({}) // true \nisPlainObject(new Object()) // true \n\nisPlainObject(function() {}) // false \nisPlainObject(() => {}) // false \nisPlainObject([]) // false \nisPlainObject(new Set()) // false \nisPlainObject(new Map()) // false \nisPlainObject(null) // false \nisPlainObject(undefined) // false \n"})})]})}function u(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},3267:(e,n,t)=>{t.d(n,{R:()=>r,x:()=>l});var i=t(4382);const s={},a=i.createContext(s);function r(e){const n=i.useContext(a);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),i.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/f5098664.1709d859.js b/assets/js/f5098664.1709d859.js new file mode 100644 index 000000000..3cda96ee9 --- /dev/null +++ b/assets/js/f5098664.1709d859.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[7825],{3217:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>f,assets:()=>l,contentTitle:()=>d,default:()=>v,frontMatter:()=>u,metadata:()=>r,toc:()=>p});const r=JSON.parse('{"id":"react/hooks/useAsyncEffect","title":"useAsyncEffect","description":"\uc77c\ubc18\uc801\uc73c\ub85c useEffect\uc5d0 \uc804\ub2ec\ud558\ub294 \ucf5c\ubc31 \ud568\uc218\ub294 \ube44\ub3d9\uae30 \ud568\uc218\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useAsyncEffect.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useAsyncEffect","permalink":"/modern-kit/docs/react/hooks/useAsyncEffect","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"When","permalink":"/modern-kit/docs/react/components/When"},"next":{"title":"useBeforeUnload","permalink":"/modern-kit/docs/react/hooks/useBeforeUnload"}}');var o=n(6206),i=n(3267),c=n(4076),a=n(4382);var s=n(385);const u={},d="useAsyncEffect",l={},f=()=>{const e={button:"button",div:"div",p:"p",...(0,i.R)()},[t,n]=(0,a.useState)(null),[r,u]=(0,a.useState)(1);return function(e,t){(0,a.useEffect)((()=>{(()=>{(0,c.a)(this,void 0,void 0,(function*(){yield e()}))})()}),t)}((async()=>{const e=await fetch(`https://jsonplaceholder.typicode.com/posts/${r}`),t=await e.json();n(t)}),[r]),(0,o.jsxs)(e.div,{children:[(0,o.jsx)(s.a,{wait:500,capture:"onClick",children:(0,o.jsxs)(e.button,{onClick:()=>u(r+1),children:["ID Change: ",r]})}),(0,o.jsxs)(e.p,{children:["ID: ",t?.id]}),(0,o.jsxs)(e.p,{children:["TITLE: ",t?.title]}),(0,o.jsxs)(e.p,{children:["BODY: ",t?.body]})]})},p=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function h(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"useasynceffect",children:"useAsyncEffect"})}),"\n",(0,o.jsxs)(t.p,{children:["\uc77c\ubc18\uc801\uc73c\ub85c ",(0,o.jsx)(t.code,{children:"useEffect"}),"\uc5d0 \uc804\ub2ec\ud558\ub294 \ucf5c\ubc31 \ud568\uc218\ub294 \ube44\ub3d9\uae30 \ud568\uc218\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"useAsyncEffect"}),"\ub294 ",(0,o.jsx)(t.code,{children:"\ube44\ub3d9\uae30 \ud568\uc218"}),"\ub97c ",(0,o.jsx)(t.code,{children:"useEffect"}),"\uc640 \ud568\uaed8 \uc0ac\uc6a9\ud558\uae30 \uc704\ud55c \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useAsyncEffect/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useAsyncEffect(effectCallback: () => Promise, deps?: DependencyList): void\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useAsyncEffect, DebounceHandler } from '@modern-kit/react'\n\nconst Example = () => {\n const [data, setData] = useState(null)\n const [id, setId] = useState(1);\n\n const fetchData = async () => {\n const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)\n const data = await res.json()\n setData(data)\n }\n\n useAsyncEffect(fetchData, [id]);\n\n return (\n
    \n {/* DebounceHandler\ub97c \ud65c\uc6a9\ud574 \ubc84\ud2bc \ud074\ub9ad \uc774\ubca4\ud2b8\ub97c \ub514\ubc14\uc6b4\uc2a4 \ucc98\ub9ac\ud569\ub2c8\ub2e4. */}\n \n \n \n

    ID: {data?.id}

    \n

    TITLE: {data?.title}

    \n

    BODY: {data?.body}

    \n
    \n );\n}\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(f,{})]})}function v(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},4076:(e,t,n)=>{function r(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);or,a:()=>o}),"function"==typeof SuppressedError&&SuppressedError},3267:(e,t,n)=>{n.d(t,{R:()=>c,x:()=>a});var r=n(4382);const o={},i=r.createContext(o);function c(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),r.createElement(i.Provider,{value:t},e.children)}},385:(e,t,n)=>{n.d(t,{a:()=>c});var r=n(4382),o=n(5115),i=n(9340);const c=({children:e,capture:t,wait:n,options:c})=>{const a=r.Children.only(e),s=(0,o.d)(((...e)=>{const n=null==a?void 0:a.props;if(n)return(0,i.Tn)(n[t])?n[t](...e):void 0}),n,c);return(0,r.cloneElement)(a,{[t]:s})}},5115:(e,t,n)=>{n.d(t,{d:()=>s});var r=n(4382),o=n(5086),i=n(3311),c=n(6765),a=n(5423);function s(e,t,n){const s=(0,c.p)(e),u=(0,a.B)(n),d=(0,r.useMemo)((()=>(0,o.A)(s,t,u)),[s,t,u]);return(0,i.i)((()=>d.cancel())),d}},6765:(e,t,n)=>{n.d(t,{p:()=>o});var r=n(4382);function o(e){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}},5423:(e,t,n)=>{n.d(t,{B:()=>c});var r=n(4382),o=n(6765),i=n(9340);function c(e,t=i.Gp){const[n,c]=(0,r.useState)(e),a=(0,o.p)(t);return(0,r.useEffect)((()=>{a(n,e)||c(e)}),[a,n,e]),n}},3311:(e,t,n)=>{n.d(t,{i:()=>i});var r=n(6765),o=n(4382);function i(e){const t=(0,r.p)(e);(0,o.useEffect)((()=>()=>t()),[t])}},5086:(e,t,n)=>{n.d(t,{A:()=>D});var r=n(322);const o="object"==typeof global&&global&&global.Object===Object&&global;var i="object"==typeof self&&self&&self.Object===Object&&self;const c=o||i||Function("return this")();const a=function(){return c.Date.now()};var s=/\s/;const u=function(e){for(var t=e.length;t--&&s.test(e.charAt(t)););return t};var d=/^\s+/;const l=function(e){return e?e.slice(0,u(e)+1).replace(d,""):e};const f=c.Symbol;var p=Object.prototype,h=p.hasOwnProperty,v=p.toString,m=f?f.toStringTag:void 0;const y=function(e){var t=h.call(e,m),n=e[m];try{e[m]=void 0;var r=!0}catch(i){}var o=v.call(e);return r&&(t?e[m]=n:delete e[m]),o};var b=Object.prototype.toString;const g=function(e){return b.call(e)};var w=f?f.toStringTag:void 0;const x=function(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":w&&w in Object(e)?y(e):g(e)};const j=function(e){return null!=e&&"object"==typeof e};const E=function(e){return"symbol"==typeof e||j(e)&&"[object Symbol]"==x(e)};var k=/^[-+]0x[0-9a-f]+$/i,O=/^0b[01]+$/i,S=/^0o[0-7]+$/i,C=parseInt;const A=function(e){if("number"==typeof e)return e;if(E(e))return NaN;if((0,r.A)(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=(0,r.A)(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=l(e);var n=O.test(e);return n||S.test(e)?C(e.slice(2),n?2:8):k.test(e)?NaN:+e};var $=Math.max,T=Math.min;const D=function(e,t,n){var o,i,c,s,u,d,l=0,f=!1,p=!1,h=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function v(t){var n=o,r=i;return o=i=void 0,l=t,s=e.apply(r,n)}function m(e){var n=e-d;return void 0===d||n>=t||n<0||p&&e-l>=c}function y(){var e=a();if(m(e))return b(e);u=setTimeout(y,function(e){var n=t-(e-d);return p?T(n,c-(e-l)):n}(e))}function b(e){return u=void 0,h&&o?v(e):(o=i=void 0,s)}function g(){var e=a(),n=m(e);if(o=arguments,i=this,d=e,n){if(void 0===u)return function(e){return l=e,u=setTimeout(y,t),f?v(e):s}(d);if(p)return clearTimeout(u),u=setTimeout(y,t),v(d)}return void 0===u&&(u=setTimeout(y,t)),s}return t=A(t)||0,(0,r.A)(n)&&(f=!!n.leading,c=(p="maxWait"in n)?$(A(n.maxWait)||0,t):c,h="trailing"in n?!!n.trailing:h),g.cancel=function(){void 0!==u&&clearTimeout(u),l=0,o=d=i=u=void 0},g.flush=function(){return void 0===u?s:b(a())},g}},322:(e,t,n)=>{n.d(t,{A:()=>r});const r=function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}},9340:(e,t,n)=>{function r(e,t,n,r){return new(n||(n=Promise))((function(o,i){function c(e){try{s(r.next(e))}catch(t){i(t)}}function a(e){try{s(r.throw(e))}catch(t){i(t)}}function s(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(c,a)}s((r=r.apply(e,t||[])).next())}))}n.d(t,{Et:()=>w,Fr:()=>a,Gp:()=>y,Ol:()=>O,Qd:()=>j,S$:()=>c,Tn:()=>b,Zp:()=>f,dK:()=>u,fl:()=>A,gD:()=>g,i5:()=>h,if:()=>p,l6:()=>E,lQ:()=>k,nS:()=>l,ni:()=>$,oc:()=>s}),"function"==typeof SuppressedError&&SuppressedError;const o={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,t)=>new Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function c(){return"undefined"==typeof window}function a(){if(c())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function s(){return!c()}function u(e){return r(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const d=e=>r(void 0,void 0,void 0,(function*(){const t=yield fetch(e);return u(yield t.text())}));function l(e,t){var n;return r(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return d(e);if(!("write"in window.navigator.clipboard))return d(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return d(e);const c=yield function(e,t="png"){return new Promise(((n,c)=>{const a=new Image;a.onload=()=>r(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=a.width,e.height=a.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(a,0,0);const c=yield i(e,o[t]);n(c)}catch(r){console.error(`Failed to load image. message: ${r.mesaage}`),c(r)}})),a.onerror=()=>{c(new Error("Failed to load image"))},a.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[c.type]:c})]),c}catch(c){throw console.error(`Failed to copy to clipboard. message: ${c.message}`),c}}))}function f(){return r(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function p(){return r(this,void 0,void 0,(function*(){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function h(e,t){return Object.prototype.hasOwnProperty.call(e,t)}const v=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t)return!0;if(w(e)&&w(t)&&isNaN(e)&&isNaN(t))return!0;if(b(e)&&b(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return v(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!m(o,t.get(r),n))return!1;return!0}return v(e,t,n)};function y(e,t){return m(e,t,new WeakMap)}function b(e){return"function"==typeof e}function g(e){return null==e}function w(e){return"number"==typeof e}function x(e){return!function(e){return Object(e)!==e}(e)}function j(e){return x(e)&&"[object Object]"===Object.prototype.toString.call(e)}function E(e){return e===window}function k(){}function O(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}function S(e){return Object.keys(e)}const C={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};S(C);function A(e,t){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}function $(e,t,n){if(!s())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=b(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}}}]); \ No newline at end of file diff --git a/assets/js/f5098664.d9107365.js b/assets/js/f5098664.d9107365.js deleted file mode 100644 index 8c7768b01..000000000 --- a/assets/js/f5098664.d9107365.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[7825],{9458:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>l,default:()=>p,frontMatter:()=>a,metadata:()=>r,toc:()=>f});const r=JSON.parse('{"id":"react/hooks/useAsyncEffect","title":"useAsyncEffect","description":"\uc77c\ubc18\uc801\uc73c\ub85c useEffect\uc5d0 \uc804\ub2ec\ud558\ub294 \ucf5c\ubc31 \ud568\uc218\ub294 \ube44\ub3d9\uae30 \ud568\uc218\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useAsyncEffect.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useAsyncEffect","permalink":"/modern-kit/docs/react/hooks/useAsyncEffect","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"When","permalink":"/modern-kit/docs/react/components/When"},"next":{"title":"useBeforeUnload","permalink":"/modern-kit/docs/react/hooks/useBeforeUnload"}}');var o=n(6206),s=n(3267),c=n(4027),i=n(4382);const a={},l="useAsyncEffect",u={},d=()=>{const e={button:"button",div:"div",p:"p",...(0,s.R)()},[t,n]=(0,i.useState)(null),[r,a]=(0,i.useState)(1);return(0,c.Zu)((async()=>{const e=await fetch(`https://jsonplaceholder.typicode.com/posts/${r}`),t=await e.json();n(t)}),[r]),(0,o.jsxs)(e.div,{children:[(0,o.jsx)(c.aL,{wait:500,capture:"onClick",children:(0,o.jsxs)(e.button,{onClick:()=>a(r+1),children:["ID Change: ",r]})}),(0,o.jsxs)(e.p,{children:["ID: ",t?.id]}),(0,o.jsxs)(e.p,{children:["TITLE: ",t?.title]}),(0,o.jsxs)(e.p,{children:["BODY: ",t?.body]})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function h(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"useasynceffect",children:"useAsyncEffect"})}),"\n",(0,o.jsxs)(t.p,{children:["\uc77c\ubc18\uc801\uc73c\ub85c ",(0,o.jsx)(t.code,{children:"useEffect"}),"\uc5d0 \uc804\ub2ec\ud558\ub294 \ucf5c\ubc31 \ud568\uc218\ub294 \ube44\ub3d9\uae30 \ud568\uc218\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"useAsyncEffect"}),"\ub294 ",(0,o.jsx)(t.code,{children:"\ube44\ub3d9\uae30 \ud568\uc218"}),"\ub97c ",(0,o.jsx)(t.code,{children:"useEffect"}),"\uc640 \ud568\uaed8 \uc0ac\uc6a9\ud558\uae30 \uc704\ud55c \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useAsyncEffect/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useAsyncEffect(effectCallback: () => Promise, deps?: DependencyList): void\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useAsyncEffect, DebounceHandler } from '@modern-kit/react'\n\nconst Example = () => {\n const [data, setData] = useState(null)\n const [id, setId] = useState(1);\n\n const fetchData = async () => {\n const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)\n const data = await res.json()\n setData(data)\n }\n\n useAsyncEffect(fetchData, [id]);\n\n return (\n
    \n {/* DebounceHandler\ub97c \ud65c\uc6a9\ud574 \ubc84\ud2bc \ud074\ub9ad \uc774\ubca4\ud2b8\ub97c \ub514\ubc14\uc6b4\uc2a4 \ucc98\ub9ac\ud569\ub2c8\ub2e4. */}\n \n \n \n

    ID: {data?.id}

    \n

    TITLE: {data?.title}

    \n

    BODY: {data?.body}

    \n
    \n );\n}\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(d,{})]})}function p(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>Pe,$I:()=>oe,AE:()=>Ve,BL:()=>J,DX:()=>L,FT:()=>it,Fo:()=>et,Hn:()=>st,I5:()=>je,JF:()=>De,K:()=>le,K$:()=>He,M0:()=>Ie,ML:()=>ne,Mj:()=>ve,Mk:()=>$e,Mo:()=>se,NT:()=>Ae,QV:()=>Ke,Ub:()=>ke,Ut:()=>Se,W7:()=>K,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>We,Zu:()=>ae,_1:()=>Re,_g:()=>nt,aL:()=>H,aY:()=>Le,bB:()=>Y,d7:()=>z,eG:()=>ct,fN:()=>ie,fm:()=>G,gl:()=>P,hN:()=>X,iD:()=>de,iQ:()=>Ne,jd:()=>ce,lW:()=>lt,oD:()=>U,oo:()=>Oe,pL:()=>q,qi:()=>ue,rN:()=>Fe,tD:()=>Ee,u8:()=>Q,wY:()=>ze,xV:()=>N,xh:()=>tt,zy:()=>Z});var r=n(6206),o=n(4382),s=n(3683),c=n(5086),i=n(7197),a=(n(1604),n(5938));function l(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function m(){return typeof window>"u"}function w(){return!m()}function g(e){return f(this,0,void 0,(function*(){if(!w())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const b=e=>f(void 0,0,void 0,(function*(){return g(yield(yield fetch(e)).text())}));function y(e,t){var n;return f(this,0,void 0,(function*(){if(!w())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return b(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>f(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const s=yield p(e,h[t]);n(s)}catch(s){console.error(`Failed to load image. message: ${s.mesaage}`),r(s)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const v=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let s=0;s{if(e===t||C(e)&&C(t)&&isNaN(e)&&isNaN(t))return!0;if(E(e)&&E(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return v(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return v(e,t,n)};function k(e,t){return x(e,t,new WeakMap)}function E(e){return"function"==typeof e}function C(e){return"number"==typeof e}function S(e){return!function(e){return Object(e)!==e}(e)}function j(){}function O(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const R=(...e)=>t=>e.forEach((e=>{if(E(e))e(t);else if(null!=e){e.current=t}}));function I(...e){return(0,o.useCallback)(R(...e),e)}const L=o.forwardRef(((e,t)=>{const{children:n}=e,s=l(e,["children"]),c=o.Children.toArray(n),i=c.find($);if(i){const e=i.props.children,n=c.map((t=>t===i?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(F,Object.assign({},s,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(F,Object.assign({},s,{ref:t,children:n}))}));L.displayName="Slot";const F=o.forwardRef(((e,t)=>{const{children:n}=e,r=l(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],s=t[r];/^on[A-Z]/.test(r)?o&&s?n[r]=(...e)=>{s(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),s):"className"===r&&(n[r]=[o,s].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?R(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));F.displayName="SlotClone";const N=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function $(e){return o.isValidElement(e)&&e.type===N}var M="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const P=d(((e,t)=>{var{ratio:n,style:o,as:c="div",asChild:i=!1}=e,a=l(e,["ratio","style","as","asChild"]);const u=i?L:c,d=Object.assign({aspectRatio:n},o),f=i?a.className:s(M,a.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:f},a))})),D=()=>j,T=()=>!1,A=()=>!0;function Y({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(D,T,A)?e:t}function B(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const X=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>B()?(0,r.jsx)(r.Fragment,{children:t}):e;function V(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function W(e){const t=V(e);(0,o.useEffect)((()=>()=>t()),[t])}function _(e,t=k){const[n,r]=(0,o.useState)(e),s=V(t);return(0,o.useEffect)((()=>{s(n,e)||r(e)}),[s,n,e]),n}function z(e,t,n){const r=V(e),s=_(n),i=(0,o.useMemo)((()=>(0,c.A)(r,t,s)),[r,t,s]);return W((()=>i.cancel())),i}const H=({children:e,capture:t,wait:n,options:r})=>{const s=o.Children.only(e),c=z(((...e)=>{const n=s?.props;if(n&&E(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(s,{[t]:c})};function J({onIntersectStart:e=j,onIntersectEnd:t=j,enabled:n=!0,calledOnce:r=!1,root:s=null,threshold:c=0,rootMargin:i="0px 0px 0px 0px"}){const a=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=V((([n],o)=>{if(!n)return;const s=n.target;n.isIntersecting?(l.current=!0,a.current+=1,e(n)):l.current&&(l.current=!1,a.current+=1,t(n)),r&&a.current>1&&o.unobserve(s)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:c,root:s,rootMargin:i}),u.current.observe(e))}),[n,c,s,i,d])}}const U=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:s,rootMargin:c}=e,i=l(e,["src","threshold","root","rootMargin"]);const{ref:a}=J({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:s,rootMargin:c});return(0,r.jsx)("img",Object.assign({ref:I(t,a)},i))}));U.displayName="LazyImage";const K=(0,o.forwardRef)(((e,t)=>{var{width:n,height:s,fallback:c,className:i,style:a,duration:u="0.2s",onLoad:d}=e,f=l(e,["width","height","fallback","className","style","duration","onLoad"]);const[h,p]=(0,o.useState)(!1),m=!h,w=(0,o.useMemo)((()=>({position:"relative",width:n,height:s})),[n,s]),g=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},a)),[m,u,a]),b=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]),y=i?`lazy-image-wrapper ${i}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:y,style:w,children:[m&&c,(0,r.jsx)(U,Object.assign({ref:t,width:n,height:s,style:g,onLoad:b},f))]})}));K.displayName="FallbackLazyImage";const Z=({condition:e,trueComponent:t,falseComponent:n})=>{const s=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:s?t:n})},Q=({onScrollAction:e,children:t,root:n,threshold:o,enabled:s,triggerPosition:c="after",rootMargin:i="150px 0px"})=>{const{ref:a}=J({onIntersectStart:e,root:n,threshold:o,enabled:s,rootMargin:i});return(0,r.jsxs)(r.Fragment,{children:["before"===c&&(0,r.jsx)("div",{ref:a}),t,"after"===c&&(0,r.jsx)("div",{ref:a})]})},q=d(((e,t)=>{var{children:n,as:s="div",asChild:c=!1}=e,i=l(e,["children","as","asChild"]);const a=c?L:s,{ref:u}=J(i);if(c&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(a,Object.assign({ref:R(t,u)},i,{children:n}))})),G=({items:e=[],itemKey:t,renderItem:n})=>{const s=(0,o.useCallback)(((e,n)=>function(e){return S(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},s(e,t))))})},ee=w()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=V(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),s=(0,o.useMemo)((()=>function(){if(m())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,s,(({target:t})=>{if(!r.current)return;const o=r.current,s=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!s&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:s="div",asChild:c=!1,onPointerDown:i,excludeRefs:a=[]}=e,u=l(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(i,{excludeRefs:a}),f=c?L:s;if(c&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(f,Object.assign({ref:R(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const se=({itemKey:e,items:t=[],separator:n,renderItem:s,separatorInterval:c=1,includeLastSeparator:i=!1})=>{const a=(0,o.useCallback)((e=>e===t.length-1?i:(e+1)%c==0),[i,c,t.length]);return(0,r.jsx)(G,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[s(e,t),a(t)&&n]})})},ce=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ie=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function ae(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function le(e=!0){const t=E(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!s.current){s.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{s.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),s=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield g(e);return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield y(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),i=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!w())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),a=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return f(this,0,void 0,(function*(){if(!w())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:s,copyImage:c,readText:i,readContents:a}}const fe="modern-kit-local-storage",he="modern-kit-session-storage",pe={localStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}},sessionStorage:{key:he,subscribe:e=>{window.addEventListener(he,e)},unsubscribe:e=>{window.removeEventListener(he,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(he))}}},me=e=>pe[e],we=me("localStorage"),ge=e=>window.localStorage.getItem(e),be=e=>JSON.stringify(e),ye=e=>(we.subscribe(e),()=>{we.unsubscribe(e)});function ve(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=E(n)?n():n,s=(0,o.useSyncExternalStore)(ye,(()=>ge(t)),(()=>be(r)));return{state:(0,o.useMemo)((()=>s?O(s):r),[s,r]),setState:(0,o.useCallback)((e=>{try{const n=ge(t),o=n?O(n):r,s=E(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(s)),we.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),we.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>w()?window.matchMedia(e).matches:t??!1;function ke(e,t){const[n,r]=(0,o.useState)(xe(e,t)),s=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",s),n}function Ee(){return ke("(prefers-color-scheme: dark)")?"dark":"light"}const Ce="color-scheme";function Se({defaultValue:e,key:t=Ce,shouldSetBodyClass:n=!1}={}){const r=Ee(),s=E(e)?e():e,{state:c,setState:i}=ve({key:t,initialValue:s??r}),a=(0,o.useCallback)((()=>{i((e=>"dark"===e?"light":"dark"))}),[i]),l=(0,o.useCallback)((()=>{i("dark")}),[i]),u=(0,o.useCallback)((()=>{i("light")}),[i]),d=(0,o.useCallback)((()=>{i(r)}),[i,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(c),()=>{n&&document.body.classList.remove(c)})),[c,n]),{colorScheme:c,preferredColorScheme:r,setToggleMode:a,setDarkMode:l,setLightMode:u,setPreferredMode:d}}function je(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),s=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),c=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:s,reset:c}}function Oe({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,s]=(0,o.useState)(t),c=r0,a=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),l=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const c=a(e,t);o&&o({prev:r,next:c}),s(c)}),[n,r,a]),u=(0,o.useCallback)((e=>{l("nextStep",!c,e)}),[c,l]),d=(0,o.useCallback)((e=>{l("prevStep",!i,e)}),[i,l]),f=(0,o.useCallback)(((t,n)=>{const o=E(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void s(t);throw new Error("Step not valid")}),[r,e]),h=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),s(t)}),[r,t]);return{currentStep:r,hasNextStep:c,hasPrevStep:i,goToNextStep:u,goToPrevStep:d,setStep:f,resetStep:h}}function Re(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:s,resetStep:c}=Oe({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:s,resetIndex:c}}function Ie(e,t,n={}){const[r,s]=(0,o.useState)(e);return[r,z(s,t,n)]}function Le(e,t={}){const[n,r]=(0,o.useState)(""),[s,c]=Ie("",e,t);return{value:n,debouncedValue:s,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),c(t)}),[c]),onReset:(0,o.useCallback)((()=>{r(""),c("")}),[c])}}function Fe(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onFocus:e=j,onBlur:t=j}={}){const[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(null),c=V((t=>{r(!0),e(t)})),i=V((e=>{r(!1),t(e)})),a=(0,o.useCallback)((()=>{s.current&&(s.current.focus(),r(!0))}),[]);return ne(s,"focus",c),ne(s,"blur",i),{ref:s,isFocus:n,setFocus:a}}function $e({onEnter:e=j,onLeave:t=j}={}){const[n,r]=(0,o.useState)(!1),s=(0,o.useRef)(null),c=V((t=>{r(!0),e(t)})),i=V((e=>{r(!1),t(e)}));return ne(s,"mouseenter",c),ne(s,"mouseleave",i),{ref:s,isHovered:n}}const Me=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function Pe(e,t){const n=(0,o.useRef)(),r=V(e),{delay:s,enabled:c}=Me(t),i=(0,o.useCallback)((()=>{n.current=window.setInterval(r,s)}),[r,s]),a=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),i()}),[a,i]);return(0,o.useEffect)((()=>{if(!(s<0)&&c)return i(),()=>a()}),[a,i,c,s]),{set:i,reset:l,clear:a}}function De({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),s=V((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];E(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",s),()=>t.removeEventListener("keydown",s)}),[e,s]),r}const Te={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Ae(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Te),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:s,clientY:c,pageX:i,pageY:a}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=s-t.left,u=c-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:s,clientY:c,pageX:i,pageY:a,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Ye=()=>navigator.onLine,Be=()=>!0,Xe=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function Ve({onlineAction:e=j,offlineAction:t=j}={}){const n=V((n=>Xe(n,e,t)));return(0,o.useSyncExternalStore)(n,Ye,Be)}function We(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const _e={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function ze(e=j){const[t,n]=(0,o.useState)(_e),r=(0,o.useRef)(null),s=V((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(s);return t.observe(e),()=>{t.unobserve(e)}}),[s]),{ref:r,contentRect:t}}function He({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),s=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>s())),[e,r,s]),{ref:t,lock:r,unlock:s}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ue=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:s=0,alignY:c="start",alignX:i="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+s+Je(window.innerHeight,r.height,c),left:r.left+window.scrollX+o+Je(window.innerWidth,r.width,i)};const a=e.getBoundingClientRect();return{top:r.top-a.top+e.scrollTop+s+Je(a.height,r.height,c),left:r.left-a.left+e.scrollLeft+o+Je(a.width,r.width,i)}};function Ke(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:s,top:c}=Ue(r,t,n);r.scrollTo({top:c,left:s,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ze=me("sessionStorage"),Qe=e=>window.sessionStorage.getItem(e),qe=e=>JSON.stringify(e),Ge=e=>(Ze.subscribe(e),()=>{Ze.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=E(n)?n():n,s=(0,o.useSyncExternalStore)(Ge,(()=>Qe(t)),(()=>qe(r)));return{state:(0,o.useMemo)((()=>s?O(s):r),[s,r]),setState:(0,o.useCallback)((e=>{try{const n=Qe(t),o=n?O(n):r,s=E(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(s)),Ze.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ze.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:s}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[c,i]=(0,o.useState)(n),a=(0,o.useCallback)((e=>{i((t=>{const n=E(e)?e(t):e;return r&&s&&function(e,t,n){if(!w())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=E(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,s,n),n}))}),[r,s]),l=(0,o.useCallback)((()=>{r&&s&&function(e,t){if(!w())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,s),i(null)}),[r,s]);return Object.assign({state:c,setState:a,clearState:l},Oe(e))}function nt(e,t,n={}){const r=V(e),s=_(n),c=(0,o.useMemo)((()=>(0,i.A)(r,t,s)),[r,t,s]);return W((()=>c.cancel())),c}const rt=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=V(e),{delay:s,enabled:c}=rt(t),i=(0,o.useCallback)((()=>{n.current=setTimeout(r,s)}),[r,s]),a=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),l=(0,o.useCallback)((()=>{a(),i()}),[a,i]);return(0,o.useEffect)((()=>{if(!(s<0)&&c)return i(),()=>a()}),[i,a,s,c]),{set:i,reset:l,clear:a}}function st(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function ct(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new a.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function it({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const at={width:null,height:null};function lt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>m()?at:{width:window.innerWidth,height:window.innerHeight})),r=z(n,e),s=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",s),t}function ut(e,t,n){const{delay:r,enabled:s}=rt(t),{set:c,reset:i,clear:a}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!s||i()}),[r,s,i,...n]),{set:c,reset:i,clear:a}}}}]); \ No newline at end of file diff --git a/assets/js/fbe6690a.6440acf8.js b/assets/js/fbe6690a.6440acf8.js new file mode 100644 index 000000000..21c4b3c31 --- /dev/null +++ b/assets/js/fbe6690a.6440acf8.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[3816],{1053:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>p,assets:()=>d,contentTitle:()=>l,default:()=>f,frontMatter:()=>a,metadata:()=>o,toc:()=>u});const o=JSON.parse('{"id":"react/hooks/useStep","title":"useStep","description":"multi-step process\uc758 step\uc744 \uad00\ub9ac\ud558\uace0 \ucd94\uc801\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useStep.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useStep","permalink":"/modern-kit/docs/react/hooks/useStep","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useSessionStorage","permalink":"/modern-kit/docs/react/hooks/useSessionStorage"},"next":{"title":"useStepState","permalink":"/modern-kit/docs/react/hooks/useStepState"}}');var r=n(6206),i=n(3267),s=n(4731),c=n(4382);const a={},l="useStep",d={},p=()=>{const e={button:"button",div:"div",p:"p",...(0,i.R)()},[t,n]=(0,c.useState)(!0),{currentStep:o,hasNextStep:a,hasPrevStep:l,setStep:d,goToNextStep:p,goToPrevStep:u,resetStep:h}=(0,s.o)({maxStep:3,infinite:t}),f={width:"300px",height:"120px",fontSize:"21px"};return(0,r.jsxs)(e.div,{children:[(0,r.jsxs)(e.div,{children:[(0,r.jsx)(e.button,{onClick:()=>{u((({prev:e,next:t})=>{console.log(`${e}\uc5d0\uc11c ${t}\ub85c \uc774\ub3d9`)}))},children:"\uc774\uc804 \uc2a4\ud0ed"}),(0,r.jsx)(e.button,{onClick:()=>{p((({prev:e,next:t})=>{console.log(`${e}\uc5d0\uc11c ${t}\ub85c \uc774\ub3d9`)}))},children:"\ub2e4\uc74c \uc2a4\ud0ed"}),(0,r.jsx)(e.button,{onClick:()=>{d(2,(({prev:e,next:t})=>{console.log(`${e}\uc5d0\uc11c ${t}\ub85c \uc774\ub3d9`)}))},children:"2\uc2a4\ud0ed\uc73c\ub85c \uc774\ub3d9"}),(0,r.jsx)(e.button,{onClick:()=>{h((({prev:e,next:t})=>{console.log(`${e}\uc5d0\uc11c ${t}\ub85c \uc774\ub3d9`)}))},children:"\ucd08\uae30\ud654 \uc2a4\ud0ed"}),(0,r.jsx)(e.button,{onClick:()=>n(!t),children:"infinite \ud1a0\uae00"})]}),(0,r.jsxs)(e.div,{children:[(0,r.jsxs)(e.p,{children:["currentStep: ",o]}),(0,r.jsxs)(e.p,{children:["hasNextStep: ",`${a}`]}),(0,r.jsxs)(e.p,{children:["hasPrevStep: ",`${l}`]}),(0,r.jsxs)(e.p,{children:["infinite: ",`${t}`]})]}),(0,r.jsxs)(e.div,{children:[0===o&&(0,r.jsx)(e.div,{style:{...f,backgroundColor:"red"},children:"0\ubc88 Step Box"}),1===o&&(0,r.jsx)(e.div,{style:{...f,backgroundColor:"green"},children:"1\ubc88 Step Box"}),2===o&&(0,r.jsx)(e.div,{style:{...f,backgroundColor:"blue"},children:"2\ubc88 Step Box"}),3===o&&(0,r.jsx)(e.div,{style:{...f,backgroundColor:"yellow"},children:"3\ubc88 Step Box"})]})]})},u=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function h(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"usestep",children:"useStep"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"multi-step process"}),"\uc758 ",(0,r.jsx)(t.code,{children:"step"}),"\uc744 \uad00\ub9ac\ud558\uace0 \ucd94\uc801\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(t.p,{children:["\ubc30\uc5f4\uc758 \uc778\ub371\uc2a4\uc640 \ud638\ud658\ub420 \uc218 \uc788\uac8c ",(0,r.jsx)(t.code,{children:"0\ubc88"})," step\ubd80\ud130 \uc2dc\uc791\ud569\ub2c8\ub2e4."]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useStep/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,r.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseStepProps {\n maxStep: number;\n initialStep?: number; // default: 0\n infinite?: boolean; // default: false\n}\n\ntype StepAction = ({ prev, next }: {\n prev: number;\n next: number;\n}) => void;\n"})}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"const useStep: ({ maxStep, initialStep, infinite }: UseStepProps) => {\n currentStep: number; // \ud604\uc7ac Step\n hasNextStep: boolean; // \ub2e4\uc74c Step \uc774\ub3d9 \uac00\ub2a5 \uc5ec\ubd80\n hasPrevStep: boolean; // \uc774\uc804 Step \uc774\ub3d9 \uac00\ub2a5 \uc5ec\ubd80\n setStep: (\n step: SetStateAction,\n action?: StepAction\n ) => void; // \ud2b9\uc815 Step \uc774\ub3d9 \ud568\uc218\n goToNextStep: (action?: StepAction) => void; // \ub2e4\uc74c Step \uc774\ub3d9 \ud568\uc218\n goToPrevStep: (action?: StepAction) => void; // \uc774\uc804 Step \uc774\ub3d9 \ud568\uc218\n resetStep: (action?: StepAction) => void; // initialValue \uc774\ub3d9 \ud568\uc218\n};\n"})}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useStep } from '@modern-kit/react';\n\nexport const Example = () => {\n const [infinite, setInfinite] = useState(true);\n const {\n currentStep,\n hasNextStep,\n hasPrevStep,\n setStep,\n goToNextStep,\n goToPrevStep,\n resetStep,\n } = useStep({ maxStep: 3, infinite: infinite });\n\n const handleGoToNextStep = () => {\n goToNextStep(({ prev, next }) => {\n console.log(`${prev}\uc5d0\uc11c ${next}\ub85c \uc774\ub3d9`);\n });\n };\n\n const handleGoToPrevStep = () => {\n goToPrevStep(({ prev, next }) => {\n console.log(`${prev}\uc5d0\uc11c ${next}\ub85c \uc774\ub3d9`);\n });\n };\n\n const handleSetStep = () => {\n setStep(2, ({ prev, next }) => {\n console.log(`${prev}\uc5d0\uc11c ${next}\ub85c \uc774\ub3d9`);\n });\n };\n\n const handleResetStep = () => {\n resetStep(({ prev, next }) => {\n console.log(`${prev}\uc5d0\uc11c ${next}\ub85c \uc774\ub3d9`);\n });\n };\n\n const boxStyle = {\n width: '300px',\n height: '120px',\n fontSize: '21px',\n };\n\n return (\n
    \n
    \n \n \n \n \n \n
    \n
    \n

    currentStep: {currentStep}

    \n

    hasNextStep: {`${hasNextStep}`}

    \n

    hasPrevStep: {`${hasPrevStep}`}

    \n

    infinite: {`${infinite}`}

    \n
    \n
    \n {currentStep === 0 && (\n
    \n 0\ubc88 Step Box\n
    \n )}\n {currentStep === 1 && (\n
    \n 1\ubc88 Step Box\n
    \n )}\n {currentStep === 2 && (\n
    \n 2\ubc88 Step Box\n
    \n )}\n {currentStep === 3 && (\n
    \n 3\ubc88 Step Box\n
    \n )}\n
    \n
    \n );\n};\n"})}),"\n",(0,r.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,r.jsx)(p,{})]})}function f(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},3267:(e,t,n)=>{n.d(t,{R:()=>s,x:()=>c});var o=n(4382);const r={},i=o.createContext(r);function s(e){const t=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),o.createElement(i.Provider,{value:t},e.children)}},4731:(e,t,n)=>{n.d(t,{o:()=>i});var o=n(4382),r=n(9340);function i({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,s]=(0,o.useState)(t),c=i0,l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?i+1:i-1}),[e,i]),d=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const r=l(e,t);o&&o({prev:i,next:r}),s(r)}),[n,i,l]),p=(0,o.useCallback)((e=>{d("nextStep",!c,e)}),[c,d]),u=(0,o.useCallback)((e=>{d("prevStep",!a,e)}),[a,d]),h=(0,o.useCallback)(((t,n)=>{const o=(0,r.Tn)(t)?t(i):t;if(o>=0&&o<=e)return n&&n({prev:i,next:o}),void s(t);throw new Error("Step not valid")}),[i,e]),f=(0,o.useCallback)((e=>{e&&e({prev:i,next:t}),s(t)}),[i,t]);return{currentStep:i,hasNextStep:c,hasPrevStep:a,goToNextStep:p,goToPrevStep:u,setStep:h,resetStep:f}}},9340:(e,t,n)=>{function o(e,t,n,o){return new(n||(n=Promise))((function(r,i){function s(e){try{a(o.next(e))}catch(t){i(t)}}function c(e){try{a(o.throw(e))}catch(t){i(t)}}function a(e){var t;e.done?r(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(s,c)}a((o=o.apply(e,t||[])).next())}))}n.d(t,{Et:()=>b,Fr:()=>c,Gp:()=>v,Ol:()=>C,Qd:()=>y,S$:()=>s,Tn:()=>g,Zp:()=>u,dK:()=>l,fl:()=>N,gD:()=>m,i5:()=>f,if:()=>h,l6:()=>j,lQ:()=>k,nS:()=>p,ni:()=>E,oc:()=>a}),"function"==typeof SuppressedError&&SuppressedError;const r={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"};const i=(e,t)=>new Promise(((n,o)=>{e.toBlob((e=>{e?n(e):o(new Error(`Failed to create blob with format ${t}`))}),t)}));function s(){return"undefined"==typeof window}function c(){if(s())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}function a(){return!s()}function l(e){return o(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const d=e=>o(void 0,void 0,void 0,(function*(){const t=yield fetch(e);return l(yield t.text())}));function p(e,t){var n;return o(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return d(e);if(!("write"in window.navigator.clipboard))return d(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return d(e);const s=yield function(e,t="png"){return new Promise(((n,s)=>{const c=new Image;c.onload=()=>o(this,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=c.width,e.height=c.height;try{const o=e.getContext("2d");if(!o)throw new Error("Failed to get 2d context");o.drawImage(c,0,0);const s=yield i(e,r[t]);n(s)}catch(o){console.error(`Failed to load image. message: ${o.mesaage}`),s(o)}})),c.onerror=()=>{s(new Error("Failed to load image"))},c.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[s.type]:s})]),s}catch(s){throw console.error(`Failed to copy to clipboard. message: ${s.message}`),s}}))}function u(){return o(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function h(){return o(this,void 0,void 0,(function*(){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}function f(e,t){return Object.prototype.hasOwnProperty.call(e,t)}const S=(e,t,n)=>{const o=Object.keys(e),r=Object.keys(t);if(o.length!==r.length)return!1;for(let i=0;i{if(e===t)return!0;if(b(e)&&b(t)&&isNaN(e)&&isNaN(t))return!0;if(g(e)&&g(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const o=[...e],r=[...t];return S(o,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[o,r]of e)if(!t.has(o)||!x(r,t.get(o),n))return!1;return!0}return S(e,t,n)};function v(e,t){return x(e,t,new WeakMap)}function g(e){return"function"==typeof e}function m(e){return null==e}function b(e){return"number"==typeof e}function w(e){return!function(e){return Object(e)!==e}(e)}function y(e){return w(e)&&"[object Object]"===Object.prototype.toString.call(e)}function j(e){return e===window}function k(){}function C(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}function $(e){return Object.keys(e)}const P={days:864e5,hours:36e5,minutes:6e4,seconds:1e3};$(P);function N(e,t){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}function E(e,t,n){if(!a())throw new Error("Cannot be executed unless it is a client environment.");try{const o=window[e],r=g(n)?n():n;o.setItem(t,JSON.stringify(r))}catch(o){throw new Error(`Failed to store data for key "${t}" in ${e}: ${o}`)}}}}]); \ No newline at end of file diff --git a/assets/js/fbe6690a.828a8885.js b/assets/js/fbe6690a.828a8885.js deleted file mode 100644 index a60d8c749..000000000 --- a/assets/js/fbe6690a.828a8885.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[3816],{1053:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>a,default:()=>h,frontMatter:()=>l,metadata:()=>r,toc:()=>p});const r=JSON.parse('{"id":"react/hooks/useStep","title":"useStep","description":"multi-step process\uc758 step\uc744 \uad00\ub9ac\ud558\uace0 \ucd94\uc801\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","source":"@site/docs/react/hooks/useStep.mdx","sourceDirName":"react/hooks","slug":"/react/hooks/useStep","permalink":"/modern-kit/docs/react/hooks/useStep","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useSessionStorage","permalink":"/modern-kit/docs/react/hooks/useSessionStorage"},"next":{"title":"useStepState","permalink":"/modern-kit/docs/react/hooks/useStepState"}}');var o=n(6206),i=n(3267),s=n(4027),c=n(4382);const l={},a="useStep",u={},d=()=>{const e={button:"button",div:"div",p:"p",...(0,i.R)()},[t,n]=(0,c.useState)(!0),{currentStep:r,hasNextStep:l,hasPrevStep:a,setStep:u,goToNextStep:d,goToPrevStep:p,resetStep:f}=(0,s.oo)({maxStep:3,infinite:t}),h={width:"300px",height:"120px",fontSize:"21px"};return(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.button,{onClick:()=>{p((({prev:e,next:t})=>{console.log(`${e}\uc5d0\uc11c ${t}\ub85c \uc774\ub3d9`)}))},children:"\uc774\uc804 \uc2a4\ud0ed"}),(0,o.jsx)(e.button,{onClick:()=>{d((({prev:e,next:t})=>{console.log(`${e}\uc5d0\uc11c ${t}\ub85c \uc774\ub3d9`)}))},children:"\ub2e4\uc74c \uc2a4\ud0ed"}),(0,o.jsx)(e.button,{onClick:()=>{u(2,(({prev:e,next:t})=>{console.log(`${e}\uc5d0\uc11c ${t}\ub85c \uc774\ub3d9`)}))},children:"2\uc2a4\ud0ed\uc73c\ub85c \uc774\ub3d9"}),(0,o.jsx)(e.button,{onClick:()=>{f((({prev:e,next:t})=>{console.log(`${e}\uc5d0\uc11c ${t}\ub85c \uc774\ub3d9`)}))},children:"\ucd08\uae30\ud654 \uc2a4\ud0ed"}),(0,o.jsx)(e.button,{onClick:()=>n(!t),children:"infinite \ud1a0\uae00"})]}),(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.p,{children:["currentStep: ",r]}),(0,o.jsxs)(e.p,{children:["hasNextStep: ",`${l}`]}),(0,o.jsxs)(e.p,{children:["hasPrevStep: ",`${a}`]}),(0,o.jsxs)(e.p,{children:["infinite: ",`${t}`]})]}),(0,o.jsxs)(e.div,{children:[0===r&&(0,o.jsx)(e.div,{style:{...h,backgroundColor:"red"},children:"0\ubc88 Step Box"}),1===r&&(0,o.jsx)(e.div,{style:{...h,backgroundColor:"green"},children:"1\ubc88 Step Box"}),2===r&&(0,o.jsx)(e.div,{style:{...h,backgroundColor:"blue"},children:"2\ubc88 Step Box"}),3===r&&(0,o.jsx)(e.div,{style:{...h,backgroundColor:"yellow"},children:"3\ubc88 Step Box"})]})]})},p=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usestep",children:"useStep"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"multi-step process"}),"\uc758 ",(0,o.jsx)(t.code,{children:"step"}),"\uc744 \uad00\ub9ac\ud558\uace0 \ucd94\uc801\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:["\ubc30\uc5f4\uc758 \uc778\ub371\uc2a4\uc640 \ud638\ud658\ub420 \uc218 \uc788\uac8c ",(0,o.jsx)(t.code,{children:"0\ubc88"})," step\ubd80\ud130 \uc2dc\uc791\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useStep/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseStepProps {\n maxStep: number;\n initialStep?: number; // default: 0\n infinite?: boolean; // default: false\n}\n\ntype StepAction = ({ prev, next }: {\n prev: number;\n next: number;\n}) => void;\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"const useStep: ({ maxStep, initialStep, infinite }: UseStepProps) => {\n currentStep: number; // \ud604\uc7ac Step\n hasNextStep: boolean; // \ub2e4\uc74c Step \uc774\ub3d9 \uac00\ub2a5 \uc5ec\ubd80\n hasPrevStep: boolean; // \uc774\uc804 Step \uc774\ub3d9 \uac00\ub2a5 \uc5ec\ubd80\n setStep: (\n step: SetStateAction,\n action?: StepAction\n ) => void; // \ud2b9\uc815 Step \uc774\ub3d9 \ud568\uc218\n goToNextStep: (action?: StepAction) => void; // \ub2e4\uc74c Step \uc774\ub3d9 \ud568\uc218\n goToPrevStep: (action?: StepAction) => void; // \uc774\uc804 Step \uc774\ub3d9 \ud568\uc218\n resetStep: (action?: StepAction) => void; // initialValue \uc774\ub3d9 \ud568\uc218\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useStep } from '@modern-kit/react';\n\nexport const Example = () => {\n const [infinite, setInfinite] = useState(true);\n const {\n currentStep,\n hasNextStep,\n hasPrevStep,\n setStep,\n goToNextStep,\n goToPrevStep,\n resetStep,\n } = useStep({ maxStep: 3, infinite: infinite });\n\n const handleGoToNextStep = () => {\n goToNextStep(({ prev, next }) => {\n console.log(`${prev}\uc5d0\uc11c ${next}\ub85c \uc774\ub3d9`);\n });\n };\n\n const handleGoToPrevStep = () => {\n goToPrevStep(({ prev, next }) => {\n console.log(`${prev}\uc5d0\uc11c ${next}\ub85c \uc774\ub3d9`);\n });\n };\n\n const handleSetStep = () => {\n setStep(2, ({ prev, next }) => {\n console.log(`${prev}\uc5d0\uc11c ${next}\ub85c \uc774\ub3d9`);\n });\n };\n\n const handleResetStep = () => {\n resetStep(({ prev, next }) => {\n console.log(`${prev}\uc5d0\uc11c ${next}\ub85c \uc774\ub3d9`);\n });\n };\n\n const boxStyle = {\n width: '300px',\n height: '120px',\n fontSize: '21px',\n };\n\n return (\n
    \n
    \n \n \n \n \n \n
    \n
    \n

    currentStep: {currentStep}

    \n

    hasNextStep: {`${hasNextStep}`}

    \n

    hasPrevStep: {`${hasPrevStep}`}

    \n

    infinite: {`${infinite}`}

    \n
    \n
    \n {currentStep === 0 && (\n
    \n 0\ubc88 Step Box\n
    \n )}\n {currentStep === 1 && (\n
    \n 1\ubc88 Step Box\n
    \n )}\n {currentStep === 2 && (\n
    \n 2\ubc88 Step Box\n
    \n )}\n {currentStep === 3 && (\n
    \n 3\ubc88 Step Box\n
    \n )}\n
    \n
    \n );\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(d,{})]})}function h(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(f,{...e})}):f(e)}},4027:(e,t,n)=>{n.d(t,{$$:()=>Le,$I:()=>oe,AE:()=>ze,BL:()=>U,DX:()=>N,FT:()=>ct,Fo:()=>et,Hn:()=>it,I5:()=>Ee,JF:()=>Me,K:()=>ae,K$:()=>Je,M0:()=>Oe,ML:()=>ne,Mj:()=>Se,Mk:()=>Te,Mo:()=>ie,NT:()=>Be,QV:()=>Ke,Ub:()=>ye,Ut:()=>je,W7:()=>K,WY:()=>re,Y1:()=>ut,Z3:()=>ot,ZC:()=>De,Zu:()=>le,_1:()=>$e,_g:()=>nt,aL:()=>J,aY:()=>Ne,bB:()=>Y,d7:()=>_,eG:()=>st,fN:()=>ce,fm:()=>q,gl:()=>L,hN:()=>X,iD:()=>de,iQ:()=>Ie,jd:()=>se,lW:()=>at,oD:()=>H,oo:()=>Re,pL:()=>Q,qi:()=>ue,rN:()=>Pe,tD:()=>ke,u8:()=>Z,wY:()=>_e,xV:()=>I,xh:()=>tt,zy:()=>G});var r=n(6206),o=n(4382),i=n(3683),s=n(5086),c=n(7197),l=(n(1604),n(5938));function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);onew Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function g(){return typeof window>"u"}function m(){return!g()}function v(e){return p(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(n){throw console.error(`Failed to copy to clipboard. message: ${n.message}`),n}finally{document.body.removeChild(t)}}(e)}catch(t){throw console.error(`Failed to copy to clipboard. message: ${t.message}`),t}}))}const b=e=>p(void 0,0,void 0,(function*(){return v(yield(yield fetch(e)).text())}));function w(e,t){var n;return p(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator)||!("write"in window.navigator.clipboard)||null!==(n=t?.toText)&&void 0!==n&&n)return b(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const o=new Image;o.onload=()=>p(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(o,0,0);const i=yield h(e,f[t]);n(i)}catch(i){console.error(`Failed to load image. message: ${i.mesaage}`),r(i)}})),o.onerror=()=>{r(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(r){throw console.error(`Failed to copy to clipboard. message: ${r.message}`),r}}))}const S=(e,t,n)=>{const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let i=0;i{if(e===t||C(e)&&C(t)&&isNaN(e)&&isNaN(t))return!0;if(k(e)&&k(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],o=[...t];return S(r,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,o]of e)if(!t.has(r)||!x(o,t.get(r),n))return!1;return!0}return S(e,t,n)};function y(e,t){return x(e,t,new WeakMap)}function k(e){return"function"==typeof e}function C(e){return"number"==typeof e}function j(e){return!function(e){return Object(e)!==e}(e)}function E(){}function R(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(t){throw new Error(`Failed to parse data: ${t}`)}}const $=(...e)=>t=>e.forEach((e=>{if(k(e))e(t);else if(null!=e){e.current=t}}));function O(...e){return(0,o.useCallback)($(...e),e)}const N=o.forwardRef(((e,t)=>{const{children:n}=e,i=a(e,["children"]),s=o.Children.toArray(n),c=s.find(T);if(c){const e=c.props.children,n=s.map((t=>t===c?o.Children.count(e)>1?o.Children.only(null):o.isValidElement(e)?e.props.children:null:t));return(0,r.jsx)(P,Object.assign({},i,{ref:t,children:o.isValidElement(e)?o.cloneElement(e,void 0,n):null}))}return(0,r.jsx)(P,Object.assign({},i,{ref:t,children:n}))}));N.displayName="Slot";const P=o.forwardRef(((e,t)=>{const{children:n}=e,r=a(e,["children"]);if(o.isValidElement(n)){const e=function(e){var t,n;let r=null===(t=Object.getOwnPropertyDescriptor(e.props,"ref"))||void 0===t?void 0:t.get,o=r&&"isReactWarning"in r&&r.isReactWarning;return o?e.ref:(r=null===(n=Object.getOwnPropertyDescriptor(e,"ref"))||void 0===n?void 0:n.get,o=r&&"isReactWarning"in r&&r.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}(n);return o.cloneElement(n,Object.assign(Object.assign({},function(e,t){const n=Object.assign({},t);for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...e)=>{i(...e),o(...e)}:o&&(n[r]=o):"style"===r?n[r]=Object.assign(Object.assign({},o),i):"className"===r&&(n[r]=[o,i].filter(Boolean).join(" "))}return Object.assign(Object.assign({},e),n)}(r,n.props)),{ref:t?$(t,e):e}))}return o.Children.count(n)>1?o.Children.only(null):null}));P.displayName="SlotClone";const I=({children:e})=>(0,r.jsx)(r.Fragment,{children:e});function T(e){return o.isValidElement(e)&&e.type===I}var F="AspectRatio-modules_aspectRatioWrapper__x4FNF";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(!(typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".AspectRatio-modules_aspectRatioWrapper__x4FNF>*{display:block;width:100%}");const L=d(((e,t)=>{var{ratio:n,style:o,as:s="div",asChild:c=!1}=e,l=a(e,["ratio","style","as","asChild"]);const u=c?N:s,d=Object.assign({aspectRatio:n},o),p=c?l.className:i(F,l.className);return(0,r.jsx)(u,Object.assign({ref:t,style:d,className:p},l))})),M=()=>E,A=()=>!1,B=()=>!0;function Y({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t}){return(0,o.useSyncExternalStore)(M,A,B)?e:t}function V(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}const X=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>V()?(0,r.jsx)(r.Fragment,{children:t}):e;function z(e){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function D(e){const t=z(e);(0,o.useEffect)((()=>()=>t()),[t])}function W(e,t=y){const[n,r]=(0,o.useState)(e),i=z(t);return(0,o.useEffect)((()=>{i(n,e)||r(e)}),[i,n,e]),n}function _(e,t,n){const r=z(e),i=W(n),c=(0,o.useMemo)((()=>(0,s.A)(r,t,i)),[r,t,i]);return D((()=>c.cancel())),c}const J=({children:e,capture:t,wait:n,options:r})=>{const i=o.Children.only(e),s=_(((...e)=>{const n=i?.props;if(n&&k(n[t]))return n[t](...e)}),n,r);return(0,o.cloneElement)(i,{[t]:s})};function U({onIntersectStart:e=E,onIntersectEnd:t=E,enabled:n=!0,calledOnce:r=!1,root:i=null,threshold:s=0,rootMargin:c="0px 0px 0px 0px"}){const l=(0,o.useRef)(0),a=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=z((([n],o)=>{if(!n)return;const i=n.target;n.isIntersecting?(a.current=!0,l.current+=1,e(n)):a.current&&(a.current=!1,l.current+=1,t(n)),r&&l.current>1&&o.unobserve(i)}));return{ref:(0,o.useCallback)((e=>{u.current&&(u.current.disconnect(),u.current=null),null!==e&&n&&(u.current=new IntersectionObserver(d,{threshold:s,root:i,rootMargin:c}),u.current.observe(e))}),[n,s,i,c,d])}}const H=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:i,rootMargin:s}=e,c=a(e,["src","threshold","root","rootMargin"]);const{ref:l}=U({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:i,rootMargin:s});return(0,r.jsx)("img",Object.assign({ref:O(t,l)},c))}));H.displayName="LazyImage";const K=(0,o.forwardRef)(((e,t)=>{var{width:n,height:i,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,p=a(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,h]=(0,o.useState)(!1),g=!f,m=(0,o.useMemo)((()=>({position:"relative",width:n,height:i})),[n,i]),v=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:g?0:1,transition:`opacity ${u}`},l)),[g,u,l]),b=(0,o.useCallback)((e=>{d&&d(e),h(!0)}),[d]),w=c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper";return(0,r.jsxs)("div",{className:w,style:m,children:[g&&s,(0,r.jsx)(H,Object.assign({ref:t,width:n,height:i,style:v,onLoad:b},p))]})}));K.displayName="FallbackLazyImage";const G=({condition:e,trueComponent:t,falseComponent:n})=>{const i=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(o.Fragment,{children:i?t:n})},Z=({onScrollAction:e,children:t,root:n,threshold:o,enabled:i,triggerPosition:s="after",rootMargin:c="150px 0px"})=>{const{ref:l}=U({onIntersectStart:e,root:n,threshold:o,enabled:i,rootMargin:c});return(0,r.jsxs)(r.Fragment,{children:["before"===s&&(0,r.jsx)("div",{ref:l}),t,"after"===s&&(0,r.jsx)("div",{ref:l})]})},Q=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1}=e,c=a(e,["children","as","asChild"]);const l=s?N:i,{ref:u}=U(c);if(s&&!o.isValidElement(n))throw new Error("InView\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(l,Object.assign({ref:$(t,u)},c,{children:n}))})),q=({items:e=[],itemKey:t,renderItem:n})=>{const i=(0,o.useCallback)(((e,n)=>function(e){return j(e)&&"[object Object]"===Object.prototype.toString.call(e)}(e)?e?.[t]||n:`${n}_${e}`),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(o.Fragment,{children:n(e,t)},i(e,t))))})},ee=m()?o.useLayoutEffect:o.useEffect,te=e=>!!e&&function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(e,"current");function ne(e,t,n,r){const o=z(n);ee((()=>{const n=te(e)?e.current:e;if(n)return n.addEventListener(t,o,r),()=>{n.removeEventListener(t,o,r)}}),[t,e,r,o])}function re(e,t){const{excludeRefs:n}=t??{},r=(0,o.useRef)(null),i=(0,o.useMemo)((()=>function(){if(g())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]);return ne(document,i,(({target:t})=>{if(!r.current)return;const o=r.current,i=n?.some((e=>{var n;return null===(n=e.current)||void 0===n?void 0:n.contains(t)}));!o.contains(t)&&!i&&e(o)})),r}const oe=d(((e,t)=>{var{children:n,as:i="div",asChild:s=!1,onPointerDown:c,excludeRefs:l=[]}=e,u=a(e,["children","as","asChild","onPointerDown","excludeRefs"]);const d=re(c,{excludeRefs:l}),p=s?N:i;if(s&&!o.isValidElement(n))throw new Error("OutsidePointerDownHandler\ub294 asChild\uac00 true\uc77c \uacbd\uc6b0 children\uc73c\ub85c \uc720\ud6a8\ud55c React \uc694\uc18c\ub9cc\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ub2e8\uc77c \uc694\uc18c\ub9cc \ud5c8\uc6a9\ud569\ub2c8\ub2e4.");return(0,r.jsx)(p,Object.assign({ref:$(d,t)},u,{children:n}))}));(0,o.createContext)({parentPortalElement:null});const ie=({itemKey:e,items:t=[],separator:n,renderItem:i,separatorInterval:s=1,includeLastSeparator:c=!1})=>{const l=(0,o.useCallback)((e=>e===t.length-1?c:(e+1)%s==0),[c,s,t.length]);return(0,r.jsx)(q,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[i(e,t),l(t)&&n]})})},se=({children:e,condition:t,fallback:n=null})=>(e=>"function"==typeof e?e():e)(t)?(0,r.jsx)(o.Fragment,{children:e}):(0,r.jsx)(o.Fragment,{children:n}),ce=({caseBy:e,value:t,defaultComponent:n=null})=>{var o;return function(e){return null==e}(t)?(0,r.jsx)(r.Fragment,{children:n}):(0,r.jsx)(r.Fragment,{children:null!==(o=e[t])&&void 0!==o?o:n})};function le(e,t){(0,o.useEffect)((()=>{u(this,void 0,void 0,(function*(){yield e()}))}),t)}function ae(e=!0){const t=k(e)?e():e;(0,o.useEffect)((()=>{if(!t)return;const e=e=>(e.preventDefault(),e.returnValue="");return window.addEventListener("beforeunload",e),()=>{window.removeEventListener("beforeunload",e)}}),[t])}function ue(){const[e,t]=(0,o.useState)(!1),[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(!1);return{isError:n,isLoading:e,blockMultipleAsyncCalls:(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){if(!i.current){i.current=!0,t(!0),r(!1);try{return yield e()}catch(n){throw r(!0),n}finally{i.current=!1,t(!1)}}}))),[])}}function de(){const[e,t]=(0,o.useState)(null),[n,r]=(0,o.useState)(null),i=(0,o.useCallback)((e=>u(this,void 0,void 0,(function*(){try{const n=yield v(e);return t(n),!0}catch{return t(null),!1}}))),[]),s=(0,o.useCallback)(((e,n)=>u(this,void 0,void 0,(function*(){var r;const o=null!==(r=n?.toText)&&void 0!==r&&r;try{const n=yield w(e,{toText:o});return t(n),!0}catch{return t(null),!1}}))),[]),c=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return p(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]),l=(0,o.useCallback)((()=>u(this,void 0,void 0,(function*(){try{const t=yield function(){return p(this,0,void 0,(function*(){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(t),!0}catch{return r(null),!1}}))),[]);return{copiedData:e,readData:n,copyText:i,copyImage:s,readText:c,readContents:l}}const pe="modern-kit-local-storage",fe="modern-kit-session-storage",he={localStorage:{key:pe,subscribe:e=>{window.addEventListener(pe,e)},unsubscribe:e=>{window.removeEventListener(pe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(pe))}},sessionStorage:{key:fe,subscribe:e=>{window.addEventListener(fe,e)},unsubscribe:e=>{window.removeEventListener(fe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(fe))}}},ge=e=>he[e],me=ge("localStorage"),ve=e=>window.localStorage.getItem(e),be=e=>JSON.stringify(e),we=e=>(me.subscribe(e),()=>{me.unsubscribe(e)});function Se(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=k(n)?n():n,i=(0,o.useSyncExternalStore)(we,(()=>ve(t)),(()=>be(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=ve(t),o=n?R(n):r,i=k(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(i)),me.dispatchEvent()}catch(n){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),me.dispatchEvent()}catch(e){throw new Error(`\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}const xe=(e,t)=>m()?window.matchMedia(e).matches:t??!1;function ye(e,t){const[n,r]=(0,o.useState)(xe(e,t)),i=(0,o.useCallback)((e=>r(e.matches)),[]);return ne(window.matchMedia(e),"change",i),n}function ke(){return ye("(prefers-color-scheme: dark)")?"dark":"light"}const Ce="color-scheme";function je({defaultValue:e,key:t=Ce,shouldSetBodyClass:n=!1}={}){const r=ke(),i=k(e)?e():e,{state:s,setState:c}=Se({key:t,initialValue:i??r}),l=(0,o.useCallback)((()=>{c((e=>"dark"===e?"light":"dark"))}),[c]),a=(0,o.useCallback)((()=>{c("dark")}),[c]),u=(0,o.useCallback)((()=>{c("light")}),[c]),d=(0,o.useCallback)((()=>{c(r)}),[c,r]);return(0,o.useEffect)((()=>(n&&document.body.classList.add(s),()=>{n&&document.body.classList.remove(s)})),[s,n]),{colorScheme:s,preferredColorScheme:r,setToggleMode:l,setDarkMode:a,setLightMode:u,setPreferredMode:d}}function Ee(e=0){const[t,n]=(0,o.useState)(e),r=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),i=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),s=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:i,reset:s}}function Re({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,i]=(0,o.useState)(t),s=r0,l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?r+1:r-1}),[e,r]),a=(0,o.useCallback)(((e,t,o)=>{if(t&&!n)return;const s=l(e,t);o&&o({prev:r,next:s}),i(s)}),[n,r,l]),u=(0,o.useCallback)((e=>{a("nextStep",!s,e)}),[s,a]),d=(0,o.useCallback)((e=>{a("prevStep",!c,e)}),[c,a]),p=(0,o.useCallback)(((t,n)=>{const o=k(t)?t(r):t;if(o>=0&&o<=e)return n&&n({prev:r,next:o}),void i(t);throw new Error("Step not valid")}),[r,e]),f=(0,o.useCallback)((e=>{e&&e({prev:r,next:t}),i(t)}),[r,t]);return{currentStep:r,hasNextStep:s,hasPrevStep:c,goToNextStep:u,goToPrevStep:d,setStep:p,resetStep:f}}function $e(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:i,resetStep:s}=Re({maxStep:e.length-1,initialStep:t,infinite:!0});return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:i,resetIndex:s}}function Oe(e,t,n={}){const[r,i]=(0,o.useState)(e);return[r,_(i,t,n)]}function Ne(e,t={}){const[n,r]=(0,o.useState)(""),[i,s]=Oe("",e,t);return{value:n,debouncedValue:i,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;r(t),s(t)}),[s]),onReset:(0,o.useCallback)((()=>{r(""),s("")}),[s])}}function Pe(e,{preserveTitleOnUnmount:t=!1}={}){ee((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ie({onFocus:e=E,onBlur:t=E}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=z((t=>{r(!0),e(t)})),c=z((e=>{r(!1),t(e)})),l=(0,o.useCallback)((()=>{i.current&&(i.current.focus(),r(!0))}),[]);return ne(i,"focus",s),ne(i,"blur",c),{ref:i,isFocus:n,setFocus:l}}function Te({onEnter:e=E,onLeave:t=E}={}){const[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(null),s=z((t=>{r(!0),e(t)})),c=z((e=>{r(!1),t(e)}));return ne(i,"mouseenter",s),ne(i,"mouseleave",c),{ref:i,isHovered:n}}const Fe=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function Le(e,t){const n=(0,o.useRef)(),r=z(e),{delay:i,enabled:s}=Fe(t),c=(0,o.useCallback)((()=>{n.current=window.setInterval(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>l()}),[l,c,s,i]),{set:c,reset:a,clear:l}}function Me({enabled:e=!0,keyDownCallbackMap:t={},allKeyDownCallback:n}){const r=(0,o.useRef)(null),i=z((e=>{if(e.stopPropagation(),n)return void n(e);const r=e.key,o=t[r];k(o)&&o(e)}));return(0,o.useEffect)((()=>{if(!e)return;r.current||(r.current=window);const t=r.current;return t.addEventListener("keydown",i),()=>t.removeEventListener("keydown",i)}),[e,i]),r}const Ae={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Be(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Ae),r=(0,o.useCallback)((t=>{const{screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l}=t;let a=null,u=null,d=null,p=null;if(e.current){const t=e.current.getBoundingClientRect();a=i-t.left,u=s-t.top,d=t.left+window.scrollX,p=t.top+window.scrollY}n({screenX:r,screenY:o,clientX:i,clientY:s,pageX:c,pageY:l,elementRelativeX:a,elementRelativeY:u,elementPositionX:d,elementPositionY:p})}),[]);return ne(document,"mousemove",r),{ref:e,position:t}}const Ye=()=>navigator.onLine,Ve=()=>!0,Xe=(e,t,n)=>{const r=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",o),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",o)}};function ze({onlineAction:e=E,offlineAction:t=E}={}){const n=z((n=>Xe(n,e,t)));return(0,o.useSyncExternalStore)(n,Ye,Ve)}function De(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}const We={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function _e(e=E){const[t,n]=(0,o.useState)(We),r=(0,o.useRef)(null),i=z((([t])=>{t&&(e(t),n(t.contentRect))}));return(0,o.useEffect)((()=>{if(!r.current)return;const e=r.current,t=new ResizeObserver(i);return t.observe(e),()=>{t.unobserve(e)}}),[i]),{ref:r,contentRect:t}}function Je({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),i=(0,o.useCallback)((()=>{if(!n.current)return;t.current.style.overflow=n.current}),[]);return ee((()=>(t.current||(t.current=document.body),e&&r(),()=>i())),[e,r,i]),{ref:t,lock:r,unlock:i}}const Ue=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:o=0,offsetY:i=0,alignY:s="start",alignX:c="start"}=n;if(function(e){return e===window}(e))return{top:r.top+window.scrollY+i+Ue(window.innerHeight,r.height,s),left:r.left+window.scrollX+o+Ue(window.innerWidth,r.width,c)};const l=e.getBoundingClientRect();return{top:r.top-l.top+e.scrollTop+i+Ue(l.height,r.height,s),left:r.left-l.left+e.scrollLeft+o+Ue(l.width,r.width,c)}};function Ke(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:o="auto"}=n,{left:i,top:s}=He(r,t,n);r.scrollTo({top:s,left:i,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ge=ge("sessionStorage"),Ze=e=>window.sessionStorage.getItem(e),Qe=e=>JSON.stringify(e),qe=e=>(Ge.subscribe(e),()=>{Ge.unsubscribe(e)});function et(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=k(n)?n():n,i=(0,o.useSyncExternalStore)(qe,(()=>Ze(t)),(()=>Qe(r)));return{state:(0,o.useMemo)((()=>i?R(i):r),[i,r]),setState:(0,o.useCallback)((e=>{try{const n=Ze(t),o=n?R(n):r,i=k(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(i)),Ge.dispatchEvent()}catch(n){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${n}`)}}),[t,r]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ge.dispatchEvent()}catch(e){throw new Error(`\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "${t}" key\uc758 \ub370\uc774\ud130\ub97c \uc0ad\uc81c\ud558\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ${e}`)}}),[t])}}function tt(e){var t;const n="initialState"in e?e.initialState:null,{type:r,key:i}=null!==(t=e?.storageOptions)&&void 0!==t?t:{},[s,c]=(0,o.useState)(n),l=(0,o.useCallback)((e=>{c((t=>{const n=k(e)?e(t):e;return r&&i&&function(e,t,n){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],o=k(n)?n():n;r.setItem(t,JSON.stringify(o))}catch(r){throw new Error(`Failed to store data for key "${t}" in ${e}: ${r}`)}}(r,i,n),n}))}),[r,i]),a=(0,o.useCallback)((()=>{r&&i&&function(e,t){if(!m())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(r,i),c(null)}),[r,i]);return Object.assign({state:s,setState:l,clearState:a},Re(e))}function nt(e,t,n={}){const r=z(e),i=W(n),s=(0,o.useMemo)((()=>(0,c.A)(r,t,i)),[r,t,i]);return D((()=>s.cancel())),s}const rt=e=>{var t;return C(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=e?.enabled)||void 0===t||t}};function ot(e,t){const n=(0,o.useRef)(),r=z(e),{delay:i,enabled:s}=rt(t),c=(0,o.useCallback)((()=>{n.current=setTimeout(r,i)}),[r,i]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),a=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(i<0)&&s)return c(),()=>l()}),[c,l,i,s]),{set:c,reset:a,clear:l}}function it(e,t){const[n,r]=(0,o.useState)(e);return[n,(0,o.useCallback)((()=>{r((n=>n===e?t:e))}),[e,t])]}function st(){const[e,t]=(0,o.useState)(null);return ee((()=>{const e=new l.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){ee((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const lt={width:null,height:null};function at({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>g()?lt:{width:window.innerWidth,height:window.innerHeight})),r=_(n,e),i=(0,o.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return ne(window,"resize",i),t}function ut(e,t,n){const{delay:r,enabled:i}=rt(t),{set:s,reset:c,clear:l}=ot(e,{delay:r,enabled:!1});return(0,o.useEffect)((()=>{r<0||!i||c()}),[r,i,c,...n]),{set:s,reset:c,clear:l}}}}]); \ No newline at end of file diff --git a/assets/js/main.1e9414e3.js b/assets/js/main.1e9414e3.js new file mode 100644 index 000000000..d06ef35cd --- /dev/null +++ b/assets/js/main.1e9414e3.js @@ -0,0 +1,2 @@ +/*! For license information please see main.1e9414e3.js.LICENSE.txt */ +(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[8792],{4498:(e,t,n)=>{"use strict";n.d(t,{mg:()=>X,vd:()=>H});var r=n(4382),o=n(6783),a=n.n(o),i=n(8894),s=n.n(i),l=n(9611),c=n.n(l),u=n(4356),d=n.n(u);function p(){return p=Object.assign||function(e){for(var t=1;t=0||(o[n]=e[n]);return o}var b={BASE:"base",BODY:"body",HEAD:"head",HTML:"html",LINK:"link",META:"meta",NOSCRIPT:"noscript",SCRIPT:"script",STYLE:"style",TITLE:"title",FRAGMENT:"Symbol(react.fragment)"},g={rel:["amphtml","canonical","alternate"]},y={type:["application/ld+json"]},v={charset:"",name:["robots","description"],property:["og:type","og:title","og:url","og:image","og:image:alt","og:description","twitter:url","twitter:title","twitter:description","twitter:image","twitter:image:alt","twitter:card","twitter:site"]},k=Object.keys(b).map((function(e){return b[e]})),w={accesskey:"accessKey",charset:"charSet",class:"className",contenteditable:"contentEditable",contextmenu:"contextMenu","http-equiv":"httpEquiv",itemprop:"itemProp",tabindex:"tabIndex"},S=Object.keys(w).reduce((function(e,t){return e[w[t]]=t,e}),{}),x=function(e,t){for(var n=e.length-1;n>=0;n-=1){var r=e[n];if(Object.prototype.hasOwnProperty.call(r,t))return r[t]}return null},_=function(e){var t=x(e,b.TITLE),n=x(e,"titleTemplate");if(Array.isArray(t)&&(t=t.join("")),n&&t)return n.replace(/%s/g,(function(){return t}));var r=x(e,"defaultTitle");return t||r||void 0},E=function(e){return x(e,"onChangeClientState")||function(){}},C=function(e,t){return t.filter((function(t){return void 0!==t[e]})).map((function(t){return t[e]})).reduce((function(e,t){return p({},e,t)}),{})},T=function(e,t){return t.filter((function(e){return void 0!==e[b.BASE]})).map((function(e){return e[b.BASE]})).reverse().reduce((function(t,n){if(!t.length)for(var r=Object.keys(n),o=0;o/g,">").replace(/"/g,""").replace(/'/g,"'")},I=function(e){return Object.keys(e).reduce((function(t,n){var r=void 0!==e[n]?n+'="'+e[n]+'"':""+n;return t?t+" "+r:r}),"")},D=function(e,t){return void 0===t&&(t={}),Object.keys(e).reduce((function(t,n){return t[w[n]||n]=e[n],t}),t)},M=function(e,t){return t.map((function(t,n){var o,a=((o={key:n})["data-rh"]=!0,o);return Object.keys(t).forEach((function(e){var n=w[e]||e;"innerHTML"===n||"cssText"===n?a.dangerouslySetInnerHTML={__html:t.innerHTML||t.cssText}:a[n]=t[e]})),r.createElement(e,a)}))},F=function(e,t,n){switch(e){case b.TITLE:return{toComponent:function(){return n=t.titleAttributes,(o={key:e=t.title})["data-rh"]=!0,a=D(n,o),[r.createElement(b.TITLE,a,e)];var e,n,o,a},toString:function(){return function(e,t,n,r){var o=I(n),a=P(t);return o?"<"+e+' data-rh="true" '+o+">"+O(a,r)+"":"<"+e+' data-rh="true">'+O(a,r)+""}(e,t.title,t.titleAttributes,n)}};case"bodyAttributes":case"htmlAttributes":return{toComponent:function(){return D(t)},toString:function(){return I(t)}};default:return{toComponent:function(){return M(e,t)},toString:function(){return function(e,t,n){return t.reduce((function(t,r){var o=Object.keys(r).filter((function(e){return!("innerHTML"===e||"cssText"===e)})).reduce((function(e,t){var o=void 0===r[t]?t:t+'="'+O(r[t],n)+'"';return e?e+" "+o:o}),""),a=r.innerHTML||r.cssText||"",i=-1===L.indexOf(e);return t+"<"+e+' data-rh="true" '+o+(i?"/>":">"+a+"")}),"")}(e,t,n)}}}},z=function(e){var t=e.baseTag,n=e.bodyAttributes,r=e.encode,o=e.htmlAttributes,a=e.noscriptTags,i=e.styleTags,s=e.title,l=void 0===s?"":s,c=e.titleAttributes,u=e.linkTags,d=e.metaTags,p=e.scriptTags,f={toComponent:function(){},toString:function(){return""}};if(e.prioritizeSeoTags){var m=function(e){var t=e.linkTags,n=e.scriptTags,r=e.encode,o=N(e.metaTags,v),a=N(t,g),i=N(n,y);return{priorityMethods:{toComponent:function(){return[].concat(M(b.META,o.priority),M(b.LINK,a.priority),M(b.SCRIPT,i.priority))},toString:function(){return F(b.META,o.priority,r)+" "+F(b.LINK,a.priority,r)+" "+F(b.SCRIPT,i.priority,r)}},metaTags:o.default,linkTags:a.default,scriptTags:i.default}}(e);f=m.priorityMethods,u=m.linkTags,d=m.metaTags,p=m.scriptTags}return{priority:f,base:F(b.BASE,t,r),bodyAttributes:F("bodyAttributes",n,r),htmlAttributes:F("htmlAttributes",o,r),link:F(b.LINK,u,r),meta:F(b.META,d,r),noscript:F(b.NOSCRIPT,a,r),script:F(b.SCRIPT,p,r),style:F(b.STYLE,i,r),title:F(b.TITLE,{title:l,titleAttributes:c},r)}},B=[],U=function(e,t){var n=this;void 0===t&&(t="undefined"!=typeof document),this.instances=[],this.value={setHelmet:function(e){n.context.helmet=e},helmetInstances:{get:function(){return n.canUseDOM?B:n.instances},add:function(e){(n.canUseDOM?B:n.instances).push(e)},remove:function(e){var t=(n.canUseDOM?B:n.instances).indexOf(e);(n.canUseDOM?B:n.instances).splice(t,1)}}},this.context=e,this.canUseDOM=t,t||(e.helmet=z({baseTag:[],bodyAttributes:{},encodeSpecialCharacters:!0,htmlAttributes:{},linkTags:[],metaTags:[],noscriptTags:[],scriptTags:[],styleTags:[],title:"",titleAttributes:{}}))},$=r.createContext({}),q=a().shape({setHelmet:a().func,helmetInstances:a().shape({get:a().func,add:a().func,remove:a().func})}),V="undefined"!=typeof document,H=function(e){function t(n){var r;return(r=e.call(this,n)||this).helmetData=new U(r.props.context,t.canUseDOM),r}return f(t,e),t.prototype.render=function(){return r.createElement($.Provider,{value:this.helmetData.value},this.props.children)},t}(r.Component);H.canUseDOM=V,H.propTypes={context:a().shape({helmet:a().shape()}),children:a().node.isRequired},H.defaultProps={context:{}},H.displayName="HelmetProvider";var W=function(e,t){var n,r=document.head||document.querySelector(b.HEAD),o=r.querySelectorAll(e+"[data-rh]"),a=[].slice.call(o),i=[];return t&&t.length&&t.forEach((function(t){var r=document.createElement(e);for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&("innerHTML"===o?r.innerHTML=t.innerHTML:"cssText"===o?r.styleSheet?r.styleSheet.cssText=t.cssText:r.appendChild(document.createTextNode(t.cssText)):r.setAttribute(o,void 0===t[o]?"":t[o]));r.setAttribute("data-rh","true"),a.some((function(e,t){return n=t,r.isEqualNode(e)}))?a.splice(n,1):i.push(r)})),a.forEach((function(e){return e.parentNode.removeChild(e)})),i.forEach((function(e){return r.appendChild(e)})),{oldTags:a,newTags:i}},G=function(e,t){var n=document.getElementsByTagName(e)[0];if(n){for(var r=n.getAttribute("data-rh"),o=r?r.split(","):[],a=[].concat(o),i=Object.keys(t),s=0;s=0;d-=1)n.removeAttribute(a[d]);o.length===a.length?n.removeAttribute("data-rh"):n.getAttribute("data-rh")!==i.join(",")&&n.setAttribute("data-rh",i.join(","))}},K=function(e,t){var n=e.baseTag,r=e.htmlAttributes,o=e.linkTags,a=e.metaTags,i=e.noscriptTags,s=e.onChangeClientState,l=e.scriptTags,c=e.styleTags,u=e.title,d=e.titleAttributes;G(b.BODY,e.bodyAttributes),G(b.HTML,r),function(e,t){void 0!==e&&document.title!==e&&(document.title=P(e)),G(b.TITLE,t)}(u,d);var p={baseTag:W(b.BASE,n),linkTags:W(b.LINK,o),metaTags:W(b.META,a),noscriptTags:W(b.NOSCRIPT,i),scriptTags:W(b.SCRIPT,l),styleTags:W(b.STYLE,c)},f={},m={};Object.keys(p).forEach((function(e){var t=p[e],n=t.newTags,r=t.oldTags;n.length&&(f[e]=n),r.length&&(m[e]=p[e].oldTags)})),t&&t(),s(e,f,m)},Q=null,Y=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o elements are self-closing and can not contain children. Refer to our API for more information.")}},n.flattenArrayTypeChildren=function(e){var t,n=e.child,r=e.arrayTypeChildren;return p({},r,((t={})[n.type]=[].concat(r[n.type]||[],[p({},e.newChildProps,this.mapNestedChildrenToProps(n,e.nestedChildren))]),t))},n.mapObjectTypeChildren=function(e){var t,n,r=e.child,o=e.newProps,a=e.newChildProps,i=e.nestedChildren;switch(r.type){case b.TITLE:return p({},o,((t={})[r.type]=i,t.titleAttributes=p({},a),t));case b.BODY:return p({},o,{bodyAttributes:p({},a)});case b.HTML:return p({},o,{htmlAttributes:p({},a)});default:return p({},o,((n={})[r.type]=p({},a),n))}},n.mapArrayTypeChildrenToProps=function(e,t){var n=p({},t);return Object.keys(e).forEach((function(t){var r;n=p({},n,((r={})[t]=e[t],r))})),n},n.warnOnInvalidChildren=function(e,t){return c()(k.some((function(t){return e.type===t})),"function"==typeof e.type?"You may be attempting to nest components within each other, which is not allowed. Refer to our API for more information.":"Only elements types "+k.join(", ")+" are allowed. Helmet does not support rendering <"+e.type+"> elements. Refer to our API for more information."),c()(!t||"string"==typeof t||Array.isArray(t)&&!t.some((function(e){return"string"!=typeof e})),"Helmet expects a string as a child of <"+e.type+">. Did you forget to wrap your children in braces? ( <"+e.type+">{``} ) Refer to our API for more information."),!0},n.mapChildrenToProps=function(e,t){var n=this,o={};return r.Children.forEach(e,(function(e){if(e&&e.props){var r=e.props,a=r.children,i=h(r,Z),s=Object.keys(i).reduce((function(e,t){return e[S[t]||t]=i[t],e}),{}),l=e.type;switch("symbol"==typeof l?l=l.toString():n.warnOnInvalidChildren(e,a),l){case b.FRAGMENT:t=n.mapChildrenToProps(a,t);break;case b.LINK:case b.META:case b.NOSCRIPT:case b.SCRIPT:case b.STYLE:o=n.flattenArrayTypeChildren({child:e,arrayTypeChildren:o,newChildProps:s,nestedChildren:a});break;default:t=n.mapObjectTypeChildren({child:e,newProps:t,newChildProps:s,nestedChildren:a})}}})),this.mapArrayTypeChildrenToProps(o,t)},n.render=function(){var e=this.props,t=e.children,n=h(e,J),o=p({},n),a=n.helmetData;return t&&(o=this.mapChildrenToProps(t,o)),!a||a instanceof U||(a=new U(a.context,a.instances)),a?r.createElement(Y,p({},o,{context:a.value,helmetData:void 0})):r.createElement($.Consumer,null,(function(e){return r.createElement(Y,p({},o,{context:e}))}))},t}(r.Component);X.propTypes={base:a().object,bodyAttributes:a().object,children:a().oneOfType([a().arrayOf(a().node),a().node]),defaultTitle:a().string,defer:a().bool,encodeSpecialCharacters:a().bool,htmlAttributes:a().object,link:a().arrayOf(a().object),meta:a().arrayOf(a().object),noscript:a().arrayOf(a().object),onChangeClientState:a().func,script:a().arrayOf(a().object),style:a().arrayOf(a().object),title:a().string,titleAttributes:a().object,titleTemplate:a().string,prioritizeSeoTags:a().bool,helmetData:a().object},X.defaultProps={defer:!0,encodeSpecialCharacters:!0,prioritizeSeoTags:!1},X.displayName="Helmet"},4265:(e,t,n)=>{"use strict";n.d(t,{o:()=>a,x:()=>i});var r=n(4382),o=n(6206);const a=r.createContext(!1);function i(e){let{children:t}=e;const[n,i]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{i(!0)}),[]),(0,o.jsx)(a.Provider,{value:n,children:t})}},9356:(e,t,n)=>{"use strict";var r=n(4382),o=n(45),a=n(4498),i=n(1824),s=n(4784),l=n(6949);const c=[n(6370),n(95),n(1301),n(8628)];var u=n(5756),d=n(96),p=n(9612),f=n(6206);function m(e){let{children:t}=e;return(0,f.jsx)(f.Fragment,{children:t})}var h=n(4152),b=n(1222),g=n(2941),y=n(7141),v=n(2538),k=n(4282),w=n(9054);const S="default";var x=n(1587),_=n(8078);function E(){const{i18n:{currentLocale:e,defaultLocale:t,localeConfigs:n}}=(0,b.A)(),r=(0,k.o)(),o=n[e].htmlLang,a=e=>e.replace("-","_");return(0,f.jsxs)(h.A,{children:[Object.entries(n).map((e=>{let[t,{htmlLang:n}]=e;return(0,f.jsx)("link",{rel:"alternate",href:r.createUrl({locale:t,fullyQualified:!0}),hrefLang:n},t)})),(0,f.jsx)("link",{rel:"alternate",href:r.createUrl({locale:t,fullyQualified:!0}),hrefLang:"x-default"}),(0,f.jsx)("meta",{property:"og:locale",content:a(o)}),Object.values(n).filter((e=>o!==e.htmlLang)).map((e=>(0,f.jsx)("meta",{property:"og:locale:alternate",content:a(e.htmlLang)},`meta-og-${e.htmlLang}`)))]})}function C(e){let{permalink:t}=e;const{siteConfig:{url:n}}=(0,b.A)(),r=function(){const{siteConfig:{url:e,baseUrl:t,trailingSlash:n}}=(0,b.A)(),{pathname:r}=(0,d.zy)();return e+(0,x.Ks)((0,g.Ay)(r),{trailingSlash:n,baseUrl:t})}(),o=t?`${n}${t}`:r;return(0,f.jsxs)(h.A,{children:[(0,f.jsx)("meta",{property:"og:url",content:o}),(0,f.jsx)("link",{rel:"canonical",href:o})]})}function T(){const{i18n:{currentLocale:e}}=(0,b.A)(),{metadata:t,image:n}=(0,y.p)();return(0,f.jsxs)(f.Fragment,{children:[(0,f.jsxs)(h.A,{children:[(0,f.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,f.jsx)("body",{className:w.w})]}),n&&(0,f.jsx)(v.be,{image:n}),(0,f.jsx)(C,{}),(0,f.jsx)(E,{}),(0,f.jsx)(_.A,{tag:S,locale:e}),(0,f.jsx)(h.A,{children:t.map(((e,t)=>(0,f.jsx)("meta",{...e},t)))})]})}const A=new Map;var j=n(4265),P=n(8738),N=n(8705);function R(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r{const r=t.default?.[e]??t[e];return r?.(...n)}));return()=>o.forEach((e=>e?.()))}const L=function(e){let{children:t,location:n,previousLocation:r}=e;return(0,N.A)((()=>{r!==n&&(!function(e){let{location:t,previousLocation:n}=e;if(!n)return;const r=t.pathname===n.pathname,o=t.hash===n.hash,a=t.search===n.search;if(r&&o&&!a)return;const{hash:i}=t;if(i){const e=decodeURIComponent(i.substring(1)),t=document.getElementById(e);t?.scrollIntoView()}else window.scrollTo(0,0)}({location:n,previousLocation:r}),R("onRouteDidUpdate",{previousLocation:r,location:n}))}),[r,n]),t};function O(e){const t=Array.from(new Set([e,decodeURI(e)])).map((e=>(0,p.u)(u.A,e))).flat();return Promise.all(t.map((e=>e.route.component.preload?.())))}class I extends r.Component{previousLocation;routeUpdateCleanupCb;constructor(e){super(e),this.previousLocation=null,this.routeUpdateCleanupCb=l.A.canUseDOM?R("onRouteUpdate",{previousLocation:null,location:this.props.location}):()=>{},this.state={nextRouteHasLoaded:!0}}shouldComponentUpdate(e,t){if(e.location===this.props.location)return t.nextRouteHasLoaded;const n=e.location;return this.previousLocation=this.props.location,this.setState({nextRouteHasLoaded:!1}),this.routeUpdateCleanupCb=R("onRouteUpdate",{previousLocation:this.previousLocation,location:n}),O(n.pathname).then((()=>{this.routeUpdateCleanupCb(),this.setState({nextRouteHasLoaded:!0})})).catch((e=>{console.warn(e),window.location.reload()})),!1}render(){const{children:e,location:t}=this.props;return(0,f.jsx)(L,{previousLocation:this.previousLocation,location:t,children:(0,f.jsx)(d.qh,{location:t,render:()=>e})})}}const D=I,M="__docusaurus-base-url-issue-banner-container",F="__docusaurus-base-url-issue-banner",z="__docusaurus-base-url-issue-banner-suggestion-container";function B(e){return`\ndocument.addEventListener('DOMContentLoaded', function maybeInsertBanner() {\n var shouldInsert = typeof window['docusaurus'] === 'undefined';\n shouldInsert && insertBanner();\n});\n\nfunction insertBanner() {\n var bannerContainer = document.createElement('div');\n bannerContainer.id = '${M}';\n var bannerHtml = ${JSON.stringify(function(e){return`\n
    \n

    Your Docusaurus site did not load properly.

    \n

    A very common reason is a wrong site baseUrl configuration.

    \n

    Current configured baseUrl = ${e} ${"/"===e?" (default value)":""}

    \n

    We suggest trying baseUrl =

    \n
    \n`}(e)).replace(/{let{route:t}=e;return!0===t.exact})))return A.set(e.pathname,e.pathname),e;const t=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return A.set(e.pathname,t),{...e,pathname:t}}((0,d.zy)());return(0,f.jsx)(D,{location:e,children:G})}function Q(){return(0,f.jsx)(V.A,{children:(0,f.jsx)(P.l,{children:(0,f.jsxs)(j.x,{children:[(0,f.jsxs)(m,{children:[(0,f.jsx)(q,{}),(0,f.jsx)(T,{}),(0,f.jsx)($,{}),(0,f.jsx)(K,{})]}),(0,f.jsx)(W,{})]})})})}var Y=n(4054);const Z=function(e){try{return document.createElement("link").relList.supports(e)}catch{return!1}}("prefetch")?function(e){return new Promise(((t,n)=>{if("undefined"==typeof document)return void n();const r=document.createElement("link");r.setAttribute("rel","prefetch"),r.setAttribute("href",e),r.onload=()=>t(),r.onerror=()=>n();const o=document.getElementsByTagName("head")[0]??document.getElementsByName("script")[0]?.parentNode;o?.appendChild(r)}))}:function(e){return new Promise(((t,n)=>{const r=new XMLHttpRequest;r.open("GET",e,!0),r.withCredentials=!0,r.onload=()=>{200===r.status?t():n()},r.send(null)}))};var J=n(461);const X=new Set,ee=new Set,te=()=>navigator.connection?.effectiveType.includes("2g")||navigator.connection?.saveData,ne={prefetch:e=>{if(!(e=>!te()&&!ee.has(e)&&!X.has(e))(e))return!1;X.add(e);const t=(0,p.u)(u.A,e).flatMap((e=>{return t=e.route.path,Object.entries(Y).filter((e=>{let[n]=e;return n.replace(/-[^-]+$/,"")===t})).flatMap((e=>{let[,t]=e;return Object.values((0,J.A)(t))}));var t}));return Promise.all(t.map((e=>{const t=n.gca(e);return t&&!t.includes("undefined")?Z(t).catch((()=>{})):Promise.resolve()})))},preload:e=>!!(e=>!te()&&!ee.has(e))(e)&&(ee.add(e),O(e))},re=Object.freeze(ne);function oe(e){let{children:t}=e;return"hash"===s.default.future.experimental_router?(0,f.jsx)(i.I9,{children:t}):(0,f.jsx)(i.Kd,{children:t})}const ae=Boolean(!0);if(l.A.canUseDOM){window.docusaurus=re;const e=document.getElementById("__docusaurus"),t=(0,f.jsx)(a.vd,{children:(0,f.jsx)(oe,{children:(0,f.jsx)(Q,{})})}),n=(e,t)=>{console.error("Docusaurus React Root onRecoverableError:",e,t)},i=()=>{if(window.docusaurusRoot)window.docusaurusRoot.render(t);else if(ae)window.docusaurusRoot=o.hydrateRoot(e,t,{onRecoverableError:n});else{const r=o.createRoot(e,{onRecoverableError:n});r.render(t),window.docusaurusRoot=r}};O(window.location.pathname).then((()=>{(0,r.startTransition)(i)}))}},8738:(e,t,n)=>{"use strict";n.d(t,{o:()=>d,l:()=>p});var r=n(4382),o=n(4784);const a=JSON.parse('{"docusaurus-plugin-content-docs":{"default":{"path":"/modern-kit/docs","versions":[{"name":"current","label":"Next","isLast":true,"path":"/modern-kit/docs","mainDocId":"introduce/Introduce","docs":[{"id":"introduce/Introduce","path":"/modern-kit/docs/introduce/","sidebar":"tutorialSidebar"},{"id":"react/components/AspectRatio","path":"/modern-kit/docs/react/components/AspectRatio","sidebar":"tutorialSidebar"},{"id":"react/components/ClientGate","path":"/modern-kit/docs/react/components/ClientGate","sidebar":"tutorialSidebar"},{"id":"react/components/DebounceHandler","path":"/modern-kit/docs/react/components/DebounceHandler","sidebar":"tutorialSidebar"},{"id":"react/components/FallbackLazyImage","path":"/modern-kit/docs/react/components/FallbackLazyImage","sidebar":"tutorialSidebar"},{"id":"react/components/IfElse","path":"/modern-kit/docs/react/components/IfElse","sidebar":"tutorialSidebar"},{"id":"react/components/InfiniteScroll","path":"/modern-kit/docs/react/components/InfiniteScroll","sidebar":"tutorialSidebar"},{"id":"react/components/InView","path":"/modern-kit/docs/react/components/InView","sidebar":"tutorialSidebar"},{"id":"react/components/Iterator","path":"/modern-kit/docs/react/components/Iterator","sidebar":"tutorialSidebar"},{"id":"react/components/LazyImage","path":"/modern-kit/docs/react/components/LazyImage","sidebar":"tutorialSidebar"},{"id":"react/components/Mounted","path":"/modern-kit/docs/react/components/Mounted","sidebar":"tutorialSidebar"},{"id":"react/components/OutsidePointerDownHandler","path":"/modern-kit/docs/react/components/OutsidePointerDownHandler","sidebar":"tutorialSidebar"},{"id":"react/components/Portal","path":"/modern-kit/docs/react/components/Portal","sidebar":"tutorialSidebar"},{"id":"react/components/SeparatedIterator","path":"/modern-kit/docs/react/components/SeparatedIterator","sidebar":"tutorialSidebar"},{"id":"react/components/Slot","path":"/modern-kit/docs/react/components/Slot","sidebar":"tutorialSidebar"},{"id":"react/components/SwithCase","path":"/modern-kit/docs/react/components/SwithCase","sidebar":"tutorialSidebar"},{"id":"react/components/When","path":"/modern-kit/docs/react/components/When","sidebar":"tutorialSidebar"},{"id":"react/hooks/useAsyncEffect","path":"/modern-kit/docs/react/hooks/useAsyncEffect","sidebar":"tutorialSidebar"},{"id":"react/hooks/useBeforeUnload","path":"/modern-kit/docs/react/hooks/useBeforeUnload","sidebar":"tutorialSidebar"},{"id":"react/hooks/useBlockMultipleAsyncCalls","path":"/modern-kit/docs/react/hooks/useBlockMultipleAsyncCalls","sidebar":"tutorialSidebar"},{"id":"react/hooks/useClipboard","path":"/modern-kit/docs/react/hooks/useClipboard","sidebar":"tutorialSidebar"},{"id":"react/hooks/useColorScheme","path":"/modern-kit/docs/react/hooks/useColorScheme","sidebar":"tutorialSidebar"},{"id":"react/hooks/useCounter","path":"/modern-kit/docs/react/hooks/useCounter","sidebar":"tutorialSidebar"},{"id":"react/hooks/useCycleList","path":"/modern-kit/docs/react/hooks/useCycleList","sidebar":"tutorialSidebar"},{"id":"react/hooks/useDebounce","path":"/modern-kit/docs/react/hooks/useDebounce","sidebar":"tutorialSidebar"},{"id":"react/hooks/useDebouncedInputValue","path":"/modern-kit/docs/react/hooks/useDebouncedInputValue","sidebar":"tutorialSidebar"},{"id":"react/hooks/useDebouncedState","path":"/modern-kit/docs/react/hooks/useDebouncedState","sidebar":"tutorialSidebar"},{"id":"react/hooks/useDependencyTimeout","path":"/modern-kit/docs/react/hooks/useDependencyTimeout","sidebar":"tutorialSidebar"},{"id":"react/hooks/useDocumentTitle","path":"/modern-kit/docs/react/hooks/useDocumentTitle","sidebar":"tutorialSidebar"},{"id":"react/hooks/useEventListener","path":"/modern-kit/docs/react/hooks/useEventListener","sidebar":"tutorialSidebar"},{"id":"react/hooks/useFileReader","path":"/modern-kit/docs/react/hooks/useFileReader","sidebar":"tutorialSidebar"},{"id":"react/hooks/useFocus","path":"/modern-kit/docs/react/hooks/useFocus","sidebar":"tutorialSidebar"},{"id":"react/hooks/useForceUpdate","path":"/modern-kit/docs/react/hooks/useForceUpdate","sidebar":"tutorialSidebar"},{"id":"react/hooks/useHover","path":"/modern-kit/docs/react/hooks/useHover","sidebar":"tutorialSidebar"},{"id":"react/hooks/useImageStatus","path":"/modern-kit/docs/react/hooks/useImageStatus","sidebar":"tutorialSidebar"},{"id":"react/hooks/useIntersectionObserver","path":"/modern-kit/docs/react/hooks/useIntersectionObserver","sidebar":"tutorialSidebar"},{"id":"react/hooks/useInterval","path":"/modern-kit/docs/react/hooks/useInterval","sidebar":"tutorialSidebar"},{"id":"react/hooks/useIsMounted","path":"/modern-kit/docs/react/hooks/useIsMounted","sidebar":"tutorialSidebar"},{"id":"react/hooks/useIsomorphicLayoutEffect","path":"/modern-kit/docs/react/hooks/useIsomorphicLayoutEffect","sidebar":"tutorialSidebar"},{"id":"react/hooks/useKeyDown","path":"/modern-kit/docs/react/hooks/useKeyDown","sidebar":"tutorialSidebar"},{"id":"react/hooks/useLocalStorage","path":"/modern-kit/docs/react/hooks/useLocalStorage","sidebar":"tutorialSidebar"},{"id":"react/hooks/useMediaQuery","path":"/modern-kit/docs/react/hooks/useMediaQuery","sidebar":"tutorialSidebar"},{"id":"react/hooks/useMergeRefs","path":"/modern-kit/docs/react/hooks/useMergeRefs","sidebar":"tutorialSidebar"},{"id":"react/hooks/useMouse","path":"/modern-kit/docs/react/hooks/useMouse","sidebar":"tutorialSidebar"},{"id":"react/hooks/useNetwork","path":"/modern-kit/docs/react/hooks/useNetwork","sidebar":"tutorialSidebar"},{"id":"react/hooks/useOutsidePointerDown","path":"/modern-kit/docs/react/hooks/useOutsidePointerDown","sidebar":"tutorialSidebar"},{"id":"react/hooks/usePreferredColorScheme","path":"/modern-kit/docs/react/hooks/usePreferredColorScheme","sidebar":"tutorialSidebar"},{"id":"react/hooks/usePreservedCallback","path":"/modern-kit/docs/react/hooks/usePreservedCallback","sidebar":"tutorialSidebar"},{"id":"react/hooks/usePreservedState","path":"/modern-kit/docs/react/hooks/usePreservedState","sidebar":"tutorialSidebar"},{"id":"react/hooks/usePrevious","path":"/modern-kit/docs/react/hooks/usePrevious","sidebar":"tutorialSidebar"},{"id":"react/hooks/useResizeObserver","path":"/modern-kit/docs/react/hooks/useResizeObserver","sidebar":"tutorialSidebar"},{"id":"react/hooks/useScrollLock","path":"/modern-kit/docs/react/hooks/useScrollLock","sidebar":"tutorialSidebar"},{"id":"react/hooks/useScrollTo","path":"/modern-kit/docs/react/hooks/useScrollTo","sidebar":"tutorialSidebar"},{"id":"react/hooks/useSessionStorage","path":"/modern-kit/docs/react/hooks/useSessionStorage","sidebar":"tutorialSidebar"},{"id":"react/hooks/useStep","path":"/modern-kit/docs/react/hooks/useStep","sidebar":"tutorialSidebar"},{"id":"react/hooks/useStepState","path":"/modern-kit/docs/react/hooks/useStepState","sidebar":"tutorialSidebar"},{"id":"react/hooks/useThrottle","path":"/modern-kit/docs/react/hooks/useThrottle","sidebar":"tutorialSidebar"},{"id":"react/hooks/useTimeout","path":"/modern-kit/docs/react/hooks/useTimeout","sidebar":"tutorialSidebar"},{"id":"react/hooks/useToggle","path":"/modern-kit/docs/react/hooks/useToggle","sidebar":"tutorialSidebar"},{"id":"react/hooks/useToggleState","path":"/modern-kit/docs/react/hooks/useToggleState","sidebar":"tutorialSidebar"},{"id":"react/hooks/useUnmount","path":"/modern-kit/docs/react/hooks/useUnmount","sidebar":"tutorialSidebar"},{"id":"react/hooks/useUserAgent","path":"/modern-kit/docs/react/hooks/useUserAgent","sidebar":"tutorialSidebar"},{"id":"react/hooks/useVhProperty","path":"/modern-kit/docs/react/hooks/useVhProperty","sidebar":"tutorialSidebar"},{"id":"react/hooks/useVisibilityChange","path":"/modern-kit/docs/react/hooks/useVisibilityChange","sidebar":"tutorialSidebar"},{"id":"react/hooks/useWindowSize","path":"/modern-kit/docs/react/hooks/useWindowSize","sidebar":"tutorialSidebar"},{"id":"utils/array/at","path":"/modern-kit/docs/utils/array/at","sidebar":"tutorialSidebar"},{"id":"utils/array/chunk","path":"/modern-kit/docs/utils/array/chunk","sidebar":"tutorialSidebar"},{"id":"utils/array/compact","path":"/modern-kit/docs/utils/array/compact","sidebar":"tutorialSidebar"},{"id":"utils/array/contains","path":"/modern-kit/docs/utils/array/contains","sidebar":"tutorialSidebar"},{"id":"utils/array/countOccurrencesInArray","path":"/modern-kit/docs/utils/array/countOccurrencesInArray","sidebar":"tutorialSidebar"},{"id":"utils/array/difference","path":"/modern-kit/docs/utils/array/difference","sidebar":"tutorialSidebar"},{"id":"utils/array/drop","path":"/modern-kit/docs/utils/array/drop","sidebar":"tutorialSidebar"},{"id":"utils/array/excludeElements","path":"/modern-kit/docs/utils/array/excludeElements","sidebar":"tutorialSidebar"},{"id":"utils/array/fill","path":"/modern-kit/docs/utils/array/fill","sidebar":"tutorialSidebar"},{"id":"utils/array/flatMap","path":"/modern-kit/docs/utils/array/flatMap","sidebar":"tutorialSidebar"},{"id":"utils/array/flatMapDeep","path":"/modern-kit/docs/utils/array/flatMapDeep","sidebar":"tutorialSidebar"},{"id":"utils/array/flatten","path":"/modern-kit/docs/utils/array/flatten","sidebar":"tutorialSidebar"},{"id":"utils/array/flattenDeep","path":"/modern-kit/docs/utils/array/flattenDeep","sidebar":"tutorialSidebar"},{"id":"utils/array/flattenDeepThenMap","path":"/modern-kit/docs/utils/array/flattenDeepThenMap","sidebar":"tutorialSidebar"},{"id":"utils/array/forEachRight","path":"/modern-kit/docs/utils/array/forEachRight","sidebar":"tutorialSidebar"},{"id":"utils/array/groupBy","path":"/modern-kit/docs/utils/array/groupBy","sidebar":"tutorialSidebar"},{"id":"utils/array/intersection","path":"/modern-kit/docs/utils/array/intersection","sidebar":"tutorialSidebar"},{"id":"utils/array/mapRight","path":"/modern-kit/docs/utils/array/mapRight","sidebar":"tutorialSidebar"},{"id":"utils/array/partition","path":"/modern-kit/docs/utils/array/partition","sidebar":"tutorialSidebar"},{"id":"utils/array/shuffle","path":"/modern-kit/docs/utils/array/shuffle","sidebar":"tutorialSidebar"},{"id":"utils/array/swap","path":"/modern-kit/docs/utils/array/swap","sidebar":"tutorialSidebar"},{"id":"utils/array/take","path":"/modern-kit/docs/utils/array/take","sidebar":"tutorialSidebar"},{"id":"utils/array/union","path":"/modern-kit/docs/utils/array/union","sidebar":"tutorialSidebar"},{"id":"utils/array/uniq","path":"/modern-kit/docs/utils/array/uniq","sidebar":"tutorialSidebar"},{"id":"utils/array/xor","path":"/modern-kit/docs/utils/array/xor","sidebar":"tutorialSidebar"},{"id":"utils/clipboard/copyClipboardImage","path":"/modern-kit/docs/utils/clipboard/copyClipboardImage","sidebar":"tutorialSidebar"},{"id":"utils/clipboard/copyClipboardText","path":"/modern-kit/docs/utils/clipboard/copyClipboardText","sidebar":"tutorialSidebar"},{"id":"utils/clipboard/copyFallbackClipboardText","path":"/modern-kit/docs/utils/clipboard/copyFallbackClipboardText","sidebar":"tutorialSidebar"},{"id":"utils/clipboard/readClipboardContents","path":"/modern-kit/docs/utils/clipboard/readClipboardContents","sidebar":"tutorialSidebar"},{"id":"utils/clipboard/readClipboardText","path":"/modern-kit/docs/utils/clipboard/readClipboardText","sidebar":"tutorialSidebar"},{"id":"utils/common/abRandom","path":"/modern-kit/docs/utils/common/abRandom","sidebar":"tutorialSidebar"},{"id":"utils/common/asyncNoop","path":"/modern-kit/docs/utils/common/asyncNoop","sidebar":"tutorialSidebar"},{"id":"utils/common/cloneDeep","path":"/modern-kit/docs/utils/common/cloneDeep","sidebar":"tutorialSidebar"},{"id":"utils/common/delay","path":"/modern-kit/docs/utils/common/delay","sidebar":"tutorialSidebar"},{"id":"utils/common/getUniqId","path":"/modern-kit/docs/utils/common/getUniqId","sidebar":"tutorialSidebar"},{"id":"utils/common/getUniqTime","path":"/modern-kit/docs/utils/common/getUniqTime","sidebar":"tutorialSidebar"},{"id":"utils/common/getViewportSize","path":"/modern-kit/docs/utils/common/getViewportSize","sidebar":"tutorialSidebar"},{"id":"utils/common/hexToRgba","path":"/modern-kit/docs/utils/common/hexToRgba","sidebar":"tutorialSidebar"},{"id":"utils/common/identity","path":"/modern-kit/docs/utils/common/identity","sidebar":"tutorialSidebar"},{"id":"utils/common/noop","path":"/modern-kit/docs/utils/common/noop","sidebar":"tutorialSidebar"},{"id":"utils/common/once","path":"/modern-kit/docs/utils/common/once","sidebar":"tutorialSidebar"},{"id":"utils/common/parseJSON","path":"/modern-kit/docs/utils/common/parseJSON","sidebar":"tutorialSidebar"},{"id":"utils/common/pickFalsy","path":"/modern-kit/docs/utils/common/pickFalsy","sidebar":"tutorialSidebar"},{"id":"utils/common/size","path":"/modern-kit/docs/utils/common/size","sidebar":"tutorialSidebar"},{"id":"utils/common/wrapInArray","path":"/modern-kit/docs/utils/common/wrapInArray","sidebar":"tutorialSidebar"},{"id":"utils/date/getAge","path":"/modern-kit/docs/utils/date/getAge","sidebar":"tutorialSidebar"},{"id":"utils/date/getDDay","path":"/modern-kit/docs/utils/date/getDDay","sidebar":"tutorialSidebar"},{"id":"utils/date/isAfterDate","path":"/modern-kit/docs/utils/date/isAfterDate","sidebar":"tutorialSidebar"},{"id":"utils/date/isBeforeDate","path":"/modern-kit/docs/utils/date/isBeforeDate","sidebar":"tutorialSidebar"},{"id":"utils/date/isDateInRange","path":"/modern-kit/docs/utils/date/isDateInRange","sidebar":"tutorialSidebar"},{"id":"utils/date/isUnderAge","path":"/modern-kit/docs/utils/date/isUnderAge","sidebar":"tutorialSidebar"},{"id":"utils/device/getOS","path":"/modern-kit/docs/utils/device/getOS","sidebar":"tutorialSidebar"},{"id":"utils/device/isClient","path":"/modern-kit/docs/utils/device/isClient","sidebar":"tutorialSidebar"},{"id":"utils/device/isMobile","path":"/modern-kit/docs/utils/device/isMobile","sidebar":"tutorialSidebar"},{"id":"utils/device/isSever","path":"/modern-kit/docs/utils/device/isSever","sidebar":"tutorialSidebar"},{"id":"utils/file/convertImageToBase64","path":"/modern-kit/docs/utils/file/convertImageToBase64","sidebar":"tutorialSidebar"},{"id":"utils/file/convertImageToBlob","path":"/modern-kit/docs/utils/file/convertImageToBlob","sidebar":"tutorialSidebar"},{"id":"utils/file/getBlobFromUrl","path":"/modern-kit/docs/utils/file/getBlobFromUrl","sidebar":"tutorialSidebar"},{"id":"utils/file/getMIMEType","path":"/modern-kit/docs/utils/file/getMIMEType","sidebar":"tutorialSidebar"},{"id":"utils/file/getMIMETypeFromFile","path":"/modern-kit/docs/utils/file/getMIMETypeFromFile","sidebar":"tutorialSidebar"},{"id":"utils/file/getMIMETypeFromResponse","path":"/modern-kit/docs/utils/file/getMIMETypeFromResponse","sidebar":"tutorialSidebar"},{"id":"utils/file/getMIMETypeFromUrl","path":"/modern-kit/docs/utils/file/getMIMETypeFromUrl","sidebar":"tutorialSidebar"},{"id":"utils/formatter/formatNumberWithCommas","path":"/modern-kit/docs/utils/formatter/formatNumberWithCommas","sidebar":"tutorialSidebar"},{"id":"utils/formatter/formatNumberWithUnits","path":"/modern-kit/docs/utils/formatter/formatNumberWithUnits","sidebar":"tutorialSidebar"},{"id":"utils/formatter/formatPhoneNumber","path":"/modern-kit/docs/utils/formatter/formatPhoneNumber","sidebar":"tutorialSidebar"},{"id":"utils/formatter/formatValueWithSymbol","path":"/modern-kit/docs/utils/formatter/formatValueWithSymbol","sidebar":"tutorialSidebar"},{"id":"utils/math/average","path":"/modern-kit/docs/utils/math/average","sidebar":"tutorialSidebar"},{"id":"utils/math/clamp","path":"/modern-kit/docs/utils/math/clamp","sidebar":"tutorialSidebar"},{"id":"utils/math/max","path":"/modern-kit/docs/utils/math/max","sidebar":"tutorialSidebar"},{"id":"utils/math/min","path":"/modern-kit/docs/utils/math/min","sidebar":"tutorialSidebar"},{"id":"utils/math/range","path":"/modern-kit/docs/utils/math/range","sidebar":"tutorialSidebar"},{"id":"utils/math/sum","path":"/modern-kit/docs/utils/math/sum","sidebar":"tutorialSidebar"},{"id":"utils/object/deleteEmptyProperties","path":"/modern-kit/docs/utils/object/deleteEmptyProperties","sidebar":"tutorialSidebar"},{"id":"utils/object/findKey","path":"/modern-kit/docs/utils/object/findKey","sidebar":"tutorialSidebar"},{"id":"utils/object/findLastKey","path":"/modern-kit/docs/utils/object/findLastKey","sidebar":"tutorialSidebar"},{"id":"utils/object/invert","path":"/modern-kit/docs/utils/object/invert","sidebar":"tutorialSidebar"},{"id":"utils/object/mapKeys","path":"/modern-kit/docs/utils/object/mapKeys","sidebar":"tutorialSidebar"},{"id":"utils/object/mapValues","path":"/modern-kit/docs/utils/object/mapValues","sidebar":"tutorialSidebar"},{"id":"utils/object/merge","path":"/modern-kit/docs/utils/object/merge","sidebar":"tutorialSidebar"},{"id":"utils/object/objectEntries","path":"/modern-kit/docs/utils/object/objectEntries","sidebar":"tutorialSidebar"},{"id":"utils/object/objectKeys","path":"/modern-kit/docs/utils/object/objectKeys","sidebar":"tutorialSidebar"},{"id":"utils/object/objectValues","path":"/modern-kit/docs/utils/object/objectValues","sidebar":"tutorialSidebar"},{"id":"utils/object/omit","path":"/modern-kit/docs/utils/object/omit","sidebar":"tutorialSidebar"},{"id":"utils/object/omitBy","path":"/modern-kit/docs/utils/object/omitBy","sidebar":"tutorialSidebar"},{"id":"utils/object/pick","path":"/modern-kit/docs/utils/object/pick","sidebar":"tutorialSidebar"},{"id":"utils/object/pickBy","path":"/modern-kit/docs/utils/object/pickBy","sidebar":"tutorialSidebar"},{"id":"utils/string/countSubstringOccurrences","path":"/modern-kit/docs/utils/string/countSubstringOccurrences","sidebar":"tutorialSidebar"},{"id":"utils/string/extractLetters","path":"/modern-kit/docs/utils/string/extractLetters","sidebar":"tutorialSidebar"},{"id":"utils/string/extractNumber","path":"/modern-kit/docs/utils/string/extractNumber","sidebar":"tutorialSidebar"},{"id":"utils/string/removeSpecialCharacters","path":"/modern-kit/docs/utils/string/removeSpecialCharacters","sidebar":"tutorialSidebar"},{"id":"utils/string/repeatCharacters","path":"/modern-kit/docs/utils/string/repeatCharacters","sidebar":"tutorialSidebar"},{"id":"utils/string/reverseString","path":"/modern-kit/docs/utils/string/reverseString","sidebar":"tutorialSidebar"},{"id":"utils/string/serialize","path":"/modern-kit/docs/utils/string/serialize","sidebar":"tutorialSidebar"},{"id":"utils/style/formatSizeStyleValue","path":"/modern-kit/docs/utils/style/formatSizeStyleValue","sidebar":"tutorialSidebar"},{"id":"utils/style/rem","path":"/modern-kit/docs/utils/style/rem","sidebar":"tutorialSidebar"},{"id":"utils/validator/hasProperty","path":"/modern-kit/docs/utils/validator/hasProperty","sidebar":"tutorialSidebar"},{"id":"utils/validator/isArray","path":"/modern-kit/docs/utils/validator/isArray","sidebar":"tutorialSidebar"},{"id":"utils/validator/isBoolean","path":"/modern-kit/docs/utils/validator/isBoolean","sidebar":"tutorialSidebar"},{"id":"utils/validator/isDate","path":"/modern-kit/docs/utils/validator/isDate","sidebar":"tutorialSidebar"},{"id":"utils/validator/isEqual","path":"/modern-kit/docs/utils/validator/isEqual","sidebar":"tutorialSidebar"},{"id":"utils/validator/isFloat","path":"/modern-kit/docs/utils/validator/isFloat","sidebar":"tutorialSidebar"},{"id":"utils/validator/isFuntion","path":"/modern-kit/docs/utils/validator/isFuntion","sidebar":"tutorialSidebar"},{"id":"utils/validator/isInRange","path":"/modern-kit/docs/utils/validator/isInRange","sidebar":"tutorialSidebar"},{"id":"utils/validator/isMIMEType","path":"/modern-kit/docs/utils/validator/isMIMEType","sidebar":"tutorialSidebar"},{"id":"utils/validator/isNil","path":"/modern-kit/docs/utils/validator/isNil","sidebar":"tutorialSidebar"},{"id":"utils/validator/isNotNil","path":"/modern-kit/docs/utils/validator/isNotNil","sidebar":"tutorialSidebar"},{"id":"utils/validator/isNumber","path":"/modern-kit/docs/utils/validator/isNumber","sidebar":"tutorialSidebar"},{"id":"utils/validator/isNumericString","path":"/modern-kit/docs/utils/validator/isNumericString","sidebar":"tutorialSidebar"},{"id":"utils/validator/isPlainObject","path":"/modern-kit/docs/utils/validator/isPlainObject","sidebar":"tutorialSidebar"},{"id":"utils/validator/isPrimitive","path":"/modern-kit/docs/utils/validator/isPrimitive","sidebar":"tutorialSidebar"},{"id":"utils/validator/isPromise","path":"/modern-kit/docs/utils/validator/isPromise","sidebar":"tutorialSidebar"},{"id":"utils/validator/isReference","path":"/modern-kit/docs/utils/validator/isReference","sidebar":"tutorialSidebar"},{"id":"utils/validator/isString","path":"/modern-kit/docs/utils/validator/isString","sidebar":"tutorialSidebar"},{"id":"utils/validator/isSubset","path":"/modern-kit/docs/utils/validator/isSubset","sidebar":"tutorialSidebar"},{"id":"utils/validator/isValidEmail","path":"/modern-kit/docs/utils/validator/isValidEmail","sidebar":"tutorialSidebar"},{"id":"utils/validator/isValidPassword","path":"/modern-kit/docs/utils/validator/isValidPassword","sidebar":"tutorialSidebar"},{"id":"utils/validator/isValidPhoneNumber","path":"/modern-kit/docs/utils/validator/isValidPhoneNumber","sidebar":"tutorialSidebar"},{"id":"utils/validator/isWindow","path":"/modern-kit/docs/utils/validator/isWindow","sidebar":"tutorialSidebar"}],"draftIds":[],"sidebars":{"tutorialSidebar":{"link":{"path":"/modern-kit/docs/introduce/","label":"Introduce"}}}}],"breadcrumbs":true}}}'),i=JSON.parse('{"defaultLocale":"en","locales":["en"],"path":"i18n","currentLocale":"en","localeConfigs":{"en":{"label":"English","direction":"ltr","htmlLang":"en","calendar":"gregory","path":"en"}}}');var s=n(2654);const l=JSON.parse('{"docusaurusVersion":"3.7.0","siteVersion":"0.0.14","pluginVersions":{"docusaurus-plugin-content-docs":{"type":"package","name":"@docusaurus/plugin-content-docs","version":"3.7.0"},"docusaurus-plugin-content-blog":{"type":"package","name":"@docusaurus/plugin-content-blog","version":"3.7.0"},"docusaurus-plugin-content-pages":{"type":"package","name":"@docusaurus/plugin-content-pages","version":"3.7.0"},"docusaurus-plugin-sitemap":{"type":"package","name":"@docusaurus/plugin-sitemap","version":"3.7.0"},"docusaurus-plugin-svgr":{"type":"package","name":"@docusaurus/plugin-svgr","version":"3.7.0"},"docusaurus-theme-classic":{"type":"package","name":"@docusaurus/theme-classic","version":"3.7.0"}}}');var c=n(6206);const u={siteConfig:o.default,siteMetadata:l,globalData:a,i18n:i,codeTranslations:s},d=r.createContext(u);function p(e){let{children:t}=e;return(0,c.jsx)(d.Provider,{value:u,children:t})}},5791:(e,t,n)=>{"use strict";n.d(t,{A:()=>h});var r=n(4382),o=n(6949),a=n(4152),i=n(1587),s=n(5671),l=n(5474),c=n(6206);function u(e){let{error:t,tryAgain:n}=e;return(0,c.jsxs)("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"flex-start",minHeight:"100vh",width:"100%",maxWidth:"80ch",fontSize:"20px",margin:"0 auto",padding:"1rem"},children:[(0,c.jsx)("h1",{style:{fontSize:"3rem"},children:"This page crashed"}),(0,c.jsx)("button",{type:"button",onClick:n,style:{margin:"1rem 0",fontSize:"2rem",cursor:"pointer",borderRadius:20,padding:"1rem"},children:"Try again"}),(0,c.jsx)(d,{error:t})]})}function d(e){let{error:t}=e;const n=(0,i.rA)(t).map((e=>e.message)).join("\n\nCause:\n");return(0,c.jsx)("p",{style:{whiteSpace:"pre-wrap"},children:n})}function p(e){let{children:t}=e;return(0,c.jsx)(l.W,{value:{plugin:{name:"docusaurus-core-error-boundary",id:"default"}},children:t})}function f(e){let{error:t,tryAgain:n}=e;return(0,c.jsx)(p,{children:(0,c.jsxs)(h,{fallback:()=>(0,c.jsx)(u,{error:t,tryAgain:n}),children:[(0,c.jsx)(a.A,{children:(0,c.jsx)("title",{children:"Page Error"})}),(0,c.jsx)(s.A,{children:(0,c.jsx)(u,{error:t,tryAgain:n})})]})})}const m=e=>(0,c.jsx)(f,{...e});class h extends r.Component{constructor(e){super(e),this.state={error:null}}componentDidCatch(e){o.A.canUseDOM&&this.setState({error:e})}render(){const{children:e}=this.props,{error:t}=this.state;if(t){const e={error:t,tryAgain:()=>this.setState({error:null})};return(this.props.fallback??m)(e)}return e??null}}},6949:(e,t,n)=>{"use strict";n.d(t,{A:()=>o});const r="undefined"!=typeof window&&"document"in window&&"createElement"in window.document,o={canUseDOM:r,canUseEventListeners:r&&("addEventListener"in window||"attachEvent"in window),canUseIntersectionObserver:r&&"IntersectionObserver"in window,canUseViewport:r&&"screen"in window}},4152:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});n(4382);var r=n(4498),o=n(6206);function a(e){return(0,o.jsx)(r.mg,{...e})}},1074:(e,t,n)=>{"use strict";n.d(t,{A:()=>f});var r=n(4382),o=n(1824),a=n(1587),i=n(1222),s=n(2634),l=n(6949),c=n(9250),u=n(2941),d=n(6206);function p(e,t){let{isNavLink:n,to:p,href:f,activeClassName:m,isActive:h,"data-noBrokenLinkCheck":b,autoAddBaseUrl:g=!0,...y}=e;const{siteConfig:v}=(0,i.A)(),{trailingSlash:k,baseUrl:w}=v,S=v.future.experimental_router,{withBaseUrl:x}=(0,u.hH)(),_=(0,c.A)(),E=(0,r.useRef)(null);(0,r.useImperativeHandle)(t,(()=>E.current));const C=p||f;const T=(0,s.A)(C),A=C?.replace("pathname://","");let j=void 0!==A?(P=A,g&&(e=>e.startsWith("/"))(P)?x(P):P):void 0;var P;"hash"===S&&j?.startsWith("./")&&(j=j?.slice(1)),j&&T&&(j=(0,a.Ks)(j,{trailingSlash:k,baseUrl:w}));const N=(0,r.useRef)(!1),R=n?o.k2:o.N_,L=l.A.canUseIntersectionObserver,O=(0,r.useRef)(),I=()=>{N.current||null==j||(window.docusaurus.preload(j),N.current=!0)};(0,r.useEffect)((()=>(!L&&T&&l.A.canUseDOM&&null!=j&&window.docusaurus.prefetch(j),()=>{L&&O.current&&O.current.disconnect()})),[O,j,L,T]);const D=j?.startsWith("#")??!1,M=!y.target||"_self"===y.target,F=!j||!T||!M||D&&"hash"!==S;b||!D&&F||_.collectLink(j),y.id&&_.collectAnchor(y.id);const z={};return F?(0,d.jsx)("a",{ref:E,href:j,...C&&!T&&{target:"_blank",rel:"noopener noreferrer"},...y,...z}):(0,d.jsx)(R,{...y,onMouseEnter:I,onTouchStart:I,innerRef:e=>{E.current=e,L&&e&&T&&(O.current=new window.IntersectionObserver((t=>{t.forEach((t=>{e===t.target&&(t.isIntersecting||t.intersectionRatio>0)&&(O.current.unobserve(e),O.current.disconnect(),null!=j&&window.docusaurus.prefetch(j))}))})),O.current.observe(e))},to:j,...n&&{isActive:h,activeClassName:m},...z})}const f=r.forwardRef(p)},1718:(e,t,n)=>{"use strict";n.d(t,{A:()=>r});const r=()=>null},5027:(e,t,n)=>{"use strict";n.d(t,{A:()=>c,T:()=>l});var r=n(4382),o=n(6206);function a(e,t){const n=e.split(/(\{\w+\})/).map(((e,n)=>{if(n%2==1){const n=t?.[e.slice(1,-1)];if(void 0!==n)return n}return e}));return n.some((e=>(0,r.isValidElement)(e)))?n.map(((e,t)=>(0,r.isValidElement)(e)?r.cloneElement(e,{key:t}):e)).filter((e=>""!==e)):n.join("")}var i=n(2654);function s(e){let{id:t,message:n}=e;if(void 0===t&&void 0===n)throw new Error("Docusaurus translation declarations must have at least a translation id or a default translation message");return i[t??n]??n??t}function l(e,t){let{message:n,id:r}=e;return a(s({message:n,id:r}),t)}function c(e){let{children:t,id:n,values:r}=e;if(t&&"string"!=typeof t)throw console.warn("Illegal children",t),new Error("The Docusaurus component only accept simple string values");const i=s({message:t,id:n});return(0,o.jsx)(o.Fragment,{children:a(i,r)})}},7413:(e,t,n)=>{"use strict";n.d(t,{W:()=>r});const r="default"},2634:(e,t,n)=>{"use strict";function r(e){return/^(?:\w*:|\/\/)/.test(e)}function o(e){return void 0!==e&&!r(e)}n.d(t,{A:()=>o,z:()=>r})},2941:(e,t,n)=>{"use strict";n.d(t,{Ay:()=>s,hH:()=>i});var r=n(4382),o=n(1222),a=n(2634);function i(){const{siteConfig:e}=(0,o.A)(),{baseUrl:t,url:n}=e,i=e.future.experimental_router,s=(0,r.useCallback)(((e,r)=>function(e){let{siteUrl:t,baseUrl:n,url:r,options:{forcePrependBaseUrl:o=!1,absolute:i=!1}={},router:s}=e;if(!r||r.startsWith("#")||(0,a.z)(r))return r;if("hash"===s)return r.startsWith("/")?`.${r}`:`./${r}`;if(o)return n+r.replace(/^\//,"");if(r===n.replace(/\/$/,""))return n;const l=r.startsWith(n)?r:n+r.replace(/^\//,"");return i?t+l:l}({siteUrl:n,baseUrl:t,url:e,options:r,router:i})),[n,t,i]);return{withBaseUrl:s}}function s(e,t){void 0===t&&(t={});const{withBaseUrl:n}=i();return n(e,t)}},9250:(e,t,n)=>{"use strict";n.d(t,{A:()=>i});var r=n(4382);n(6206);const o=r.createContext({collectAnchor:()=>{},collectLink:()=>{}}),a=()=>(0,r.useContext)(o);function i(){return a()}},1222:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});var r=n(4382),o=n(8738);function a(){return(0,r.useContext)(o.o)}},3555:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});var r=n(4382),o=n(4265);function a(){return(0,r.useContext)(o.o)}},8705:(e,t,n)=>{"use strict";n.d(t,{A:()=>o});var r=n(4382);const o=n(6949).A.canUseDOM?r.useLayoutEffect:r.useEffect},461:(e,t,n)=>{"use strict";n.d(t,{A:()=>o});const r=e=>"object"==typeof e&&!!e&&Object.keys(e).length>0;function o(e){const t={};return function e(n,o){Object.entries(n).forEach((n=>{let[a,i]=n;const s=o?`${o}.${a}`:a;r(i)?e(i,s):t[s]=i}))}(e),t}},5474:(e,t,n)=>{"use strict";n.d(t,{W:()=>i,o:()=>a});var r=n(4382),o=n(6206);const a=r.createContext(null);function i(e){let{children:t,value:n}=e;const i=r.useContext(a),s=(0,r.useMemo)((()=>function(e){let{parent:t,value:n}=e;if(!t){if(!n)throw new Error("Unexpected: no Docusaurus route context found");if(!("plugin"in n))throw new Error("Unexpected: Docusaurus topmost route context has no `plugin` attribute");return n}const r={...t.data,...n?.data};return{plugin:t.plugin,data:r}}({parent:i,value:n})),[i,n]);return(0,o.jsx)(a.Provider,{value:s,children:t})}},8544:(e,t,n)=>{"use strict";n.d(t,{VQ:()=>b,g1:()=>y});var r=n(4382),o=n(9245),a=n(7413),i=n(7141),s=n(733),l=n(7767),c=n(6206);const u=e=>`docs-preferred-version-${e}`,d={save:(e,t,n)=>{(0,s.Wf)(u(e),{persistence:t}).set(n)},read:(e,t)=>(0,s.Wf)(u(e),{persistence:t}).get(),clear:(e,t)=>{(0,s.Wf)(u(e),{persistence:t}).del()}},p=e=>Object.fromEntries(e.map((e=>[e,{preferredVersionName:null}])));const f=r.createContext(null);function m(){const e=(0,o.Gy)(),t=(0,i.p)().docs.versionPersistence,n=(0,r.useMemo)((()=>Object.keys(e)),[e]),[a,s]=(0,r.useState)((()=>p(n)));(0,r.useEffect)((()=>{s(function(e){let{pluginIds:t,versionPersistence:n,allDocsData:r}=e;function o(e){const t=d.read(e,n);return r[e].versions.some((e=>e.name===t))?{preferredVersionName:t}:(d.clear(e,n),{preferredVersionName:null})}return Object.fromEntries(t.map((e=>[e,o(e)])))}({allDocsData:e,versionPersistence:t,pluginIds:n}))}),[e,t,n]);return[a,(0,r.useMemo)((()=>({savePreferredVersion:function(e,n){d.save(e,t,n),s((t=>({...t,[e]:{preferredVersionName:n}})))}})),[t])]}function h(e){let{children:t}=e;const n=m();return(0,c.jsx)(f.Provider,{value:n,children:t})}function b(e){let{children:t}=e;return(0,c.jsx)(h,{children:t})}function g(){const e=(0,r.useContext)(f);if(!e)throw new l.dV("DocsPreferredVersionContextProvider");return e}function y(e){void 0===e&&(e=a.W);const t=(0,o.ht)(e),[n,i]=g(),{preferredVersionName:s}=n[e];return{preferredVersion:t.versions.find((e=>e.name===s))??null,savePreferredVersionName:(0,r.useCallback)((t=>{i.savePreferredVersion(e,t)}),[i,e])}}},4935:(e,t,n)=>{"use strict";n.d(t,{V:()=>l,t:()=>c});var r=n(4382),o=n(7767),a=n(6206);const i=Symbol("EmptyContext"),s=r.createContext(i);function l(e){let{children:t,name:n,items:o}=e;const i=(0,r.useMemo)((()=>n&&o?{name:n,items:o}:null),[n,o]);return(0,a.jsx)(s.Provider,{value:i,children:t})}function c(){const e=(0,r.useContext)(s);if(e===i)throw new o.dV("DocsSidebarProvider");return e}},8003:(e,t,n)=>{"use strict";n.d(t,{Nr:()=>p,w8:()=>h,B5:()=>x,Vd:()=>k,QB:()=>S,fW:()=>w,OF:()=>v,Y:()=>g});var r=n(4382),o=n(96),a=n(9612),i=n(9245),s=n(1052);function l(e){return Array.from(new Set(e))}var c=n(8544),u=n(4767),d=n(4935);function p(e){return"link"!==e.type||e.unlisted?"category"===e.type?function(e){if(e.href&&!e.linkUnlisted)return e.href;for(const t of e.items){const e=p(t);if(e)return e}}(e):void 0:e.href}const f=(e,t)=>void 0!==e&&(0,s.ys)(e,t),m=(e,t)=>e.some((e=>h(e,t)));function h(e,t){return"link"===e.type?f(e.href,t):"category"===e.type&&(f(e.href,t)||m(e.items,t))}function b(e,t){switch(e.type){case"category":return h(e,t)||void 0!==e.href&&!e.linkUnlisted||e.items.some((e=>b(e,t)));case"link":return!e.unlisted||h(e,t);default:return!0}}function g(e,t){return(0,r.useMemo)((()=>e.filter((e=>b(e,t)))),[e,t])}function y(e){let{sidebarItems:t,pathname:n,onlyCategories:r=!1}=e;const o=[];return function e(t){for(const a of t)if("category"===a.type&&((0,s.ys)(a.href,n)||e(a.items))||"link"===a.type&&(0,s.ys)(a.href,n)){return r&&"category"!==a.type||o.unshift(a),!0}return!1}(t),o}function v(){const e=(0,d.t)(),{pathname:t}=(0,o.zy)(),n=(0,i.vT)()?.pluginData.breadcrumbs;return!1!==n&&e?y({sidebarItems:e.items,pathname:t}):null}function k(e){const{activeVersion:t}=(0,i.zK)(e),{preferredVersion:n}=(0,c.g1)(e),o=(0,i.r7)(e);return(0,r.useMemo)((()=>l([t,n,o].filter(Boolean))),[t,n,o])}function w(e,t){const n=k(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.sidebars?Object.entries(e.sidebars):[])),r=t.find((t=>t[0]===e));if(!r)throw new Error(`Can't find any sidebar with id "${e}" in version${n.length>1?"s":""} ${n.map((e=>e.name)).join(", ")}".\nAvailable sidebar ids are:\n- ${t.map((e=>e[0])).join("\n- ")}`);return r[1]}),[e,n])}function S(e,t){const n=k(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.docs)),r=t.find((t=>t.id===e));if(!r){if(n.flatMap((e=>e.draftIds)).includes(e))return null;throw new Error(`Couldn't find any doc with id "${e}" in version${n.length>1?"s":""} "${n.map((e=>e.name)).join(", ")}".\nAvailable doc ids are:\n- ${l(t.map((e=>e.id))).join("\n- ")}`)}return r}),[e,n])}function x(e){let{route:t}=e;const n=(0,o.zy)(),r=(0,u.r)(),i=t.routes,s=i.find((e=>(0,o.B6)(n.pathname,e)));if(!s)return null;const l=s.sidebar,c=l?r.docsSidebars[l]:void 0;return{docElement:(0,a.v)(i),sidebarName:l,sidebarItems:c}}},4767:(e,t,n)=>{"use strict";n.d(t,{n:()=>s,r:()=>l});var r=n(4382),o=n(7767),a=n(6206);const i=r.createContext(null);function s(e){let{children:t,version:n}=e;return(0,a.jsx)(i.Provider,{value:n,children:t})}function l(){const e=(0,r.useContext)(i);if(null===e)throw new o.dV("DocsVersionProvider");return e}},9245:(e,t,n)=>{"use strict";n.d(t,{zK:()=>h,vT:()=>p,Gy:()=>u,HW:()=>b,ht:()=>d,r7:()=>m,jh:()=>f});var r=n(96),o=n(1222),a=n(7413);function i(e,t){void 0===t&&(t={});const n=function(){const{globalData:e}=(0,o.A)();return e}()[e];if(!n&&t.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin.`);return n}const s=e=>e.versions.find((e=>e.isLast));function l(e,t){const n=function(e,t){return[...e.versions].sort(((e,t)=>e.path===t.path?0:e.path.includes(t.path)?-1:t.path.includes(e.path)?1:0)).find((e=>!!(0,r.B6)(t,{path:e.path,exact:!1,strict:!1})))}(e,t),o=n?.docs.find((e=>!!(0,r.B6)(t,{path:e.path,exact:!0,strict:!1})));return{activeVersion:n,activeDoc:o,alternateDocVersions:o?function(t){const n={};return e.versions.forEach((e=>{e.docs.forEach((r=>{r.id===t&&(n[e.name]=r)}))})),n}(o.id):{}}}const c={},u=()=>i("docusaurus-plugin-content-docs")??c,d=e=>{try{return function(e,t,n){void 0===t&&(t=a.W),void 0===n&&(n={});const r=i(e),o=r?.[t];if(!o&&n.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin with id "${t}".`);return o}("docusaurus-plugin-content-docs",e,{failfast:!0})}catch(t){throw new Error("You are using a feature of the Docusaurus docs plugin, but this plugin does not seem to be enabled"+("Default"===e?"":` (pluginId=${e}`),{cause:t})}};function p(e){void 0===e&&(e={});const t=u(),{pathname:n}=(0,r.zy)();return function(e,t,n){void 0===n&&(n={});const o=Object.entries(e).sort(((e,t)=>t[1].path.localeCompare(e[1].path))).find((e=>{let[,n]=e;return!!(0,r.B6)(t,{path:n.path,exact:!1,strict:!1})})),a=o?{pluginId:o[0],pluginData:o[1]}:void 0;if(!a&&n.failfast)throw new Error(`Can't find active docs plugin for "${t}" pathname, while it was expected to be found. Maybe you tried to use a docs feature that can only be used on a docs-related page? Existing docs plugin paths are: ${Object.values(e).map((e=>e.path)).join(", ")}`);return a}(t,n,e)}function f(e){return d(e).versions}function m(e){const t=d(e);return s(t)}function h(e){const t=d(e),{pathname:n}=(0,r.zy)();return l(t,n)}function b(e){const t=d(e),{pathname:n}=(0,r.zy)();return function(e,t){const n=s(e);return{latestDocSuggestion:l(e,t).alternateDocVersions[n.name],latestVersionSuggestion:n}}(t,n)}},5036:(e,t,n)=>{"use strict";function r(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}function o(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(){return i=Object.assign||function(e){for(var t=1;t{"use strict";n.r(t),n.d(t,{default:()=>a});var r=n(1079),o=n.n(r);o().configure({showSpinner:!1});const a={onRouteUpdate(e){let{location:t,previousLocation:n}=e;if(n&&t.pathname!==n.pathname){const e=window.setTimeout((()=>{o().start()}),200);return()=>window.clearTimeout(e)}},onRouteDidUpdate(){o().done()}}},95:(e,t,n)=>{"use strict";var r=n(560),o=n(4784);!function(e){const{themeConfig:{prism:t}}=o.default,{additionalLanguages:r}=t,a=globalThis.Prism;globalThis.Prism=e,r.forEach((e=>{"php"===e&&n(8723),n(7826)(`./prism-${e}`)})),delete globalThis.Prism,void 0!==a&&(globalThis.Prism=e)}(r.My)},5282:(e,t,n)=>{"use strict";n.d(t,{A:()=>u});n(4382);var r=n(7164),o=n(5027),a=n(7141),i=n(1074),s=n(9250);const l={anchorWithStickyNavbar:"anchorWithStickyNavbar_YS3A",anchorWithHideOnScrollNavbar:"anchorWithHideOnScrollNavbar_AvYX"};var c=n(6206);function u(e){let{as:t,id:n,...u}=e;const d=(0,s.A)(),{navbar:{hideOnScroll:p}}=(0,a.p)();if("h1"===t||!n)return(0,c.jsx)(t,{...u,id:void 0});d.collectAnchor(n);const f=(0,o.T)({id:"theme.common.headingLinkTitle",message:"Direct link to {heading}",description:"Title for link to heading"},{heading:"string"==typeof u.children?u.children:n});return(0,c.jsxs)(t,{...u,className:(0,r.A)("anchor",p?l.anchorWithHideOnScrollNavbar:l.anchorWithStickyNavbar,u.className),id:n,children:[u.children,(0,c.jsx)(i.A,{className:"hash-link",to:`#${n}`,"aria-label":f,title:f,children:"\u200b"})]})}},1380:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});n(4382);const r={iconExternalLink:"iconExternalLink_eVfA"};var o=n(6206);function a(e){let{width:t=13.5,height:n=13.5}=e;return(0,o.jsx)("svg",{width:t,height:n,"aria-hidden":"true",viewBox:"0 0 24 24",className:r.iconExternalLink,children:(0,o.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})}},5671:(e,t,n)=>{"use strict";n.d(t,{A:()=>ft});var r=n(4382),o=n(7164),a=n(5791),i=n(2538),s=n(96),l=n(5027),c=n(4571),u=n(6206);const d="__docusaurus_skipToContent_fallback";function p(e){e.setAttribute("tabindex","-1"),e.focus(),e.removeAttribute("tabindex")}function f(){const e=(0,r.useRef)(null),{action:t}=(0,s.W6)(),n=(0,r.useCallback)((e=>{e.preventDefault();const t=document.querySelector("main:first-of-type")??document.getElementById(d);t&&p(t)}),[]);return(0,c.$)((n=>{let{location:r}=n;e.current&&!r.hash&&"PUSH"===t&&p(e.current)})),{containerRef:e,onClick:n}}const m=(0,l.T)({id:"theme.common.skipToMainContent",description:"The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation",message:"Skip to main content"});function h(e){const t=e.children??m,{containerRef:n,onClick:r}=f();return(0,u.jsx)("div",{ref:n,role:"region","aria-label":m,children:(0,u.jsx)("a",{...e,href:`#${d}`,onClick:r,children:t})})}var b=n(3070),g=n(9054);const y={skipToContent:"skipToContent_Uv6M"};function v(){return(0,u.jsx)(h,{className:y.skipToContent})}var k=n(7141),w=n(9354);function S(e){let{width:t=21,height:n=21,color:r="currentColor",strokeWidth:o=1.2,className:a,...i}=e;return(0,u.jsx)("svg",{viewBox:"0 0 15 15",width:t,height:n,...i,children:(0,u.jsx)("g",{stroke:r,strokeWidth:o,children:(0,u.jsx)("path",{d:"M.75.75l13.5 13.5M14.25.75L.75 14.25"})})})}const x={closeButton:"closeButton_RKqh"};function _(e){return(0,u.jsx)("button",{type:"button","aria-label":(0,l.T)({id:"theme.AnnouncementBar.closeButtonAriaLabel",message:"Close",description:"The ARIA label for close button of announcement bar"}),...e,className:(0,o.A)("clean-btn close",x.closeButton,e.className),children:(0,u.jsx)(S,{width:14,height:14,strokeWidth:3.1})})}const E={content:"content_ND0S"};function C(e){const{announcementBar:t}=(0,k.p)(),{content:n}=t;return(0,u.jsx)("div",{...e,className:(0,o.A)(E.content,e.className),dangerouslySetInnerHTML:{__html:n}})}const T={announcementBar:"announcementBar_EItb",announcementBarPlaceholder:"announcementBarPlaceholder_GHBS",announcementBarClose:"announcementBarClose_f5ts",announcementBarContent:"announcementBarContent__mps"};function A(){const{announcementBar:e}=(0,k.p)(),{isActive:t,close:n}=(0,w.M)();if(!t)return null;const{backgroundColor:r,textColor:o,isCloseable:a}=e;return(0,u.jsxs)("div",{className:T.announcementBar,style:{backgroundColor:r,color:o},role:"banner",children:[a&&(0,u.jsx)("div",{className:T.announcementBarPlaceholder}),(0,u.jsx)(C,{className:T.announcementBarContent}),a&&(0,u.jsx)(_,{onClick:n,className:T.announcementBarClose})]})}var j=n(4826),P=n(9341);var N=n(7767),R=n(7043);const L=r.createContext(null);function O(e){let{children:t}=e;const n=function(){const e=(0,j.M)(),t=(0,R.YL)(),[n,o]=(0,r.useState)(!1),a=null!==t.component,i=(0,N.ZC)(a);return(0,r.useEffect)((()=>{a&&!i&&o(!0)}),[a,i]),(0,r.useEffect)((()=>{a?e.shown||o(!0):o(!1)}),[e.shown,a]),(0,r.useMemo)((()=>[n,o]),[n])}();return(0,u.jsx)(L.Provider,{value:n,children:t})}function I(e){if(e.component){const t=e.component;return(0,u.jsx)(t,{...e.props})}}function D(){const e=(0,r.useContext)(L);if(!e)throw new N.dV("NavbarSecondaryMenuDisplayProvider");const[t,n]=e,o=(0,r.useCallback)((()=>n(!1)),[n]),a=(0,R.YL)();return(0,r.useMemo)((()=>({shown:t,hide:o,content:I(a)})),[o,a,t])}function M(e){let{header:t,primaryMenu:n,secondaryMenu:r}=e;const{shown:a}=D();return(0,u.jsxs)("div",{className:"navbar-sidebar",children:[t,(0,u.jsxs)("div",{className:(0,o.A)("navbar-sidebar__items",{"navbar-sidebar__items--show-secondary":a}),children:[(0,u.jsx)("div",{className:"navbar-sidebar__item menu",children:n}),(0,u.jsx)("div",{className:"navbar-sidebar__item menu",children:r})]})]})}var F=n(2630),z=n(3555);function B(e){return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,u.jsx)("path",{fill:"currentColor",d:"M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"})})}function U(e){return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,u.jsx)("path",{fill:"currentColor",d:"M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"})})}const $={toggle:"toggle_LPdA",toggleButton:"toggleButton_uiCO",darkToggleIcon:"darkToggleIcon_EPeq",lightToggleIcon:"lightToggleIcon_sGpT",toggleButtonDisabled:"toggleButtonDisabled_d_oL"};function q(e){let{className:t,buttonClassName:n,value:r,onChange:a}=e;const i=(0,z.A)(),s=(0,l.T)({message:"Switch between dark and light mode (currently {mode})",id:"theme.colorToggle.ariaLabel",description:"The ARIA label for the navbar color mode toggle"},{mode:"dark"===r?(0,l.T)({message:"dark mode",id:"theme.colorToggle.ariaLabel.mode.dark",description:"The name for the dark color mode"}):(0,l.T)({message:"light mode",id:"theme.colorToggle.ariaLabel.mode.light",description:"The name for the light color mode"})});return(0,u.jsx)("div",{className:(0,o.A)($.toggle,t),children:(0,u.jsxs)("button",{className:(0,o.A)("clean-btn",$.toggleButton,!i&&$.toggleButtonDisabled,n),type:"button",onClick:()=>a("dark"===r?"light":"dark"),disabled:!i,title:s,"aria-label":s,"aria-live":"polite","aria-pressed":"dark"===r?"true":"false",children:[(0,u.jsx)(B,{className:(0,o.A)($.toggleIcon,$.lightToggleIcon)}),(0,u.jsx)(U,{className:(0,o.A)($.toggleIcon,$.darkToggleIcon)})]})})}const V=r.memo(q),H={darkNavbarColorModeToggle:"darkNavbarColorModeToggle_NjgR"};function W(e){let{className:t}=e;const n=(0,k.p)().navbar.style,r=(0,k.p)().colorMode.disableSwitch,{colorMode:o,setColorMode:a}=(0,F.G)();return r?null:(0,u.jsx)(V,{className:t,buttonClassName:"dark"===n?H.darkNavbarColorModeToggle:void 0,value:o,onChange:a})}var G=n(7e3);function K(){return(0,u.jsx)(G.A,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:"navbar__title text--truncate"})}function Q(){const e=(0,j.M)();return(0,u.jsx)("button",{type:"button","aria-label":(0,l.T)({id:"theme.docs.sidebar.closeSidebarButtonAriaLabel",message:"Close navigation bar",description:"The ARIA label for close button of mobile sidebar"}),className:"clean-btn navbar-sidebar__close",onClick:()=>e.toggle(),children:(0,u.jsx)(S,{color:"var(--ifm-color-emphasis-600)"})})}function Y(){return(0,u.jsxs)("div",{className:"navbar-sidebar__brand",children:[(0,u.jsx)(K,{}),(0,u.jsx)(W,{className:"margin-right--md"}),(0,u.jsx)(Q,{})]})}var Z=n(1074),J=n(2941),X=n(2634);function ee(e,t){return void 0!==e&&void 0!==t&&new RegExp(e,"gi").test(t)}var te=n(1380);function ne(e){let{activeBasePath:t,activeBaseRegex:n,to:r,href:o,label:a,html:i,isDropdownLink:s,prependBaseUrlToHref:l,...c}=e;const d=(0,J.Ay)(r),p=(0,J.Ay)(t),f=(0,J.Ay)(o,{forcePrependBaseUrl:!0}),m=a&&o&&!(0,X.A)(o),h=i?{dangerouslySetInnerHTML:{__html:i}}:{children:(0,u.jsxs)(u.Fragment,{children:[a,m&&(0,u.jsx)(te.A,{...s&&{width:12,height:12}})]})};return o?(0,u.jsx)(Z.A,{href:l?f:o,...c,...h}):(0,u.jsx)(Z.A,{to:d,isNavLink:!0,...(t||n)&&{isActive:(e,t)=>n?ee(n,t.pathname):t.pathname.startsWith(p)},...c,...h})}function re(e){let{className:t,isDropdownItem:n=!1,...r}=e;const a=(0,u.jsx)(ne,{className:(0,o.A)(n?"dropdown__link":"navbar__item navbar__link",t),isDropdownLink:n,...r});return n?(0,u.jsx)("li",{children:a}):a}function oe(e){let{className:t,isDropdownItem:n,...r}=e;return(0,u.jsx)("li",{className:"menu__list-item",children:(0,u.jsx)(ne,{className:(0,o.A)("menu__link",t),...r})})}function ae(e){let{mobile:t=!1,position:n,...r}=e;const o=t?oe:re;return(0,u.jsx)(o,{...r,activeClassName:r.activeClassName??(t?"menu__link--active":"navbar__link--active")})}var ie=n(8445),se=n(1052),le=n(1222);const ce={dropdownNavbarItemMobile:"dropdownNavbarItemMobile_RjH0"};function ue(e,t){return e.some((e=>function(e,t){return!!(0,se.ys)(e.to,t)||!!ee(e.activeBaseRegex,t)||!(!e.activeBasePath||!t.startsWith(e.activeBasePath))}(e,t)))}function de(e){let{items:t,position:n,className:a,onClick:i,...s}=e;const l=(0,r.useRef)(null),[c,d]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{const e=e=>{l.current&&!l.current.contains(e.target)&&d(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),document.addEventListener("focusin",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e),document.removeEventListener("focusin",e)}}),[l]),(0,u.jsxs)("div",{ref:l,className:(0,o.A)("navbar__item","dropdown","dropdown--hoverable",{"dropdown--right":"right"===n,"dropdown--show":c}),children:[(0,u.jsx)(ne,{"aria-haspopup":"true","aria-expanded":c,role:"button",href:s.to?void 0:"#",className:(0,o.A)("navbar__link",a),...s,onClick:s.to?void 0:e=>e.preventDefault(),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),d(!c))},children:s.children??s.label}),(0,u.jsx)("ul",{className:"dropdown__menu",children:t.map(((e,t)=>(0,r.createElement)(Ee,{isDropdownItem:!0,activeClassName:"dropdown__link--active",...e,key:t})))})]})}function pe(e){let{items:t,className:n,position:a,onClick:i,...l}=e;const c=function(){const{siteConfig:{baseUrl:e}}=(0,le.A)(),{pathname:t}=(0,s.zy)();return t.replace(e,"/")}(),d=ue(t,c),{collapsed:p,toggleCollapsed:f,setCollapsed:m}=(0,ie.u)({initialState:()=>!d});return(0,r.useEffect)((()=>{d&&m(!d)}),[c,d,m]),(0,u.jsxs)("li",{className:(0,o.A)("menu__list-item",{"menu__list-item--collapsed":p}),children:[(0,u.jsx)(ne,{role:"button",className:(0,o.A)(ce.dropdownNavbarItemMobile,"menu__link menu__link--sublist menu__link--sublist-caret",n),...l,onClick:e=>{e.preventDefault(),f()},children:l.children??l.label}),(0,u.jsx)(ie.N,{lazy:!0,as:"ul",className:"menu__list",collapsed:p,children:t.map(((e,t)=>(0,r.createElement)(Ee,{mobile:!0,isDropdownItem:!0,onClick:i,activeClassName:"menu__link--active",...e,key:t})))})]})}function fe(e){let{mobile:t=!1,...n}=e;const r=t?pe:de;return(0,u.jsx)(r,{...n})}var me=n(4282);function he(e){let{width:t=20,height:n=20,...r}=e;return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:t,height:n,"aria-hidden":!0,...r,children:(0,u.jsx)("path",{fill:"currentColor",d:"M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"})})}const be="iconLanguage_zeww";var ge=n(1718);const ye={navbarSearchContainer:"navbarSearchContainer_PULA"};function ve(e){let{children:t,className:n}=e;return(0,u.jsx)("div",{className:(0,o.A)(n,ye.navbarSearchContainer),children:t})}var ke=n(9245),we=n(8003);var Se=n(8544);function xe(e,t){return t.alternateDocVersions[e.name]??function(e){return e.docs.find((t=>t.id===e.mainDocId))}(e)}const _e={default:ae,localeDropdown:function(e){let{mobile:t,dropdownItemsBefore:n,dropdownItemsAfter:r,queryString:o="",...a}=e;const{i18n:{currentLocale:i,locales:c,localeConfigs:d}}=(0,le.A)(),p=(0,me.o)(),{search:f,hash:m}=(0,s.zy)(),h=[...n,...c.map((e=>{const n=`${`pathname://${p.createUrl({locale:e,fullyQualified:!1})}`}${f}${m}${o}`;return{label:d[e].label,lang:d[e].htmlLang,to:n,target:"_self",autoAddBaseUrl:!1,className:e===i?t?"menu__link--active":"dropdown__link--active":""}})),...r],b=t?(0,l.T)({message:"Languages",id:"theme.navbar.mobileLanguageDropdown.label",description:"The label for the mobile language switcher dropdown"}):d[i].label;return(0,u.jsx)(fe,{...a,mobile:t,label:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(he,{className:be}),b]}),items:h})},search:function(e){let{mobile:t,className:n}=e;return t?null:(0,u.jsx)(ve,{className:n,children:(0,u.jsx)(ge.A,{})})},dropdown:fe,html:function(e){let{value:t,className:n,mobile:r=!1,isDropdownItem:a=!1}=e;const i=a?"li":"div";return(0,u.jsx)(i,{className:(0,o.A)({navbar__item:!r&&!a,"menu__list-item":r},n),dangerouslySetInnerHTML:{__html:t}})},doc:function(e){let{docId:t,label:n,docsPluginId:r,...o}=e;const{activeDoc:a}=(0,ke.zK)(r),i=(0,we.QB)(t,r),s=a?.path===i?.path;return null===i||i.unlisted&&!s?null:(0,u.jsx)(ae,{exact:!0,...o,isActive:()=>s||!!a?.sidebar&&a.sidebar===i.sidebar,label:n??i.id,to:i.path})},docSidebar:function(e){let{sidebarId:t,label:n,docsPluginId:r,...o}=e;const{activeDoc:a}=(0,ke.zK)(r),i=(0,we.fW)(t,r).link;if(!i)throw new Error(`DocSidebarNavbarItem: Sidebar with ID "${t}" doesn't have anything to be linked to.`);return(0,u.jsx)(ae,{exact:!0,...o,isActive:()=>a?.sidebar===t,label:n??i.label,to:i.path})},docsVersion:function(e){let{label:t,to:n,docsPluginId:r,...o}=e;const a=(0,we.Vd)(r)[0],i=t??a.label,s=n??(e=>e.docs.find((t=>t.id===e.mainDocId)))(a).path;return(0,u.jsx)(ae,{...o,label:i,to:s})},docsVersionDropdown:function(e){let{mobile:t,docsPluginId:n,dropdownActiveClassDisabled:r,dropdownItemsBefore:o,dropdownItemsAfter:a,...i}=e;const{search:c,hash:d}=(0,s.zy)(),p=(0,ke.zK)(n),f=(0,ke.jh)(n),{savePreferredVersionName:m}=(0,Se.g1)(n),h=[...o,...f.map((function(e){const t=xe(e,p);return{label:e.label,to:`${t.path}${c}${d}`,isActive:()=>e===p.activeVersion,onClick:()=>m(e.name)}})),...a],b=(0,we.Vd)(n)[0],g=t&&h.length>1?(0,l.T)({id:"theme.navbar.mobileVersionsDropdown.label",message:"Versions",description:"The label for the navbar versions dropdown on mobile view"}):b.label,y=t&&h.length>1?void 0:xe(b,p).path;return h.length<=1?(0,u.jsx)(ae,{...i,mobile:t,label:g,to:y,isActive:r?()=>!1:void 0}):(0,u.jsx)(fe,{...i,mobile:t,label:g,to:y,items:h,isActive:r?()=>!1:void 0})}};function Ee(e){let{type:t,...n}=e;const r=function(e,t){return e&&"default"!==e?e:"items"in t?"dropdown":"default"}(t,n),o=_e[r];if(!o)throw new Error(`No NavbarItem component found for type "${t}".`);return(0,u.jsx)(o,{...n})}function Ce(){const e=(0,j.M)(),t=(0,k.p)().navbar.items;return(0,u.jsx)("ul",{className:"menu__list",children:t.map(((t,n)=>(0,r.createElement)(Ee,{mobile:!0,...t,onClick:()=>e.toggle(),key:n})))})}function Te(e){return(0,u.jsx)("button",{...e,type:"button",className:"clean-btn navbar-sidebar__back",children:(0,u.jsx)(l.A,{id:"theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel",description:"The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)",children:"\u2190 Back to main menu"})})}function Ae(){const e=0===(0,k.p)().navbar.items.length,t=D();return(0,u.jsxs)(u.Fragment,{children:[!e&&(0,u.jsx)(Te,{onClick:()=>t.hide()}),t.content]})}function je(){const e=(0,j.M)();var t;return void 0===(t=e.shown)&&(t=!0),(0,r.useEffect)((()=>(document.body.style.overflow=t?"hidden":"visible",()=>{document.body.style.overflow="visible"})),[t]),e.shouldRender?(0,u.jsx)(M,{header:(0,u.jsx)(Y,{}),primaryMenu:(0,u.jsx)(Ce,{}),secondaryMenu:(0,u.jsx)(Ae,{})}):null}const Pe={navbarHideable:"navbarHideable_DLgb",navbarHidden:"navbarHidden_HOJH"};function Ne(e){return(0,u.jsx)("div",{role:"presentation",...e,className:(0,o.A)("navbar-sidebar__backdrop",e.className)})}function Re(e){let{children:t}=e;const{navbar:{hideOnScroll:n,style:a}}=(0,k.p)(),i=(0,j.M)(),{navbarRef:s,isNavbarVisible:d}=function(e){const[t,n]=(0,r.useState)(e),o=(0,r.useRef)(!1),a=(0,r.useRef)(0),i=(0,r.useCallback)((e=>{null!==e&&(a.current=e.getBoundingClientRect().height)}),[]);return(0,P.Mq)(((t,r)=>{let{scrollY:i}=t;if(!e)return;if(i=s?n(!1):i+c{if(!e)return;const r=t.location.hash;if(r?document.getElementById(r.substring(1)):void 0)return o.current=!0,void n(!1);n(!0)})),{navbarRef:i,isNavbarVisible:t}}(n);return(0,u.jsxs)("nav",{ref:s,"aria-label":(0,l.T)({id:"theme.NavBar.navAriaLabel",message:"Main",description:"The ARIA label for the main navigation"}),className:(0,o.A)("navbar","navbar--fixed-top",n&&[Pe.navbarHideable,!d&&Pe.navbarHidden],{"navbar--dark":"dark"===a,"navbar--primary":"primary"===a,"navbar-sidebar--show":i.shown}),children:[t,(0,u.jsx)(Ne,{onClick:i.toggle}),(0,u.jsx)(je,{})]})}var Le=n(1587);const Oe={errorBoundaryError:"errorBoundaryError_iOR6",errorBoundaryFallback:"errorBoundaryFallback_It70"};function Ie(e){return(0,u.jsx)("button",{type:"button",...e,children:(0,u.jsx)(l.A,{id:"theme.ErrorPageContent.tryAgain",description:"The label of the button to try again rendering when the React error boundary captures an error",children:"Try again"})})}function De(e){let{error:t}=e;const n=(0,Le.rA)(t).map((e=>e.message)).join("\n\nCause:\n");return(0,u.jsx)("p",{className:Oe.errorBoundaryError,children:n})}class Me extends r.Component{componentDidCatch(e,t){throw this.props.onError(e,t)}render(){return this.props.children}}const Fe="right";function ze(e){let{width:t=30,height:n=30,className:r,...o}=e;return(0,u.jsx)("svg",{className:r,width:t,height:n,viewBox:"0 0 30 30","aria-hidden":"true",...o,children:(0,u.jsx)("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"})})}function Be(){const{toggle:e,shown:t}=(0,j.M)();return(0,u.jsx)("button",{onClick:e,"aria-label":(0,l.T)({id:"theme.docs.sidebar.toggleSidebarButtonAriaLabel",message:"Toggle navigation bar",description:"The ARIA label for hamburger menu button of mobile navigation"}),"aria-expanded":t,className:"navbar__toggle clean-btn",type:"button",children:(0,u.jsx)(ze,{})})}const Ue={colorModeToggle:"colorModeToggle_C_zz"};function $e(e){let{items:t}=e;return(0,u.jsx)(u.Fragment,{children:t.map(((e,t)=>(0,u.jsx)(Me,{onError:t=>new Error(`A theme navbar item failed to render.\nPlease double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:\n${JSON.stringify(e,null,2)}`,{cause:t}),children:(0,u.jsx)(Ee,{...e})},t)))})}function qe(e){let{left:t,right:n}=e;return(0,u.jsxs)("div",{className:"navbar__inner",children:[(0,u.jsx)("div",{className:"navbar__items",children:t}),(0,u.jsx)("div",{className:"navbar__items navbar__items--right",children:n})]})}function Ve(){const e=(0,j.M)(),t=(0,k.p)().navbar.items,[n,r]=function(e){function t(e){return"left"===(e.position??Fe)}return[e.filter(t),e.filter((e=>!t(e)))]}(t),o=t.find((e=>"search"===e.type));return(0,u.jsx)(qe,{left:(0,u.jsxs)(u.Fragment,{children:[!e.disabled&&(0,u.jsx)(Be,{}),(0,u.jsx)(K,{}),(0,u.jsx)($e,{items:n})]}),right:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)($e,{items:r}),(0,u.jsx)(W,{className:Ue.colorModeToggle}),!o&&(0,u.jsx)(ve,{children:(0,u.jsx)(ge.A,{})})]})})}function He(){return(0,u.jsx)(Re,{children:(0,u.jsx)(Ve,{})})}function We(e){let{item:t}=e;const{to:n,href:r,label:a,prependBaseUrlToHref:i,className:s,...l}=t,c=(0,J.Ay)(n),d=(0,J.Ay)(r,{forcePrependBaseUrl:!0});return(0,u.jsxs)(Z.A,{className:(0,o.A)("footer__link-item",s),...r?{href:i?d:r}:{to:c},...l,children:[a,r&&!(0,X.A)(r)&&(0,u.jsx)(te.A,{})]})}function Ge(e){let{item:t}=e;return t.html?(0,u.jsx)("li",{className:(0,o.A)("footer__item",t.className),dangerouslySetInnerHTML:{__html:t.html}}):(0,u.jsx)("li",{className:"footer__item",children:(0,u.jsx)(We,{item:t})},t.href??t.to)}function Ke(e){let{column:t}=e;return(0,u.jsxs)("div",{className:(0,o.A)("col footer__col",t.className),children:[(0,u.jsx)("div",{className:"footer__title",children:t.title}),(0,u.jsx)("ul",{className:"footer__items clean-list",children:t.items.map(((e,t)=>(0,u.jsx)(Ge,{item:e},t)))})]})}function Qe(e){let{columns:t}=e;return(0,u.jsx)("div",{className:"row footer__links",children:t.map(((e,t)=>(0,u.jsx)(Ke,{column:e},t)))})}function Ye(){return(0,u.jsx)("span",{className:"footer__link-separator",children:"\xb7"})}function Ze(e){let{item:t}=e;return t.html?(0,u.jsx)("span",{className:(0,o.A)("footer__link-item",t.className),dangerouslySetInnerHTML:{__html:t.html}}):(0,u.jsx)(We,{item:t})}function Je(e){let{links:t}=e;return(0,u.jsx)("div",{className:"footer__links text--center",children:(0,u.jsx)("div",{className:"footer__links",children:t.map(((e,n)=>(0,u.jsxs)(r.Fragment,{children:[(0,u.jsx)(Ze,{item:e}),t.length!==n+1&&(0,u.jsx)(Ye,{})]},n)))})})}function Xe(e){let{links:t}=e;return function(e){return"title"in e[0]}(t)?(0,u.jsx)(Qe,{columns:t}):(0,u.jsx)(Je,{links:t})}var et=n(2882);const tt={footerLogoLink:"footerLogoLink_iVIB"};function nt(e){let{logo:t}=e;const{withBaseUrl:n}=(0,J.hH)(),r={light:n(t.src),dark:n(t.srcDark??t.src)};return(0,u.jsx)(et.A,{className:(0,o.A)("footer__logo",t.className),alt:t.alt,sources:r,width:t.width,height:t.height,style:t.style})}function rt(e){let{logo:t}=e;return t.href?(0,u.jsx)(Z.A,{href:t.href,className:tt.footerLogoLink,target:t.target,children:(0,u.jsx)(nt,{logo:t})}):(0,u.jsx)(nt,{logo:t})}function ot(e){let{copyright:t}=e;return(0,u.jsx)("div",{className:"footer__copyright",dangerouslySetInnerHTML:{__html:t}})}function at(e){let{style:t,links:n,logo:r,copyright:a}=e;return(0,u.jsx)("footer",{className:(0,o.A)("footer",{"footer--dark":"dark"===t}),children:(0,u.jsxs)("div",{className:"container container-fluid",children:[n,(r||a)&&(0,u.jsxs)("div",{className:"footer__bottom text--center",children:[r&&(0,u.jsx)("div",{className:"margin-bottom--sm",children:r}),a]})]})})}function it(){const{footer:e}=(0,k.p)();if(!e)return null;const{copyright:t,links:n,logo:r,style:o}=e;return(0,u.jsx)(at,{style:o,links:n&&n.length>0&&(0,u.jsx)(Xe,{links:n}),logo:r&&(0,u.jsx)(rt,{logo:r}),copyright:t&&(0,u.jsx)(ot,{copyright:t})})}const st=r.memo(it),lt=(0,N.fM)([F.a,w.o,P.Tv,Se.VQ,i.Jx,function(e){let{children:t}=e;return(0,u.jsx)(R.y_,{children:(0,u.jsx)(j.e,{children:(0,u.jsx)(O,{children:t})})})}]);function ct(e){let{children:t}=e;return(0,u.jsx)(lt,{children:t})}var ut=n(5282);function dt(e){let{error:t,tryAgain:n}=e;return(0,u.jsx)("main",{className:"container margin-vert--xl",children:(0,u.jsx)("div",{className:"row",children:(0,u.jsxs)("div",{className:"col col--6 col--offset-3",children:[(0,u.jsx)(ut.A,{as:"h1",className:"hero__title",children:(0,u.jsx)(l.A,{id:"theme.ErrorPageContent.title",description:"The title of the fallback page when the page crashed",children:"This page crashed."})}),(0,u.jsx)("div",{className:"margin-vert--lg",children:(0,u.jsx)(Ie,{onClick:n,className:"button button--primary shadow--lw"})}),(0,u.jsx)("hr",{}),(0,u.jsx)("div",{className:"margin-vert--md",children:(0,u.jsx)(De,{error:t})})]})})})}const pt={mainWrapper:"mainWrapper_Uk45"};function ft(e){const{children:t,noFooter:n,wrapperClassName:r,title:s,description:l}=e;return(0,g.J)(),(0,u.jsxs)(ct,{children:[(0,u.jsx)(i.be,{title:s,description:l}),(0,u.jsx)(v,{}),(0,u.jsx)(A,{}),(0,u.jsx)(He,{}),(0,u.jsx)("div",{id:d,className:(0,o.A)(b.G.wrapper.main,pt.mainWrapper,r),children:(0,u.jsx)(a.A,{fallback:e=>(0,u.jsx)(dt,{...e}),children:t})}),!n&&(0,u.jsx)(st,{})]})}},7e3:(e,t,n)=>{"use strict";n.d(t,{A:()=>u});n(4382);var r=n(1074),o=n(2941),a=n(1222),i=n(7141),s=n(2882),l=n(6206);function c(e){let{logo:t,alt:n,imageClassName:r}=e;const a={light:(0,o.Ay)(t.src),dark:(0,o.Ay)(t.srcDark||t.src)},i=(0,l.jsx)(s.A,{className:t.className,sources:a,height:t.height,width:t.width,alt:n,style:t.style});return r?(0,l.jsx)("div",{className:r,children:i}):i}function u(e){const{siteConfig:{title:t}}=(0,a.A)(),{navbar:{title:n,logo:s}}=(0,i.p)(),{imageClassName:u,titleClassName:d,...p}=e,f=(0,o.Ay)(s?.href||"/"),m=n?"":t,h=s?.alt??m;return(0,l.jsxs)(r.A,{to:f,...p,...s?.target&&{target:s.target},children:[s&&(0,l.jsx)(c,{logo:s,alt:h,imageClassName:u}),null!=n&&(0,l.jsx)("b",{className:d,children:n})]})}},8078:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});n(4382);var r=n(4152),o=n(6206);function a(e){let{locale:t,version:n,tag:a}=e;const i=t;return(0,o.jsxs)(r.A,{children:[t&&(0,o.jsx)("meta",{name:"docusaurus_locale",content:t}),n&&(0,o.jsx)("meta",{name:"docusaurus_version",content:n}),a&&(0,o.jsx)("meta",{name:"docusaurus_tag",content:a}),i&&(0,o.jsx)("meta",{name:"docsearch:language",content:i}),n&&(0,o.jsx)("meta",{name:"docsearch:version",content:n}),a&&(0,o.jsx)("meta",{name:"docsearch:docusaurus_tag",content:a})]})}},2882:(e,t,n)=>{"use strict";n.d(t,{A:()=>u});var r=n(4382),o=n(7164),a=n(3555),i=n(2630);const s={themedComponent:"themedComponent_onxl","themedComponent--light":"themedComponent--light_Lh0l","themedComponent--dark":"themedComponent--dark_V94v"};var l=n(6206);function c(e){let{className:t,children:n}=e;const c=(0,a.A)(),{colorMode:u}=(0,i.G)();return(0,l.jsx)(l.Fragment,{children:(c?"dark"===u?["dark"]:["light"]:["light","dark"]).map((e=>{const a=n({theme:e,className:(0,o.A)(t,s.themedComponent,s[`themedComponent--${e}`])});return(0,l.jsx)(r.Fragment,{children:a},e)}))})}function u(e){const{sources:t,className:n,alt:r,...o}=e;return(0,l.jsx)(c,{className:n,children:e=>{let{theme:n,className:a}=e;return(0,l.jsx)("img",{src:t[n],alt:r,className:a,...o})}})}},8445:(e,t,n)=>{"use strict";n.d(t,{N:()=>g,u:()=>c});var r=n(4382),o=n(3555),a=n(8705),i=n(9574),s=n(6206);const l="ease-in-out";function c(e){let{initialState:t}=e;const[n,o]=(0,r.useState)(t??!1),a=(0,r.useCallback)((()=>{o((e=>!e))}),[]);return{collapsed:n,setCollapsed:o,toggleCollapsed:a}}const u={display:"none",overflow:"hidden",height:"0px"},d={display:"block",overflow:"visible",height:"auto"};function p(e,t){const n=t?u:d;e.style.display=n.display,e.style.overflow=n.overflow,e.style.height=n.height}function f(e){let{collapsibleRef:t,collapsed:n,animation:o}=e;const a=(0,r.useRef)(!1);(0,r.useEffect)((()=>{const e=t.current;function r(){const t=e.scrollHeight,n=o?.duration??function(e){if((0,i.O)())return 1;const t=e/36;return Math.round(10*(4+15*t**.25+t/5))}(t);return{transition:`height ${n}ms ${o?.easing??l}`,height:`${t}px`}}function s(){const t=r();e.style.transition=t.transition,e.style.height=t.height}if(!a.current)return p(e,n),void(a.current=!0);return e.style.willChange="height",function(){const t=requestAnimationFrame((()=>{n?(s(),requestAnimationFrame((()=>{e.style.height=u.height,e.style.overflow=u.overflow}))):(e.style.display="block",requestAnimationFrame((()=>{s()})))}));return()=>cancelAnimationFrame(t)}()}),[t,n,o])}function m(e){let{collapsed:t,isBrowser:n}=e;if(!n)return t?u:d}function h(e){let{as:t="div",collapsed:n,children:a,animation:i,onCollapseTransitionEnd:l,className:c,disableSSRStyle:u}=e;const d=(0,o.A)(),h=(0,r.useRef)(null);return f({collapsibleRef:h,collapsed:n,animation:i}),(0,s.jsx)(t,{ref:h,style:u?void 0:m({collapsed:n,isBrowser:d}),onTransitionEnd:e=>{"height"===e.propertyName&&(p(h.current,n),l?.(n))},className:c,children:a})}function b(e){let{collapsed:t,...n}=e;const[o,i]=(0,r.useState)(!t),[l,c]=(0,r.useState)(t);return(0,a.A)((()=>{t||i(!0)}),[t]),(0,a.A)((()=>{o&&c(t)}),[o,t]),o?(0,s.jsx)(h,{...n,collapsed:l}):null}function g(e){let{lazy:t,...n}=e;const r=t?b:h;return(0,s.jsx)(r,{...n})}},9354:(e,t,n)=>{"use strict";n.d(t,{M:()=>h,o:()=>m});var r=n(4382),o=n(3555),a=n(733),i=n(7767),s=n(7141),l=n(6206);const c=(0,a.Wf)("docusaurus.announcement.dismiss"),u=(0,a.Wf)("docusaurus.announcement.id"),d=()=>"true"===c.get(),p=e=>c.set(String(e)),f=r.createContext(null);function m(e){let{children:t}=e;const n=function(){const{announcementBar:e}=(0,s.p)(),t=(0,o.A)(),[n,a]=(0,r.useState)((()=>!!t&&d()));(0,r.useEffect)((()=>{a(d())}),[]);const i=(0,r.useCallback)((()=>{p(!0),a(!0)}),[]);return(0,r.useEffect)((()=>{if(!e)return;const{id:t}=e;let n=u.get();"annoucement-bar"===n&&(n="announcement-bar");const r=t!==n;u.set(t),r&&p(!1),!r&&d()||a(!1)}),[e]),(0,r.useMemo)((()=>({isActive:!!e&&!n,close:i})),[e,n,i])}();return(0,l.jsx)(f.Provider,{value:n,children:t})}function h(){const e=(0,r.useContext)(f);if(!e)throw new i.dV("AnnouncementBarProvider");return e}},2630:(e,t,n)=>{"use strict";n.d(t,{G:()=>g,a:()=>b});var r=n(4382),o=n(6949),a=n(7767),i=n(733),s=n(7141),l=n(6206);const c=r.createContext(void 0),u="theme",d=(0,i.Wf)(u),p={light:"light",dark:"dark"},f=e=>e===p.dark?p.dark:p.light,m=e=>o.A.canUseDOM?f(document.documentElement.getAttribute("data-theme")):f(e),h=e=>{d.set(f(e))};function b(e){let{children:t}=e;const n=function(){const{colorMode:{defaultMode:e,disableSwitch:t,respectPrefersColorScheme:n}}=(0,s.p)(),[o,a]=(0,r.useState)(m(e));(0,r.useEffect)((()=>{t&&d.del()}),[t]);const i=(0,r.useCallback)((function(t,r){void 0===r&&(r={});const{persist:o=!0}=r;t?(a(t),o&&h(t)):(a(n?window.matchMedia("(prefers-color-scheme: dark)").matches?p.dark:p.light:e),d.del())}),[n,e]);(0,r.useEffect)((()=>{document.documentElement.setAttribute("data-theme",f(o))}),[o]),(0,r.useEffect)((()=>{if(t)return;const e=e=>{if(e.key!==u)return;const t=d.get();null!==t&&i(f(t))};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)}),[t,i]);const l=(0,r.useRef)(!1);return(0,r.useEffect)((()=>{if(t&&!n)return;const e=window.matchMedia("(prefers-color-scheme: dark)"),r=()=>{window.matchMedia("print").matches||l.current?l.current=window.matchMedia("print").matches:i(null)};return e.addListener(r),()=>e.removeListener(r)}),[i,t,n]),(0,r.useMemo)((()=>({colorMode:o,setColorMode:i,get isDarkTheme(){return o===p.dark},setLightTheme(){i(p.light)},setDarkTheme(){i(p.dark)}})),[o,i])}();return(0,l.jsx)(c.Provider,{value:n,children:t})}function g(){const e=(0,r.useContext)(c);if(null==e)throw new a.dV("ColorModeProvider","Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.");return e}},4826:(e,t,n)=>{"use strict";n.d(t,{e:()=>f,M:()=>m});var r=n(4382),o=n(7043),a=n(8464),i=n(96),s=n(7767);function l(e){!function(e){const t=(0,i.W6)(),n=(0,s._q)(e);(0,r.useEffect)((()=>t.block(((e,t)=>n(e,t)))),[t,n])}(((t,n)=>{if("POP"===n)return e(t,n)}))}var c=n(7141),u=n(6206);const d=r.createContext(void 0);function p(){const e=function(){const e=(0,o.YL)(),{items:t}=(0,c.p)().navbar;return 0===t.length&&!e.component}(),t=(0,a.l)(),n=!e&&"mobile"===t,[i,s]=(0,r.useState)(!1);l((()=>{if(i)return s(!1),!1}));const u=(0,r.useCallback)((()=>{s((e=>!e))}),[]);return(0,r.useEffect)((()=>{"desktop"===t&&s(!1)}),[t]),(0,r.useMemo)((()=>({disabled:e,shouldRender:n,toggle:u,shown:i})),[e,n,u,i])}function f(e){let{children:t}=e;const n=p();return(0,u.jsx)(d.Provider,{value:n,children:t})}function m(){const e=r.useContext(d);if(void 0===e)throw new s.dV("NavbarMobileSidebarProvider");return e}},7043:(e,t,n)=>{"use strict";n.d(t,{GX:()=>c,YL:()=>l,y_:()=>s});var r=n(4382),o=n(7767),a=n(6206);const i=r.createContext(null);function s(e){let{children:t}=e;const n=(0,r.useState)({component:null,props:null});return(0,a.jsx)(i.Provider,{value:n,children:t})}function l(){const e=(0,r.useContext)(i);if(!e)throw new o.dV("NavbarSecondaryMenuContentProvider");return e[0]}function c(e){let{component:t,props:n}=e;const a=(0,r.useContext)(i);if(!a)throw new o.dV("NavbarSecondaryMenuContentProvider");const[,s]=a,l=(0,o.Be)(n);return(0,r.useEffect)((()=>{s({component:t,props:l})}),[s,t,l]),(0,r.useEffect)((()=>()=>s({component:null,props:null})),[s]),null}},9054:(e,t,n)=>{"use strict";n.d(t,{w:()=>o,J:()=>a});var r=n(4382);const o="navigation-with-keyboard";function a(){(0,r.useEffect)((()=>{function e(e){"keydown"===e.type&&"Tab"===e.key&&document.body.classList.add(o),"mousedown"===e.type&&document.body.classList.remove(o)}return document.addEventListener("keydown",e),document.addEventListener("mousedown",e),()=>{document.body.classList.remove(o),document.removeEventListener("keydown",e),document.removeEventListener("mousedown",e)}}),[])}},8464:(e,t,n)=>{"use strict";n.d(t,{l:()=>s});var r=n(4382),o=n(6949);const a={desktop:"desktop",mobile:"mobile",ssr:"ssr"},i=996;function s(e){let{desktopBreakpoint:t=i}=void 0===e?{}:e;const[n,s]=(0,r.useState)((()=>"ssr"));return(0,r.useEffect)((()=>{function e(){s(function(e){if(!o.A.canUseDOM)throw new Error("getWindowSize() should only be called after React hydration");return window.innerWidth>e?a.desktop:a.mobile}(t))}return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[t]),n}},3070:(e,t,n)=>{"use strict";n.d(t,{G:()=>r});const r={page:{blogListPage:"blog-list-page",blogPostPage:"blog-post-page",blogTagsListPage:"blog-tags-list-page",blogTagPostListPage:"blog-tags-post-list-page",blogAuthorsListPage:"blog-authors-list-page",blogAuthorsPostsPage:"blog-authors-posts-page",docsDocPage:"docs-doc-page",docsTagsListPage:"docs-tags-list-page",docsTagDocListPage:"docs-tags-doc-list-page",mdxPage:"mdx-page"},wrapper:{main:"main-wrapper",blogPages:"blog-wrapper",docsPages:"docs-wrapper",mdxPages:"mdx-wrapper"},common:{editThisPage:"theme-edit-this-page",lastUpdated:"theme-last-updated",backToTopButton:"theme-back-to-top-button",codeBlock:"theme-code-block",admonition:"theme-admonition",unlistedBanner:"theme-unlisted-banner",draftBanner:"theme-draft-banner",admonitionType:e=>`theme-admonition-${e}`},layout:{},docs:{docVersionBanner:"theme-doc-version-banner",docVersionBadge:"theme-doc-version-badge",docBreadcrumbs:"theme-doc-breadcrumbs",docMarkdown:"theme-doc-markdown",docTocMobile:"theme-doc-toc-mobile",docTocDesktop:"theme-doc-toc-desktop",docFooter:"theme-doc-footer",docFooterTagsRow:"theme-doc-footer-tags-row",docFooterEditMetaRow:"theme-doc-footer-edit-meta-row",docSidebarContainer:"theme-doc-sidebar-container",docSidebarMenu:"theme-doc-sidebar-menu",docSidebarItemCategory:"theme-doc-sidebar-item-category",docSidebarItemLink:"theme-doc-sidebar-item-link",docSidebarItemCategoryLevel:e=>`theme-doc-sidebar-item-category-level-${e}`,docSidebarItemLinkLevel:e=>`theme-doc-sidebar-item-link-level-${e}`},blog:{blogFooterTagsRow:"theme-blog-footer-tags-row",blogFooterEditMetaRow:"theme-blog-footer-edit-meta-row"},pages:{pageFooterEditMetaRow:"theme-pages-footer-edit-meta-row"}}},9574:(e,t,n)=>{"use strict";function r(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}n.d(t,{O:()=>r})},2538:(e,t,n)=>{"use strict";n.d(t,{e3:()=>f,be:()=>d,Jx:()=>m});var r=n(4382),o=n(7164),a=n(4152),i=n(5474);function s(){const e=r.useContext(i.o);if(!e)throw new Error("Unexpected: no Docusaurus route context found");return e}var l=n(2941),c=n(1222);var u=n(6206);function d(e){let{title:t,description:n,keywords:r,image:o,children:i}=e;const s=function(e){const{siteConfig:t}=(0,c.A)(),{title:n,titleDelimiter:r}=t;return e?.trim().length?`${e.trim()} ${r} ${n}`:n}(t),{withBaseUrl:d}=(0,l.hH)(),p=o?d(o,{absolute:!0}):void 0;return(0,u.jsxs)(a.A,{children:[t&&(0,u.jsx)("title",{children:s}),t&&(0,u.jsx)("meta",{property:"og:title",content:s}),n&&(0,u.jsx)("meta",{name:"description",content:n}),n&&(0,u.jsx)("meta",{property:"og:description",content:n}),r&&(0,u.jsx)("meta",{name:"keywords",content:Array.isArray(r)?r.join(","):r}),p&&(0,u.jsx)("meta",{property:"og:image",content:p}),p&&(0,u.jsx)("meta",{name:"twitter:image",content:p}),i]})}const p=r.createContext(void 0);function f(e){let{className:t,children:n}=e;const i=r.useContext(p),s=(0,o.A)(i,t);return(0,u.jsxs)(p.Provider,{value:s,children:[(0,u.jsx)(a.A,{children:(0,u.jsx)("html",{className:s})}),n]})}function m(e){let{children:t}=e;const n=s(),r=`plugin-${n.plugin.name.replace(/docusaurus-(?:plugin|theme)-(?:content-)?/gi,"")}`;const a=`plugin-id-${n.plugin.id}`;return(0,u.jsx)(f,{className:(0,o.A)(r,a),children:t})}},7767:(e,t,n)=>{"use strict";n.d(t,{Be:()=>c,ZC:()=>s,_q:()=>i,dV:()=>l,fM:()=>u});var r=n(4382),o=n(8705),a=n(6206);function i(e){const t=(0,r.useRef)(e);return(0,o.A)((()=>{t.current=e}),[e]),(0,r.useCallback)((function(){return t.current(...arguments)}),[])}function s(e){const t=(0,r.useRef)();return(0,o.A)((()=>{t.current=e})),t.current}class l extends Error{constructor(e,t){super(),this.name="ReactContextError",this.message=`Hook ${this.stack?.split("\n")[1]?.match(/at (?:\w+\.)?(?\w+)/)?.groups.name??""} is called outside the <${e}>. ${t??""}`}}function c(e){const t=Object.entries(e);return t.sort(((e,t)=>e[0].localeCompare(t[0]))),(0,r.useMemo)((()=>e),t.flat())}function u(e){return t=>{let{children:n}=t;return(0,a.jsx)(a.Fragment,{children:e.reduceRight(((e,t)=>(0,a.jsx)(t,{children:e})),n)})}}},1052:(e,t,n)=>{"use strict";n.d(t,{Dt:()=>s,ys:()=>i});var r=n(4382),o=n(5756),a=n(1222);function i(e,t){const n=e=>(!e||e.endsWith("/")?e:`${e}/`)?.toLowerCase();return n(e)===n(t)}function s(){const{baseUrl:e}=(0,a.A)().siteConfig;return(0,r.useMemo)((()=>function(e){let{baseUrl:t,routes:n}=e;function r(e){return e.path===t&&!0===e.exact}function o(e){return e.path===t&&!e.exact}return function e(t){if(0===t.length)return;return t.find(r)||e(t.filter(o).flatMap((e=>e.routes??[])))}(n)}({routes:o.A,baseUrl:e})),[e])}},9341:(e,t,n)=>{"use strict";n.d(t,{Mq:()=>p,Tv:()=>c,gk:()=>f});var r=n(4382),o=n(6949),a=n(3555),i=(n(8705),n(7767)),s=n(6206);const l=r.createContext(void 0);function c(e){let{children:t}=e;const n=function(){const e=(0,r.useRef)(!0);return(0,r.useMemo)((()=>({scrollEventsEnabledRef:e,enableScrollEvents:()=>{e.current=!0},disableScrollEvents:()=>{e.current=!1}})),[])}();return(0,s.jsx)(l.Provider,{value:n,children:t})}function u(){const e=(0,r.useContext)(l);if(null==e)throw new i.dV("ScrollControllerProvider");return e}const d=()=>o.A.canUseDOM?{scrollX:window.pageXOffset,scrollY:window.pageYOffset}:null;function p(e,t){void 0===t&&(t=[]);const{scrollEventsEnabledRef:n}=u(),o=(0,r.useRef)(d()),a=(0,i._q)(e);(0,r.useEffect)((()=>{const e=()=>{if(!n.current)return;const e=d();a(e,o.current),o.current=e},t={passive:!0};return e(),window.addEventListener("scroll",e,t),()=>window.removeEventListener("scroll",e,t)}),[a,n,...t])}function f(){const e=(0,r.useRef)(null),t=(0,a.A)()&&"smooth"===getComputedStyle(document.documentElement).scrollBehavior;return{startScroll:n=>{e.current=t?function(e){return window.scrollTo({top:e,behavior:"smooth"}),()=>{}}(n):function(e){let t=null;const n=document.documentElement.scrollTop>e;return function r(){const o=document.documentElement.scrollTop;(n&&o>e||!n&&ot&&cancelAnimationFrame(t)}(n)},cancelScroll:()=>e.current?.()}}},733:(e,t,n)=>{"use strict";n.d(t,{Wf:()=>c});n(4382);const r=JSON.parse('{"N":"localStorage","M":""}'),o=r.N;function a(e){let{key:t,oldValue:n,newValue:r,storage:o}=e;if(n===r)return;const a=document.createEvent("StorageEvent");a.initStorageEvent("storage",!1,!1,t,n,r,window.location.href,o),window.dispatchEvent(a)}function i(e){if(void 0===e&&(e=o),"undefined"==typeof window)throw new Error("Browser storage is not available on Node.js/Docusaurus SSR process.");if("none"===e)return null;try{return window[e]}catch(n){return t=n,s||(console.warn("Docusaurus browser storage is not available.\nPossible reasons: running Docusaurus in an iframe, in an incognito browser session, or using too strict browser privacy settings.",t),s=!0),null}var t}let s=!1;const l={get:()=>null,set:()=>{},del:()=>{},listen:()=>()=>{}};function c(e,t){const n=`${e}${r.M}`;if("undefined"==typeof window)return function(e){function t(){throw new Error(`Illegal storage API usage for storage key "${e}".\nDocusaurus storage APIs are not supposed to be called on the server-rendering process.\nPlease only call storage APIs in effects and event handlers.`)}return{get:t,set:t,del:t,listen:t}}(n);const o=i(t?.persistence);return null===o?l:{get:()=>{try{return o.getItem(n)}catch(e){return console.error(`Docusaurus storage error, can't get key=${n}`,e),null}},set:e=>{try{const t=o.getItem(n);o.setItem(n,e),a({key:n,oldValue:t,newValue:e,storage:o})}catch(t){console.error(`Docusaurus storage error, can't set ${n}=${e}`,t)}},del:()=>{try{const e=o.getItem(n);o.removeItem(n),a({key:n,oldValue:e,newValue:null,storage:o})}catch(e){console.error(`Docusaurus storage error, can't delete key=${n}`,e)}},listen:e=>{try{const t=t=>{t.storageArea===o&&t.key===n&&e(t)};return window.addEventListener("storage",t),()=>window.removeEventListener("storage",t)}catch(t){return console.error(`Docusaurus storage error, can't listen for changes of key=${n}`,t),()=>{}}}}}},4282:(e,t,n)=>{"use strict";n.d(t,{o:()=>i});var r=n(1222),o=n(96),a=n(1587);function i(){const{siteConfig:{baseUrl:e,url:t,trailingSlash:n},i18n:{defaultLocale:i,currentLocale:s}}=(0,r.A)(),{pathname:l}=(0,o.zy)(),c=(0,a.Ks)(l,{trailingSlash:n,baseUrl:e}),u=s===i?e:e.replace(`/${s}/`,"/"),d=c.replace(e,"");return{createUrl:function(e){let{locale:n,fullyQualified:r}=e;return`${r?t:""}${function(e){return e===i?`${u}`:`${u}${e}/`}(n)}${d}`}}}},4571:(e,t,n)=>{"use strict";n.d(t,{$:()=>i});var r=n(4382),o=n(96),a=n(7767);function i(e){const t=(0,o.zy)(),n=(0,a.ZC)(t),i=(0,a._q)(e);(0,r.useEffect)((()=>{n&&t!==n&&i({location:t,previousLocation:n})}),[i,t,n])}},7141:(e,t,n)=>{"use strict";n.d(t,{p:()=>o});var r=n(1222);function o(){return(0,r.A)().siteConfig.themeConfig}},6130:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addTrailingSlash=o,t.default=function(e,t){const{trailingSlash:n,baseUrl:r}=t;if(e.startsWith("#"))return e;if(void 0===n)return e;const[i]=e.split(/[#?]/),s="/"===i||i===r?i:(l=i,c=n,c?o(l):a(l));var l,c;return e.replace(i,s)},t.addLeadingSlash=function(e){return(0,r.addPrefix)(e,"/")},t.removeTrailingSlash=a;const r=n(5565);function o(e){return e.endsWith("/")?e:`${e}/`}function a(e){return(0,r.removeSuffix)(e,"/")}},9040:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=function e(t){if(t.cause)return[t,...e(t.cause)];return[t]}},1587:(e,t,n)=>{"use strict";t.rA=t.Ks=void 0;const r=n(6770);var o=n(6130);Object.defineProperty(t,"Ks",{enumerable:!0,get:function(){return r.__importDefault(o).default}});var a=n(5565);var i=n(9040);Object.defineProperty(t,"rA",{enumerable:!0,get:function(){return i.getErrorCausalChain}})},5565:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addPrefix=function(e,t){return e.startsWith(t)?e:`${t}${e}`},t.removeSuffix=function(e,t){if(""===t)return e;return e.endsWith(t)?e.slice(0,-t.length):e},t.addSuffix=function(e,t){return e.endsWith(t)?e:`${e}${t}`},t.removePrefix=function(e,t){return e.startsWith(t)?e.slice(t.length):e}},5756:(e,t,n)=>{"use strict";n.d(t,{A:()=>p});n(4382);var r=n(5036),o=n.n(r),a=n(4054);const i={"0145a656":[()=>n.e(5799).then(n.bind(n,2377)),"@site/docs/react/hooks/useImageStatus.mdx",2377],"0468e7c7":[()=>n.e(5951).then(n.bind(n,8391)),"@site/docs/react/hooks/useDependencyTimeout.mdx",8391],"055c623c":[()=>n.e(8684).then(n.bind(n,6006)),"@site/docs/utils/common/delay.md",6006],"069bf6ce":[()=>n.e(4676).then(n.bind(n,749)),"@site/docs/react/hooks/useBeforeUnload.mdx",749],"087cca41":[()=>n.e(7168).then(n.bind(n,555)),"@site/docs/react/hooks/useLocalStorage.mdx",555],"0ac9f023":[()=>n.e(7933).then(n.bind(n,2302)),"@site/docs/utils/validator/isNumber.md",2302],"0d5e1e85":[()=>n.e(1694).then(n.bind(n,8143)),"@site/docs/utils/array/contains.md",8143],"0d7f7655":[()=>n.e(3821).then(n.bind(n,9179)),"@site/docs/utils/clipboard/copyClipboardImage.md",9179],"0ed4549e":[()=>n.e(9647).then(n.bind(n,2166)),"@site/docs/react/hooks/useSessionStorage.mdx",2166],"10b17783":[()=>n.e(6382).then(n.bind(n,194)),"@site/docs/utils/string/serialize.md",194],"114d5267":[()=>n.e(2705).then(n.bind(n,8310)),"@site/docs/utils/object/omit.md",8310],"11738f66":[()=>n.e(6021).then(n.bind(n,7424)),"@site/docs/react/hooks/useResizeObserver.mdx",7424],"11aa0540":[()=>n.e(7034).then(n.bind(n,2667)),"@site/docs/utils/array/fill.md",2667],"13eb7aa0":[()=>n.e(9125).then(n.bind(n,5487)),"@site/docs/utils/validator/isValidEmail.md",5487],17896441:[()=>Promise.all([n.e(1869),n.e(8401)]).then(n.bind(n,3075)),"@theme/DocItem",3075],"1b715083":[()=>n.e(9062).then(n.bind(n,2714)),"@site/docs/utils/array/swap.md",2714],"1c14d10f":[()=>n.e(5883).then(n.bind(n,3545)),"@site/docs/utils/clipboard/copyClipboardText.md",3545],"1c2388cf":[()=>n.e(8933).then(n.bind(n,3038)),"@site/docs/react/components/SeparatedIterator.mdx",3038],"1df93b7f":[()=>Promise.all([n.e(1869),n.e(4583)]).then(n.bind(n,4738)),"@site/src/pages/index.tsx",4738],"1ebcacad":[()=>n.e(1623).then(n.bind(n,4872)),"@site/docs/react/hooks/useStepState.mdx",4872],"219c5550":[()=>n.e(4541).then(n.bind(n,6098)),"@site/docs/utils/object/objectValues.md",6098],"225c6dfe":[()=>n.e(8034).then(n.bind(n,8177)),"@site/docs/react/hooks/useMouse.mdx",8177],"24c74d07":[()=>n.e(8440).then(n.bind(n,9690)),"@site/docs/react/components/FallbackLazyImage.mdx",9690],"295f1714":[()=>n.e(8310).then(n.bind(n,1826)),"@site/docs/react/hooks/useHover.mdx",1826],"2c3bc9ae":[()=>n.e(3475).then(n.bind(n,1091)),"@site/docs/utils/date/isUnderAge.md",1091],"2eff3e5b":[()=>n.e(9053).then(n.bind(n,8052)),"@site/docs/react/hooks/useToggle.mdx",8052],"308b5f81":[()=>n.e(3600).then(n.bind(n,4509)),"@site/docs/react/hooks/useIntersectionObserver.mdx",4509],"3354f11f":[()=>n.e(9604).then(n.bind(n,5788)),"@site/docs/utils/array/forEachRight.md",5788],"35d6937f":[()=>n.e(4170).then(n.bind(n,758)),"@site/docs/utils/array/xor.md",758],"36bebd15":[()=>n.e(3171).then(n.bind(n,9556)),"@site/docs/react/components/DebounceHandler.mdx",9556],"3842c52b":[()=>n.e(84).then(n.bind(n,9983)),"@site/docs/react/hooks/usePreservedCallback.mdx",9983],"393b1e48":[()=>n.e(5102).then(n.bind(n,7883)),"@site/docs/utils/array/take.md",7883],"3a913ae5":[()=>n.e(7775).then(n.bind(n,2799)),"@site/docs/utils/array/flattenDeep.md",2799],"3bdef6d7":[()=>n.e(2786).then(n.bind(n,4123)),"@site/docs/react/hooks/useDebouncedState.mdx",4123],"3c17568f":[()=>n.e(7098).then(n.bind(n,3628)),"@site/docs/react/hooks/useIsMounted.mdx",3628],"3c9c350b":[()=>n.e(9531).then(n.bind(n,7837)),"@site/docs/utils/file/getMIMETypeFromFile.md",7837],"3e5d9272":[()=>n.e(7138).then(n.bind(n,7970)),"@site/docs/react/components/InfiniteScroll.mdx",7970],"3f06ea3e":[()=>n.e(8292).then(n.bind(n,5741)),"@site/docs/utils/formatter/formatValueWithSymbol.md",5741],"40a66591":[()=>n.e(2871).then(n.bind(n,7650)),"@site/docs/utils/clipboard/copyFallbackClipboardText.md",7650],"429e0383":[()=>n.e(7619).then(n.bind(n,3847)),"@site/docs/utils/validator/isPromise.md",3847],"42a77533":[()=>n.e(9539).then(n.bind(n,5589)),"@site/docs/react/hooks/useOutsidePointerDown.mdx",5589],"42f2960f":[()=>n.e(4778).then(n.bind(n,1902)),"@site/docs/react/hooks/useFileReader.mdx",1902],47707012:[()=>n.e(9493).then(n.bind(n,2713)),"@site/docs/utils/object/objectEntries.md",2713],"48bf7dd7":[()=>n.e(2001).then(n.bind(n,5477)),"@site/docs/utils/file/convertImageToBlob.md",5477],"4b82cf1d":[()=>n.e(5111).then(n.bind(n,2836)),"@site/docs/utils/object/findLastKey.md",2836],"4bcec4df":[()=>n.e(1002).then(n.bind(n,1195)),"@site/docs/utils/object/mapKeys.md",1195],"4ef284f1":[()=>n.e(1753).then(n.bind(n,3970)),"@site/docs/utils/validator/isValidPassword.md",3970],"4fcbd706":[()=>n.e(3795).then(n.bind(n,5473)),"@site/docs/utils/string/repeatCharacters.md",5473],"4ff767ba":[()=>n.e(978).then(n.bind(n,2532)),"@site/docs/utils/date/isDateInRange.md",2532],"525bfb2e":[()=>n.e(5728).then(n.bind(n,407)),"@site/docs/utils/common/getViewportSize.md",407],"53f54fd5":[()=>n.e(3723).then(n.bind(n,9350)),"@site/docs/utils/common/abRandom.md",9350],"54102c04":[()=>n.e(5170).then(n.bind(n,98)),"@site/docs/react/components/LazyImage.mdx",98],"55b9fde3":[()=>n.e(8844).then(n.bind(n,1694)),"@site/docs/utils/style/formatSizeStyleValue.md",1694],"5755dd50":[()=>n.e(142).then(n.bind(n,3241)),"@site/docs/utils/math/range.md",3241],"5ba0edd1":[()=>n.e(9911).then(n.bind(n,7165)),"@site/docs/utils/clipboard/readClipboardText.md",7165],"5c9b0204":[()=>n.e(3364).then(n.bind(n,2438)),"@site/docs/utils/object/pick.md",2438],"5cdabd8b":[()=>n.e(7182).then(n.bind(n,7092)),"@site/docs/utils/string/removeSpecialCharacters.md",7092],"5d610355":[()=>n.e(3118).then(n.bind(n,3329)),"@site/docs/react/hooks/useInterval.mdx",3329],"5e95c892":[()=>n.e(2028).then(n.bind(n,9952)),"@theme/DocsRoot",9952],"5e9f5e1a":[()=>Promise.resolve().then(n.bind(n,4784)),"@generated/docusaurus.config",4784],"5ee3188a":[()=>n.e(3147).then(n.bind(n,6541)),"@site/docs/utils/date/isAfterDate.md",6541],"60125e6a":[()=>n.e(4901).then(n.bind(n,2911)),"@site/docs/utils/array/groupBy.md",2911],"602e080a":[()=>n.e(1375).then(n.bind(n,3842)),"@site/docs/utils/common/once.md",3842],"607b29e9":[()=>n.e(7211).then(n.bind(n,9632)),"@site/docs/utils/validator/isNotNil.md",9632],"61a35b61":[()=>n.e(1450).then(n.bind(n,5576)),"@site/docs/react/hooks/useMediaQuery.mdx",5576],"63b1b2d9":[()=>n.e(5064).then(n.bind(n,8049)),"@site/docs/utils/array/flattenDeepThenMap.md",8049],"63f47a7c":[()=>n.e(6558).then(n.bind(n,2932)),"@site/docs/react/hooks/useEventListener.mdx",2932],"67c089fb":[()=>n.e(4146).then(n.bind(n,5271)),"@site/docs/react/hooks/useDebounce.mdx",5271],"67c0cc0e":[()=>n.e(6712).then(n.bind(n,5658)),"@site/docs/react/hooks/useScrollTo.mdx",5658],"680e390c":[()=>n.e(1079).then(n.bind(n,9534)),"@site/docs/utils/object/findKey.md",9534],"696f779e":[()=>n.e(340).then(n.bind(n,6177)),"@site/docs/utils/array/intersection.md",6177],"6ac0000c":[()=>n.e(4914).then(n.bind(n,4709)),"@site/docs/utils/object/omitBy.md",4709],"6b7ba1c1":[()=>n.e(4846).then(n.bind(n,4366)),"@site/docs/utils/common/hexToRgba.md",4366],"6bd54dd6":[()=>n.e(5176).then(n.bind(n,2684)),"@site/docs/react/hooks/useVisibilityChange.mdx",2684],"6be53428":[()=>n.e(9658).then(n.bind(n,1157)),"@site/docs/utils/common/parseJSON.md",1157],"6ca9d65c":[()=>n.e(8110).then(n.bind(n,1993)),"@site/docs/utils/validator/isInRange.md",1993],"6dde689d":[()=>n.e(2709).then(n.bind(n,9993)),"@site/docs/react/hooks/useTimeout.mdx",9993],"6f628600":[()=>n.e(2853).then(n.bind(n,1061)),"@site/docs/utils/formatter/formatNumberWithUnits.md",1061],"6ff934e9":[()=>n.e(4479).then(n.bind(n,1706)),"@site/docs/utils/validator/isFloat.md",1706],"704a13c5":[()=>n.e(2571).then(n.bind(n,7005)),"@site/docs/utils/validator/isDate.md",7005],"756dd8a8":[()=>n.e(2738).then(n.bind(n,6695)),"@site/docs/utils/date/isBeforeDate.md",6695],"764f42b2":[()=>n.e(2448).then(n.bind(n,4941)),"@site/docs/react/hooks/useMergeRefs.mdx",4941],"771be322":[()=>n.e(588).then(n.bind(n,5705)),"@site/docs/react/hooks/useDebouncedInputValue.mdx",5705],"787b166d":[()=>n.e(5714).then(n.bind(n,2733)),"@site/docs/utils/file/convertImageToBase64.md",2733],"78bcb238":[()=>n.e(3582).then(n.bind(n,7204)),"@site/docs/react/components/IfElse.mdx",7204],"79b124e2":[()=>n.e(1359).then(n.bind(n,4765)),"@site/docs/utils/clipboard/readClipboardContents.md",4765],"7b61a3fa":[()=>n.e(3912).then(n.bind(n,125)),"@site/docs/react/hooks/useBlockMultipleAsyncCalls.mdx",125],"7b7be0e1":[()=>n.e(2746).then(n.bind(n,1695)),"@site/docs/utils/validator/isEqual.md",1695],"7c664e86":[()=>n.e(5074).then(n.bind(n,6185)),"@site/docs/utils/style/rem.md",6185],"7d279fec":[()=>n.e(4702).then(n.bind(n,9001)),"@site/docs/react/hooks/useForceUpdate.mdx",9001],"7da35ef8":[()=>n.e(6234).then(n.bind(n,4697)),"@site/docs/react/components/Mounted.mdx",4697],"8053496e":[()=>n.e(8313).then(n.bind(n,6933)),"@site/docs/react/components/AspectRatio.mdx",6933],"8079f804":[()=>n.e(7581).then(n.bind(n,2395)),"@site/docs/react/hooks/useCounter.mdx",2395],"80d7edb7":[()=>n.e(7882).then(n.bind(n,4982)),"@site/docs/utils/object/pickBy.md",4982],"80d874f9":[()=>n.e(1997).then(n.bind(n,6622)),"@site/docs/utils/file/getMIMETypeFromUrl.md",6622],"80edd989":[()=>n.e(2424).then(n.bind(n,4230)),"@site/docs/utils/string/extractLetters.md",4230],"81f2ad2e":[()=>n.e(1938).then(n.bind(n,9677)),"@site/docs/utils/array/difference.md",9677],"83b4ba0b":[()=>n.e(1259).then(n.bind(n,4556)),"@site/docs/react/hooks/useColorScheme.mdx",4556],84604114:[()=>n.e(3655).then(n.bind(n,3754)),"@site/docs/utils/validator/hasProperty.md",3754],"851080f9":[()=>n.e(4882).then(n.bind(n,2176)),"@site/docs/utils/validator/isWindow.md",2176],"8797c936":[()=>n.e(5867).then(n.bind(n,8241)),"@site/docs/utils/device/isMobile.md",8241],"8a0a0e72":[()=>n.e(4049).then(n.bind(n,2354)),"@site/docs/utils/array/chunk.md",2354],"8a16b8e9":[()=>n.e(1503).then(n.bind(n,3404)),"@site/docs/react/hooks/useDocumentTitle.mdx",3404],"8c7c483d":[()=>n.e(5671).then(n.bind(n,3244)),"@site/docs/utils/math/min.md",3244],"90aeac69":[()=>n.e(9197).then(n.bind(n,4199)),"@site/docs/react/hooks/usePreservedState.mdx",4199],"90f5246c":[()=>n.e(6128).then(n.bind(n,2950)),"@site/docs/utils/object/deleteEmptyProperties.md",2950],"932b0751":[()=>n.e(9990).then(n.bind(n,485)),"@site/docs/utils/validator/isValidPhoneNumber.md",485],"932ca9ec":[()=>n.e(6748).then(n.bind(n,1368)),"@site/docs/react/hooks/useScrollLock.mdx",1368],"9577a7f6":[()=>n.e(1287).then(n.bind(n,6317)),"@site/docs/utils/math/sum.md",6317],"98f9954c":[()=>n.e(1902).then(n.bind(n,522)),"@site/docs/utils/string/reverseString.md",522],"993de3e1":[()=>n.e(90).then(n.bind(n,2476)),"@site/docs/introduce/Introduce.md",2476],"9be130a4":[()=>n.e(2086).then(n.bind(n,5085)),"@site/docs/react/hooks/usePrevious.mdx",5085],"9e9c0b32":[()=>n.e(5664).then(n.bind(n,7909)),"@site/docs/utils/validator/isFuntion.md",7909],a02492b2:[()=>n.e(9147).then(n.bind(n,3662)),"@site/docs/utils/array/partition.md",3662],a1e26520:[()=>n.e(3761).then(n.bind(n,630)),"@site/docs/utils/array/flatMap.md",630],a3058236:[()=>n.e(4399).then(n.bind(n,9025)),"@site/docs/utils/validator/isBoolean.md",9025],a45fe377:[()=>n.e(8051).then(n.bind(n,1908)),"@site/docs/react/hooks/useCycleList.mdx",1908],a7456010:[()=>n.e(1235).then(n.t.bind(n,8552,19)),"@generated/docusaurus-plugin-content-pages/default/__plugin.json",8552],a7bd4aaa:[()=>n.e(4717).then(n.bind(n,7122)),"@theme/DocVersionRoot",7122],a878cfb6:[()=>n.e(4958).then(n.bind(n,2890)),"@site/docs/utils/common/identity.md",2890],a94703ab:[()=>Promise.all([n.e(1869),n.e(9048)]).then(n.bind(n,8571)),"@theme/DocRoot",8571],a9c6713c:[()=>n.e(844).then(n.bind(n,437)),"@site/docs/utils/math/clamp.md",437],a9d261c7:[()=>n.e(6274).then(n.bind(n,7786)),"@site/docs/utils/object/merge.md",7786],aa089504:[()=>n.e(7867).then(n.bind(n,8483)),"@site/docs/react/hooks/usePreferredColorScheme.mdx",8483],ab7af1d3:[()=>n.e(7930).then(n.bind(n,961)),"@site/docs/react/hooks/useToggleState.mdx",961],aba21aa0:[()=>n.e(5742).then(n.t.bind(n,7093,19)),"@generated/docusaurus-plugin-content-docs/default/__plugin.json",7093],abd7e418:[()=>n.e(1861).then(n.bind(n,5133)),"@site/docs/utils/array/compact.md",5133],ad000c78:[()=>n.e(5242).then(n.bind(n,3853)),"@site/docs/utils/device/isClient.md",3853],ad8813a3:[()=>Promise.all([n.e(9602),n.e(632)]).then(n.bind(n,255)),"@site/docs/react/hooks/useUserAgent.mdx",255],af3233c2:[()=>n.e(1376).then(n.bind(n,3614)),"@site/docs/react/components/Slot.mdx",3614],b1051e9c:[()=>n.e(715).then(n.bind(n,1281)),"@site/docs/utils/math/average.md",1281],b279b717:[()=>n.e(4730).then(n.bind(n,3623)),"@site/docs/utils/file/getMIMEType.md",3623],b35b1276:[()=>n.e(6649).then(n.bind(n,9308)),"@site/docs/react/components/When.mdx",9308],b3bf5b56:[()=>n.e(3110).then(n.bind(n,7464)),"@site/docs/react/hooks/useWindowSize.mdx",7464],b506dfd1:[()=>n.e(1569).then(n.bind(n,8722)),"@site/docs/react/hooks/useFocus.mdx",8722],b743ea75:[()=>n.e(9571).then(n.bind(n,3163)),"@site/docs/react/components/OutsidePointerDownHandler.mdx",3163],b7504c90:[()=>n.e(2817).then(n.bind(n,5154)),"@site/docs/utils/string/countSubstringOccurrences.md",5154],b862475b:[()=>n.e(1075).then(n.bind(n,5399)),"@site/docs/react/hooks/useClipboard.mdx",5399],b8848313:[()=>n.e(6702).then(n.bind(n,3548)),"@site/docs/utils/validator/isPrimitive.md",3548],b9060d98:[()=>n.e(4761).then(n.bind(n,5221)),"@site/docs/utils/array/excludeElements.md",5221],bac0f70c:[()=>n.e(9743).then(n.bind(n,2144)),"@site/docs/utils/string/extractNumber.md",2144],be1b9454:[()=>n.e(9965).then(n.bind(n,712)),"@site/docs/utils/validator/isNil.md",712],bf0dbc92:[()=>n.e(6595).then(n.bind(n,7112)),"@site/docs/react/components/InView.mdx",7112],bfd49d7f:[()=>n.e(8079).then(n.bind(n,5765)),"@site/docs/utils/validator/isMIMEType.md",5765],bfe77232:[()=>n.e(5163).then(n.bind(n,7524)),"@site/docs/utils/common/size.md",7524],c060fdc4:[()=>n.e(4991).then(n.bind(n,1526)),"@site/docs/react/components/ClientGate.mdx",1526],c55bf516:[()=>n.e(1196).then(n.bind(n,8228)),"@site/docs/react/hooks/useKeyDown.mdx",8228],c55c9b0f:[()=>n.e(3972).then(n.bind(n,338)),"@site/docs/react/components/SwithCase.mdx",338],c79d4cee:[()=>n.e(4911).then(n.bind(n,9882)),"@site/docs/utils/array/shuffle.md",9882],c97d1ae8:[()=>n.e(2199).then(n.bind(n,8031)),"@site/docs/utils/object/invert.md",8031],cb3f6f96:[()=>n.e(8562).then(n.bind(n,8475)),"@site/docs/react/components/Iterator.mdx",8475],cbca3a13:[()=>n.e(9984).then(n.bind(n,7993)),"@site/docs/utils/common/getUniqTime.md",7993],cc0ca23c:[()=>n.e(33).then(n.bind(n,9982)),"@site/docs/react/hooks/useThrottle.mdx",9982],cc788f09:[()=>n.e(8395).then(n.bind(n,7574)),"@site/docs/utils/validator/isString.md",7574],cdc73f16:[()=>n.e(4870).then(n.bind(n,4262)),"@site/docs/utils/object/mapValues.md",4262],cdcab0ad:[()=>n.e(9491).then(n.bind(n,3249)),"@site/docs/react/components/Portal.mdx",3249],cea48cda:[()=>n.e(4534).then(n.bind(n,7116)),"@site/docs/utils/array/flatten.md",7116],d1eeb7e1:[()=>n.e(9591).then(n.bind(n,6297)),"@site/docs/utils/validator/isArray.md",6297],d2265e4d:[()=>n.e(7571).then(n.bind(n,1492)),"@site/docs/utils/date/getDDay.md",1492],d272ecc5:[()=>n.e(8430).then(n.bind(n,7051)),"@site/docs/utils/object/objectKeys.md",7051],d5af7a66:[()=>n.e(9695).then(n.bind(n,9935)),"@site/docs/utils/device/isSever.md",9935],d6a5e8fc:[()=>n.e(7769).then(n.bind(n,4585)),"@site/docs/utils/array/mapRight.md",4585],d6ba6004:[()=>n.e(3672).then(n.bind(n,8773)),"@site/docs/utils/array/countOccurrencesInArray.md",8773],d909d062:[()=>n.e(5155).then(n.bind(n,2891)),"@site/docs/utils/array/union.md",2891],d9f8fd02:[()=>n.e(7092).then(n.bind(n,7288)),"@site/docs/utils/date/getAge.md",7288],dbd15680:[()=>n.e(277).then(n.bind(n,7924)),"@site/docs/utils/common/noop.md",7924],dbf68f77:[()=>n.e(6481).then(n.bind(n,149)),"@site/docs/react/hooks/useIsomorphicLayoutEffect.mdx",149],dd6be58e:[()=>n.e(460).then(n.bind(n,7235)),"@site/docs/utils/array/flatMapDeep.md",7235],de5848ef:[()=>n.e(3124).then(n.bind(n,1548)),"@site/docs/utils/formatter/formatPhoneNumber.md",1548],e1570e80:[()=>n.e(8480).then(n.bind(n,416)),"@site/docs/utils/validator/isNumericString.md",416],e16a0351:[()=>n.e(5471).then(n.bind(n,6107)),"@site/docs/utils/array/drop.md",6107],e3446db6:[()=>n.e(3461).then(n.bind(n,8975)),"@site/docs/react/hooks/useVhProperty.mdx",8975],e5994cbd:[()=>n.e(726).then(n.bind(n,2819)),"@site/docs/utils/formatter/formatNumberWithCommas.md",2819],e5e192df:[()=>n.e(2172).then(n.bind(n,4456)),"@site/docs/utils/common/pickFalsy.md",4456],e72e489d:[()=>n.e(9011).then(n.bind(n,585)),"@site/docs/utils/common/asyncNoop.md",585],e80051d9:[()=>n.e(3955).then(n.bind(n,7253)),"@site/docs/utils/validator/isSubset.md",7253],e886aeee:[()=>n.e(5766).then(n.bind(n,113)),"@site/docs/utils/file/getBlobFromUrl.md",113],eabfdb13:[()=>n.e(2035).then(n.bind(n,3090)),"@site/docs/react/hooks/useUnmount.mdx",3090],eb0f0f4b:[()=>n.e(3348).then(n.bind(n,8353)),"@site/docs/react/hooks/useNetwork.mdx",8353],ec8014fa:[()=>n.e(4623).then(n.bind(n,5876)),"@site/docs/utils/file/getMIMETypeFromResponse.md",5876],ecbd9af6:[()=>n.e(547).then(n.bind(n,8218)),"@site/docs/utils/array/at.md",8218],ee1f2119:[()=>n.e(9801).then(n.t.bind(n,2262,19)),"@generated/docusaurus-plugin-content-docs/default/p/modern-kit-docs-6ff.json",2262],ee418e94:[()=>n.e(6110).then(n.bind(n,6154)),"@site/docs/utils/device/getOS.md",6154],eea24eaa:[()=>n.e(1439).then(n.bind(n,4776)),"@site/docs/utils/validator/isPlainObject.md",4776],f1e7f965:[()=>n.e(3936).then(n.bind(n,2281)),"@site/docs/utils/common/cloneDeep.md",2281],f4aa30a8:[()=>n.e(6033).then(n.bind(n,7061)),"@site/docs/utils/validator/isReference.md",7061],f5098664:[()=>n.e(7825).then(n.bind(n,3217)),"@site/docs/react/hooks/useAsyncEffect.mdx",3217],f717749c:[()=>n.e(7395).then(n.bind(n,6375)),"@site/docs/utils/common/getUniqId.md",6375],f9c93bdc:[()=>n.e(4732).then(n.bind(n,1361)),"@site/docs/utils/array/uniq.md",1361],f9f2812b:[()=>n.e(4369).then(n.bind(n,5943)),"@site/docs/utils/math/max.md",5943],fa6a5d39:[()=>n.e(4872).then(n.bind(n,9190)),"@site/docs/utils/common/wrapInArray.md",9190],fbe6690a:[()=>n.e(3816).then(n.bind(n,1053)),"@site/docs/react/hooks/useStep.mdx",1053]};var s=n(6206);function l(e){let{error:t,retry:n,pastDelay:r}=e;return t?(0,s.jsxs)("div",{style:{textAlign:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"},children:[(0,s.jsx)("p",{children:String(t)}),(0,s.jsx)("div",{children:(0,s.jsx)("button",{type:"button",onClick:n,children:"Retry"})})]}):r?(0,s.jsx)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"},children:(0,s.jsx)("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb",children:(0,s.jsxs)("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2",children:[(0,s.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,s.jsx)("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,s.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,s.jsx)("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,s.jsx)("circle",{cx:"22",cy:"22",r:"8",children:(0,s.jsx)("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"})})]})})}):null}var c=n(461),u=n(5474);function d(e,t){if("*"===e)return o()({loading:l,loader:()=>n.e(4004).then(n.bind(n,4004)),modules:["@theme/NotFound"],webpack:()=>[4004],render(e,t){const n=e.default;return(0,s.jsx)(u.W,{value:{plugin:{name:"native",id:"default"}},children:(0,s.jsx)(n,{...t})})}});const r=a[`${e}-${t}`],d={},p=[],f=[],m=(0,c.A)(r);return Object.entries(m).forEach((e=>{let[t,n]=e;const r=i[n];r&&(d[t]=r[0],p.push(r[1]),f.push(r[2]))})),o().Map({loading:l,loader:d,modules:p,webpack:()=>f,render(t,n){const o=JSON.parse(JSON.stringify(r));Object.entries(t).forEach((t=>{let[n,r]=t;const a=r.default;if(!a)throw new Error(`The page component at ${e} doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.`);"object"!=typeof a&&"function"!=typeof a||Object.keys(r).filter((e=>"default"!==e)).forEach((e=>{a[e]=r[e]}));let i=o;const s=n.split(".");s.slice(0,-1).forEach((e=>{i=i[e]})),i[s[s.length-1]]=a}));const a=o.__comp;delete o.__comp;const i=o.__context;delete o.__context;const l=o.__props;return delete o.__props,(0,s.jsx)(u.W,{value:i,children:(0,s.jsx)(a,{...o,...l,...n})})}})}const p=[{path:"/modern-kit/docs",component:d("/modern-kit/docs","dff"),routes:[{path:"/modern-kit/docs",component:d("/modern-kit/docs","722"),routes:[{path:"/modern-kit/docs",component:d("/modern-kit/docs","7cb"),routes:[{path:"/modern-kit/docs/introduce/",component:d("/modern-kit/docs/introduce/","975"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/AspectRatio",component:d("/modern-kit/docs/react/components/AspectRatio","5f2"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/ClientGate",component:d("/modern-kit/docs/react/components/ClientGate","28d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/DebounceHandler",component:d("/modern-kit/docs/react/components/DebounceHandler","60e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/FallbackLazyImage",component:d("/modern-kit/docs/react/components/FallbackLazyImage","dc3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/IfElse",component:d("/modern-kit/docs/react/components/IfElse","489"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/InfiniteScroll",component:d("/modern-kit/docs/react/components/InfiniteScroll","893"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/InView",component:d("/modern-kit/docs/react/components/InView","ed4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/Iterator",component:d("/modern-kit/docs/react/components/Iterator","af8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/LazyImage",component:d("/modern-kit/docs/react/components/LazyImage","001"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/Mounted",component:d("/modern-kit/docs/react/components/Mounted","e78"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/OutsidePointerDownHandler",component:d("/modern-kit/docs/react/components/OutsidePointerDownHandler","5f6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/Portal",component:d("/modern-kit/docs/react/components/Portal","356"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/SeparatedIterator",component:d("/modern-kit/docs/react/components/SeparatedIterator","282"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/Slot",component:d("/modern-kit/docs/react/components/Slot","e27"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/SwithCase",component:d("/modern-kit/docs/react/components/SwithCase","99e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/When",component:d("/modern-kit/docs/react/components/When","ae9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useAsyncEffect",component:d("/modern-kit/docs/react/hooks/useAsyncEffect","11f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useBeforeUnload",component:d("/modern-kit/docs/react/hooks/useBeforeUnload","88c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useBlockMultipleAsyncCalls",component:d("/modern-kit/docs/react/hooks/useBlockMultipleAsyncCalls","555"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useClipboard",component:d("/modern-kit/docs/react/hooks/useClipboard","560"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useColorScheme",component:d("/modern-kit/docs/react/hooks/useColorScheme","eed"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useCounter",component:d("/modern-kit/docs/react/hooks/useCounter","46b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useCycleList",component:d("/modern-kit/docs/react/hooks/useCycleList","7f5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useDebounce",component:d("/modern-kit/docs/react/hooks/useDebounce","fab"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useDebouncedInputValue",component:d("/modern-kit/docs/react/hooks/useDebouncedInputValue","8a9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useDebouncedState",component:d("/modern-kit/docs/react/hooks/useDebouncedState","93f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useDependencyTimeout",component:d("/modern-kit/docs/react/hooks/useDependencyTimeout","d57"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useDocumentTitle",component:d("/modern-kit/docs/react/hooks/useDocumentTitle","d74"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useEventListener",component:d("/modern-kit/docs/react/hooks/useEventListener","e2f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useFileReader",component:d("/modern-kit/docs/react/hooks/useFileReader","a18"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useFocus",component:d("/modern-kit/docs/react/hooks/useFocus","860"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useForceUpdate",component:d("/modern-kit/docs/react/hooks/useForceUpdate","b44"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useHover",component:d("/modern-kit/docs/react/hooks/useHover","3c2"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useImageStatus",component:d("/modern-kit/docs/react/hooks/useImageStatus","934"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useIntersectionObserver",component:d("/modern-kit/docs/react/hooks/useIntersectionObserver","9c5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useInterval",component:d("/modern-kit/docs/react/hooks/useInterval","05b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useIsMounted",component:d("/modern-kit/docs/react/hooks/useIsMounted","4b3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useIsomorphicLayoutEffect",component:d("/modern-kit/docs/react/hooks/useIsomorphicLayoutEffect","6cd"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useKeyDown",component:d("/modern-kit/docs/react/hooks/useKeyDown","51b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useLocalStorage",component:d("/modern-kit/docs/react/hooks/useLocalStorage","057"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useMediaQuery",component:d("/modern-kit/docs/react/hooks/useMediaQuery","9ec"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useMergeRefs",component:d("/modern-kit/docs/react/hooks/useMergeRefs","059"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useMouse",component:d("/modern-kit/docs/react/hooks/useMouse","11d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useNetwork",component:d("/modern-kit/docs/react/hooks/useNetwork","08e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useOutsidePointerDown",component:d("/modern-kit/docs/react/hooks/useOutsidePointerDown","b57"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/usePreferredColorScheme",component:d("/modern-kit/docs/react/hooks/usePreferredColorScheme","51a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/usePreservedCallback",component:d("/modern-kit/docs/react/hooks/usePreservedCallback","d50"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/usePreservedState",component:d("/modern-kit/docs/react/hooks/usePreservedState","a46"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/usePrevious",component:d("/modern-kit/docs/react/hooks/usePrevious","eee"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useResizeObserver",component:d("/modern-kit/docs/react/hooks/useResizeObserver","b26"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useScrollLock",component:d("/modern-kit/docs/react/hooks/useScrollLock","7f5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useScrollTo",component:d("/modern-kit/docs/react/hooks/useScrollTo","5c0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useSessionStorage",component:d("/modern-kit/docs/react/hooks/useSessionStorage","aab"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useStep",component:d("/modern-kit/docs/react/hooks/useStep","aba"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useStepState",component:d("/modern-kit/docs/react/hooks/useStepState","cf7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useThrottle",component:d("/modern-kit/docs/react/hooks/useThrottle","a74"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useTimeout",component:d("/modern-kit/docs/react/hooks/useTimeout","9e7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useToggle",component:d("/modern-kit/docs/react/hooks/useToggle","f90"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useToggleState",component:d("/modern-kit/docs/react/hooks/useToggleState","3ad"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useUnmount",component:d("/modern-kit/docs/react/hooks/useUnmount","bb7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useUserAgent",component:d("/modern-kit/docs/react/hooks/useUserAgent","ae5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useVhProperty",component:d("/modern-kit/docs/react/hooks/useVhProperty","4fb"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useVisibilityChange",component:d("/modern-kit/docs/react/hooks/useVisibilityChange","ca7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useWindowSize",component:d("/modern-kit/docs/react/hooks/useWindowSize","fb2"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/at",component:d("/modern-kit/docs/utils/array/at","c4c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/chunk",component:d("/modern-kit/docs/utils/array/chunk","ba7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/compact",component:d("/modern-kit/docs/utils/array/compact","e03"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/contains",component:d("/modern-kit/docs/utils/array/contains","56f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/countOccurrencesInArray",component:d("/modern-kit/docs/utils/array/countOccurrencesInArray","823"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/difference",component:d("/modern-kit/docs/utils/array/difference","7b0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/drop",component:d("/modern-kit/docs/utils/array/drop","8f0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/excludeElements",component:d("/modern-kit/docs/utils/array/excludeElements","b9e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/fill",component:d("/modern-kit/docs/utils/array/fill","57f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/flatMap",component:d("/modern-kit/docs/utils/array/flatMap","67b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/flatMapDeep",component:d("/modern-kit/docs/utils/array/flatMapDeep","306"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/flatten",component:d("/modern-kit/docs/utils/array/flatten","27c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/flattenDeep",component:d("/modern-kit/docs/utils/array/flattenDeep","71c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/flattenDeepThenMap",component:d("/modern-kit/docs/utils/array/flattenDeepThenMap","da6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/forEachRight",component:d("/modern-kit/docs/utils/array/forEachRight","014"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/groupBy",component:d("/modern-kit/docs/utils/array/groupBy","90d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/intersection",component:d("/modern-kit/docs/utils/array/intersection","176"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/mapRight",component:d("/modern-kit/docs/utils/array/mapRight","cb5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/partition",component:d("/modern-kit/docs/utils/array/partition","70e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/shuffle",component:d("/modern-kit/docs/utils/array/shuffle","505"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/swap",component:d("/modern-kit/docs/utils/array/swap","dc8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/take",component:d("/modern-kit/docs/utils/array/take","2fb"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/union",component:d("/modern-kit/docs/utils/array/union","d05"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/uniq",component:d("/modern-kit/docs/utils/array/uniq","bba"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/xor",component:d("/modern-kit/docs/utils/array/xor","f88"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/clipboard/copyClipboardImage",component:d("/modern-kit/docs/utils/clipboard/copyClipboardImage","d02"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/clipboard/copyClipboardText",component:d("/modern-kit/docs/utils/clipboard/copyClipboardText","465"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/clipboard/copyFallbackClipboardText",component:d("/modern-kit/docs/utils/clipboard/copyFallbackClipboardText","b59"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/clipboard/readClipboardContents",component:d("/modern-kit/docs/utils/clipboard/readClipboardContents","8bc"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/clipboard/readClipboardText",component:d("/modern-kit/docs/utils/clipboard/readClipboardText","ac9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/abRandom",component:d("/modern-kit/docs/utils/common/abRandom","3dc"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/asyncNoop",component:d("/modern-kit/docs/utils/common/asyncNoop","9e5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/cloneDeep",component:d("/modern-kit/docs/utils/common/cloneDeep","884"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/delay",component:d("/modern-kit/docs/utils/common/delay","b3f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/getUniqId",component:d("/modern-kit/docs/utils/common/getUniqId","a6f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/getUniqTime",component:d("/modern-kit/docs/utils/common/getUniqTime","a82"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/getViewportSize",component:d("/modern-kit/docs/utils/common/getViewportSize","8b4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/hexToRgba",component:d("/modern-kit/docs/utils/common/hexToRgba","0e6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/identity",component:d("/modern-kit/docs/utils/common/identity","c03"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/noop",component:d("/modern-kit/docs/utils/common/noop","4e6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/once",component:d("/modern-kit/docs/utils/common/once","66a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/parseJSON",component:d("/modern-kit/docs/utils/common/parseJSON","db1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/pickFalsy",component:d("/modern-kit/docs/utils/common/pickFalsy","e8e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/size",component:d("/modern-kit/docs/utils/common/size","af1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/wrapInArray",component:d("/modern-kit/docs/utils/common/wrapInArray","345"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/date/getAge",component:d("/modern-kit/docs/utils/date/getAge","4b2"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/date/getDDay",component:d("/modern-kit/docs/utils/date/getDDay","e9a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/date/isAfterDate",component:d("/modern-kit/docs/utils/date/isAfterDate","958"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/date/isBeforeDate",component:d("/modern-kit/docs/utils/date/isBeforeDate","8bc"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/date/isDateInRange",component:d("/modern-kit/docs/utils/date/isDateInRange","dca"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/date/isUnderAge",component:d("/modern-kit/docs/utils/date/isUnderAge","4d8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/device/getOS",component:d("/modern-kit/docs/utils/device/getOS","552"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/device/isClient",component:d("/modern-kit/docs/utils/device/isClient","a60"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/device/isMobile",component:d("/modern-kit/docs/utils/device/isMobile","8dc"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/device/isSever",component:d("/modern-kit/docs/utils/device/isSever","b65"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/file/convertImageToBase64",component:d("/modern-kit/docs/utils/file/convertImageToBase64","623"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/file/convertImageToBlob",component:d("/modern-kit/docs/utils/file/convertImageToBlob","84c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/file/getBlobFromUrl",component:d("/modern-kit/docs/utils/file/getBlobFromUrl","fc3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/file/getMIMEType",component:d("/modern-kit/docs/utils/file/getMIMEType","625"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/file/getMIMETypeFromFile",component:d("/modern-kit/docs/utils/file/getMIMETypeFromFile","ae3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/file/getMIMETypeFromResponse",component:d("/modern-kit/docs/utils/file/getMIMETypeFromResponse","b72"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/file/getMIMETypeFromUrl",component:d("/modern-kit/docs/utils/file/getMIMETypeFromUrl","a29"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/formatter/formatNumberWithCommas",component:d("/modern-kit/docs/utils/formatter/formatNumberWithCommas","1ff"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/formatter/formatNumberWithUnits",component:d("/modern-kit/docs/utils/formatter/formatNumberWithUnits","b54"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/formatter/formatPhoneNumber",component:d("/modern-kit/docs/utils/formatter/formatPhoneNumber","260"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/formatter/formatValueWithSymbol",component:d("/modern-kit/docs/utils/formatter/formatValueWithSymbol","f9d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/math/average",component:d("/modern-kit/docs/utils/math/average","0b8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/math/clamp",component:d("/modern-kit/docs/utils/math/clamp","c8c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/math/max",component:d("/modern-kit/docs/utils/math/max","ff1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/math/min",component:d("/modern-kit/docs/utils/math/min","f53"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/math/range",component:d("/modern-kit/docs/utils/math/range","ca5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/math/sum",component:d("/modern-kit/docs/utils/math/sum","a1f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/deleteEmptyProperties",component:d("/modern-kit/docs/utils/object/deleteEmptyProperties","884"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/findKey",component:d("/modern-kit/docs/utils/object/findKey","629"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/findLastKey",component:d("/modern-kit/docs/utils/object/findLastKey","5ee"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/invert",component:d("/modern-kit/docs/utils/object/invert","cbc"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/mapKeys",component:d("/modern-kit/docs/utils/object/mapKeys","960"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/mapValues",component:d("/modern-kit/docs/utils/object/mapValues","919"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/merge",component:d("/modern-kit/docs/utils/object/merge","8a9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/objectEntries",component:d("/modern-kit/docs/utils/object/objectEntries","87d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/objectKeys",component:d("/modern-kit/docs/utils/object/objectKeys","34e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/objectValues",component:d("/modern-kit/docs/utils/object/objectValues","e18"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/omit",component:d("/modern-kit/docs/utils/object/omit","6fc"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/omitBy",component:d("/modern-kit/docs/utils/object/omitBy","f3b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/pick",component:d("/modern-kit/docs/utils/object/pick","8b7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/pickBy",component:d("/modern-kit/docs/utils/object/pickBy","e80"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/string/countSubstringOccurrences",component:d("/modern-kit/docs/utils/string/countSubstringOccurrences","c18"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/string/extractLetters",component:d("/modern-kit/docs/utils/string/extractLetters","c2f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/string/extractNumber",component:d("/modern-kit/docs/utils/string/extractNumber","df0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/string/removeSpecialCharacters",component:d("/modern-kit/docs/utils/string/removeSpecialCharacters","e42"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/string/repeatCharacters",component:d("/modern-kit/docs/utils/string/repeatCharacters","f0a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/string/reverseString",component:d("/modern-kit/docs/utils/string/reverseString","af9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/string/serialize",component:d("/modern-kit/docs/utils/string/serialize","089"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/style/formatSizeStyleValue",component:d("/modern-kit/docs/utils/style/formatSizeStyleValue","a7a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/style/rem",component:d("/modern-kit/docs/utils/style/rem","444"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/hasProperty",component:d("/modern-kit/docs/utils/validator/hasProperty","cd4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isArray",component:d("/modern-kit/docs/utils/validator/isArray","41c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isBoolean",component:d("/modern-kit/docs/utils/validator/isBoolean","280"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isDate",component:d("/modern-kit/docs/utils/validator/isDate","d42"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isEqual",component:d("/modern-kit/docs/utils/validator/isEqual","87f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isFloat",component:d("/modern-kit/docs/utils/validator/isFloat","0bc"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isFuntion",component:d("/modern-kit/docs/utils/validator/isFuntion","5bf"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isInRange",component:d("/modern-kit/docs/utils/validator/isInRange","eca"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isMIMEType",component:d("/modern-kit/docs/utils/validator/isMIMEType","ac3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isNil",component:d("/modern-kit/docs/utils/validator/isNil","c53"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isNotNil",component:d("/modern-kit/docs/utils/validator/isNotNil","b4f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isNumber",component:d("/modern-kit/docs/utils/validator/isNumber","291"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isNumericString",component:d("/modern-kit/docs/utils/validator/isNumericString","0d1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isPlainObject",component:d("/modern-kit/docs/utils/validator/isPlainObject","5ca"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isPrimitive",component:d("/modern-kit/docs/utils/validator/isPrimitive","6fe"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isPromise",component:d("/modern-kit/docs/utils/validator/isPromise","9ee"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isReference",component:d("/modern-kit/docs/utils/validator/isReference","388"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isString",component:d("/modern-kit/docs/utils/validator/isString","060"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isSubset",component:d("/modern-kit/docs/utils/validator/isSubset","a49"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isValidEmail",component:d("/modern-kit/docs/utils/validator/isValidEmail","6ac"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isValidPassword",component:d("/modern-kit/docs/utils/validator/isValidPassword","1e9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isValidPhoneNumber",component:d("/modern-kit/docs/utils/validator/isValidPhoneNumber","9e5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isWindow",component:d("/modern-kit/docs/utils/validator/isWindow","834"),exact:!0,sidebar:"tutorialSidebar"}]}]}]},{path:"/modern-kit/",component:d("/modern-kit/","b6d"),exact:!0},{path:"*",component:d("*")}]},6370:(e,t,n)=>{"use strict";n.r(t)},8628:(e,t,n)=>{"use strict";n.r(t)},6828:(e,t,n)=>{"use strict";var r=n(4382),o=n(8094);function a(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n