diff --git a/.changeset/famous-experts-speak.md b/.changeset/famous-experts-speak.md new file mode 100644 index 0000000000..7b1c646bcc --- /dev/null +++ b/.changeset/famous-experts-speak.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/timeline": major +"@twilio-paste/core": minor +--- + +[Timeline]: Added a new Timeline component to the library to display events in chronological order diff --git a/.changeset/late-vans-do.md b/.changeset/late-vans-do.md new file mode 100644 index 0000000000..68077ba5cd --- /dev/null +++ b/.changeset/late-vans-do.md @@ -0,0 +1,5 @@ +--- +"@twilio-paste/codemods": minor +--- + +[Codemods] new export (timeline) diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index d61049eab4..0c92e15e99 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -104,6 +104,7 @@ "/packages/paste-core/components/textarea", "/packages/paste-theme", "/packages/paste-core/components/time-picker", + "/packages/paste-core/components/timeline", "/packages/paste-core/components/toast", "/packages/paste-core/components/tooltip", "/packages/paste-core/primitives/tooltip", diff --git a/packages/paste-codemods/tools/.cache/mappings.json b/packages/paste-codemods/tools/.cache/mappings.json index 252287abce..d382a24993 100644 --- a/packages/paste-codemods/tools/.cache/mappings.json +++ b/packages/paste-codemods/tools/.cache/mappings.json @@ -309,6 +309,11 @@ "TextArea": "@twilio-paste/core/textarea", "TimePicker": "@twilio-paste/core/time-picker", "formatReturnTime": "@twilio-paste/core/time-picker", + "Timeline": "@twilio-paste/core/timeline", + "TimelineContext": "@twilio-paste/core/timeline", + "TimelineItem": "@twilio-paste/core/timeline", + "TimelineItemGroup": "@twilio-paste/core/timeline", + "TimelineItemIcon": "@twilio-paste/core/timeline", "Toast": "@twilio-paste/core/toast", "ToastContainer": "@twilio-paste/core/toast", "Toaster": "@twilio-paste/core/toast", diff --git a/packages/paste-core/components/timeline/CHANGELOG.md b/packages/paste-core/components/timeline/CHANGELOG.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/paste-core/components/timeline/__tests__/index.spec.tsx b/packages/paste-core/components/timeline/__tests__/index.spec.tsx new file mode 100644 index 0000000000..6976e2c8c5 --- /dev/null +++ b/packages/paste-core/components/timeline/__tests__/index.spec.tsx @@ -0,0 +1,141 @@ +import { render } from "@testing-library/react"; +import { UserIcon } from "@twilio-paste/icons/esm/UserIcon"; +import * as React from "react"; + +import { Timeline, TimelineItem } from "../src"; +import { TimelineItemGroup } from "../src/TimelineItemGroup"; + +const ExampleTimeline: React.FC<{ + element?: string; +}> = ({ element = "TIMELINE" }) => ( + + + Event details + + + + Event details + + + + Event details + + + + Event details + + + + Event details + + + + + Event details + + + + Event details + + + Event details + + + + Event details + + + + Event details + + + + Event details + + +); + +describe("Timeline", () => { + it("should render", () => { + const { getByTestId } = render(); + expect(getByTestId("timeline")).toBeDefined(); + expect(getByTestId("timelineItem")).toBeDefined(); + }); + + it("should display title and timestamp", () => { + const { getByTestId } = render(); + expect(getByTestId("timelineItem")).toHaveTextContent("Start"); + expect(getByTestId("timelineItem")).toHaveTextContent("2018-03-01:10:00"); + }); + + it("should display content", () => { + const { getByTestId } = render(); + expect(getByTestId("timelineItem")).toHaveTextContent("Event details"); + }); + + it("should display item without timestamp", () => { + const { getByTestId } = render(); + expect( + getByTestId("timelineItemNoTimestamp").querySelector("[data-paste-element='TIMELINE_ITEM_TIMESTAMP']"), + ).toBeNull(); + }); + + it("should display icon item", () => { + const { getByTestId } = render(); + expect(getByTestId("timelineItem").querySelector("[data-paste-element='TIMELINE_ITEM_ICON']")).toBeDefined(); + }); + + it("should display grouped items", () => { + const { getByTestId } = render(); + expect(getByTestId("timelineItemGroup")).toBeDefined(); + }); + + it("should display group item timestamp", () => { + const { getByTestId } = render(); + expect( + getByTestId("timelineItem").querySelector("[data-paste-element='TIMELINE_ITEM_GROUP_TIMESTAMP_DETAIL_TEXT']"), + ).toBeDefined(); + }); + + it("should display collapsible items", () => { + const { getByTestId } = render(); + expect(getByTestId("timelineItemCollapsible")).toBeDefined(); + }); + + it("should display custom collapsible heading", () => { + const { getByTestId } = render(); + expect(getByTestId("timelineItemCollapsibleNoTimestamp")).toHaveTextContent("custom heading"); + }); + + it("should not display custom collapsible heading text when timestamp is p", () => { + const { getByTestId } = render(); + expect(getByTestId("timelineItemCollapsibleHeading")).toHaveTextContent("2018-03-01:10:00"); + }); + + describe("Customization", () => { + it("should set element data attribute", () => { + const { getByTestId } = render(); + expect(getByTestId("timeline").getAttribute("data-paste-element")).toEqual("TIMELINE"); + expect(getByTestId("timelineItem").getAttribute("data-paste-element")).toEqual("TIMELINE_ITEM"); + expect(getByTestId("timelineItemGroup").getAttribute("data-paste-element")).toEqual("TIMELINE_ITEM_GROUP"); + }); + + it("should set custom element data attribute", () => { + const { getByTestId } = render(); + expect(getByTestId("timeline").getAttribute("data-paste-element")).toEqual("CUSTOMIZED"); + expect(getByTestId("timelineItem").getAttribute("data-paste-element")).toEqual("CUSTOMIZED_ITEM"); + expect(getByTestId("timelineItemGroup").getAttribute("data-paste-element")).toEqual("CUSTOMIZED_ITEM_GROUP"); + }); + }); +}); diff --git a/packages/paste-core/components/timeline/build.js b/packages/paste-core/components/timeline/build.js new file mode 100644 index 0000000000..27dd98f98e --- /dev/null +++ b/packages/paste-core/components/timeline/build.js @@ -0,0 +1,3 @@ +const { build } = require("../../../../tools/build/esbuild"); + +build(require("./package.json")); diff --git a/packages/paste-core/components/timeline/package.json b/packages/paste-core/components/timeline/package.json new file mode 100644 index 0000000000..a232878ae0 --- /dev/null +++ b/packages/paste-core/components/timeline/package.json @@ -0,0 +1,83 @@ +{ + "name": "@twilio-paste/timeline", + "version": "0.0.0", + "category": "layout", + "status": "production", + "description": "A timeline is a visual representation of events displayed in chronological order.", + "author": "Twilio Inc.", + "license": "MIT", + "main:dev": "src/index.tsx", + "main": "dist/index.js", + "module": "dist/index.es.js", + "types": "dist/index.d.ts", + "sideEffects": false, + "publishConfig": { + "access": "public" + }, + "files": [ + "dist" + ], + "scripts": { + "build": "yarn clean && NODE_ENV=production node build.js && tsc", + "build:js": "NODE_ENV=development node build.js", + "build:typedocs": "tsx ../../../../tools/build/generate-type-docs", + "clean": "rm -rf ./dist", + "tsc": "tsc" + }, + "peerDependencies": { + "@twilio-paste/anchor": "^12.0.0", + "@twilio-paste/animation-library": "^2.0.0", + "@twilio-paste/box": "^10.2.0", + "@twilio-paste/button": "^14.0.0", + "@twilio-paste/card": "^9.1.0", + "@twilio-paste/color-contrast-utils": "^5.0.0", + "@twilio-paste/customization": "^8.1.1", + "@twilio-paste/design-tokens": "^10.3.0", + "@twilio-paste/detail-text": "^3.1.0", + "@twilio-paste/disclosure-primitive": "^2.1.1", + "@twilio-paste/icons": "^12.0.0", + "@twilio-paste/reakit-library": "^2.0.0", + "@twilio-paste/spinner": "^14.0.0", + "@twilio-paste/stack": "^8.0.0", + "@twilio-paste/style-props": "^9.1.1", + "@twilio-paste/styling-library": "^3.0.0", + "@twilio-paste/summary-detail": "^1.0.0", + "@twilio-paste/text": "^10.0.0", + "@twilio-paste/theme": "^11.0.1", + "@twilio-paste/types": "^6.0.0", + "@twilio-paste/uid-library": "^2.0.0", + "@types/react": "^16.8.6 || ^17.0.2 || ^18.0.27", + "@types/react-dom": "^16.8.6 || ^17.0.2 || ^18.0.10", + "react": "^16.8.6 || ^17.0.2 || ^18.0.0", + "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0" + }, + "devDependencies": { + "@twilio-paste/anchor": "^12.0.0", + "@twilio-paste/animation-library": "^2.0.0", + "@twilio-paste/box": "^10.2.0", + "@twilio-paste/button": "^14.1.0", + "@twilio-paste/card": "^9.1.0", + "@twilio-paste/color-contrast-utils": "^5.0.0", + "@twilio-paste/customization": "^8.1.1", + "@twilio-paste/design-tokens": "^10.3.0", + "@twilio-paste/detail-text": "^3.1.0", + "@twilio-paste/disclosure-primitive": "^2.1.1", + "@twilio-paste/icons": "^12.2.0", + "@twilio-paste/reakit-library": "^2.0.0", + "@twilio-paste/spinner": "^14.0.0", + "@twilio-paste/stack": "^8.0.0", + "@twilio-paste/style-props": "^9.1.1", + "@twilio-paste/styling-library": "^3.0.0", + "@twilio-paste/summary-detail": "^1.0.0", + "@twilio-paste/text": "^10.1.1", + "@twilio-paste/theme": "^11.0.1", + "@twilio-paste/types": "^6.0.0", + "@twilio-paste/uid-library": "^2.0.0", + "@types/react": "^18.0.27", + "@types/react-dom": "^18.0.10", + "react": "^18.0.0", + "react-dom": "^18.0.0", + "tsx": "^4.0.0", + "typescript": "^4.9.4" + } +} diff --git a/packages/paste-core/components/timeline/src/Timeline.tsx b/packages/paste-core/components/timeline/src/Timeline.tsx new file mode 100644 index 0000000000..2bd6be6c87 --- /dev/null +++ b/packages/paste-core/components/timeline/src/Timeline.tsx @@ -0,0 +1,77 @@ +import { Box, type BoxStyleProps } from "@twilio-paste/box"; +import { css, styled } from "@twilio-paste/styling-library"; +import React from "react"; + +import { TimelineContext } from "./TimelineContext"; +import type { Orientation, TimelineProps } from "./types"; + +const VariantStyles: { + [key in Orientation]: BoxStyleProps; +} = { + vertical: { + flexDirection: "column", + alignItems: "flex-start", + }, + horizontal: { + alignItems: "center", + flexWrap: "nowrap", + }, +}; + +const ItemSeparatortyles: { + [key in Orientation]: Record>; +} = { + vertical: { + "li>div:first-child::after": { + content: "''", + borderLeftWidth: "borderWidth10", + borderLeftStyle: "solid", + borderLeftColor: "colorBorderWeaker", + minHeight: "32px", + flexGrow: "1", + }, + }, + horizontal: { + "li>div:first-child": { + "&::after, &::before": { + content: "''", + borderBottomWidth: "borderWidth10", + borderBottomStyle: "solid", + borderBottomColor: "colorBorderWeaker", + minWidth: "32px", + flexGrow: 1, + }, + }, + "li:first-child>div:first-child::before, li:last-child>div:first-child::after": { + borderBottomColor: "transparent", + }, + }, +}; + +const Timeline = React.forwardRef( + ({ children, element = "TIMELINE", ...props }, ref) => { + const ContainerStyled = styled.ol( + css({ + listStyleType: "none", + margin: "0", + padding: "0", + display: "flex", + ...VariantStyles.vertical, + ...ItemSeparatortyles.vertical, + }), + ); + + return ( + + {/* @ts-expect-error we don't have polymorphic box typings yet */} + + {children} + + + ); + }, +); + +Timeline.displayName = "Timeline"; + +export { Timeline }; diff --git a/packages/paste-core/components/timeline/src/TimelineContext.tsx b/packages/paste-core/components/timeline/src/TimelineContext.tsx new file mode 100644 index 0000000000..a8e625b2a9 --- /dev/null +++ b/packages/paste-core/components/timeline/src/TimelineContext.tsx @@ -0,0 +1,11 @@ +import * as React from "react"; + +import type { Orientation } from "./types"; + +interface TimelineState { + orientation: Orientation; +} + +export const TimelineContext = React.createContext({} as TimelineState); + +export const TimelineGroupContext = React.createContext(false); diff --git a/packages/paste-core/components/timeline/src/TimelineItem.tsx b/packages/paste-core/components/timeline/src/TimelineItem.tsx new file mode 100644 index 0000000000..e604999b82 --- /dev/null +++ b/packages/paste-core/components/timeline/src/TimelineItem.tsx @@ -0,0 +1,115 @@ +import { Box } from "@twilio-paste/box"; +import { css, styled } from "@twilio-paste/styling-library"; +import React from "react"; + +import { TimelineContext, TimelineGroupContext } from "./TimelineContext"; +import { TimelineItemCollapsible } from "./TimelineItemCollapsible"; +import { TimelineItemIcon } from "./TimelineItemIcon"; +import type { TimelineItemProps } from "./types"; + +const TimelineItem = React.forwardRef( + ( + { children, icon, timestamp, title, collapsible = false, collapsibleHeading, element = "TIMELINE_ITEM", ...props }, + ref, + ) => { + const { orientation } = React.useContext(TimelineContext); + const isGrouped = React.useContext(TimelineGroupContext); + + if (!orientation) { + throw new Error("TimelineItem must be used within a Timeline component"); + } + + const ContainerStyled = styled.li( + css({ + "&:last-child>div:first-child::after": { + content: "none", + }, + "div::after": { + display: isGrouped ? "none" : "block", + }, + }), + ); + + return ( + + {!isGrouped ? ( + + + + ) : null} + + + + {title} + + + {collapsible ? ( + + {children} + + ) : ( + <> + {timestamp ? ( + + {timestamp} + + ) : null} + {children} + + )} + + + ); + }, +); + +TimelineItem.displayName = "TimelineItem"; + +export { TimelineItem }; diff --git a/packages/paste-core/components/timeline/src/TimelineItemCollapsible.tsx b/packages/paste-core/components/timeline/src/TimelineItemCollapsible.tsx new file mode 100644 index 0000000000..c8ea15b938 --- /dev/null +++ b/packages/paste-core/components/timeline/src/TimelineItemCollapsible.tsx @@ -0,0 +1,38 @@ +import { + SummaryDetail, + SummaryDetailContent, + SummaryDetailHeading, + SummaryDetailHeadingContent, + SummaryDetailToggleButton, +} from "@twilio-paste/summary-detail"; +import { Text } from "@twilio-paste/text"; +import * as React from "react"; + +import type { TimelineItemProps } from "./types"; + +export const TimelineItemCollapsible = React.forwardRef>( + ({ children, timestamp, element }, ref) => { + return ( + + + + + + {timestamp} + + + + {children} + + ); + }, +); +TimelineItemCollapsible.displayName = "TimelineItemCollapsible"; diff --git a/packages/paste-core/components/timeline/src/TimelineItemGroup.tsx b/packages/paste-core/components/timeline/src/TimelineItemGroup.tsx new file mode 100644 index 0000000000..14dbb30424 --- /dev/null +++ b/packages/paste-core/components/timeline/src/TimelineItemGroup.tsx @@ -0,0 +1,67 @@ +import { Box, type BoxProps } from "@twilio-paste/box"; +import { DetailText } from "@twilio-paste/detail-text"; +import * as React from "react"; + +import { TimelineContext, TimelineGroupContext } from "./TimelineContext"; +import { TimelineItemIcon } from "./TimelineItemIcon"; +import type { TimelineItemProps } from "./types"; + +export const TimelineItemGroup = React.forwardRef< + HTMLDivElement, + Omit & { + /** + * Overrides the default element name to apply unique styles with the Customization Provider. + * + * @default "TIMELINE_ITEM_GROUP" + * @type {BoxProps["element"]} + * @memberof TimelineProps + */ + element?: BoxProps["element"]; + } +>(({ children, timestamp, icon, element = "TIMELINE_ITEM_GROUP", ...props }, ref) => { + const { orientation } = React.useContext(TimelineContext); + + if (!orientation) { + throw new Error("TimelineItemGroup must be used within a Timeline component"); + } + + return ( + + + + + + + + + {timestamp} + + + + + {children} + + + + ); +}); + +TimelineItemGroup.displayName = "TimelineItemGroup"; diff --git a/packages/paste-core/components/timeline/src/TimelineItemIcon.tsx b/packages/paste-core/components/timeline/src/TimelineItemIcon.tsx new file mode 100644 index 0000000000..f2ece2d245 --- /dev/null +++ b/packages/paste-core/components/timeline/src/TimelineItemIcon.tsx @@ -0,0 +1,38 @@ +import { Box } from "@twilio-paste/box"; +import { IconWrapper } from "@twilio-paste/icons/esm/helpers/IconWrapper"; +import * as React from "react"; + +import { TimelineContext } from "./TimelineContext"; +import type { TimelineItemIconProps } from "./types"; + +const TimelineItemIcon = React.forwardRef( + ({ icon: Icon, as, display, element = "TIMELINE_ITEM_ICON", color }, ref) => { + const { orientation } = React.useContext(TimelineContext); + + return ( + + {Icon ? ( + + {/* @ts-expect-error some error in size*/} + + + + + ) : ( + + )} + + ); + }, +); + +TimelineItemIcon.displayName = "TimelineItemIcon"; +export { TimelineItemIcon }; diff --git a/packages/paste-core/components/timeline/src/index.tsx b/packages/paste-core/components/timeline/src/index.tsx new file mode 100644 index 0000000000..99f3e3cb14 --- /dev/null +++ b/packages/paste-core/components/timeline/src/index.tsx @@ -0,0 +1,6 @@ +export { Timeline } from "./Timeline"; +export { TimelineItem } from "./TimelineItem"; +export { TimelineContext } from "./TimelineContext"; +export { TimelineItemIcon } from "./TimelineItemIcon"; +export { TimelineItemGroup } from "./TimelineItemGroup"; +export type { TimelineProps, TimelineItemProps, TimelineItemIconProps } from "./types"; diff --git a/packages/paste-core/components/timeline/src/types.ts b/packages/paste-core/components/timeline/src/types.ts new file mode 100644 index 0000000000..3b97c1964b --- /dev/null +++ b/packages/paste-core/components/timeline/src/types.ts @@ -0,0 +1,90 @@ +import type { BoxProps } from "@twilio-paste/box"; +import type { IconWrapperProps } from "@twilio-paste/icons/esm/helpers/IconWrapper"; +import type { GenericIconProps } from "@twilio-paste/icons/esm/types"; +import type { HTMLPasteProps } from "@twilio-paste/types"; + +export type Orientation = "horizontal" | "vertical"; + +export type TimelineProps = { + /** + * Overrides the default element name to apply unique styles with the Customization Provider. + * + * @default "TIMELINE" + * @type {BoxProps["element"]} + * @memberof TimelineProps + */ + element?: BoxProps["element"]; +} & HTMLPasteProps<"div">; + +export type TimelineItemProps = { + /** + * Title to display in the timeline item + * + * @type {string} + * @memberof TimelineItemProps + * @required + */ + title: string; + + /** + * Pass a Paste Icon to display in place of dot + * + * @type {React.FC>} + * @memberof TimelineItemProps + */ + icon?: React.FC>; + + /** + * Timestamp to display in the timeline item + * + * @type {string} + * @memberof TimelineItemProps + */ + timestamp?: string; + + /** + * If true, the timeline item will be collapsible + * + * @type {boolean} + * @memberof TimelineItemProps + * @default false + */ + collapsible?: boolean; + + /** + * In case of collapsible timeline item and no timestamp, this will be used as the heading + * + * @type {boolean} + * @memberof TimelineItemProps + * @default false + */ + collapsibleHeading?: string; + + /** + * Overrides the default element name to apply unique styles with the Customization Provider. + * + * @default "TIMELINE_ITEM" + * @type {BoxProps["element"]} + * @memberof TimelineItemProps + */ + element?: BoxProps["element"]; +} & HTMLPasteProps<"div">; + +export type TimelineItemIconProps = { + /** + * Pass a Paste Icon to display in place of dot + * + * @type {React.FC>} + * @memberof TimelineItemIconProps + */ + icon?: React.FC>; + + /** + * Overrides the default element name to apply unique styles with the Customization Provider. + * + * @default "TIMELINE_ITEM" + * @type {BoxProps["element"]} + * @memberof TimelineItemIconProps + */ + element?: BoxProps["element"]; +} & IconWrapperProps; diff --git a/packages/paste-core/components/timeline/stories/index.stories.tsx b/packages/paste-core/components/timeline/stories/index.stories.tsx new file mode 100644 index 0000000000..5041abbcb4 --- /dev/null +++ b/packages/paste-core/components/timeline/stories/index.stories.tsx @@ -0,0 +1,267 @@ +import { Box } from "@twilio-paste/box"; +import { Button } from "@twilio-paste/button"; +import { CustomizationProvider } from "@twilio-paste/customization"; +import { UserIcon } from "@twilio-paste/icons/esm/UserIcon"; +import { Stack } from "@twilio-paste/stack"; +import { Text } from "@twilio-paste/text"; +import { useTheme } from "@twilio-paste/theme"; +import * as React from "react"; + +import { Timeline, TimelineItem, TimelineItemGroup } from "../src"; + +// eslint-disable-next-line import/no-default-export +export default { + title: "Components/Timeline", + component: Timeline, +}; + +export const DefaultTimeline = (): React.ReactNode => { + return ( + + + Event details + + + + Event details + + + + Event details + + + Event details + + ); +}; + +export const TimelineWithIcon = (): React.ReactNode => { + return ( + + + Event details + + + + Event details + + + + Event details + + + ); +}; + +export const TimelineCollapsible = (): React.ReactNode => { + return ( + + + Event details + + + + Event details + + + + Event details + + + + Event details + + + ); +}; + +export const TimelineGrouped = (): React.ReactNode => { + return ( + + + Event details + + + + + Event details + + + + Event details + + + Event details + + + ); +}; + +const allItems = [ + { date: "2018-03-01:10:00", text: "Item 1" }, + { date: "2018-03-01:12:00", text: "Item 2" }, + { date: "2018-03-01:15:30", text: "Item 3" }, + { date: "2018-03-01:16:45", text: "Item 4" }, + { date: "2018-03-01:18:20", text: "Item 5" }, + { date: "2018-03-01:19:10", text: "Item 6" }, + { date: "2018-03-01:20:00", text: "Item 7" }, + { date: "2018-03-01:21:15", text: "Item 8" }, + { date: "2018-03-01:22:30", text: "Item 9" }, + { date: "2018-03-01:23:45", text: "Item 10" }, + { date: "2018-03-02:10:00", text: "Item 11" }, + { date: "2018-03-02:12:00", text: "Item 12" }, + { date: "2018-03-02:15:30", text: "Item 13" }, + { date: "2018-03-02:16:45", text: "Item 14" }, + { date: "2018-03-02:18:20", text: "Item 15" }, + { date: "2018-03-02:19:10", text: "Item 16" }, + { date: "2018-03-02:20:00", text: "Item 17" }, + { date: "2018-03-02:21:15", text: "Item 18" }, + { date: "2018-03-02:22:30", text: "Item 19" }, + { date: "2018-03-02:23:45", text: "Item 20" }, + { date: "2018-03-03:10:00", text: "Item 21" }, + { date: "2018-03-03:12:00", text: "Item 22" }, + { date: "2018-03-03:15:30", text: "Item 23" }, + { date: "2018-03-03:16:45", text: "Item 24" }, + { date: "2018-03-03:18:20", text: "Item 25" }, + { date: "2018-03-03:19:10", text: "Item 26" }, + { date: "2018-03-03:20:00", text: "Item 27" }, + { date: "2018-03-03:21:15", text: "Item 28" }, + { date: "2018-03-03:22:30", text: "Item 29" }, + { date: "2018-03-03:23:45", text: "Item 30" }, +]; + +export const TimelineLoadMore = (): React.ReactNode => { + const [items, setItems] = React.useState(allItems.slice(0, 3)); + + const loadMore = (): void => { + setItems(allItems.slice(0, items.length + 3)); + }; + + return ( + <> + + {items.map((item) => ( + + {item.text} + + ))} + + {items.length < allItems.length ? ( + + + + ) : null} + + ); +}; + +export const TimelineInfiniteScroll = (): React.ReactNode => { + const [items, setItems] = React.useState(allItems.slice(0, 10)); + const [isLoading, setIsLoading] = React.useState(false); + + const handleScroll = (event: React.UIEvent): void => { + if (items.length >= allItems.length) return; + + const target = event.target as HTMLDivElement; + if (target.scrollHeight - target.scrollTop === target.clientHeight) { + setIsLoading(true); + setTimeout(() => { + setItems(allItems.slice(0, items.length + 10)); + setIsLoading(false); + }, 1000); + } + }; + + return ( + + + {items.map((item) => ( + + {item.text} + + ))} + + {isLoading ? ( + + Loading... + + ) : null} + + ); +}; + +export const TimelineCustomization = (): React.ReactNode => { + const currentTheme = useTheme(); + + return ( + + div:first-child::after": { + borderLeftWidth: "borderWidth30", + borderLeftColor: "colorBorderStrong", + }, + }, + TIMELINE_ITEM_ICON_DOT: { + backgroundColor: "colorBackgroundBrand20", + borderRadius: "borderRadius10", + }, + TIMELINE_ITEM_TITLE: { + color: "colorTextLink", + fontStyle: "italic", + }, + TIMELINE_ITEM_TIMESTAMP: { + color: "colorTextWarning", + }, + TIMELINE_ITEM_CONTENT: { + borderLeftWidth: "borderWidth20", + borderLeftStyle: "solid", + borderLeftColor: "colorBorderStrong", + paddingLeft: "space60", + }, + TIMELINE_ITEM_ICON: { + borderRadius: "borderRadiusCircle", + borderWidth: "borderWidth10", + borderStyle: "solid", + borderColor: "colorBorderStrong", + padding: "space20", + width: "sizeIcon40", + height: "sizeIcon40", + color: "colorTextLink", + }, + }} + > + + + Event details + + + + Event details + + + + Event details + + + Event details + + + Event details + + + + + ); +}; + +TimelineCustomization.parameters = { + a11y: { + // no need to a11y check customization + disable: true, + }, +}; diff --git a/packages/paste-core/components/timeline/tsconfig.json b/packages/paste-core/components/timeline/tsconfig.json new file mode 100644 index 0000000000..b5daed7034 --- /dev/null +++ b/packages/paste-core/components/timeline/tsconfig.json @@ -0,0 +1,12 @@ +{ + "extends": "../../../../tsconfig.json", + "compilerOptions": { + "outDir": "dist/", + }, + "include": [ + "src/**/*", + ], + "exclude": [ + "node_modules" + ] +} diff --git a/packages/paste-core/components/timeline/type-docs.json b/packages/paste-core/components/timeline/type-docs.json new file mode 100644 index 0000000000..fb1354e34c --- /dev/null +++ b/packages/paste-core/components/timeline/type-docs.json @@ -0,0 +1,4815 @@ +{ + "Timeline": { + "about": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "accessKey": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "aria-activedescendant": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application." + }, + "aria-atomic": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute." + }, + "aria-autocomplete": { + "type": "\"list\" | \"none\" | \"inline\" | \"both\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made." + }, + "aria-busy": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user." + }, + "aria-checked": { + "type": "boolean | \"true\" | \"false\" | \"mixed\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets." + }, + "aria-colcount": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the total number of columns in a table, grid, or treegrid." + }, + "aria-colindex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid." + }, + "aria-colspan": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid." + }, + "aria-controls": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) whose contents or presence are controlled by the current element." + }, + "aria-current": { + "type": "| boolean\n | \"time\"\n | \"true\"\n | \"false\"\n | \"page\"\n | \"step\"\n | \"location\"\n | \"date\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the element that represents the current item within a container or set of related elements." + }, + "aria-describedby": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) that describes the object." + }, + "aria-details": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element that provides a detailed, extended description for the object." + }, + "aria-disabled": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable." + }, + "aria-dropeffect": { + "type": "\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates what functions can be performed when a dragged object is released on the drop target." + }, + "aria-errormessage": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element that provides an error message for the object." + }, + "aria-expanded": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed." + }, + "aria-flowto": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order." + }, + "aria-grabbed": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation." + }, + "aria-haspopup": { + "type": "| boolean\n | \"dialog\"\n | \"menu\"\n | \"true\"\n | \"false\"\n | \"grid\"\n | \"listbox\"\n | \"tree\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element." + }, + "aria-hidden": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element is exposed to an accessibility API." + }, + "aria-invalid": { + "type": "boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the entered value does not conform to the format expected by the application." + }, + "aria-keyshortcuts": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element." + }, + "aria-label": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a string value that labels the current element." + }, + "aria-labelledby": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) that labels the current element." + }, + "aria-level": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the hierarchical level of an element within a structure." + }, + "aria-live": { + "type": "\"off\" | \"assertive\" | \"polite\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region." + }, + "aria-modal": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether an element is modal when displayed." + }, + "aria-multiline": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether a text box accepts multiple lines of input or only a single line." + }, + "aria-multiselectable": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the user may select more than one item from the current selectable descendants." + }, + "aria-orientation": { + "type": "\"horizontal\" | \"vertical\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous." + }, + "aria-owns": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship." + }, + "aria-placeholder": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format." + }, + "aria-posinset": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM." + }, + "aria-pressed": { + "type": "boolean | \"true\" | \"false\" | \"mixed\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"pressed\" state of toggle buttons." + }, + "aria-readonly": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the element is not editable, but is otherwise operable." + }, + "aria-relevant": { + "type": "| \"text\"\n | \"additions\"\n | \"additions removals\"\n | \"additions text\"\n | \"all\"\n | \"removals\"\n | \"removals additions\"\n | \"removals text\"\n | \"text additions\"\n | \"text removals\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified." + }, + "aria-required": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that user input is required on the element before a form may be submitted." + }, + "aria-roledescription": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a human-readable, author-localized description for the role of an element." + }, + "aria-rowcount": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the total number of rows in a table, grid, or treegrid." + }, + "aria-rowindex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid." + }, + "aria-rowspan": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid." + }, + "aria-selected": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"selected\" state of various widgets." + }, + "aria-setsize": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM." + }, + "aria-sort": { + "type": "\"none\" | \"ascending\" | \"descending\" | \"other\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates if items in a table or grid are sorted in ascending or descending order." + }, + "aria-valuemax": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the maximum allowed value for a range widget." + }, + "aria-valuemin": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the minimum allowed value for a range widget." + }, + "aria-valuenow": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the current value for a range widget." + }, + "aria-valuetext": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the human readable text alternative of aria-valuenow for a range widget." + }, + "autoCapitalize": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "autoCorrect": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "autoSave": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "contentEditable": { + "type": "Booleanish | \"inherit\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "contextMenu": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "dangerouslySetInnerHTML": { + "type": "{ __html: string }", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "datatype": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "defaultChecked": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "defaultValue": { + "type": "string | number | readonly string[]", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "dir": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "draggable": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "element": { + "type": "string", + "defaultValue": "TIMELINE", + "required": false, + "externalProp": false, + "description": "Overrides the default element name to apply unique styles with the Customization Provider." + }, + "hidden": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "id": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "inlist": { + "type": "any", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "inputMode": { + "type": "| \"text\"\n | \"none\"\n | \"search\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" + }, + "is": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Specify that a standard HTML element should behave like a defined custom built-in element" + }, + "itemID": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemProp": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemRef": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemScope": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemType": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "key": { + "type": "Key", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "lang": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "nonce": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAbort": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAbortCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationEnd": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationEndCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationIteration": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationIterationCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationStart": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationStartCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAuxClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAuxClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBeforeInput": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBeforeInputCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBlur": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBlurCapture": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlay": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayThrough": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayThroughCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onChange": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onChangeCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionEnd": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionEndCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionStart": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionStartCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionUpdate": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionUpdateCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onContextMenu": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onContextMenuCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCopy": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCopyCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCut": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCutCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDoubleClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDoubleClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDrag": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnd": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEndCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnter": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnterCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragExit": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragExitCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragLeave": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragLeaveCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragOver": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragOverCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragStart": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragStartCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDrop": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDropCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDurationChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDurationChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEmptied": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEmptiedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEncrypted": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEncryptedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEnded": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEndedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onError": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onErrorCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onFocus": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onFocusCapture": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onGotPointerCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onGotPointerCaptureCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInput": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInputCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInvalid": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInvalidCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyDown": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyDownCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyPress": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyPressCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyUp": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyUpCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoad": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedData": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedDataCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedMetadata": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedMetadataCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadStart": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadStartCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLostPointerCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLostPointerCaptureCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseDown": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseDownCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseEnter": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseLeave": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseMove": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseMoveCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOut": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOutCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOver": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOverCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseUp": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseUpCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPaste": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPasteCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPause": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPauseCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlay": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlayCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlaying": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlayingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerCancel": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerCancelCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerDown": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerDownCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerEnter": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerEnterCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerLeave": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerLeaveCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerMove": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerMoveCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOut": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOutCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOver": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOverCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerUp": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerUpCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onProgress": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onProgressCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onRateChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onRateChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onReset": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResetCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResize": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResizeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onScroll": { + "type": "UIEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onScrollCapture": { + "type": "UIEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeeked": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeekedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeeking": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeekingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSelect": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSelectCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onStalled": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onStalledCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSubmit": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSubmitCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSuspend": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSuspendCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTimeUpdate": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTimeUpdateCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchCancel": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchCancelCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchEnd": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchEndCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchMove": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchMoveCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchStart": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchStartCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTransitionEnd": { + "type": "TransitionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTransitionEndCapture": { + "type": "TransitionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onVolumeChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onVolumeChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWaiting": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWaitingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWheel": { + "type": "WheelEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWheelCapture": { + "type": "WheelEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "placeholder": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "prefix": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "property": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "radioGroup": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "resource": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "results": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "role": { + "type": "AriaRole", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "security": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "slot": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "spellCheck": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "suppressContentEditableWarning": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "suppressHydrationWarning": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "tabIndex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "title": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "translate": { + "type": "\"yes\" | \"no\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "typeof": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "unselectable": { + "type": "\"on\" | \"off\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "vocab": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + } + }, + "TimelineItem": { + "title": { + "type": "string", + "defaultValue": null, + "required": true, + "externalProp": false, + "description": "Title to display in the timeline item" + }, + "about": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "accessKey": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "aria-activedescendant": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application." + }, + "aria-atomic": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute." + }, + "aria-autocomplete": { + "type": "\"list\" | \"none\" | \"inline\" | \"both\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made." + }, + "aria-busy": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user." + }, + "aria-checked": { + "type": "boolean | \"true\" | \"false\" | \"mixed\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets." + }, + "aria-colcount": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the total number of columns in a table, grid, or treegrid." + }, + "aria-colindex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid." + }, + "aria-colspan": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid." + }, + "aria-controls": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) whose contents or presence are controlled by the current element." + }, + "aria-current": { + "type": "| boolean\n | \"time\"\n | \"true\"\n | \"false\"\n | \"page\"\n | \"step\"\n | \"location\"\n | \"date\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the element that represents the current item within a container or set of related elements." + }, + "aria-describedby": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) that describes the object." + }, + "aria-details": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element that provides a detailed, extended description for the object." + }, + "aria-disabled": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable." + }, + "aria-dropeffect": { + "type": "\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates what functions can be performed when a dragged object is released on the drop target." + }, + "aria-errormessage": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element that provides an error message for the object." + }, + "aria-expanded": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed." + }, + "aria-flowto": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order." + }, + "aria-grabbed": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation." + }, + "aria-haspopup": { + "type": "| boolean\n | \"dialog\"\n | \"menu\"\n | \"true\"\n | \"false\"\n | \"grid\"\n | \"listbox\"\n | \"tree\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element." + }, + "aria-hidden": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element is exposed to an accessibility API." + }, + "aria-invalid": { + "type": "boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the entered value does not conform to the format expected by the application." + }, + "aria-keyshortcuts": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element." + }, + "aria-label": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a string value that labels the current element." + }, + "aria-labelledby": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) that labels the current element." + }, + "aria-level": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the hierarchical level of an element within a structure." + }, + "aria-live": { + "type": "\"off\" | \"assertive\" | \"polite\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region." + }, + "aria-modal": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether an element is modal when displayed." + }, + "aria-multiline": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether a text box accepts multiple lines of input or only a single line." + }, + "aria-multiselectable": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the user may select more than one item from the current selectable descendants." + }, + "aria-orientation": { + "type": "\"horizontal\" | \"vertical\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous." + }, + "aria-owns": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship." + }, + "aria-placeholder": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format." + }, + "aria-posinset": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM." + }, + "aria-pressed": { + "type": "boolean | \"true\" | \"false\" | \"mixed\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"pressed\" state of toggle buttons." + }, + "aria-readonly": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the element is not editable, but is otherwise operable." + }, + "aria-relevant": { + "type": "| \"text\"\n | \"additions\"\n | \"additions removals\"\n | \"additions text\"\n | \"all\"\n | \"removals\"\n | \"removals additions\"\n | \"removals text\"\n | \"text additions\"\n | \"text removals\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified." + }, + "aria-required": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that user input is required on the element before a form may be submitted." + }, + "aria-roledescription": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a human-readable, author-localized description for the role of an element." + }, + "aria-rowcount": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the total number of rows in a table, grid, or treegrid." + }, + "aria-rowindex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid." + }, + "aria-rowspan": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid." + }, + "aria-selected": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"selected\" state of various widgets." + }, + "aria-setsize": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM." + }, + "aria-sort": { + "type": "\"none\" | \"ascending\" | \"descending\" | \"other\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates if items in a table or grid are sorted in ascending or descending order." + }, + "aria-valuemax": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the maximum allowed value for a range widget." + }, + "aria-valuemin": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the minimum allowed value for a range widget." + }, + "aria-valuenow": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the current value for a range widget." + }, + "aria-valuetext": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the human readable text alternative of aria-valuenow for a range widget." + }, + "autoCapitalize": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "autoCorrect": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "autoSave": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "collapsible": { + "type": "boolean", + "defaultValue": false, + "required": false, + "externalProp": false, + "description": "If true, the timeline item will be collapsible" + }, + "collapsibleHeading": { + "type": "string", + "defaultValue": false, + "required": false, + "externalProp": false, + "description": "In case of collapsible timeline item and no timestamp, this will be used as the heading" + }, + "contentEditable": { + "type": "Booleanish | \"inherit\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "contextMenu": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "dangerouslySetInnerHTML": { + "type": "{ __html: string }", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "datatype": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "defaultChecked": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "defaultValue": { + "type": "string | number | readonly string[]", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "dir": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "draggable": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "element": { + "type": "string", + "defaultValue": "TIMELINE_ITEM", + "required": false, + "externalProp": false, + "description": "Overrides the default element name to apply unique styles with the Customization Provider." + }, + "hidden": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "icon": { + "type": "FC>", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Pass a Paste Icon to display in place of dot" + }, + "id": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "inlist": { + "type": "any", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "inputMode": { + "type": "| \"text\"\n | \"none\"\n | \"search\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" + }, + "is": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Specify that a standard HTML element should behave like a defined custom built-in element" + }, + "itemID": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemProp": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemRef": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemScope": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemType": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "key": { + "type": "Key", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "lang": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "nonce": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAbort": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAbortCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationEnd": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationEndCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationIteration": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationIterationCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationStart": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationStartCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAuxClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAuxClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBeforeInput": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBeforeInputCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBlur": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBlurCapture": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlay": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayThrough": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayThroughCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onChange": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onChangeCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionEnd": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionEndCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionStart": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionStartCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionUpdate": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionUpdateCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onContextMenu": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onContextMenuCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCopy": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCopyCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCut": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCutCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDoubleClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDoubleClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDrag": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnd": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEndCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnter": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnterCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragExit": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragExitCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragLeave": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragLeaveCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragOver": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragOverCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragStart": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragStartCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDrop": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDropCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDurationChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDurationChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEmptied": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEmptiedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEncrypted": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEncryptedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEnded": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEndedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onError": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onErrorCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onFocus": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onFocusCapture": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onGotPointerCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onGotPointerCaptureCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInput": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInputCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInvalid": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInvalidCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyDown": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyDownCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyPress": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyPressCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyUp": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyUpCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoad": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedData": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedDataCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedMetadata": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedMetadataCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadStart": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadStartCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLostPointerCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLostPointerCaptureCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseDown": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseDownCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseEnter": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseLeave": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseMove": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseMoveCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOut": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOutCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOver": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOverCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseUp": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseUpCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPaste": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPasteCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPause": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPauseCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlay": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlayCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlaying": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlayingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerCancel": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerCancelCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerDown": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerDownCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerEnter": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerEnterCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerLeave": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerLeaveCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerMove": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerMoveCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOut": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOutCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOver": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOverCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerUp": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerUpCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onProgress": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onProgressCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onRateChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onRateChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onReset": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResetCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResize": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResizeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onScroll": { + "type": "UIEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onScrollCapture": { + "type": "UIEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeeked": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeekedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeeking": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeekingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSelect": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSelectCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onStalled": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onStalledCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSubmit": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSubmitCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSuspend": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSuspendCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTimeUpdate": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTimeUpdateCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchCancel": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchCancelCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchEnd": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchEndCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchMove": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchMoveCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchStart": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchStartCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTransitionEnd": { + "type": "TransitionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTransitionEndCapture": { + "type": "TransitionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onVolumeChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onVolumeChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWaiting": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWaitingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWheel": { + "type": "WheelEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWheelCapture": { + "type": "WheelEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "placeholder": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "prefix": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "property": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "radioGroup": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "resource": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "results": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "role": { + "type": "AriaRole", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "security": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "slot": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "spellCheck": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "suppressContentEditableWarning": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "suppressHydrationWarning": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "tabIndex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "timestamp": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Timestamp to display in the timeline item" + }, + "translate": { + "type": "\"yes\" | \"no\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "typeof": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "unselectable": { + "type": "\"on\" | \"off\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "vocab": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + } + }, + "TimelineItemIcon": { + "about": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "accessKey": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "aria-activedescendant": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application." + }, + "aria-atomic": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute." + }, + "aria-autocomplete": { + "type": "\"list\" | \"none\" | \"inline\" | \"both\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made." + }, + "aria-busy": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user." + }, + "aria-checked": { + "type": "boolean | \"true\" | \"false\" | \"mixed\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets." + }, + "aria-colcount": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the total number of columns in a table, grid, or treegrid." + }, + "aria-colindex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid." + }, + "aria-colspan": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid." + }, + "aria-controls": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) whose contents or presence are controlled by the current element." + }, + "aria-current": { + "type": "| boolean\n | \"time\"\n | \"true\"\n | \"false\"\n | \"page\"\n | \"step\"\n | \"location\"\n | \"date\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the element that represents the current item within a container or set of related elements." + }, + "aria-describedby": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) that describes the object." + }, + "aria-details": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element that provides a detailed, extended description for the object." + }, + "aria-disabled": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable." + }, + "aria-dropeffect": { + "type": "\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates what functions can be performed when a dragged object is released on the drop target." + }, + "aria-errormessage": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element that provides an error message for the object." + }, + "aria-expanded": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed." + }, + "aria-flowto": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order." + }, + "aria-grabbed": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation." + }, + "aria-haspopup": { + "type": "| boolean\n | \"dialog\"\n | \"menu\"\n | \"true\"\n | \"false\"\n | \"grid\"\n | \"listbox\"\n | \"tree\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element." + }, + "aria-hidden": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element is exposed to an accessibility API." + }, + "aria-invalid": { + "type": "boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the entered value does not conform to the format expected by the application." + }, + "aria-keyshortcuts": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element." + }, + "aria-label": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a string value that labels the current element." + }, + "aria-labelledby": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) that labels the current element." + }, + "aria-level": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the hierarchical level of an element within a structure." + }, + "aria-live": { + "type": "\"off\" | \"assertive\" | \"polite\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region." + }, + "aria-modal": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether an element is modal when displayed." + }, + "aria-multiline": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether a text box accepts multiple lines of input or only a single line." + }, + "aria-multiselectable": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the user may select more than one item from the current selectable descendants." + }, + "aria-orientation": { + "type": "\"horizontal\" | \"vertical\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous." + }, + "aria-owns": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship." + }, + "aria-placeholder": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format." + }, + "aria-posinset": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM." + }, + "aria-pressed": { + "type": "boolean | \"true\" | \"false\" | \"mixed\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"pressed\" state of toggle buttons." + }, + "aria-readonly": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the element is not editable, but is otherwise operable." + }, + "aria-relevant": { + "type": "| \"text\"\n | \"additions\"\n | \"additions removals\"\n | \"additions text\"\n | \"all\"\n | \"removals\"\n | \"removals additions\"\n | \"removals text\"\n | \"text additions\"\n | \"text removals\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified." + }, + "aria-required": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that user input is required on the element before a form may be submitted." + }, + "aria-roledescription": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a human-readable, author-localized description for the role of an element." + }, + "aria-rowcount": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the total number of rows in a table, grid, or treegrid." + }, + "aria-rowindex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid." + }, + "aria-rowspan": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid." + }, + "aria-selected": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"selected\" state of various widgets." + }, + "aria-setsize": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM." + }, + "aria-sort": { + "type": "\"none\" | \"ascending\" | \"descending\" | \"other\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates if items in a table or grid are sorted in ascending or descending order." + }, + "aria-valuemax": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the maximum allowed value for a range widget." + }, + "aria-valuemin": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the minimum allowed value for a range widget." + }, + "aria-valuenow": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the current value for a range widget." + }, + "aria-valuetext": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the human readable text alternative of aria-valuenow for a range widget." + }, + "as": { + "type": "keyof IntrinsicElements", + "defaultValue": "span", + "required": false, + "externalProp": false, + "description": "Sets the HTML element the IconWrapper renders as." + }, + "autoCapitalize": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "autoCorrect": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "autoSave": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "color": { + "type": "\"inherit\" | \"colorText\" | \"colorTextBrand\" | \"colorTextBrandHighlight\" | \"colorTextBrandInverse\" | \"colorTextDecorative10\" | \"colorTextDecorative20\" | \"colorTextDecorative30\" | ... 58 more ... | { ...; }", + "defaultValue": "currentColor", + "required": false, + "externalProp": false, + "description": "Sets the color of the icon." + }, + "contentEditable": { + "type": "Booleanish | \"inherit\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "contextMenu": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "dangerouslySetInnerHTML": { + "type": "{ __html: string }", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "datatype": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "defaultChecked": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "defaultValue": { + "type": "string | number | readonly string[]", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "dir": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "display": { + "type": "| Display\n | (Display | null | undefined)[]\n | { [x: string]: Display | undefined; [x: number]: Display | undefined }", + "defaultValue": "block", + "required": false, + "externalProp": false, + "description": "Sets the display of the icon." + }, + "draggable": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "element": { + "type": "string", + "defaultValue": "TIMELINE_ITEM", + "required": false, + "externalProp": false, + "description": "Overrides the default element name to apply unique styles with the Customization Provider.\n\n\nOverrides the default element name to apply unique styles with the Customization Provider" + }, + "hidden": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "icon": { + "type": "FC>", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Pass a Paste Icon to display in place of dot" + }, + "id": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "inlist": { + "type": "any", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "inputMode": { + "type": "| \"text\"\n | \"none\"\n | \"search\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" + }, + "is": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Specify that a standard HTML element should behave like a defined custom built-in element" + }, + "itemID": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemProp": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemRef": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemScope": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemType": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "key": { + "type": "Key", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "lang": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "nonce": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAbort": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAbortCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationEnd": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationEndCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationIteration": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationIterationCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationStart": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationStartCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAuxClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAuxClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBeforeInput": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBeforeInputCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBlur": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBlurCapture": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlay": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayThrough": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayThroughCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onChange": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onChangeCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionEnd": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionEndCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionStart": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionStartCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionUpdate": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionUpdateCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onContextMenu": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onContextMenuCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCopy": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCopyCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCut": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCutCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDoubleClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDoubleClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDrag": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnd": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEndCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnter": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnterCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragExit": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragExitCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragLeave": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragLeaveCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragOver": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragOverCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragStart": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragStartCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDrop": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDropCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDurationChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDurationChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEmptied": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEmptiedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEncrypted": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEncryptedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEnded": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEndedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onError": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onErrorCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onFocus": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onFocusCapture": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onGotPointerCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onGotPointerCaptureCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInput": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInputCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInvalid": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInvalidCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyDown": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyDownCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyPress": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyPressCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyUp": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyUpCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoad": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedData": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedDataCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedMetadata": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedMetadataCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadStart": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadStartCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLostPointerCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLostPointerCaptureCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseDown": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseDownCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseEnter": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseLeave": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseMove": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseMoveCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOut": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOutCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOver": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOverCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseUp": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseUpCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPaste": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPasteCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPause": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPauseCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlay": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlayCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlaying": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlayingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerCancel": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerCancelCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerDown": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerDownCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerEnter": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerEnterCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerLeave": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerLeaveCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerMove": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerMoveCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOut": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOutCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOver": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOverCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerUp": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerUpCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onProgress": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onProgressCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onRateChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onRateChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onReset": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResetCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResize": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResizeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onScroll": { + "type": "UIEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onScrollCapture": { + "type": "UIEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeeked": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeekedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeeking": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeekingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSelect": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSelectCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onStalled": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onStalledCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSubmit": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSubmitCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSuspend": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSuspendCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTimeUpdate": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTimeUpdateCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchCancel": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchCancelCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchEnd": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchEndCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchMove": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchMoveCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchStart": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchStartCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTransitionEnd": { + "type": "TransitionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTransitionEndCapture": { + "type": "TransitionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onVolumeChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onVolumeChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWaiting": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWaitingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWheel": { + "type": "WheelEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWheelCapture": { + "type": "WheelEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "placeholder": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "prefix": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "property": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "radioGroup": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "resource": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "results": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "role": { + "type": "AriaRole", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "security": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "size": { + "type": "\"sizeIcon05\" | \"sizeIcon10\" | \"sizeIcon20\" | \"sizeIcon30\" | \"sizeIcon40\" | \"sizeIcon50\" | \"sizeIcon60\" | \"sizeIcon70\" | \"sizeIcon80\" | \"sizeIcon90\" | \"sizeIcon100\" | \"sizeIcon110\" | (\"sizeIcon05\" | ... 11 more ... | null)[] | { ...; }", + "defaultValue": "sizeIcon30", + "required": false, + "externalProp": false, + "description": "Sets the size of the icon." + }, + "slot": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "spellCheck": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "suppressContentEditableWarning": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "suppressHydrationWarning": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "tabIndex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "title": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "translate": { + "type": "\"yes\" | \"no\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "typeof": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "unselectable": { + "type": "\"on\" | \"off\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "vocab": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + } + } +} diff --git a/packages/paste-core/core-bundle/.gitignore b/packages/paste-core/core-bundle/.gitignore index 668e51d2ff..5729ccbc5f 100644 --- a/packages/paste-core/core-bundle/.gitignore +++ b/packages/paste-core/core-bundle/.gitignore @@ -100,6 +100,7 @@ /textarea /theme /time-picker +/timeline /toast /tooltip /tooltip-primitive diff --git a/packages/paste-core/core-bundle/package.json b/packages/paste-core/core-bundle/package.json index 869d4c69c9..0f8e69df96 100644 --- a/packages/paste-core/core-bundle/package.json +++ b/packages/paste-core/core-bundle/package.json @@ -171,6 +171,7 @@ "@twilio-paste/textarea": "^10.2.0", "@twilio-paste/theme": "^11.1.0", "@twilio-paste/time-picker": "^6.1.1", + "@twilio-paste/timeline": "^0.0.0", "@twilio-paste/toast": "^12.2.0", "@twilio-paste/tooltip": "^11.1.1", "@twilio-paste/tooltip-primitive": "^2.0.1", diff --git a/packages/paste-core/core-bundle/src/index.tsx b/packages/paste-core/core-bundle/src/index.tsx index 985d82af4c..29a53f9e81 100644 --- a/packages/paste-core/core-bundle/src/index.tsx +++ b/packages/paste-core/core-bundle/src/index.tsx @@ -82,6 +82,7 @@ export * from "@twilio-paste/tabs-primitive"; export * from "@twilio-paste/text"; export * from "@twilio-paste/textarea"; export * from "@twilio-paste/time-picker"; +export * from "@twilio-paste/timeline"; export * from "@twilio-paste/toast"; export * from "@twilio-paste/tooltip"; export * from "@twilio-paste/tooltip-primitive"; diff --git a/packages/paste-core/core-bundle/src/timeline.tsx b/packages/paste-core/core-bundle/src/timeline.tsx new file mode 100644 index 0000000000..71a46ac063 --- /dev/null +++ b/packages/paste-core/core-bundle/src/timeline.tsx @@ -0,0 +1 @@ +export * from "@twilio-paste/timeline"; diff --git a/packages/paste-website/src/assets/images/timeline-infinite.png b/packages/paste-website/src/assets/images/timeline-infinite.png new file mode 100644 index 0000000000..e1ff69516c Binary files /dev/null and b/packages/paste-website/src/assets/images/timeline-infinite.png differ diff --git a/packages/paste-website/src/component-examples/TimelineExamples.ts b/packages/paste-website/src/component-examples/TimelineExamples.ts new file mode 100644 index 0000000000..57801c90d9 --- /dev/null +++ b/packages/paste-website/src/component-examples/TimelineExamples.ts @@ -0,0 +1,319 @@ +export const TimelineStart = ` +const TimelineStart = () => { + return ( + + + Event details + + + + Event details + + + + Event details + + + ); +}; +render() +`.trim(); + +export const TimelineBasic = ` +const TimelineBasic = () => { + return ( + + + + + + + + + + + In-progress + + Auto renew every month until cancelled + + + + ); +}; +render() +`.trim(); + +export const TimelineIcon = ` +const TimelineIcon = () => { + return ( + + + Twilio Platform + + + + Twilio Platform + + + + Twilio Platform + + + + Twilio Platform + + + + Twilio Platform + + + ); +}; +render() +`.trim(); + +export const TimelineCollapsible = ` +const TimelineCollapsible = () => { + return ( + + + Twilio Platform + + + + + + + + + Agent:{" "} + + Lizbeth Sarvati + + + + + + + + Queue:{" "} + + Promo inbounds + + + + + + + + + Sentiment:{" "} + + Lizbeth Sarvati + + + + + + + + Disposition code:{" "} + + Promo inquiry + + + + + + + + + Agent:{" "} + + Ana received a $555 promotion on her phone and was interested in learning more about it. + She was curious if she would be eligible for the promotion by increasing her deposits by $5,000 over the next two months. + The agent explained that this was possible and suggested that she accept the offer through her app. + + + + + + + + + + Campaign:{" "} + + Earn $555 promotion + + + + + ID:{" "} + + WB-W-555-PROMO + + + + + + Twilio Platform + + + ); +}; +render() +`.trim(); + +export const TimelineGrouped = ` +const TimelineGrouped = () => { + return ( + + + + + + In-progress + + Filters enable users to narrow down and refine results across various types of content pages, + including rich content pages, data tables, lists, data insights, and more. + + + + + + + In-progress + + A component used to display a list of events that occurred in chronological order. + + + + + + + + + To do + + + + + + ); +}; +render() +`.trim(); + +export const TimelineComposition = ` +const TimelineComposition = () => { + return ( + + + + The message was successfully sent through the following diffusion channels: + + + + + + + + + + + + + + + + + + +
Channel NameStatus
+ Customer Updates + + + Sent + +
+ Special Promotions + + + Sent + +
+ + + + + + + The message has been scheduled for delivery. + + View Scheduled Message + + + + + + + + Completed + + + + + ); +}; +render() +`.trim(); + +export const TimelineTimestamp = ` +const TimelineTimestamp = () => { + return ( + + + + + Warning + + + + + + + + Success + + + + + + + + Warning + + + + + ); +}; +render() +`.trim(); diff --git a/packages/paste-website/src/pages/components/timeline/api.mdx b/packages/paste-website/src/pages/components/timeline/api.mdx new file mode 100644 index 0000000000..78d0ee1f69 --- /dev/null +++ b/packages/paste-website/src/pages/components/timeline/api.mdx @@ -0,0 +1,70 @@ +export const meta = { + title: 'Timeline - API - Components', + package: '@twilio-paste/timeline', + description: 'A form component used to select a time.', + slug: '/components/timeline/api', +}; + +import Changelog from "@twilio-paste/timeline/CHANGELOG.md"; +import packageJson from "@twilio-paste/timeline/package.json"; +import {SidebarCategoryRoutes} from '../../../constants'; +import ComponentPageLayout from '../../../layouts/ComponentPageLayout'; +import {getFeature, getNavigationData, getComponentApi} from '../../../utils/api'; + +export default ComponentPageLayout; + +export const getStaticProps = async () => { + const navigationData = await getNavigationData(); + const feature = await getFeature('Timeline'); + const {componentApi, componentApiTocData} = getComponentApi('@twilio-paste/timeline'); + return { + props: { + data: { + ...packageJson, + ...feature, + }, + componentApi, + mdxHeadings: [...mdxHeadings, ...componentApiTocData], + navigationData, + pageHeaderData: { + categoryRoute: SidebarCategoryRoutes.COMPONENTS, + githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/timeline', + storybookUrl: '/?path=/story/components-timeline--default-timeline', + }, + }, + }; +}; + +## Installation + +```bash +yarn add @twilio-paste/timeline - or - yarn add @twilio-paste/core +``` + +## Usage + +```jsx +import {Timeline, TimelineItem} from '@twilio-paste/core/timeline'; + +const TimePickerExample = () => { + return ( + + + Event details + + + + Event details + + + + Event details + + + ); +}; +``` + +## Props + + diff --git a/packages/paste-website/src/pages/components/timeline/changelog.mdx b/packages/paste-website/src/pages/components/timeline/changelog.mdx new file mode 100644 index 0000000000..62b4776876 --- /dev/null +++ b/packages/paste-website/src/pages/components/timeline/changelog.mdx @@ -0,0 +1,37 @@ +export const meta = { + title: 'Timeline - Changelog - Components', + package: '@twilio-paste/timeline', + description: 'A form component used to select a time.', + slug: '/components/timeline/changelog', +}; + +import Changelog from '@twilio-paste/timeline/CHANGELOG.md'; +import packageJson from '@twilio-paste/timeline/package.json'; + +import {SidebarCategoryRoutes} from '../../../constants'; +import ComponentPageLayout from '../../../layouts/ComponentPageLayout'; +import {getFeature, getNavigationData} from '../../../utils/api'; + +export default ComponentPageLayout; + +export const getStaticProps = async () => { + const navigationData = await getNavigationData(); + const feature = await getFeature('Timeline'); + return { + props: { + data: { + ...packageJson, + ...feature, + }, + navigationData, + mdxHeadings, + pageHeaderData: { + categoryRoute: SidebarCategoryRoutes.COMPONENTS, + githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/timeline', + storybookUrl: '/?path=/story/components-timeline--default-timeline', + }, + }, + }; +}; + + diff --git a/packages/paste-website/src/pages/components/timeline/index.mdx b/packages/paste-website/src/pages/components/timeline/index.mdx new file mode 100644 index 0000000000..8ad31235b9 --- /dev/null +++ b/packages/paste-website/src/pages/components/timeline/index.mdx @@ -0,0 +1,334 @@ +export const meta = { + title: "Timeline - Components", + package: "@twilio-paste/timeline", + description: "A Timeline is a visual representation of events displayed in chronological order.", + slug: "/components/timeline/", +}; + +import { DatePicker } from "@twilio-paste/date-picker"; +import { HelpText } from "@twilio-paste/help-text"; +import { formatReturnTime, TimePicker } from "@twilio-paste/time-picker"; + +import { Anchor } from "@twilio-paste/anchor"; +import { Callout, CalloutText } from "@twilio-paste/callout"; +import { ListItem, OrderedList, UnorderedList } from "@twilio-paste/list"; +import { Do, DoDont, Dont } from "../../../components/DoDont"; + +import { Box } from "@twilio-paste/box"; +import { AgentIcon } from "@twilio-paste/icons/esm/AgentIcon"; +import { CalendarIcon } from "@twilio-paste/icons/esm/CalendarIcon"; +import { CallIcon } from "@twilio-paste/icons/esm/CallIcon"; +import { DisableIcon } from "@twilio-paste/icons/esm/DisableIcon"; +import { DocumentationIcon } from "@twilio-paste/icons/esm/DocumentationIcon"; +import { NotesIcon } from "@twilio-paste/icons/esm/NotesIcon"; +import { PaymentIcon } from "@twilio-paste/icons/esm/PaymentIcon"; +import { ProcessInProgressIcon } from "@twilio-paste/icons/esm/ProcessInProgressIcon"; +import { SMSCapableIcon } from "@twilio-paste/icons/esm/SMSCapableIcon"; +import { SMSIcon } from "@twilio-paste/icons/esm/SMSIcon"; +import { SentIcon } from "@twilio-paste/icons/esm/SentIcon"; +import { SentimentPositiveIcon } from "@twilio-paste/icons/esm/SentimentPositiveIcon"; +import { StarIcon } from "@twilio-paste/icons/esm/StarIcon"; +import { SupportRequestIcon } from "@twilio-paste/icons/esm/SupportRequestIcon"; +import { WarningIcon } from "@twilio-paste/icons/esm/WarningIcon"; +import { Paragraph } from "@twilio-paste/paragraph"; +import { StatusBadge } from "@twilio-paste/status"; +import { Table, TBody, Td, Th, THead, Tr } from '@twilio-paste/table'; +import { Timeline, TimelineItem, TimelineItemGroup } from "@twilio-paste/timeline"; +import { + TimelineBasic, + TimelineCollapsible, + TimelineComposition, + TimelineGrouped, + TimelineIcon, + TimelineStart, + TimelineTimestamp, +} from "../../../component-examples/TimelineExamples.ts"; +import { ResponsiveImage } from '../../../components/ResponsiveImage'; + +import { SupportIcon } from "@twilio-paste/icons/esm/SupportIcon"; +import Changelog from "@twilio-paste/timeline/CHANGELOG.md"; +import packageJson from "@twilio-paste/timeline/package.json"; +import InfiniteTimeline from '../../../assets/images/timeline-infinite.png'; +import { SidebarCategoryRoutes } from "../../../constants"; +import ComponentPageLayout from "../../../layouts/ComponentPageLayout"; +import { getFeature, getNavigationData } from "../../../utils/api"; +export default ComponentPageLayout; + +export const getStaticProps = async () => { + const navigationData = await getNavigationData(); + const feature = await getFeature("Timeline"); + return { + props: { + data: { + ...packageJson, + ...feature, + }, + navigationData, + mdxHeadings, + pageHeaderData: { + categoryRoute: SidebarCategoryRoutes.COMPONENTS, + githubUrl: "https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/timeline", + storybookUrl: "/?path=/story/components-timeline--default-timeline", + }, + }, + }; +}; + + + {TimelineStart} + + +## Guidelines + +### About Timeline + +A Timeline can be used to display historical, current or future events or information in chronological order based on when they happened or are scheduled to happen. + +Timelines can be used in different use cases, such as tracking milestones, monitoring system logs, or visualizing user activity. + +### Accessibility + + + + Timeline is an ordered list (<ol>) and TimelineItem is a list item (<li>). + + + + The only tabbable and interactive part of a Timeline is the toggle button when using the collapsible prop + + + collapsible TimelineItems use the Summary Detail component. The toggle button is labeled by the value of the timestamp prop. + If the value is too verbose for a screen reader or not a clear label for the collapsed content, provide a helpful label for the button using the collapsibleLabelText prop on TimelineItem + + + + + Don’t use icons TimelineItem markers to represent status like warning, error, or success. Since the marker is non-interactive, relying on icons for semantic meaning can cause accessibility challenges, particularly for people using screen readers. + + + +### Timeline vs. Progress Steps + +Use Timeline: + + + To display the history or sequence of events, focusing on what has happened over time. + + When user interaction is secondary, and progress does not depend on user actions, ensuring the process continues + even without direct user input. + + + +Use Progress Steps: + + + To guide users through a sequence of steps necessary to complete a task. + + When user interaction is required at certain points in a process and actions are necessary to complete a goal. + + + +## Examples + +### Timeline + +Use a basic Timeline as the default option to display a series of events that need to be ordered by time. + + + {TimelineBasic} + + +### Timeline with icons + +Use a Timeline with icons to highlight events that would benefit from a visual cue to make the event more noticeable. +Timeline icons are decorative, so they should not convey any information that is not clear from the text alone. +Do not use icons to convey status or state. + +Provide the TimelineItem with an `icon` prop to display an icon instead of the default dot. You must import the icon before passing it to the icon prop. +The icon must be a [Paste Icon](/components/icon). Icons passed to TimelineItems within a TimelineItemGroup will be ignored, as only direct children of the Timeline component should have visual markers. + + + Tip: Combine icons with dots to visually emphasize specific events within the Timeline. + + + + {TimelineIcon} + + +### Collapsible Timeline content + +Use the `collapsible` prop when your Timeline includes additional information that doesn't need to be visible at all times. + + + {TimelineCollapsible} + + +### Grouped Timeline + +Use when multiple events happen at the same time or can be grouped under a common category to make the Timeline clearer. + +In a grouped Timeline, the timestamp is optional for individual Timeline items since they share a common timestamp. +However, for collapsible Timeline items, if no timestamp is provided, a heading must be included as the collapsible header. + + + {TimelineGrouped} + + + + + It is not required to group all events that occur with the same timestamp. Grouping should be used when it enhances + clarity, particularly when the events are part of the same logical sequence or related set of actions that match the + user's mental model. + + + +## Timeline event loading + +### Load more + +Use a “Load more” Button in the Timeline when the screen viewport is limited. +The events should load in batches of the same number of events that were initially displayed, once all the events have been displayed, remove the “Load more” Button. + +### Infinite scroll + +Use infinite scroll only when the Timeline is the last item on the page or surface, and there are no footers or other elements below it that the user needs to interact with. +Use [Skeleton Loader](/components/skeleton-loader) for results that might take a while to load. + + + + Tip: For very long Timelines, where pressing 'Load more' Buttons might become cumbersome, consider using a{" "} + Side Modal with infinite scroll to display the complete list of + events. + + + + + + +## Composition notes + +A Timeline should be presented in chronological order. The order can either be descending (most recent event at the top the list) or ascending (oldest event at the top of the list) + +**Use descending order on a Timeline when the current event is the most relevant information for the user.** + + + + Time sensitive information, for example an SMS sending tracker where the final status (sent or failed) is + crucial for the user to track in real time. + + + Long lists of events that are constantly updated, for example in customer call logs where the most recent + interaction is displayed first so agents can access the information in a timely manner. + + + +**Use ascending order on a Timeline when understanding the progression from the oldest event to the most recent is essential.** + + + + Diagnosing an issue, for example in platform issue reporting, where understanding the sequence of reported + issues is necessary to understand the problem. + + + Events that evolve through time, for example in payment history where the price has changed over time. + + + +Any content and other components can be placed within the Timeline item detail. + + + {TimelineComposition} + + +### Timestamp + +Follow Paste's [date guidelines](/foundations/content/product-style-guide#dates) and [time guidelines](/foundations/content/product-style-guide#time) to format the timestamp for each Timeline item. +In use cases where more than one timestamp per Timeline item is required, use separators in between timestamps for clarity. Order multiple timestamps by starting with the largest time unit and ending with the smallest: + + + Month and Day, Year (ex: "August 10, 2024") + Hour, Minute, Second (ex: "12:38 pm") + Additional Details (ex: "0.2 s" for duration) + + + + {TimelineTimestamp} + + +## When to use Timeline + + + + + + + + + + + + + + + Sign up + + + Sign up + + + + + + + + Warning + + + + + + + + Sending + + + Undelivered + + + + diff --git a/yarn.lock b/yarn.lock index ef15b4e291..a458b83862 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12361,6 +12361,7 @@ __metadata: "@twilio-paste/textarea": ^10.2.0 "@twilio-paste/theme": ^11.1.0 "@twilio-paste/time-picker": ^6.1.1 + "@twilio-paste/timeline": ^0.0.0 "@twilio-paste/toast": ^12.2.0 "@twilio-paste/tooltip": ^11.1.1 "@twilio-paste/tooltip-primitive": ^2.0.1 @@ -15475,6 +15476,66 @@ __metadata: languageName: unknown linkType: soft +"@twilio-paste/timeline@^0.0.0, @twilio-paste/timeline@workspace:packages/paste-core/components/timeline": + version: 0.0.0-use.local + resolution: "@twilio-paste/timeline@workspace:packages/paste-core/components/timeline" + dependencies: + "@twilio-paste/anchor": ^12.0.0 + "@twilio-paste/animation-library": ^2.0.0 + "@twilio-paste/box": ^10.2.0 + "@twilio-paste/button": ^14.1.0 + "@twilio-paste/card": ^9.1.0 + "@twilio-paste/color-contrast-utils": ^5.0.0 + "@twilio-paste/customization": ^8.1.1 + "@twilio-paste/design-tokens": ^10.3.0 + "@twilio-paste/detail-text": ^3.1.0 + "@twilio-paste/disclosure-primitive": ^2.1.1 + "@twilio-paste/icons": ^12.2.0 + "@twilio-paste/reakit-library": ^2.0.0 + "@twilio-paste/spinner": ^14.0.0 + "@twilio-paste/stack": ^8.0.0 + "@twilio-paste/style-props": ^9.1.1 + "@twilio-paste/styling-library": ^3.0.0 + "@twilio-paste/summary-detail": ^1.0.0 + "@twilio-paste/text": ^10.1.1 + "@twilio-paste/theme": ^11.0.1 + "@twilio-paste/types": ^6.0.0 + "@twilio-paste/uid-library": ^2.0.0 + "@types/react": ^18.0.27 + "@types/react-dom": ^18.0.10 + react: ^18.0.0 + react-dom: ^18.0.0 + tsx: ^4.0.0 + typescript: ^4.9.4 + peerDependencies: + "@twilio-paste/anchor": ^12.0.0 + "@twilio-paste/animation-library": ^2.0.0 + "@twilio-paste/box": ^10.2.0 + "@twilio-paste/button": ^14.0.0 + "@twilio-paste/card": ^9.1.0 + "@twilio-paste/color-contrast-utils": ^5.0.0 + "@twilio-paste/customization": ^8.1.1 + "@twilio-paste/design-tokens": ^10.3.0 + "@twilio-paste/detail-text": ^3.1.0 + "@twilio-paste/disclosure-primitive": ^2.1.1 + "@twilio-paste/icons": ^12.0.0 + "@twilio-paste/reakit-library": ^2.0.0 + "@twilio-paste/spinner": ^14.0.0 + "@twilio-paste/stack": ^8.0.0 + "@twilio-paste/style-props": ^9.1.1 + "@twilio-paste/styling-library": ^3.0.0 + "@twilio-paste/summary-detail": ^1.0.0 + "@twilio-paste/text": ^10.0.0 + "@twilio-paste/theme": ^11.0.1 + "@twilio-paste/types": ^6.0.0 + "@twilio-paste/uid-library": ^2.0.0 + "@types/react": ^16.8.6 || ^17.0.2 || ^18.0.27 + "@types/react-dom": ^16.8.6 || ^17.0.2 || ^18.0.10 + react: ^16.8.6 || ^17.0.2 || ^18.0.0 + react-dom: ^16.8.6 || ^17.0.2 || ^18.0.0 + languageName: unknown + linkType: soft + "@twilio-paste/toast@^12.1.1, @twilio-paste/toast@^12.2.0, @twilio-paste/toast@workspace:packages/paste-core/components/toast": version: 0.0.0-use.local resolution: "@twilio-paste/toast@workspace:packages/paste-core/components/toast"