diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index f85fd36f2e..61d86c9f04 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -1,5 +1,15 @@
# docs
+## 10.7.7
+
+### Patch Changes
+
+- Deploy 10.7.7
+- Updated dependencies
+ - @heathmont/moon-cmdk-tw@10.7.7
+ - @heathmont/moon-core-tw@10.7.7
+ - @heathmont/moon-base-tw@10.7.7
+
## 10.7.6
### Patch Changes
diff --git a/docs/app/components/client/accordion/description.md b/docs/app/components/client/accordion/description.md
new file mode 100644
index 0000000000..2a5be6b03e
--- /dev/null
+++ b/docs/app/components/client/accordion/description.md
@@ -0,0 +1,3 @@
+An accordion is a vertical stack of interactive headings used to toggle the display of further information; each item can be 'collapsed' with just a short label visible or 'expanded' to show the full content.
+
+Based on [Radix UI](https://www.radix-ui.com/).
diff --git a/docs/app/components/client/accordion/examples/Default.tsx b/docs/app/components/client/accordion/examples/Default.tsx
new file mode 100644
index 0000000000..6189b96d57
--- /dev/null
+++ b/docs/app/components/client/accordion/examples/Default.tsx
@@ -0,0 +1,44 @@
+'use client'
+
+import React from 'react';
+import Accordion from '@heathmont/moon-core-tw/lib/es/accordion/Accordion';
+import { ControlsChevronDownSmall } from '@heathmont/moon-icons-tw';
+
+export const Default = () => (
+
+
+
+
+ Default
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+ veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+ commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+ velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+ occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+ mollit anim id est laborum.
+
+
+
+
+
+ Test accordion
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+ veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+ commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+ velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+ occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+ mollit anim id est laborum.
+
+
+
+);
diff --git a/docs/app/components/client/accordion/page.tsx b/docs/app/components/client/accordion/page.tsx
new file mode 100644
index 0000000000..9ea40789e9
--- /dev/null
+++ b/docs/app/components/client/accordion/page.tsx
@@ -0,0 +1,22 @@
+import { Default } from "./examples/Default";
+import { getExamples } from "@/app/utils/getExamples";
+import { MDX } from "@/components/MDX";
+
+export default async function Home() {
+ const { client } = await getExamples()
+ return (
+
+
Accordion
+
+
+
+
+
Default
+
+
+
+
{client.accordion.examples.Default}
+
+
+ )
+}
diff --git a/docs/app/components/client/button/description.md b/docs/app/components/client/button/description.md
new file mode 100644
index 0000000000..4608b1b7c3
--- /dev/null
+++ b/docs/app/components/client/button/description.md
@@ -0,0 +1,8 @@
+Buttons allow users to take actions and make choices with a single tap.
+
+Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:
+
+- Modal windows
+- Forms
+- Cards
+- Toolbars
diff --git a/docs/app/components/client/button/examples/Default.tsx b/docs/app/components/client/button/examples/Default.tsx
new file mode 100644
index 0000000000..de99552b81
--- /dev/null
+++ b/docs/app/components/client/button/examples/Default.tsx
@@ -0,0 +1,5 @@
+'use client'
+
+import Button from '@heathmont/moon-core-tw/lib/es/button/Button';
+
+export const Default = () => Default ;
diff --git a/docs/app/components/client/button/page.tsx b/docs/app/components/client/button/page.tsx
new file mode 100644
index 0000000000..2069342cd6
--- /dev/null
+++ b/docs/app/components/client/button/page.tsx
@@ -0,0 +1,22 @@
+import { Default } from "@/app/components/client/button/examples/Default";
+import { getExamples } from "@/app/utils/getExamples";
+import { MDX } from "@/components/MDX";
+
+export default async function Home() {
+ const { client } = await getExamples()
+ return (
+
+
Button
+
+
+
+
+
Default
+
+
+
+
{client.button.examples.Default}
+
+
+ )
+}
diff --git a/docs/app/components/server/avatar/description.md b/docs/app/components/server/avatar/description.md
new file mode 100644
index 0000000000..347d36893e
--- /dev/null
+++ b/docs/app/components/server/avatar/description.md
@@ -0,0 +1 @@
+The Avatar component is typically used to display images, icons, or initials representing people or other entities.
diff --git a/docs/app/components/avatar/examples/Active.tsx b/docs/app/components/server/avatar/examples/Active.tsx
similarity index 100%
rename from docs/app/components/avatar/examples/Active.tsx
rename to docs/app/components/server/avatar/examples/Active.tsx
diff --git a/docs/app/components/avatar/examples/Default.tsx b/docs/app/components/server/avatar/examples/Default.tsx
similarity index 100%
rename from docs/app/components/avatar/examples/Default.tsx
rename to docs/app/components/server/avatar/examples/Default.tsx
diff --git a/docs/app/components/avatar/page.tsx b/docs/app/components/server/avatar/page.tsx
similarity index 51%
rename from docs/app/components/avatar/page.tsx
rename to docs/app/components/server/avatar/page.tsx
index 74c9ca8e45..9cc2938a33 100644
--- a/docs/app/components/avatar/page.tsx
+++ b/docs/app/components/server/avatar/page.tsx
@@ -1,22 +1,24 @@
-import { Active } from "@/app/components/avatar/examples/Active";
-import { Default } from "@/app/components/avatar/examples/Default";
-import { getSourceCode } from "@/app/utils/getSourceCode";
+import { Active } from "@/app/components/server/avatar/examples/Active";
+import { Default } from "@/app/components/server/avatar/examples/Default";
+import { getExamples } from "@/app/utils/getExamples";
+import { MDX } from "@/components/MDX";
+
export default async function Home() {
- // TODO too much boilerplate code
- const defaultCode = await getSourceCode('./app/components/avatar/examples/Default.tsx');
- const activeCode = await getSourceCode('./app/components/avatar/examples/Active.tsx');
+ const { server } = await getExamples();
return (
Avatar
+
+
Default
-
{defaultCode}
+
{server.avatar.examples.Default}
@@ -24,7 +26,7 @@ export default async function Home() {
-
{activeCode}
+
{server.avatar.examples.Active}
)
diff --git a/docs/app/components/server/tag/description.md b/docs/app/components/server/tag/description.md
new file mode 100644
index 0000000000..f800b50c1b
--- /dev/null
+++ b/docs/app/components/server/tag/description.md
@@ -0,0 +1,3 @@
+Tags represent a set of interactive keywords that help organize and categorize objects.
+
+Tags can be added or removed from an object.
diff --git a/docs/app/components/tag/examples/Default.tsx b/docs/app/components/server/tag/examples/Default.tsx
similarity index 100%
rename from docs/app/components/tag/examples/Default.tsx
rename to docs/app/components/server/tag/examples/Default.tsx
diff --git a/docs/app/components/tag/page.tsx b/docs/app/components/server/tag/page.tsx
similarity index 51%
rename from docs/app/components/tag/page.tsx
rename to docs/app/components/server/tag/page.tsx
index 636fb6587b..0606c03229 100644
--- a/docs/app/components/tag/page.tsx
+++ b/docs/app/components/server/tag/page.tsx
@@ -1,19 +1,22 @@
-import { Default } from "@/app/components/tag/examples/Default";
-import { getSourceCode } from "@/app/utils/getSourceCode";
+import { Default } from "@/app/components/server/tag/examples/Default";
+import { getExamples } from "@/app/utils/getExamples";
+import { MDX } from "@/components/MDX";
export default async function Home() {
- const defaultCode = await getSourceCode('./app/components/tag/examples/Default.tsx');
+ const { server } = await getExamples();
return (
Tag
+
+
Default
-
{defaultCode}
+
{server.tag.examples.Default}
)
diff --git a/docs/app/components/types.ts b/docs/app/components/types.ts
new file mode 100644
index 0000000000..59344a3c58
--- /dev/null
+++ b/docs/app/components/types.ts
@@ -0,0 +1,31 @@
+export interface Examples {
+ "client": {
+ "accordion": {
+ "description": "string",
+ "examples": {
+ "Default": "string"
+ }
+ },
+ "button": {
+ "description": "string",
+ "examples": {
+ "Default": "string"
+ }
+ }
+ },
+ "server": {
+ "avatar": {
+ "description": "string",
+ "examples": {
+ "Active": "string",
+ "Default": "string"
+ }
+ },
+ "tag": {
+ "description": "string",
+ "examples": {
+ "Default": "string"
+ }
+ }
+ }
+};
diff --git a/docs/app/page.tsx b/docs/app/page.tsx
index 4e9ad59c2d..62b0fa044f 100644
--- a/docs/app/page.tsx
+++ b/docs/app/page.tsx
@@ -1,7 +1,23 @@
-export default function Home() {
+import { getExamples } from "./utils/getExamples";
+import { MDX } from "@/components/MDX";
+import { CommandMenu } from "@/components/Search";
+
+export default async function Home() {
+ const examples = await getExamples();
+
+ const items = [
+ { label: "Aurum" },
+ { label: "Argentum" },
+ { label: "Zink" },
+ { label: "Plumbum" },
+ { label: "Test" }
+ ];
+
return (
Moon Design System
+
+
)
}
diff --git a/docs/app/utils/buildExamplesType.ts b/docs/app/utils/buildExamplesType.ts
new file mode 100644
index 0000000000..4f1d6ef98d
--- /dev/null
+++ b/docs/app/utils/buildExamplesType.ts
@@ -0,0 +1,116 @@
+import { promises as fs } from 'fs';
+import path from 'path';
+
+export async function writeToFile({
+ contentToWrite,
+ path,
+}: {
+ contentToWrite: string,
+ path: string
+}) {
+ if (!contentToWrite) {
+ throw new Error('Content for writeToFile function must be provided.');
+ }
+ if (!path) {
+ throw new Error('Path for writeToFile function must be provided.');
+ }
+
+ try {
+ await fs.writeFile(path, contentToWrite, 'utf8');
+ console.log(`${path} file has been written successfully.`);
+ } catch (err) {
+ if (err instanceof Error) {
+ console.error('Error writing to file:', err.message);
+ throw err;
+ }
+ }
+}
+
+export async function hasSubfolders(_path: string) {
+ try {
+ const files = await fs.readdir(_path, { withFileTypes: true });
+
+ for (const file of files) {
+ if (file.isDirectory()) {
+ // There is at least one subdirectory
+ return true;
+ }
+ }
+ // No subdirectories found
+ return false;
+ } catch (err) {
+ if (err instanceof Error) {
+ console.error('Error checking folders:', err.message);
+ throw err;
+ }
+ }
+}
+
+type FilesTypes = Record;
+
+export async function processFiles(
+ dirPath: string,
+ processCallback: (filePath: string) => Promise
+) {
+ const files = await fs.readdir(dirPath);
+ const result: Record | string[] | string> = {};
+
+ for (const file of files) {
+ const filePath = path.join(dirPath, file);
+ const stats = await fs.stat(filePath);
+
+ if (stats.isDirectory()) {
+ const _hasSubfolders = await hasSubfolders(filePath);
+ if (_hasSubfolders) {
+ result[file] = await processFiles(filePath, processCallback);
+ } else {
+ result[file] = await processCallback(filePath);
+ }
+ }
+ if (stats.isFile()) {
+ const extname = path.extname(filePath).toLowerCase();
+ const fileName = path.basename(filePath);
+ const fileNameWithoutExtension = path.parse(fileName).name
+
+ if (extname === '.md') {
+ result[fileNameWithoutExtension] = 'string';
+ }
+ }
+ }
+
+ return result;
+}
+
+export const getTemplate = (content: string) => {
+ return `export interface Examples ${content};
+`
+}
+
+const getFilesTypes = async (dirPath: string) => {
+ const files = await fs.readdir(dirPath);
+ const result: FilesTypes = {};
+
+ for (const file of files) {
+ const filePath = path.join(dirPath, file);
+ const fileName = path.basename(filePath);
+ const fileNameWithoutExtension = path.parse(fileName).name
+ result[fileNameWithoutExtension] = 'string';
+ }
+ return result;
+}
+
+
+export const buildExamplesType = async () => {
+ const components = (
+ await processFiles('./app/components/', getFilesTypes)
+ );
+
+ await writeToFile({
+ contentToWrite: getTemplate(JSON.stringify(components, null, 2)),
+ path: './app/components/types.ts'
+ });
+
+ return components;
+}
+
+buildExamplesType();
diff --git a/docs/app/utils/getExamples.ts b/docs/app/utils/getExamples.ts
new file mode 100644
index 0000000000..6f39275c00
--- /dev/null
+++ b/docs/app/utils/getExamples.ts
@@ -0,0 +1,94 @@
+import { promises as fs } from 'fs';
+import path from 'path';
+import { Examples } from '../components/types';
+
+export async function hasSubfolders(_path: string) {
+ try {
+ const files = await fs.readdir(_path, { withFileTypes: true });
+
+ for (const file of files) {
+ if (file.isDirectory()) {
+ // There is at least one subdirectory
+ return true;
+ }
+ }
+ // No subdirectories found
+ return false;
+ } catch (err) {
+ if (err instanceof Error) {
+ console.error('Error checking folders:', err.message);
+ throw err;
+ }
+ }
+}
+
+type FilesContent = Record;
+
+export async function processFiles(
+ dirPath: string,
+ processCallback: (filePath: string) => Promise
+) {
+ const files = await fs.readdir(dirPath);
+ const result: Record | string[] > | FilesContent = {};
+
+ for (const file of files) {
+ const filePath = path.join(dirPath, file);
+ const stats = await fs.stat(filePath);
+
+ if (stats.isDirectory()) {
+ const _hasSubfolders = await hasSubfolders(filePath);
+ if (_hasSubfolders) {
+ result[file] = await processFiles(filePath, processCallback);
+ } else {
+ result[file] = await processCallback(filePath);
+ }
+ }
+
+ if (stats.isFile()) {
+ const extname = path.extname(filePath).toLowerCase();
+ const fileName = path.basename(filePath);
+ const fileNameWithoutExtension = path.parse(fileName).name
+
+ if (extname === '.md') {
+ const content = await readFromFile(filePath);
+ result[fileNameWithoutExtension] = content;
+ }
+ }
+ }
+
+ return result;
+}
+
+const getFilesContent = async (dirPath: string) => {
+ const files = await fs.readdir(dirPath);
+ const result: FilesContent = {};
+
+ for (const file of files) {
+ const filePath = path.join(dirPath, file);
+ const fileName = path.basename(filePath);
+ const fileNameWithoutExtension = path.parse(fileName).name
+ const content = await readFromFile(filePath);
+ result[fileNameWithoutExtension] = content;
+ }
+ return result;
+}
+
+export async function readFromFile(pathToFile: string) {
+ try {
+ const data = await fs.readFile(pathToFile, 'utf8');
+ return data;
+ } catch (err) {
+ if (err instanceof Error) {
+ console.error(`Error reading from file ${pathToFile}:`, err.message);
+ throw err;
+ }
+ }
+}
+
+export async function getExamples() {
+ const components = (
+ await processFiles('./app/components/', getFilesContent)
+ ) as unknown as Examples;
+
+ return components;
+}
diff --git a/docs/app/utils/getSourceCode.ts b/docs/app/utils/getSourceCode.ts
deleted file mode 100644
index 5581cf9d07..0000000000
--- a/docs/app/utils/getSourceCode.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-
-function readFromFile(pathToFile: string) {
- return new Promise((resolve, reject) => {
- fs.readFile(pathToFile, 'utf8', (err, data) => {
- if (err) {
- console.error(err);
- reject(err);
- } else {
- resolve(data);
- }
- });
- });
-}
-
-export async function getSourceCode(_path: string) {
- const dirPath = path.resolve(
- _path
- );
-
- const res = await readFromFile(dirPath)
-
- if (!res) {
- // This will activate the closest `error.js` Error Boundary
- throw new Error('Failed to fetch data')
- }
-
- return res.toString();
-}
\ No newline at end of file
diff --git a/docs/components/MDX.tsx b/docs/components/MDX.tsx
new file mode 100644
index 0000000000..95319aebb9
--- /dev/null
+++ b/docs/components/MDX.tsx
@@ -0,0 +1,11 @@
+import { MDXRemote } from 'next-mdx-remote/rsc'
+
+export function MDX({ markdown }: { markdown: string }) {
+ /*
+ An error is triggered by `next-mdx-remote/rsc`:
+ "'MDXRemote' cannot be used as a JSX component."
+ https://github.com/hashicorp/next-mdx-remote/issues/366
+ */
+ return
+}
+
diff --git a/docs/components/Search.tsx b/docs/components/Search.tsx
new file mode 100644
index 0000000000..9f1112cf5e
--- /dev/null
+++ b/docs/components/Search.tsx
@@ -0,0 +1,82 @@
+'use client'
+
+import React, { useEffect, useState } from "react";
+import SearchCmdk from '@heathmont/moon-cmdk-tw/lib/es/searchCmdk/SearchCmdk';
+
+type Item = {
+ label: string
+}
+
+export function CommandMenu({ items }: { items: Item[] }) {
+ const [open, setOpen] = useState(false);
+ const [search, setSearch] = useState("");
+
+ useEffect(() => {
+ const down = (e: KeyboardEvent) => {
+ // Toggle the menu when ⌘K is pressed
+ if (e.key === "k" && e.metaKey) {
+ e.preventDefault();
+ setOpen((open) => !open);
+ }
+ };
+
+ document.addEventListener("keydown", down);
+ return () => document.removeEventListener("keydown", down);
+ }, []);
+
+ const filterItems = (values: Item[], search: string) => {
+ return values.filter(({ label }) => +label.toLowerCase().includes(search));
+ }
+ const filteredItems = filterItems(items, search.toLowerCase());
+
+ return (
+ <>
+ { setOpen(true) }}>
+
+ Search...
+ ⌘K
+
+
+ {open && }
+
+
+
+
+
+ setOpen(false)}>
+ Esc
+
+
+
+
+
+ No Results
+
+ {filteredItems.map(({ label }) =>
+ {
+ setOpen(false);
+ }}
+ >
+ {label}
+
+ )}
+
+
+ >
+ );
+}
+
+
diff --git a/docs/next.config.js b/docs/next.config.cjs
similarity index 100%
rename from docs/next.config.js
rename to docs/next.config.cjs
diff --git a/docs/package.json b/docs/package.json
index bbfd77e370..7b059e740b 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,16 +1,19 @@
{
"name": "docs",
- "version": "10.7.6",
+ "version": "10.7.7",
"private": true,
+ "type": "module",
"scripts": {
"dev": "next dev",
- "build": "next build",
+ "build:types": "npx ts-node --esm app/utils/buildExamplesType.ts",
+ "build": "pnpm run build:types && next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
- "@heathmont/moon-base-tw": "workspace:^10.7.6",
- "@heathmont/moon-core-tw": "workspace:^10.7.6",
+ "@heathmont/moon-base-tw": "workspace:^10.7.7",
+ "@heathmont/moon-cmdk-tw": "workspace:^10.7.7",
+ "@heathmont/moon-core-tw": "workspace:^10.7.7",
"@heathmont/moon-icons-tw": "9.28.4",
"@types/node": "20.4.9",
"@types/react": "18.2.19",
@@ -19,10 +22,12 @@
"eslint": "8.46.0",
"eslint-config-next": "13.4.13",
"next": "13.4.13",
+ "next-mdx-remote": "^4.4.1",
"postcss": "8.4.27",
"react": "18.2.0",
"react-dom": "18.2.0",
"tailwindcss": "3.3.3",
+ "ts-node": "^10.9.1",
"typescript": "5.1.6"
}
}
diff --git a/docs/postcss.config.js b/docs/postcss.config.cjs
similarity index 100%
rename from docs/postcss.config.js
rename to docs/postcss.config.cjs
diff --git a/docs/tailwind.config.js b/docs/tailwind.config.cjs
similarity index 100%
rename from docs/tailwind.config.js
rename to docs/tailwind.config.cjs
diff --git a/next-docs/CHANGELOG.md b/next-docs/CHANGELOG.md
index 5a05ff3aea..ed107c7372 100644
--- a/next-docs/CHANGELOG.md
+++ b/next-docs/CHANGELOG.md
@@ -1,5 +1,16 @@
# Change Log
+## 10.7.7
+
+### Patch Changes
+
+- Deploy 10.7.7
+- Updated dependencies
+ - @heathmont/moon-table-tw@10.7.7
+ - @heathmont/moon-themes-tw@10.7.7
+ - @heathmont/moon-cmdk-tw@10.7.7
+ - @heathmont/moon-core-tw@10.7.7
+
## 10.7.6
### Patch Changes
diff --git a/next-docs/package.json b/next-docs/package.json
index 0b94929a01..6adebc2759 100644
--- a/next-docs/package.json
+++ b/next-docs/package.json
@@ -1,6 +1,6 @@
{
"name": "next-docs",
- "version": "10.7.6",
+ "version": "10.7.7",
"private": true,
"scripts": {
"dev": "next dev",
@@ -19,9 +19,9 @@
"@heathmont/moon-assets": "workspace:^10.7.1",
"@heathmont/moon-charts": "workspace:^10.7.1",
"@heathmont/moon-components": "workspace:^10.7.1",
- "@heathmont/moon-cmdk-tw": "workspace:^10.7.6",
+ "@heathmont/moon-cmdk-tw": "workspace:^10.7.7",
"@heathmont/moon-core": "workspace:^10.7.1",
- "@heathmont/moon-core-tw": "workspace:^10.7.6",
+ "@heathmont/moon-core-tw": "workspace:^10.7.7",
"@heathmont/moon-datepicker": "workspace:^10.7.1",
"@heathmont/moon-draggabletable": "workspace:^10.7.1",
"@heathmont/moon-icons": "workspace:^10.7.1",
@@ -30,9 +30,9 @@
"@heathmont/moon-select": "workspace:^10.7.1",
"@heathmont/moon-sidebar": "workspace:^10.7.1",
"@heathmont/moon-table": "workspace:^10.7.1",
- "@heathmont/moon-table-tw": "workspace:^10.7.6",
+ "@heathmont/moon-table-tw": "workspace:^10.7.7",
"@heathmont/moon-themes": "workspace:^10.7.1",
- "@heathmont/moon-themes-tw": "workspace:^10.7.6",
+ "@heathmont/moon-themes-tw": "workspace:^10.7.7",
"@heathmont/moon-utils": "workspace:^10.7.1",
"@heathmont/moon-icons-tw": "9.28.5",
"@hookform/resolvers": "3.2.0",
diff --git a/next-docs/pages/api/examples.ts b/next-docs/pages/api/examples.ts
index 2689f9b4cf..d2c63436db 100644
--- a/next-docs/pages/api/examples.ts
+++ b/next-docs/pages/api/examples.ts
@@ -2,6 +2,7 @@ import fs from 'fs';
import path from 'path';
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from 'next';
+import useFilteredRequestQuery, { filterAllowedSymbolsOnly, filterAlphaNumericOnly, filterSafePath } from '../../utils/useFilteredRequestQuery';
type Data = {
examples: Object;
@@ -59,7 +60,7 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
const dirPath = path.resolve(
'./public',
dirRelativeToPublicFolder,
- component as string
+ useFilteredRequestQuery(component as string, filterAlphaNumericOnly)
);
const examples = await getFilesFromDirectory(dirPath);
diff --git a/next-docs/pages/api/styledExamples.ts b/next-docs/pages/api/styledExamples.ts
index 00f5f5ee0a..0725a54b14 100644
--- a/next-docs/pages/api/styledExamples.ts
+++ b/next-docs/pages/api/styledExamples.ts
@@ -2,6 +2,7 @@ import fs from 'fs';
import path from 'path';
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from 'next';
+import useFilteredRequestQuery, { filterAllowedSymbolsOnly, filterAlphaNumericOnly, filterSafePath } from '../../utils/useFilteredRequestQuery';
type Data = {
examples: Object;
@@ -59,7 +60,7 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
const dirPath = path.resolve(
'./public',
dirRelativeToPublicFolder,
- component as string
+ useFilteredRequestQuery(component as string, filterAlphaNumericOnly)
);
const examples = await getFilesFromDirectory(dirPath);
diff --git a/next-docs/pages/components/carousel.tsx b/next-docs/pages/components/carousel.tsx
index dd3af753b3..d460fff8dd 100644
--- a/next-docs/pages/components/carousel.tsx
+++ b/next-docs/pages/components/carousel.tsx
@@ -2,17 +2,18 @@ import { ReactNode } from 'react';
import Preview from '../../components/codePreview/Preview';
import ComponentAnatomy from '../../components/ComponentAnatomy';
import ComponentPageDescription from '../../components/ComponentPageDescription';
+import type { ComponentNames } from '../../components/getComponent';
import Layout from '../../components/Layout';
import PropsTable from '../../components/PropsTable';
import Autoslide from '../../public/examples/carousel/Autoslide';
import CustomizedArrow from '../../public/examples/carousel/CustomizedArrow';
import Default from '../../public/examples/carousel/Default';
import Indicators from '../../public/examples/carousel/Indicators';
+import Rtl from '../../public/examples/carousel/Rtl';
import SelectIndex from '../../public/examples/carousel/SelectIndex';
import Spaces from '../../public/examples/carousel/Spaces';
import VisibleIndex from '../../public/examples/carousel/VisibleIndex';
import useComponent from '../../utils/useComponent';
-import type { ComponentNames } from '../../components/getComponent';
const COMPONENT_NAME: ComponentNames = 'Carousel';
@@ -27,6 +28,10 @@ const PageCarousel = () => {
to focus on important website content and improves the overall visual
appeal effectively.
+
+ To support Arabic languages this component requires setting up isRtl
+ prop directly.
+
{`
@@ -73,6 +78,11 @@ const PageCarousel = () => {
preview={ }
code={examples ? examples.Autoslide : 'Loading'}
/>
+ }
+ code={examples ? examples.Rtl : 'Loading'}
+ />
{
description:
'Interval of auto sliding in milliseconds. No auto sliding if undefined',
},
+ {
+ name: 'isRtl',
+ type: 'boolean',
+ required: false,
+ default: '-',
+ description: 'Set right to left (rtl) view',
+ },
]}
/>
>
diff --git a/next-docs/pages/components/combobox.tsx b/next-docs/pages/components/combobox.tsx
index f477c7157d..c942419843 100644
--- a/next-docs/pages/components/combobox.tsx
+++ b/next-docs/pages/components/combobox.tsx
@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
import Preview from '../../components/codePreview/Preview';
import ComponentAnatomy from '../../components/ComponentAnatomy';
import ComponentPageDescription from '../../components/ComponentPageDescription';
+import type { ComponentNames } from '../../components/getComponent';
import Layout from '../../components/Layout';
import PropsTable from '../../components/PropsTable';
import Default from '../../public/examples/combobox/Default';
@@ -12,7 +13,6 @@ import MultiSelect from '../../public/examples/combobox/MultiSelect';
import Select from '../../public/examples/combobox/Select';
import SelectStates from '../../public/examples/combobox/SelectStates';
import useComponent from '../../utils/useComponent';
-import type { ComponentNames } from '../../components/getComponent';
const COMPONENT_NAME: ComponentNames = 'Combobox';
@@ -242,6 +242,13 @@ const PageCombobox = () => {
default: '-',
description: 'Tailwind classes for custom styles.',
},
+ {
+ name: 'onClose',
+ type: '(value: unknown) => void;',
+ required: false,
+ default: '-',
+ description: 'Called when the Combobox is dismissed.',
+ },
]}
/>
@@ -457,6 +464,13 @@ const PageCombobox = () => {
default: '-',
description: 'Whether or not the Listbox is open.',
},
+ {
+ name: 'onClose',
+ type: '(value: unknown) => void;',
+ required: false,
+ default: '-',
+ description: 'Called when the Combobox is dismissed.',
+ },
]}
/>
@@ -527,6 +541,13 @@ const PageCombobox = () => {
default: '-',
description: 'Whether or not the Listbox is open.',
},
+ {
+ name: 'onClose',
+ type: '(value: unknown) => void;',
+ required: false,
+ default: '-',
+ description: 'Called when the Combobox is dismissed.',
+ },
]}
/>
diff --git a/next-docs/public/examples/carousel/Rtl.tsx b/next-docs/public/examples/carousel/Rtl.tsx
new file mode 100644
index 0000000000..2f9e0c4fb5
--- /dev/null
+++ b/next-docs/public/examples/carousel/Rtl.tsx
@@ -0,0 +1,34 @@
+import { Carousel, MenuItem } from '@heathmont/moon-core-tw';
+import { useState } from 'react';
+
+const Example = () => {
+ const [selected, setSelected] = useState(0);
+ const items = Array.from({ length: 5 }, (index) => index);
+ return (
+
+
+ {items.map((_, index) => (
+ setSelected(index)}
+ className="px-4"
+ >
+ {index}
+
+ ))}
+
+
+
+ {items.map((_, index) => (
+
+ {index}
+
+ ))}
+
+
+
+ );
+};
+
+export default Example;
diff --git a/next-docs/public/examples/carousel/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/carousel/__tests__/__snapshots__/index.test.tsx.snap
index 1f0c8b1854..01075e8935 100644
--- a/next-docs/public/examples/carousel/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/carousel/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,2298 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Carousel in RTL renders Autoslide 1`] = `
-Object {
- "asFragment": [Function],
- "baseElement":
-
-
-
-
*]:flex-[0_0_auto] [&>img]:h-full [&>img]:basis-auto [&>img]:w-auto snap-x snap-mandatory rtl:flex-row-reverse overflow-x-hidden"
- >
-
- 0
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
- 12
-
-
- 13
-
-
- 14
-
-
- 15
-
-
- 16
-
-
- 17
-
-
- 18
-
-
- 19
-
-
- 20
-
-
- 21
-
-
- 22
-
-
- 23
-
-
- 24
-
-
-
-
-
- ,
- "container":
-
-
-
*]:flex-[0_0_auto] [&>img]:h-full [&>img]:basis-auto [&>img]:w-auto snap-x snap-mandatory rtl:flex-row-reverse overflow-x-hidden"
- >
-
- 0
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
- 12
-
-
- 13
-
-
- 14
-
-
- 15
-
-
- 16
-
-
- 17
-
-
- 18
-
-
- 19
-
-
- 20
-
-
- 21
-
-
- 22
-
-
- 23
-
-
- 24
-
-
-
-
-
,
- "debug": [Function],
- "findAllByAltText": [Function],
- "findAllByDisplayValue": [Function],
- "findAllByLabelText": [Function],
- "findAllByPlaceholderText": [Function],
- "findAllByRole": [Function],
- "findAllByTestId": [Function],
- "findAllByText": [Function],
- "findAllByTitle": [Function],
- "findByAltText": [Function],
- "findByDisplayValue": [Function],
- "findByLabelText": [Function],
- "findByPlaceholderText": [Function],
- "findByRole": [Function],
- "findByTestId": [Function],
- "findByText": [Function],
- "findByTitle": [Function],
- "getAllByAltText": [Function],
- "getAllByDisplayValue": [Function],
- "getAllByLabelText": [Function],
- "getAllByPlaceholderText": [Function],
- "getAllByRole": [Function],
- "getAllByTestId": [Function],
- "getAllByText": [Function],
- "getAllByTitle": [Function],
- "getByAltText": [Function],
- "getByDisplayValue": [Function],
- "getByLabelText": [Function],
- "getByPlaceholderText": [Function],
- "getByRole": [Function],
- "getByTestId": [Function],
- "getByText": [Function],
- "getByTitle": [Function],
- "queryAllByAltText": [Function],
- "queryAllByDisplayValue": [Function],
- "queryAllByLabelText": [Function],
- "queryAllByPlaceholderText": [Function],
- "queryAllByRole": [Function],
- "queryAllByTestId": [Function],
- "queryAllByText": [Function],
- "queryAllByTitle": [Function],
- "queryByAltText": [Function],
- "queryByDisplayValue": [Function],
- "queryByLabelText": [Function],
- "queryByPlaceholderText": [Function],
- "queryByRole": [Function],
- "queryByTestId": [Function],
- "queryByText": [Function],
- "queryByTitle": [Function],
- "rerender": [Function],
- "unmount": [Function],
-}
-`;
-
-exports[`Carousel in RTL renders CustomizedArrow 1`] = `
-Object {
- "asFragment": [Function],
- "baseElement":
-
-
-
-
- Scroll to left
-
-
*]:flex-[0_0_auto] [&>img]:h-full [&>img]:basis-auto [&>img]:w-auto snap-x snap-mandatory rtl:flex-row-reverse"
- >
-
- 0
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
- 12
-
-
- 13
-
-
- 14
-
-
- 15
-
-
- 16
-
-
- 17
-
-
- 18
-
-
- 19
-
-
- 20
-
-
- 21
-
-
- 22
-
-
- 23
-
-
- 24
-
-
-
- Scroll to Right
-
-
-
-
- ,
- "container":
-
-
-
- Scroll to left
-
-
*]:flex-[0_0_auto] [&>img]:h-full [&>img]:basis-auto [&>img]:w-auto snap-x snap-mandatory rtl:flex-row-reverse"
- >
-
- 0
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
- 12
-
-
- 13
-
-
- 14
-
-
- 15
-
-
- 16
-
-
- 17
-
-
- 18
-
-
- 19
-
-
- 20
-
-
- 21
-
-
- 22
-
-
- 23
-
-
- 24
-
-
-
- Scroll to Right
-
-
-
-
,
- "debug": [Function],
- "findAllByAltText": [Function],
- "findAllByDisplayValue": [Function],
- "findAllByLabelText": [Function],
- "findAllByPlaceholderText": [Function],
- "findAllByRole": [Function],
- "findAllByTestId": [Function],
- "findAllByText": [Function],
- "findAllByTitle": [Function],
- "findByAltText": [Function],
- "findByDisplayValue": [Function],
- "findByLabelText": [Function],
- "findByPlaceholderText": [Function],
- "findByRole": [Function],
- "findByTestId": [Function],
- "findByText": [Function],
- "findByTitle": [Function],
- "getAllByAltText": [Function],
- "getAllByDisplayValue": [Function],
- "getAllByLabelText": [Function],
- "getAllByPlaceholderText": [Function],
- "getAllByRole": [Function],
- "getAllByTestId": [Function],
- "getAllByText": [Function],
- "getAllByTitle": [Function],
- "getByAltText": [Function],
- "getByDisplayValue": [Function],
- "getByLabelText": [Function],
- "getByPlaceholderText": [Function],
- "getByRole": [Function],
- "getByTestId": [Function],
- "getByText": [Function],
- "getByTitle": [Function],
- "queryAllByAltText": [Function],
- "queryAllByDisplayValue": [Function],
- "queryAllByLabelText": [Function],
- "queryAllByPlaceholderText": [Function],
- "queryAllByRole": [Function],
- "queryAllByTestId": [Function],
- "queryAllByText": [Function],
- "queryAllByTitle": [Function],
- "queryByAltText": [Function],
- "queryByDisplayValue": [Function],
- "queryByLabelText": [Function],
- "queryByPlaceholderText": [Function],
- "queryByRole": [Function],
- "queryByTestId": [Function],
- "queryByText": [Function],
- "queryByTitle": [Function],
- "rerender": [Function],
- "unmount": [Function],
-}
-`;
-
-exports[`Carousel in RTL renders Default 1`] = `
-Object {
- "asFragment": [Function],
- "baseElement":
-
-
-
-
-
-
-
-
-
-
*]:flex-[0_0_auto] [&>img]:h-full [&>img]:basis-auto [&>img]:w-auto snap-x snap-mandatory rtl:flex-row-reverse"
- >
-
- 0
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
- 12
-
-
- 13
-
-
- 14
-
-
- 15
-
-
- 16
-
-
- 17
-
-
- 18
-
-
- 19
-
-
- 20
-
-
- 21
-
-
- 22
-
-
- 23
-
-
- 24
-
-
-
-
-
-
-
-
-
-
-
- ,
- "container":
-
-
-
-
-
-
-
-
-
*]:flex-[0_0_auto] [&>img]:h-full [&>img]:basis-auto [&>img]:w-auto snap-x snap-mandatory rtl:flex-row-reverse"
- >
-
- 0
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
- 12
-
-
- 13
-
-
- 14
-
-
- 15
-
-
- 16
-
-
- 17
-
-
- 18
-
-
- 19
-
-
- 20
-
-
- 21
-
-
- 22
-
-
- 23
-
-
- 24
-
-
-
-
-
-
-
-
-
-
-
,
- "debug": [Function],
- "findAllByAltText": [Function],
- "findAllByDisplayValue": [Function],
- "findAllByLabelText": [Function],
- "findAllByPlaceholderText": [Function],
- "findAllByRole": [Function],
- "findAllByTestId": [Function],
- "findAllByText": [Function],
- "findAllByTitle": [Function],
- "findByAltText": [Function],
- "findByDisplayValue": [Function],
- "findByLabelText": [Function],
- "findByPlaceholderText": [Function],
- "findByRole": [Function],
- "findByTestId": [Function],
- "findByText": [Function],
- "findByTitle": [Function],
- "getAllByAltText": [Function],
- "getAllByDisplayValue": [Function],
- "getAllByLabelText": [Function],
- "getAllByPlaceholderText": [Function],
- "getAllByRole": [Function],
- "getAllByTestId": [Function],
- "getAllByText": [Function],
- "getAllByTitle": [Function],
- "getByAltText": [Function],
- "getByDisplayValue": [Function],
- "getByLabelText": [Function],
- "getByPlaceholderText": [Function],
- "getByRole": [Function],
- "getByTestId": [Function],
- "getByText": [Function],
- "getByTitle": [Function],
- "queryAllByAltText": [Function],
- "queryAllByDisplayValue": [Function],
- "queryAllByLabelText": [Function],
- "queryAllByPlaceholderText": [Function],
- "queryAllByRole": [Function],
- "queryAllByTestId": [Function],
- "queryAllByText": [Function],
- "queryAllByTitle": [Function],
- "queryByAltText": [Function],
- "queryByDisplayValue": [Function],
- "queryByLabelText": [Function],
- "queryByPlaceholderText": [Function],
- "queryByRole": [Function],
- "queryByTestId": [Function],
- "queryByText": [Function],
- "queryByTitle": [Function],
- "rerender": [Function],
- "unmount": [Function],
-}
-`;
-
-exports[`Carousel in RTL renders Indicators 1`] = `
-Object {
- "asFragment": [Function],
- "baseElement":
-
-
-
-
-
-
-
-
-
-
*]:flex-[0_0_auto] [&>img]:h-full [&>img]:basis-auto [&>img]:w-auto snap-x snap-mandatory rtl:flex-row-reverse"
- >
-
- 0
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
-
-
-
-
-
-
-
-
-
-
- ,
- "container":
-
-
-
-
-
-
-
-
-
*]:flex-[0_0_auto] [&>img]:h-full [&>img]:basis-auto [&>img]:w-auto snap-x snap-mandatory rtl:flex-row-reverse"
- >
-
- 0
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
-
-
-
-
-
-
-
-
-
-
,
- "debug": [Function],
- "findAllByAltText": [Function],
- "findAllByDisplayValue": [Function],
- "findAllByLabelText": [Function],
- "findAllByPlaceholderText": [Function],
- "findAllByRole": [Function],
- "findAllByTestId": [Function],
- "findAllByText": [Function],
- "findAllByTitle": [Function],
- "findByAltText": [Function],
- "findByDisplayValue": [Function],
- "findByLabelText": [Function],
- "findByPlaceholderText": [Function],
- "findByRole": [Function],
- "findByTestId": [Function],
- "findByText": [Function],
- "findByTitle": [Function],
- "getAllByAltText": [Function],
- "getAllByDisplayValue": [Function],
- "getAllByLabelText": [Function],
- "getAllByPlaceholderText": [Function],
- "getAllByRole": [Function],
- "getAllByTestId": [Function],
- "getAllByText": [Function],
- "getAllByTitle": [Function],
- "getByAltText": [Function],
- "getByDisplayValue": [Function],
- "getByLabelText": [Function],
- "getByPlaceholderText": [Function],
- "getByRole": [Function],
- "getByTestId": [Function],
- "getByText": [Function],
- "getByTitle": [Function],
- "queryAllByAltText": [Function],
- "queryAllByDisplayValue": [Function],
- "queryAllByLabelText": [Function],
- "queryAllByPlaceholderText": [Function],
- "queryAllByRole": [Function],
- "queryAllByTestId": [Function],
- "queryAllByText": [Function],
- "queryAllByTitle": [Function],
- "queryByAltText": [Function],
- "queryByDisplayValue": [Function],
- "queryByLabelText": [Function],
- "queryByPlaceholderText": [Function],
- "queryByRole": [Function],
- "queryByTestId": [Function],
- "queryByText": [Function],
- "queryByTitle": [Function],
- "rerender": [Function],
- "unmount": [Function],
-}
-`;
-
-exports[`Carousel in RTL renders SelectIndex 1`] = `
-Object {
- "asFragment": [Function],
- "baseElement":
-
-
-
-
-
- 0
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
-
-
*]:flex-[0_0_auto] [&>img]:h-full [&>img]:basis-auto [&>img]:w-auto snap-x snap-mandatory rtl:flex-row-reverse overflow-x-hidden"
- >
-
- 0
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
-
-
-
-
- ,
- "container":
-
-
-
-
- 0
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
-
-
*]:flex-[0_0_auto] [&>img]:h-full [&>img]:basis-auto [&>img]:w-auto snap-x snap-mandatory rtl:flex-row-reverse overflow-x-hidden"
- >
-
- 0
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
-
-
-
-
,
- "debug": [Function],
- "findAllByAltText": [Function],
- "findAllByDisplayValue": [Function],
- "findAllByLabelText": [Function],
- "findAllByPlaceholderText": [Function],
- "findAllByRole": [Function],
- "findAllByTestId": [Function],
- "findAllByText": [Function],
- "findAllByTitle": [Function],
- "findByAltText": [Function],
- "findByDisplayValue": [Function],
- "findByLabelText": [Function],
- "findByPlaceholderText": [Function],
- "findByRole": [Function],
- "findByTestId": [Function],
- "findByText": [Function],
- "findByTitle": [Function],
- "getAllByAltText": [Function],
- "getAllByDisplayValue": [Function],
- "getAllByLabelText": [Function],
- "getAllByPlaceholderText": [Function],
- "getAllByRole": [Function],
- "getAllByTestId": [Function],
- "getAllByText": [Function],
- "getAllByTitle": [Function],
- "getByAltText": [Function],
- "getByDisplayValue": [Function],
- "getByLabelText": [Function],
- "getByPlaceholderText": [Function],
- "getByRole": [Function],
- "getByTestId": [Function],
- "getByText": [Function],
- "getByTitle": [Function],
- "queryAllByAltText": [Function],
- "queryAllByDisplayValue": [Function],
- "queryAllByLabelText": [Function],
- "queryAllByPlaceholderText": [Function],
- "queryAllByRole": [Function],
- "queryAllByTestId": [Function],
- "queryAllByText": [Function],
- "queryAllByTitle": [Function],
- "queryByAltText": [Function],
- "queryByDisplayValue": [Function],
- "queryByLabelText": [Function],
- "queryByPlaceholderText": [Function],
- "queryByRole": [Function],
- "queryByTestId": [Function],
- "queryByText": [Function],
- "queryByTitle": [Function],
- "rerender": [Function],
- "unmount": [Function],
-}
-`;
-
-exports[`Carousel in RTL renders Spaces 1`] = `
-Object {
- "asFragment": [Function],
- "baseElement":
-
-
-
-
-
-
-
-
-
-
*]:flex-[0_0_auto] [&>img]:h-full [&>img]:basis-auto [&>img]:w-auto snap-x snap-mandatory rtl:flex-row-reverse gap-10"
- >
-
- 0
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
-
-
-
-
-
-
-
-
-
- ,
- "container":
-
-
-
-
-
-
-
-
-
*]:flex-[0_0_auto] [&>img]:h-full [&>img]:basis-auto [&>img]:w-auto snap-x snap-mandatory rtl:flex-row-reverse gap-10"
- >
-
- 0
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
-
-
-
-
-
-
-
-
-
,
- "debug": [Function],
- "findAllByAltText": [Function],
- "findAllByDisplayValue": [Function],
- "findAllByLabelText": [Function],
- "findAllByPlaceholderText": [Function],
- "findAllByRole": [Function],
- "findAllByTestId": [Function],
- "findAllByText": [Function],
- "findAllByTitle": [Function],
- "findByAltText": [Function],
- "findByDisplayValue": [Function],
- "findByLabelText": [Function],
- "findByPlaceholderText": [Function],
- "findByRole": [Function],
- "findByTestId": [Function],
- "findByText": [Function],
- "findByTitle": [Function],
- "getAllByAltText": [Function],
- "getAllByDisplayValue": [Function],
- "getAllByLabelText": [Function],
- "getAllByPlaceholderText": [Function],
- "getAllByRole": [Function],
- "getAllByTestId": [Function],
- "getAllByText": [Function],
- "getAllByTitle": [Function],
- "getByAltText": [Function],
- "getByDisplayValue": [Function],
- "getByLabelText": [Function],
- "getByPlaceholderText": [Function],
- "getByRole": [Function],
- "getByTestId": [Function],
- "getByText": [Function],
- "getByTitle": [Function],
- "queryAllByAltText": [Function],
- "queryAllByDisplayValue": [Function],
- "queryAllByLabelText": [Function],
- "queryAllByPlaceholderText": [Function],
- "queryAllByRole": [Function],
- "queryAllByTestId": [Function],
- "queryAllByText": [Function],
- "queryAllByTitle": [Function],
- "queryByAltText": [Function],
- "queryByDisplayValue": [Function],
- "queryByLabelText": [Function],
- "queryByPlaceholderText": [Function],
- "queryByRole": [Function],
- "queryByTestId": [Function],
- "queryByText": [Function],
- "queryByTitle": [Function],
- "rerender": [Function],
- "unmount": [Function],
-}
-`;
-
-exports[`Carousel in RTL renders VisibleIndex 1`] = `
-Object {
- "asFragment": [Function],
- "baseElement":
-
-
-
-
-
-
-
-
-
-
*]:flex-[0_0_auto] [&>img]:h-full [&>img]:basis-auto [&>img]:w-auto snap-x snap-mandatory rtl:flex-row-reverse"
- >
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
-
-
-
-
-
-
-
-
-
- ,
- "container":
-
-
-
-
-
-
-
-
-
*]:flex-[0_0_auto] [&>img]:h-full [&>img]:basis-auto [&>img]:w-auto snap-x snap-mandatory rtl:flex-row-reverse"
- >
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
- -1--1
-
-
-
-
-
-
-
-
-
-
-
,
- "debug": [Function],
- "findAllByAltText": [Function],
- "findAllByDisplayValue": [Function],
- "findAllByLabelText": [Function],
- "findAllByPlaceholderText": [Function],
- "findAllByRole": [Function],
- "findAllByTestId": [Function],
- "findAllByText": [Function],
- "findAllByTitle": [Function],
- "findByAltText": [Function],
- "findByDisplayValue": [Function],
- "findByLabelText": [Function],
- "findByPlaceholderText": [Function],
- "findByRole": [Function],
- "findByTestId": [Function],
- "findByText": [Function],
- "findByTitle": [Function],
- "getAllByAltText": [Function],
- "getAllByDisplayValue": [Function],
- "getAllByLabelText": [Function],
- "getAllByPlaceholderText": [Function],
- "getAllByRole": [Function],
- "getAllByTestId": [Function],
- "getAllByText": [Function],
- "getAllByTitle": [Function],
- "getByAltText": [Function],
- "getByDisplayValue": [Function],
- "getByLabelText": [Function],
- "getByPlaceholderText": [Function],
- "getByRole": [Function],
- "getByTestId": [Function],
- "getByText": [Function],
- "getByTitle": [Function],
- "queryAllByAltText": [Function],
- "queryAllByDisplayValue": [Function],
- "queryAllByLabelText": [Function],
- "queryAllByPlaceholderText": [Function],
- "queryAllByRole": [Function],
- "queryAllByTestId": [Function],
- "queryAllByText": [Function],
- "queryAllByTitle": [Function],
- "queryByAltText": [Function],
- "queryByDisplayValue": [Function],
- "queryByLabelText": [Function],
- "queryByPlaceholderText": [Function],
- "queryByRole": [Function],
- "queryByTestId": [Function],
- "queryByText": [Function],
- "queryByTitle": [Function],
- "rerender": [Function],
- "unmount": [Function],
-}
-`;
-
exports[`Carousel renders Autoslide 1`] = `
Object {
"asFragment": [Function],
@@ -4529,3 +2236,210 @@ Object {
"unmount": [Function],
}
`;
+
+exports[`Carousel renders in RTL 1`] = `
+Object {
+ "asFragment": [Function],
+ "baseElement":
+
+
+
+
+ 0
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+
+
*]:flex-[0_0_auto] [&>img]:h-full [&>img]:basis-auto [&>img]:w-auto snap-x snap-mandatory rtl:flex-row-reverse overflow-x-hidden"
+ >
+
+ 4
+
+
+ 3
+
+
+ 2
+
+
+ 1
+
+
+ 0
+
+
+
+
+
+ ,
+ "container":
+
+
+
+ 0
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+
+
*]:flex-[0_0_auto] [&>img]:h-full [&>img]:basis-auto [&>img]:w-auto snap-x snap-mandatory rtl:flex-row-reverse overflow-x-hidden"
+ >
+
+ 4
+
+
+ 3
+
+
+ 2
+
+
+ 1
+
+
+ 0
+
+
+
+
+
,
+ "debug": [Function],
+ "findAllByAltText": [Function],
+ "findAllByDisplayValue": [Function],
+ "findAllByLabelText": [Function],
+ "findAllByPlaceholderText": [Function],
+ "findAllByRole": [Function],
+ "findAllByTestId": [Function],
+ "findAllByText": [Function],
+ "findAllByTitle": [Function],
+ "findByAltText": [Function],
+ "findByDisplayValue": [Function],
+ "findByLabelText": [Function],
+ "findByPlaceholderText": [Function],
+ "findByRole": [Function],
+ "findByTestId": [Function],
+ "findByText": [Function],
+ "findByTitle": [Function],
+ "getAllByAltText": [Function],
+ "getAllByDisplayValue": [Function],
+ "getAllByLabelText": [Function],
+ "getAllByPlaceholderText": [Function],
+ "getAllByRole": [Function],
+ "getAllByTestId": [Function],
+ "getAllByText": [Function],
+ "getAllByTitle": [Function],
+ "getByAltText": [Function],
+ "getByDisplayValue": [Function],
+ "getByLabelText": [Function],
+ "getByPlaceholderText": [Function],
+ "getByRole": [Function],
+ "getByTestId": [Function],
+ "getByText": [Function],
+ "getByTitle": [Function],
+ "queryAllByAltText": [Function],
+ "queryAllByDisplayValue": [Function],
+ "queryAllByLabelText": [Function],
+ "queryAllByPlaceholderText": [Function],
+ "queryAllByRole": [Function],
+ "queryAllByTestId": [Function],
+ "queryAllByText": [Function],
+ "queryAllByTitle": [Function],
+ "queryByAltText": [Function],
+ "queryByDisplayValue": [Function],
+ "queryByLabelText": [Function],
+ "queryByPlaceholderText": [Function],
+ "queryByRole": [Function],
+ "queryByTestId": [Function],
+ "queryByText": [Function],
+ "queryByTitle": [Function],
+ "rerender": [Function],
+ "unmount": [Function],
+}
+`;
diff --git a/next-docs/public/examples/carousel/__tests__/index.test.tsx b/next-docs/public/examples/carousel/__tests__/index.test.tsx
index e9de066ea9..93d3d77337 100644
--- a/next-docs/public/examples/carousel/__tests__/index.test.tsx
+++ b/next-docs/public/examples/carousel/__tests__/index.test.tsx
@@ -11,8 +11,7 @@ import VisibleIndex from '../VisibleIndex';
import Indicators from '../Indicators';
import SelectIndex from '../SelectIndex';
import Autoslide from '../Autoslide';
-
-const withRtl = (component: JSX.Element) => {component}
;
+import Rtl from '../Rtl';
describe('Carousel', () => {
afterEach(cleanup);
@@ -44,36 +43,8 @@ describe('Carousel', () => {
const tree = render( );
expect(tree).toMatchSnapshot();
});
-});
-
-describe('Carousel in RTL', () => {
- afterEach(cleanup);
- it('renders Default', () => {
- const tree = render(withRtl( ));
- expect(tree).toMatchSnapshot();
- });
- it('renders Spaces', () => {
- const tree = render(withRtl( ));
- expect(tree).toMatchSnapshot();
- });
- it('renders CustomizedArrow', () => {
- const tree = render(withRtl( ));
- expect(tree).toMatchSnapshot();
- });
- it('renders VisibleIndex', () => {
- const tree = render(withRtl( ));
- expect(tree).toMatchSnapshot();
- });
- it('renders Indicators', () => {
- const tree = render(withRtl( ));
- expect(tree).toMatchSnapshot();
- });
- it('renders SelectIndex', () => {
- const tree = render(withRtl( ));
- expect(tree).toMatchSnapshot();
- });
- it('renders Autoslide', () => {
- const tree = render(withRtl( ));
+ it('renders in RTL', () => {
+ const tree = render( );
expect(tree).toMatchSnapshot();
});
});
diff --git a/next-docs/public/examples/combobox/Default.tsx b/next-docs/public/examples/combobox/Default.tsx
index f0a88d77b7..3e228614cd 100644
--- a/next-docs/public/examples/combobox/Default.tsx
+++ b/next-docs/public/examples/combobox/Default.tsx
@@ -45,7 +45,7 @@ const Example = () => {
>
{({ open }) => (
<>
-
+
{
>
{({ open }) => (
<>
-
+
{
counter={selected0.length}
placeholder="Choose an option"
displayValue={({ label }) => label}
+ onClose={console.log}
>
@@ -101,6 +102,7 @@ const Example = () => {
counter={selected1.length}
placeholder="Choose an option"
displayValue={({ label }) => label}
+ onClose={console.log}
>
@@ -146,6 +148,7 @@ const Example = () => {
counter={selected2.length}
placeholder="Choose an option"
displayValue={({ label }) => label}
+ onClose={console.log}
>
diff --git a/next-docs/public/examples/table/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/table/__tests__/__snapshots__/index.test.tsx.snap
index 5af405c352..de0d2167e8 100644
--- a/next-docs/public/examples/table/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/table/__tests__/__snapshots__/index.test.tsx.snap
@@ -5576,7 +5576,7 @@ Object {
/>