From 9fe87a6bae5fa926571fc167a4f0d7d599e236f5 Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Mon, 23 Nov 2020 12:20:02 +0400 Subject: [PATCH 01/14] feat: add search --- website/package.json | 1 + website/pages/index.tsx | 2 + website/src/components/search.styles.tsx | 414 +++++++++++++++++++++++ website/src/components/search.tsx | 164 +++++++++ yarn.lock | 149 ++++++++ 5 files changed, 730 insertions(+) create mode 100644 website/src/components/search.styles.tsx create mode 100644 website/src/components/search.tsx diff --git a/website/package.json b/website/package.json index 1114f5fe8f5..f055c63b777 100644 --- a/website/package.json +++ b/website/package.json @@ -15,6 +15,7 @@ "@chakra-ui/react": "1.0.1", "@chakra-ui/theme-tools": "1.0.1", "@chakra-ui/utils": "1.0.1", + "@docsearch/react": "^1.0.0-alpha.27", "@docusaurus/utils": "^2.0.0-alpha.62", "@mdx-js/react": "^1.6.19", "@octokit/rest": "^18.0.9", diff --git a/website/pages/index.tsx b/website/pages/index.tsx index 9572833e192..0f9a5fbc85a 100644 --- a/website/pages/index.tsx +++ b/website/pages/index.tsx @@ -26,6 +26,7 @@ import DiscordStrip from "components/discord-strip" import { Footer } from "components/footer" import Header from "components/header" import LogoMark from "components/logo-mark" +import { Search } from "components/search" import SEO from "components/seo" import TweetCard from "components/tweet-card" import { tweets } from "configs/tweets.json" @@ -125,6 +126,7 @@ const HomePage = ({ members, sponsors }: HomePageProps) => { pt={{ base: "10rem", md: "12rem" }} pb={{ base: "0", md: "5rem" }} > + ( + css` + .DocSearch--active { + overflow: hidden !important; + } + + .DocSearch-Container { + height: 100vh; + left: 0; + position: fixed; + top: 0; + width: 100vw; + z-index: 200; + display: flex; + flex-direction: column; + background: rgba(0, 0, 0, 0.25); + padding: 1rem; + + @media (min-width: 640px) { + padding: 1.5rem; + } + + @media (min-width: 768px) { + padding: 10vh; + } + + @media (min-width: 1024px) { + padding: 12vh; + } + } + + .DocSearch-LoadingIndicator svg { + display: none; + } + + .DocSearch-LoadingIndicator { + display: none; + width: 1.5rem; + height: 1.5rem; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke-width='2' stroke='%23cffafe' /%3E%3Cpath d='M3,12a9,9 0 1,0 18,0a9,9 0 1,0 -18,0' stroke-width='2' stroke='%2306b6d4' stroke-dasharray='56.5486677646' stroke-dashoffset='37.6991118431' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); + background-size: 100% 100%; + } + + .DocSearch-Container--Stalled .DocSearch-LoadingIndicator { + display: block; + } + + .DocSearch-Modal { + margin: 0 auto; + width: 100%; + max-width: 47.375rem; + display: flex; + flex-direction: column; + min-height: 0; + border-radius: 1rem; + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); + background: white; + } + + .DocSearch-SearchBar { + flex: none; + border-bottom: 1px solid ${theme.colors.gray["200"]}; + position: relative; + z-index: 1; + display: flex; + align-items: center; + margin: 0 1.5rem; + } + + .DocSearch-Form { + flex: auto; + display: flex; + align-items: center; + min-width: 0; + } + + .DocSearch-Dropdown { + flex: auto; + border-bottom-left-radius: 1rem; + border-bottom-right-radius: 1rem; + padding: 0 1.5rem 1.5rem; + overflow: auto; + } + + .DocSearch-MagnifierLabel { + flex: none; + width: 1.5rem; + height: 1.5rem; + background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z' stroke='%2306b6d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); + } + + .DocSearch-MagnifierLabel svg { + display: none; + } + + .DocSearch-Container--Stalled .DocSearch-MagnifierLabel { + display: none; + } + + .DocSearch-Input { + appearance: none; + background: transparent; + height: 4.5rem; + font-size: 1rem; + font-weight: 500; + color: black; + margin-left: 1rem; + margin-right: 1rem; + flex: auto; + min-width: 0; + } + + .DocSearch-Input:focus { + outline: 2px dotted transparent; + } + + .DocSearch-Input::-webkit-search-cancel-button, + .DocSearch-Input::-webkit-search-decoration, + .DocSearch-Input::-webkit-search-results-button, + .DocSearch-Input::-webkit-search-results-decoration { + display: none; + } + + .DocSearch-Reset { + display: none; + } + + .DocSearch-Reset::before { + content: "esc"; + } + + .DocSearch-Cancel { + flex: none; + font-size: 0; + border-radius: 0.375rem; + background-color: ${theme.colors.gray["50"]}; + border: 1px solid ${theme.colors.gray["300"]}; + padding: 0.125rem 0.375rem; + } + + .DocSearch-Cancel::before { + content: "esc"; + color: ${theme.colors.gray["400"]}; + font-size: 0.875rem; + line-height: 1.25rem; + } + + .DocSearch-Reset svg { + display: none; + } + + .DocSearch-Hit-source { + line-height: 1.5rem; + font-weight: 600; + color: ${theme.colors.gray["600"]}; + margin-top: 1.5rem; + margin-bottom: 1rem; + } + + .DocSearch-Hit-Container { + display: flex; + align-items: center; + height: 4rem; + } + + .DocSearch-Hit-Tree { + display: none; + } + + .DocSearch-Hit-icon { + flex: none; + margin-right: 0.875rem; + } + + .DocSearch-Hit-icon path { + stroke-width: 2px; + stroke: #71717a; + } + + .DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-icon path { + stroke: white; + } + + .DocSearch-Hit-content-wrapper { + flex: auto; + display: flex; + flex-direction: column-reverse; + min-width: 0; + } + + .DocSearch-Hit-path { + font-size: 0.75rem; + line-height: 1rem; + font-weight: 500; + color: ${theme.colors.gray["500"]}; + } + + .DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-path { + color: ${theme.colors.cyan["200"]}; + } + + .DocSearch-Dropdown ul { + list-style-type: none; + } + + .DocSearch-Hit-title { + color: black; + line-height: 1.5rem; + font-weight: 600; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-title { + color: white; + } + + .DocSearch-Hit-title + .DocSearch-Hit-path { + margin-bottom: 0.125rem; + } + + .DocSearch-Hit-action { + flex: none; + margin-left: 0.875rem; + } + + .DocSearch-Hit-action-button { + display: flex; + } + + .DocSearch-Hit-action + .DocSearch-Hit-action { + margin-left: 0.5rem; + } + + .DocSearch-Hit-action path { + stroke-width: 2px; + stroke: #71717a; + } + + .DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-action path { + stroke: white; + } + + .DocSearch-Hit > a { + display: block; + background: ${theme.colors.gray["50"]}; + border-radius: 0.5rem; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + padding: 0 1.25rem 0 1rem; + } + + .DocSearch-Hit[aria-selected="true"] > a { + background: ${theme.colors.cyan["500"]}; + } + + .DocSearch-Hit + .DocSearch-Hit { + margin-top: 0.5rem; + } + + .DocSearch-Hit { + position: relative; + } + + .DocSearch-Hit--Child { + padding-left: 1.75rem; + } + + .DocSearch-Hit--Child::before, + .DocSearch-Hit--Child + + .DocSearch-Hit:not(.DocSearch-Hit--Child)::before { + content: ""; + position: absolute; + top: -0.25rem; + bottom: -0.25rem; + left: 0.5rem; + width: 1.25rem; + background-image: url("data:image/svg+xml,%3Csvg width='12' height='200' viewBox='0 0 12 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 1 0 V 200 M 1 100 H 12' stroke='%23a1a1aa' stroke-width='2'/%3E%3C/svg%3E%0A"); + background-repeat: no-repeat; + background-position: center left; + } + + .DocSearch-Hit--Child:last-child::before, + .DocSearch-Hit--Child + + .DocSearch-Hit:not(.DocSearch-Hit--Child)::before { + background-image: url("data:image/svg+xml,%3Csvg width='12' height='200' viewBox='0 0 12 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 1 0 V 89 Q 1 100 12 100' stroke='%23a1a1aa' stroke-width='2'/%3E%3C/svg%3E%0A"); + } + + .DocSearch-Hit:not(.DocSearch-Hit--Child) + .DocSearch-Hit--Child::after { + content: ""; + position: absolute; + top: -0.25rem; + left: 0; + width: 1.25rem; + height: 0.25rem; + background: #fff; + } + + .DocSearch-Hit--Child + + .DocSearch-Hit:not(.DocSearch-Hit--Child)::before { + top: auto; + bottom: calc(100% + 0.25rem); + height: calc(100% + 0.25rem); + background-color: #fff; + } + + .DocSearch-Hits mark { + background: none; + color: ${theme.colors.cyan["500"]}; + } + + .DocSearch-Hit[aria-selected="true"] mark { + color: inherit; + text-decoration: underline; + } + + .DocSearch-Footer { + flex: none; + display: flex; + justify-content: flex-end; + margin: 0 1.5rem; + border-top: 1px solid ${theme.colors.gray["200"]}; + padding: 1.25rem 0; + } + + .DocSearch-Commands { + display: none; + } + + .DocSearch-Logo a { + display: flex; + align-items: center; + color: #5d6494; + font-size: 0.75rem; + font-weight: 500; + } + + .DocSearch-Logo svg { + color: #5468ff; + margin-left: 0.5rem; + } + + .DocSearch-Hit--deleting, + .DocSearch-Hit--favoriting { + opacity: 0; + transition: all 250ms linear; + } + + .DocSearch-NoResults .DocSearch-Screen-Icon { + display: none; + } + + .DocSearch-Title { + font-size: ${theme.fontSizes.lg}; + line-height: 1.2rem; + margin-bottom: 2.5rem; + } + + .DocSearch-Title strong { + color: ${theme.colors.gray["900"]}; + font-weight: 500; + } + + .DocSearch-StartScreen, + .DocSearch-NoResults { + padding-top: 2.5rem; + padding-bottom: 1rem; + } + + .DocSearch-StartScreen .DocSearch-Help { + font-size: ${theme.fontSizes.md}; + line-height: 1.5rem; + } + + .DocSearch-NoResults-Prefill-List .DocSearch-Help { + font-size: ${theme.fontSizes.xs}; + line-height: 1rem; + letter-spacing: ${theme.letterSpacings.wide}; + text-transform: uppercase; + font-weight: 600; + padding-bottom: 0.5rem; + border-bottom: 1px solid ${theme.colors.gray["200"]}; + } + + .DocSearch-NoResults-Prefill-List li { + padding: 0.5rem 0; + border-bottom: 1px solid ${theme.colors.gray["200"]}; + } + + .DocSearch-NoResults-Prefill-List button { + font-weight: 500; + color: ${theme.colors.cyan["600"]}; + } + + .DocSearch-NoResults-Prefill-List + .DocSearch-Help { + font-size: ${theme.fontSizes.sm}; + line-height: 1.25rem; + margin-top: 1rem; + } + + .DocSearch-NoResults-Prefill-List + .DocSearch-Help a { + box-shadow: inset 0 -0.125em 0 0 #fff, + inset 0 -0.375em 0 0 rgba(165, 243, 252, 0.4); + color: ${theme.colors.cyan["600"]}; + font-weight: 500; + } + `} + /> +) + +export default SearchStyle diff --git a/website/src/components/search.tsx b/website/src/components/search.tsx new file mode 100644 index 00000000000..d9dd5e28215 --- /dev/null +++ b/website/src/components/search.tsx @@ -0,0 +1,164 @@ +import * as React from "react" +import Link from "next/link" +import Head from "next/head" +import { useRouter } from "next/router" +import { DocSearchModal, useDocSearchKeyboardEvents } from "@docsearch/react" +import { chakra, Portal } from "@chakra-ui/react" +import SearchStyle from "./search.styles" +import { get, startsWith } from "lodash/fp" +import _ from "lodash" + +const getLvl1 = get("hierarchy.lvl1") +const startsWithCss = startsWith("css-") + +const ACTION_KEY_DEFAULT = ["Ctrl ", "Control"] +const ACTION_KEY_APPLE = ["⌘", "Command"] + +function Hit(props) { + const { hit, children } = props as any + return ( + + {children} + + ) +} + +export function Search() { + const router = useRouter() + const [isOpen, setIsOpen] = React.useState(false) + const searchButtonRef = React.useRef() + const [initialQuery, setInitialQuery] = React.useState(null) + const [actionKey, setActionKey] = React.useState() + + const onOpen = React.useCallback(() => { + setIsOpen(true) + }, [setIsOpen]) + + const onClose = React.useCallback(() => { + setIsOpen(false) + }, [setIsOpen]) + + const onInput = React.useCallback( + (e) => { + setIsOpen(true) + setInitialQuery(e.key) + }, + [setIsOpen, setInitialQuery], + ) + + useDocSearchKeyboardEvents({ + isOpen, + onOpen, + onClose, + onInput, + searchButtonRef, + }) + + React.useEffect(() => { + if (typeof navigator !== "undefined") { + if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) { + setActionKey(ACTION_KEY_APPLE) + } else { + setActionKey(ACTION_KEY_DEFAULT) + } + } + }, []) + + return ( + <> + + + + + + + + + + Quick search for anything + + {actionKey && ( + + Press + + + {actionKey[0]} + + + and + K + to search + + )} + + {isOpen && ( + + { + return items + .filter((item) => { + const lvl1 = item.hierarchy.lvl1 + return !startsWithCss(lvl1) || !startsWithCss(item.content) + }) + .map((item) => { + /** + * We transform the absolute URL into a relative URL to + * leverage Next's preloading. + */ + const a = document.createElement("a") + a.href = item.url + const hash = a.hash === "#content-wrapper" ? "" : a.hash + + return { + ...item, + url: `${a.pathname}${hash}`, + content: item.content ?? item.hierarchy.lvl0, + } + }) + }} + /> + + )} + + ) +} diff --git a/yarn.lock b/yarn.lock index e3ad9d41112..c061af2536d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,110 @@ # yarn lockfile v1 +"@algolia/cache-browser-local-storage@4.8.0": + version "4.8.0" + resolved "https://registry.yarnpkg.com/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.8.0.tgz#42137b8e18474e8a94bd7206d7e4ada2daf5da04" + integrity sha512-VnI25yr+3LfCnHdp4YWWjdjtTseY3/hFwhp9vXBZLq+ZCbGpDiRjCNP9ZXLJELrtugk5tn2DpBGN2LWF4ZpKLg== + dependencies: + "@algolia/cache-common" "4.8.0" + +"@algolia/cache-common@4.8.0": + version "4.8.0" + resolved "https://registry.yarnpkg.com/@algolia/cache-common/-/cache-common-4.8.0.tgz#fd57e4bfb75c93ae82c1cf047fa81511d720cfd9" + integrity sha512-68WmVpHOFerjDh7AqUZdGdZF/wR1kEmDv1o32Gcty00BIfHLAo8YuA7ijoTPhJh4fGWwR2gYIybO/WOmFhwK5Q== + +"@algolia/cache-in-memory@4.8.0": + version "4.8.0" + resolved "https://registry.yarnpkg.com/@algolia/cache-in-memory/-/cache-in-memory-4.8.0.tgz#7716ec2dd797f890e69fb48e44add5ae1faa1ad3" + integrity sha512-m1uYLns8+PzlTy8xeXkM+p2sjFCJahYnrPj0s8ymU1bHgQC5qGp7rEz7o7zxElGYBeJ+f8tNiXrsnCnutASfNg== + dependencies: + "@algolia/cache-common" "4.8.0" + +"@algolia/client-account@4.8.0": + version "4.8.0" + resolved "https://registry.yarnpkg.com/@algolia/client-account/-/client-account-4.8.0.tgz#0b88d04a1733fc48b813db4e1d7a8226062ae79b" + integrity sha512-xNMfm7UPuPQpKtd5a2NB8j5LGockB4vsx+/0O9ZbboMKbDeucWa44CpXx7p0vPXW4SUgifCu7AFN//qXxIyxXg== + dependencies: + "@algolia/client-common" "4.8.0" + "@algolia/client-search" "4.8.0" + "@algolia/transporter" "4.8.0" + +"@algolia/client-analytics@4.8.0": + version "4.8.0" + resolved "https://registry.yarnpkg.com/@algolia/client-analytics/-/client-analytics-4.8.0.tgz#3bd928f20e20c15feb0cb3741ac581bfb8aecd51" + integrity sha512-Zq+yjvN03E7sDvLer9NvGfab9WplckRCGjnyDcdk11rF1Bhht8adtbfyaO78Ftl2SujkvBMsnTF8THVf0Ewplg== + dependencies: + "@algolia/client-common" "4.8.0" + "@algolia/client-search" "4.8.0" + "@algolia/requester-common" "4.8.0" + "@algolia/transporter" "4.8.0" + +"@algolia/client-common@4.8.0": + version "4.8.0" + resolved "https://registry.yarnpkg.com/@algolia/client-common/-/client-common-4.8.0.tgz#3c3fcfa135fae2813d2be13e23282714cc306b98" + integrity sha512-tjth4GICsY/V3gFtzebH7fS9V9/dlLdKpMgjbrNeIDo+rB3vJtBYwguhUrVLl2x2H0Hu5ffN26VclXRHFpwslg== + dependencies: + "@algolia/requester-common" "4.8.0" + "@algolia/transporter" "4.8.0" + +"@algolia/client-recommendation@4.8.0": + version "4.8.0" + resolved "https://registry.yarnpkg.com/@algolia/client-recommendation/-/client-recommendation-4.8.0.tgz#fbe6d49ad9a87ee0ffdd79491e1332a1711ebbd2" + integrity sha512-HdKBNRYVrFhyX3oPZg+LT1peO7tMawFYtiMHGoHFyR0PHfqMIw305NAErV+jGo3WmLJuyt4ywNrTtQnwFd+YYw== + dependencies: + "@algolia/client-common" "4.8.0" + "@algolia/requester-common" "4.8.0" + "@algolia/transporter" "4.8.0" + +"@algolia/client-search@4.8.0": + version "4.8.0" + resolved "https://registry.yarnpkg.com/@algolia/client-search/-/client-search-4.8.0.tgz#be9021adcb958f9e5478159e38f741b98e88f8ca" + integrity sha512-emfW9q/uqO4FmB7vLipLk+O/m4BKsAZ7Yaaamawv35kw1HqfBdJZZbIUcg5aGz45SIUdA36WIuT7JiRdrCfxBA== + dependencies: + "@algolia/client-common" "4.8.0" + "@algolia/requester-common" "4.8.0" + "@algolia/transporter" "4.8.0" + +"@algolia/logger-common@4.8.0": + version "4.8.0" + resolved "https://registry.yarnpkg.com/@algolia/logger-common/-/logger-common-4.8.0.tgz#ef5541a39bc13cf2a8b024f8f3dc6e35b08bbffe" + integrity sha512-6kewiORcU2a56hJOo5+Q91SF2ynk5H89jmfnNsveHdl3PPaOKJSsb9tqIErOZyv911zeeK6bVTCHllYeeJkxsg== + +"@algolia/logger-console@4.8.0": + version "4.8.0" + resolved "https://registry.yarnpkg.com/@algolia/logger-console/-/logger-console-4.8.0.tgz#4c2dd4c66788f7e47b91fe027c129f20c3006146" + integrity sha512-K1E/ppSHo5+215tj2G2N4LNjQLYjh6NfRDlAD30x9M6BbTSDI8tf12CgiPBe6wmdj8IQLzA2+5od8MSZKBpUMA== + dependencies: + "@algolia/logger-common" "4.8.0" + +"@algolia/requester-browser-xhr@4.8.0": + version "4.8.0" + resolved "https://registry.yarnpkg.com/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.8.0.tgz#30c59783ea865504aa843eb6ba49daf92bbfb6d1" + integrity sha512-BCKwuGQX+HujFeTpJdA9VwSFyjvmyz1wYdoYcCxgROWrM8QRCxxFvGUKCCjvkRf1vuqz/6xoSTsysZyKFkcjTA== + dependencies: + "@algolia/requester-common" "4.8.0" + +"@algolia/requester-common@4.8.0": + version "4.8.0" + resolved "https://registry.yarnpkg.com/@algolia/requester-common/-/requester-common-4.8.0.tgz#515d46294ec14a982ea75ac9ce97e20566c1c576" + integrity sha512-JKjlHPZU43rTcyvANHh5ctYRNXIZea2g5A33YPlrCXFJb3BBqS/H0ssFNyEwp8SJxJR3uUHl3m6DJpvuA7RtHg== + +"@algolia/requester-node-http@4.8.0": + version "4.8.0" + resolved "https://registry.yarnpkg.com/@algolia/requester-node-http/-/requester-node-http-4.8.0.tgz#7bf308a91f7b1854df91c5855fa9313949a70607" + integrity sha512-OSX00OXT/SWTmVwi7bkfSoGJdo9zwUHb1o0j71WbIdt8NH1KVZdC1mFfyRPp5mN2pi02brm3tv9NGNCeaLgLvQ== + dependencies: + "@algolia/requester-common" "4.8.0" + +"@algolia/transporter@4.8.0": + version "4.8.0" + resolved "https://registry.yarnpkg.com/@algolia/transporter/-/transporter-4.8.0.tgz#4ddf9db11c946ddbbd640ad3bced38147734a24a" + integrity sha512-fYYXUMQ5avvW1a1vLdQX8qRiPxUv3C1+DAw0nWDqfhHAesQtgwsibRmuQV9XVs3hpmRwiZbavzD+dXbhkY/XCQ== + dependencies: + "@algolia/cache-common" "4.8.0" + "@algolia/logger-common" "4.8.0" + "@algolia/requester-common" "4.8.0" + "@ampproject/toolbox-core@^2.6.0": version "2.6.1" resolved "https://registry.yarnpkg.com/@ampproject/toolbox-core/-/toolbox-core-2.6.1.tgz#af97ec253bf39e5fe5121b8ec28f1f35d1878446" @@ -1628,6 +1732,21 @@ resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18" integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg== +"@docsearch/css@^1.0.0-alpha.28": + version "1.0.0-alpha.28" + resolved "https://registry.yarnpkg.com/@docsearch/css/-/css-1.0.0-alpha.28.tgz#c8a2cd8c1bb3a6855c51892e9dbdab5d42fe6e23" + integrity sha512-1AhRzVdAkrWwhaxTX6/R7SnFHz8yLz1W8I/AldlTrfbNvZs9INk1FZiEFTJdgHaP68nhgQNWSGlQiDiI3y2RYg== + +"@docsearch/react@^1.0.0-alpha.27": + version "1.0.0-alpha.28" + resolved "https://registry.yarnpkg.com/@docsearch/react/-/react-1.0.0-alpha.28.tgz#4f039ed79f8b3332b19a57677b219aebc5010e9d" + integrity sha512-XjJOnCBXn+UZmtuDmgzlVIHnnvh6yHVwG4aFq8AXN6xJEIX3f180FvGaowFWAxgdtHplJxFGux0Xx4piHqBzIw== + dependencies: + "@docsearch/css" "^1.0.0-alpha.28" + "@francoischalifour/autocomplete-core" "^1.0.0-alpha.28" + "@francoischalifour/autocomplete-preset-algolia" "^1.0.0-alpha.28" + algoliasearch "^4.0.0" + "@docusaurus/types@2.0.0-alpha.68": version "2.0.0-alpha.68" resolved "https://registry.yarnpkg.com/@docusaurus/types/-/types-2.0.0-alpha.68.tgz#8709de8b7e6a535f3e835ef20b04b6f12bf328af" @@ -1935,6 +2054,16 @@ unique-filename "^1.1.1" which "^1.3.1" +"@francoischalifour/autocomplete-core@^1.0.0-alpha.28": + version "1.0.0-alpha.28" + resolved "https://registry.yarnpkg.com/@francoischalifour/autocomplete-core/-/autocomplete-core-1.0.0-alpha.28.tgz#6b9d8491288e77f831e9b345d461623b0d3f5005" + integrity sha512-rL9x+72btViw+9icfBKUJjZj87FgjFrD2esuTUqtj4RAX3s4AuVZiN8XEsfjQBSc6qJk31cxlvqZHC/BIyYXgg== + +"@francoischalifour/autocomplete-preset-algolia@^1.0.0-alpha.28": + version "1.0.0-alpha.28" + resolved "https://registry.yarnpkg.com/@francoischalifour/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.0.0-alpha.28.tgz#a5ad7996f42e43e4acbb4e0010d663746d0e9997" + integrity sha512-bprfNmYt1opFUFEtD2XfY/kEsm13bzHQgU80uMjhuK0DJ914IjolT1GytpkdM6tJ4MBvyiJPP+bTtWO+BZ7c7w== + "@graphql-tools/batch-execute@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@graphql-tools/batch-execute/-/batch-execute-7.0.0.tgz#e79d11bd5b39f29172f6ec2eafa71103c6a6c85b" @@ -5846,6 +5975,26 @@ algoliasearch@^3.24.5: semver "^5.1.0" tunnel-agent "^0.6.0" +algoliasearch@^4.0.0: + version "4.8.0" + resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-4.8.0.tgz#12bb88b4093b05a5afdc369d3e8b83036d5f4822" + integrity sha512-y2PisBS5323otDtuZuUJavk6AATBiq7M/lDryClRigpU3dHGGamtoN/8dDD4/giw38QV7dfw2LwogU6Xb4txmQ== + dependencies: + "@algolia/cache-browser-local-storage" "4.8.0" + "@algolia/cache-common" "4.8.0" + "@algolia/cache-in-memory" "4.8.0" + "@algolia/client-account" "4.8.0" + "@algolia/client-analytics" "4.8.0" + "@algolia/client-common" "4.8.0" + "@algolia/client-recommendation" "4.8.0" + "@algolia/client-search" "4.8.0" + "@algolia/logger-common" "4.8.0" + "@algolia/logger-console" "4.8.0" + "@algolia/requester-browser-xhr" "4.8.0" + "@algolia/requester-common" "4.8.0" + "@algolia/requester-node-http" "4.8.0" + "@algolia/transporter" "4.8.0" + all-contributors-cli@^6.19.0: version "6.19.0" resolved "https://registry.yarnpkg.com/all-contributors-cli/-/all-contributors-cli-6.19.0.tgz#7e4550973afede2476b62bd159fee6d72a1ad802" From 0c46cd029f2b2b5853f96ed0f28a8aa05a93ff9a Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Sun, 29 Nov 2020 17:10:22 +0400 Subject: [PATCH 02/14] chore: redesign the search bar and place it in the header --- website/pages/index.tsx | 3 +- website/src/components/container.tsx | 2 +- website/src/components/header.tsx | 7 +- website/src/components/logo.tsx | 2 +- website/src/components/search.tsx | 130 ++++++++++++++++++--------- website/theme.ts | 9 +- 6 files changed, 102 insertions(+), 51 deletions(-) diff --git a/website/pages/index.tsx b/website/pages/index.tsx index 0f9a5fbc85a..f46a77c734e 100644 --- a/website/pages/index.tsx +++ b/website/pages/index.tsx @@ -26,7 +26,6 @@ import DiscordStrip from "components/discord-strip" import { Footer } from "components/footer" import Header from "components/header" import LogoMark from "components/logo-mark" -import { Search } from "components/search" import SEO from "components/seo" import TweetCard from "components/tweet-card" import { tweets } from "configs/tweets.json" @@ -126,11 +125,11 @@ const HomePage = ({ members, sponsors }: HomePageProps) => { pt={{ base: "10rem", md: "12rem" }} pb={{ base: "0", md: "5rem" }} > - ( pb="12" pt="3" mx="auto" - maxW="1200px" + maxW="75rem" px={{ base: "2", md: "6" }} {...props} /> diff --git a/website/src/components/header.tsx b/website/src/components/header.tsx index 3c8aeb27dfb..e245b874710 100644 --- a/website/src/components/header.tsx +++ b/website/src/components/header.tsx @@ -18,6 +18,7 @@ import { FaMoon, FaSun } from "react-icons/fa" import NavLink from "./header-nav-link" import Logo from "./logo" import { MobileNavButton, MobileNavContent } from "./mobile-nav" +import { Search } from "./search" import SponsorButton from "./sponsor-button" import VersionSwitcher from "./version-switcher" @@ -73,6 +74,8 @@ function HeaderContent() { + + @@ -140,8 +143,8 @@ function Header(props) { bg={bg} left="0" right="0" - borderTop="6px solid" - borderTopColor="teal.400" + // borderTop="6px solid" + // borderTopColor="teal.400" width="full" {...props} > diff --git a/website/src/components/logo.tsx b/website/src/components/logo.tsx index ffb04f17753..16de593246f 100644 --- a/website/src/components/logo.tsx +++ b/website/src/components/logo.tsx @@ -2,7 +2,7 @@ import { chakra, useColorModeValue } from "@chakra-ui/react" import React from "react" const Logo = (props) => { - const fill = useColorModeValue("#2D3748", "#fff") + const fill = useColorModeValue("#000", "#fff") return ( { + actionKey?: string[] +} + +const SearchButton = React.forwardRef(function SearchButton( + props: SearchButtonProps, + ref: React.Ref, +) { + const { actionKey, ...rest } = props + return ( + + {actionKey && ( + + + + + + + Search the docs + + + Press + + + {actionKey[0]} + + + and + + K + + to search + + + + )} + + ) +}) + export function Search() { const router = useRouter() const [isOpen, setIsOpen] = React.useState(false) @@ -74,49 +156,11 @@ export function Search() { /> - - - - - - Quick search for anything - - {actionKey && ( - - Press - - - {actionKey[0]} - - - and - K - to search - - )} - + actionKey={actionKey} + ref={searchButtonRef} + /> {isOpen && ( ({ body: { - color: mode("gray.700", "whiteAlpha.900")(props), - fontFamily: "Inter, sans-serif", + color: mode("black", "whiteAlpha.900")(props), ".deleted": { color: "#ff8383 !important", fontStyle: "normal !important", @@ -20,6 +23,7 @@ const customTheme = extendTheme({ }, textStyles: { heading: { + fontFamily: "heading", textAlign: "center", fontWeight: "bold", letterSpacing: "-0.015em", @@ -27,6 +31,7 @@ const customTheme = extendTheme({ fontSize: { base: "2rem", md: "3.5rem" }, }, "heading-2": { + fontFamily: "heading", textAlign: "center", fontWeight: "bold", letterSpacing: "-0.015em", From f1707232719c4b8bd1f26352d6c00fbb9665f062 Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Sun, 29 Nov 2020 23:15:06 +0400 Subject: [PATCH 03/14] docs: update search ui --- website/pages/index.tsx | 6 +++--- website/src/components/header.tsx | 16 ++++++++-------- website/src/components/search.styles.tsx | 4 ++-- website/src/components/search.tsx | 22 +++++----------------- 4 files changed, 18 insertions(+), 30 deletions(-) diff --git a/website/pages/index.tsx b/website/pages/index.tsx index f46a77c734e..c9cde5bd67c 100644 --- a/website/pages/index.tsx +++ b/website/pages/index.tsx @@ -128,10 +128,10 @@ const HomePage = ({ members, sponsors }: HomePageProps) => { @@ -195,7 +195,7 @@ const HomePage = ({ members, sponsors }: HomePageProps) => { px="6" py="4" > - + diff --git a/website/src/components/header.tsx b/website/src/components/header.tsx index e245b874710..21e0629b73f 100644 --- a/website/src/components/header.tsx +++ b/website/src/components/header.tsx @@ -1,4 +1,5 @@ import { + Box, chakra, Flex, HStack, @@ -62,7 +63,7 @@ function HeaderContent() { - Docs Guides Team - + */} - - - - + + + diff --git a/website/src/components/search.styles.tsx b/website/src/components/search.styles.tsx index 9fa82241fc9..2b627c3be68 100644 --- a/website/src/components/search.styles.tsx +++ b/website/src/components/search.styles.tsx @@ -55,8 +55,8 @@ const SearchStyle = () => ( display: flex; flex-direction: column; min-height: 0; - border-radius: 1rem; - box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); + border-radius: 0.75rem; + box-shadow: ${theme.shadows.lg}; background: white; } diff --git a/website/src/components/search.tsx b/website/src/components/search.tsx index 8df4792dca8..8376c15d898 100644 --- a/website/src/components/search.tsx +++ b/website/src/components/search.tsx @@ -15,6 +15,7 @@ import { import SearchStyle from "./search.styles" import { get, startsWith } from "lodash/fp" import _ from "lodash" +import { SearchIcon } from "@chakra-ui/icons" const getLvl1 = get("hierarchy.lvl1") const startsWithCss = startsWith("css-") @@ -43,8 +44,9 @@ const SearchButton = React.forwardRef(function SearchButton( return ( - - - + Search the docs @@ -164,6 +151,7 @@ export function Search() { {isOpen && ( Date: Sun, 29 Nov 2020 23:32:08 +0400 Subject: [PATCH 04/14] docs: update search and header ui --- website/pages/index.tsx | 12 ++++++++++-- website/src/components/header.tsx | 10 ++++++++-- website/src/components/search.tsx | 3 ++- 3 files changed, 20 insertions(+), 5 deletions(-) diff --git a/website/pages/index.tsx b/website/pages/index.tsx index c9cde5bd67c..b7d1961249c 100644 --- a/website/pages/index.tsx +++ b/website/pages/index.tsx @@ -126,8 +126,10 @@ const HomePage = ({ members, sponsors }: HomePageProps) => { pb={{ base: "0", md: "5rem" }} > - + { - + Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications. diff --git a/website/src/components/header.tsx b/website/src/components/header.tsx index 21e0629b73f..4358f8aaef5 100644 --- a/website/src/components/header.tsx +++ b/website/src/components/header.tsx @@ -75,7 +75,13 @@ function HeaderContent() { */} - + @@ -104,7 +110,7 @@ function HeaderContent() { aria-label={`Switch to ${text} mode`} variant="ghost" color="current" - ml="3" + ml={{ base: "0", md: "3" }} onClick={toggleMode} icon={} /> diff --git a/website/src/components/search.tsx b/website/src/components/search.tsx index 8376c15d898..5425915af06 100644 --- a/website/src/components/search.tsx +++ b/website/src/components/search.tsx @@ -43,8 +43,8 @@ const SearchButton = React.forwardRef(function SearchButton( const { actionKey, ...rest } = props return ( Date: Mon, 30 Nov 2020 13:49:14 +0400 Subject: [PATCH 05/14] docs: add main nav links to sidebar --- packages/layout/src/stack.tsx | 5 +- website/configs/docs-sidebar.ts | 12 +- website/pages/docs/migration.mdx | 17 ++- website/pages/index.tsx | 2 +- website/src/components/header.tsx | 11 -- website/src/components/logo.tsx | 2 +- website/src/components/search.tsx | 27 ++-- .../src/components/sidebar/sidebar-icons.tsx | 140 ++++++++++++++++++ .../src/components/sidebar/sidebar-link.tsx | 11 +- website/src/components/sidebar/sidebar.tsx | 57 ++++++- website/theme.ts | 2 +- 11 files changed, 232 insertions(+), 54 deletions(-) create mode 100644 website/src/components/sidebar/sidebar-icons.tsx diff --git a/packages/layout/src/stack.tsx b/packages/layout/src/stack.tsx index 2fbbf3fecfe..ab20c8ed56d 100644 --- a/packages/layout/src/stack.tsx +++ b/packages/layout/src/stack.tsx @@ -3,13 +3,12 @@ import { ChakraComponent, forwardRef, HTMLChakraProps, - PropsOf, SystemProps, } from "@chakra-ui/system" import { cx, getValidChildren, __DEV__ } from "@chakra-ui/utils" import * as React from "react" -import { getDividerStyles, getStackStyles, selector } from "./stack.utils" import type { StackDirection } from "./stack.utils" +import { getDividerStyles, getStackStyles, selector } from "./stack.utils" export type { StackDirection } @@ -86,7 +85,7 @@ export const StackItem: ChakraComponent<"div"> = (props) => ( /> ) -export interface StackProps extends PropsOf, StackOptions {} +export interface StackProps extends HTMLChakraProps<"div">, StackOptions {} /** * Stacks help you easily create flexible and automatically distributed layouts diff --git a/website/configs/docs-sidebar.ts b/website/configs/docs-sidebar.ts index c93df3f1c4d..bc6bb77c3a1 100644 --- a/website/configs/docs-sidebar.ts +++ b/website/configs/docs-sidebar.ts @@ -1,11 +1,11 @@ const sidebar = { routes: [ { - title: "Documentation", + title: "Getting Started", heading: true, routes: [ { - title: "Getting Started", + title: "Installation", path: "/docs/getting-started", }, { @@ -16,10 +16,10 @@ const sidebar = { title: "Design Principles", path: "/docs/principles", }, - { - title: "Comparison", - path: "/docs/comparison", - }, + // { + // title: "Comparison", + // path: "/docs/comparison", + // }, { title: "Features", path: "/docs/features", diff --git a/website/pages/docs/migration.mdx b/website/pages/docs/migration.mdx index ed77687f489..6971692d908 100644 --- a/website/pages/docs/migration.mdx +++ b/website/pages/docs/migration.mdx @@ -45,17 +45,17 @@ fix it. ### 1. Update your dependencies -Install the `framer-motion` package. We use this to manage animations and -transitions within components. +- Install the `framer-motion` package. We use this to manage animations and + transitions within components. -Remove the `emotion-theming` package. As at emotion v11, `emotion-theming` as -been removed and all it's functionality as been migrated to `@emotion/react`. +- Remove the `emotion-theming` package. As at emotion v11, `emotion-theming` as + been removed and all it's functionality as been migrated to `@emotion/react`. -Rename the `@emotion/core` package to `@emotion/react`. `@emotion/core` was -recently changed to `@emotion/react` following the v11 release by the emotionjs -team. +- Rename the `@emotion/core` package to `@emotion/react`. `@emotion/core` was + recently changed to `@emotion/react` following the v11 release by the + emotionjs team. -Rename the `@chakra-ui/core` package to `@chakra-ui/react`. +- Rename the `@chakra-ui/core` package to `@chakra-ui/react`. ```diff "dependencies": { @@ -156,6 +156,7 @@ only one prop to manage this, you can rename it to `boxSize`. #### Callout `Callout` is now deprecated and you can use an `Alert` instead. + ```diff - { fontSize={{ base: "2.25rem", sm: "3rem", lg: "4rem" }} fontFamily="heading" letterSpacing="tight" - fontWeight="800" + fontWeight="bold" mb="16px" lineHeight="1.2" > diff --git a/website/src/components/header.tsx b/website/src/components/header.tsx index 4358f8aaef5..e80e07ba255 100644 --- a/website/src/components/header.tsx +++ b/website/src/components/header.tsx @@ -16,7 +16,6 @@ import { useViewportScroll } from "framer-motion" import NextLink from "next/link" import React from "react" import { FaMoon, FaSun } from "react-icons/fa" -import NavLink from "./header-nav-link" import Logo from "./logo" import { MobileNavButton, MobileNavContent } from "./mobile-nav" import { Search } from "./search" @@ -63,16 +62,6 @@ function HeaderContent() { - {/* - Docs - Guides - Team - */} { - const fill = useColorModeValue("#000", "#fff") + const fill = useColorModeValue("#2D3748", "#fff") return ( {actionKey && ( - + <> @@ -87,7 +86,7 @@ const SearchButton = React.forwardRef(function SearchButton( to search - + )} ) diff --git a/website/src/components/sidebar/sidebar-icons.tsx b/website/src/components/sidebar/sidebar-icons.tsx new file mode 100644 index 00000000000..cd32b2d2352 --- /dev/null +++ b/website/src/components/sidebar/sidebar-icons.tsx @@ -0,0 +1,140 @@ +import { chakra, HTMLChakraProps } from "@chakra-ui/react" +import * as React from "react" + +export const DocsIcon = (props: HTMLChakraProps<"svg">) => { + return ( + + + + + + ) +} + +export const GuidesIcon = (props: HTMLChakraProps<"svg">) => { + return ( + + + + + ) +} + +export const TeamIcon = (props: HTMLChakraProps<"svg">) => { + return ( + + + + + + + ) +} + +export const ResourcesIcon = (props: HTMLChakraProps<"svg">) => { + return ( + + + + + ) +} + +export const BlogIcon = (props: HTMLChakraProps<"svg">) => { + return ( + + + + + + + ) +} diff --git a/website/src/components/sidebar/sidebar-link.tsx b/website/src/components/sidebar/sidebar-link.tsx index 6a46a7b78eb..94f11a8708b 100644 --- a/website/src/components/sidebar/sidebar-link.tsx +++ b/website/src/components/sidebar/sidebar-link.tsx @@ -18,16 +18,13 @@ const StyledLink = React.forwardRef(function StyledLink( rounded="md" ref={ref} fontSize="sm" - fontWeight="medium" + fontWeight="500" color={useColorModeValue("gray.700", "whiteAlpha.900")} transition="all 0.2s" - _hover={{ - bg: useColorModeValue("gray.100", "whiteAlpha.100"), - }} _activeLink={{ - bg: useColorModeValue("teal.100", "rgba(48, 140, 122, 0.3)"), - color: useColorModeValue("gray.800", "teal.200"), - fontWeight: "semibold", + bg: useColorModeValue("teal.50", "rgba(48, 140, 122, 0.3)"), + color: useColorModeValue("teal.700", "teal.200"), + fontWeight: "600", }} {...rest} /> diff --git a/website/src/components/sidebar/sidebar.tsx b/website/src/components/sidebar/sidebar.tsx index a62b9cf0146..926ea3217b3 100644 --- a/website/src/components/sidebar/sidebar.tsx +++ b/website/src/components/sidebar/sidebar.tsx @@ -1,9 +1,20 @@ -import { Box, chakra, Stack, useColorModeValue } from "@chakra-ui/react" +import { + Box, + BoxProps, + Center, + chakra, + Flex, + Stack, + useColorModeValue, + VStack, +} from "@chakra-ui/react" import { useRouter } from "next/router" import * as React from "react" import { Routes } from "utils/get-route-context" import SidebarCategory from "./sidebar-category" import SidebarLink from "./sidebar-link" +import NextLink from "next/link" +import { DocsIcon, GuidesIcon, TeamIcon } from "./sidebar-icons" export type SidebarContentProps = Routes & { pathname?: string @@ -67,6 +78,48 @@ export function SidebarContent(props: SidebarContentProps) { ) } +const MainNavLink = ({ href, icon, children }) => { + const { pathname } = useRouter() + const [, group] = href.split("/") + const active = pathname.includes(group) + + return ( + + +
+ {icon} +
+ {children} + + + ) +} + +const MainNav = (props: BoxProps) => { + return ( + + } href="/docs/getting-started"> + Docs + + } href="/guides/integrations/with-cra"> + Guides + + } href="/team"> + Team + + + ) +} + const Sidebar = ({ routes }) => { const { pathname } = useRouter() const ref = React.useRef(null) @@ -87,7 +140,7 @@ const Sidebar = ({ routes }) => { h="calc(((100vh - 1.5rem) - 64px) - 42px);" display={{ base: "none", md: "block" }} > - {/* */} + ) diff --git a/website/theme.ts b/website/theme.ts index ec4ef29f2d8..b7e7e8521b6 100644 --- a/website/theme.ts +++ b/website/theme.ts @@ -9,7 +9,7 @@ const customTheme = extendTheme({ styles: { global: (props) => ({ body: { - color: mode("black", "whiteAlpha.900")(props), + color: mode("gray.700", "whiteAlpha.900")(props), ".deleted": { color: "#ff8383 !important", fontStyle: "normal !important", From 6b52741456f71ba4ec8cfe3e6307796d195adf5b Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Mon, 30 Nov 2020 13:50:29 +0400 Subject: [PATCH 06/14] chore: add changeset for stack changes --- .changeset/cold-ants-battle.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/cold-ants-battle.md diff --git a/.changeset/cold-ants-battle.md b/.changeset/cold-ants-battle.md new file mode 100644 index 00000000000..d37fae98f0a --- /dev/null +++ b/.changeset/cold-ants-battle.md @@ -0,0 +1,5 @@ +--- +"@chakra-ui/layout": patch +--- + +fix prop type interface for stack From df056a3ea53b7120dfcfba4f72121653c19311bc Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Mon, 30 Nov 2020 21:27:00 +0400 Subject: [PATCH 07/14] feat: happy with the search modal now --- .all-sponsorsrc | 68 +- package.json | 5 +- scripts/get-search-meta.ts | 94 + website/configs/search-meta.json | 7052 +++++++++++++++++++++ website/package.json | 8 +- website/pages/index.tsx | 1 + website/src/components/algolia-search.tsx | 293 +- website/src/components/header.tsx | 5 +- website/src/components/omni-search.tsx | 315 + website/src/components/search.tsx | 196 - yarn.lock | 228 +- 11 files changed, 7913 insertions(+), 352 deletions(-) create mode 100644 scripts/get-search-meta.ts create mode 100644 website/configs/search-meta.json create mode 100644 website/src/components/omni-search.tsx delete mode 100644 website/src/components/search.tsx diff --git a/.all-sponsorsrc b/.all-sponsorsrc index cb551c27817..702ef7656f3 100644 --- a/.all-sponsorsrc +++ b/.all-sponsorsrc @@ -7,7 +7,7 @@ "role": "ADMIN", "isActive": true, "totalAmountDonated": 0, - "lastTransactionAt": "2020-11-08 20:07", + "lastTransactionAt": "2020-11-30 16:17", "lastTransactionAmount": 0, "profile": "https://opencollective.com/segun-adebayo", "name": "Segun Adebayo", @@ -206,7 +206,7 @@ "type": "USER", "role": "BACKER", "tier": "Bronze Backer 🥉", - "isActive": false, + "isActive": true, "totalAmountDonated": 70, "currency": "USD", "lastTransactionAt": "2020-10-01 05:15", @@ -659,13 +659,13 @@ "lastTransactionAmount": 5, "profile": "https://opencollective.com/andrew-miracle", "name": "Andrew Miracle", - "company": null, - "description": null, + "company": "", + "description": "building for the community", "image": "/avatars/122920.jpg", "email": null, - "twitter": null, - "github": null, - "website": null + "twitter": "https://twitter.com/koolamusic", + "github": "https://github.com/koolamusic", + "website": "https://andrewmiracle.com" }, { "MemberId": 123683, @@ -736,7 +736,7 @@ "type": "USER", "role": "BACKER", "tier": "Silver Backer 🥈", - "isActive": false, + "isActive": true, "totalAmountDonated": 50, "currency": "USD", "lastTransactionAt": "2020-10-02 15:30", @@ -791,6 +791,46 @@ "twitter": "https://twitter.com/ajitsonlion", "github": null, "website": "https://www.blog.ajitsonlion.com" + }, + { + "MemberId": 140693, + "createdAt": "2020-11-15 03:48", + "type": "USER", + "role": "BACKER", + "isActive": true, + "totalAmountDonated": 5, + "currency": "USD", + "lastTransactionAt": "2020-11-15 03:48", + "lastTransactionAmount": 5, + "profile": "https://opencollective.com/brady-dukart", + "name": "Brady Dukart", + "company": null, + "description": null, + "image": "/avatars/140693.jpg", + "email": null, + "twitter": null, + "github": null, + "website": null + }, + { + "MemberId": 141165, + "createdAt": "2020-11-16 22:43", + "type": "USER", + "role": "BACKER", + "isActive": true, + "totalAmountDonated": 5, + "currency": "USD", + "lastTransactionAt": "2020-11-16 22:43", + "lastTransactionAmount": 5, + "profile": "https://opencollective.com/nathan-simpson", + "name": "Nathan Simpson", + "company": null, + "description": null, + "image": "/avatars/141165.jpg", + "email": null, + "twitter": null, + "github": null, + "website": null } ], "companies": [ @@ -801,7 +841,7 @@ "role": "HOST", "isActive": true, "totalAmountDonated": 0, - "lastTransactionAt": "2020-11-08 20:07", + "lastTransactionAt": "2020-11-30 16:17", "lastTransactionAmount": 0, "profile": "https://opencollective.com/opensource", "name": "Open Source Collective 501(c)(6)", @@ -820,7 +860,7 @@ "role": "BACKER", "isActive": true, "totalAmountDonated": 18, - "lastTransactionAt": "2020-11-08 20:07", + "lastTransactionAt": "2020-11-30 16:17", "lastTransactionAmount": 0, "profile": "https://opencollective.com/triplebyte", "name": "Triplebyte", @@ -839,7 +879,7 @@ "role": "BACKER", "isActive": true, "totalAmountDonated": 15, - "lastTransactionAt": "2020-11-08 20:07", + "lastTransactionAt": "2020-11-30 16:17", "lastTransactionAmount": 0, "profile": "https://opencollective.com/thinkmill", "name": "Thinkmill", @@ -897,7 +937,7 @@ "type": "ORGANIZATION", "role": "BACKER", "tier": "sponsor", - "isActive": false, + "isActive": true, "totalAmountDonated": 820, "currency": "USD", "lastTransactionAt": "2020-10-01 05:09", @@ -1064,9 +1104,9 @@ "type": "ORGANIZATION", "role": "BACKER", "isActive": true, - "totalAmountDonated": 50, + "totalAmountDonated": 100, "currency": "USD", - "lastTransactionAt": "2020-09-15 08:27", + "lastTransactionAt": "2020-11-22 17:23", "lastTransactionAmount": 50, "profile": "https://opencollective.com/ada-school", "name": "ADA School", diff --git a/package.json b/package.json index 98f833f45d4..a1dcce175c2 100644 --- a/package.json +++ b/package.json @@ -45,13 +45,14 @@ "build:storybook": "build-storybook && sb extract", "members:gen": "ts-node scripts/all-members.ts", "avatars:gen": "ts-node scripts/avatars.ts", + "search-meta:gen": "ts-node scripts/get-search-meta.ts", "create-pkg": "node scripts/create-package.js", "prerelease": "yarn build", "release": "changeset publish", "docs": "yarn workspace @chakra-ui/docs", "docs:deploy": "yarn build && yarn docs:build-ci && cp -r website/public .", "docs:build-ci": "yarn members:gen && yarn docs:build", - "docs:build": "yarn avatars:gen && yarn docs build", + "docs:build": "yarn avatars:gen && yarn search-meta:gen && yarn docs build", "docs:dev": "yarn avatars:gen && yarn docs dev", "docs:start": "yarn docs start", "dedup": "yarn-deduplicate --strategy highest yarn.lock" @@ -131,6 +132,7 @@ "lerna": "^3.22.1", "lint-staged": "^10.4.2", "listr": "^0.14.3", + "markdown-toc": "^1.2.0", "mkdirp": "^1.0.4", "ncp": "^2.0.0", "node-fetch": "^2.6.1", @@ -151,6 +153,7 @@ "ts-jest": "^26.4.2", "ts-node": "^9.0.0", "typescript": "^4.0.5", + "uuid": "8.3.1", "yarn-deduplicate": "^3.0.0" } } diff --git a/scripts/get-search-meta.ts b/scripts/get-search-meta.ts new file mode 100644 index 00000000000..119e07fe547 --- /dev/null +++ b/scripts/get-search-meta.ts @@ -0,0 +1,94 @@ +import { parseMarkdownFile, fileToPath, removePrefix } from "@docusaurus/utils" +import path from "path" +import toc from "markdown-toc" +import { v4 as uuid } from "uuid" +import shell from "shelljs" +import fs from "graceful-fs" +import prettier from "prettier" + +interface ResultType { + content: string + id: string + url: string + type: "lvl1" | "lvl2" | "lvl3" + hierarchy: { + lvl1: string | null + lvl2?: string | null + lvl3?: string | null + } +} + +interface TOCResultItem { + content: string + slug: string + lvl: 1 | 2 | 3 + i: number + seen: number +} + +const websiteRoot = "website/pages" + +async function getMDXMeta(file: string) { + const { content, frontMatter } = await parseMarkdownFile(file) + const tableOfContent = toc(content) + const json = tableOfContent.json as TOCResultItem[] + const slug = fileToPath(file) + .replace(`/${websiteRoot}`, "") + .replace(process.cwd(), "") + + const result: ResultType[] = [] + + result.push({ + content: frontMatter.title, + id: uuid(), + type: "lvl1", + url: removePrefix(slug, "/"), + hierarchy: { + lvl1: frontMatter.title, + }, + }) + + json.forEach((item, index) => { + result.push({ + content: item.content, + id: uuid(), + type: `lvl${item.lvl}` as any, + url: removePrefix(slug, "/") + `#${item.slug}`, + hierarchy: { + lvl1: frontMatter.title, + lvl2: item.lvl === 2 ? item.content : json[index - 1]?.content ?? null, + lvl3: item.lvl === 3 ? item.content : null, + }, + }) + }) + + return result +} + +async function getSearchMeta() { + let json: any = [] + + const files = shell + .ls("-R", websiteRoot) + .map((file) => path.join(process.cwd(), websiteRoot, file)) + .filter((file) => file.endsWith(".mdx")) + + for (const file of files) { + let result: any[] = [] + try { + result = await getMDXMeta(file) + json.push(...result) + } catch (error) {} + } + + json = prettier.format(JSON.stringify(json), { parser: "json" }) + const outPath = path.join( + process.cwd(), + "website/configs", + "search-meta.json", + ) + fs.writeFileSync(outPath, json) + console.log("Search meta is ready ✅") +} + +getSearchMeta() diff --git a/website/configs/search-meta.json b/website/configs/search-meta.json new file mode 100644 index 00000000000..20fc717b98a --- /dev/null +++ b/website/configs/search-meta.json @@ -0,0 +1,7052 @@ +[ + { + "content": "Comparison", + "id": "47a77771-c75d-4050-87d6-9678d37f01eb", + "type": "lvl1", + "url": "/docs/comparison", + "hierarchy": { "lvl1": "Comparison" } + }, + { + "content": "How is Chakra different from Tailwind CSS?", + "id": "0bc185f2-fae8-4d6e-b2f2-cf72e96e63a8", + "type": "lvl2", + "url": "/docs/comparison#how-is-chakra-different-from-tailwind-css", + "hierarchy": { + "lvl1": "Comparison", + "lvl2": "How is Chakra different from Tailwind CSS?", + "lvl3": null + } + }, + { + "content": "Overview 🚩", + "id": "12c1acd3-2d9e-437e-ac68-5907d68b86a1", + "type": "lvl3", + "url": "/docs/comparison#overview-🚩", + "hierarchy": { + "lvl1": "Comparison", + "lvl2": "How is Chakra different from Tailwind CSS?", + "lvl3": "Overview 🚩" + } + }, + { + "content": "Learning Curve 🌀", + "id": "7d73211b-4a5c-4b03-836a-87149e19a818", + "type": "lvl3", + "url": "/docs/comparison#learning-curve-🌀", + "hierarchy": { + "lvl1": "Comparison", + "lvl2": "Overview 🚩", + "lvl3": "Learning Curve 🌀" + } + }, + { + "content": "Responsive Styles 📱", + "id": "945842ff-a568-487c-98e2-8b5bd12444b5", + "type": "lvl3", + "url": "/docs/comparison#responsive-styles-📱", + "hierarchy": { + "lvl1": "Comparison", + "lvl2": "Learning Curve 🌀", + "lvl3": "Responsive Styles 📱" + } + }, + { + "content": "Style Overrides 💫", + "id": "e2838acc-73c2-4ed9-80f6-3caa87f3d7d9", + "type": "lvl3", + "url": "/docs/comparison#style-overrides-💫", + "hierarchy": { + "lvl1": "Comparison", + "lvl2": "Responsive Styles 📱", + "lvl3": "Style Overrides 💫" + } + }, + { + "content": "Accessibility ♿️", + "id": "5f437d08-1532-44f7-9a46-6ade9fb0c8af", + "type": "lvl3", + "url": "/docs/comparison#accessibility-♿️", + "hierarchy": { + "lvl1": "Comparison", + "lvl2": "Style Overrides 💫", + "lvl3": "Accessibility ♿️" + } + }, + { + "content": "Dark Mode 🌜", + "id": "fd431f13-cd24-477b-9473-b030a359adfd", + "type": "lvl3", + "url": "/docs/comparison#dark-mode-🌜", + "hierarchy": { + "lvl1": "Comparison", + "lvl2": "Accessibility ♿️", + "lvl3": "Dark Mode 🌜" + } + }, + { + "content": "How is Chakra different from Theme UI?", + "id": "5982c23c-46f6-4e6c-9bc0-9c62997d09dd", + "type": "lvl2", + "url": "/docs/comparison#how-is-chakra-different-from-theme-ui", + "hierarchy": { + "lvl1": "Comparison", + "lvl2": "How is Chakra different from Theme UI?", + "lvl3": null + } + }, + { + "content": "How is Chakra different from Material UI?", + "id": "a58ffc98-ba4a-4348-aa93-3ef4345b010c", + "type": "lvl2", + "url": "/docs/comparison#how-is-chakra-different-from-material-ui", + "hierarchy": { + "lvl1": "Comparison", + "lvl2": "How is Chakra different from Material UI?", + "lvl3": null + } + }, + { + "content": "How is Chakra different from Ant Design?", + "id": "b79807de-57c1-439f-9bdb-b8930735d58b", + "type": "lvl2", + "url": "/docs/comparison#how-is-chakra-different-from-ant-design", + "hierarchy": { + "lvl1": "Comparison", + "lvl2": "How is Chakra different from Ant Design?", + "lvl3": null + } + }, + { + "content": "The Runtime Trade-off ⚠️", + "id": "ad98bfb5-047d-4193-a7b9-3911e97cd376", + "type": "lvl2", + "url": "/docs/comparison#the-runtime-trade-off-⚠️", + "hierarchy": { + "lvl1": "Comparison", + "lvl2": "The Runtime Trade-off ⚠️", + "lvl3": null + } + }, + { + "content": "The Community 💖", + "id": "761fc8d3-2a80-43e4-81c8-ec203703c131", + "type": "lvl2", + "url": "/docs/comparison#the-community-💖", + "hierarchy": { + "lvl1": "Comparison", + "lvl2": "The Community 💖", + "lvl3": null + } + }, + { + "content": "Community Remarks 💬", + "id": "21429eb3-ea92-43bd-8b1b-011cce04c6d5", + "type": "lvl2", + "url": "/docs/comparison#community-remarks-💬", + "hierarchy": { + "lvl1": "Comparison", + "lvl2": "Community Remarks 💬", + "lvl3": null + } + }, + { + "content": "Accordion", + "id": "e4865696-252f-4f73-b7a4-c48ea6d8f2a1", + "type": "lvl1", + "url": "/docs/components/accordion", + "hierarchy": { "lvl1": "Accordion" } + }, + { + "content": "Import", + "id": "241f58e6-053a-4efa-bdc3-bc8fac396254", + "type": "lvl2", + "url": "/docs/components/accordion#import", + "hierarchy": { "lvl1": "Accordion", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "f53c29c5-9e40-48f9-8362-2332f6ac8f84", + "type": "lvl2", + "url": "/docs/components/accordion#usage", + "hierarchy": { "lvl1": "Accordion", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Expand multiple items at once", + "id": "094efba6-b43e-4c98-bfb2-0f1d0eddd4fe", + "type": "lvl3", + "url": "/docs/components/accordion#expand-multiple-items-at-once", + "hierarchy": { + "lvl1": "Accordion", + "lvl2": "Usage", + "lvl3": "Expand multiple items at once" + } + }, + { + "content": "Toggle each accordion item", + "id": "80ab7507-a06e-444a-bcf1-d7f04affb290", + "type": "lvl3", + "url": "/docs/components/accordion#toggle-each-accordion-item", + "hierarchy": { + "lvl1": "Accordion", + "lvl2": "Expand multiple items at once", + "lvl3": "Toggle each accordion item" + } + }, + { + "content": "Styling the expanded state", + "id": "45f69dca-54cb-4734-bc73-f39fe1a339fb", + "type": "lvl3", + "url": "/docs/components/accordion#styling-the-expanded-state", + "hierarchy": { + "lvl1": "Accordion", + "lvl2": "Toggle each accordion item", + "lvl3": "Styling the expanded state" + } + }, + { + "content": "Accessing the internal state", + "id": "473ec02d-0aa2-47de-a558-0dbd048b5bfc", + "type": "lvl3", + "url": "/docs/components/accordion#accessing-the-internal-state", + "hierarchy": { + "lvl1": "Accordion", + "lvl2": "Styling the expanded state", + "lvl3": "Accessing the internal state" + } + }, + { + "content": "Accessibility", + "id": "2cfab4da-0268-4067-9291-1df387addb96", + "type": "lvl2", + "url": "/docs/components/accordion#accessibility", + "hierarchy": { "lvl1": "Accordion", "lvl2": "Accessibility", "lvl3": null } + }, + { + "content": "Props", + "id": "a3fe8ea7-16b4-4e4f-977d-7c390f45fa3c", + "type": "lvl2", + "url": "/docs/components/accordion#props", + "hierarchy": { "lvl1": "Accordion", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Accordion Props", + "id": "d11a3ad4-1e06-4d4f-8f8c-f2a65a1bf1dc", + "type": "lvl3", + "url": "/docs/components/accordion#accordion-props", + "hierarchy": { + "lvl1": "Accordion", + "lvl2": "Props", + "lvl3": "Accordion Props" + } + }, + { + "content": "AccordionItem Props", + "id": "8a370aa8-8a3a-48ff-a6da-c161f937a520", + "type": "lvl3", + "url": "/docs/components/accordion#accordionitem-props", + "hierarchy": { + "lvl1": "Accordion", + "lvl2": "Accordion Props", + "lvl3": "AccordionItem Props" + } + }, + { + "content": "AccordionButton Props", + "id": "3599ae52-0296-4267-baa5-c2c2860034e5", + "type": "lvl3", + "url": "/docs/components/accordion#accordionbutton-props", + "hierarchy": { + "lvl1": "Accordion", + "lvl2": "AccordionItem Props", + "lvl3": "AccordionButton Props" + } + }, + { + "content": "AccordionPanel Props", + "id": "896ba2b2-85e2-4a0b-9b0d-25c6f2f5b739", + "type": "lvl3", + "url": "/docs/components/accordion#accordionpanel-props", + "hierarchy": { + "lvl1": "Accordion", + "lvl2": "AccordionButton Props", + "lvl3": "AccordionPanel Props" + } + }, + { + "content": "Breadcrumb", + "id": "66b1033c-1981-400b-81e2-051e199d8517", + "type": "lvl1", + "url": "/docs/components/breadcrumb", + "hierarchy": { "lvl1": "Breadcrumb" } + }, + { + "content": "Import", + "id": "573c285d-7be4-4311-8ed4-8d0c1e65ea8a", + "type": "lvl2", + "url": "/docs/components/breadcrumb#import", + "hierarchy": { "lvl1": "Breadcrumb", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "9d551f0b-a768-4981-bbb3-1b5eec267a6d", + "type": "lvl2", + "url": "/docs/components/breadcrumb#usage", + "hierarchy": { "lvl1": "Breadcrumb", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Separators", + "id": "b23958c8-72b0-4798-8aa4-e0fd25d9974e", + "type": "lvl3", + "url": "/docs/components/breadcrumb#separators", + "hierarchy": { "lvl1": "Breadcrumb", "lvl2": "Usage", "lvl3": "Separators" } + }, + { + "content": "Using an icon as the separator", + "id": "0254cd71-28ee-4130-92e2-17941ebeff2a", + "type": "lvl3", + "url": "/docs/components/breadcrumb#using-an-icon-as-the-separator", + "hierarchy": { + "lvl1": "Breadcrumb", + "lvl2": "Separators", + "lvl3": "Using an icon as the separator" + } + }, + { + "content": "Composition", + "id": "7d017102-c659-4978-9d04-6a0aecd04785", + "type": "lvl2", + "url": "/docs/components/breadcrumb#composition", + "hierarchy": { "lvl1": "Breadcrumb", "lvl2": "Composition", "lvl3": null } + }, + { + "content": "Usage with Routing Library", + "id": "0eae462d-6d3d-4212-9bde-aa833d830cae", + "type": "lvl2", + "url": "/docs/components/breadcrumb#usage-with-routing-library", + "hierarchy": { + "lvl1": "Breadcrumb", + "lvl2": "Usage with Routing Library", + "lvl3": null + } + }, + { + "content": "Accessibility", + "id": "1c6060c7-3af5-48e4-90fe-e8853e13041f", + "type": "lvl2", + "url": "/docs/components/breadcrumb#accessibility", + "hierarchy": { "lvl1": "Breadcrumb", "lvl2": "Accessibility", "lvl3": null } + }, + { + "content": "Props", + "id": "b4f265f5-1279-48b3-9976-b6907f357bcd", + "type": "lvl2", + "url": "/docs/components/breadcrumb#props", + "hierarchy": { "lvl1": "Breadcrumb", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Breadcrumb Props", + "id": "c5831be2-9fda-44d3-aa88-5b0a6288573d", + "type": "lvl3", + "url": "/docs/components/breadcrumb#breadcrumb-props", + "hierarchy": { + "lvl1": "Breadcrumb", + "lvl2": "Props", + "lvl3": "Breadcrumb Props" + } + }, + { + "content": "BreadcrumbItem Props", + "id": "07a49fad-6437-4afd-856a-e8e332f68bbd", + "type": "lvl3", + "url": "/docs/components/breadcrumb#breadcrumbitem-props", + "hierarchy": { + "lvl1": "Breadcrumb", + "lvl2": "Breadcrumb Props", + "lvl3": "BreadcrumbItem Props" + } + }, + { + "content": "BreadcrumbLink Props", + "id": "ca4188e0-5fa5-48b9-8d95-4eab4c258db4", + "type": "lvl3", + "url": "/docs/components/breadcrumb#breadcrumblink-props", + "hierarchy": { + "lvl1": "Breadcrumb", + "lvl2": "BreadcrumbItem Props", + "lvl3": "BreadcrumbLink Props" + } + }, + { + "content": "BreadcrumbSeparator Props", + "id": "61488807-eee3-47c3-91fe-05e0e6a55dcf", + "type": "lvl3", + "url": "/docs/components/breadcrumb#breadcrumbseparator-props", + "hierarchy": { + "lvl1": "Breadcrumb", + "lvl2": "BreadcrumbLink Props", + "lvl3": "BreadcrumbSeparator Props" + } + }, + { + "content": "CloseButton", + "id": "80ac0b93-f8ab-4315-88a0-98f3e7077362", + "type": "lvl1", + "url": "/docs/components/close-button", + "hierarchy": { "lvl1": "CloseButton" } + }, + { + "content": "Import", + "id": "b17e25a3-18db-4541-937a-1ccf8cb6ff58", + "type": "lvl2", + "url": "/docs/components/close-button#import", + "hierarchy": { "lvl1": "CloseButton", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "250638cb-e681-4b90-8f50-31aa422393a6", + "type": "lvl2", + "url": "/docs/components/close-button#usage", + "hierarchy": { "lvl1": "CloseButton", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Button Size", + "id": "2bc83a73-1603-40d2-9ea4-8099a46010b5", + "type": "lvl3", + "url": "/docs/components/close-button#button-size", + "hierarchy": { + "lvl1": "CloseButton", + "lvl2": "Usage", + "lvl3": "Button Size" + } + }, + { + "content": "Props", + "id": "1fa284d7-fbfe-430e-9123-782e17c01211", + "type": "lvl2", + "url": "/docs/components/close-button#props", + "hierarchy": { "lvl1": "CloseButton", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Icon", + "id": "d76afa99-b864-4d2c-b4bf-bf2106aa0cb6", + "type": "lvl1", + "url": "/docs/components/icon", + "hierarchy": { "lvl1": "Icon" } + }, + { + "content": "Using Chakra UI icons", + "id": "2f010552-e1d6-40a2-a9ea-585a2c30de70", + "type": "lvl2", + "url": "/docs/components/icon#using-chakra-ui-icons", + "hierarchy": { + "lvl1": "Icon", + "lvl2": "Using Chakra UI icons", + "lvl3": null + } + }, + { + "content": "Installation", + "id": "c72b3fbc-692d-49b0-94db-2c53b8adfd7d", + "type": "lvl3", + "url": "/docs/components/icon#installation", + "hierarchy": { + "lvl1": "Icon", + "lvl2": "Using Chakra UI icons", + "lvl3": "Installation" + } + }, + { + "content": "Usage", + "id": "d0c75722-21eb-4347-a112-6508b0b20ee9", + "type": "lvl3", + "url": "/docs/components/icon#usage", + "hierarchy": { "lvl1": "Icon", "lvl2": "Installation", "lvl3": "Usage" } + }, + { + "content": "All Icons", + "id": "eb7a0754-0375-4138-8786-9532acefb9cc", + "type": "lvl3", + "url": "/docs/components/icon#all-icons", + "hierarchy": { "lvl1": "Icon", "lvl2": "Usage", "lvl3": "All Icons" } + }, + { + "content": "Using a third-party icon library", + "id": "e3f57923-4bff-4c9d-a8ce-4e4ae346f3f8", + "type": "lvl2", + "url": "/docs/components/icon#using-a-third-party-icon-library", + "hierarchy": { + "lvl1": "Icon", + "lvl2": "Using a third-party icon library", + "lvl3": null + } + }, + { + "content": "Some Examples", + "id": "ccfc436b-1d34-4a10-84b5-c06f09c6db43", + "type": "lvl3", + "url": "/docs/components/icon#some-examples", + "hierarchy": { + "lvl1": "Icon", + "lvl2": "Using a third-party icon library", + "lvl3": "Some Examples" + } + }, + { + "content": "Creating your custom icons", + "id": "b87496c3-2ebe-4ffb-b713-f24909241d1a", + "type": "lvl2", + "url": "/docs/components/icon#creating-your-custom-icons", + "hierarchy": { + "lvl1": "Icon", + "lvl2": "Creating your custom icons", + "lvl3": null + } + }, + { + "content": "Using the `Icon` component", + "id": "0361b9ba-996b-418b-8813-5498e666db95", + "type": "lvl3", + "url": "/docs/components/icon#using-the-icon-component", + "hierarchy": { + "lvl1": "Icon", + "lvl2": "Creating your custom icons", + "lvl3": "Using the `Icon` component" + } + }, + { + "content": "Using the `createIcon` function", + "id": "655912d3-65da-489b-b4a8-ce1cb55d4d2c", + "type": "lvl3", + "url": "/docs/components/icon#using-the-createicon-function", + "hierarchy": { + "lvl1": "Icon", + "lvl2": "Using the `Icon` component", + "lvl3": "Using the `createIcon` function" + } + }, + { + "content": "Tips for generating your own icons", + "id": "24ee980e-164f-4c1f-b880-20b166e93b0a", + "type": "lvl3", + "url": "/docs/components/icon#tips-for-generating-your-own-icons", + "hierarchy": { + "lvl1": "Icon", + "lvl2": "Using the `createIcon` function", + "lvl3": "Tips for generating your own icons" + } + }, + { + "content": "Fallback Icon", + "id": "2e875fff-30e4-42c3-888e-d3eb1178b66a", + "type": "lvl2", + "url": "/docs/components/icon#fallback-icon", + "hierarchy": { "lvl1": "Icon", "lvl2": "Fallback Icon", "lvl3": null } + }, + { + "content": "Props", + "id": "68c88a5a-444d-4498-836f-678a81504363", + "type": "lvl2", + "url": "/docs/components/icon#props", + "hierarchy": { "lvl1": "Icon", "lvl2": "Props", "lvl3": null } + }, + { + "content": "`Icon` props", + "id": "1e046006-0d0a-42dc-aa52-422365aa2722", + "type": "lvl3", + "url": "/docs/components/icon#icon-props", + "hierarchy": { "lvl1": "Icon", "lvl2": "Props", "lvl3": "`Icon` props" } + }, + { + "content": "`createIcon` options", + "id": "aa3d9ccd-8bb1-43ab-957f-f37c62b7b755", + "type": "lvl2", + "url": "/docs/components/icon#createicon-options", + "hierarchy": { + "lvl1": "Icon", + "lvl2": "`createIcon` options", + "lvl3": null + } + }, + { + "content": "Link", + "id": "ab938ff1-57a5-4e31-a863-b339ca8da978", + "type": "lvl1", + "url": "/docs/components/link", + "hierarchy": { "lvl1": "Link" } + }, + { + "content": "Import", + "id": "c4ad6d3d-1b92-46ac-9359-b1751e35409a", + "type": "lvl2", + "url": "/docs/components/link#import", + "hierarchy": { "lvl1": "Link", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "c9a469a6-c2fb-4e22-82db-08e27b398517", + "type": "lvl2", + "url": "/docs/components/link#usage", + "hierarchy": { "lvl1": "Link", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "External Link", + "id": "0ea4b3e6-c1b9-4f1b-a756-208b6009706d", + "type": "lvl3", + "url": "/docs/components/link#external-link", + "hierarchy": { "lvl1": "Link", "lvl2": "Usage", "lvl3": "External Link" } + }, + { + "content": "Link inline with text", + "id": "4e4c215d-b831-42e7-961c-b6525414bbb6", + "type": "lvl3", + "url": "/docs/components/link#link-inline-with-text", + "hierarchy": { + "lvl1": "Link", + "lvl2": "External Link", + "lvl3": "Link inline with text" + } + }, + { + "content": "Usage with Routing Library", + "id": "32b0e999-64dd-4131-93a7-b85198dc520a", + "type": "lvl2", + "url": "/docs/components/link#usage-with-routing-library", + "hierarchy": { + "lvl1": "Link", + "lvl2": "Usage with Routing Library", + "lvl3": null + } + }, + { + "content": "Props", + "id": "37b5e26b-0ab6-406d-aaa6-9e047382a433", + "type": "lvl2", + "url": "/docs/components/link#props", + "hierarchy": { "lvl1": "Link", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Tabs", + "id": "7e303a6b-bf8b-4f29-8d78-c1e76b106edb", + "type": "lvl1", + "url": "/docs/components/tabs", + "hierarchy": { "lvl1": "Tabs" } + }, + { + "content": "Import", + "id": "f3802ec3-2049-432f-bb3f-7ab1a228cb95", + "type": "lvl2", + "url": "/docs/components/tabs#import", + "hierarchy": { "lvl1": "Tabs", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "421dd3fb-5f72-4905-b133-fec4b9cf3875", + "type": "lvl2", + "url": "/docs/components/tabs#usage", + "hierarchy": { "lvl1": "Tabs", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Tab variants and color", + "id": "c9e01b88-feb0-4a5c-ac6b-bf457c83bd32", + "type": "lvl3", + "url": "/docs/components/tabs#tab-variants-and-color", + "hierarchy": { + "lvl1": "Tabs", + "lvl2": "Usage", + "lvl3": "Tab variants and color" + } + }, + { + "content": "Tab sizes", + "id": "f4b0afaa-87b9-431c-9cb8-a547af4154df", + "type": "lvl3", + "url": "/docs/components/tabs#tab-sizes", + "hierarchy": { + "lvl1": "Tabs", + "lvl2": "Tab variants and color", + "lvl3": "Tab sizes" + } + }, + { + "content": "Changing the tabs alignment", + "id": "d564f356-d647-4a7b-b2f9-5dd66a857fc6", + "type": "lvl3", + "url": "/docs/components/tabs#changing-the-tabs-alignment", + "hierarchy": { + "lvl1": "Tabs", + "lvl2": "Tab sizes", + "lvl3": "Changing the tabs alignment" + } + }, + { + "content": "Fitted Tabs", + "id": "ddf348dd-8251-4947-a107-6d5cb61e06d3", + "type": "lvl3", + "url": "/docs/components/tabs#fitted-tabs", + "hierarchy": { + "lvl1": "Tabs", + "lvl2": "Changing the tabs alignment", + "lvl3": "Fitted Tabs" + } + }, + { + "content": "Styling the tab states via props", + "id": "b1b44c04-f29c-4dab-8031-885c1cd18504", + "type": "lvl3", + "url": "/docs/components/tabs#styling-the-tab-states-via-props", + "hierarchy": { + "lvl1": "Tabs", + "lvl2": "Fitted Tabs", + "lvl3": "Styling the tab states via props" + } + }, + { + "content": "Tabs onChange", + "id": "86a8426c-3f18-4370-a6bd-cad3bba8bedb", + "type": "lvl3", + "url": "/docs/components/tabs#tabs-onchange", + "hierarchy": { + "lvl1": "Tabs", + "lvl2": "Styling the tab states via props", + "lvl3": "Tabs onChange" + } + }, + { + "content": "Make a tab initially active", + "id": "7653fe2d-94f2-43ee-9427-98442619b2a0", + "type": "lvl3", + "url": "/docs/components/tabs#make-a-tab-initially-active", + "hierarchy": { + "lvl1": "Tabs", + "lvl2": "Tabs onChange", + "lvl3": "Make a tab initially active" + } + }, + { + "content": "Make a Tab disabled", + "id": "3f5a4a0e-1297-4f3d-b7b5-60fbe8b040cc", + "type": "lvl3", + "url": "/docs/components/tabs#make-a-tab-disabled", + "hierarchy": { + "lvl1": "Tabs", + "lvl2": "Make a tab initially active", + "lvl3": "Make a Tab disabled" + } + }, + { + "content": "Tabs with manual activation", + "id": "85cb7be8-22cc-47f4-b936-7f39bd956d8c", + "type": "lvl3", + "url": "/docs/components/tabs#tabs-with-manual-activation", + "hierarchy": { + "lvl1": "Tabs", + "lvl2": "Make a Tab disabled", + "lvl3": "Tabs with manual activation" + } + }, + { + "content": "Lazily mounting tab panels", + "id": "47138748-11c9-4fb6-b94a-5f237be6ed09", + "type": "lvl3", + "url": "/docs/components/tabs#lazily-mounting-tab-panels", + "hierarchy": { + "lvl1": "Tabs", + "lvl2": "Tabs with manual activation", + "lvl3": "Lazily mounting tab panels" + } + }, + { + "content": "Controlled Tabs", + "id": "f0835982-cdf1-4ce6-84d3-7ad7314876d7", + "type": "lvl3", + "url": "/docs/components/tabs#controlled-tabs", + "hierarchy": { + "lvl1": "Tabs", + "lvl2": "Lazily mounting tab panels", + "lvl3": "Controlled Tabs" + } + }, + { + "content": "Creating custom tab components", + "id": "659cabab-0032-4246-947b-b1f3902c432f", + "type": "lvl3", + "url": "/docs/components/tabs#creating-custom-tab-components", + "hierarchy": { + "lvl1": "Tabs", + "lvl2": "Controlled Tabs", + "lvl3": "Creating custom tab components" + } + }, + { + "content": "DataTabs", + "id": "bc95f94f-470b-4870-96c8-6490614a2eae", + "type": "lvl3", + "url": "/docs/components/tabs#datatabs", + "hierarchy": { + "lvl1": "Tabs", + "lvl2": "Creating custom tab components", + "lvl3": "DataTabs" + } + }, + { + "content": "Accessibility", + "id": "6c4f5db8-2d19-48cf-b3bf-0c7eeeac7e45", + "type": "lvl2", + "url": "/docs/components/tabs#accessibility", + "hierarchy": { "lvl1": "Tabs", "lvl2": "Accessibility", "lvl3": null } + }, + { + "content": "Keyboard", + "id": "16dbccfd-572b-4c7f-9877-104480bc3bf0", + "type": "lvl3", + "url": "/docs/components/tabs#keyboard", + "hierarchy": { "lvl1": "Tabs", "lvl2": "Accessibility", "lvl3": "Keyboard" } + }, + { + "content": "ARIA roles", + "id": "f1c48be6-493d-4050-9fff-b04da48ac23d", + "type": "lvl3", + "url": "/docs/components/tabs#aria-roles", + "hierarchy": { "lvl1": "Tabs", "lvl2": "Keyboard", "lvl3": "ARIA roles" } + }, + { + "content": "Props", + "id": "5a148aca-15e3-4489-9f09-79e536d18690", + "type": "lvl2", + "url": "/docs/components/tabs#props", + "hierarchy": { "lvl1": "Tabs", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Tabs Props", + "id": "df30d34c-a818-4721-aba0-84ec394ab67b", + "type": "lvl3", + "url": "/docs/components/tabs#tabs-props", + "hierarchy": { "lvl1": "Tabs", "lvl2": "Props", "lvl3": "Tabs Props" } + }, + { + "content": "Tab Props", + "id": "bae8f1b4-e915-4fcb-9976-0d1d7d315863", + "type": "lvl3", + "url": "/docs/components/tabs#tab-props", + "hierarchy": { "lvl1": "Tabs", "lvl2": "Tabs Props", "lvl3": "Tab Props" } + }, + { + "content": "Transitions", + "id": "80956286-ce5d-45b3-9465-f35a63b59900", + "type": "lvl1", + "url": "/docs/components/transitions", + "hierarchy": { "lvl1": "Transitions" } + }, + { + "content": "Import", + "id": "7e72bdf6-6415-4cc2-af8d-de1ef2c06d44", + "type": "lvl2", + "url": "/docs/components/transitions#import", + "hierarchy": { "lvl1": "Transitions", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "f8360ec6-e56b-4284-bc8c-9135de9cc8ac", + "type": "lvl2", + "url": "/docs/components/transitions#usage", + "hierarchy": { "lvl1": "Transitions", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Fade transition", + "id": "903cf3bd-8014-41cb-a663-48f2c3cd3c4a", + "type": "lvl3", + "url": "/docs/components/transitions#fade-transition", + "hierarchy": { + "lvl1": "Transitions", + "lvl2": "Usage", + "lvl3": "Fade transition" + } + }, + { + "content": "ScaleFade transition", + "id": "f69a4669-8ab6-4d15-9770-cef565c35080", + "type": "lvl3", + "url": "/docs/components/transitions#scalefade-transition", + "hierarchy": { + "lvl1": "Transitions", + "lvl2": "Fade transition", + "lvl3": "ScaleFade transition" + } + }, + { + "content": "Slide transition", + "id": "cd17ef60-9426-49c8-85a7-051c3f1f819f", + "type": "lvl3", + "url": "/docs/components/transitions#slide-transition", + "hierarchy": { + "lvl1": "Transitions", + "lvl2": "ScaleFade transition", + "lvl3": "Slide transition" + } + }, + { + "content": "Slide Fade transition", + "id": "19261bf8-8b8f-4f26-bf2d-2345e2579c8f", + "type": "lvl3", + "url": "/docs/components/transitions#slide-fade-transition", + "hierarchy": { + "lvl1": "Transitions", + "lvl2": "Slide transition", + "lvl3": "Slide Fade transition" + } + }, + { + "content": "Collapse transition", + "id": "6df576bc-6bf5-44d2-accc-9ad4dd3ea04b", + "type": "lvl3", + "url": "/docs/components/transitions#collapse-transition", + "hierarchy": { + "lvl1": "Transitions", + "lvl2": "Slide Fade transition", + "lvl3": "Collapse transition" + } + }, + { + "content": "Changing the startingHeight", + "id": "ca18ed3c-e04d-42ed-adfd-b325a8eb3e43", + "type": "lvl4", + "url": "/docs/components/transitions#changing-the-startingheight", + "hierarchy": { + "lvl1": "Transitions", + "lvl2": "Collapse transition", + "lvl3": null + } + }, + { + "content": "Props", + "id": "3ddff8ea-6d1b-4191-ac6e-8e9516c9248b", + "type": "lvl2", + "url": "/docs/components/transitions#props", + "hierarchy": { "lvl1": "Transitions", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Fade Props", + "id": "6642f3af-dd54-43c6-a4f0-3566be4262b5", + "type": "lvl3", + "url": "/docs/components/transitions#fade-props", + "hierarchy": { + "lvl1": "Transitions", + "lvl2": "Props", + "lvl3": "Fade Props" + } + }, + { + "content": "ScaleFade Props", + "id": "350a0c80-dd9f-4ef7-a640-804508bc9920", + "type": "lvl3", + "url": "/docs/components/transitions#scalefade-props", + "hierarchy": { + "lvl1": "Transitions", + "lvl2": "Fade Props", + "lvl3": "ScaleFade Props" + } + }, + { + "content": "Slide Props", + "id": "271e23ca-6970-4595-80d6-15f7b3b52a36", + "type": "lvl3", + "url": "/docs/components/transitions#slide-props", + "hierarchy": { + "lvl1": "Transitions", + "lvl2": "ScaleFade Props", + "lvl3": "Slide Props" + } + }, + { + "content": "SlideFade Props", + "id": "b0f28993-b892-4e78-9c44-34072bbd0d93", + "type": "lvl3", + "url": "/docs/components/transitions#slidefade-props", + "hierarchy": { + "lvl1": "Transitions", + "lvl2": "Slide Props", + "lvl3": "SlideFade Props" + } + }, + { + "content": "Collapse Props", + "id": "33ecc773-f912-46f1-9970-e8d9de21b776", + "type": "lvl3", + "url": "/docs/components/transitions#collapse-props", + "hierarchy": { + "lvl1": "Transitions", + "lvl2": "SlideFade Props", + "lvl3": "Collapse Props" + } + }, + { + "content": "VisuallyHidden", + "id": "d14cb59a-51dc-4158-90bf-0159d39c887b", + "type": "lvl1", + "url": "/docs/components/visually-hidden", + "hierarchy": { "lvl1": "VisuallyHidden" } + }, + { + "content": "Installation", + "id": "2a194452-53bb-40b5-b400-9302e76552bb", + "type": "lvl2", + "url": "/docs/components/visually-hidden#installation", + "hierarchy": { + "lvl1": "VisuallyHidden", + "lvl2": "Installation", + "lvl3": null + } + }, + { + "content": "Usage", + "id": "dcd935ff-be15-4fb0-92bf-aa609e86464a", + "type": "lvl2", + "url": "/docs/components/visually-hidden#usage", + "hierarchy": { "lvl1": "VisuallyHidden", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Accessibility", + "id": "331beafe-b644-4380-94ee-81edf1af6e6b", + "type": "lvl2", + "url": "/docs/components/visually-hidden#accessibility", + "hierarchy": { + "lvl1": "VisuallyHidden", + "lvl2": "Accessibility", + "lvl3": null + } + }, + { + "content": "Props", + "id": "5bce3abf-cb35-49f0-9fe9-e2c3f613bde9", + "type": "lvl2", + "url": "/docs/components/visually-hidden#props", + "hierarchy": { "lvl1": "VisuallyHidden", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Contributing to Chakra UI", + "id": "11cbb9d1-7e7a-4f64-955d-5fcf28683cae", + "type": "lvl1", + "url": "/docs/contributing", + "hierarchy": { "lvl1": "Contributing to Chakra UI" } + }, + { + "content": "Getting started", + "id": "31297d22-881d-4ff3-951b-d87e92804c59", + "type": "lvl2", + "url": "/docs/contributing#getting-started", + "hierarchy": { + "lvl1": "Contributing to Chakra UI", + "lvl2": "Getting started", + "lvl3": null + } + }, + { + "content": "Docs contribution", + "id": "32787998-121b-4097-970e-f3e23977ef4d", + "type": "lvl2", + "url": "/docs/contributing#docs-contribution", + "hierarchy": { + "lvl1": "Contributing to Chakra UI", + "lvl2": "Docs contribution", + "lvl3": null + } + }, + { + "content": "Documentation Goals", + "id": "0dcbb97c-f7ee-4736-9aa4-d31a31b287ee", + "type": "lvl3", + "url": "/docs/contributing#documentation-goals", + "hierarchy": { + "lvl1": "Contributing to Chakra UI", + "lvl2": "Docs contribution", + "lvl3": "Documentation Goals" + } + }, + { + "content": "Notes on Github Token", + "id": "2695b053-71a4-4363-ae96-4456e349a70c", + "type": "lvl3", + "url": "/docs/contributing#notes-on-github-token", + "hierarchy": { + "lvl1": "Contributing to Chakra UI", + "lvl2": "Documentation Goals", + "lvl3": "Notes on Github Token" + } + }, + { + "content": "Code contribution", + "id": "957b47ee-3818-48c3-ad04-513f1e41d404", + "type": "lvl2", + "url": "/docs/contributing#code-contribution", + "hierarchy": { + "lvl1": "Contributing to Chakra UI", + "lvl2": "Code contribution", + "lvl3": null + } + }, + { + "content": "Code of Conduct", + "id": "fe519d00-c41c-4a9c-8bf5-ec5208d73dc9", + "type": "lvl2", + "url": "/docs/contributing#code-of-conduct", + "hierarchy": { + "lvl1": "Contributing to Chakra UI", + "lvl2": "Code of Conduct", + "lvl3": null + } + }, + { + "content": "Our Pledge", + "id": "cc4a2486-120b-4b2b-bdca-3115df705e5e", + "type": "lvl3", + "url": "/docs/contributing#our-pledge", + "hierarchy": { + "lvl1": "Contributing to Chakra UI", + "lvl2": "Code of Conduct", + "lvl3": "Our Pledge" + } + }, + { + "content": "Our Standards", + "id": "e2e6e26a-f020-4f16-b48a-520e0d78121a", + "type": "lvl3", + "url": "/docs/contributing#our-standards", + "hierarchy": { + "lvl1": "Contributing to Chakra UI", + "lvl2": "Our Pledge", + "lvl3": "Our Standards" + } + }, + { + "content": "Our Responsibilities", + "id": "f895565d-1bb7-4a76-8380-6c1eefcf28cc", + "type": "lvl3", + "url": "/docs/contributing#our-responsibilities", + "hierarchy": { + "lvl1": "Contributing to Chakra UI", + "lvl2": "Our Standards", + "lvl3": "Our Responsibilities" + } + }, + { + "content": "Scope", + "id": "9420c83a-d7ff-4304-a727-5a67110880ba", + "type": "lvl3", + "url": "/docs/contributing#scope", + "hierarchy": { + "lvl1": "Contributing to Chakra UI", + "lvl2": "Our Responsibilities", + "lvl3": "Scope" + } + }, + { + "content": "Enforcement", + "id": "e70a5338-cd59-4f5c-afd7-2581c594e230", + "type": "lvl3", + "url": "/docs/contributing#enforcement", + "hierarchy": { + "lvl1": "Contributing to Chakra UI", + "lvl2": "Scope", + "lvl3": "Enforcement" + } + }, + { + "content": "Attribution", + "id": "27d5fd21-a4ec-4ae4-b7c2-5bfb4c2666f0", + "type": "lvl3", + "url": "/docs/contributing#attribution", + "hierarchy": { + "lvl1": "Contributing to Chakra UI", + "lvl2": "Enforcement", + "lvl3": "Attribution" + } + }, + { + "content": "Avatar", + "id": "0571142a-440e-4d95-a5ff-7301019b923e", + "type": "lvl1", + "url": "/docs/data-display/avatar", + "hierarchy": { "lvl1": "Avatar" } + }, + { + "content": "Import", + "id": "f9dda7da-8c8c-43a0-98cb-062e001144a7", + "type": "lvl2", + "url": "/docs/data-display/avatar#import", + "hierarchy": { "lvl1": "Avatar", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "ba3bf9b1-6bf4-4663-a924-22a6145187c8", + "type": "lvl2", + "url": "/docs/data-display/avatar#usage", + "hierarchy": { "lvl1": "Avatar", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Avatar Sizes", + "id": "71ebaba3-e9af-45f6-9ce0-5c66217cf246", + "type": "lvl3", + "url": "/docs/data-display/avatar#avatar-sizes", + "hierarchy": { "lvl1": "Avatar", "lvl2": "Usage", "lvl3": "Avatar Sizes" } + }, + { + "content": "Avatar Fallbacks", + "id": "a6ddc5a5-1110-44f9-b9ac-2a943f541689", + "type": "lvl3", + "url": "/docs/data-display/avatar#avatar-fallbacks", + "hierarchy": { + "lvl1": "Avatar", + "lvl2": "Avatar Sizes", + "lvl3": "Avatar Fallbacks" + } + }, + { + "content": "Customize the fallback avatar", + "id": "4b70aed8-2516-4b41-b4ce-47e2bee1c63c", + "type": "lvl3", + "url": "/docs/data-display/avatar#customize-the-fallback-avatar", + "hierarchy": { + "lvl1": "Avatar", + "lvl2": "Avatar Fallbacks", + "lvl3": "Customize the fallback avatar" + } + }, + { + "content": "Avatar with badge", + "id": "c3a652ce-e0b0-403d-a90e-da344316a61f", + "type": "lvl3", + "url": "/docs/data-display/avatar#avatar-with-badge", + "hierarchy": { + "lvl1": "Avatar", + "lvl2": "Customize the fallback avatar", + "lvl3": "Avatar with badge" + } + }, + { + "content": "AvatarGroup", + "id": "456bb44c-f812-4ad8-9a1b-e92ed2846113", + "type": "lvl3", + "url": "/docs/data-display/avatar#avatargroup", + "hierarchy": { + "lvl1": "Avatar", + "lvl2": "Avatar with badge", + "lvl3": "AvatarGroup" + } + }, + { + "content": "Changing the initials logic", + "id": "350c222c-e60d-4cd2-98cc-4a51583801c8", + "type": "lvl3", + "url": "/docs/data-display/avatar#changing-the-initials-logic", + "hierarchy": { + "lvl1": "Avatar", + "lvl2": "AvatarGroup", + "lvl3": "Changing the initials logic" + } + }, + { + "content": "Props", + "id": "9e66bf91-7e1b-48ba-9b92-3ebfbcae0301", + "type": "lvl2", + "url": "/docs/data-display/avatar#props", + "hierarchy": { "lvl1": "Avatar", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Badge", + "id": "149f6aee-538d-4bef-9ecb-98dcc5b42372", + "type": "lvl1", + "url": "/docs/data-display/badge", + "hierarchy": { "lvl1": "Badge" } + }, + { + "content": "Import", + "id": "593ecd44-944d-4a43-8f1e-abbf625c6879", + "type": "lvl2", + "url": "/docs/data-display/badge#import", + "hierarchy": { "lvl1": "Badge", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "f9024d74-c63d-40ba-aa1c-23b4bd45d011", + "type": "lvl2", + "url": "/docs/data-display/badge#usage", + "hierarchy": { "lvl1": "Badge", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Badge Color", + "id": "2b73f806-e255-4a04-81d6-2d2598f412b3", + "type": "lvl3", + "url": "/docs/data-display/badge#badge-color", + "hierarchy": { "lvl1": "Badge", "lvl2": "Usage", "lvl3": "Badge Color" } + }, + { + "content": "Badge Variants", + "id": "7f19f4f4-d143-41fd-a6fb-931e98c6a4a1", + "type": "lvl3", + "url": "/docs/data-display/badge#badge-variants", + "hierarchy": { + "lvl1": "Badge", + "lvl2": "Badge Color", + "lvl3": "Badge Variants" + } + }, + { + "content": "Composition", + "id": "7ef0565a-b60f-46d7-a09d-cf4298f14ba8", + "type": "lvl2", + "url": "/docs/data-display/badge#composition", + "hierarchy": { "lvl1": "Badge", "lvl2": "Composition", "lvl3": null } + }, + { + "content": "Props", + "id": "6d41bdfe-c847-4544-af00-84376454ec55", + "type": "lvl2", + "url": "/docs/data-display/badge#props", + "hierarchy": { "lvl1": "Badge", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Code", + "id": "9ba1c789-4799-4236-884d-d64ddebc9557", + "type": "lvl1", + "url": "/docs/data-display/code", + "hierarchy": { "lvl1": "Code" } + }, + { + "content": "Import", + "id": "ed70798a-bf26-42f1-a35c-3158afb662ac", + "type": "lvl2", + "url": "/docs/data-display/code#import", + "hierarchy": { "lvl1": "Code", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "f307671a-fa32-4e01-8491-2381bf85d7c7", + "type": "lvl2", + "url": "/docs/data-display/code#usage", + "hierarchy": { "lvl1": "Code", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Colors", + "id": "f95757fe-20e0-4029-996f-a5bd2008297c", + "type": "lvl3", + "url": "/docs/data-display/code#colors", + "hierarchy": { "lvl1": "Code", "lvl2": "Usage", "lvl3": "Colors" } + }, + { + "content": "Props", + "id": "ea76ea19-1650-418c-9cc2-cef60443f537", + "type": "lvl2", + "url": "/docs/data-display/code#props", + "hierarchy": { "lvl1": "Code", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Divider", + "id": "655c08e5-2188-4f39-8ae8-863f81965b3a", + "type": "lvl1", + "url": "/docs/data-display/divider", + "hierarchy": { "lvl1": "Divider" } + }, + { + "content": "Import", + "id": "48e75b10-f93a-4e6d-9274-88d5e6106679", + "type": "lvl2", + "url": "/docs/data-display/divider#import", + "hierarchy": { "lvl1": "Divider", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "960c2b43-4d26-480e-82c8-3c6c51a31aaa", + "type": "lvl2", + "url": "/docs/data-display/divider#usage", + "hierarchy": { "lvl1": "Divider", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Divider Orientation", + "id": "0389dee8-4949-4098-8c9b-2843b5d144c0", + "type": "lvl3", + "url": "/docs/data-display/divider#divider-orientation", + "hierarchy": { + "lvl1": "Divider", + "lvl2": "Usage", + "lvl3": "Divider Orientation" + } + }, + { + "content": "Composition", + "id": "a84de514-38ff-4a8b-b8ee-0cfee224b968", + "type": "lvl2", + "url": "/docs/data-display/divider#composition", + "hierarchy": { "lvl1": "Divider", "lvl2": "Composition", "lvl3": null } + }, + { + "content": "Props", + "id": "6d469100-d5f5-42d8-868b-d8827e8d0d22", + "type": "lvl2", + "url": "/docs/data-display/divider#props", + "hierarchy": { "lvl1": "Divider", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Image", + "id": "7c217012-d158-458b-9ed7-c33b47f203f3", + "type": "lvl1", + "url": "/docs/data-display/image", + "hierarchy": { "lvl1": "Image" } + }, + { + "content": "Import", + "id": "64ec35b2-fae3-47b7-a6bb-6253459737bc", + "type": "lvl2", + "url": "/docs/data-display/image#import", + "hierarchy": { "lvl1": "Image", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "039bd539-28b8-446a-b076-23b5f823cd92", + "type": "lvl2", + "url": "/docs/data-display/image#usage", + "hierarchy": { "lvl1": "Image", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Size", + "id": "9451921b-bfda-4b19-b9a7-9b4f2ea7d4ce", + "type": "lvl2", + "url": "/docs/data-display/image#size", + "hierarchy": { "lvl1": "Image", "lvl2": "Size", "lvl3": null } + }, + { + "content": "Image with border radius", + "id": "bd095560-f709-4562-909c-884a8323c964", + "type": "lvl2", + "url": "/docs/data-display/image#image-with-border-radius", + "hierarchy": { + "lvl1": "Image", + "lvl2": "Image with border radius", + "lvl3": null + } + }, + { + "content": "Fallback support", + "id": "d395fdfa-c954-4d7f-8ec3-c3efc2d9f847", + "type": "lvl2", + "url": "/docs/data-display/image#fallback-support", + "hierarchy": { "lvl1": "Image", "lvl2": "Fallback support", "lvl3": null } + }, + { + "content": "Improvements from v1", + "id": "95756aba-3a28-42fa-aa5d-6fd603b39c9d", + "type": "lvl3", + "url": "/docs/data-display/image#improvements-from-v1", + "hierarchy": { + "lvl1": "Image", + "lvl2": "Fallback support", + "lvl3": "Improvements from v1" + } + }, + { + "content": "Usage with SSR", + "id": "6f43e94c-0d4a-4c67-9110-11d35deea56e", + "type": "lvl2", + "url": "/docs/data-display/image#usage-with-ssr", + "hierarchy": { "lvl1": "Image", "lvl2": "Usage with SSR", "lvl3": null } + }, + { + "content": "Props", + "id": "93b2b268-3081-4014-916e-5fad39cfca1a", + "type": "lvl2", + "url": "/docs/data-display/image#props", + "hierarchy": { "lvl1": "Image", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Keyboard Key", + "id": "1c6f3ca5-33fc-4dfe-8def-a17da95290a2", + "type": "lvl1", + "url": "/docs/data-display/kbd", + "hierarchy": { "lvl1": "Keyboard Key" } + }, + { + "content": "Import", + "id": "aa97c4bf-988a-4d40-b5df-41b1b06532b2", + "type": "lvl2", + "url": "/docs/data-display/kbd#import", + "hierarchy": { "lvl1": "Keyboard Key", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Guideline", + "id": "102d3058-80bb-4c37-8006-61a6d0c562c3", + "type": "lvl2", + "url": "/docs/data-display/kbd#guideline", + "hierarchy": { "lvl1": "Keyboard Key", "lvl2": "Guideline", "lvl3": null } + }, + { + "content": "Modifer", + "id": "dd12b505-b5d3-4b71-948a-151f13362b67", + "type": "lvl2", + "url": "/docs/data-display/kbd#modifer", + "hierarchy": { "lvl1": "Keyboard Key", "lvl2": "Modifer", "lvl3": null } + }, + { + "content": "List", + "id": "0f958159-4e9a-4912-b5d0-91f5bfc1e7d7", + "type": "lvl1", + "url": "/docs/data-display/list", + "hierarchy": { "lvl1": "List" } + }, + { + "content": "Import", + "id": "07c9b71f-0819-4c4f-a1e1-fec7442f5758", + "type": "lvl2", + "url": "/docs/data-display/list#import", + "hierarchy": { "lvl1": "List", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Unordered List", + "id": "146c9796-b33f-4c96-a3f2-bfae1fa8fcbf", + "type": "lvl2", + "url": "/docs/data-display/list#unordered-list", + "hierarchy": { "lvl1": "List", "lvl2": "Unordered List", "lvl3": null } + }, + { + "content": "Ordered List", + "id": "82c3ac25-e5a9-4f8c-97a4-a3d39389e18e", + "type": "lvl2", + "url": "/docs/data-display/list#ordered-list", + "hierarchy": { "lvl1": "List", "lvl2": "Ordered List", "lvl3": null } + }, + { + "content": "Unstyled List with icon", + "id": "64d3985c-b473-45b9-af98-99802d2a7406", + "type": "lvl2", + "url": "/docs/data-display/list#unstyled-list-with-icon", + "hierarchy": { + "lvl1": "List", + "lvl2": "Unstyled List with icon", + "lvl3": null + } + }, + { + "content": "Props", + "id": "bcb8e44b-ea82-43dc-9240-d7a58c2cc45d", + "type": "lvl2", + "url": "/docs/data-display/list#props", + "hierarchy": { "lvl1": "List", "lvl2": "Props", "lvl3": null } + }, + { + "content": "List Props", + "id": "106a760a-8340-4d27-87ce-8c4149713759", + "type": "lvl3", + "url": "/docs/data-display/list#list-props", + "hierarchy": { "lvl1": "List", "lvl2": "Props", "lvl3": "List Props" } + }, + { + "content": "List Item Props", + "id": "2267ccb3-37e2-4445-b516-667019ac1b12", + "type": "lvl3", + "url": "/docs/data-display/list#list-item-props", + "hierarchy": { + "lvl1": "List", + "lvl2": "List Props", + "lvl3": "List Item Props" + } + }, + { + "content": "Stat", + "id": "347b9d40-3053-40ad-9df1-c12608660723", + "type": "lvl1", + "url": "/docs/data-display/stat", + "hierarchy": { "lvl1": "Stat" } + }, + { + "content": "Import", + "id": "12292141-dac2-460f-9c7a-292ffc9c3698", + "type": "lvl2", + "url": "/docs/data-display/stat#import", + "hierarchy": { "lvl1": "Stat", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Basic Usage", + "id": "8cbafe87-b245-4ed6-93e1-78748072292d", + "type": "lvl2", + "url": "/docs/data-display/stat#basic-usage", + "hierarchy": { "lvl1": "Stat", "lvl2": "Basic Usage", "lvl3": null } + }, + { + "content": "Stat with Indicator", + "id": "9720b9f5-a290-4b35-b17a-147d52e5bf30", + "type": "lvl3", + "url": "/docs/data-display/stat#stat-with-indicator", + "hierarchy": { + "lvl1": "Stat", + "lvl2": "Basic Usage", + "lvl3": "Stat with Indicator" + } + }, + { + "content": "Props", + "id": "6450d51d-2003-4ba4-87fe-bc6b2f2f4f3e", + "type": "lvl2", + "url": "/docs/data-display/stat#props", + "hierarchy": { "lvl1": "Stat", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Tag", + "id": "0bd745df-fa54-4c9d-a597-366f8128b009", + "type": "lvl1", + "url": "/docs/data-display/tag", + "hierarchy": { "lvl1": "Tag" } + }, + { + "content": "Import", + "id": "87067425-45fb-41d1-9ab7-15839ab6230b", + "type": "lvl2", + "url": "/docs/data-display/tag#import", + "hierarchy": { "lvl1": "Tag", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "9e67892f-99f4-4019-a534-ff6ae5828d48", + "type": "lvl2", + "url": "/docs/data-display/tag#usage", + "hierarchy": { "lvl1": "Tag", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "With left icon", + "id": "15491658-7111-4167-82f4-a35e6913b0df", + "type": "lvl2", + "url": "/docs/data-display/tag#with-left-icon", + "hierarchy": { "lvl1": "Tag", "lvl2": "With left icon", "lvl3": null } + }, + { + "content": "With right icon", + "id": "31668292-b40d-49c1-b8ee-79d2b832d7b3", + "type": "lvl2", + "url": "/docs/data-display/tag#with-right-icon", + "hierarchy": { "lvl1": "Tag", "lvl2": "With right icon", "lvl3": null } + }, + { + "content": "With close button", + "id": "68f61380-a05d-45a4-bf0e-5afc2fa99283", + "type": "lvl2", + "url": "/docs/data-display/tag#with-close-button", + "hierarchy": { "lvl1": "Tag", "lvl2": "With close button", "lvl3": null } + }, + { + "content": "With custom element", + "id": "2ad7cf8a-f17e-4255-b0d1-3d24463cbfeb", + "type": "lvl2", + "url": "/docs/data-display/tag#with-custom-element", + "hierarchy": { "lvl1": "Tag", "lvl2": "With custom element", "lvl3": null } + }, + { + "content": "Props", + "id": "08b927a3-9880-49ff-b540-2b41447a04f8", + "type": "lvl2", + "url": "/docs/data-display/tag#props", + "hierarchy": { "lvl1": "Tag", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Chakra Factory", + "id": "478d3eb1-fdff-4f65-bece-bbb1a4985e3c", + "type": "lvl1", + "url": "/docs/features/chakra-factory", + "hierarchy": { "lvl1": "Chakra Factory" } + }, + { + "content": "Chakra JSX Elements", + "id": "5423c35d-eb9e-4934-935a-9f4d21ff484e", + "type": "lvl2", + "url": "/docs/features/chakra-factory#chakra-jsx-elements", + "hierarchy": { + "lvl1": "Chakra Factory", + "lvl2": "Chakra JSX Elements", + "lvl3": null + } + }, + { + "content": "Chakra factory function", + "id": "641a12a2-11db-45ee-bd8d-b19a6abbf009", + "type": "lvl2", + "url": "/docs/features/chakra-factory#chakra-factory-function", + "hierarchy": { + "lvl1": "Chakra Factory", + "lvl2": "Chakra factory function", + "lvl3": null + } + }, + { + "content": "Attaching styles", + "id": "b2a4e324-d44b-4fb1-a229-d128891490e4", + "type": "lvl3", + "url": "/docs/features/chakra-factory#attaching-styles", + "hierarchy": { + "lvl1": "Chakra Factory", + "lvl2": "Chakra factory function", + "lvl3": "Attaching styles" + } + }, + { + "content": "Color Mode", + "id": "23776b37-2557-43f3-8dae-341321e6018c", + "type": "lvl1", + "url": "/docs/features/color-mode", + "hierarchy": { "lvl1": "Color Mode" } + }, + { + "content": "useColorMode", + "id": "5de14c67-d826-4b83-990c-e818888e95e0", + "type": "lvl2", + "url": "/docs/features/color-mode#usecolormode", + "hierarchy": { "lvl1": "Color Mode", "lvl2": "useColorMode", "lvl3": null } + }, + { + "content": "useColorModeValue", + "id": "2a303835-6f2f-461c-b509-4709fa9c14f5", + "type": "lvl2", + "url": "/docs/features/color-mode#usecolormodevalue", + "hierarchy": { + "lvl1": "Color Mode", + "lvl2": "useColorModeValue", + "lvl3": null + } + }, + { + "content": "Forcing a specific mode", + "id": "1c9df8bc-56f5-4e04-be85-f44615b0e064", + "type": "lvl2", + "url": "/docs/features/color-mode#forcing-a-specific-mode", + "hierarchy": { + "lvl1": "Color Mode", + "lvl2": "Forcing a specific mode", + "lvl3": null + } + }, + { + "content": "Change color mode behavior", + "id": "a7edcb70-0416-4a75-a74c-8ae23339657b", + "type": "lvl2", + "url": "/docs/features/color-mode#change-color-mode-behavior", + "hierarchy": { + "lvl1": "Color Mode", + "lvl2": "Change color mode behavior", + "lvl3": null + } + }, + { + "content": "Add ColorModeScript", + "id": "0ac6a53c-894c-4249-9010-9984229a29d6", + "type": "lvl2", + "url": "/docs/features/color-mode#add-colormodescript", + "hierarchy": { + "lvl1": "Color Mode", + "lvl2": "Add ColorModeScript", + "lvl3": null + } + }, + { + "content": "Add colorModeManager (Optional)", + "id": "ba69d5f5-398c-452a-b08d-6c1d87b2d362", + "type": "lvl2", + "url": "/docs/features/color-mode#add-colormodemanager-optional", + "hierarchy": { + "lvl1": "Color Mode", + "lvl2": "Add colorModeManager (Optional)", + "lvl3": null + } + }, + { + "content": "Global Styles", + "id": "49d225bc-f975-47a2-89d6-03546bca8d70", + "type": "lvl1", + "url": "/docs/features/global-styles", + "hierarchy": { "lvl1": "Global Styles" } + }, + { + "content": "How it works", + "id": "bf66bf0a-33d0-46ad-9b31-c03fc4131422", + "type": "lvl2", + "url": "/docs/features/global-styles#how-it-works", + "hierarchy": { + "lvl1": "Global Styles", + "lvl2": "How it works", + "lvl3": null + } + }, + { + "content": "Default styles", + "id": "7db975dc-8b86-4244-8ee8-4fd122072364", + "type": "lvl2", + "url": "/docs/features/global-styles#default-styles", + "hierarchy": { + "lvl1": "Global Styles", + "lvl2": "Default styles", + "lvl3": null + } + }, + { + "content": "Styling non-Chakra elements globally", + "id": "e3bf5a88-3b0b-40b4-8033-0b1499cdc789", + "type": "lvl2", + "url": "/docs/features/global-styles#styling-non-chakra-elements-globally", + "hierarchy": { + "lvl1": "Global Styles", + "lvl2": "Styling non-Chakra elements globally", + "lvl3": null + } + }, + { + "content": "Community examples", + "id": "df0fe42c-fd51-46bb-aa2c-71b746e859ff", + "type": "lvl2", + "url": "/docs/features/global-styles#community-examples", + "hierarchy": { + "lvl1": "Global Styles", + "lvl2": "Community examples", + "lvl3": null + } + }, + { + "content": "Responsive Styles", + "id": "f4f4246c-4986-41f5-af1f-f38396389020", + "type": "lvl1", + "url": "/docs/features/responsive-styles", + "hierarchy": { "lvl1": "Responsive Styles" } + }, + { + "content": "The Array syntax", + "id": "1718802e-7149-4088-8ebc-9eb69546cbcc", + "type": "lvl2", + "url": "/docs/features/responsive-styles#the-array-syntax", + "hierarchy": { + "lvl1": "Responsive Styles", + "lvl2": "The Array syntax", + "lvl3": null + } + }, + { + "content": "The Object syntax", + "id": "d42f17a3-91a2-4d1a-b557-1943317c50e4", + "type": "lvl2", + "url": "/docs/features/responsive-styles#the-object-syntax", + "hierarchy": { + "lvl1": "Responsive Styles", + "lvl2": "The Object syntax", + "lvl3": null + } + }, + { + "content": "More Examples", + "id": "e629f966-06de-43a7-90a8-a31ea21fb60c", + "type": "lvl2", + "url": "/docs/features/responsive-styles#more-examples", + "hierarchy": { + "lvl1": "Responsive Styles", + "lvl2": "More Examples", + "lvl3": null + } + }, + { + "content": "Under the hood", + "id": "14203ec9-677d-4c71-afe0-5de16a937fbf", + "type": "lvl2", + "url": "/docs/features/responsive-styles#under-the-hood", + "hierarchy": { + "lvl1": "Responsive Styles", + "lvl2": "Under the hood", + "lvl3": null + } + }, + { + "content": "Customizing Breakpoints", + "id": "ec9f3d9d-fb4f-43c5-b6d1-202dd8420600", + "type": "lvl2", + "url": "/docs/features/responsive-styles#customizing-breakpoints", + "hierarchy": { + "lvl1": "Responsive Styles", + "lvl2": "Customizing Breakpoints", + "lvl3": null + } + }, + { + "content": "Demo", + "id": "f38de24c-f5e4-4f69-b764-ba845aa43482", + "type": "lvl2", + "url": "/docs/features/responsive-styles#demo", + "hierarchy": { "lvl1": "Responsive Styles", "lvl2": "Demo", "lvl3": null } + }, + { + "content": "Style Props", + "id": "f82f851d-adcb-4ce8-8e46-b05a331ef889", + "type": "lvl1", + "url": "/docs/features/style-props", + "hierarchy": { "lvl1": "Style Props" } + }, + { + "content": "Reference", + "id": "9530d31b-6188-4c5d-b2e1-e2a9853e88c0", + "type": "lvl2", + "url": "/docs/features/style-props#reference", + "hierarchy": { "lvl1": "Style Props", "lvl2": "Reference", "lvl3": null } + }, + { + "content": "Margin and padding", + "id": "594a754e-bc4d-41bd-b62a-b63b0f5b859e", + "type": "lvl3", + "url": "/docs/features/style-props#margin-and-padding", + "hierarchy": { + "lvl1": "Style Props", + "lvl2": "Reference", + "lvl3": "Margin and padding" + } + }, + { + "content": "Color and background color", + "id": "c91c8b57-5987-4185-93b3-a7ef6fc52d52", + "type": "lvl3", + "url": "/docs/features/style-props#color-and-background-color", + "hierarchy": { + "lvl1": "Style Props", + "lvl2": "Margin and padding", + "lvl3": "Color and background color" + } + }, + { + "content": "Typography", + "id": "26fdc0e3-55f3-40b0-ba98-25b748214f77", + "type": "lvl3", + "url": "/docs/features/style-props#typography", + "hierarchy": { + "lvl1": "Style Props", + "lvl2": "Color and background color", + "lvl3": "Typography" + } + }, + { + "content": "Layout, width and height", + "id": "dc62793b-1891-4032-8b1c-aa8bd89c3f4f", + "type": "lvl3", + "url": "/docs/features/style-props#layout-width-and-height", + "hierarchy": { + "lvl1": "Style Props", + "lvl2": "Typography", + "lvl3": "Layout, width and height" + } + }, + { + "content": "Flexbox", + "id": "cdd99415-1d07-4b88-963f-3eac9c315ae2", + "type": "lvl3", + "url": "/docs/features/style-props#flexbox", + "hierarchy": { + "lvl1": "Style Props", + "lvl2": "Layout, width and height", + "lvl3": "Flexbox" + } + }, + { + "content": "Grid Layout", + "id": "7c1f5f6f-2a6d-4326-b0b9-cf9d47a3eb9a", + "type": "lvl3", + "url": "/docs/features/style-props#grid-layout", + "hierarchy": { + "lvl1": "Style Props", + "lvl2": "Flexbox", + "lvl3": "Grid Layout" + } + }, + { + "content": "Background", + "id": "20e82b41-968a-4657-8f20-8d802dd619af", + "type": "lvl3", + "url": "/docs/features/style-props#background", + "hierarchy": { + "lvl1": "Style Props", + "lvl2": "Grid Layout", + "lvl3": "Background" + } + }, + { + "content": "Borders", + "id": "d229e209-f7a2-4c47-9ae9-e5b7e563490e", + "type": "lvl3", + "url": "/docs/features/style-props#borders", + "hierarchy": { + "lvl1": "Style Props", + "lvl2": "Background", + "lvl3": "Borders" + } + }, + { + "content": "Border Radius", + "id": "f6a39d27-b794-40eb-a17b-09b26b6cdea2", + "type": "lvl3", + "url": "/docs/features/style-props#border-radius", + "hierarchy": { + "lvl1": "Style Props", + "lvl2": "Borders", + "lvl3": "Border Radius" + } + }, + { + "content": "Position", + "id": "c81157a3-c3fe-4933-a213-d979adfa1d61", + "type": "lvl3", + "url": "/docs/features/style-props#position", + "hierarchy": { + "lvl1": "Style Props", + "lvl2": "Border Radius", + "lvl3": "Position" + } + }, + { + "content": "Shadow", + "id": "a5d60a3a-d548-41d6-9423-957dd6442a6c", + "type": "lvl3", + "url": "/docs/features/style-props#shadow", + "hierarchy": { "lvl1": "Style Props", "lvl2": "Position", "lvl3": "Shadow" } + }, + { + "content": "Pseudo", + "id": "8ae34c41-3c42-484a-b1be-e49b74f32961", + "type": "lvl3", + "url": "/docs/features/style-props#pseudo", + "hierarchy": { "lvl1": "Style Props", "lvl2": "Shadow", "lvl3": "Pseudo" } + }, + { + "content": "Other Props", + "id": "2219f3ad-e715-44ca-b055-ec52431dc257", + "type": "lvl3", + "url": "/docs/features/style-props#other-props", + "hierarchy": { + "lvl1": "Style Props", + "lvl2": "Pseudo", + "lvl3": "Other Props" + } + }, + { + "content": "The `as` prop", + "id": "f1329b77-28ce-49fc-b057-7309434dee3c", + "type": "lvl2", + "url": "/docs/features/style-props#the-as-prop", + "hierarchy": { + "lvl1": "Style Props", + "lvl2": "The `as` prop", + "lvl3": null + } + }, + { + "content": "Text and Layer Styles", + "id": "e3ff4004-6f1c-4945-a5ee-2584954e9f9f", + "type": "lvl1", + "url": "/docs/features/text-and-layer-styles", + "hierarchy": { "lvl1": "Text and Layer Styles" } + }, + { + "content": "Layer Style", + "id": "f8099d99-e7d6-427e-ac88-397ec4e5eb40", + "type": "lvl2", + "url": "/docs/features/text-and-layer-styles#layer-style", + "hierarchy": { + "lvl1": "Text and Layer Styles", + "lvl2": "Layer Style", + "lvl3": null + } + }, + { + "content": "Text Styles", + "id": "124b4917-dee2-4b8e-a92a-32e602c91a57", + "type": "lvl2", + "url": "/docs/features/text-and-layer-styles#text-styles", + "hierarchy": { + "lvl1": "Text and Layer Styles", + "lvl2": "Text Styles", + "lvl3": null + } + }, + { + "content": "Naming text styles", + "id": "b200d87c-6cdc-4152-a004-c8c804f9428d", + "type": "lvl3", + "url": "/docs/features/text-and-layer-styles#naming-text-styles", + "hierarchy": { + "lvl1": "Text and Layer Styles", + "lvl2": "Text Styles", + "lvl3": "Naming text styles" + } + }, + { + "content": "Alert", + "id": "f3d346aa-895f-4b17-b2c2-2e29d362398f", + "type": "lvl1", + "url": "/docs/feedback/alert", + "hierarchy": { "lvl1": "Alert" } + }, + { + "content": "Import", + "id": "20370e68-be3c-498a-8068-41cb50f09750", + "type": "lvl2", + "url": "/docs/feedback/alert#import", + "hierarchy": { "lvl1": "Alert", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "7b7857a5-ee57-4b05-8241-5794d4fcdb7e", + "type": "lvl2", + "url": "/docs/feedback/alert#usage", + "hierarchy": { "lvl1": "Alert", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Status", + "id": "75267cf0-7a8d-4f67-ba20-858a62d2a0db", + "type": "lvl3", + "url": "/docs/feedback/alert#status", + "hierarchy": { "lvl1": "Alert", "lvl2": "Usage", "lvl3": "Status" } + }, + { + "content": "Variant", + "id": "ee574abb-3d82-4677-bb92-96361bc37f38", + "type": "lvl3", + "url": "/docs/feedback/alert#variant", + "hierarchy": { "lvl1": "Alert", "lvl2": "Status", "lvl3": "Variant" } + }, + { + "content": "Composition", + "id": "30bdaa32-1304-4ec3-8694-af18041003af", + "type": "lvl3", + "url": "/docs/feedback/alert#composition", + "hierarchy": { "lvl1": "Alert", "lvl2": "Variant", "lvl3": "Composition" } + }, + { + "content": "Props", + "id": "1f00a9c7-f3fb-4e70-9369-59e1681d9ec4", + "type": "lvl2", + "url": "/docs/feedback/alert#props", + "hierarchy": { "lvl1": "Alert", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Alert Props", + "id": "b1debc02-fafc-4b31-89b6-97931ad2c0dd", + "type": "lvl3", + "url": "/docs/feedback/alert#alert-props", + "hierarchy": { "lvl1": "Alert", "lvl2": "Props", "lvl3": "Alert Props" } + }, + { + "content": "AlertIcon Props", + "id": "8837d981-6ed5-4877-9dd4-2b86ab66eb86", + "type": "lvl3", + "url": "/docs/feedback/alert#alerticon-props", + "hierarchy": { + "lvl1": "Alert", + "lvl2": "Alert Props", + "lvl3": "AlertIcon Props" + } + }, + { + "content": "AlertTitle Props", + "id": "3dbfa801-beb4-4910-8e6d-977e680a832e", + "type": "lvl3", + "url": "/docs/feedback/alert#alerttitle-props", + "hierarchy": { + "lvl1": "Alert", + "lvl2": "AlertIcon Props", + "lvl3": "AlertTitle Props" + } + }, + { + "content": "AlertDescription Props", + "id": "10c9e03a-a4e5-471a-8a3a-8aaabe5c01bf", + "type": "lvl3", + "url": "/docs/feedback/alert#alertdescription-props", + "hierarchy": { + "lvl1": "Alert", + "lvl2": "AlertTitle Props", + "lvl3": "AlertDescription Props" + } + }, + { + "content": "Circular Progress", + "id": "ad6427c4-478b-4a15-af7c-2e34d168bb14", + "type": "lvl1", + "url": "/docs/feedback/circular-progress", + "hierarchy": { "lvl1": "Circular Progress" } + }, + { + "content": "Import", + "id": "9400b671-cbaa-4386-89d7-bf1ed895c570", + "type": "lvl2", + "url": "/docs/feedback/circular-progress#import", + "hierarchy": { "lvl1": "Circular Progress", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "c1aee1be-4ba6-43b9-96f5-cda5043f1b88", + "type": "lvl2", + "url": "/docs/feedback/circular-progress#usage", + "hierarchy": { "lvl1": "Circular Progress", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Changing the size", + "id": "2661dcbc-16b9-4c97-bea0-55b836615445", + "type": "lvl3", + "url": "/docs/feedback/circular-progress#changing-the-size", + "hierarchy": { + "lvl1": "Circular Progress", + "lvl2": "Usage", + "lvl3": "Changing the size" + } + }, + { + "content": "Changing the thickness", + "id": "846b4b10-49e7-4611-8ad5-8807cdfef83e", + "type": "lvl3", + "url": "/docs/feedback/circular-progress#changing-the-thickness", + "hierarchy": { + "lvl1": "Circular Progress", + "lvl2": "Changing the size", + "lvl3": "Changing the thickness" + } + }, + { + "content": "Changing the color", + "id": "1462c225-9f0a-47d2-93ce-87dca4a39b3a", + "type": "lvl3", + "url": "/docs/feedback/circular-progress#changing-the-color", + "hierarchy": { + "lvl1": "Circular Progress", + "lvl2": "Changing the thickness", + "lvl3": "Changing the color" + } + }, + { + "content": "Adding label", + "id": "f4287d59-e5be-4453-9812-8f1a920b2f98", + "type": "lvl3", + "url": "/docs/feedback/circular-progress#adding-label", + "hierarchy": { + "lvl1": "Circular Progress", + "lvl2": "Changing the color", + "lvl3": "Adding label" + } + }, + { + "content": "Indeterminate Progress", + "id": "35925c87-4ff4-44c9-99be-65ee64d917b4", + "type": "lvl3", + "url": "/docs/feedback/circular-progress#indeterminate-progress", + "hierarchy": { + "lvl1": "Circular Progress", + "lvl2": "Adding label", + "lvl3": "Indeterminate Progress" + } + }, + { + "content": "Accessibility", + "id": "e4b61a05-9aa5-428b-ba2a-0d2341a9b8c5", + "type": "lvl3", + "url": "/docs/feedback/circular-progress#accessibility", + "hierarchy": { + "lvl1": "Circular Progress", + "lvl2": "Indeterminate Progress", + "lvl3": "Accessibility" + } + }, + { + "content": "Props", + "id": "64fb0412-921f-44f0-adf1-994f2b295cba", + "type": "lvl2", + "url": "/docs/feedback/circular-progress#props", + "hierarchy": { "lvl1": "Circular Progress", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Progress", + "id": "64eb63e2-ef46-401f-a20c-d081f62af4db", + "type": "lvl1", + "url": "/docs/feedback/progress", + "hierarchy": { "lvl1": "Progress" } + }, + { + "content": "Import", + "id": "475b5219-d5a9-4ed0-a381-c39419e2026c", + "type": "lvl2", + "url": "/docs/feedback/progress#import", + "hierarchy": { "lvl1": "Progress", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "0d2b10dd-6cb1-442a-a020-324a32c4d4de", + "type": "lvl2", + "url": "/docs/feedback/progress#usage", + "hierarchy": { "lvl1": "Progress", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Progress with Stripe", + "id": "069faafe-21d9-4551-a32b-ab746d19d227", + "type": "lvl3", + "url": "/docs/feedback/progress#progress-with-stripe", + "hierarchy": { + "lvl1": "Progress", + "lvl2": "Usage", + "lvl3": "Progress with Stripe" + } + }, + { + "content": "Progress sizes", + "id": "5c7c1e90-47d2-4b12-8f9f-a9b198d282dc", + "type": "lvl3", + "url": "/docs/feedback/progress#progress-sizes", + "hierarchy": { + "lvl1": "Progress", + "lvl2": "Progress with Stripe", + "lvl3": "Progress sizes" + } + }, + { + "content": "Progress color scheme", + "id": "1b9e24b2-93bd-4616-8e2b-9cc298b290d5", + "type": "lvl3", + "url": "/docs/feedback/progress#progress-color-scheme", + "hierarchy": { + "lvl1": "Progress", + "lvl2": "Progress sizes", + "lvl3": "Progress color scheme" + } + }, + { + "content": "Animated Progress", + "id": "d58bc9e7-e125-48c5-a70b-5441e1bed919", + "type": "lvl3", + "url": "/docs/feedback/progress#animated-progress", + "hierarchy": { + "lvl1": "Progress", + "lvl2": "Progress color scheme", + "lvl3": "Animated Progress" + } + }, + { + "content": "Accessibility", + "id": "cc17a634-b20d-48a8-b2ee-43e904e058a4", + "type": "lvl2", + "url": "/docs/feedback/progress#accessibility", + "hierarchy": { "lvl1": "Progress", "lvl2": "Accessibility", "lvl3": null } + }, + { + "content": "Props", + "id": "161cb149-5f9c-4d42-9774-a575f757b225", + "type": "lvl2", + "url": "/docs/feedback/progress#props", + "hierarchy": { "lvl1": "Progress", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Skeleton", + "id": "8c2e2d31-f468-4da3-b582-18e66b8b8c06", + "type": "lvl1", + "url": "/docs/feedback/skeleton", + "hierarchy": { "lvl1": "Skeleton" } + }, + { + "content": "Import", + "id": "31f7737b-cb3a-490c-a02e-9ac89581c9cf", + "type": "lvl2", + "url": "/docs/feedback/skeleton#import", + "hierarchy": { "lvl1": "Skeleton", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "ce617dcb-e9fa-44cd-b33f-80ac1c6a2539", + "type": "lvl2", + "url": "/docs/feedback/skeleton#usage", + "hierarchy": { "lvl1": "Skeleton", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Circle and Text Skeleton", + "id": "529e7f1a-bd15-4555-9d93-249c9bbb239a", + "type": "lvl3", + "url": "/docs/feedback/skeleton#circle-and-text-skeleton", + "hierarchy": { + "lvl1": "Skeleton", + "lvl2": "Usage", + "lvl3": "Circle and Text Skeleton" + } + }, + { + "content": "Skeleton color", + "id": "96069fc6-fbf5-4ede-a1a2-bde68b6800ce", + "type": "lvl3", + "url": "/docs/feedback/skeleton#skeleton-color", + "hierarchy": { + "lvl1": "Skeleton", + "lvl2": "Circle and Text Skeleton", + "lvl3": "Skeleton color" + } + }, + { + "content": "Skipping the skeleton when content is loaded", + "id": "4e98c466-a032-4b80-800e-d2e4b606b5c6", + "type": "lvl3", + "url": "/docs/feedback/skeleton#skipping-the-skeleton-when-content-is-loaded", + "hierarchy": { + "lvl1": "Skeleton", + "lvl2": "Skeleton color", + "lvl3": "Skipping the skeleton when content is loaded" + } + }, + { + "content": "Props", + "id": "231d5877-560c-4eb8-9c08-7d2ad5723dac", + "type": "lvl2", + "url": "/docs/feedback/skeleton#props", + "hierarchy": { "lvl1": "Skeleton", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Spinner", + "id": "45584227-99a5-45a2-a8ae-cb76e893ff73", + "type": "lvl1", + "url": "/docs/feedback/spinner", + "hierarchy": { "lvl1": "Spinner" } + }, + { + "content": "Usage", + "id": "604cc902-3042-49e3-bd23-ccc373eaf9dd", + "type": "lvl2", + "url": "/docs/feedback/spinner#usage", + "hierarchy": { "lvl1": "Spinner", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Spinner with Color", + "id": "244d87cb-3f13-4e5c-abd5-adcfb311cb91", + "type": "lvl3", + "url": "/docs/feedback/spinner#spinner-with-color", + "hierarchy": { + "lvl1": "Spinner", + "lvl2": "Usage", + "lvl3": "Spinner with Color" + } + }, + { + "content": "Spinner with different size", + "id": "3a06b5da-ae29-46d6-9654-19dd82c08813", + "type": "lvl3", + "url": "/docs/feedback/spinner#spinner-with-different-size", + "hierarchy": { + "lvl1": "Spinner", + "lvl2": "Spinner with Color", + "lvl3": "Spinner with different size" + } + }, + { + "content": "Spinner with empty area color", + "id": "a914c25c-f410-4792-bd67-f2db60f25bb8", + "type": "lvl3", + "url": "/docs/feedback/spinner#spinner-with-empty-area-color", + "hierarchy": { + "lvl1": "Spinner", + "lvl2": "Spinner with different size", + "lvl3": "Spinner with empty area color" + } + }, + { + "content": "Props", + "id": "0dab6082-e4a9-45b5-a895-fea360c06dc3", + "type": "lvl2", + "url": "/docs/feedback/spinner#props", + "hierarchy": { "lvl1": "Spinner", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Toast", + "id": "9883122a-d74c-4b67-87ba-f0b9bad8e003", + "type": "lvl1", + "url": "/docs/feedback/toast", + "hierarchy": { "lvl1": "Toast" } + }, + { + "content": "Import", + "id": "81f5cdaf-da5e-4664-bd90-4a6ce590b442", + "type": "lvl2", + "url": "/docs/feedback/toast#import", + "hierarchy": { "lvl1": "Toast", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "29f2ed91-d3ab-4d6e-9439-de1f9b80abb4", + "type": "lvl2", + "url": "/docs/feedback/toast#usage", + "hierarchy": { "lvl1": "Toast", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Custom component", + "id": "78821bce-43b5-418e-a766-9b9b2a6901d9", + "type": "lvl2", + "url": "/docs/feedback/toast#custom-component", + "hierarchy": { "lvl1": "Toast", "lvl2": "Custom component", "lvl3": null } + }, + { + "content": "Closing Toasts", + "id": "c3cd5055-9d08-49d4-b416-99c882ac2001", + "type": "lvl2", + "url": "/docs/feedback/toast#closing-toasts", + "hierarchy": { "lvl1": "Toast", "lvl2": "Closing Toasts", "lvl3": null } + }, + { + "content": "Success", + "id": "b00f2a56-f72c-4f3b-935d-60d6ca279ac6", + "type": "lvl2", + "url": "/docs/feedback/toast#success", + "hierarchy": { "lvl1": "Toast", "lvl2": "Success", "lvl3": null } + }, + { + "content": "Warning", + "id": "9c21767e-8ef4-4cce-9ca3-8a928dabea2e", + "type": "lvl2", + "url": "/docs/feedback/toast#warning", + "hierarchy": { "lvl1": "Toast", "lvl2": "Warning", "lvl3": null } + }, + { + "content": "Error", + "id": "d18eb8aa-3368-4921-884c-855427de4c25", + "type": "lvl2", + "url": "/docs/feedback/toast#error", + "hierarchy": { "lvl1": "Toast", "lvl2": "Error", "lvl3": null } + }, + { + "content": "Position", + "id": "b7f5082f-61b3-485e-8f78-0ac28776e1ca", + "type": "lvl2", + "url": "/docs/feedback/toast#position", + "hierarchy": { "lvl1": "Toast", "lvl2": "Position", "lvl3": null } + }, + { + "content": "Standalone", + "id": "5913dcb0-f282-4f15-8048-566ef5ca40ef", + "type": "lvl2", + "url": "/docs/feedback/toast#standalone", + "hierarchy": { "lvl1": "Toast", "lvl2": "Standalone", "lvl3": null } + }, + { + "content": "Props", + "id": "9cd019e3-f8ae-4e9b-b72c-b4b44f75b1b8", + "type": "lvl2", + "url": "/docs/feedback/toast#props", + "hierarchy": { "lvl1": "Toast", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Button", + "id": "e67d73c6-7e0f-4459-bdf5-8cb7cf5ff0f3", + "type": "lvl1", + "url": "/docs/form/button", + "hierarchy": { "lvl1": "Button" } + }, + { + "content": "Import", + "id": "6807ecf9-ee53-4341-a145-46cd752d5470", + "type": "lvl2", + "url": "/docs/form/button#import", + "hierarchy": { "lvl1": "Button", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "4a407139-21bf-4228-b167-7b52fb989fb5", + "type": "lvl2", + "url": "/docs/form/button#usage", + "hierarchy": { "lvl1": "Button", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Button Sizes", + "id": "f42d1613-4cfc-439c-8493-81fe34f32ddb", + "type": "lvl3", + "url": "/docs/form/button#button-sizes", + "hierarchy": { "lvl1": "Button", "lvl2": "Usage", "lvl3": "Button Sizes" } + }, + { + "content": "Button variants", + "id": "6917fc37-7ad3-43a1-b73d-f07199bd1f54", + "type": "lvl3", + "url": "/docs/form/button#button-variants", + "hierarchy": { + "lvl1": "Button", + "lvl2": "Button Sizes", + "lvl3": "Button variants" + } + }, + { + "content": "Button with icon", + "id": "2528294d-f18d-43bd-a42d-42875113119a", + "type": "lvl3", + "url": "/docs/form/button#button-with-icon", + "hierarchy": { + "lvl1": "Button", + "lvl2": "Button variants", + "lvl3": "Button with icon" + } + }, + { + "content": "Button loading state", + "id": "94d5722c-4ef5-4b27-b516-e6d72711437b", + "type": "lvl3", + "url": "/docs/form/button#button-loading-state", + "hierarchy": { + "lvl1": "Button", + "lvl2": "Button with icon", + "lvl3": "Button loading state" + } + }, + { + "content": "Social Buttons", + "id": "4eca60c7-fade-449a-b54e-340721494310", + "type": "lvl3", + "url": "/docs/form/button#social-buttons", + "hierarchy": { + "lvl1": "Button", + "lvl2": "Button loading state", + "lvl3": "Social Buttons" + } + }, + { + "content": "Grouping Buttons", + "id": "53238922-0775-4203-a12d-821a1e40699e", + "type": "lvl3", + "url": "/docs/form/button#grouping-buttons", + "hierarchy": { + "lvl1": "Button", + "lvl2": "Social Buttons", + "lvl3": "Grouping Buttons" + } + }, + { + "content": "Accessibility", + "id": "3fdda970-c006-49b2-b2b7-01b6842ec383", + "type": "lvl2", + "url": "/docs/form/button#accessibility", + "hierarchy": { "lvl1": "Button", "lvl2": "Accessibility", "lvl3": null } + }, + { + "content": "Composition", + "id": "b81abdb6-fa76-4ec9-ba7f-0b9d3ec0aa99", + "type": "lvl2", + "url": "/docs/form/button#composition", + "hierarchy": { "lvl1": "Button", "lvl2": "Composition", "lvl3": null } + }, + { + "content": "Custom Button", + "id": "1ed2dc8d-9d19-4b7a-a64b-abdc4b1c7d20", + "type": "lvl2", + "url": "/docs/form/button#custom-button", + "hierarchy": { "lvl1": "Button", "lvl2": "Custom Button", "lvl3": null } + }, + { + "content": "Props", + "id": "f152bab2-69c6-4bba-b5e9-5b5168d94a87", + "type": "lvl2", + "url": "/docs/form/button#props", + "hierarchy": { "lvl1": "Button", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Checkbox", + "id": "cca29ea4-87f3-4d79-b774-82d18aeb1ab3", + "type": "lvl1", + "url": "/docs/form/checkbox", + "hierarchy": { "lvl1": "Checkbox" } + }, + { + "content": "Import", + "id": "af5b9893-3bf2-4d74-89a8-2cb343a4a780", + "type": "lvl2", + "url": "/docs/form/checkbox#import", + "hierarchy": { "lvl1": "Checkbox", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "a2bf12a1-e3fe-4f64-aac0-0d31f09dc055", + "type": "lvl2", + "url": "/docs/form/checkbox#usage", + "hierarchy": { "lvl1": "Checkbox", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Disabled Checkbox", + "id": "171a64f7-82de-41fc-81b3-50384a5591db", + "type": "lvl3", + "url": "/docs/form/checkbox#disabled-checkbox", + "hierarchy": { + "lvl1": "Checkbox", + "lvl2": "Usage", + "lvl3": "Disabled Checkbox" + } + }, + { + "content": "Checkbox with custom color", + "id": "593a86bd-f9e1-4ef3-a89a-444ac7b5f9e5", + "type": "lvl3", + "url": "/docs/form/checkbox#checkbox-with-custom-color", + "hierarchy": { + "lvl1": "Checkbox", + "lvl2": "Disabled Checkbox", + "lvl3": "Checkbox with custom color" + } + }, + { + "content": "Checkbox sizes", + "id": "5a3e12a7-956f-4e55-93c5-5b16e87dae60", + "type": "lvl3", + "url": "/docs/form/checkbox#checkbox-sizes", + "hierarchy": { + "lvl1": "Checkbox", + "lvl2": "Checkbox with custom color", + "lvl3": "Checkbox sizes" + } + }, + { + "content": "Invalid Checkbox", + "id": "a1f7a181-43d6-4f19-88d2-8e70ed6f30e8", + "type": "lvl3", + "url": "/docs/form/checkbox#invalid-checkbox", + "hierarchy": { + "lvl1": "Checkbox", + "lvl2": "Checkbox sizes", + "lvl3": "Invalid Checkbox" + } + }, + { + "content": "Changing the spacing", + "id": "c0916357-b624-44c3-a267-b5869fac6ae0", + "type": "lvl3", + "url": "/docs/form/checkbox#changing-the-spacing", + "hierarchy": { + "lvl1": "Checkbox", + "lvl2": "Invalid Checkbox", + "lvl3": "Changing the spacing" + } + }, + { + "content": "Changing the icon color and size", + "id": "2d048f13-a303-4986-aa7c-890381ea8f80", + "type": "lvl3", + "url": "/docs/form/checkbox#changing-the-icon-color-and-size", + "hierarchy": { + "lvl1": "Checkbox", + "lvl2": "Changing the spacing", + "lvl3": "Changing the icon color and size" + } + }, + { + "content": "Indeterminate", + "id": "46119157-dc51-4aa4-9b7f-9b4de07120b9", + "type": "lvl3", + "url": "/docs/form/checkbox#indeterminate", + "hierarchy": { + "lvl1": "Checkbox", + "lvl2": "Changing the icon color and size", + "lvl3": "Indeterminate" + } + }, + { + "content": "Icon", + "id": "343fb8e0-a309-4344-b762-b34b33c3eb37", + "type": "lvl3", + "url": "/docs/form/checkbox#icon", + "hierarchy": { "lvl1": "Checkbox", "lvl2": "Indeterminate", "lvl3": "Icon" } + }, + { + "content": "CheckboxGroup", + "id": "2effb7c3-b6ad-45b9-9319-e6a7ae3e2527", + "type": "lvl3", + "url": "/docs/form/checkbox#checkboxgroup", + "hierarchy": { "lvl1": "Checkbox", "lvl2": "Icon", "lvl3": "CheckboxGroup" } + }, + { + "content": "Hooks", + "id": "3cc5a668-eef7-461e-9e30-bf86e11512d6", + "type": "lvl3", + "url": "/docs/form/checkbox#hooks", + "hierarchy": { + "lvl1": "Checkbox", + "lvl2": "CheckboxGroup", + "lvl3": "Hooks" + } + }, + { + "content": "Props", + "id": "ef9a6065-d8d3-447d-a97d-bc8751b0dd1c", + "type": "lvl2", + "url": "/docs/form/checkbox#props", + "hierarchy": { "lvl1": "Checkbox", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Checkbox Props", + "id": "f29dab89-7db0-4893-a2bc-4d192f2c7535", + "type": "lvl3", + "url": "/docs/form/checkbox#checkbox-props", + "hierarchy": { + "lvl1": "Checkbox", + "lvl2": "Props", + "lvl3": "Checkbox Props" + } + }, + { + "content": "CheckboxGroup Props", + "id": "ec36e228-1813-4e51-ac85-87eaf5db1c38", + "type": "lvl3", + "url": "/docs/form/checkbox#checkboxgroup-props", + "hierarchy": { + "lvl1": "Checkbox", + "lvl2": "Checkbox Props", + "lvl3": "CheckboxGroup Props" + } + }, + { + "content": "Shared Style Props", + "id": "340c6475-282c-485a-92c8-47a6216c9201", + "type": "lvl4", + "url": "/docs/form/checkbox#shared-style-props", + "hierarchy": { + "lvl1": "Checkbox", + "lvl2": "CheckboxGroup Props", + "lvl3": null + } + }, + { + "content": "Editable", + "id": "2ebb6a7e-c29b-4497-8a98-d70fe1e08c7f", + "type": "lvl1", + "url": "/docs/form/editable", + "hierarchy": { "lvl1": "Editable" } + }, + { + "content": "Import", + "id": "09777b4b-f59b-4656-9160-da90cb254bc5", + "type": "lvl2", + "url": "/docs/form/editable#import", + "hierarchy": { "lvl1": "Editable", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "f07c3b10-357e-4b51-8f11-2b1c8d0cc0d6", + "type": "lvl2", + "url": "/docs/form/editable#usage", + "hierarchy": { "lvl1": "Editable", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "With custom controls", + "id": "033a806e-30b4-4df9-8126-4ec55340e9de", + "type": "lvl3", + "url": "/docs/form/editable#with-custom-controls", + "hierarchy": { + "lvl1": "Editable", + "lvl2": "Usage", + "lvl3": "With custom controls" + } + }, + { + "content": "Props", + "id": "c929e07d-dec5-49ce-84e2-402439b4c344", + "type": "lvl2", + "url": "/docs/form/editable#props", + "hierarchy": { "lvl1": "Editable", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Editable Props", + "id": "cc868b4d-3724-4d48-a051-ce937f20c9b0", + "type": "lvl3", + "url": "/docs/form/editable#editable-props", + "hierarchy": { + "lvl1": "Editable", + "lvl2": "Props", + "lvl3": "Editable Props" + } + }, + { + "content": "Form Control", + "id": "071bcf75-cbfc-47a1-8395-fe938bfc7d5e", + "type": "lvl1", + "url": "/docs/form/form-control", + "hierarchy": { "lvl1": "Form Control" } + }, + { + "content": "Import", + "id": "c1513571-2c4c-4053-8ab0-9ad5d731d25c", + "type": "lvl2", + "url": "/docs/form/form-control#import", + "hierarchy": { "lvl1": "Form Control", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "b44873ba-5606-45d6-81d2-9f5455513c16", + "type": "lvl2", + "url": "/docs/form/form-control#usage", + "hierarchy": { "lvl1": "Form Control", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Sample usage for a radio or checkbox group", + "id": "7041d1e7-b22c-45b1-a277-63809e395d28", + "type": "lvl3", + "url": "/docs/form/form-control#sample-usage-for-a-radio-or-checkbox-group", + "hierarchy": { + "lvl1": "Form Control", + "lvl2": "Usage", + "lvl3": "Sample usage for a radio or checkbox group" + } + }, + { + "content": "Making a field required", + "id": "7ab3d240-ac46-41ac-8316-194211099b6d", + "type": "lvl3", + "url": "/docs/form/form-control#making-a-field-required", + "hierarchy": { + "lvl1": "Form Control", + "lvl2": "Sample usage for a radio or checkbox group", + "lvl3": "Making a field required" + } + }, + { + "content": "Select Example", + "id": "fb90558f-fd23-4cf5-a1eb-ff4d683ab91f", + "type": "lvl3", + "url": "/docs/form/form-control#select-example", + "hierarchy": { + "lvl1": "Form Control", + "lvl2": "Making a field required", + "lvl3": "Select Example" + } + }, + { + "content": "Number Input Example", + "id": "ad5cbdb8-0d74-40d9-9af5-452e51630144", + "type": "lvl3", + "url": "/docs/form/form-control#number-input-example", + "hierarchy": { + "lvl1": "Form Control", + "lvl2": "Select Example", + "lvl3": "Number Input Example" + } + }, + { + "content": "Usage with Form Libraries", + "id": "a6349786-100e-4b99-9b07-4613057b7d79", + "type": "lvl3", + "url": "/docs/form/form-control#usage-with-form-libraries", + "hierarchy": { + "lvl1": "Form Control", + "lvl2": "Number Input Example", + "lvl3": "Usage with Form Libraries" + } + }, + { + "content": "Improvements from v1", + "id": "13fb00ac-b29d-4a9e-9696-b61da807cef8", + "type": "lvl2", + "url": "/docs/form/form-control#improvements-from-v1", + "hierarchy": { + "lvl1": "Form Control", + "lvl2": "Improvements from v1", + "lvl3": null + } + }, + { + "content": "Props", + "id": "eab52448-8903-42c3-95a5-8b9098faec5c", + "type": "lvl2", + "url": "/docs/form/form-control#props", + "hierarchy": { "lvl1": "Form Control", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Icon Button", + "id": "dfad1d6d-0e6e-4490-9c7c-93ae6135cfce", + "type": "lvl1", + "url": "/docs/form/icon-button", + "hierarchy": { "lvl1": "Icon Button" } + }, + { + "content": "Import", + "id": "383cba12-8989-4fae-ae8d-2aa09de684f6", + "type": "lvl2", + "url": "/docs/form/icon-button#import", + "hierarchy": { "lvl1": "Icon Button", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "49026ee9-13f1-4f2d-8915-cf6320c91460", + "type": "lvl2", + "url": "/docs/form/icon-button#usage", + "hierarchy": { "lvl1": "Icon Button", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Button Colors", + "id": "2b1d022f-ec9e-4020-8f95-9653cedfe0a8", + "type": "lvl3", + "url": "/docs/form/icon-button#button-colors", + "hierarchy": { + "lvl1": "Icon Button", + "lvl2": "Usage", + "lvl3": "Button Colors" + } + }, + { + "content": "Button Sizes", + "id": "4092c42c-e3bb-4bd5-8557-e220bc5774d7", + "type": "lvl3", + "url": "/docs/form/icon-button#button-sizes", + "hierarchy": { + "lvl1": "Icon Button", + "lvl2": "Button Colors", + "lvl3": "Button Sizes" + } + }, + { + "content": "Button Variants", + "id": "565b8ec6-1bf9-439a-b76a-eae7006683a6", + "type": "lvl3", + "url": "/docs/form/icon-button#button-variants", + "hierarchy": { + "lvl1": "Icon Button", + "lvl2": "Button Sizes", + "lvl3": "Button Variants" + } + }, + { + "content": "With custom icon", + "id": "d906a957-8d1f-4193-b661-d0b161569c60", + "type": "lvl3", + "url": "/docs/form/icon-button#with-custom-icon", + "hierarchy": { + "lvl1": "Icon Button", + "lvl2": "Button Variants", + "lvl3": "With custom icon" + } + }, + { + "content": "Props", + "id": "99fcfd14-2eb0-477e-8e0a-784ffd9b2b71", + "type": "lvl2", + "url": "/docs/form/icon-button#props", + "hierarchy": { "lvl1": "Icon Button", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Input", + "id": "0a6c55a3-306f-4a1e-99be-b1757f4934ea", + "type": "lvl1", + "url": "/docs/form/input", + "hierarchy": { "lvl1": "Input" } + }, + { + "content": "Import", + "id": "56d398a7-518b-4a51-b8a4-7ebe288da855", + "type": "lvl2", + "url": "/docs/form/input#import", + "hierarchy": { "lvl1": "Input", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "44220e46-fe66-416a-b376-c8a83957d08b", + "type": "lvl2", + "url": "/docs/form/input#usage", + "hierarchy": { "lvl1": "Input", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Changing the size of the Input", + "id": "9ef2207d-a587-4dc9-aaa8-37988b297c58", + "type": "lvl3", + "url": "/docs/form/input#changing-the-size-of-the-input", + "hierarchy": { + "lvl1": "Input", + "lvl2": "Usage", + "lvl3": "Changing the size of the Input" + } + }, + { + "content": "Changing the appearance of the input", + "id": "69892e0b-c064-485c-8cca-f08de9c08a84", + "type": "lvl3", + "url": "/docs/form/input#changing-the-appearance-of-the-input", + "hierarchy": { + "lvl1": "Input", + "lvl2": "Changing the size of the Input", + "lvl3": "Changing the appearance of the input" + } + }, + { + "content": "Left and Right Addons", + "id": "a0c38be9-e242-438e-b20c-09253f4cbf31", + "type": "lvl3", + "url": "/docs/form/input#left-and-right-addons", + "hierarchy": { + "lvl1": "Input", + "lvl2": "Changing the appearance of the input", + "lvl3": "Left and Right Addons" + } + }, + { + "content": "Add elements inside Input", + "id": "4ddaf0f3-1336-4296-9b63-63adb24c8e67", + "type": "lvl3", + "url": "/docs/form/input#add-elements-inside-input", + "hierarchy": { + "lvl1": "Input", + "lvl2": "Left and Right Addons", + "lvl3": "Add elements inside Input" + } + }, + { + "content": "Password Input Example", + "id": "098f6402-81f3-4816-9ddf-6ec2fb7f6e7e", + "type": "lvl3", + "url": "/docs/form/input#password-input-example", + "hierarchy": { + "lvl1": "Input", + "lvl2": "Add elements inside Input", + "lvl3": "Password Input Example" + } + }, + { + "content": "Controlled Input", + "id": "84dcec4b-6402-4ff0-a225-bf10ef9cc934", + "type": "lvl3", + "url": "/docs/form/input#controlled-input", + "hierarchy": { + "lvl1": "Input", + "lvl2": "Password Input Example", + "lvl3": "Controlled Input" + } + }, + { + "content": "Changing the focus and error border colors", + "id": "8f1b1540-4b53-4296-877f-ea18f5bad427", + "type": "lvl3", + "url": "/docs/form/input#changing-the-focus-and-error-border-colors", + "hierarchy": { + "lvl1": "Input", + "lvl2": "Controlled Input", + "lvl3": "Changing the focus and error border colors" + } + }, + { + "content": "Props", + "id": "e40c587a-bf3d-4823-b8f5-a4ae85c0f3d3", + "type": "lvl2", + "url": "/docs/form/input#props", + "hierarchy": { "lvl1": "Input", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Number Input", + "id": "d7b03924-11c7-48da-b3b0-fea696e912a0", + "type": "lvl1", + "url": "/docs/form/number-input", + "hierarchy": { "lvl1": "Number Input" } + }, + { + "content": "Import", + "id": "1462da9d-41b9-4e8e-a53b-62771d4a53ed", + "type": "lvl2", + "url": "/docs/form/number-input#import", + "hierarchy": { "lvl1": "Number Input", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "13b0fb50-1644-42db-a7af-8b02fceb4fe7", + "type": "lvl2", + "url": "/docs/form/number-input#usage", + "hierarchy": { "lvl1": "Number Input", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Setting a minimum and maximum value", + "id": "72ab0b79-c0ba-457c-af07-e141951ec820", + "type": "lvl3", + "url": "/docs/form/number-input#setting-a-minimum-and-maximum-value", + "hierarchy": { + "lvl1": "Number Input", + "lvl2": "Usage", + "lvl3": "Setting a minimum and maximum value" + } + }, + { + "content": "Setting the step size", + "id": "99616844-49e4-4b5a-8d33-bfb29dfbdbd7", + "type": "lvl3", + "url": "/docs/form/number-input#setting-the-step-size", + "hierarchy": { + "lvl1": "Number Input", + "lvl2": "Setting a minimum and maximum value", + "lvl3": "Setting the step size" + } + }, + { + "content": "Adjusting the precision of the value", + "id": "459417cc-c7e9-4aa7-a039-930464df1dfc", + "type": "lvl3", + "url": "/docs/form/number-input#adjusting-the-precision-of-the-value", + "hierarchy": { + "lvl1": "Number Input", + "lvl2": "Setting the step size", + "lvl3": "Adjusting the precision of the value" + } + }, + { + "content": "Clamp value when user blurs the input", + "id": "fe40cf0e-9998-4616-9095-4c67525f6ee4", + "type": "lvl3", + "url": "/docs/form/number-input#clamp-value-when-user-blurs-the-input", + "hierarchy": { + "lvl1": "Number Input", + "lvl2": "Adjusting the precision of the value", + "lvl3": "Clamp value when user blurs the input" + } + }, + { + "content": "Allowing out of range values", + "id": "2d478d4a-2f64-46d3-8dd5-e393617bd627", + "type": "lvl3", + "url": "/docs/form/number-input#allowing-out-of-range-values", + "hierarchy": { + "lvl1": "Number Input", + "lvl2": "Clamp value when user blurs the input", + "lvl3": "Allowing out of range values" + } + }, + { + "content": "Formatting and Parsing the value", + "id": "523d3cdd-610b-4299-a145-d8da21cb9f29", + "type": "lvl3", + "url": "/docs/form/number-input#formatting-and-parsing-the-value", + "hierarchy": { + "lvl1": "Number Input", + "lvl2": "Allowing out of range values", + "lvl3": "Formatting and Parsing the value" + } + }, + { + "content": "Changing the size of the input", + "id": "f35db716-343d-439a-ad29-ced076a07e33", + "type": "lvl3", + "url": "/docs/form/number-input#changing-the-size-of-the-input", + "hierarchy": { + "lvl1": "Number Input", + "lvl2": "Formatting and Parsing the value", + "lvl3": "Changing the size of the input" + } + }, + { + "content": "Changing the styles", + "id": "e950df51-2596-4eca-8f8c-f7df5c3ab41f", + "type": "lvl3", + "url": "/docs/form/number-input#changing-the-styles", + "hierarchy": { + "lvl1": "Number Input", + "lvl2": "Changing the size of the input", + "lvl3": "Changing the styles" + } + }, + { + "content": "Combining it with a Slider", + "id": "2df34374-c7d6-4bd5-818e-4f416ba38595", + "type": "lvl3", + "url": "/docs/form/number-input#combining-it-with-a-slider", + "hierarchy": { + "lvl1": "Number Input", + "lvl2": "Changing the styles", + "lvl3": "Combining it with a Slider" + } + }, + { + "content": "Create a mobile spinner", + "id": "3b7351fb-8564-4596-b125-24b2265b3458", + "type": "lvl3", + "url": "/docs/form/number-input#create-a-mobile-spinner", + "hierarchy": { + "lvl1": "Number Input", + "lvl2": "Combining it with a Slider", + "lvl3": "Create a mobile spinner" + } + }, + { + "content": "Increment value using Mouse wheel", + "id": "ddd67b4a-e5e6-48c4-86d1-7a3c16a73871", + "type": "lvl3", + "url": "/docs/form/number-input#increment-value-using-mouse-wheel", + "hierarchy": { + "lvl1": "Number Input", + "lvl2": "Create a mobile spinner", + "lvl3": "Increment value using Mouse wheel" + } + }, + { + "content": "Accessibility", + "id": "f448a387-c237-4b54-8e30-8bd7ef81034a", + "type": "lvl2", + "url": "/docs/form/number-input#accessibility", + "hierarchy": { + "lvl1": "Number Input", + "lvl2": "Accessibility", + "lvl3": null + } + }, + { + "content": "Aria Roles", + "id": "7fd77824-cc6d-4ced-a042-43289062fa48", + "type": "lvl3", + "url": "/docs/form/number-input#aria-roles", + "hierarchy": { + "lvl1": "Number Input", + "lvl2": "Accessibility", + "lvl3": "Aria Roles" + } + }, + { + "content": "Keyboard Navigation", + "id": "70bac0c8-b5b4-4c5d-972a-cdd100ec9264", + "type": "lvl3", + "url": "/docs/form/number-input#keyboard-navigation", + "hierarchy": { + "lvl1": "Number Input", + "lvl2": "Aria Roles", + "lvl3": "Keyboard Navigation" + } + }, + { + "content": "Props", + "id": "3625dfb4-bdaf-4ce9-b1ce-b2c88aafa114", + "type": "lvl2", + "url": "/docs/form/number-input#props", + "hierarchy": { "lvl1": "Number Input", "lvl2": "Props", "lvl3": null } + }, + { + "content": "NumberInput Props", + "id": "d8477c08-ac01-451a-94f9-194d84cb69f8", + "type": "lvl3", + "url": "/docs/form/number-input#numberinput-props", + "hierarchy": { + "lvl1": "Number Input", + "lvl2": "Props", + "lvl3": "NumberInput Props" + } + }, + { + "content": "NumberInputField Props", + "id": "82a2a651-c5f5-4b65-a0ca-aac7c0d9efbe", + "type": "lvl3", + "url": "/docs/form/number-input#numberinputfield-props", + "hierarchy": { + "lvl1": "Number Input", + "lvl2": "NumberInput Props", + "lvl3": "NumberInputField Props" + } + }, + { + "content": "NumberInputStepper Props", + "id": "6c05e7f1-b1c9-471b-bf46-a692f7a9440a", + "type": "lvl3", + "url": "/docs/form/number-input#numberinputstepper-props", + "hierarchy": { + "lvl1": "Number Input", + "lvl2": "NumberInputField Props", + "lvl3": "NumberInputStepper Props" + } + }, + { + "content": "NumberDecrementStepper and NumberIncrementStepper Props", + "id": "4393c947-e7e8-4512-95cd-20848b844dbb", + "type": "lvl3", + "url": "/docs/form/number-input#numberdecrementstepper-and-numberincrementstepper-props", + "hierarchy": { + "lvl1": "Number Input", + "lvl2": "NumberInputStepper Props", + "lvl3": "NumberDecrementStepper and NumberIncrementStepper Props" + } + }, + { + "content": "Pin Input", + "id": "fb18bf40-4b8a-4997-b360-5cb4e44efa31", + "type": "lvl1", + "url": "/docs/form/pin-input", + "hierarchy": { "lvl1": "Pin Input" } + }, + { + "content": "Import", + "id": "51aaa7cf-4324-4ce8-a03a-67ad26e84023", + "type": "lvl2", + "url": "/docs/form/pin-input#import", + "hierarchy": { "lvl1": "Pin Input", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "33d4760c-bcbc-426c-a9e4-cbe20bc3c062", + "type": "lvl2", + "url": "/docs/form/pin-input#usage", + "hierarchy": { "lvl1": "Pin Input", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Changing the size of the Input", + "id": "4c386964-509a-4b85-afd5-52f73225c8cb", + "type": "lvl3", + "url": "/docs/form/pin-input#changing-the-size-of-the-input", + "hierarchy": { + "lvl1": "Pin Input", + "lvl2": "Usage", + "lvl3": "Changing the size of the Input" + } + }, + { + "content": "Adding a defaultValue", + "id": "ea19cb8e-5d05-46bc-9bec-9314618c1e8a", + "type": "lvl3", + "url": "/docs/form/pin-input#adding-a-defaultvalue", + "hierarchy": { + "lvl1": "Pin Input", + "lvl2": "Changing the size of the Input", + "lvl3": "Adding a defaultValue" + } + }, + { + "content": "Changing the placeholder", + "id": "414b8cea-5d21-40b1-83b9-36849b8d8dbc", + "type": "lvl3", + "url": "/docs/form/pin-input#changing-the-placeholder", + "hierarchy": { + "lvl1": "Pin Input", + "lvl2": "Adding a defaultValue", + "lvl3": "Changing the placeholder" + } + }, + { + "content": "Disable focus management", + "id": "9137b7cb-3e52-418c-93eb-f6f6d2e02b7a", + "type": "lvl3", + "url": "/docs/form/pin-input#disable-focus-management", + "hierarchy": { + "lvl1": "Pin Input", + "lvl2": "Changing the placeholder", + "lvl3": "Disable focus management" + } + }, + { + "content": "AutoFill and Copy + Paste", + "id": "5b0050ff-e81c-4437-8005-2540ff6f3ebb", + "type": "lvl3", + "url": "/docs/form/pin-input#autofill-and-copy--paste", + "hierarchy": { + "lvl1": "Pin Input", + "lvl2": "Disable focus management", + "lvl3": "AutoFill and Copy + Paste" + } + }, + { + "content": "Props", + "id": "2b913a8e-e081-4899-8c0c-973e54d18147", + "type": "lvl2", + "url": "/docs/form/pin-input#props", + "hierarchy": { "lvl1": "Pin Input", "lvl2": "Props", "lvl3": null } + }, + { + "content": "PinInputField", + "id": "4d3b0bc5-4339-4618-86bd-b8cfbec3698c", + "type": "lvl3", + "url": "/docs/form/pin-input#pininputfield", + "hierarchy": { + "lvl1": "Pin Input", + "lvl2": "Props", + "lvl3": "PinInputField" + } + }, + { + "content": "Radio", + "id": "8a2799c7-9f6b-4379-9f69-970b3e7099e0", + "type": "lvl1", + "url": "/docs/form/radio", + "hierarchy": { "lvl1": "Radio" } + }, + { + "content": "Installation", + "id": "f02eeca9-d74d-487a-9de0-dc9609decd8a", + "type": "lvl2", + "url": "/docs/form/radio#installation", + "hierarchy": { "lvl1": "Radio", "lvl2": "Installation", "lvl3": null } + }, + { + "content": "Usage", + "id": "7f505809-372c-48fa-bea5-c6ad8319b289", + "type": "lvl3", + "url": "/docs/form/radio#usage", + "hierarchy": { "lvl1": "Radio", "lvl2": "Installation", "lvl3": "Usage" } + }, + { + "content": "Radio with custom color", + "id": "14e4a88b-8447-4b09-a2b1-f402ee5c0d4e", + "type": "lvl3", + "url": "/docs/form/radio#radio-with-custom-color", + "hierarchy": { + "lvl1": "Radio", + "lvl2": "Usage", + "lvl3": "Radio with custom color" + } + }, + { + "content": "Radio sizes", + "id": "0f67d4cc-841d-4f2d-ba43-c6bb516cd40f", + "type": "lvl3", + "url": "/docs/form/radio#radio-sizes", + "hierarchy": { + "lvl1": "Radio", + "lvl2": "Radio with custom color", + "lvl3": "Radio sizes" + } + }, + { + "content": "Disabled radios", + "id": "1497f62c-b981-4645-b2d7-999626ddc63c", + "type": "lvl3", + "url": "/docs/form/radio#disabled-radios", + "hierarchy": { + "lvl1": "Radio", + "lvl2": "Radio sizes", + "lvl3": "Disabled radios" + } + }, + { + "content": "Horizontal alignment", + "id": "00dda059-229b-4dbd-a5fc-892d59f9da49", + "type": "lvl3", + "url": "/docs/form/radio#horizontal-alignment", + "hierarchy": { + "lvl1": "Radio", + "lvl2": "Disabled radios", + "lvl3": "Horizontal alignment" + } + }, + { + "content": "Invalid Checkbox", + "id": "a97f27d8-a2df-4ad1-a42c-1c30f3ae985e", + "type": "lvl3", + "url": "/docs/form/radio#invalid-checkbox", + "hierarchy": { + "lvl1": "Radio", + "lvl2": "Horizontal alignment", + "lvl3": "Invalid Checkbox" + } + }, + { + "content": "Custom Radio Buttons", + "id": "31fae78c-7ade-47e3-bf06-397e8af42678", + "type": "lvl3", + "url": "/docs/form/radio#custom-radio-buttons", + "hierarchy": { + "lvl1": "Radio", + "lvl2": "Invalid Checkbox", + "lvl3": "Custom Radio Buttons" + } + }, + { + "content": "Note about `name` prop", + "id": "34121f13-6db3-45e5-849a-8d3675420dbf", + "type": "lvl3", + "url": "/docs/form/radio#note-about-name-prop", + "hierarchy": { + "lvl1": "Radio", + "lvl2": "Custom Radio Buttons", + "lvl3": "Note about `name` prop" + } + }, + { + "content": "Props", + "id": "8876318e-5b89-4a47-99c0-05c3758d2aeb", + "type": "lvl2", + "url": "/docs/form/radio#props", + "hierarchy": { "lvl1": "Radio", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Select", + "id": "5ae72081-ece8-44cb-a555-defa9c97e94f", + "type": "lvl1", + "url": "/docs/form/select", + "hierarchy": { "lvl1": "Select" } + }, + { + "content": "Import", + "id": "bbd58e0f-a030-411f-8a0f-3d08b405aca1", + "type": "lvl2", + "url": "/docs/form/select#import", + "hierarchy": { "lvl1": "Select", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "5bfaed20-2762-4cf4-b6fd-674b723ea590", + "type": "lvl2", + "url": "/docs/form/select#usage", + "hierarchy": { "lvl1": "Select", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Changing the size of the Select", + "id": "bb005a44-f267-428c-a869-b86e7d140143", + "type": "lvl3", + "url": "/docs/form/select#changing-the-size-of-the-select", + "hierarchy": { + "lvl1": "Select", + "lvl2": "Usage", + "lvl3": "Changing the size of the Select" + } + }, + { + "content": "Changing the appearance of the Select", + "id": "3e7a10b4-82c5-420b-a57d-aaeeff88e98f", + "type": "lvl3", + "url": "/docs/form/select#changing-the-appearance-of-the-select", + "hierarchy": { + "lvl1": "Select", + "lvl2": "Changing the size of the Select", + "lvl3": "Changing the appearance of the Select" + } + }, + { + "content": "Changing the icon in the Select", + "id": "a3dffb4e-9766-40c3-bb6b-f09904a667e6", + "type": "lvl3", + "url": "/docs/form/select#changing-the-icon-in-the-select", + "hierarchy": { + "lvl1": "Select", + "lvl2": "Changing the appearance of the Select", + "lvl3": "Changing the icon in the Select" + } + }, + { + "content": "Overriding the styles of the Select", + "id": "0bb14d10-8cee-4e6d-a1cb-8c8aff8ebcfc", + "type": "lvl3", + "url": "/docs/form/select#overriding-the-styles-of-the-select", + "hierarchy": { + "lvl1": "Select", + "lvl2": "Changing the icon in the Select", + "lvl3": "Overriding the styles of the Select" + } + }, + { + "content": "Props", + "id": "f15564d6-6b84-4114-822b-90c8334459d6", + "type": "lvl2", + "url": "/docs/form/select#props", + "hierarchy": { "lvl1": "Select", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Slider", + "id": "8db03cc8-f958-44c0-9885-2cc854bd8467", + "type": "lvl1", + "url": "/docs/form/slider", + "hierarchy": { "lvl1": "Slider" } + }, + { + "content": "Import", + "id": "0eae5c4d-726b-4811-8ec2-84911c0c5a19", + "type": "lvl2", + "url": "/docs/form/slider#import", + "hierarchy": { "lvl1": "Slider", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "b6467ed1-6b2a-41e9-86cc-011f2ecb7245", + "type": "lvl2", + "url": "/docs/form/slider#usage", + "hierarchy": { "lvl1": "Slider", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Changing the slider color", + "id": "d1b7491e-c3bc-4719-8bf7-6002794f7a69", + "type": "lvl3", + "url": "/docs/form/slider#changing-the-slider-color", + "hierarchy": { + "lvl1": "Slider", + "lvl2": "Usage", + "lvl3": "Changing the slider color" + } + }, + { + "content": "Turn vertical", + "id": "72dbeac3-ee31-4968-92c7-9cc17e67266d", + "type": "lvl3", + "url": "/docs/form/slider#turn-vertical", + "hierarchy": { + "lvl1": "Slider", + "lvl2": "Changing the slider color", + "lvl3": "Turn vertical" + } + }, + { + "content": "Customized Sliders", + "id": "aad4c44e-47fd-4717-a402-bd569eed0c19", + "type": "lvl3", + "url": "/docs/form/slider#customized-sliders", + "hierarchy": { + "lvl1": "Slider", + "lvl2": "Turn vertical", + "lvl3": "Customized Sliders" + } + }, + { + "content": "Getting the final value when dragging the slider", + "id": "b025f5c2-12ec-49c8-8baa-ea3f7585c2bc", + "type": "lvl3", + "url": "/docs/form/slider#getting-the-final-value-when-dragging-the-slider", + "hierarchy": { + "lvl1": "Slider", + "lvl2": "Customized Sliders", + "lvl3": "Getting the final value when dragging the slider" + } + }, + { + "content": "Configure thumb focus with `focusThumbOnChange`", + "id": "822a1da8-1032-4e70-a0c5-eb2cf61c4ae4", + "type": "lvl3", + "url": "/docs/form/slider#configure-thumb-focus-with-focusthumbonchange", + "hierarchy": { + "lvl1": "Slider", + "lvl2": "Getting the final value when dragging the slider", + "lvl3": "Configure thumb focus with `focusThumbOnChange`" + } + }, + { + "content": "useSlider", + "id": "7127709c-e308-4a15-bbf2-f0fdde16792c", + "type": "lvl3", + "url": "/docs/form/slider#useslider", + "hierarchy": { + "lvl1": "Slider", + "lvl2": "Configure thumb focus with `focusThumbOnChange`", + "lvl3": "useSlider" + } + }, + { + "content": "Props", + "id": "bf07ea3e-695b-42ff-94d4-537a69aa6dc3", + "type": "lvl2", + "url": "/docs/form/slider#props", + "hierarchy": { "lvl1": "Slider", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Slider Props", + "id": "dca3e83d-0044-4bf3-9596-79a5d0856988", + "type": "lvl3", + "url": "/docs/form/slider#slider-props", + "hierarchy": { "lvl1": "Slider", "lvl2": "Props", "lvl3": "Slider Props" } + }, + { + "content": "SliderThumb Props", + "id": "e947ca1d-94d8-4b75-901c-c2efab83f69d", + "type": "lvl3", + "url": "/docs/form/slider#sliderthumb-props", + "hierarchy": { + "lvl1": "Slider", + "lvl2": "Slider Props", + "lvl3": "SliderThumb Props" + } + }, + { + "content": "SliderFilledTrack Props", + "id": "4636ab3e-b15b-408e-8576-2b502a342e74", + "type": "lvl3", + "url": "/docs/form/slider#sliderfilledtrack-props", + "hierarchy": { + "lvl1": "Slider", + "lvl2": "SliderThumb Props", + "lvl3": "SliderFilledTrack Props" + } + }, + { + "content": "SliderTrack Props", + "id": "5f9a080c-3b02-41fc-b876-33989c62aff2", + "type": "lvl3", + "url": "/docs/form/slider#slidertrack-props", + "hierarchy": { + "lvl1": "Slider", + "lvl2": "SliderFilledTrack Props", + "lvl3": "SliderTrack Props" + } + }, + { + "content": "Switch", + "id": "8a2932c9-e5af-4821-bae5-d21ee82f4d7d", + "type": "lvl1", + "url": "/docs/form/switch", + "hierarchy": { "lvl1": "Switch" } + }, + { + "content": "Import", + "id": "42969d06-f067-4ff6-9a2a-ba91566f7780", + "type": "lvl2", + "url": "/docs/form/switch#import", + "hierarchy": { "lvl1": "Switch", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "fecd921a-74d1-4672-9c9f-617bc3521424", + "type": "lvl2", + "url": "/docs/form/switch#usage", + "hierarchy": { "lvl1": "Switch", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Sizes", + "id": "775428e9-1881-4112-9d15-7367d72b2fc1", + "type": "lvl2", + "url": "/docs/form/switch#sizes", + "hierarchy": { "lvl1": "Switch", "lvl2": "Sizes", "lvl3": null } + }, + { + "content": "Switch background color", + "id": "79be2663-b7b9-4c94-950e-41fd86146888", + "type": "lvl2", + "url": "/docs/form/switch#switch-background-color", + "hierarchy": { + "lvl1": "Switch", + "lvl2": "Switch background color", + "lvl3": null + } + }, + { + "content": "Props", + "id": "da0db282-6b33-4c46-9cac-93aef63be57e", + "type": "lvl2", + "url": "/docs/form/switch#props", + "hierarchy": { "lvl1": "Switch", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Textarea", + "id": "b70c64de-a553-4259-8ee8-0a38b9832133", + "type": "lvl1", + "url": "/docs/form/textarea", + "hierarchy": { "lvl1": "Textarea" } + }, + { + "content": "Import", + "id": "74f7c7c0-a571-4e36-aa28-9ebdff5e7d8e", + "type": "lvl2", + "url": "/docs/form/textarea#import", + "hierarchy": { "lvl1": "Textarea", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "c8a151ee-c60a-46ce-947e-771f6291e744", + "type": "lvl3", + "url": "/docs/form/textarea#usage", + "hierarchy": { "lvl1": "Textarea", "lvl2": "Import", "lvl3": "Usage" } + }, + { + "content": "Controlled Textarea", + "id": "6e5ec639-15ab-40f7-b942-d96069d877e9", + "type": "lvl3", + "url": "/docs/form/textarea#controlled-textarea", + "hierarchy": { + "lvl1": "Textarea", + "lvl2": "Usage", + "lvl3": "Controlled Textarea" + } + }, + { + "content": "Resize behavior", + "id": "50ad02d5-03b3-4502-a7d6-18e504c01e23", + "type": "lvl3", + "url": "/docs/form/textarea#resize-behavior", + "hierarchy": { + "lvl1": "Textarea", + "lvl2": "Controlled Textarea", + "lvl3": "Resize behavior" + } + }, + { + "content": "Disabled Textarea", + "id": "67d2d928-88a4-492c-b567-d42da0f18f7e", + "type": "lvl3", + "url": "/docs/form/textarea#disabled-textarea", + "hierarchy": { + "lvl1": "Textarea", + "lvl2": "Resize behavior", + "lvl3": "Disabled Textarea" + } + }, + { + "content": "Invalid Textarea", + "id": "2b795dfc-4d6d-434d-818d-f410c26fd315", + "type": "lvl3", + "url": "/docs/form/textarea#invalid-textarea", + "hierarchy": { + "lvl1": "Textarea", + "lvl2": "Disabled Textarea", + "lvl3": "Invalid Textarea" + } + }, + { + "content": "Props", + "id": "022cf18d-53ff-4274-b53b-d730ea160134", + "type": "lvl2", + "url": "/docs/form/textarea#props", + "hierarchy": { "lvl1": "Textarea", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Getting Started", + "id": "a9e25273-087c-4025-b781-494e52d650ed", + "type": "lvl1", + "url": "/docs/getting-started", + "hierarchy": { "lvl1": "Getting Started" } + }, + { + "content": "Installation", + "id": "9786ff33-4156-484b-bf39-8448ec39eaaa", + "type": "lvl2", + "url": "/docs/getting-started#installation", + "hierarchy": { + "lvl1": "Getting Started", + "lvl2": "Installation", + "lvl3": null + } + }, + { + "content": "Setup Provider", + "id": "fc59527d-ee89-4857-8bf6-978f55f7111e", + "type": "lvl2", + "url": "/docs/getting-started#setup-provider", + "hierarchy": { + "lvl1": "Getting Started", + "lvl2": "Setup Provider", + "lvl3": null + } + }, + { + "content": "Add custom theme (Optional)", + "id": "e08b622a-bc67-4794-805a-81e22f78cc47", + "type": "lvl2", + "url": "/docs/getting-started#add-custom-theme-optional", + "hierarchy": { + "lvl1": "Getting Started", + "lvl2": "Add custom theme (Optional)", + "lvl3": null + } + }, + { + "content": "ChakraProvider Props", + "id": "de76a317-b98b-4a0a-9bc6-6e80a37012e3", + "type": "lvl3", + "url": "/docs/getting-started#chakraprovider-props", + "hierarchy": { + "lvl1": "Getting Started", + "lvl2": "Add custom theme (Optional)", + "lvl3": "ChakraProvider Props" + } + }, + { + "content": "Optional Packages", + "id": "775aa3c8-535e-4056-b1b9-2355bd499c08", + "type": "lvl2", + "url": "/docs/getting-started#optional-packages", + "hierarchy": { + "lvl1": "Getting Started", + "lvl2": "Optional Packages", + "lvl3": null + } + }, + { + "content": "Notes on TypeScript 🚨", + "id": "3c89d166-dc5d-4ce3-bf52-7464e2b6e4cd", + "type": "lvl2", + "url": "/docs/getting-started#notes-on-typescript-🚨", + "hierarchy": { + "lvl1": "Getting Started", + "lvl2": "Notes on TypeScript 🚨", + "lvl3": null + } + }, + { + "content": "Contributing", + "id": "cb025bdc-7821-479c-84bf-af0c5c038f8f", + "type": "lvl2", + "url": "/docs/getting-started#contributing", + "hierarchy": { + "lvl1": "Getting Started", + "lvl2": "Contributing", + "lvl3": null + } + }, + { + "content": "useBreakpointValue", + "id": "7ca9efc5-86f8-4068-a92f-43abe09cd1cd", + "type": "lvl1", + "url": "/docs/hooks/use-breakpoint-value", + "hierarchy": { "lvl1": "useBreakpointValue" } + }, + { + "content": "Import", + "id": "053795a3-e1ff-419e-bebb-cbce1acd095f", + "type": "lvl2", + "url": "/docs/hooks/use-breakpoint-value#import", + "hierarchy": { + "lvl1": "useBreakpointValue", + "lvl2": "Import", + "lvl3": null + } + }, + { + "content": "Return value", + "id": "5fbb0941-6053-44ab-8bbd-b27a61a54e89", + "type": "lvl2", + "url": "/docs/hooks/use-breakpoint-value#return-value", + "hierarchy": { + "lvl1": "useBreakpointValue", + "lvl2": "Return value", + "lvl3": null + } + }, + { + "content": "Usage", + "id": "575ac1db-bd51-4bad-b38d-30e8c507108c", + "type": "lvl2", + "url": "/docs/hooks/use-breakpoint-value#usage", + "hierarchy": { "lvl1": "useBreakpointValue", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "useClipboard", + "id": "9334ede7-a73a-426b-a14a-ad9c58422f48", + "type": "lvl1", + "url": "/docs/hooks/use-clipboard", + "hierarchy": { "lvl1": "useClipboard" } + }, + { + "content": "Return value", + "id": "f4353546-2fa1-40f2-b0cf-ce881f198bbe", + "type": "lvl2", + "url": "/docs/hooks/use-clipboard#return-value", + "hierarchy": { + "lvl1": "useClipboard", + "lvl2": "Return value", + "lvl3": null + } + }, + { + "content": "Import", + "id": "a505c127-2ba4-4624-80ff-ef8d6d0c1ffe", + "type": "lvl2", + "url": "/docs/hooks/use-clipboard#import", + "hierarchy": { "lvl1": "useClipboard", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "4debe094-3e30-4aa0-a26c-7119e8706029", + "type": "lvl2", + "url": "/docs/hooks/use-clipboard#usage", + "hierarchy": { "lvl1": "useClipboard", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "useControllableState", + "id": "2f3df26f-670e-4d19-a411-019e52dcedf6", + "type": "lvl1", + "url": "/docs/hooks/use-controllable", + "hierarchy": { "lvl1": "useControllableState" } + }, + { + "content": "Import", + "id": "ea59435c-e699-4f68-8271-67fd5dfeec42", + "type": "lvl2", + "url": "/docs/hooks/use-controllable#import", + "hierarchy": { + "lvl1": "useControllableState", + "lvl2": "Import", + "lvl3": null + } + }, + { + "content": "useControllableProp", + "id": "6eaec805-e0d0-4659-829b-e876e78c1496", + "type": "lvl2", + "url": "/docs/hooks/use-controllable#usecontrollableprop", + "hierarchy": { + "lvl1": "useControllableState", + "lvl2": "useControllableProp", + "lvl3": null + } + }, + { + "content": "Usage", + "id": "46c2ac9c-ec33-4524-bab6-d7d36daf5965", + "type": "lvl3", + "url": "/docs/hooks/use-controllable#usage", + "hierarchy": { + "lvl1": "useControllableState", + "lvl2": "useControllableProp", + "lvl3": "Usage" + } + }, + { + "content": "useControllableState", + "id": "771ead5f-6a2c-4528-ad8d-daf7be257cce", + "type": "lvl2", + "url": "/docs/hooks/use-controllable#usecontrollablestate", + "hierarchy": { + "lvl1": "useControllableState", + "lvl2": "useControllableState", + "lvl3": null + } + }, + { + "content": "Usage", + "id": "0107e33a-646f-4f13-8694-d6ede20276ff", + "type": "lvl3", + "url": "/docs/hooks/use-controllable#usage-1", + "hierarchy": { + "lvl1": "useControllableState", + "lvl2": "useControllableState", + "lvl3": "Usage" + } + }, + { + "content": "Contextual feedback and State updates", + "id": "552dfbd3-f7a1-4593-9e4f-b534f1742aad", + "type": "lvl3", + "url": "/docs/hooks/use-controllable#contextual-feedback-and-state-updates", + "hierarchy": { + "lvl1": "useControllableState", + "lvl2": "Usage", + "lvl3": "Contextual feedback and State updates" + } + }, + { + "content": "Props", + "id": "0b9419c2-f792-4b85-9a1d-d3611bbfae44", + "type": "lvl2", + "url": "/docs/hooks/use-controllable#props", + "hierarchy": { + "lvl1": "useControllableState", + "lvl2": "Props", + "lvl3": null + } + }, + { + "content": "useDisclosure", + "id": "7b497a12-0714-4698-9bd4-380d8eb5498c", + "type": "lvl1", + "url": "/docs/hooks/use-disclosure", + "hierarchy": { "lvl1": "useDisclosure" } + }, + { + "content": "Import", + "id": "bc9485be-5a75-40f2-a97a-1b3d869d6826", + "type": "lvl2", + "url": "/docs/hooks/use-disclosure#import", + "hierarchy": { "lvl1": "useDisclosure", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Return value", + "id": "e07777d8-216f-41cc-94a5-c22c9f2c7666", + "type": "lvl2", + "url": "/docs/hooks/use-disclosure#return-value", + "hierarchy": { + "lvl1": "useDisclosure", + "lvl2": "Return value", + "lvl3": null + } + }, + { + "content": "Usage", + "id": "9c8baa57-d528-48ee-b1ba-4aa1f78ec5d4", + "type": "lvl2", + "url": "/docs/hooks/use-disclosure#usage", + "hierarchy": { "lvl1": "useDisclosure", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Parameters", + "id": "050c18f7-3b5d-45c6-b457-f9e12d00add4", + "type": "lvl2", + "url": "/docs/hooks/use-disclosure#parameters", + "hierarchy": { "lvl1": "useDisclosure", "lvl2": "Parameters", "lvl3": null } + }, + { + "content": "useMediaQuery", + "id": "0c9c7a26-8924-4fe7-9993-7cf5ed648d8e", + "type": "lvl1", + "url": "/docs/hooks/use-media-query", + "hierarchy": { "lvl1": "useMediaQuery" } + }, + { + "content": "Import", + "id": "7ef430f5-c29a-489d-b934-a615e836ff40", + "type": "lvl2", + "url": "/docs/hooks/use-media-query#import", + "hierarchy": { "lvl1": "useMediaQuery", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Return value", + "id": "65aad25c-bf24-4b83-9e61-d2fbe58e4046", + "type": "lvl2", + "url": "/docs/hooks/use-media-query#return-value", + "hierarchy": { + "lvl1": "useMediaQuery", + "lvl2": "Return value", + "lvl3": null + } + }, + { + "content": "Usage", + "id": "4d1ce105-2566-4f93-9cda-a5884351c716", + "type": "lvl2", + "url": "/docs/hooks/use-media-query#usage", + "hierarchy": { "lvl1": "useMediaQuery", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "usePrefersReducedMotion", + "id": "139bc402-1155-43ab-9ba8-aacc4a299eec", + "type": "lvl1", + "url": "/docs/hooks/use-prefers-reduced-motion", + "hierarchy": { "lvl1": "usePrefersReducedMotion" } + }, + { + "content": "Import", + "id": "ce4ee728-039f-433d-aee2-1f7b201b3ef8", + "type": "lvl2", + "url": "/docs/hooks/use-prefers-reduced-motion#import", + "hierarchy": { + "lvl1": "usePrefersReducedMotion", + "lvl2": "Import", + "lvl3": null + } + }, + { + "content": "Return value", + "id": "0308620e-85f5-45db-9c04-21b3caeef07e", + "type": "lvl2", + "url": "/docs/hooks/use-prefers-reduced-motion#return-value", + "hierarchy": { + "lvl1": "usePrefersReducedMotion", + "lvl2": "Return value", + "lvl3": null + } + }, + { + "content": "Usage", + "id": "3753047b-6b62-4e01-972d-ff8e0793b447", + "type": "lvl2", + "url": "/docs/hooks/use-prefers-reduced-motion#usage", + "hierarchy": { + "lvl1": "usePrefersReducedMotion", + "lvl2": "Usage", + "lvl3": null + } + }, + { + "content": "useTheme", + "id": "9fb73e9c-289a-44a4-8471-703ed28f84d5", + "type": "lvl1", + "url": "/docs/hooks/use-theme", + "hierarchy": { "lvl1": "useTheme" } + }, + { + "content": "Import", + "id": "6f1849b2-fd5a-4e6e-beac-19e17dd81fa9", + "type": "lvl2", + "url": "/docs/hooks/use-theme#import", + "hierarchy": { "lvl1": "useTheme", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Return value", + "id": "be327539-2e1c-4d2a-b775-ae3beb938c1f", + "type": "lvl2", + "url": "/docs/hooks/use-theme#return-value", + "hierarchy": { "lvl1": "useTheme", "lvl2": "Return value", "lvl3": null } + }, + { + "content": "Usage", + "id": "6a1c28a6-5e11-47b1-aaab-5a3eb68e5642", + "type": "lvl2", + "url": "/docs/hooks/use-theme#usage", + "hierarchy": { "lvl1": "useTheme", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "useToken", + "id": "e06a2d72-cb3b-4f65-a4cc-025820e38857", + "type": "lvl1", + "url": "/docs/hooks/use-token", + "hierarchy": { "lvl1": "useToken" } + }, + { + "content": "Import", + "id": "e4aa64d1-8523-4808-94e2-efac1fe7a270", + "type": "lvl2", + "url": "/docs/hooks/use-token#import", + "hierarchy": { "lvl1": "useToken", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Return value", + "id": "ebf90f3d-cebe-4e1b-ada0-8def08bfee33", + "type": "lvl2", + "url": "/docs/hooks/use-token#return-value", + "hierarchy": { "lvl1": "useToken", "lvl2": "Return value", "lvl3": null } + }, + { + "content": "Usage", + "id": "dca2434f-a34b-47e1-8676-2d6264f8040b", + "type": "lvl2", + "url": "/docs/hooks/use-token#usage", + "hierarchy": { "lvl1": "useToken", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Aspect Ratio", + "id": "54ab4b67-c1f2-40db-bc7f-7e3e46f5b2a3", + "type": "lvl1", + "url": "/docs/layout/aspect-ratio", + "hierarchy": { "lvl1": "Aspect Ratio" } + }, + { + "content": "Import", + "id": "a6fa6dc5-c3a5-48d6-8ba6-68a7c8055ded", + "type": "lvl2", + "url": "/docs/layout/aspect-ratio#import", + "hierarchy": { "lvl1": "Aspect Ratio", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Embed Video", + "id": "639c7757-effa-42f6-a495-14e7c3e1c3da", + "type": "lvl2", + "url": "/docs/layout/aspect-ratio#embed-video", + "hierarchy": { "lvl1": "Aspect Ratio", "lvl2": "Embed Video", "lvl3": null } + }, + { + "content": "Embed Image", + "id": "235a609c-26db-4a35-883d-dd64c95d006a", + "type": "lvl3", + "url": "/docs/layout/aspect-ratio#embed-image", + "hierarchy": { + "lvl1": "Aspect Ratio", + "lvl2": "Embed Video", + "lvl3": "Embed Image" + } + }, + { + "content": "Embed a map", + "id": "455b36f4-4fa6-40fe-92c2-15d715ccbe66", + "type": "lvl3", + "url": "/docs/layout/aspect-ratio#embed-a-map", + "hierarchy": { + "lvl1": "Aspect Ratio", + "lvl2": "Embed Image", + "lvl3": "Embed a map" + } + }, + { + "content": "Props", + "id": "a5fa4cfa-ed12-4f39-bea2-508bf568fdb4", + "type": "lvl2", + "url": "/docs/layout/aspect-ratio#props", + "hierarchy": { "lvl1": "Aspect Ratio", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Box", + "id": "82cf5d7f-e34b-44cd-bba7-6dd833b91813", + "type": "lvl1", + "url": "/docs/layout/box", + "hierarchy": { "lvl1": "Box" } + }, + { + "content": "Import", + "id": "7e679613-c31f-4f55-a2a6-da19a4c49445", + "type": "lvl2", + "url": "/docs/layout/box#import", + "hierarchy": { "lvl1": "Box", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "4c88b911-ba3a-4529-8b33-1ac9532366cd", + "type": "lvl2", + "url": "/docs/layout/box#usage", + "hierarchy": { "lvl1": "Box", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Usage", + "id": "77cc78ee-84a0-451c-ac58-101a11bb32ff", + "type": "lvl3", + "url": "/docs/layout/box#usage-1", + "hierarchy": { "lvl1": "Box", "lvl2": "Usage", "lvl3": "Usage" } + }, + { + "content": "as prop", + "id": "614c45fb-a9d6-4503-8036-4c6ca4cbfd76", + "type": "lvl3", + "url": "/docs/layout/box#as-prop", + "hierarchy": { "lvl1": "Box", "lvl2": "Usage", "lvl3": "as prop" } + }, + { + "content": "Center", + "id": "9e338387-d608-438b-ab70-413c02f647c0", + "type": "lvl1", + "url": "/docs/layout/center", + "hierarchy": { "lvl1": "Center" } + }, + { + "content": "Import", + "id": "87373af9-ef5d-4713-81a3-8d240e464467", + "type": "lvl2", + "url": "/docs/layout/center#import", + "hierarchy": { "lvl1": "Center", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "065dfc12-a041-4a65-addc-8429ca2dd69e", + "type": "lvl2", + "url": "/docs/layout/center#usage", + "hierarchy": { "lvl1": "Center", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "With icons", + "id": "80d3f16c-eaa2-4fcb-b62c-5054d0dd42bd", + "type": "lvl3", + "url": "/docs/layout/center#with-icons", + "hierarchy": { "lvl1": "Center", "lvl2": "Usage", "lvl3": "With icons" } + }, + { + "content": "Square and Circle", + "id": "5f448449-0fb3-4d6d-adcd-04201e8140bc", + "type": "lvl3", + "url": "/docs/layout/center#square-and-circle", + "hierarchy": { + "lvl1": "Center", + "lvl2": "With icons", + "lvl3": "Square and Circle" + } + }, + { + "content": "Container", + "id": "e1bf568e-b443-4032-a377-e0ce1e1d2e8e", + "type": "lvl1", + "url": "/docs/layout/container", + "hierarchy": { "lvl1": "Container" } + }, + { + "content": "Usage", + "id": "7b105460-b62e-43a7-914e-c2dbfe5765c3", + "type": "lvl2", + "url": "/docs/layout/container#usage", + "hierarchy": { "lvl1": "Container", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Centering the children", + "id": "9998fcae-cae5-4073-a6be-84511399bc0b", + "type": "lvl2", + "url": "/docs/layout/container#centering-the-children", + "hierarchy": { + "lvl1": "Container", + "lvl2": "Centering the children", + "lvl3": null + } + }, + { + "content": "Props", + "id": "100831bc-0b81-4cbd-add5-318aa5ae7309", + "type": "lvl2", + "url": "/docs/layout/container#props", + "hierarchy": { "lvl1": "Container", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Flex", + "id": "09df7f6f-e5f1-418c-89c1-3f87fb3f3dcb", + "type": "lvl1", + "url": "/docs/layout/flex", + "hierarchy": { "lvl1": "Flex" } + }, + { + "content": "Import", + "id": "48314984-5255-4a9a-9e6a-b8e818a5e1bd", + "type": "lvl2", + "url": "/docs/layout/flex#import", + "hierarchy": { "lvl1": "Flex", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "cba3b2c6-2533-498a-9fd0-0ce20d043506", + "type": "lvl2", + "url": "/docs/layout/flex#usage", + "hierarchy": { "lvl1": "Flex", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Using the Spacer", + "id": "e92a487c-3a0f-454d-93d9-71cbd371a7b5", + "type": "lvl3", + "url": "/docs/layout/flex#using-the-spacer", + "hierarchy": { "lvl1": "Flex", "lvl2": "Usage", "lvl3": "Using the Spacer" } + }, + { + "content": "Flex and Spacer vs Grid vs Stack", + "id": "b6ad37a9-681e-4e73-9080-4c1bbc582775", + "type": "lvl3", + "url": "/docs/layout/flex#flex-and-spacer-vs-grid-vs-stack", + "hierarchy": { + "lvl1": "Flex", + "lvl2": "Using the Spacer", + "lvl3": "Flex and Spacer vs Grid vs Stack" + } + }, + { + "content": "Props", + "id": "bc02c54e-c865-437d-b03b-21472bc3a02f", + "type": "lvl2", + "url": "/docs/layout/flex#props", + "hierarchy": { "lvl1": "Flex", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Grid", + "id": "1ccd03c2-f704-46a2-b30a-3b2344614a21", + "type": "lvl1", + "url": "/docs/layout/grid", + "hierarchy": { "lvl1": "Grid" } + }, + { + "content": "Import", + "id": "e9d5b837-32c2-4dcc-b875-96ad363a1cf9", + "type": "lvl2", + "url": "/docs/layout/grid#import", + "hierarchy": { "lvl1": "Grid", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Template columns", + "id": "a87726dd-4191-41c9-961e-3a331051aeff", + "type": "lvl2", + "url": "/docs/layout/grid#template-columns", + "hierarchy": { "lvl1": "Grid", "lvl2": "Template columns", "lvl3": null } + }, + { + "content": "Spanning columns", + "id": "4b27260c-aa1b-4295-8c84-a1e232834558", + "type": "lvl2", + "url": "/docs/layout/grid#spanning-columns", + "hierarchy": { "lvl1": "Grid", "lvl2": "Spanning columns", "lvl3": null } + }, + { + "content": "Starting and ending lines", + "id": "4a0703f3-0ac6-456a-a79f-4006fb503e9d", + "type": "lvl2", + "url": "/docs/layout/grid#starting-and-ending-lines", + "hierarchy": { + "lvl1": "Grid", + "lvl2": "Starting and ending lines", + "lvl3": null + } + }, + { + "content": "Props", + "id": "85d6b32e-91a0-48ae-89c0-a5e0688fa1ad", + "type": "lvl2", + "url": "/docs/layout/grid#props", + "hierarchy": { "lvl1": "Grid", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Grid Props", + "id": "c8dac5c4-0d8d-4575-bc5d-9b79fa3cc700", + "type": "lvl3", + "url": "/docs/layout/grid#grid-props", + "hierarchy": { "lvl1": "Grid", "lvl2": "Props", "lvl3": "Grid Props" } + }, + { + "content": "Props", + "id": "e0e7e493-0d83-4960-a656-e53be3258f26", + "type": "lvl2", + "url": "/docs/layout/grid#props-1", + "hierarchy": { "lvl1": "Grid", "lvl2": "Props", "lvl3": null } + }, + { + "content": "GridItem Props", + "id": "845e5876-b909-4a15-b53b-c4222b522f10", + "type": "lvl3", + "url": "/docs/layout/grid#griditem-props", + "hierarchy": { "lvl1": "Grid", "lvl2": "Props", "lvl3": "GridItem Props" } + }, + { + "content": "SimpleGrid", + "id": "b45aff50-0af0-4c7d-8eed-20713a1e5a91", + "type": "lvl1", + "url": "/docs/layout/simple-grid", + "hierarchy": { "lvl1": "SimpleGrid" } + }, + { + "content": "Import", + "id": "404efe9e-8906-4bad-911c-2d8459f224b4", + "type": "lvl2", + "url": "/docs/layout/simple-grid#import", + "hierarchy": { "lvl1": "SimpleGrid", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "657e1d1f-7325-4214-8a2e-9bd1154a9e36", + "type": "lvl2", + "url": "/docs/layout/simple-grid#usage", + "hierarchy": { "lvl1": "SimpleGrid", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Auto-responsive grid", + "id": "e3bde682-c2b6-4378-89b0-763dba501bec", + "type": "lvl3", + "url": "/docs/layout/simple-grid#auto-responsive-grid", + "hierarchy": { + "lvl1": "SimpleGrid", + "lvl2": "Usage", + "lvl3": "Auto-responsive grid" + } + }, + { + "content": "Changing the spacing for columns and rows", + "id": "4aaecb90-cd8a-4ded-9662-299116e2f465", + "type": "lvl3", + "url": "/docs/layout/simple-grid#changing-the-spacing-for-columns-and-rows", + "hierarchy": { + "lvl1": "SimpleGrid", + "lvl2": "Auto-responsive grid", + "lvl3": "Changing the spacing for columns and rows" + } + }, + { + "content": "Props", + "id": "1512dcd6-de0f-424d-acd2-13dd1a7fe714", + "type": "lvl2", + "url": "/docs/layout/simple-grid#props", + "hierarchy": { "lvl1": "SimpleGrid", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Stack", + "id": "8a5d010a-7429-4e0f-a222-d0e9108f12ee", + "type": "lvl1", + "url": "/docs/layout/stack", + "hierarchy": { "lvl1": "Stack" } + }, + { + "content": "Import", + "id": "d4384e69-cfd2-49b2-9795-a4f011ee26a0", + "type": "lvl2", + "url": "/docs/layout/stack#import", + "hierarchy": { "lvl1": "Stack", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "67d1b24c-eadc-4492-aca0-0b7a322dc8d2", + "type": "lvl2", + "url": "/docs/layout/stack#usage", + "hierarchy": { "lvl1": "Stack", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Responsive direction", + "id": "895b901d-ef92-46db-9dd2-fb273edb3fe7", + "type": "lvl3", + "url": "/docs/layout/stack#responsive-direction", + "hierarchy": { + "lvl1": "Stack", + "lvl2": "Usage", + "lvl3": "Responsive direction" + } + }, + { + "content": "Adding dividers", + "id": "6212607e-3fa9-46bd-aa4a-e638f1c6ca4a", + "type": "lvl3", + "url": "/docs/layout/stack#adding-dividers", + "hierarchy": { + "lvl1": "Stack", + "lvl2": "Responsive direction", + "lvl3": "Adding dividers" + } + }, + { + "content": "Example", + "id": "593992c7-fa6d-44c0-97db-392a5534eff9", + "type": "lvl3", + "url": "/docs/layout/stack#example", + "hierarchy": { + "lvl1": "Stack", + "lvl2": "Adding dividers", + "lvl3": "Example" + } + }, + { + "content": "Stack items horizontally", + "id": "f34bddb9-435a-4fe1-b204-8726a351a987", + "type": "lvl3", + "url": "/docs/layout/stack#stack-items-horizontally", + "hierarchy": { + "lvl1": "Stack", + "lvl2": "Example", + "lvl3": "Stack items horizontally" + } + }, + { + "content": "Notes on Stack vs Flex", + "id": "04962389-af01-4a8c-baf4-8aa99d2a07c3", + "type": "lvl3", + "url": "/docs/layout/stack#notes-on-stack-vs-flex", + "hierarchy": { + "lvl1": "Stack", + "lvl2": "Stack items horizontally", + "lvl3": "Notes on Stack vs Flex" + } + }, + { + "content": "Props", + "id": "06dd5056-ab1a-48ed-89f3-5074b454c5a8", + "type": "lvl3", + "url": "/docs/layout/stack#props", + "hierarchy": { + "lvl1": "Stack", + "lvl2": "Notes on Stack vs Flex", + "lvl3": "Props" + } + }, + { + "content": "Wrap", + "id": "e6048bae-d98b-46e3-8270-51f3154e7264", + "type": "lvl1", + "url": "/docs/layout/wrap", + "hierarchy": { "lvl1": "Wrap" } + }, + { + "content": "Import", + "id": "3e63148b-4e0f-4fd3-b4cd-94eeacfc35c5", + "type": "lvl2", + "url": "/docs/layout/wrap#import", + "hierarchy": { "lvl1": "Wrap", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "b7563466-3a90-40e9-a2d9-e986b1e4b961", + "type": "lvl2", + "url": "/docs/layout/wrap#usage", + "hierarchy": { "lvl1": "Wrap", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Change the spacing", + "id": "b8c2847a-007a-4afa-96c5-2e1b76b92000", + "type": "lvl3", + "url": "/docs/layout/wrap#change-the-spacing", + "hierarchy": { + "lvl1": "Wrap", + "lvl2": "Usage", + "lvl3": "Change the spacing" + } + }, + { + "content": "Change the alignment", + "id": "37b9e335-9f29-45d4-a0a6-c590555cf7be", + "type": "lvl3", + "url": "/docs/layout/wrap#change-the-alignment", + "hierarchy": { + "lvl1": "Wrap", + "lvl2": "Change the spacing", + "lvl3": "Change the alignment" + } + }, + { + "content": "Props", + "id": "42987319-a9d9-4a2a-8d53-5d581e074b14", + "type": "lvl2", + "url": "/docs/layout/wrap#props", + "hierarchy": { "lvl1": "Wrap", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Wrap Props", + "id": "af67140c-d935-4c7f-8f77-941dbdc1c487", + "type": "lvl3", + "url": "/docs/layout/wrap#wrap-props", + "hierarchy": { "lvl1": "Wrap", "lvl2": "Props", "lvl3": "Wrap Props" } + }, + { + "content": "WrapItem Props", + "id": "442eb7a2-29ae-41c4-8aad-8133495a6522", + "type": "lvl3", + "url": "/docs/layout/wrap#wrapitem-props", + "hierarchy": { + "lvl1": "Wrap", + "lvl2": "Wrap Props", + "lvl3": "WrapItem Props" + } + }, + { + "content": "Upgrading to v1", + "id": "e1d1cac6-7c4c-42d2-960d-59d735d9c050", + "type": "lvl1", + "url": "/docs/migration", + "hierarchy": { "lvl1": "Upgrading to v1" } + }, + { + "content": "Highlights", + "id": "0d7242c7-4230-4eef-a5f7-005b4f72bc97", + "type": "lvl2", + "url": "/docs/migration#highlights", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "Highlights", + "lvl3": null + } + }, + { + "content": "Upgrade steps", + "id": "aeb6aafc-f49e-4474-9dca-1d86482d8ca3", + "type": "lvl2", + "url": "/docs/migration#upgrade-steps", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "Upgrade steps", + "lvl3": null + } + }, + { + "content": "1. Update your dependencies", + "id": "e34a242b-0474-4fe7-a281-60b26ef03cf7", + "type": "lvl3", + "url": "/docs/migration#1-update-your-dependencies", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "Upgrade steps", + "lvl3": "1. Update your dependencies" + } + }, + { + "content": "Notes on Icons", + "id": "b4111995-539c-4c2b-bb8c-3f73898f6d4b", + "type": "lvl4", + "url": "/docs/migration#notes-on-icons", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "1. Update your dependencies", + "lvl3": null + } + }, + { + "content": "2. Update the ThemeProvider", + "id": "ed52bb7b-a8e9-4efc-8fff-15d49da4a206", + "type": "lvl3", + "url": "/docs/migration#2-update-the-themeprovider", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "Notes on Icons", + "lvl3": "2. Update the ThemeProvider" + } + }, + { + "content": "3. Rename `variantColor` to `colorScheme`", + "id": "4ff28b4f-5494-4201-bf54-685f07424aa9", + "type": "lvl3", + "url": "/docs/migration#3-rename-variantcolor-to-colorscheme", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "2. Update the ThemeProvider", + "lvl3": "3. Rename `variantColor` to `colorScheme`" + } + }, + { + "content": "4. Update layout `size` prop", + "id": "0e92e175-9cd3-413b-a723-44c4affbef59", + "type": "lvl3", + "url": "/docs/migration#4-update-layout-size-prop", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "3. Rename `variantColor` to `colorScheme`", + "lvl3": "4. Update layout `size` prop" + } + }, + { + "content": "5. Replace elements", + "id": "1db2dd99-e988-41bd-a50a-6fdaad26a6d0", + "type": "lvl3", + "url": "/docs/migration#5-replace-elements", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "4. Update layout `size` prop", + "lvl3": "5. Replace elements" + } + }, + { + "content": "PseudoBox", + "id": "9cc498de-2154-4721-ad2d-9cffe078e999", + "type": "lvl4", + "url": "/docs/migration#pseudobox", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "5. Replace elements", + "lvl3": null + } + }, + { + "content": "Callout", + "id": "528c6c2c-e23e-4918-820f-b0ef6196c821", + "type": "lvl4", + "url": "/docs/migration#callout", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "PseudoBox", + "lvl3": null + } + }, + { + "content": "6. Update theme breakpoints", + "id": "4a339b92-2cce-4aae-847a-a7108abe5e3f", + "type": "lvl3", + "url": "/docs/migration#6-update-theme-breakpoints", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "Callout", + "lvl3": "6. Update theme breakpoints" + } + }, + { + "content": "7. ColorModeScript (optional)", + "id": "5ebc9faa-548c-47e7-a3b6-ae21cdda0f6a", + "type": "lvl3", + "url": "/docs/migration#7-colormodescript-optional", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "6. Update theme breakpoints", + "lvl3": "7. ColorModeScript (optional)" + } + }, + { + "content": "Component Updates", + "id": "ebb41ee1-0f14-410b-ac10-5a75f4d66107", + "type": "lvl2", + "url": "/docs/migration#component-updates", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "Component Updates", + "lvl3": null + } + }, + { + "content": "Accordion", + "id": "98824d4f-0619-4d69-b39f-57f3f3b2b1fa", + "type": "lvl3", + "url": "/docs/migration#accordion", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "Component Updates", + "lvl3": "Accordion" + } + }, + { + "content": "AspectRatioBox", + "id": "73ef5961-4b47-44b6-940a-134ec6f09c08", + "type": "lvl3", + "url": "/docs/migration#aspectratiobox", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "Accordion", + "lvl3": "AspectRatioBox" + } + }, + { + "content": "Breadcrumb", + "id": "69ff5edd-28c4-46b5-b705-a1cc38bdbaf5", + "type": "lvl3", + "url": "/docs/migration#breadcrumb", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "AspectRatioBox", + "lvl3": "Breadcrumb" + } + }, + { + "content": "Button", + "id": "6b53f148-aad7-458a-a0e7-8d15287f2dad", + "type": "lvl3", + "url": "/docs/migration#button", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "Breadcrumb", + "lvl3": "Button" + } + }, + { + "content": "Checkbox", + "id": "b76b3f5f-084f-4fef-9d94-cc78e0e39574", + "type": "lvl3", + "url": "/docs/migration#checkbox", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "Button", + "lvl3": "Checkbox" + } + }, + { + "content": "ColorMode", + "id": "9f3cfc4f-4391-4f0a-9376-02aa2c426588", + "type": "lvl3", + "url": "/docs/migration#colormode", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "Checkbox", + "lvl3": "ColorMode" + } + }, + { + "content": "Changes", + "id": "75858efc-5381-4ca0-b541-304de0698865", + "type": "lvl2", + "url": "/docs/migration#changes", + "hierarchy": { "lvl1": "Upgrading to v1", "lvl2": "Changes", "lvl3": null } + }, + { + "content": "Editable", + "id": "053a57fc-371f-4f6a-8274-58577714e8a3", + "type": "lvl3", + "url": "/docs/migration#editable", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "Changes", + "lvl3": "Editable" + } + }, + { + "content": "Icons", + "id": "7bf968d1-9ace-4a94-b59c-8aac24ec60fe", + "type": "lvl3", + "url": "/docs/migration#icons", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "Editable", + "lvl3": "Icons" + } + }, + { + "content": "Icon Button", + "id": "482b0ab8-1580-416b-b9dc-3a30fded53f3", + "type": "lvl3", + "url": "/docs/migration#icon-button", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "Icons", + "lvl3": "Icon Button" + } + }, + { + "content": "Skeleton", + "id": "39d9ef1a-3b14-4083-8e51-ccbb0f78aac7", + "type": "lvl3", + "url": "/docs/migration#skeleton", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "Icon Button", + "lvl3": "Skeleton" + } + }, + { + "content": "Image", + "id": "de392084-8c8a-41ce-986e-1174cee97223", + "type": "lvl3", + "url": "/docs/migration#image", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "Skeleton", + "lvl3": "Image" + } + }, + { + "content": "Input", + "id": "ec2fcf48-a871-404f-a197-97d852244ceb", + "type": "lvl3", + "url": "/docs/migration#input", + "hierarchy": { "lvl1": "Upgrading to v1", "lvl2": "Image", "lvl3": "Input" } + }, + { + "content": "Link", + "id": "417f5643-720e-43d1-a564-7fe0000016a8", + "type": "lvl3", + "url": "/docs/migration#link", + "hierarchy": { "lvl1": "Upgrading to v1", "lvl2": "Input", "lvl3": "Link" } + }, + { + "content": "List", + "id": "864a4d28-39e7-4587-a267-9dafacce82fb", + "type": "lvl3", + "url": "/docs/migration#list", + "hierarchy": { "lvl1": "Upgrading to v1", "lvl2": "Link", "lvl3": "List" } + }, + { + "content": "Stack", + "id": "4cb64ca0-28ca-49d0-b767-6e5b8e81d9e7", + "type": "lvl3", + "url": "/docs/migration#stack", + "hierarchy": { "lvl1": "Upgrading to v1", "lvl2": "List", "lvl3": "Stack" } + }, + { + "content": "Menu", + "id": "ffb86946-c496-4e2c-a1c6-b3ce1da448af", + "type": "lvl3", + "url": "/docs/migration#menu", + "hierarchy": { "lvl1": "Upgrading to v1", "lvl2": "Stack", "lvl3": "Menu" } + }, + { + "content": "Modal", + "id": "942d3c3e-9ee3-458a-869a-92aa6ab29568", + "type": "lvl3", + "url": "/docs/migration#modal", + "hierarchy": { "lvl1": "Upgrading to v1", "lvl2": "Menu", "lvl3": "Modal" } + }, + { + "content": "Progress", + "id": "01acf270-2161-4806-88ff-7d70e19dfb8c", + "type": "lvl3", + "url": "/docs/migration#progress", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "Modal", + "lvl3": "Progress" + } + }, + { + "content": "CircularProgress", + "id": "87b8edd7-03e9-4d11-b6ba-5c7ee3f3fe62", + "type": "lvl3", + "url": "/docs/migration#circularprogress", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "Progress", + "lvl3": "CircularProgress" + } + }, + { + "content": "Radio", + "id": "7c1e83e6-7a12-4840-a1bc-cd2ae4dd8939", + "type": "lvl3", + "url": "/docs/migration#radio", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "CircularProgress", + "lvl3": "Radio" + } + }, + { + "content": "RadioGroup", + "id": "b026e93e-3602-42a9-ad94-8c7cb242fac8", + "type": "lvl3", + "url": "/docs/migration#radiogroup", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "Radio", + "lvl3": "RadioGroup" + } + }, + { + "content": "Slider", + "id": "943c170a-f163-4561-bc14-8fef6334c02f", + "type": "lvl2", + "url": "/docs/migration#slider", + "hierarchy": { "lvl1": "Upgrading to v1", "lvl2": "Slider", "lvl3": null } + }, + { + "content": "Switch", + "id": "e051c987-bbe6-4a27-9219-3a5e49eb4658", + "type": "lvl3", + "url": "/docs/migration#switch", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "Slider", + "lvl3": "Switch" + } + }, + { + "content": "Tabs", + "id": "a336d7fe-9e4d-4279-85a6-54acd09a6136", + "type": "lvl3", + "url": "/docs/migration#tabs", + "hierarchy": { "lvl1": "Upgrading to v1", "lvl2": "Switch", "lvl3": "Tabs" } + }, + { + "content": "Tags", + "id": "26d3c7b0-7b91-47f2-85a3-5c4c6f7f0b3c", + "type": "lvl3", + "url": "/docs/migration#tags", + "hierarchy": { "lvl1": "Upgrading to v1", "lvl2": "Tabs", "lvl3": "Tags" } + }, + { + "content": "Toast", + "id": "112e1757-1b29-4da0-a2c8-ae8b23f2e6b4", + "type": "lvl3", + "url": "/docs/migration#toast", + "hierarchy": { "lvl1": "Upgrading to v1", "lvl2": "Tags", "lvl3": "Toast" } + }, + { + "content": "Wrap (for `rc` versions)", + "id": "9a5b9040-30c1-461d-988e-361748743755", + "type": "lvl3", + "url": "/docs/migration#wrap-for-rc-versions", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "Toast", + "lvl3": "Wrap (for `rc` versions)" + } + }, + { + "content": "Transition Components", + "id": "0bd35de6-652f-4d46-be44-9847b2908858", + "type": "lvl3", + "url": "/docs/migration#transition-components", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "Wrap (for `rc` versions)", + "lvl3": "Transition Components" + } + }, + { + "content": "CSS Reset", + "id": "93643aa4-e5c2-46d0-a68b-3cd5cb580d28", + "type": "lvl3", + "url": "/docs/migration#css-reset", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "Transition Components", + "lvl3": "CSS Reset" + } + }, + { + "content": "Hooks", + "id": "fd51f4f6-1323-40e4-88db-688bbff2e7a3", + "type": "lvl3", + "url": "/docs/migration#hooks", + "hierarchy": { + "lvl1": "Upgrading to v1", + "lvl2": "CSS Reset", + "lvl3": "Hooks" + } + }, + { + "content": "Alert Dialog", + "id": "9b630d53-b626-4890-b64e-a8eb41cbc605", + "type": "lvl1", + "url": "/docs/overlay/alert-dialog", + "hierarchy": { "lvl1": "Alert Dialog" } + }, + { + "content": "Import", + "id": "77401e69-6724-43c2-90be-13c5d2b0d2fe", + "type": "lvl2", + "url": "/docs/overlay/alert-dialog#import", + "hierarchy": { "lvl1": "Alert Dialog", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "2077f8d7-5f70-49c4-9d6a-fa8e8a6525a7", + "type": "lvl2", + "url": "/docs/overlay/alert-dialog#usage", + "hierarchy": { "lvl1": "Alert Dialog", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Changing the transition", + "id": "34345eb5-a45f-402f-a55c-4a8bb7ab5b91", + "type": "lvl3", + "url": "/docs/overlay/alert-dialog#changing-the-transition", + "hierarchy": { + "lvl1": "Alert Dialog", + "lvl2": "Usage", + "lvl3": "Changing the transition" + } + }, + { + "content": "Accessibility", + "id": "be00e80b-85f5-4f36-a1d0-f64eafe25509", + "type": "lvl2", + "url": "/docs/overlay/alert-dialog#accessibility", + "hierarchy": { + "lvl1": "Alert Dialog", + "lvl2": "Accessibility", + "lvl3": null + } + }, + { + "content": "Props", + "id": "bc833d2a-809c-4e39-a4c2-919af3e4191f", + "type": "lvl2", + "url": "/docs/overlay/alert-dialog#props", + "hierarchy": { "lvl1": "Alert Dialog", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Drawer", + "id": "508a4548-4781-473c-a5f5-26c4ff9a898d", + "type": "lvl1", + "url": "/docs/overlay/drawer", + "hierarchy": { "lvl1": "Drawer" } + }, + { + "content": "Installation", + "id": "1165b26f-a32c-4b04-b811-ba08f9de53e7", + "type": "lvl2", + "url": "/docs/overlay/drawer#installation", + "hierarchy": { "lvl1": "Drawer", "lvl2": "Installation", "lvl3": null } + }, + { + "content": "Usage", + "id": "1d5bb601-ea36-4721-85b4-bdd2ec54d2eb", + "type": "lvl2", + "url": "/docs/overlay/drawer#usage", + "hierarchy": { "lvl1": "Drawer", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Basic Drawer", + "id": "20bff877-11d4-4f5e-bef2-30effe4d523e", + "type": "lvl3", + "url": "/docs/overlay/drawer#basic-drawer", + "hierarchy": { "lvl1": "Drawer", "lvl2": "Usage", "lvl3": "Basic Drawer" } + }, + { + "content": "Drawer placement", + "id": "e195efaf-74b8-4c03-84e6-c8aaf12ac17a", + "type": "lvl3", + "url": "/docs/overlay/drawer#drawer-placement", + "hierarchy": { + "lvl1": "Drawer", + "lvl2": "Basic Drawer", + "lvl3": "Drawer placement" + } + }, + { + "content": "Focus on specific element", + "id": "fb519cc6-996b-42f1-a009-6d8c201eb53b", + "type": "lvl3", + "url": "/docs/overlay/drawer#focus-on-specific-element", + "hierarchy": { + "lvl1": "Drawer", + "lvl2": "Drawer placement", + "lvl3": "Focus on specific element" + } + }, + { + "content": "Drawer Widths", + "id": "db814791-0b40-4737-8dc1-d78ccf71edf7", + "type": "lvl3", + "url": "/docs/overlay/drawer#drawer-widths", + "hierarchy": { + "lvl1": "Drawer", + "lvl2": "Focus on specific element", + "lvl3": "Drawer Widths" + } + }, + { + "content": "Using a form in a Drawer", + "id": "02ebcc07-5e22-4639-b898-982c0519842d", + "type": "lvl3", + "url": "/docs/overlay/drawer#using-a-form-in-a-drawer", + "hierarchy": { + "lvl1": "Drawer", + "lvl2": "Drawer Widths", + "lvl3": "Using a form in a Drawer" + } + }, + { + "content": "Accessibility", + "id": "f342ad9e-7eba-47b8-a84c-e836c28a7651", + "type": "lvl2", + "url": "/docs/overlay/drawer#accessibility", + "hierarchy": { "lvl1": "Drawer", "lvl2": "Accessibility", "lvl3": null } + }, + { + "content": "Props", + "id": "33f4d3fb-df57-4c96-83ef-e311c0f8a92a", + "type": "lvl2", + "url": "/docs/overlay/drawer#props", + "hierarchy": { "lvl1": "Drawer", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Drawer Props", + "id": "bae2cdec-37fd-40c4-a9db-f14fdfd3861c", + "type": "lvl3", + "url": "/docs/overlay/drawer#drawer-props", + "hierarchy": { "lvl1": "Drawer", "lvl2": "Props", "lvl3": "Drawer Props" } + }, + { + "content": "Other components", + "id": "3f31a4e1-fa0e-4124-8e14-da7b8a38b322", + "type": "lvl3", + "url": "/docs/overlay/drawer#other-components", + "hierarchy": { + "lvl1": "Drawer", + "lvl2": "Drawer Props", + "lvl3": "Other components" + } + }, + { + "content": "Menu", + "id": "fcb5d27f-52cf-40de-b980-597945d60417", + "type": "lvl1", + "url": "/docs/overlay/menu", + "hierarchy": { "lvl1": "Menu" } + }, + { + "content": "Import", + "id": "7d8b2fba-acee-4d46-8794-fa655f909824", + "type": "lvl2", + "url": "/docs/overlay/menu#import", + "hierarchy": { "lvl1": "Menu", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "cadb3bca-d7ef-440b-aa60-4e2ad28df893", + "type": "lvl2", + "url": "/docs/overlay/menu#usage", + "hierarchy": { "lvl1": "Menu", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Accessing the internal state", + "id": "617cd796-1258-43ff-87e3-96c15dd9ee8f", + "type": "lvl3", + "url": "/docs/overlay/menu#accessing-the-internal-state", + "hierarchy": { + "lvl1": "Menu", + "lvl2": "Usage", + "lvl3": "Accessing the internal state" + } + }, + { + "content": "Letter Navigation", + "id": "50071af3-4d4b-4d90-a96d-dacda65974cc", + "type": "lvl3", + "url": "/docs/overlay/menu#letter-navigation", + "hierarchy": { + "lvl1": "Menu", + "lvl2": "Accessing the internal state", + "lvl3": "Letter Navigation" + } + }, + { + "content": "Just another example.", + "id": "392cdc83-b97e-4487-b4b6-0687ff27f26b", + "type": "lvl3", + "url": "/docs/overlay/menu#just-another-example", + "hierarchy": { + "lvl1": "Menu", + "lvl2": "Letter Navigation", + "lvl3": "Just another example." + } + }, + { + "content": "Adding menu commands", + "id": "607fa555-12c6-4e1f-b1ff-026a5000e8f9", + "type": "lvl3", + "url": "/docs/overlay/menu#adding-menu-commands", + "hierarchy": { + "lvl1": "Menu", + "lvl2": "Just another example.", + "lvl3": "Adding menu commands" + } + }, + { + "content": "Lazily mounting MenuItem", + "id": "18ef7b87-4540-4213-967c-29a149f1bac2", + "type": "lvl3", + "url": "/docs/overlay/menu#lazily-mounting-menuitem", + "hierarchy": { + "lvl1": "Menu", + "lvl2": "Adding menu commands", + "lvl3": "Lazily mounting MenuItem" + } + }, + { + "content": "Rendering menu in a portal", + "id": "9e2e3ded-f40b-4651-ba4d-ae2d7cf38cbe", + "type": "lvl3", + "url": "/docs/overlay/menu#rendering-menu-in-a-portal", + "hierarchy": { + "lvl1": "Menu", + "lvl2": "Lazily mounting MenuItem", + "lvl3": "Rendering menu in a portal" + } + }, + { + "content": "MenuGroup", + "id": "aa6cd075-6749-4a7e-9515-e2f2e1ef6253", + "type": "lvl3", + "url": "/docs/overlay/menu#menugroup", + "hierarchy": { + "lvl1": "Menu", + "lvl2": "Rendering menu in a portal", + "lvl3": "MenuGroup" + } + }, + { + "content": "Menu option groups", + "id": "cf6c141a-bab5-4405-bd50-06620019ef45", + "type": "lvl2", + "url": "/docs/overlay/menu#menu-option-groups", + "hierarchy": { "lvl1": "Menu", "lvl2": "Menu option groups", "lvl3": null } + }, + { + "content": "Accessibility", + "id": "86b97430-751d-4b3f-b861-0982486fdff0", + "type": "lvl2", + "url": "/docs/overlay/menu#accessibility", + "hierarchy": { "lvl1": "Menu", "lvl2": "Accessibility", "lvl3": null } + }, + { + "content": "Keyboard Interaction", + "id": "d8c1b268-375c-4c42-b2e9-664f1dd3e87e", + "type": "lvl3", + "url": "/docs/overlay/menu#keyboard-interaction", + "hierarchy": { + "lvl1": "Menu", + "lvl2": "Accessibility", + "lvl3": "Keyboard Interaction" + } + }, + { + "content": "ARIA roles", + "id": "044d1857-9c8c-45a6-8156-acd1d691bd25", + "type": "lvl3", + "url": "/docs/overlay/menu#aria-roles", + "hierarchy": { + "lvl1": "Menu", + "lvl2": "Keyboard Interaction", + "lvl3": "ARIA roles" + } + }, + { + "content": "Props", + "id": "12778fa7-d388-4859-9fab-57f7eabd3de1", + "type": "lvl2", + "url": "/docs/overlay/menu#props", + "hierarchy": { "lvl1": "Menu", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Menu Props", + "id": "6d77b136-2274-40ef-8cec-174650f0ce17", + "type": "lvl3", + "url": "/docs/overlay/menu#menu-props", + "hierarchy": { "lvl1": "Menu", "lvl2": "Props", "lvl3": "Menu Props" } + }, + { + "content": "MenuButton Props", + "id": "bcc51057-c974-4730-9c67-7f9e9e7cd09c", + "type": "lvl3", + "url": "/docs/overlay/menu#menubutton-props", + "hierarchy": { + "lvl1": "Menu", + "lvl2": "Menu Props", + "lvl3": "MenuButton Props" + } + }, + { + "content": "MenuList Props", + "id": "27f5c0fb-d2fd-4efb-8f91-c92edd9a3c47", + "type": "lvl3", + "url": "/docs/overlay/menu#menulist-props", + "hierarchy": { + "lvl1": "Menu", + "lvl2": "MenuButton Props", + "lvl3": "MenuList Props" + } + }, + { + "content": "MenuItem Props", + "id": "c13c3648-6acf-4d7b-8187-909e1096f6a8", + "type": "lvl3", + "url": "/docs/overlay/menu#menuitem-props", + "hierarchy": { + "lvl1": "Menu", + "lvl2": "MenuList Props", + "lvl3": "MenuItem Props" + } + }, + { + "content": "MenuGroup Props", + "id": "d931a2f8-4a7c-4d17-9931-5e19c7b86065", + "type": "lvl3", + "url": "/docs/overlay/menu#menugroup-props", + "hierarchy": { + "lvl1": "Menu", + "lvl2": "MenuItem Props", + "lvl3": "MenuGroup Props" + } + }, + { + "content": "MenuOptionGroup Props", + "id": "d3d07bdf-9dee-4865-951d-1feaec64c549", + "type": "lvl3", + "url": "/docs/overlay/menu#menuoptiongroup-props", + "hierarchy": { + "lvl1": "Menu", + "lvl2": "MenuGroup Props", + "lvl3": "MenuOptionGroup Props" + } + }, + { + "content": "MenuItemOption Props", + "id": "70e289bd-93c5-46e7-b69f-674768cbabf0", + "type": "lvl3", + "url": "/docs/overlay/menu#menuitemoption-props", + "hierarchy": { + "lvl1": "Menu", + "lvl2": "MenuOptionGroup Props", + "lvl3": "MenuItemOption Props" + } + }, + { + "content": "Modal Dialog", + "id": "3de16572-6c61-494f-aa9b-7de059fa0707", + "type": "lvl1", + "url": "/docs/overlay/modal", + "hierarchy": { "lvl1": "Modal Dialog" } + }, + { + "content": "Import", + "id": "24fb3054-9016-4db9-8669-b7cfa36410b2", + "type": "lvl2", + "url": "/docs/overlay/modal#import", + "hierarchy": { "lvl1": "Modal Dialog", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "45e42aef-2d48-4150-acd3-9fbbec933de7", + "type": "lvl2", + "url": "/docs/overlay/modal#usage", + "hierarchy": { "lvl1": "Modal Dialog", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Control Focus when Modal closes", + "id": "ac3d163d-78fe-4ec1-a28d-5bfc170ca666", + "type": "lvl3", + "url": "/docs/overlay/modal#control-focus-when-modal-closes", + "hierarchy": { + "lvl1": "Modal Dialog", + "lvl2": "Usage", + "lvl3": "Control Focus when Modal closes" + } + }, + { + "content": "Block Scrolling when Modal opens", + "id": "864440a6-dc38-418e-a092-7b8ffe5cef75", + "type": "lvl3", + "url": "/docs/overlay/modal#block-scrolling-when-modal-opens", + "hierarchy": { + "lvl1": "Modal Dialog", + "lvl2": "Control Focus when Modal closes", + "lvl3": "Block Scrolling when Modal opens" + } + }, + { + "content": "Focus on specific element", + "id": "a65ce79f-112a-4325-9bc5-b8226c743bfe", + "type": "lvl3", + "url": "/docs/overlay/modal#focus-on-specific-element", + "hierarchy": { + "lvl1": "Modal Dialog", + "lvl2": "Block Scrolling when Modal opens", + "lvl3": "Focus on specific element" + } + }, + { + "content": "Close Modal on Overlay Click", + "id": "38dbac48-50bd-4a63-a2f3-b3b7fb02d14e", + "type": "lvl3", + "url": "/docs/overlay/modal#close-modal-on-overlay-click", + "hierarchy": { + "lvl1": "Modal Dialog", + "lvl2": "Focus on specific element", + "lvl3": "Close Modal on Overlay Click" + } + }, + { + "content": "Make modal vertically centered", + "id": "ebd59047-e544-466c-ab5b-fd06d59dddaa", + "type": "lvl3", + "url": "/docs/overlay/modal#make-modal-vertically-centered", + "hierarchy": { + "lvl1": "Modal Dialog", + "lvl2": "Close Modal on Overlay Click", + "lvl3": "Make modal vertically centered" + } + }, + { + "content": "Changing the transition", + "id": "5eceb3f8-f3da-4552-8376-c275d13c8d58", + "type": "lvl3", + "url": "/docs/overlay/modal#changing-the-transition", + "hierarchy": { + "lvl1": "Modal Dialog", + "lvl2": "Make modal vertically centered", + "lvl3": "Changing the transition" + } + }, + { + "content": "Modal overflow behavior", + "id": "cb093cc4-0cae-4bf9-a73d-d40252304650", + "type": "lvl3", + "url": "/docs/overlay/modal#modal-overflow-behavior", + "hierarchy": { + "lvl1": "Modal Dialog", + "lvl2": "Changing the transition", + "lvl3": "Modal overflow behavior" + } + }, + { + "content": "Modal Sizes", + "id": "6a0a8965-e8c2-48d4-b2a0-9c57b8490527", + "type": "lvl3", + "url": "/docs/overlay/modal#modal-sizes", + "hierarchy": { + "lvl1": "Modal Dialog", + "lvl2": "Modal overflow behavior", + "lvl3": "Modal Sizes" + } + }, + { + "content": "Making other elements Inert", + "id": "c60aafe8-8e2b-4892-b5e0-a354cb028cab", + "type": "lvl3", + "url": "/docs/overlay/modal#making-other-elements-inert", + "hierarchy": { + "lvl1": "Modal Dialog", + "lvl2": "Modal Sizes", + "lvl3": "Making other elements Inert" + } + }, + { + "content": "Prevent focus trapping", + "id": "48432414-a3b3-4c87-9e79-acdbea59cb3d", + "type": "lvl3", + "url": "/docs/overlay/modal#prevent-focus-trapping", + "hierarchy": { + "lvl1": "Modal Dialog", + "lvl2": "Making other elements Inert", + "lvl3": "Prevent focus trapping" + } + }, + { + "content": "Accessibility", + "id": "3a8694b1-2a20-4265-a1da-99b21cffa11c", + "type": "lvl2", + "url": "/docs/overlay/modal#accessibility", + "hierarchy": { + "lvl1": "Modal Dialog", + "lvl2": "Accessibility", + "lvl3": null + } + }, + { + "content": "Keyboard and Focus Management", + "id": "b0616f21-89fc-4fdf-bc98-32e025f18d93", + "type": "lvl3", + "url": "/docs/overlay/modal#keyboard-and-focus-management", + "hierarchy": { + "lvl1": "Modal Dialog", + "lvl2": "Accessibility", + "lvl3": "Keyboard and Focus Management" + } + }, + { + "content": "ARIA", + "id": "126556c1-8d40-401c-a6d6-df6d655feb4b", + "type": "lvl3", + "url": "/docs/overlay/modal#aria", + "hierarchy": { + "lvl1": "Modal Dialog", + "lvl2": "Keyboard and Focus Management", + "lvl3": "ARIA" + } + }, + { + "content": "Props", + "id": "bb83c69a-8d82-4534-b0d2-958843ea6db4", + "type": "lvl2", + "url": "/docs/overlay/modal#props", + "hierarchy": { "lvl1": "Modal Dialog", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Modal Props", + "id": "18311ab5-b48a-4d78-a804-7a9b7a6300b7", + "type": "lvl3", + "url": "/docs/overlay/modal#modal-props", + "hierarchy": { + "lvl1": "Modal Dialog", + "lvl2": "Props", + "lvl3": "Modal Props" + } + }, + { + "content": "Other components", + "id": "e8dd0666-3ff9-4872-9bfc-6c58ac22b860", + "type": "lvl3", + "url": "/docs/overlay/modal#other-components", + "hierarchy": { + "lvl1": "Modal Dialog", + "lvl2": "Modal Props", + "lvl3": "Other components" + } + }, + { + "content": "Popover", + "id": "e88cc7ba-dd6b-4d6c-a778-2295ad74a6e3", + "type": "lvl1", + "url": "/docs/overlay/popover", + "hierarchy": { "lvl1": "Popover" } + }, + { + "content": "Import", + "id": "962ef2fb-5d5a-4a34-b815-f0c1bc4644dd", + "type": "lvl2", + "url": "/docs/overlay/popover#import", + "hierarchy": { "lvl1": "Popover", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Basic Usage", + "id": "aa175e80-4d96-4cca-8330-83af035fa3a8", + "type": "lvl2", + "url": "/docs/overlay/popover#basic-usage", + "hierarchy": { "lvl1": "Popover", "lvl2": "Basic Usage", "lvl3": null } + }, + { + "content": "Rendering the Popover in a Portal", + "id": "2c97941d-6b1e-441b-8563-99b7d8432950", + "type": "lvl2", + "url": "/docs/overlay/popover#rendering-the-popover-in-a-portal", + "hierarchy": { + "lvl1": "Popover", + "lvl2": "Rendering the Popover in a Portal", + "lvl3": null + } + }, + { + "content": "Focus an element when Popover opens", + "id": "367ef8ca-b85c-4761-8a46-e9a42c486d26", + "type": "lvl2", + "url": "/docs/overlay/popover#focus-an-element-when-popover-opens", + "hierarchy": { + "lvl1": "Popover", + "lvl2": "Focus an element when Popover opens", + "lvl3": null + } + }, + { + "content": "Trapping Focus within Popover", + "id": "7a52e187-3bdd-4632-8115-1da6560ef5a7", + "type": "lvl2", + "url": "/docs/overlay/popover#trapping-focus-within-popover", + "hierarchy": { + "lvl1": "Popover", + "lvl2": "Trapping Focus within Popover", + "lvl3": null + } + }, + { + "content": "Controlled Usage", + "id": "765aedc0-54f4-4313-87b4-7205ce62d7a5", + "type": "lvl2", + "url": "/docs/overlay/popover#controlled-usage", + "hierarchy": { "lvl1": "Popover", "lvl2": "Controlled Usage", "lvl3": null } + }, + { + "content": "Accessing Internal state", + "id": "a3c7ae9a-aaf6-4e95-8429-657fafcf5220", + "type": "lvl2", + "url": "/docs/overlay/popover#accessing-internal-state", + "hierarchy": { + "lvl1": "Popover", + "lvl2": "Accessing Internal state", + "lvl3": null + } + }, + { + "content": "Customizing the Popover", + "id": "5c8ec6f0-e8ff-41ae-8636-1b7f03387ff1", + "type": "lvl2", + "url": "/docs/overlay/popover#customizing-the-popover", + "hierarchy": { + "lvl1": "Popover", + "lvl2": "Customizing the Popover", + "lvl3": null + } + }, + { + "content": "Popover Placements", + "id": "99f4aca6-6978-458d-bc8b-0ad89be67cbd", + "type": "lvl2", + "url": "/docs/overlay/popover#popover-placements", + "hierarchy": { + "lvl1": "Popover", + "lvl2": "Popover Placements", + "lvl3": null + } + }, + { + "content": "Lazily mounting Popover", + "id": "3fd872c1-b889-4d02-950b-749a0a7137cb", + "type": "lvl3", + "url": "/docs/overlay/popover#lazily-mounting-popover", + "hierarchy": { + "lvl1": "Popover", + "lvl2": "Popover Placements", + "lvl3": "Lazily mounting Popover" + } + }, + { + "content": "Accessiblity", + "id": "d9d4d59d-dd7b-448f-af5c-48bed4eb7b87", + "type": "lvl2", + "url": "/docs/overlay/popover#accessiblity", + "hierarchy": { "lvl1": "Popover", "lvl2": "Accessiblity", "lvl3": null } + }, + { + "content": "Keyboard and Focus", + "id": "2f9d29cc-f70a-41f3-bff7-e0d0173155fb", + "type": "lvl3", + "url": "/docs/overlay/popover#keyboard-and-focus", + "hierarchy": { + "lvl1": "Popover", + "lvl2": "Accessiblity", + "lvl3": "Keyboard and Focus" + } + }, + { + "content": "ARIA Attributes", + "id": "18e8179a-866c-4541-8ede-e19f91576658", + "type": "lvl3", + "url": "/docs/overlay/popover#aria-attributes", + "hierarchy": { + "lvl1": "Popover", + "lvl2": "Keyboard and Focus", + "lvl3": "ARIA Attributes" + } + }, + { + "content": "Props", + "id": "dee8022c-c36d-4e00-816d-4a8b40dff8fc", + "type": "lvl2", + "url": "/docs/overlay/popover#props", + "hierarchy": { "lvl1": "Popover", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Popover Props", + "id": "ebc3499d-879b-41d9-a922-166d6c99ede1", + "type": "lvl3", + "url": "/docs/overlay/popover#popover-props", + "hierarchy": { "lvl1": "Popover", "lvl2": "Props", "lvl3": "Popover Props" } + }, + { + "content": "Other Props", + "id": "1efda37e-3c12-4d7c-a1bd-978beb86bbf9", + "type": "lvl3", + "url": "/docs/overlay/popover#other-props", + "hierarchy": { + "lvl1": "Popover", + "lvl2": "Popover Props", + "lvl3": "Other Props" + } + }, + { + "content": "Tooltip", + "id": "8de6087d-0be0-4ddc-842b-4f339dfbee5a", + "type": "lvl1", + "url": "/docs/overlay/tooltip", + "hierarchy": { "lvl1": "Tooltip" } + }, + { + "content": "Import", + "id": "8b3db54d-9045-45d4-abff-8693a17c852c", + "type": "lvl2", + "url": "/docs/overlay/tooltip#import", + "hierarchy": { "lvl1": "Tooltip", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "6a446f8f-e3f3-4bbd-a045-19db6c5e2a21", + "type": "lvl2", + "url": "/docs/overlay/tooltip#usage", + "hierarchy": { "lvl1": "Tooltip", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "With an icon", + "id": "9dacc7a8-6a6b-4f0d-9c14-e68c3829d9f3", + "type": "lvl3", + "url": "/docs/overlay/tooltip#with-an-icon", + "hierarchy": { "lvl1": "Tooltip", "lvl2": "Usage", "lvl3": "With an icon" } + }, + { + "content": "With arrow", + "id": "034a69ec-5d73-406b-b112-283a52c031eb", + "type": "lvl3", + "url": "/docs/overlay/tooltip#with-arrow", + "hierarchy": { + "lvl1": "Tooltip", + "lvl2": "With an icon", + "lvl3": "With arrow" + } + }, + { + "content": "Tooltip with focusable content", + "id": "edd3aeba-8219-4b20-bf7c-85395f6286db", + "type": "lvl3", + "url": "/docs/overlay/tooltip#tooltip-with-focusable-content", + "hierarchy": { + "lvl1": "Tooltip", + "lvl2": "With arrow", + "lvl3": "Tooltip with focusable content" + } + }, + { + "content": "Disabled Tooltip", + "id": "1b764ec0-14dc-4801-b438-37be6faa14e9", + "type": "lvl3", + "url": "/docs/overlay/tooltip#disabled-tooltip", + "hierarchy": { + "lvl1": "Tooltip", + "lvl2": "Tooltip with focusable content", + "lvl3": "Disabled Tooltip" + } + }, + { + "content": "Placement", + "id": "a65bd4fc-6ebb-4fe3-94dc-3347929918c2", + "type": "lvl2", + "url": "/docs/overlay/tooltip#placement", + "hierarchy": { "lvl1": "Tooltip", "lvl2": "Placement", "lvl3": null } + }, + { + "content": "More examples", + "id": "ef93f27e-764e-41d8-b737-9a3524c48eb7", + "type": "lvl2", + "url": "/docs/overlay/tooltip#more-examples", + "hierarchy": { "lvl1": "Tooltip", "lvl2": "More examples", "lvl3": null } + }, + { + "content": "Props", + "id": "6d9f7a49-ccdf-4a0e-a324-638a47fb32ed", + "type": "lvl2", + "url": "/docs/overlay/tooltip#props", + "hierarchy": { "lvl1": "Tooltip", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Design Principles", + "id": "a3613b93-3335-4eae-a0cf-b29ffb4e7b71", + "type": "lvl1", + "url": "/docs/principles", + "hierarchy": { "lvl1": "Design Principles" } + }, + { + "content": "Advanced Theming", + "id": "4a64fc7a-71a5-4694-b64d-fdf9ad509a53", + "type": "lvl1", + "url": "/docs/theming/advanced", + "hierarchy": { "lvl1": "Advanced Theming" } + }, + { + "content": "Single Part Component", + "id": "ae16e5d3-29b5-4e06-8af1-2cbc59e94dd4", + "type": "lvl2", + "url": "/docs/theming/advanced#single-part-component", + "hierarchy": { + "lvl1": "Advanced Theming", + "lvl2": "Single Part Component", + "lvl3": null + } + }, + { + "content": "Multipart or Composite Component", + "id": "f7e29d68-f5c8-4f85-a7ed-9d4c9de26d85", + "type": "lvl2", + "url": "/docs/theming/advanced#multipart-or-composite-component", + "hierarchy": { + "lvl1": "Advanced Theming", + "lvl2": "Multipart or Composite Component", + "lvl3": null + } + }, + { + "content": "Component Style", + "id": "28f23f79-d117-45fb-861e-1e297ed76579", + "type": "lvl1", + "url": "/docs/theming/component-style", + "hierarchy": { "lvl1": "Component Style" } + }, + { + "content": "Base styles and Modifier styles", + "id": "0911145b-8180-4806-9243-b3ecfac39b00", + "type": "lvl2", + "url": "/docs/theming/component-style#base-styles-and-modifier-styles", + "hierarchy": { + "lvl1": "Component Style", + "lvl2": "Base styles and Modifier styles", + "lvl3": null + } + }, + { + "content": "Single part and multipart components", + "id": "93d7bee1-94c0-4ca0-a5df-17bc47775ba7", + "type": "lvl3", + "url": "/docs/theming/component-style#single-part-and-multipart-components", + "hierarchy": { + "lvl1": "Component Style", + "lvl2": "Base styles and Modifier styles", + "lvl3": "Single part and multipart components" + } + }, + { + "content": "Styling single part components", + "id": "c994b72d-7207-4487-bdf7-44a9429088ff", + "type": "lvl2", + "url": "/docs/theming/component-style#styling-single-part-components", + "hierarchy": { + "lvl1": "Component Style", + "lvl2": "Styling single part components", + "lvl3": null + } + }, + { + "content": "Consuming style config", + "id": "2fe6a70e-6b6c-446f-b686-80634bb7a15b", + "type": "lvl3", + "url": "/docs/theming/component-style#consuming-style-config", + "hierarchy": { + "lvl1": "Component Style", + "lvl2": "Styling single part components", + "lvl3": "Consuming style config" + } + }, + { + "content": "useStyleConfig API", + "id": "7a4a27f8-a4fc-4061-8a90-3c0f4e0d83f0", + "type": "lvl3", + "url": "/docs/theming/component-style#usestyleconfig-api", + "hierarchy": { + "lvl1": "Component Style", + "lvl2": "Consuming style config", + "lvl3": "useStyleConfig API" + } + }, + { + "content": "Parameters", + "id": "b7531667-8fcd-4a63-8cc6-0668110638d2", + "type": "lvl4", + "url": "/docs/theming/component-style#parameters", + "hierarchy": { + "lvl1": "Component Style", + "lvl2": "useStyleConfig API", + "lvl3": null + } + }, + { + "content": "Return Value", + "id": "eab95db9-d213-4a14-a32e-374666129a38", + "type": "lvl4", + "url": "/docs/theming/component-style#return-value", + "hierarchy": { + "lvl1": "Component Style", + "lvl2": "Parameters", + "lvl3": null + } + }, + { + "content": "Styling multipart components", + "id": "ef657dcc-ad7e-4fd9-b255-d6e9955cb24d", + "type": "lvl2", + "url": "/docs/theming/component-style#styling-multipart-components", + "hierarchy": { + "lvl1": "Component Style", + "lvl2": "Styling multipart components", + "lvl3": null + } + }, + { + "content": "Consuming multipart style config", + "id": "fd7992f1-9e02-49e0-b4a3-9e79ff0237c0", + "type": "lvl3", + "url": "/docs/theming/component-style#consuming-multipart-style-config", + "hierarchy": { + "lvl1": "Component Style", + "lvl2": "Styling multipart components", + "lvl3": "Consuming multipart style config" + } + }, + { + "content": "useMultiStyleConfig API", + "id": "590defac-c1df-4ce1-8121-e7cdc6fc241d", + "type": "lvl3", + "url": "/docs/theming/component-style#usemultistyleconfig-api", + "hierarchy": { + "lvl1": "Component Style", + "lvl2": "Consuming multipart style config", + "lvl3": "useMultiStyleConfig API" + } + }, + { + "content": "Parameters", + "id": "b427dddc-f1f0-4ffc-ad90-2c36939a5c63", + "type": "lvl4", + "url": "/docs/theming/component-style#parameters-1", + "hierarchy": { + "lvl1": "Component Style", + "lvl2": "useMultiStyleConfig API", + "lvl3": null + } + }, + { + "content": "Return Values", + "id": "a58f7413-3342-452a-a180-9fb15f255118", + "type": "lvl4", + "url": "/docs/theming/component-style#return-values", + "hierarchy": { + "lvl1": "Component Style", + "lvl2": "Parameters", + "lvl3": null + } + }, + { + "content": "Customize Theme", + "id": "7eacc1ba-9711-4948-9c7b-e13189bb3136", + "type": "lvl1", + "url": "/docs/theming/customize-theme", + "hierarchy": { "lvl1": "Customize Theme" } + }, + { + "content": "Customizing theme tokens", + "id": "ff68025b-e330-46df-b3a4-87867fefe49f", + "type": "lvl2", + "url": "/docs/theming/customize-theme#customizing-theme-tokens", + "hierarchy": { + "lvl1": "Customize Theme", + "lvl2": "Customizing theme tokens", + "lvl3": null + } + }, + { + "content": "Customizing component styles", + "id": "46bf7bb9-bc6a-4013-ac9c-7d8a1ddf502b", + "type": "lvl2", + "url": "/docs/theming/customize-theme#customizing-component-styles", + "hierarchy": { + "lvl1": "Customize Theme", + "lvl2": "Customizing component styles", + "lvl3": null + } + }, + { + "content": "Customizing single components", + "id": "8dc75278-6494-450f-8e47-31bd1eabea99", + "type": "lvl3", + "url": "/docs/theming/customize-theme#customizing-single-components", + "hierarchy": { + "lvl1": "Customize Theme", + "lvl2": "Customizing component styles", + "lvl3": "Customizing single components" + } + }, + { + "content": "Customizing global styles", + "id": "7b6c1a7b-28af-49c5-9641-83b3faae8c40", + "type": "lvl3", + "url": "/docs/theming/customize-theme#customizing-global-styles", + "hierarchy": { + "lvl1": "Customize Theme", + "lvl2": "Customizing single components", + "lvl3": "Customizing global styles" + } + }, + { + "content": "Scaling out your project", + "id": "dcfc1d02-288a-4836-882e-65b0cd89b46f", + "type": "lvl2", + "url": "/docs/theming/customize-theme#scaling-out-your-project", + "hierarchy": { + "lvl1": "Customize Theme", + "lvl2": "Scaling out your project", + "lvl3": null + } + }, + { + "content": "Default Theme", + "id": "4c1d1314-2840-471e-9ab9-35edc1f62266", + "type": "lvl1", + "url": "/docs/theming/theme", + "hierarchy": { "lvl1": "Default Theme" } + }, + { + "content": "Colors", + "id": "0dd3d9d1-1ed5-450e-b988-64997b400f1c", + "type": "lvl2", + "url": "/docs/theming/theme#colors", + "hierarchy": { "lvl1": "Default Theme", "lvl2": "Colors", "lvl3": null } + }, + { + "content": "Black & White", + "id": "3aaa93bb-a96a-4068-958c-0c4e953cb1d6", + "type": "lvl3", + "url": "/docs/theming/theme#black--white", + "hierarchy": { + "lvl1": "Default Theme", + "lvl2": "Colors", + "lvl3": "Black & White" + } + }, + { + "content": "Gray", + "id": "075d73ff-3efc-4f48-a4c6-1cecc1fb7daf", + "type": "lvl3", + "url": "/docs/theming/theme#gray", + "hierarchy": { + "lvl1": "Default Theme", + "lvl2": "Black & White", + "lvl3": "Gray" + } + }, + { + "content": "Red", + "id": "bd71e28f-46ca-4604-9b03-0ba968b2a844", + "type": "lvl3", + "url": "/docs/theming/theme#red", + "hierarchy": { "lvl1": "Default Theme", "lvl2": "Gray", "lvl3": "Red" } + }, + { + "content": "Orange", + "id": "21a6ee16-73cc-40e5-90d9-be12d3b37c0e", + "type": "lvl3", + "url": "/docs/theming/theme#orange", + "hierarchy": { "lvl1": "Default Theme", "lvl2": "Red", "lvl3": "Orange" } + }, + { + "content": "Yellow", + "id": "82b49cfd-259b-4f96-8c52-42f4d155140f", + "type": "lvl3", + "url": "/docs/theming/theme#yellow", + "hierarchy": { "lvl1": "Default Theme", "lvl2": "Orange", "lvl3": "Yellow" } + }, + { + "content": "Green", + "id": "6a41ee55-0dd8-4a14-a96a-a8dbca180dbc", + "type": "lvl3", + "url": "/docs/theming/theme#green", + "hierarchy": { "lvl1": "Default Theme", "lvl2": "Yellow", "lvl3": "Green" } + }, + { + "content": "Teal", + "id": "c997c4e5-3925-45f1-ba55-9a17c1e501a8", + "type": "lvl3", + "url": "/docs/theming/theme#teal", + "hierarchy": { "lvl1": "Default Theme", "lvl2": "Green", "lvl3": "Teal" } + }, + { + "content": "Blue", + "id": "c4663535-8d66-4a85-9580-8480785ccf44", + "type": "lvl3", + "url": "/docs/theming/theme#blue", + "hierarchy": { "lvl1": "Default Theme", "lvl2": "Teal", "lvl3": "Blue" } + }, + { + "content": "Cyan", + "id": "5e221fb7-71ed-4be9-a9dc-836a2711481d", + "type": "lvl3", + "url": "/docs/theming/theme#cyan", + "hierarchy": { "lvl1": "Default Theme", "lvl2": "Blue", "lvl3": "Cyan" } + }, + { + "content": "Purple", + "id": "447b6a26-9e30-4882-97ee-1c0d60c84d74", + "type": "lvl3", + "url": "/docs/theming/theme#purple", + "hierarchy": { "lvl1": "Default Theme", "lvl2": "Cyan", "lvl3": "Purple" } + }, + { + "content": "Pink", + "id": "b2aa70b0-0cdf-4000-ae2c-6dd24f34c281", + "type": "lvl3", + "url": "/docs/theming/theme#pink", + "hierarchy": { "lvl1": "Default Theme", "lvl2": "Purple", "lvl3": "Pink" } + }, + { + "content": "Typography", + "id": "feb540ab-f6c9-41a8-b80d-74c36d1cc8e0", + "type": "lvl2", + "url": "/docs/theming/theme#typography", + "hierarchy": { "lvl1": "Default Theme", "lvl2": "Typography", "lvl3": null } + }, + { + "content": "Breakpoints", + "id": "a99a24c3-c76c-4bd0-ba7f-64191bf7a21d", + "type": "lvl2", + "url": "/docs/theming/theme#breakpoints", + "hierarchy": { + "lvl1": "Default Theme", + "lvl2": "Breakpoints", + "lvl3": null + } + }, + { + "content": "Spacing", + "id": "27cba02b-9c51-4efd-a5c8-b4db2b255c8c", + "type": "lvl2", + "url": "/docs/theming/theme#spacing", + "hierarchy": { "lvl1": "Default Theme", "lvl2": "Spacing", "lvl3": null } + }, + { + "content": "Sizes", + "id": "734466e7-f6af-46bf-981d-c65da3b79bcf", + "type": "lvl2", + "url": "/docs/theming/theme#sizes", + "hierarchy": { "lvl1": "Default Theme", "lvl2": "Sizes", "lvl3": null } + }, + { + "content": "Border radius", + "id": "f36cad1f-863a-4685-b2d6-7627f942fb98", + "type": "lvl2", + "url": "/docs/theming/theme#border-radius", + "hierarchy": { + "lvl1": "Default Theme", + "lvl2": "Border radius", + "lvl3": null + } + }, + { + "content": "z-index values", + "id": "4b5b2153-f44c-4bae-9fff-d9ca3eb8f370", + "type": "lvl2", + "url": "/docs/theming/theme#z-index-values", + "hierarchy": { + "lvl1": "Default Theme", + "lvl2": "z-index values", + "lvl3": null + } + }, + { + "content": "Configuration reference", + "id": "7ebd7879-8697-4a7a-a0bc-3277b38d50de", + "type": "lvl2", + "url": "/docs/theming/theme#configuration-reference", + "hierarchy": { + "lvl1": "Default Theme", + "lvl2": "Configuration reference", + "lvl3": null + } + }, + { + "content": "Heading", + "id": "9b13de91-1569-44ae-85c1-cf78f70a9a6b", + "type": "lvl1", + "url": "/docs/typography/heading", + "hierarchy": { "lvl1": "Heading" } + }, + { + "content": "Import", + "id": "a81adcaf-0669-41f3-89f8-7d31d2e9ab2e", + "type": "lvl2", + "url": "/docs/typography/heading#import", + "hierarchy": { "lvl1": "Heading", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Usage", + "id": "8253aa5b-db22-44cd-b877-7e68a5843964", + "type": "lvl2", + "url": "/docs/typography/heading#usage", + "hierarchy": { "lvl1": "Heading", "lvl2": "Usage", "lvl3": null } + }, + { + "content": "Changing font size", + "id": "e8f12768-c473-4e1a-9b97-0c0db5bb1d24", + "type": "lvl3", + "url": "/docs/typography/heading#changing-font-size", + "hierarchy": { + "lvl1": "Heading", + "lvl2": "Usage", + "lvl3": "Changing font size" + } + }, + { + "content": "Truncate heading", + "id": "b000961c-d1f5-49ba-ba34-1801e151a1d0", + "type": "lvl3", + "url": "/docs/typography/heading#truncate-heading", + "hierarchy": { + "lvl1": "Heading", + "lvl2": "Changing font size", + "lvl3": "Truncate heading" + } + }, + { + "content": "Override style", + "id": "7773d4ad-c7d5-4164-a555-0791fd3eda9b", + "type": "lvl3", + "url": "/docs/typography/heading#override-style", + "hierarchy": { + "lvl1": "Heading", + "lvl2": "Truncate heading", + "lvl3": "Override style" + } + }, + { + "content": "Composition", + "id": "70ea2698-7ec1-435a-9c7f-c61ae99ecc47", + "type": "lvl2", + "url": "/docs/typography/heading#composition", + "hierarchy": { "lvl1": "Heading", "lvl2": "Composition", "lvl3": null } + }, + { + "content": "Props", + "id": "10f653e9-7218-4b71-8e95-c82bd2aec367", + "type": "lvl2", + "url": "/docs/typography/heading#props", + "hierarchy": { "lvl1": "Heading", "lvl2": "Props", "lvl3": null } + }, + { + "content": "Text", + "id": "420e858d-9ff2-4a3b-991c-3a610ae6b0b9", + "type": "lvl1", + "url": "/docs/typography/text", + "hierarchy": { "lvl1": "Text" } + }, + { + "content": "Import", + "id": "f92bd6f6-becf-4366-b934-20756c1cfe72", + "type": "lvl2", + "url": "/docs/typography/text#import", + "hierarchy": { "lvl1": "Text", "lvl2": "Import", "lvl3": null } + }, + { + "content": "Changing the font size", + "id": "e9ed6931-edab-4595-b8be-14769f6cae69", + "type": "lvl2", + "url": "/docs/typography/text#changing-the-font-size", + "hierarchy": { + "lvl1": "Text", + "lvl2": "Changing the font size", + "lvl3": null + } + }, + { + "content": "Truncate text", + "id": "4c068fc2-14ed-418a-8453-809157e18a7c", + "type": "lvl3", + "url": "/docs/typography/text#truncate-text", + "hierarchy": { + "lvl1": "Text", + "lvl2": "Changing the font size", + "lvl3": "Truncate text" + } + }, + { + "content": "Override style", + "id": "1431d8b9-0432-4df6-88c7-faa959f2fc70", + "type": "lvl3", + "url": "/docs/typography/text#override-style", + "hierarchy": { + "lvl1": "Text", + "lvl2": "Truncate text", + "lvl3": "Override style" + } + }, + { + "content": "Override the element", + "id": "faebc462-8cbf-44c6-92f7-7760d5eb1604", + "type": "lvl3", + "url": "/docs/typography/text#override-the-element", + "hierarchy": { + "lvl1": "Text", + "lvl2": "Override style", + "lvl3": "Override the element" + } + }, + { + "content": "Props", + "id": "ac0c3f73-1026-4c39-8c53-3c5cced0dbdb", + "type": "lvl2", + "url": "/docs/typography/text#props", + "hierarchy": { "lvl1": "Text", "lvl2": "Props", "lvl3": null } + }, + { + "content": "The as prop and Custom component", + "id": "3c0fe683-b90a-4985-ba90-5ca86f65eb6a", + "type": "lvl1", + "url": "/guides/as-prop", + "hierarchy": { "lvl1": "The as prop and Custom component" } + }, + { + "content": "Option 1: Using `forwardRef` from `@chakra-ui/react`", + "id": "5006282a-d69b-40e9-a155-8e5283d46b17", + "type": "lvl2", + "url": "/guides/as-prop#option-1-using-forwardref-from-chakra-uireact", + "hierarchy": { + "lvl1": "The as prop and Custom component", + "lvl2": "Option 1: Using `forwardRef` from `@chakra-ui/react`", + "lvl3": null + } + }, + { + "content": "Option 2: Cast the component as a `ChakraComponent`", + "id": "eb4b74ec-39e9-4f35-bc7d-42473de6f31a", + "type": "lvl2", + "url": "/guides/as-prop#option-2-cast-the-component-as-a-chakracomponent", + "hierarchy": { + "lvl1": "The as prop and Custom component", + "lvl2": "Option 2: Cast the component as a `ChakraComponent`", + "lvl3": null + } + }, + { + "content": "Option 3: Use the `chakra` factory function", + "id": "c10101f1-f99c-4bde-b37f-a0abc48a5960", + "type": "lvl2", + "url": "/guides/as-prop#option-3-use-the-chakra-factory-function", + "hierarchy": { + "lvl1": "The as prop and Custom component", + "lvl2": "Option 3: Use the `chakra` factory function", + "lvl3": null + } + }, + { + "content": "Guide to creating Components", + "id": "75e6e915-5f50-461f-9504-65b46471c7dd", + "type": "lvl1", + "url": "/guides/component-guide", + "hierarchy": { "lvl1": "Guide to creating Components" } + }, + { + "content": "1. Share your ideas", + "id": "5348e51e-6025-45d8-9f9c-ceb7618f3ffd", + "type": "lvl2", + "url": "/guides/component-guide#1-share-your-ideas", + "hierarchy": { + "lvl1": "Guide to creating Components", + "lvl2": "1. Share your ideas", + "lvl3": null + } + }, + { + "content": "2. Setup the component package", + "id": "130663d2-ab77-4c08-ab32-0e4a9e64ff21", + "type": "lvl2", + "url": "/guides/component-guide#2-setup-the-component-package", + "hierarchy": { + "lvl1": "Guide to creating Components", + "lvl2": "2. Setup the component package", + "lvl3": null + } + }, + { + "content": "3. Build the component or hook", + "id": "9af7878b-f161-435b-a698-32d628847592", + "type": "lvl2", + "url": "/guides/component-guide#3-build-the-component-or-hook", + "hierarchy": { + "lvl1": "Guide to creating Components", + "lvl2": "3. Build the component or hook", + "lvl3": null + } + }, + { + "content": "General", + "id": "513def61-080c-4f05-85ed-d8238f769da6", + "type": "lvl3", + "url": "/guides/component-guide#general", + "hierarchy": { + "lvl1": "Guide to creating Components", + "lvl2": "3. Build the component or hook", + "lvl3": "General" + } + }, + { + "content": "Hooks", + "id": "04990b7c-1324-4292-9563-86110eeb90b9", + "type": "lvl3", + "url": "/guides/component-guide#hooks", + "hierarchy": { + "lvl1": "Guide to creating Components", + "lvl2": "General", + "lvl3": "Hooks" + } + }, + { + "content": "TypeScript", + "id": "2002319d-86ea-49e0-96b0-5f3df54d22b9", + "type": "lvl3", + "url": "/guides/component-guide#typescript", + "hierarchy": { + "lvl1": "Guide to creating Components", + "lvl2": "Hooks", + "lvl3": "TypeScript" + } + }, + { + "content": "4. Build and Test", + "id": "d836b8ff-269d-43c8-8149-30b387e9f1e3", + "type": "lvl2", + "url": "/guides/component-guide#4-build-and-test", + "hierarchy": { + "lvl1": "Guide to creating Components", + "lvl2": "4. Build and Test", + "lvl3": null + } + }, + { + "content": "Testing Checklist", + "id": "46d4d1a8-8de3-4f20-8f62-6b539d9bcb5d", + "type": "lvl3", + "url": "/guides/component-guide#testing-checklist", + "hierarchy": { + "lvl1": "Guide to creating Components", + "lvl2": "4. Build and Test", + "lvl3": "Testing Checklist" + } + }, + { + "content": "5. Documentation", + "id": "6627bd4a-8d32-4f69-8ccf-ec1d62baa6c5", + "type": "lvl2", + "url": "/guides/component-guide#5-documentation", + "hierarchy": { + "lvl1": "Guide to creating Components", + "lvl2": "5. Documentation", + "lvl3": null + } + }, + { + "content": "Resources", + "id": "2ff97c0b-b8af-4a93-bd04-3b97a34f3fc6", + "type": "lvl2", + "url": "/guides/component-guide#resources", + "hierarchy": { + "lvl1": "Guide to creating Components", + "lvl2": "Resources", + "lvl3": null + } + }, + { + "content": "TypeScript", + "id": "aff28fd1-e493-41cc-9ff4-ed2d1febde3f", + "type": "lvl3", + "url": "/guides/component-guide#typescript-1", + "hierarchy": { + "lvl1": "Guide to creating Components", + "lvl2": "Resources", + "lvl3": "TypeScript" + } + }, + { + "content": "Testing", + "id": "fe86c961-7eaf-4e07-8c3e-7d285405e125", + "type": "lvl3", + "url": "/guides/component-guide#testing", + "hierarchy": { + "lvl1": "Guide to creating Components", + "lvl2": "TypeScript", + "lvl3": "Testing" + } + }, + { + "content": "How to Create a Guide", + "id": "27db819a-1d32-417e-8069-aa08e27fc85d", + "type": "lvl1", + "url": "/guides/how-to-create-a-guide", + "hierarchy": { "lvl1": "How to Create a Guide" } + }, + { + "content": "Create your guide file", + "id": "73882b70-4198-4748-9309-772d749bb2a1", + "type": "lvl2", + "url": "/guides/how-to-create-a-guide#create-your-guide-file", + "hierarchy": { + "lvl1": "How to Create a Guide", + "lvl2": "Create your guide file", + "lvl3": null + } + }, + { + "content": "Add frontmatter", + "id": "5255bfb7-24e7-4c24-98b9-9b6d8a728e04", + "type": "lvl2", + "url": "/guides/how-to-create-a-guide#add-frontmatter", + "hierarchy": { + "lvl1": "How to Create a Guide", + "lvl2": "Add frontmatter", + "lvl3": null + } + }, + { + "content": "Write your guide content", + "id": "f553a63f-f329-4827-be2e-bc9f654d5216", + "type": "lvl2", + "url": "/guides/how-to-create-a-guide#write-your-guide-content", + "hierarchy": { + "lvl1": "How to Create a Guide", + "lvl2": "Write your guide content", + "lvl3": null + } + }, + { + "content": "Open a pull request", + "id": "77f8ab58-6253-4587-be2c-86c33af22097", + "type": "lvl2", + "url": "/guides/how-to-create-a-guide#open-a-pull-request", + "hierarchy": { + "lvl1": "How to Create a Guide", + "lvl2": "Open a pull request", + "lvl3": null + } + }, + { + "content": "Using Chakra UI's official create-react-app templates", + "id": "7d8145cf-1308-4e5e-8c51-11fc4fb71b3b", + "type": "lvl1", + "url": "/guides/integrations/with-cra", + "hierarchy": { + "lvl1": "Using Chakra UI's official create-react-app templates" + } + }, + { + "content": "Usage", + "id": "737ee4e3-fcdc-490b-acc9-8994a452bfdc", + "type": "lvl2", + "url": "/guides/integrations/with-cra#usage", + "hierarchy": { + "lvl1": "Using Chakra UI's official create-react-app templates", + "lvl2": "Usage", + "lvl3": null + } + }, + { + "content": "What's included", + "id": "447ad29f-14c6-4686-98af-950f155137bf", + "type": "lvl2", + "url": "/guides/integrations/with-cra#whats-included", + "hierarchy": { + "lvl1": "Using Chakra UI's official create-react-app templates", + "lvl2": "What's included", + "lvl3": null + } + }, + { + "content": "Pre-install dependencies", + "id": "8a6fab51-087d-44c8-9a11-0a4a39f0a1ad", + "type": "lvl3", + "url": "/guides/integrations/with-cra#pre-install-dependencies", + "hierarchy": { + "lvl1": "Using Chakra UI's official create-react-app templates", + "lvl2": "What's included", + "lvl3": "Pre-install dependencies" + } + }, + { + "content": "Chakra-specific functionality", + "id": "946b9b68-ec12-40cd-a829-655b1aa70785", + "type": "lvl3", + "url": "/guides/integrations/with-cra#chakra-specific-functionality", + "hierarchy": { + "lvl1": "Using Chakra UI's official create-react-app templates", + "lvl2": "Pre-install dependencies", + "lvl3": "Chakra-specific functionality" + } + }, + { + "content": "Chakra UI + Framer Motion", + "id": "2c944380-c638-4f35-a761-bd228f2e790d", + "type": "lvl1", + "url": "/guides/integrations/with-framer", + "hierarchy": { "lvl1": "Chakra UI + Framer Motion" } + }, + { + "content": "Chakra UI + Gatsby", + "id": "3e1cfe7b-fc42-49ed-a498-2779dfa7255c", + "type": "lvl1", + "url": "/guides/integrations/with-gatsby", + "hierarchy": { "lvl1": "Chakra UI + Gatsby" } + }, + { + "content": "Migration Notes", + "id": "4fb6c681-160b-4163-be07-a3c0d66851bc", + "type": "lvl1", + "url": "/guides/integrations/with-gatsby#migration-notes", + "hierarchy": { "lvl1": "Chakra UI + Gatsby", "lvl2": null, "lvl3": null } + }, + { + "content": "Changes", + "id": "47405155-9b88-4898-a0a1-7f681797a949", + "type": "lvl2", + "url": "/guides/integrations/with-gatsby#changes", + "hierarchy": { + "lvl1": "Chakra UI + Gatsby", + "lvl2": "Changes", + "lvl3": null + } + }, + { + "content": "Gatsby plugin", + "id": "061922e9-294c-4bb8-9228-d59183c3535d", + "type": "lvl2", + "url": "/guides/integrations/with-gatsby#gatsby-plugin", + "hierarchy": { + "lvl1": "Chakra UI + Gatsby", + "lvl2": "Gatsby plugin", + "lvl3": null + } + }, + { + "content": "Chakra providers", + "id": "8d8d5627-80de-47d7-8900-bdbfd87821df", + "type": "lvl2", + "url": "/guides/integrations/with-gatsby#chakra-providers", + "hierarchy": { + "lvl1": "Chakra UI + Gatsby", + "lvl2": "Chakra providers", + "lvl3": null + } + }, + { + "content": "v0.8 and below", + "id": "bf084730-f3a7-4c26-95bc-201cbbebb2d5", + "type": "lvl3", + "url": "/guides/integrations/with-gatsby#v08-and-below", + "hierarchy": { + "lvl1": "Chakra UI + Gatsby", + "lvl2": "Chakra providers", + "lvl3": "v0.8 and below" + } + }, + { + "content": "Chakra UI + React Hook Form", + "id": "53a20c82-7eec-4071-9620-6a2ae9f93853", + "type": "lvl1", + "url": "/guides/integrations/with-hook-form", + "hierarchy": { "lvl1": "Chakra UI + React Hook Form" } + }, + { + "content": "How to add font files to Chakra and Next.js", + "id": "4b0e6c96-9f19-4418-b158-404ae0468dca", + "type": "lvl1", + "url": "/guides/with-nextjs-font-files", + "hierarchy": { "lvl1": "How to add font files to Chakra and Next.js" } + }, + { + "content": "Why add font files?", + "id": "48dae5d3-53d3-4727-a047-b61f68ed3fd0", + "type": "lvl2", + "url": "/guides/with-nextjs-font-files#why-add-font-files", + "hierarchy": { + "lvl1": "How to add font files to Chakra and Next.js", + "lvl2": "Why add font files?", + "lvl3": null + } + }, + { + "content": "Put font files in `public` folder", + "id": "18879095-93ac-47e0-a228-b9502df3b71a", + "type": "lvl2", + "url": "/guides/with-nextjs-font-files#put-font-files-in-public-folder", + "hierarchy": { + "lvl1": "How to add font files to Chakra and Next.js", + "lvl2": "Put font files in `public` folder", + "lvl3": null + } + }, + { + "content": "Override Chakra theme fonts", + "id": "d03540bb-6084-48ab-9f03-d38ea6ceaa40", + "type": "lvl2", + "url": "/guides/with-nextjs-font-files#override-chakra-theme-fonts", + "hierarchy": { + "lvl1": "How to add font files to Chakra and Next.js", + "lvl2": "Override Chakra theme fonts", + "lvl3": null + } + }, + { + "content": "Import fonts from `public` folder", + "id": "95d8d382-f978-4444-84b8-af34797085dd", + "type": "lvl2", + "url": "/guides/with-nextjs-font-files#import-fonts-from-public-folder", + "hierarchy": { + "lvl1": "How to add font files to Chakra and Next.js", + "lvl2": "Import fonts from `public` folder", + "lvl3": null + } + }, + { + "content": "Add theme and fonts to `` in `_app.js`", + "id": "10ddfe11-b71c-4589-86ba-109b51e3239e", + "type": "lvl2", + "url": "/guides/with-nextjs-font-files#add-theme-and-fonts-to--in-_appjs", + "hierarchy": { + "lvl1": "How to add font files to Chakra and Next.js", + "lvl2": "Add theme and fonts to `` in `_app.js`", + "lvl3": null + } + }, + { + "content": "Note:", + "id": "1c14c567-f48e-41ca-be50-8bc8367b5717", + "type": "lvl3", + "url": "/guides/with-nextjs-font-files#note", + "hierarchy": { + "lvl1": "How to add font files to Chakra and Next.js", + "lvl2": "Add theme and fonts to `` in `_app.js`", + "lvl3": "Note:" + } + }, + { + "content": "Chakra UI + Next.js", + "id": "9d36d402-38b3-4a1a-855c-468a7e9b04bd", + "type": "lvl1", + "url": "/guides/with-nextjs", + "hierarchy": { "lvl1": "Chakra UI + Next.js" } + }, + { + "content": "Chakra-v1", + "id": "843e9709-81b7-4248-98e1-92dbdd4e85c9", + "type": "lvl2", + "url": "/guides/with-nextjs#chakra-v1", + "hierarchy": { + "lvl1": "Chakra UI + Next.js", + "lvl2": "Chakra-v1", + "lvl3": null + } + }, + { + "content": "Chakra providers", + "id": "3fa9a9c1-ea8c-42aa-8ff4-9ac8140a27fb", + "type": "lvl3", + "url": "/guides/with-nextjs#chakra-providers", + "hierarchy": { + "lvl1": "Chakra UI + Next.js", + "lvl2": "Chakra-v1", + "lvl3": "Chakra providers" + } + }, + { + "content": "Stacking and z-index", + "id": "00a767ed-3fa4-4644-bc45-699458ea60f0", + "type": "lvl1", + "url": "/guides/z-index", + "hierarchy": { "lvl1": "Stacking and z-index" } + }, + { + "content": "What's wrong with z-index?", + "id": "2e719e04-ec3b-427b-a3b2-08bdec1a6863", + "type": "lvl2", + "url": "/guides/z-index#whats-wrong-with-z-index", + "hierarchy": { + "lvl1": "Stacking and z-index", + "lvl2": "What's wrong with z-index?", + "lvl3": null + } + }, + { + "content": "Stacking contexts", + "id": "c6468f57-4b8b-4ee3-af88-dbe2c1d14f60", + "type": "lvl3", + "url": "/guides/z-index#stacking-contexts", + "hierarchy": { + "lvl1": "Stacking and z-index", + "lvl2": "What's wrong with z-index?", + "lvl3": "Stacking contexts" + } + }, + { + "content": "Chakra Portal to the rescue", + "id": "c388540c-0982-49bc-8cde-a79a23c4114c", + "type": "lvl2", + "url": "/guides/z-index#chakra-portal-to-the-rescue", + "hierarchy": { + "lvl1": "Stacking and z-index", + "lvl2": "Chakra Portal to the rescue", + "lvl3": null + } + }, + { + "content": "Can I still use z-index alongside Portals?", + "id": "7b8e19aa-b195-44b4-951b-006a212da229", + "type": "lvl3", + "url": "/guides/z-index#can-i-still-use-z-index-alongside-portals", + "hierarchy": { + "lvl1": "Stacking and z-index", + "lvl2": "Chakra Portal to the rescue", + "lvl3": "Can I still use z-index alongside Portals?" + } + }, + { + "content": "Further reading", + "id": "e071da92-e709-45ce-a3f0-2fcd4ea3d567", + "type": "lvl2", + "url": "/guides/z-index#further-reading", + "hierarchy": { + "lvl1": "Stacking and z-index", + "lvl2": "Further reading", + "lvl3": null + } + } +] diff --git a/website/package.json b/website/package.json index f055c63b777..ea7f0c98ac0 100644 --- a/website/package.json +++ b/website/package.json @@ -16,18 +16,21 @@ "@chakra-ui/theme-tools": "1.0.1", "@chakra-ui/utils": "1.0.1", "@docsearch/react": "^1.0.0-alpha.27", - "@docusaurus/utils": "^2.0.0-alpha.62", + "@docusaurus/utils": "^2.0.0-alpha.69", "@mdx-js/react": "^1.6.19", "@octokit/rest": "^18.0.9", "date-fns": "^2.16.1", "docsearch.js": "^2.6.3", "formik": "^2.2.5", + "highlight-words-core": "^1.2.2", + "match-sorter": "^6.0.1", "next": "^10.0.1", "next-mdx-enhanced": "^5.0.0", "next-seo": "^4.17.0", "prism-react-renderer": "^1.1.1", "react-icons": "^3.11.0", "react-live": "^2.2.3", + "react-multi-ref": "1.0.0", "remark": "^13.0.0", "remark-autolink-headings": "^6.0.1", "remark-emoji": "^2.1.0", @@ -35,7 +38,8 @@ "remark-mdx": "^1.6.19", "remark-slug": "^6.0.0", "remark-toc": "^7.0.0", - "remark-unwrap-images": "^2.0.0" + "remark-unwrap-images": "^2.0.0", + "scroll-into-view-if-needed": "^2.2.26" }, "devDependencies": { "@next/bundle-analyzer": "^9.5.5", diff --git a/website/pages/index.tsx b/website/pages/index.tsx index d74f558bce8..172a27c3ca7 100644 --- a/website/pages/index.tsx +++ b/website/pages/index.tsx @@ -26,6 +26,7 @@ import DiscordStrip from "components/discord-strip" import { Footer } from "components/footer" import Header from "components/header" import LogoMark from "components/logo-mark" +import OmniSearch from "components/omni-search" import SEO from "components/seo" import TweetCard from "components/tweet-card" import { tweets } from "configs/tweets.json" diff --git a/website/src/components/algolia-search.tsx b/website/src/components/algolia-search.tsx index 94bfab67db5..910cc0b54c6 100644 --- a/website/src/components/algolia-search.tsx +++ b/website/src/components/algolia-search.tsx @@ -1,142 +1,199 @@ +import * as React from "react" +import Link from "next/link" +import Head from "next/head" +import { useRouter } from "next/router" +import { DocSearchModal, useDocSearchKeyboardEvents } from "@docsearch/react" import { - Box, - Input, - InputGroup, - InputLeftElement, - useEventListener, + chakra, + HStack, + HTMLChakraProps, + Kbd, + Portal, + Text, + useColorModeValue, + VisuallyHidden, } from "@chakra-ui/react" -import { SearchIcon } from "@chakra-ui/icons" +import SearchStyle from "./search.styles" import { get, startsWith } from "lodash/fp" -import { useRouter } from "next/router" -import React from "react" +import _ from "lodash" +import { SearchIcon } from "@chakra-ui/icons" const getLvl1 = get("hierarchy.lvl1") const startsWithCss = startsWith("css-") -let link: HTMLAnchorElement +const ACTION_KEY_DEFAULT = ["Ctrl ", "Control"] +const ACTION_KEY_APPLE = ["⌘", "Command"] -if (typeof window !== "undefined") { - link = document.createElement("a") -} - -function getHash(url: string) { - link.href = url - return link.hash +function Hit(props) { + const { hit, children } = props as any + return ( + + {children} + + ) } -function Search(props) { - const router = useRouter() - const ref = React.useRef() - - const onKeyDown = (event: KeyboardEvent) => { - if (event.key === "/") { - const activeElement = document.activeElement - const focusWrapper = document.getElementById("gatsby-focus-wrapper") +export const SearchButton = React.forwardRef(function SearchButton( + props: HTMLChakraProps<"button">, + ref: React.Ref, +) { + const [actionKey, setActionKey] = React.useState() - if (activeElement === focusWrapper || activeElement === document.body) { - event.preventDefault() - ref.current?.focus({ preventScroll: true }) + React.useEffect(() => { + if (typeof navigator !== "undefined") { + if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) { + setActionKey(ACTION_KEY_APPLE) + } else { + setActionKey(ACTION_KEY_DEFAULT) } } - } + }, []) + + return ( + + {actionKey && ( + <> + + + + Search the docs + + + Press + + + {actionKey[0]} + + + and + + K + + to search + + + + )} + + ) +}) - useEventListener("keydown", onKeyDown) +export function Search() { + const router = useRouter() + const [isOpen, setIsOpen] = React.useState(false) + const searchButtonRef = React.useRef() + const [initialQuery, setInitialQuery] = React.useState(null) + const [actionKey, setActionKey] = React.useState() - React.useEffect(() => { - if (window) { - import("docsearch.js").then(({ default: docsearch }) => { - const _window = window as any - _window.docsearch = docsearch - docsearch({ - apiKey: "df1dcc41f7b8e5d68e73dd56d1e19701", - indexName: "chakra-ui", - inputSelector: "#algolia-search", - // debug: true, - handleSelected: (input, event, suggestion) => { - event.preventDefault() - input.setVal("") - input.close() - if (ref.current) { - ref.current.blur() - } + const onOpen = React.useCallback(() => { + setIsOpen(true) + }, [setIsOpen]) + + const onClose = React.useCallback(() => { + setIsOpen(false) + }, [setIsOpen]) + + const onInput = React.useCallback( + (e) => { + setIsOpen(true) + setInitialQuery(e.key) + }, + [setIsOpen, setInitialQuery], + ) - const url = suggestion.url.replace("https://chakra-ui.com", "") - router.push(url) - const hash = window.decodeURI(getHash(url)) + useDocSearchKeyboardEvents({ + isOpen, + onOpen, + onClose, + onInput, + searchButtonRef, + }) - if (hash !== "#" && hash !== "") { - const link: HTMLAnchorElement = document.querySelector( - `.docSearch-content ${hash} a`, - ) - if (link) { - link.click() - } - } - }, - transformData(hits: any[]) { - return hits.filter((hit) => { - const lvl1 = getLvl1(hit) - return !startsWithCss(lvl1) - }) - }, - }) - }) + React.useEffect(() => { + if (typeof navigator !== "undefined") { + if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) { + setActionKey(ACTION_KEY_APPLE) + } else { + setActionKey(ACTION_KEY_DEFAULT) + } } - // eslint-disable-next-line react-hooks/exhaustive-deps }, []) return ( - - - - - - + + - - + + + + {isOpen && ( + + { + return items + .filter((item) => { + const lvl1 = item.hierarchy.lvl1 + return !startsWithCss(lvl1) || !startsWithCss(item.content) + }) + .map((item) => { + /** + * We transform the absolute URL into a relative URL to + * leverage Next's preloading. + */ + const a = document.createElement("a") + a.href = item.url + const hash = a.hash === "#content-wrapper" ? "" : a.hash + + return { + ...item, + url: `${a.pathname}${hash}`, + content: item.content ?? item.hierarchy.lvl0, + } + }) + }} + /> + + )} + ) } - -export default Search diff --git a/website/src/components/header.tsx b/website/src/components/header.tsx index e80e07ba255..2c53656dae7 100644 --- a/website/src/components/header.tsx +++ b/website/src/components/header.tsx @@ -1,5 +1,4 @@ import { - Box, chakra, Flex, HStack, @@ -18,7 +17,7 @@ import React from "react" import { FaMoon, FaSun } from "react-icons/fa" import Logo from "./logo" import { MobileNavButton, MobileNavContent } from "./mobile-nav" -import { Search } from "./search" +import OmniSearch from "./omni-search" import SponsorButton from "./sponsor-button" import VersionSwitcher from "./version-switcher" @@ -71,7 +70,7 @@ function HeaderContent() { align="center" color="gray.400" > - + diff --git a/website/src/components/omni-search.tsx b/website/src/components/omni-search.tsx new file mode 100644 index 00000000000..e74ddb15435 --- /dev/null +++ b/website/src/components/omni-search.tsx @@ -0,0 +1,315 @@ +import { SearchIcon } from "@chakra-ui/icons" +import { + Box, + Center, + chakra, + Flex, + Modal, + ModalBody, + ModalContent, + ModalOverlay, + useDisclosure, + useUpdateEffect, +} from "@chakra-ui/react" +import searchData from "configs/search-meta.json" +import { matchSorter } from "match-sorter" +import Link from "next/link" +import { useRouter } from "next/router" +import * as React from "react" +import MultiRef from "react-multi-ref" +import scrollIntoView from "scroll-into-view-if-needed" +import { findAll } from "highlight-words-core" +import { SearchButton } from "./algolia-search" + +function OptionText(props: any) { + const { searchWords, textToHighlight } = props + + const chunks = findAll({ + searchWords, + textToHighlight, + }) + + const highlightedText = chunks.map((chunk) => { + const { end, highlight, start } = chunk + const text = textToHighlight.substr(start, end - start) + if (highlight) { + return ( + + {text} + + ) + } else { + return text + } + }) + + return highlightedText +} + +function DocIcon(props) { + return ( + + + + ) +} + +function EnterIcon(props) { + return ( + + + + + + + ) +} + +function HashIcon(props) { + return ( + + + + ) +} + +function OmniSearch() { + const router = useRouter() + const [query, setQuery] = React.useState("") + const [active, setActive] = React.useState(0) + const menu = useDisclosure() + const modal = useDisclosure() + const [menuNodes] = React.useState(() => new MultiRef()) + const menuRef = React.useRef(null) + const eventRef = React.useRef<"mouse" | "keyboard">(null) + + React.useEffect(() => { + router.events.on("routeChangeComplete", modal.onClose) + return () => { + router.events.off("routeChangeComplete", modal.onClose) + } + }, []) + + const results = React.useMemo( + function getResults() { + if (query.length < 2) return [] + return matchSorter(searchData, query, { + keys: ["content", "hierarchy.lvl1", "hierarchy.lvl2", "hierarchy.lvl3"], + }) + .slice(0, 20) + .sort((a, b) => { + if (a.hierarchy.lvl2 == null && b.hierarchy != null) return -1 + if (a.hierarchy.lvl2 != null && b.hierarchy == null) return 1 + return 0 + }) + }, + [query], + ) + + const onKeyDown = React.useCallback( + (e: React.KeyboardEvent) => { + eventRef.current = "keyboard" + switch (e.key) { + case "ArrowDown": { + e.preventDefault() + if (active + 1 < results.length) { + setActive(active + 1) + } + break + } + case "ArrowUp": { + e.preventDefault() + if (active - 1 >= 0) { + setActive(active - 1) + } + break + } + case "Enter": { + router.push(results[active].url) + break + } + } + }, + [active, results, router], + ) + + useUpdateEffect(() => { + setActive(0) + }, [query]) + + useUpdateEffect(() => { + if (!menuRef.current || eventRef.current === "mouse") return + const node = menuNodes.map.get(active) + if (!node) return + scrollIntoView(node, { + scrollMode: "if-needed", + block: "nearest", + inline: "nearest", + boundary: menuRef.current, + }) + }, [active]) + + const open = menu.isOpen && results.length > 0 + + return ( + <> + + + + + + { + setQuery(e.target.value) + menu.onOpen() + }} + onKeyDown={onKeyDown} + /> +
+ +
+ + + {open && ( + + {results.map((item, index) => { + const selected = index === active + const isLvl1 = item.type === "lvl1" + return ( + + { + setActive(index) + eventRef.current = "mouse" + }} + ref={menuNodes.ref(index)} + role="option" + aria-selected={selected ? true : undefined} + _selected={{ + bg: "teal.500", + color: "white", + //@ts-expect-error fix this in chakra styled-system types. I should be able to pass other css styles + mark: { + color: "white", + textDecor: "underline", + }, + }} + key={item.id} + bg="white" + fontSize="sm" + px="4" + py="2" + display="flex" + alignItems="center" + > + {isLvl1 ? ( + + ) : ( + + )} + + + {!isLvl1 && ( + + {item.hierarchy.lvl1} + + )} + + + + + + + + + ) + })} + + )} + + + + + ) +} + +export default OmniSearch diff --git a/website/src/components/search.tsx b/website/src/components/search.tsx deleted file mode 100644 index 58f779fcf38..00000000000 --- a/website/src/components/search.tsx +++ /dev/null @@ -1,196 +0,0 @@ -import * as React from "react" -import Link from "next/link" -import Head from "next/head" -import { useRouter } from "next/router" -import { DocSearchModal, useDocSearchKeyboardEvents } from "@docsearch/react" -import { - chakra, - HStack, - HTMLChakraProps, - Kbd, - Portal, - Text, - useColorModeValue, - VisuallyHidden, -} from "@chakra-ui/react" -import SearchStyle from "./search.styles" -import { get, startsWith } from "lodash/fp" -import _ from "lodash" -import { SearchIcon } from "@chakra-ui/icons" - -const getLvl1 = get("hierarchy.lvl1") -const startsWithCss = startsWith("css-") - -const ACTION_KEY_DEFAULT = ["Ctrl ", "Control"] -const ACTION_KEY_APPLE = ["⌘", "Command"] - -function Hit(props) { - const { hit, children } = props as any - return ( - - {children} - - ) -} - -interface SearchButtonProps extends HTMLChakraProps<"button"> { - actionKey?: string[] -} - -const SearchButton = React.forwardRef(function SearchButton( - props: SearchButtonProps, - ref: React.Ref, -) { - const { actionKey, ...rest } = props - return ( - - {actionKey && ( - <> - - - - Search the docs - - - Press - - - {actionKey[0]} - - - and - - K - - to search - - - - )} - - ) -}) - -export function Search() { - const router = useRouter() - const [isOpen, setIsOpen] = React.useState(false) - const searchButtonRef = React.useRef() - const [initialQuery, setInitialQuery] = React.useState(null) - const [actionKey, setActionKey] = React.useState() - - const onOpen = React.useCallback(() => { - setIsOpen(true) - }, [setIsOpen]) - - const onClose = React.useCallback(() => { - setIsOpen(false) - }, [setIsOpen]) - - const onInput = React.useCallback( - (e) => { - setIsOpen(true) - setInitialQuery(e.key) - }, - [setIsOpen, setInitialQuery], - ) - - useDocSearchKeyboardEvents({ - isOpen, - onOpen, - onClose, - onInput, - searchButtonRef, - }) - - React.useEffect(() => { - if (typeof navigator !== "undefined") { - if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) { - setActionKey(ACTION_KEY_APPLE) - } else { - setActionKey(ACTION_KEY_DEFAULT) - } - } - }, []) - - return ( - <> - - - - - - {isOpen && ( - - { - return items - .filter((item) => { - const lvl1 = item.hierarchy.lvl1 - return !startsWithCss(lvl1) || !startsWithCss(item.content) - }) - .map((item) => { - /** - * We transform the absolute URL into a relative URL to - * leverage Next's preloading. - */ - const a = document.createElement("a") - a.href = item.url - const hash = a.hash === "#content-wrapper" ? "" : a.hash - - return { - ...item, - url: `${a.pathname}${hash}`, - content: item.content ?? item.hierarchy.lvl0, - } - }) - }} - /> - - )} - - ) -} diff --git a/yarn.lock b/yarn.lock index c061af2536d..07e3a6fb9bb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1747,25 +1747,25 @@ "@francoischalifour/autocomplete-preset-algolia" "^1.0.0-alpha.28" algoliasearch "^4.0.0" -"@docusaurus/types@2.0.0-alpha.68": - version "2.0.0-alpha.68" - resolved "https://registry.yarnpkg.com/@docusaurus/types/-/types-2.0.0-alpha.68.tgz#8709de8b7e6a535f3e835ef20b04b6f12bf328af" - integrity sha512-UcUuwJx2cjwbWBeXi2vNgpNn8XK1UheQ9v+DPWkHwcYHK4fgNuihf2BoA/PYmd8faclZTYuYV14waje31zmxbA== +"@docusaurus/types@2.0.0-alpha.69": + version "2.0.0-alpha.69" + resolved "https://registry.yarnpkg.com/@docusaurus/types/-/types-2.0.0-alpha.69.tgz#05d1a28f325600185b3cb4088326c865fb4b54a9" + integrity sha512-8TgHmUMH5q+5D93nyugk/dtUeGPblRE++gxxrwjNYnJucRUNDKRC8kJhEozODGcSfXddTeMalPvbRKSz9Pxj2g== dependencies: "@types/webpack" "^4.41.0" commander "^4.0.1" querystring "0.2.0" webpack-merge "^4.2.2" -"@docusaurus/utils@^2.0.0-alpha.62": - version "2.0.0-alpha.68" - resolved "https://registry.yarnpkg.com/@docusaurus/utils/-/utils-2.0.0-alpha.68.tgz#2c806521edb0ef27c612c0d6380319cb9d8ded4a" - integrity sha512-Lp4LV2j4wkZtG2GofL3fnLF+Fmj+NAZjt3i0EyPE0dAyW6SW0oyoZQFtoZoEcxFGVViEM3VhXtsHdJxA6TDlFw== +"@docusaurus/utils@^2.0.0-alpha.69": + version "2.0.0-alpha.69" + resolved "https://registry.yarnpkg.com/@docusaurus/utils/-/utils-2.0.0-alpha.69.tgz#9532cd489742beede570575ab70265dacecb3f24" + integrity sha512-RpxqcjPT0L+MxLyS/4QOHp/2hlKPcPoDyvfqtTJiS9DPtUzkH573a5/yMbfzz8IbPeYWRCPL2qxWtmN7XCZ/sQ== dependencies: - "@docusaurus/types" "2.0.0-alpha.68" + "@docusaurus/types" "2.0.0-alpha.69" chalk "^3.0.0" escape-string-regexp "^2.0.0" - fs-extra "^8.1.0" + fs-extra "^9.0.1" gray-matter "^4.0.2" lodash.camelcase "^4.3.0" lodash.kebabcase "^4.1.1" @@ -6070,6 +6070,13 @@ ansi-html@0.0.7, ansi-html@^0.0.7: resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e" integrity sha1-gTWEAhliqenm/QOflA0S9WynhZ4= +ansi-red@^0.1.1: + version "0.1.1" + resolved "https://registry.yarnpkg.com/ansi-red/-/ansi-red-0.1.1.tgz#8c638f9d1080800a353c9c28c8a81ca4705d946c" + integrity sha1-jGOPnRCAgAo1PJwoyKgcpHBdlGw= + dependencies: + ansi-wrap "0.1.0" + ansi-regex@^2.0.0: version "2.1.1" resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df" @@ -6204,7 +6211,7 @@ arg@^4.1.0, arg@^4.1.3: resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089" integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA== -argparse@^1.0.7: +argparse@^1.0.10, argparse@^1.0.7: version "1.0.10" resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911" integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg== @@ -6520,6 +6527,13 @@ autocomplete.js@0.36.0: dependencies: immediate "^3.2.3" +autolinker@~0.28.0: + version "0.28.1" + resolved "https://registry.yarnpkg.com/autolinker/-/autolinker-0.28.1.tgz#0652b491881879f0775dace0cdca3233942a4e47" + integrity sha1-BlK0kYgYefB3XazgzcoyM5QqTkc= + dependencies: + gulp-header "^1.7.1" + autoprefixer@^9.6.1, autoprefixer@^9.7.2, autoprefixer@^9.8.4: version "9.8.6" resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f" @@ -8355,6 +8369,11 @@ code-point-at@^1.0.0: resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77" integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c= +coffee-script@^1.12.4: + version "1.12.7" + resolved "https://registry.yarnpkg.com/coffee-script/-/coffee-script-1.12.7.tgz#c05dae0cb79591d05b3070a8433a98c9a89ccc53" + integrity sha512-fLeEhqwymYat/MpTPUjSKHVYYl0ec2mOyALEMLmzr5i1isuG+6jfI2j2d5oBO3VIzgUXgBVIcOT9uH1TFxBckw== + collapse-white-space@^1.0.2: version "1.0.6" resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287" @@ -8581,7 +8600,7 @@ compute-scroll-into-view@1.0.14: resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.14.tgz#80e3ebb25d6aa89f42e533956cb4b16a04cfe759" integrity sha512-mKDjINe3tc6hGelUMNDzuhorIUZ7kS7BwyY0r2wQd2HOH2tRuJykiC06iSEX8y1TuhNzvz4GcJnK16mM2J1NMQ== -compute-scroll-into-view@^1.0.14: +compute-scroll-into-view@^1.0.14, compute-scroll-into-view@^1.0.16: version "1.0.16" resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.16.tgz#5b7bf4f7127ea2c19b750353d7ce6776a90ee088" integrity sha512-a85LHKY81oQnikatZYA90pufpZ6sQx++BoCxOEMsjpZx+ZnaKGQnCyCehTRr/1p9GBIAHTjcU9k71kSYWloLiQ== @@ -8591,7 +8610,7 @@ concat-map@0.0.1: resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s= -concat-stream@^1.5.0, concat-stream@^1.6.2: +concat-stream@^1.5.0, concat-stream@^1.5.2, concat-stream@^1.6.2: version "1.6.2" resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34" integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw== @@ -8611,6 +8630,13 @@ concat-stream@^2.0.0: readable-stream "^3.0.2" typedarray "^0.0.6" +concat-with-sourcemaps@*: + version "1.1.0" + resolved "https://registry.yarnpkg.com/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz#d4ea93f05ae25790951b99e7b3b09e3908a4082e" + integrity sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg== + dependencies: + source-map "^0.6.1" + concurrently@^5.3.0: version "5.3.0" resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-5.3.0.tgz#7500de6410d043c912b2da27de3202cb489b1e7b" @@ -10055,6 +10081,11 @@ dezalgo@^1.0.0: asap "^2.0.0" wrappy "1" +diacritics-map@^0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/diacritics-map/-/diacritics-map-0.1.0.tgz#6dfc0ff9d01000a2edf2865371cac316e94977af" + integrity sha1-bfwP+dAQAKLt8oZTccrDFulJd68= + didyoumean@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.1.tgz#e92edfdada6537d484d73c0172fd1eba0c4976ff" @@ -11422,6 +11453,13 @@ expand-brackets@^2.1.4: snapdragon "^0.8.1" to-regex "^3.0.1" +expand-range@^1.8.1: + version "1.8.2" + resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337" + integrity sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc= + dependencies: + fill-range "^2.1.0" + expand-template@^2.0.3: version "2.0.3" resolved "https://registry.yarnpkg.com/expand-template/-/expand-template-2.0.3.tgz#6e14b3fcee0f3a6340ecb57d2e8918692052a47c" @@ -11879,6 +11917,17 @@ filesize@^3.6.1: resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.1.tgz#090bb3ee01b6f801a8a8be99d31710b3422bb317" integrity sha512-7KjR1vv6qnicaPMi1iiTcI85CyYwRO/PSFCu6SvqL8jN2Wjt/NIYQTFtFs7fSDCYOstUkEWIQGFUg5YZQfjlcg== +fill-range@^2.1.0: + version "2.2.4" + resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.4.tgz#eb1e773abb056dcd8df2bfdf6af59b8b3a936565" + integrity sha512-cnrcCbj01+j2gTG921VZPnHbjmdAf8oQV/iGeV2kZxGSyfYjjTyY79ErsK1WJWMpw6DaApEX72binqJE+/d+5Q== + dependencies: + is-number "^2.1.0" + isobject "^2.0.0" + randomatic "^3.0.0" + repeat-element "^1.1.2" + repeat-string "^1.5.2" + fill-range@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7" @@ -13489,6 +13538,17 @@ graphql@^14.6.0, graphql@^14.7.0: dependencies: iterall "^1.2.2" +gray-matter@^2.1.0: + version "2.1.1" + resolved "https://registry.yarnpkg.com/gray-matter/-/gray-matter-2.1.1.tgz#3042d9adec2a1ded6a7707a9ed2380f8a17a430e" + integrity sha1-MELZrewqHe1qdwep7SOA+KF6Qw4= + dependencies: + ansi-red "^0.1.1" + coffee-script "^1.12.4" + extend-shallow "^2.0.1" + js-yaml "^3.8.1" + toml "^2.3.2" + gray-matter@^4.0.2: version "4.0.2" resolved "https://registry.yarnpkg.com/gray-matter/-/gray-matter-4.0.2.tgz#9aa379e3acaf421193fce7d2a28cebd4518ac454" @@ -13509,6 +13569,15 @@ gud@^1.0.0: resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0" integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw== +gulp-header@^1.7.1: + version "1.8.12" + resolved "https://registry.yarnpkg.com/gulp-header/-/gulp-header-1.8.12.tgz#ad306be0066599127281c4f8786660e705080a84" + integrity sha512-lh9HLdb53sC7XIZOYzTXM4lFuXElv3EVkSDhsd7DoJBj7hm+Ni7D3qYbb+Rr8DuM8nRanBvkVO9d7askreXGnQ== + dependencies: + concat-with-sourcemaps "*" + lodash.template "^4.4.0" + through2 "^2.0.0" + gzip-js@^0.3.2: version "0.3.2" resolved "https://registry.yarnpkg.com/gzip-js/-/gzip-js-0.3.2.tgz#23117efeeb28cf385248deff0dffad894836d96b" @@ -13817,6 +13886,11 @@ hicat@^0.7.0: highlight.js "^8.1.0" minimist "^0.2.0" +highlight-words-core@^1.2.2: + version "1.2.2" + resolved "https://registry.yarnpkg.com/highlight-words-core/-/highlight-words-core-1.2.2.tgz#1eff6d7d9f0a22f155042a00791237791b1eeaaa" + integrity sha512-BXUKIkUuh6cmmxzi5OIbUJxrG8OAk2MqoL1DtO3Wo9D2faJg2ph5ntyuQeLqaHJmzER6H5tllCDA9ZnNe9BVGg== + highlight.js@^10.1.1, highlight.js@~10.4.0: version "10.4.0" resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.4.0.tgz#ef3ce475e5dfa7a48484260b49ea242ddab823a0" @@ -14898,6 +14972,13 @@ is-npm@^4.0.0: resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-4.0.0.tgz#c90dd8380696df87a7a6d823c20d0b12bbe3c84d" integrity sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig== +is-number@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f" + integrity sha1-Afy7s5NGOlSPL0ZszhbezknbkI8= + dependencies: + kind-of "^3.0.2" + is-number@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195" @@ -14905,6 +14986,11 @@ is-number@^3.0.0: dependencies: kind-of "^3.0.2" +is-number@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/is-number/-/is-number-4.0.0.tgz#0026e37f5454d73e356dfe6564699867c6a7f0ff" + integrity sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ== + is-number@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b" @@ -15856,7 +15942,7 @@ js-tokens@^3.0.2: resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls= -js-yaml@^3.11.0, js-yaml@^3.13.0, js-yaml@^3.13.1, js-yaml@^3.4.3, js-yaml@^3.6.1, js-yaml@^3.8.2: +js-yaml@^3.11.0, js-yaml@^3.13.0, js-yaml@^3.13.1, js-yaml@^3.4.3, js-yaml@^3.6.1, js-yaml@^3.8.1, js-yaml@^3.8.2: version "3.14.0" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.0.tgz#a7a34170f26a21bb162424d8adacb4113a69e482" integrity sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A== @@ -16199,6 +16285,13 @@ lazy-cache@^0.2.3, lazy-cache@^0.2.4: resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-0.2.7.tgz#7feddf2dcb6edb77d11ef1d117ab5ffdf0ab1b65" integrity sha1-f+3fLctu23fRHvHRF6tf/fCrG2U= +lazy-cache@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-2.0.2.tgz#b9190a4f913354694840859f8a8f7084d8822264" + integrity sha1-uRkKT5EzVGlIQIWfio9whNiCImQ= + dependencies: + set-getter "^0.1.0" + lazy-universal-dotenv@^3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/lazy-universal-dotenv/-/lazy-universal-dotenv-3.0.1.tgz#a6c8938414bca426ab8c9463940da451a911db38" @@ -16289,6 +16382,16 @@ lint-staged@^10.4.2: string-argv "0.3.1" stringify-object "^3.3.0" +list-item@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/list-item/-/list-item-1.1.1.tgz#0c65d00e287cb663ccb3cb3849a77e89ec268a56" + integrity sha1-DGXQDih8tmPMs8s4Sad+iewmilY= + dependencies: + expand-range "^1.8.1" + extend-shallow "^2.0.1" + is-number "^2.1.0" + repeat-string "^1.5.2" + listr-silent-renderer@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz#924b5a3757153770bf1a8e3fbf74b8bbf3f9242e" @@ -16927,6 +17030,11 @@ markdown-escapes@^1.0.0: resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.4.tgz#c95415ef451499d7602b91095f3c8e8975f78535" integrity sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg== +markdown-link@^0.1.1: + version "0.1.1" + resolved "https://registry.yarnpkg.com/markdown-link/-/markdown-link-0.1.1.tgz#32c5c65199a6457316322d1e4229d13407c8c7cf" + integrity sha1-MsXGUZmmRXMWMi0eQinRNAfIx88= + markdown-table@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-2.0.0.tgz#194a90ced26d31fe753d8b9434430214c011865b" @@ -16942,6 +17050,32 @@ markdown-to-jsx@^6.11.4: prop-types "^15.6.2" unquote "^1.1.0" +markdown-toc@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/markdown-toc/-/markdown-toc-1.2.0.tgz#44a15606844490314afc0444483f9e7b1122c339" + integrity sha512-eOsq7EGd3asV0oBfmyqngeEIhrbkc7XVP63OwcJBIhH2EpG2PzFcbZdhy1jutXSlRBBVMNXHvMtSr5LAxSUvUg== + dependencies: + concat-stream "^1.5.2" + diacritics-map "^0.1.0" + gray-matter "^2.1.0" + lazy-cache "^2.0.2" + list-item "^1.1.1" + markdown-link "^0.1.1" + minimist "^1.2.0" + mixin-deep "^1.1.3" + object.pick "^1.2.0" + remarkable "^1.7.1" + repeat-string "^1.6.1" + strip-color "^0.1.0" + +match-sorter@^6.0.1: + version "6.0.1" + resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.0.1.tgz#ae6697296a212da75099dddd162c820cc9f73d6d" + integrity sha512-BPKBIC0yffMAjymiY4D3EVwWraeBskyTZBY+JL7utOHk5V8I1BTUvqH0/gl8mZKKzSMG4fRmoMubzb++rBgY5Q== + dependencies: + "@babel/runtime" "^7.12.5" + remove-accents "0.4.2" + matched@^0.3.2: version "0.3.2" resolved "https://registry.yarnpkg.com/matched/-/matched-0.3.2.tgz#817cc5ef31c539ddb01d1e0f508e38acb63be48a" @@ -16959,6 +17093,11 @@ material-colors@^1.2.1: resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46" integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg== +math-random@^1.0.1: + version "1.0.4" + resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.4.tgz#5dd6943c938548267016d4e34f057583080c514c" + integrity sha512-rUxjysqif/BZQH2yhd5Aaq7vXMSx9NdEsQcyA07uEzIvxgI7zIr33gGsh+RU0/XjmQpCW7RsVof1vlkvQVCK5A== + md5-file@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/md5-file/-/md5-file-5.0.0.tgz#e519f631feca9c39e7f9ea1780b63c4745012e20" @@ -17469,7 +17608,7 @@ mitt@^1.2.0: resolved "https://registry.yarnpkg.com/mitt/-/mitt-1.2.0.tgz#cb24e6569c806e31bd4e3995787fe38a04fdf90d" integrity sha512-r6lj77KlwqLhIUku9UWYes7KJtsczvolZkzp8hbaDPPaE24OmWl5s539Mytlj22siEQKosZ26qCBgda2PKwoJw== -mixin-deep@^1.2.0: +mixin-deep@^1.1.3, mixin-deep@^1.2.0: version "1.3.2" resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566" integrity sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA== @@ -18277,7 +18416,7 @@ object.getownpropertydescriptors@^2.0.3, object.getownpropertydescriptors@^2.1.0 define-properties "^1.1.3" es-abstract "^1.17.0-next.1" -object.pick@^1.3.0: +object.pick@^1.2.0, object.pick@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747" integrity sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c= @@ -20462,6 +20601,15 @@ ramda@^0.21.0: resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.21.0.tgz#a001abedb3ff61077d4ff1d577d44de77e8d0a35" integrity sha1-oAGr7bP/YQd9T/HVd9RN536NCjU= +randomatic@^3.0.0: + version "3.1.1" + resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-3.1.1.tgz#b776efc59375984e36c537b2f51a1f0aff0da1ed" + integrity sha512-TuDE5KxZ0J461RVjrJZCJc+J+zCkTb1MbH9AQUq68sMhOMcy9jLcb3BrZKgp9q9Ncltdg4QVqWrH02W2EFFVYw== + dependencies: + is-number "^4.0.0" + kind-of "^6.0.0" + math-random "^1.0.1" + randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a" @@ -20850,6 +20998,13 @@ react-lorem-component@^0.13.0: object-assign "^4.1.0" seedable-random "0.0.1" +react-multi-ref@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/react-multi-ref/-/react-multi-ref-1.0.0.tgz#6075731f82666ce9b59fa1a2763e8bb534202e7e" + integrity sha512-LJuQXEabnv8JLcvcWeJcTogxG4eXVFiPfQ9CECuwWUbfJdrVpPf13m9RxmImyJS0J99BWokGn7dlR1dR06XPDw== + dependencies: + "@babel/runtime" "^7.1.2" + react-popper-tooltip@^2.8.3: version "2.11.1" resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-2.11.1.tgz#3c4bdfd8bc10d1c2b9a162e859bab8958f5b2644" @@ -21749,6 +21904,19 @@ remark@^13.0.0: remark-stringify "^9.0.0" unified "^9.1.0" +remarkable@^1.7.1: + version "1.7.4" + resolved "https://registry.yarnpkg.com/remarkable/-/remarkable-1.7.4.tgz#19073cb960398c87a7d6546eaa5e50d2022fcd00" + integrity sha512-e6NKUXgX95whv7IgddywbeN/ItCkWbISmc2DiqHJb0wTrqZIexqdco5b8Z3XZoo/48IdNVKM9ZCvTPJ4F5uvhg== + dependencies: + argparse "^1.0.10" + autolinker "~0.28.0" + +remove-accents@0.4.2: + version "0.4.2" + resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5" + integrity sha1-CkPTqq4egNuRngeuJUsoXZ4ce7U= + remove-trailing-separator@^1.0.1: version "1.1.0" resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef" @@ -21770,7 +21938,7 @@ repeat-element@^1.1.2: resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce" integrity sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g== -repeat-string@^1.0.0, repeat-string@^1.5.4, repeat-string@^1.6.1: +repeat-string@^1.0.0, repeat-string@^1.5.2, repeat-string@^1.5.4, repeat-string@^1.6.1: version "1.6.1" resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637" integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc= @@ -22255,6 +22423,13 @@ schema-utils@^3.0.0: ajv "^6.12.5" ajv-keywords "^3.5.2" +scroll-into-view-if-needed@^2.2.26: + version "2.2.26" + resolved "https://registry.yarnpkg.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.26.tgz#e4917da0c820135ff65ad6f7e4b7d7af568c4f13" + integrity sha512-SQ6AOKfABaSchokAmmaxVnL9IArxEnLEX9j4wAZw+x4iUTb40q7irtHG3z4GtAWz5veVZcCnubXDBRyLVQaohw== + dependencies: + compute-scroll-into-view "^1.0.16" + section-matter@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/section-matter/-/section-matter-1.0.0.tgz#e9041953506780ec01d59f292a19c7b850b84167" @@ -22416,6 +22591,13 @@ set-blocking@^2.0.0, set-blocking@~2.0.0: resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7" integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc= +set-getter@^0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/set-getter/-/set-getter-0.1.0.tgz#d769c182c9d5a51f409145f2fba82e5e86e80376" + integrity sha1-12nBgsnVpR9AkUXy+6guXoboA3Y= + dependencies: + to-object-path "^0.3.0" + set-value@^2.0.0, set-value@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b" @@ -23444,6 +23626,11 @@ strip-bom@^3.0.0: resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3" integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM= +strip-color@^0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/strip-color/-/strip-color-0.1.0.tgz#106f65d3d3e6a2d9401cac0eb0ce8b8a702b4f7b" + integrity sha1-EG9l09PmotlAHKwOsM6LinArT3s= + strip-comments@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/strip-comments/-/strip-comments-1.0.2.tgz#82b9c45e7f05873bee53f37168af930aa368679d" @@ -24200,6 +24387,11 @@ token-types@^2.0.0: "@tokenizer/token" "^0.1.0" ieee754 "^1.1.13" +toml@^2.3.2: + version "2.3.6" + resolved "https://registry.yarnpkg.com/toml/-/toml-2.3.6.tgz#25b0866483a9722474895559088b436fd11f861b" + integrity sha512-gVweAectJU3ebq//Ferr2JUY4WKSDe5N+z0FvjDncLGyHmIDoxgY/2Ie4qfEIDm4IS7OA6Rmdm7pdEEdMcV/xQ== + touch@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/touch/-/touch-3.1.0.tgz#fe365f5f75ec9ed4e56825e0bb76d24ab74af83b" @@ -25031,7 +25223,7 @@ uuid@3.4.0, uuid@^3.0.0, uuid@^3.0.1, uuid@^3.1.0, uuid@^3.3.2, uuid@^3.4.0: resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee" integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A== -uuid@^8.0.0, uuid@^8.3.0: +uuid@8.3.1, uuid@^8.0.0, uuid@^8.3.0: version "8.3.1" resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.1.tgz#2ba2e6ca000da60fce5a196954ab241131e05a31" integrity sha512-FOmRr+FmWEIG8uhZv6C2bTgEVXsHk08kE7mPlrBbEe+c3r9pjceVPgupIfNIhc4yx55H69OXANrUaSuu9eInKg== From 628e553f81150549ccf9309ed5eaf19a90e747a6 Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Mon, 30 Nov 2020 21:36:25 +0400 Subject: [PATCH 08/14] chore: connect search button with omnibox --- website/src/components/omni-search.tsx | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/website/src/components/omni-search.tsx b/website/src/components/omni-search.tsx index e74ddb15435..44f41fad5d8 100644 --- a/website/src/components/omni-search.tsx +++ b/website/src/components/omni-search.tsx @@ -9,6 +9,7 @@ import { ModalContent, ModalOverlay, useDisclosure, + useEventListener, useUpdateEffect, } from "@chakra-ui/react" import searchData from "configs/search-meta.json" @@ -127,6 +128,20 @@ function OmniSearch() { } }, []) + useEventListener("keydown", (event) => { + const isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator?.platform) + const hotkey = isMac ? "metaKey" : "ctrlKey" + if (event.key.toLowerCase() === "k" && event[hotkey]) { + modal.onOpen() + } + }) + + React.useEffect(() => { + if (modal.isOpen && query.length > 0) { + setQuery("") + } + }, [modal.isOpen]) + const results = React.useMemo( function getResults() { if (query.length < 2) return [] @@ -192,7 +207,7 @@ function OmniSearch() { <> Date: Tue, 1 Dec 2020 01:13:32 +0400 Subject: [PATCH 09/14] chore: update omni-search --- package.json | 2 +- website/package.json | 1 + website/pages/_app.tsx | 1 - website/src/components/omni-search.tsx | 3 +- website/src/styles/algolia.css | 328 ------------------------- website/theme.ts | 4 + yarn.lock | 5 + 7 files changed, 12 insertions(+), 332 deletions(-) delete mode 100644 website/src/styles/algolia.css diff --git a/package.json b/package.json index a1dcce175c2..dd55c01c088 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "check:pkgs": "manypkg check", "fix:pkgs": "manypkg fix", "version:pkgs": "changeset version", - "postinstall": "yarn check:pkgs", + "postinstall": "yarn fix:pkgs", "contributors:add": "all-contributors add", "contributors:gen": "all-contributors generate", "prestart": "yarn && yarn bootstrap", diff --git a/website/package.json b/website/package.json index ea7f0c98ac0..90e87007bf1 100644 --- a/website/package.json +++ b/website/package.json @@ -21,6 +21,7 @@ "@octokit/rest": "^18.0.9", "date-fns": "^2.16.1", "docsearch.js": "^2.6.3", + "focus-visible": "5.2.0", "formik": "^2.2.5", "highlight-words-core": "^1.2.2", "match-sorter": "^6.0.1", diff --git a/website/pages/_app.tsx b/website/pages/_app.tsx index 675027fe127..aab2cb983c3 100644 --- a/website/pages/_app.tsx +++ b/website/pages/_app.tsx @@ -4,7 +4,6 @@ import Head from "next/head" import Router from "next/router" import React from "react" import siteConfig from "configs/site-config" -import "../src/styles/algolia.css" import { ChakraProvider } from "@chakra-ui/react" import theme from "theme" import FontFace from "components/font-face" diff --git a/website/src/components/omni-search.tsx b/website/src/components/omni-search.tsx index 44f41fad5d8..d82f63675b3 100644 --- a/website/src/components/omni-search.tsx +++ b/website/src/components/omni-search.tsx @@ -207,7 +207,6 @@ function OmniSearch() { <> ') - center no-repeat; - background-size: 100%; - overflow: hidden; - text-indent: -9000px; - width: 110px; - height: 100%; - display: block; - margin: 0 5px 0 auto; -} diff --git a/website/theme.ts b/website/theme.ts index b7e7e8521b6..9e345c970c6 100644 --- a/website/theme.ts +++ b/website/theme.ts @@ -6,6 +6,10 @@ const customTheme = extendTheme({ heading: "Inter, sans-serif", body: "Inter, sans-serif", }, + shadows: { + search: + "0 0 0 1px rgba(16,22,26,.1), 0 4px 8px rgba(16,22,26,.2), 0 18px 46px 6px rgba(16,22,26,.2)", + }, styles: { global: (props) => ({ body: { diff --git a/yarn.lock b/yarn.lock index 07e3a6fb9bb..25b33cd9966 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12110,6 +12110,11 @@ focus-lock@^0.8.1: dependencies: tslib "^1.9.3" +focus-visible@5.2.0: + version "5.2.0" + resolved "https://registry.yarnpkg.com/focus-visible/-/focus-visible-5.2.0.tgz#3a9e41fccf587bd25dcc2ef045508284f0a4d6b3" + integrity sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ== + follow-redirects@1.5.10: version "1.5.10" resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a" From 480c371fa41300ab60f24e07961767e3a50c0aca Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Tue, 1 Dec 2020 01:24:19 +0400 Subject: [PATCH 10/14] chore: upgrade deps --- examples/next-js/package.json | 2 +- examples/nextjs-typescript/package.json | 4 +- package.json | 2 +- website/package.json | 14 ++-- website/src/components/sidebar/sidebar.tsx | 1 + yarn.lock | 74 +++++++++++----------- 6 files changed, 48 insertions(+), 49 deletions(-) diff --git a/examples/next-js/package.json b/examples/next-js/package.json index 3283ffa3d8d..07f681aee9c 100644 --- a/examples/next-js/package.json +++ b/examples/next-js/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@chakra-ui/react": "1.0.1", - "next": "^10.0.1", + "next": "^10.0.3", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/examples/nextjs-typescript/package.json b/examples/nextjs-typescript/package.json index 1f149e4ba98..ae3d653da46 100644 --- a/examples/nextjs-typescript/package.json +++ b/examples/nextjs-typescript/package.json @@ -17,10 +17,10 @@ "@types/react": "^16.9.53", "@types/react-dom": "^16.9.8", "faker": "^5.1.0", - "next": "^10.0.1", + "next": "^10.0.3", "react": "^17.0.1", "react-dom": "^17.0.1", - "react-icons": "^3.11.0", + "react-icons": "^4.1.0", "typescript": "^4.0.5" }, "repository": { diff --git a/package.json b/package.json index dd55c01c088..c340c84bd57 100644 --- a/package.json +++ b/package.json @@ -141,7 +141,7 @@ "react": "^17.0.1", "react-dom": "^17.0.1", "react-hook-form": "^6.11.3", - "react-icons": "^3.11.0", + "react-icons": "^4.1.0", "react-lorem-component": "^0.13.0", "react-router-dom": "^5.2.0", "react-spinners": "^0.9.0", diff --git a/website/package.json b/website/package.json index 90e87007bf1..37194ac1f5a 100644 --- a/website/package.json +++ b/website/package.json @@ -17,7 +17,7 @@ "@chakra-ui/utils": "1.0.1", "@docsearch/react": "^1.0.0-alpha.27", "@docusaurus/utils": "^2.0.0-alpha.69", - "@mdx-js/react": "^1.6.19", + "@mdx-js/react": "^1.6.21", "@octokit/rest": "^18.0.9", "date-fns": "^2.16.1", "docsearch.js": "^2.6.3", @@ -25,26 +25,26 @@ "formik": "^2.2.5", "highlight-words-core": "^1.2.2", "match-sorter": "^6.0.1", - "next": "^10.0.1", + "next": "^10.0.3", "next-mdx-enhanced": "^5.0.0", "next-seo": "^4.17.0", "prism-react-renderer": "^1.1.1", - "react-icons": "^3.11.0", + "react-icons": "^4.1.0", "react-live": "^2.2.3", "react-multi-ref": "1.0.0", "remark": "^13.0.0", "remark-autolink-headings": "^6.0.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", - "remark-mdx": "^1.6.19", + "remark-mdx": "^1.6.21", "remark-slug": "^6.0.0", "remark-toc": "^7.0.0", "remark-unwrap-images": "^2.0.0", "scroll-into-view-if-needed": "^2.2.26" }, "devDependencies": { - "@next/bundle-analyzer": "^9.5.5", - "@types/sharp": "^0.26.0", - "next-compose-plugins": "^2.2.0" + "@next/bundle-analyzer": "^10.0.3", + "@types/sharp": "^0.26.1", + "next-compose-plugins": "^2.2.1" } } diff --git a/website/src/components/sidebar/sidebar.tsx b/website/src/components/sidebar/sidebar.tsx index 926ea3217b3..f203303e8d0 100644 --- a/website/src/components/sidebar/sidebar.tsx +++ b/website/src/components/sidebar/sidebar.tsx @@ -134,6 +134,7 @@ const Sidebar = ({ routes }) => { pr="8" pb="8" pl="3" + pt="8" overflowY="auto" className="sidebar-content" flexShrink={0} diff --git a/yarn.lock b/yarn.lock index 25b33cd9966..a66970bd89f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3510,7 +3510,7 @@ unist-builder "2.0.3" unist-util-visit "2.0.3" -"@mdx-js/react@1.6.21", "@mdx-js/react@^1.6.19": +"@mdx-js/react@1.6.21", "@mdx-js/react@^1.6.21": version "1.6.21" resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-1.6.21.tgz#86d962471a5e160c59a6b32054aa55c0c7ca404e" integrity sha512-CgSNT9sq2LAlhEbVlPg7DwUQkypz+CWaWGcJbkgmp9WCAy6vW33CQ44UbKPiH3wet9o+UbXeQOqzZd041va83g== @@ -3538,27 +3538,27 @@ call-me-maybe "^1.0.1" glob-to-regexp "^0.3.0" -"@next/bundle-analyzer@^9.5.5": - version "9.5.5" - resolved "https://registry.yarnpkg.com/@next/bundle-analyzer/-/bundle-analyzer-9.5.5.tgz#9cb5f67e8d3012ccfb87c10f20715fb7f918dd66" - integrity sha512-HDYa5oFtBlZXG/N1wsheOaj2XeOFEi0HzwPiyIP82TxjoDoB6HKDYRIV3JHIUCeGFjkA66jSh8r1EAHNOuU51A== +"@next/bundle-analyzer@^10.0.3": + version "10.0.3" + resolved "https://registry.yarnpkg.com/@next/bundle-analyzer/-/bundle-analyzer-10.0.3.tgz#4eac34f171301581638deaa4dbb939632888c653" + integrity sha512-+RtvLLpNkTLnq5ICli2hCBI6oZZ1lrrLLa6Dcaitadvly1IuspgwkwyBVlufm2barV+QSHJ2GlX26+NuLbisyg== dependencies: webpack-bundle-analyzer "3.6.1" -"@next/env@10.0.2": - version "10.0.2" - resolved "https://registry.yarnpkg.com/@next/env/-/env-10.0.2.tgz#b0479a0d4d962f9f85a577298cee260c310dfa3f" - integrity sha512-1fMsLplRXJjSmOfdaeP91fbTgnsbmZSvX6BjeKXSksccg5JT9W1XkOCerTrbQLpUNZIi0sVfwBrHrwJRMCqGBA== +"@next/env@10.0.3": + version "10.0.3" + resolved "https://registry.yarnpkg.com/@next/env/-/env-10.0.3.tgz#ef1077d78bf500855576f83090d6fb1ec96272f8" + integrity sha512-xjJt2VXoSxAydskmt77nJuEtRL782E4ltaj5JtMzJ8YkNUMMu3d5ktpCR+Q3INKHF/RY6zHJ9QzyE3/s1ikbNg== -"@next/polyfill-module@10.0.2": - version "10.0.2" - resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-10.0.2.tgz#29419a1023c92453f2d2ea4b980a77405b27a80c" - integrity sha512-lDfVgKvfKz0AhKDT50fho6PtaVswq5xn4+rtvQ7IRyyvcfYswRBbd8f4N2Wb04u8GYnEOj3fSJeM3EM8U4IGzA== +"@next/polyfill-module@10.0.3": + version "10.0.3" + resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-10.0.3.tgz#507e99f6dd351dc4a6e45b63dbd397087ece459a" + integrity sha512-JaiycQZZbqViaMZgRGYcPIdCPDz+qRnqEGxbhQlrxyPaBaOtsrAEkGf1SS2wJZKa/ncxqWHMfSvizDcGcz/ygQ== -"@next/react-dev-overlay@10.0.2": - version "10.0.2" - resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-10.0.2.tgz#9f6c6ea5f313841e0acdd870161b5370d0be6cfd" - integrity sha512-9DcSaZwdINOoyzggPoBl6n0YROa7zUU9okUB5VjbB8pc34TPcqdl0lP6UBZybk5IQE8OeOZOYjYzx2q3YtQCMg== +"@next/react-dev-overlay@10.0.3": + version "10.0.3" + resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-10.0.3.tgz#99f3151677747d8be08a9314fa7ab3611e8161b8" + integrity sha512-ykiKeUhTsMRoyyYnx4jM8xeOPfKGqQ7xgx2dNXOu4tbPpdivzjJp2+K6+xnqhTmZ7uxfFBV+b1OE1ZzA8qyX5Q== dependencies: "@babel/code-frame" "7.10.4" ally.js "1.4.1" @@ -3571,10 +3571,10 @@ stacktrace-parser "0.1.10" strip-ansi "6.0.0" -"@next/react-refresh-utils@10.0.2": - version "10.0.2" - resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-10.0.2.tgz#a9a3daa55385749cd62fb57d4423ca27ae5f4e81" - integrity sha512-ILc5/BipD7+GBLmtfnQDMG71KLx0fEpVI5kJw8jN9SoeygMrb4auZhCl7gA6QP3oynocYouJ8piLj1Ol80ZvVw== +"@next/react-refresh-utils@10.0.3": + version "10.0.3" + resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-10.0.3.tgz#276bec60eae18768f96baf8a52f668f657f50ab4" + integrity sha512-XtzzPX2R4+MIyu1waEQUo2tiNwWVEkmObA6pboRCDTPOs4Ri8ckaIE08lN5A5opyF6GVN+IEq/J8KQrgsePsZQ== "@nicolo-ribaudo/chokidar-2@^2.1.8": version "2.1.8" @@ -5277,7 +5277,7 @@ resolved "https://registry.yarnpkg.com/@types/semver/-/semver-6.2.2.tgz#5c27df09ca39e3c9beb4fae6b95f4d71426df0a9" integrity sha512-RxAwYt4rGwK5GyoRwuP0jT6ZHAVTdz2EqgsHmX0PYNjGsko+OeT4WFXXTs/lM3teJUJodM+SNtAL5/pXIJ61IQ== -"@types/sharp@^0.26.0": +"@types/sharp@^0.26.1": version "0.26.1" resolved "https://registry.yarnpkg.com/@types/sharp/-/sharp-0.26.1.tgz#92f6b3e65fb02a54ac7027cea0d17cf64f0d2958" integrity sha512-vOFcnP0+aQFDb+ToKVIj8ZV6xQ7pNYGGPeYweLHxyjoQUcIGj8iY9R3OVmJyRR5KUkb0Y4obBbMjoTrBXw6AQA== @@ -17837,7 +17837,7 @@ nested-error-stacks@^2.0.0, nested-error-stacks@^2.1.0: resolved "https://registry.yarnpkg.com/nested-error-stacks/-/nested-error-stacks-2.1.0.tgz#0fbdcf3e13fe4994781280524f8b96b0cdff9c61" integrity sha512-AO81vsIO1k1sM4Zrd6Hu7regmJN1NSiAja10gc4bX3F0wd+9rQmcuHQaHVQCYIEC8iFXnE+mavh23GOt7wBgug== -next-compose-plugins@^2.2.0: +next-compose-plugins@^2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/next-compose-plugins/-/next-compose-plugins-2.2.1.tgz#020fc53f275a7e719d62521bef4300fbb6fde5ab" integrity sha512-OjJ+fV15FXO2uQXQagLD4C0abYErBjyjE0I0FHpOEIB8upw0hg1ldFP6cqHTJBH1cZqy96OeR3u1dJ+Ez2D4Bg== @@ -17872,18 +17872,18 @@ next-tick@~1.0.0: resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c" integrity sha1-yobR/ogoFpsBICCOPchCS524NCw= -next@^10.0.1: - version "10.0.2" - resolved "https://registry.yarnpkg.com/next/-/next-10.0.2.tgz#e0b8b50a00af11d777bb7591a6e677ef02f3122e" - integrity sha512-nb/E1BiOwdmU3dYKjC/O78dS/DOOQ27H+vKeIN9zQumWIbRWZlN8TQazjVjPFyzx70+mcmxbDki6CVMeMuyJmA== +next@^10.0.3: + version "10.0.3" + resolved "https://registry.yarnpkg.com/next/-/next-10.0.3.tgz#2bf9a1625dcd0afc8c31be19fc5516af68d99e80" + integrity sha512-QYCfjZgowjaLUFvyV8959SmkUZU/edFgHeiXNtWDv7kffo/oTm891p0KZAkk5cMIHcsDX3g3UuQdw/zmui783g== dependencies: "@ampproject/toolbox-optimizer" "2.7.0-alpha.1" "@babel/runtime" "7.12.5" "@hapi/accept" "5.0.1" - "@next/env" "10.0.2" - "@next/polyfill-module" "10.0.2" - "@next/react-dev-overlay" "10.0.2" - "@next/react-refresh-utils" "10.0.2" + "@next/env" "10.0.3" + "@next/polyfill-module" "10.0.3" + "@next/react-dev-overlay" "10.0.3" + "@next/react-refresh-utils" "10.0.3" ast-types "0.13.2" babel-plugin-transform-define "2.0.0" babel-plugin-transform-react-remove-prop-types "0.4.24" @@ -20942,12 +20942,10 @@ react-hotkeys@2.0.0: dependencies: prop-types "^15.6.1" -react-icons@^3.11.0: - version "3.11.0" - resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.11.0.tgz#2ca2903dfab8268ca18ebd8cc2e879921ec3b254" - integrity sha512-JRgiI/vdF6uyBgyZhVyYJUZAop95Sy4XDe/jmT3R/bKliFWpO/uZBwvSjWEdxwzec7SYbEPNPck0Kff2tUGM2Q== - dependencies: - camelcase "^5.0.0" +react-icons@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.1.0.tgz#9ca9bcbf2e3aee8e86e378bb9d465842947bbfc3" + integrity sha512-FCXBg1JbbR0vWALXIxmFAfozHdVIJmmwCD81Jk0EKOt7Ax4AdBNcaRkWhR0NaKy9ugJgoY3fFvo0PHpte55pXg== react-input-autosize@^2.2.2: version "2.2.2" @@ -21755,7 +21753,7 @@ remark-images@^2.0.0: unist-util-is "^4.0.0" unist-util-visit-parents "^3.0.0" -remark-mdx@1.6.21, remark-mdx@^1.6.19: +remark-mdx@1.6.21, remark-mdx@^1.6.21: version "1.6.21" resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-1.6.21.tgz#0c1a7e042e50938ff89ad8dd7e8e219d4b0404ce" integrity sha512-IGb3l46a6NFi62egT+WXeTT3T8wYTunmPCEGTfDO6oRAfuss9VAb/3InVCKKGXXoiNi0mTuplI0EFusdCLGk3A== From dad078a2e472f2bfce9c1c3f18e3c65be027ec39 Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Tue, 1 Dec 2020 01:38:52 +0400 Subject: [PATCH 11/14] docs: update search ui --- website/src/components/algolia-search.tsx | 2 ++ website/src/components/omni-search.tsx | 6 ++++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/website/src/components/algolia-search.tsx b/website/src/components/algolia-search.tsx index 910cc0b54c6..d017f84af41 100644 --- a/website/src/components/algolia-search.tsx +++ b/website/src/components/algolia-search.tsx @@ -64,6 +64,8 @@ export const SearchButton = React.forwardRef(function SearchButton( color="gray.400" py="3" px="4" + outline="0" + _focus={{ shadow: "outline" }} shadow="base" rounded="md" {...props} diff --git a/website/src/components/omni-search.tsx b/website/src/components/omni-search.tsx index d82f63675b3..a1f6fd57d74 100644 --- a/website/src/components/omni-search.tsx +++ b/website/src/components/omni-search.tsx @@ -8,6 +8,7 @@ import { ModalBody, ModalContent, ModalOverlay, + useColorModeValue, useDisclosure, useEventListener, useUpdateEffect, @@ -231,6 +232,7 @@ function OmniSearch() { maxLength={64} w="100%" h="40px" + bg={useColorModeValue("white", "gray.700")} pl="40px" outline="0" id="docsearch-input" @@ -253,7 +255,7 @@ function OmniSearch() { borderTopWidth="1px" role="listbox" id="docsearch-menu" - bg="white" + bg={useColorModeValue("white", "gray.700")} > {results.map((item, index) => { const selected = index === active @@ -281,12 +283,12 @@ function OmniSearch() { }, }} key={item.id} - bg="white" fontSize="sm" px="4" py="2" display="flex" alignItems="center" + minH="60px" > {isLvl1 ? ( From 1b7debfb180b1ec56cc5576296d1c3b6ae24a4a3 Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Tue, 1 Dec 2020 02:24:55 +0400 Subject: [PATCH 12/14] chore: remove unused imports and variables --- website/pages/index.tsx | 1 - website/src/components/algolia-search.tsx | 27 ++++++----------------- 2 files changed, 7 insertions(+), 21 deletions(-) diff --git a/website/pages/index.tsx b/website/pages/index.tsx index 172a27c3ca7..d74f558bce8 100644 --- a/website/pages/index.tsx +++ b/website/pages/index.tsx @@ -26,7 +26,6 @@ import DiscordStrip from "components/discord-strip" import { Footer } from "components/footer" import Header from "components/header" import LogoMark from "components/logo-mark" -import OmniSearch from "components/omni-search" import SEO from "components/seo" import TweetCard from "components/tweet-card" import { tweets } from "configs/tweets.json" diff --git a/website/src/components/algolia-search.tsx b/website/src/components/algolia-search.tsx index d017f84af41..592be239556 100644 --- a/website/src/components/algolia-search.tsx +++ b/website/src/components/algolia-search.tsx @@ -1,8 +1,4 @@ -import * as React from "react" -import Link from "next/link" -import Head from "next/head" -import { useRouter } from "next/router" -import { DocSearchModal, useDocSearchKeyboardEvents } from "@docsearch/react" +import { SearchIcon } from "@chakra-ui/icons" import { chakra, HStack, @@ -13,12 +9,14 @@ import { useColorModeValue, VisuallyHidden, } from "@chakra-ui/react" +import { DocSearchModal, useDocSearchKeyboardEvents } from "@docsearch/react" +import { startsWith } from "lodash/fp" +import Head from "next/head" +import Link from "next/link" +import { useRouter } from "next/router" +import * as React from "react" import SearchStyle from "./search.styles" -import { get, startsWith } from "lodash/fp" -import _ from "lodash" -import { SearchIcon } from "@chakra-ui/icons" -const getLvl1 = get("hierarchy.lvl1") const startsWithCss = startsWith("css-") const ACTION_KEY_DEFAULT = ["Ctrl ", "Control"] @@ -106,7 +104,6 @@ export function Search() { const [isOpen, setIsOpen] = React.useState(false) const searchButtonRef = React.useRef() const [initialQuery, setInitialQuery] = React.useState(null) - const [actionKey, setActionKey] = React.useState() const onOpen = React.useCallback(() => { setIsOpen(true) @@ -132,16 +129,6 @@ export function Search() { searchButtonRef, }) - React.useEffect(() => { - if (typeof navigator !== "undefined") { - if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) { - setActionKey(ACTION_KEY_APPLE) - } else { - setActionKey(ACTION_KEY_DEFAULT) - } - } - }, []) - return ( <> From d966c826ee27ef10aeed04ee93683f4e97664c27 Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Tue, 1 Dec 2020 12:12:33 +0400 Subject: [PATCH 13/14] chore: prevent search button flicker --- website/src/components/algolia-search.tsx | 65 ++++++++++------------- 1 file changed, 29 insertions(+), 36 deletions(-) diff --git a/website/src/components/algolia-search.tsx b/website/src/components/algolia-search.tsx index 592be239556..3e0870364f4 100644 --- a/website/src/components/algolia-search.tsx +++ b/website/src/components/algolia-search.tsx @@ -19,7 +19,7 @@ import SearchStyle from "./search.styles" const startsWithCss = startsWith("css-") -const ACTION_KEY_DEFAULT = ["Ctrl ", "Control"] +const ACTION_KEY_DEFAULT = ["Ctrl", "Control"] const ACTION_KEY_APPLE = ["⌘", "Command"] function Hit(props) { @@ -35,15 +35,12 @@ export const SearchButton = React.forwardRef(function SearchButton( props: HTMLChakraProps<"button">, ref: React.Ref, ) { - const [actionKey, setActionKey] = React.useState() - + const [actionKey, setActionKey] = React.useState(ACTION_KEY_APPLE) React.useEffect(() => { - if (typeof navigator !== "undefined") { - if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) { - setActionKey(ACTION_KEY_APPLE) - } else { - setActionKey(ACTION_KEY_DEFAULT) - } + if (typeof navigator === "undefined") return + const isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) + if (!isMac) { + setActionKey(ACTION_KEY_DEFAULT) } }, []) @@ -68,33 +65,29 @@ export const SearchButton = React.forwardRef(function SearchButton( rounded="md" {...props} > - {actionKey && ( - <> - - - - Search the docs - - - Press - - - {actionKey[0]} - - - and - - K - - to search - - - - )} + + + + Search the docs + + + Press + + + {ACTION_KEY_APPLE[0]} + + + and + + K + + to search + + ) }) From a89061ea2f815cc328168ec1dd4c717ab10eb101 Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Tue, 1 Dec 2020 13:42:20 +0400 Subject: [PATCH 14/14] docs: change sidebar data to json --- website/configs/docs-sidebar.json | 395 +++++++++++++++++++++++++++ website/configs/docs-sidebar.ts | 397 ---------------------------- website/configs/guides-sidebar.json | 45 ++++ website/configs/guides-sidebar.ts | 47 ---- website/layouts/mdx.tsx | 4 +- 5 files changed, 442 insertions(+), 446 deletions(-) create mode 100644 website/configs/docs-sidebar.json delete mode 100644 website/configs/docs-sidebar.ts create mode 100644 website/configs/guides-sidebar.json delete mode 100644 website/configs/guides-sidebar.ts diff --git a/website/configs/docs-sidebar.json b/website/configs/docs-sidebar.json new file mode 100644 index 00000000000..14570fe6372 --- /dev/null +++ b/website/configs/docs-sidebar.json @@ -0,0 +1,395 @@ +{ + "routes": [ + { + "title": "Getting Started", + "heading": true, + "routes": [ + { + "title": "Installation", + "path": "/docs/getting-started" + }, + { + "title": "Upgrade to v1", + "path": "/docs/migration" + }, + { + "title": "Design Principles", + "path": "/docs/principles" + }, + { + "title": "Comparison", + "path": "/docs/comparison" + }, + { + "title": "Features", + "path": "/docs/features", + "open": true, + "routes": [ + { + "title": "Style Props", + "path": "/docs/features/style-props" + }, + { + "title": "Color Mode", + "path": "/docs/features/color-mode" + }, + { + "title": "Responsive Styles", + "path": "/docs/features/responsive-styles" + }, + { + "title": "Chakra Factory", + "path": "/docs/features/chakra-factory" + }, + { + "title": "Global Styles", + "path": "/docs/features/global-styles" + }, + { + "title": "Text & Layer Styles", + "path": "/docs/features/text-and-layer-styles" + } + ] + }, + + { + "title": "Theming", + "path": "/docs/theming", + "open": true, + "routes": [ + { + "title": "Default Theme", + "path": "/docs/theming/theme" + }, + { + "title": "Customize Theme", + "path": "/docs/theming/customize-theme" + }, + { + "title": "Component Style", + "path": "/docs/theming/component-style" + }, + { + "title": "Advanced", + "path": "/docs/theming/advanced" + } + ] + }, + { + "title": "Layout", + "path": "/docs/layout", + "open": true, + "routes": [ + { + "title": "Aspect Ratio", + "path": "/docs/layout/aspect-ratio" + }, + { + "title": "Box", + "path": "/docs/layout/box" + }, + { + "title": "Center", + "path": "/docs/layout/center" + }, + { + "title": "Container", + "path": "/docs/layout/container" + }, + { + "title": "Flex", + "path": "/docs/layout/flex" + }, + { + "title": "Grid", + "path": "/docs/layout/grid" + }, + { + "title": "SimpleGrid", + "path": "/docs/layout/simple-grid" + }, + { + "title": "Stack", + "path": "/docs/layout/stack" + }, + { + "title": "Wrap", + "path": "/docs/layout/wrap" + }, + { + "title": "Link", + "path": "/docs/components/link" + } + ] + }, + { + "title": "Forms", + "path": "/docs/form", + "open": true, + "routes": [ + { + "title": "Button", + "path": "/docs/form/button" + }, + { + "title": "Checkbox", + "path": "/docs/form/checkbox" + }, + { + "title": "Editable", + "path": "/docs/form/editable" + }, + { + "title": "Form Control", + "path": "/docs/form/form-control" + }, + { + "title": "Icon Button", + "path": "/docs/form/icon-button" + }, + { + "title": "Input", + "path": "/docs/form/input" + }, + { + "title": "Number Input", + "path": "/docs/form/number-input" + }, + { + "title": "Pin Input", + "path": "/docs/form/pin-input" + }, + { + "title": "Radio", + "path": "/docs/form/radio" + }, + { + "title": "Select", + "path": "/docs/form/select" + }, + { + "title": "Slider", + "path": "/docs/form/slider" + }, + { + "title": "Switch", + "path": "/docs/form/switch" + }, + { + "title": "Textarea", + "path": "/docs/form/textarea" + } + ] + }, + { + "title": "Data Display", + "path": "/docs/data-display", + "open": true, + "routes": [ + { + "title": "Badge", + "path": "/docs/data-display/badge" + }, + { + "title": "Code", + "path": "/docs/data-display/code" + }, + { + "title": "Divider", + "path": "/docs/data-display/divider" + }, + { + "title": "Kbd", + "path": "/docs/data-display/kbd" + }, + { + "title": "List", + "path": "/docs/data-display/list" + }, + { + "title": "Stat", + "path": "/docs/data-display/stat" + }, + { + "title": "Tag", + "path": "/docs/data-display/tag" + }, + { + "title": "Close Button", + "path": "/docs/components/close-button" + } + ] + }, + { + "title": "Feedback", + "path": "/docs/feedback", + "open": true, + "routes": [ + { + "title": "Alert", + "path": "/docs/feedback/alert" + }, + { + "title": "Circular Progress", + "path": "/docs/feedback/circular-progress" + }, + { + "title": "Progress", + "path": "/docs/feedback/progress" + }, + { + "title": "Skeleton", + "path": "/docs/feedback/skeleton" + }, + { + "title": "Spinner", + "path": "/docs/feedback/spinner" + }, + { + "title": "Toast", + "path": "/docs/feedback/toast" + } + ] + }, + { + "title": "Typography", + "path": "/docs/typography", + "open": true, + "routes": [ + { + "title": "Text", + "path": "/docs/typography/text" + }, + { + "title": "Heading", + "path": "/docs/typography/heading" + } + ] + }, + { + "title": "Overlay", + "path": "/docs/overlay", + "open": true, + "routes": [ + { + "title": "Alert Dialog", + "path": "/docs/overlay/alert-dialog" + }, + { + "title": "Drawer", + "path": "/docs/overlay/drawer" + }, + { + "title": "Menu", + "path": "/docs/overlay/menu" + }, + { + "title": "Modal", + "path": "/docs/overlay/modal" + }, + { + "title": "Popover", + "path": "/docs/overlay/popover" + }, + { + "title": "Tooltip", + "path": "/docs/overlay/tooltip" + } + ] + }, + { + "title": "Disclosure", + "path": "/docs/components", + "open": true, + "routes": [ + { + "title": "Accordion", + "path": "/docs/components/accordion" + }, + { + "title": "Breadcrumb", + "path": "/docs/components/breadcrumb" + }, + { + "title": "Tabs", + "path": "/docs/components/tabs" + }, + { + "title": "Visually Hidden", + "path": "/docs/components/visually-hidden" + } + ] + }, + { + "title": "Media & Icons", + "path": "/docs/components", + "open": true, + "routes": [ + { + "title": "Avatar", + "path": "/docs/data-display/avatar" + }, + { + "title": "Icon", + "path": "/docs/components/icon" + }, + { + "title": "Image", + "path": "/docs/data-display/image" + } + ] + }, + { + "title": "Others", + "path": "/docs/components", + "open": true, + "routes": [ + { + "title": "Transitions", + "path": "/docs/components/transitions" + } + ] + }, + { + "title": "Hooks", + "path": "/docs/hooks", + "open": true, + "routes": [ + { + "title": "useBreakpointValue", + "path": "/docs/hooks/use-breakpoint-value" + }, + { + "title": "useClipboard", + "path": "/docs/hooks/use-clipboard" + }, + { + "title": "useControllable", + "path": "/docs/hooks/use-controllable" + }, + { + "title": "useDisclosure", + "path": "/docs/hooks/use-disclosure" + }, + { + "title": "useMediaQuery", + "path": "/docs/hooks/use-media-query" + }, + { + "title": "useTheme", + "path": "/docs/hooks/use-theme" + }, + { + "title": "useToken", + "path": "/docs/hooks/use-token" + }, + { + "title": "usePrefersReducedMotion", + "path": "/docs/hooks/use-prefers-reduced-motion" + } + ] + } + ] + } + ] +} diff --git a/website/configs/docs-sidebar.ts b/website/configs/docs-sidebar.ts deleted file mode 100644 index bc6bb77c3a1..00000000000 --- a/website/configs/docs-sidebar.ts +++ /dev/null @@ -1,397 +0,0 @@ -const sidebar = { - routes: [ - { - title: "Getting Started", - heading: true, - routes: [ - { - title: "Installation", - path: "/docs/getting-started", - }, - { - title: "Upgrade to v1", - path: "/docs/migration", - }, - { - title: "Design Principles", - path: "/docs/principles", - }, - // { - // title: "Comparison", - // path: "/docs/comparison", - // }, - { - title: "Features", - path: "/docs/features", - open: true, - routes: [ - { - title: "Style Props", - path: "/docs/features/style-props", - }, - { - title: "Color Mode", - path: "/docs/features/color-mode", - }, - { - title: "Responsive Styles", - path: "/docs/features/responsive-styles", - }, - { - title: "Chakra Factory", - path: "/docs/features/chakra-factory", - }, - { - title: "Global Styles", - path: "/docs/features/global-styles", - }, - { - title: "Text & Layer Styles", - path: "/docs/features/text-and-layer-styles", - }, - ], - }, - - { - title: "Theming", - path: "/docs/theming", - open: true, - routes: [ - { - title: "Default Theme", - path: "/docs/theming/theme", - }, - { - title: "Customize Theme", - path: "/docs/theming/customize-theme", - }, - { - title: "Component Style", - path: "/docs/theming/component-style", - }, - { - title: "Advanced", - path: "/docs/theming/advanced", - }, - ], - }, - { - title: "Layout", - path: "/docs/layout", - open: true, - routes: [ - { - title: "Aspect Ratio", - path: "/docs/layout/aspect-ratio", - }, - { - title: "Box", - path: "/docs/layout/box", - }, - { - title: "Center", - path: "/docs/layout/center", - }, - { - title: "Container", - path: "/docs/layout/container", - }, - { - title: "Flex", - path: "/docs/layout/flex", - }, - { - title: "Grid", - path: "/docs/layout/grid", - }, - { - title: "SimpleGrid", - path: "/docs/layout/simple-grid", - }, - { - title: "Stack", - path: "/docs/layout/stack", - }, - { - title: "Wrap", - path: "/docs/layout/wrap", - }, - { - title: "Link", - path: "/docs/components/link", - }, - ], - }, - { - title: "Forms", - path: "/docs/form", - open: true, - routes: [ - { - title: "Button", - path: "/docs/form/button", - }, - { - title: "Checkbox", - path: "/docs/form/checkbox", - }, - { - title: "Editable", - path: "/docs/form/editable", - }, - { - title: "Form Control", - path: "/docs/form/form-control", - }, - { - title: "Icon Button", - path: "/docs/form/icon-button", - }, - { - title: "Input", - path: "/docs/form/input", - }, - { - title: "Number Input", - path: "/docs/form/number-input", - }, - { - title: "Pin Input ", - path: "/docs/form/pin-input", - }, - { - title: "Radio", - path: "/docs/form/radio", - }, - { - title: "Select", - path: "/docs/form/select", - }, - { - title: "Slider", - path: "/docs/form/slider", - }, - { - title: "Switch", - path: "/docs/form/switch", - }, - { - title: "Textarea", - path: "/docs/form/textarea", - }, - ], - }, - { - title: "Data Display", - path: "/docs/data-display", - open: true, - routes: [ - { - title: "Badge", - path: "/docs/data-display/badge", - }, - { - title: "Code", - path: "/docs/data-display/code", - }, - { - title: "Divider", - path: "/docs/data-display/divider", - }, - { - title: "Kbd", - path: "/docs/data-display/kbd", - }, - { - title: "List", - path: "/docs/data-display/list", - }, - { - title: "Stat", - path: "/docs/data-display/stat", - }, - { - title: "Tag", - path: "/docs/data-display/tag", - }, - { - title: "Close Button", - path: "/docs/components/close-button", - }, - ], - }, - { - title: "Feedback", - path: "/docs/feedback", - open: true, - routes: [ - { - title: "Alert", - path: "/docs/feedback/alert", - }, - { - title: "Circular Progress", - path: "/docs/feedback/circular-progress", - }, - { - title: "Progress", - path: "/docs/feedback/progress", - }, - { - title: "Skeleton", - path: "/docs/feedback/skeleton", - }, - { - title: "Spinner", - path: "/docs/feedback/spinner", - }, - { - title: "Toast", - path: "/docs/feedback/toast", - }, - ], - }, - { - title: "Typography", - path: "/docs/typography", - open: true, - routes: [ - { - title: "Text", - path: "/docs/typography/text", - }, - { - title: "Heading", - path: "/docs/typography/heading", - }, - ], - }, - { - title: "Overlay", - path: "/docs/overlay", - open: true, - routes: [ - { - title: "Alert Dialog", - path: "/docs/overlay/alert-dialog", - }, - { - title: "Drawer", - path: "/docs/overlay/drawer", - }, - { - title: "Menu", - path: "/docs/overlay/menu", - }, - { - title: "Modal", - path: "/docs/overlay/modal", - }, - { - title: "Popover", - path: "/docs/overlay/popover", - }, - { - title: "Tooltip", - path: "/docs/overlay/tooltip", - }, - ], - }, - { - title: "Disclosure", - path: "/docs/components", - open: true, - routes: [ - { - title: "Accordion", - path: "/docs/components/accordion", - }, - { - title: "Breadcrumb", - path: "/docs/components/breadcrumb", - }, - { - title: "Tabs", - path: "/docs/components/tabs", - }, - { - title: "Visually Hidden", - path: "/docs/components/visually-hidden", - }, - ], - }, - { - title: "Media & Icons", - path: "/docs/components", - open: true, - routes: [ - { - title: "Avatar", - path: "/docs/data-display/avatar", - }, - { - title: "Icon", - path: "/docs/components/icon", - }, - { - title: "Image", - path: "/docs/data-display/image", - }, - ], - }, - { - title: "Others", - path: "/docs/components", - open: true, - routes: [ - { - title: "Transitions", - path: "/docs/components/transitions", - }, - ], - }, - { - title: "Hooks", - path: "/docs/hooks", - open: true, - routes: [ - { - title: "useBreakpointValue", - path: "/docs/hooks/use-breakpoint-value", - }, - { - title: "useClipboard", - path: "/docs/hooks/use-clipboard", - }, - { - title: "useControllable", - path: "/docs/hooks/use-controllable", - }, - { - title: "useDisclosure", - path: "/docs/hooks/use-disclosure", - }, - { - title: "useMediaQuery", - path: "/docs/hooks/use-media-query", - }, - { - title: "useTheme", - path: "/docs/hooks/use-theme", - }, - { - title: "useToken", - path: "/docs/hooks/use-token", - }, - { - title: "usePrefersReducedMotion", - path: "/docs/hooks/use-prefers-reduced-motion", - }, - ], - }, - ], - }, - ], -} - -export default sidebar diff --git a/website/configs/guides-sidebar.json b/website/configs/guides-sidebar.json new file mode 100644 index 00000000000..749d7735e4f --- /dev/null +++ b/website/configs/guides-sidebar.json @@ -0,0 +1,45 @@ +{ + "routes": [ + { + "title": "Guides", + "heading": true, + "routes": [ + { + "title": "How to Create a guide", + "path": "/guides/how-to-create-a-guide" + }, + { + "title": "Component guide", + "path": "/guides/component-guide" + }, + { + "title": "Portals and z-Index", + "path": "/guides/z-index" + }, + { + "title": "The as prop", + "path": "/guides/as-prop" + }, + { + "title": "Integrations", + "path": "/guides/integrations", + "open": true, + "routes": [ + { + "title": "Create React App", + "path": "/guides/integrations/with-cra" + }, + { + "title": "Framer Motion", + "path": "/guides/integrations/with-framer" + }, + { + "title": "React Hook Form", + "path": "/guides/integrations/with-hook-form" + } + ] + } + ] + } + ] +} diff --git a/website/configs/guides-sidebar.ts b/website/configs/guides-sidebar.ts deleted file mode 100644 index b3a53309853..00000000000 --- a/website/configs/guides-sidebar.ts +++ /dev/null @@ -1,47 +0,0 @@ -const sidebar = { - routes: [ - { - title: "Guides", - heading: true, - routes: [ - { - title: "How to Create a guide", - path: "/guides/how-to-create-a-guide", - }, - { - title: "Component guide", - path: "/guides/component-guide", - }, - { - title: "Portals and z-Index", - path: "/guides/z-index", - }, - { - title: "The as prop", - path: "/guides/as-prop", - }, - { - title: "Integrations", - path: "/guides/integrations", - open: true, - routes: [ - { - title: "Create React App", - path: "/guides/integrations/with-cra", - }, - { - title: "Framer Motion", - path: "/guides/integrations/with-framer", - }, - { - title: "React Hook Form", - path: "/guides/integrations/with-hook-form", - }, - ], - }, - ], - }, - ], -} - -export default sidebar diff --git a/website/layouts/mdx.tsx b/website/layouts/mdx.tsx index 26a22496bde..b001647be41 100644 --- a/website/layouts/mdx.tsx +++ b/website/layouts/mdx.tsx @@ -4,8 +4,8 @@ import MDXComponents from "components/mdx-components" import PageContainer from "components/page-container" import Pagination from "components/pagination" import Sidebar from "components/sidebar/sidebar" -import docsSidebar from "configs/docs-sidebar" -import guidesSidebar from "configs/guides-sidebar" +import docsSidebar from "configs/docs-sidebar.json" +import guidesSidebar from "configs/guides-sidebar.json" import * as React from "react" import { findRouteByPath, removeFromLast } from "utils/find-route-by-path" import { getRouteContext } from "utils/get-route-context"