From 014791ff51457f2a698de7800442042c7c2b1c14 Mon Sep 17 00:00:00 2001 From: Jo du Plessis Date: Mon, 24 Jun 2024 08:23:02 +0200 Subject: [PATCH 01/10] update dummy-content --- src/components/pro.component.tsx | 232 ++++++++++++++++--------------- src/dummy-data/calendar.tsx | 8 +- src/dummy-data/data-grid.tsx | 27 ++-- src/dummy-data/todo.tsx | 10 +- 4 files changed, 148 insertions(+), 129 deletions(-) diff --git a/src/components/pro.component.tsx b/src/components/pro.component.tsx index 65fdacac..4aec1ba7 100644 --- a/src/components/pro.component.tsx +++ b/src/components/pro.component.tsx @@ -1,20 +1,22 @@ import * as data from '@/dummy-data' import { - Button, Card, FIX, Flexer, + Button, Card, FIBin, FIX, Flexer, Form, Heading, Icon, Input, Link, Menu, MenuProvider, MenuSection, Modal, Option, Options, Pill, Portal, - Text, View, generateUEID + Text, View, generateUEID, + useDialog } from '@fold-dev/core' +import * as Token from '@fold-dev/design/tokens' import { - CalendarDays, CalendarProvider, CalendarSchedule, CsvImporter, DataGrid, Kanban, + CalendarDays, CalendarProvider, CalendarSchedule, CsvImporter, DataGrid, DataGridHeader, - DataGridTypes, DatePicker, DateRangeProvider, Detail, KanbanColumnMenu, KanbanSelection, KanbanSwimlaneMenu, KanbanTypes, LabelMenu, Popup, Todo, TodoSectionMenu, UserMenu, dataGridState, - dispatchDataGridEvent, dispatchTodoEvent, getShortDateFormat, kanbanState, setExperimentalGlobalRowCellComponents, todoState + DataGridTypes, DatePicker, DateRangeProvider, Detail, + Kanban, + KanbanColumnMenu, KanbanSelection, KanbanSwimlaneMenu, KanbanTypes, LabelMenu, Popup, Todo, TodoSectionMenu, UserMenu, dataGridState, + dispatchDataGridEvent, dispatchTodoEvent, getShortDateFormat, kanbanState, + todoState } from '@fold-pro/react' -import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline' -import { useLayoutEffect, useMemo, useState } from 'react' -import { PiArrowSquareOutDuotone, PiPlayCircleDuotone } from 'react-icons/pi' -import * as Token from '@fold-dev/design/tokens' +import { useMemo, useState } from 'react' export const Calendar1 = () => { const [days, setDays] = useState(data.days) @@ -239,12 +241,16 @@ export const DataGrid1 = () => { const [columnWidths, setColumnWidths] = useState(data.widths) const [columns, setColumns] = useState(data.columns) const [footerColumns, setFooterColumns] = useState(data.footer) + const [columnTypes, setColumnTypes] = useState(data.columnTypes) const [rows, setRows] = useState(data.rows) + const { setDialog, closeDialog } = useDialog() const handleColumnMove = ({ origin, target }) => { dataGridState({ columnWidths, setColumnWidths, + columnTypes, + setColumnTypes, columns, setColumns, footerColumns, @@ -258,6 +264,8 @@ export const DataGrid1 = () => { dataGridState({ columnWidths, setColumnWidths, + columnTypes, + setColumnTypes, columns, setColumns, footerColumns, @@ -271,6 +279,8 @@ export const DataGrid1 = () => { dataGridState({ columnWidths, setColumnWidths, + columnTypes, + setColumnTypes, columns, setColumns, footerColumns, @@ -284,6 +294,8 @@ export const DataGrid1 = () => { dataGridState({ columnWidths, setColumnWidths, + columnTypes, + setColumnTypes, columns, setColumns, footerColumns, @@ -297,6 +309,8 @@ export const DataGrid1 = () => { dataGridState({ columnWidths, setColumnWidths, + columnTypes, + setColumnTypes, columns, setColumns, footerColumns, @@ -306,16 +320,6 @@ export const DataGrid1 = () => { }).handleCellDelete({ row, col }) } - useLayoutEffect(() => { - - - - - - - setExperimentalGlobalRowCellComponents(data._rowCellComponents) - }, []) - return ( ( @@ -323,98 +327,108 @@ export const DataGrid1 = () => { Menu for: {target} )}> -
- null} - - - - variant="virtual" - virtual={{ - rows: 10, - rowHeight: 40, - paddingTop: 40, - paddingBottom: 30, - }} - hideCheckbox={false} - hideGutter={false} - rows={rows} - columnWidths={columnWidths} - header={ - - setColumnWidths(columnWidths.map((w, i) => (i == index ? width : w))) - } - /> - } - footer={ - null} + // core: + // height={467} + // variant="default" + variant="virtual" + virtual={{ + rows: 10, + rowHeight: 40, + paddingTop: 40, + paddingBottom: 30, + }} + hideCheckbox={false} + rows={rows} + columnWidths={columnWidths} + columnTypes={columnTypes} + header={ + + setColumnWidths(columnWidths.map((w, i) => (i == index ? width : w))) + } + /> + } + footer={ + + } + pinFirst + pinLast + onCellUpdate={handleCellUpdate} + onCellDelete={handleCellDelete} + onColumnMove={handleColumnMove} + onRowMove={handleRowMove} + toolbar={({ rowSelection, cellSelection }) => ( + + + {Object.values(rowSelection).length}{' '} + {Object.values(rowSelection).length == 1 ? 'row' : 'rows'} selected + + { + setDialog({ + title: 'Are you sure?', + description: 'This action cannot be undone.', + portal: Portal, + footer: ( + + + + + ), + }) }} /> - } - pinFirst - pinLast - onCellUpdate={handleCellUpdate} - onCellDelete={handleCellDelete} - onColumnMove={handleColumnMove} - onRowMove={handleRowMove} - toolbar={({ rowSelection, cellSelection }) => ( - - - {Object.values(rowSelection).length} rows,   - {Object.values(cellSelection).length} cells - - { - dispatchDataGridEvent('select-cells', { instanceId: 'instance-1' }) - dispatchDataGridEvent('select-rows', { instanceId: 'instance-1' }) - }} - /> - - )} - /> -
+ + )} + /> ) } diff --git a/src/dummy-data/calendar.tsx b/src/dummy-data/calendar.tsx index 4709dff8..f2d72896 100644 --- a/src/dummy-data/calendar.tsx +++ b/src/dummy-data/calendar.tsx @@ -70,8 +70,8 @@ export const events = [ { id: 'id07', title: 'Holiday', - start: new Date('2024-05-23T21:00:00'), - end: new Date('2024-05-25T22:00:00'), + start: new Date('2024-05-23T12:00:00'), + end: new Date('2024-05-25T12:00:00'), allDay: true, }, { @@ -120,8 +120,8 @@ export const events = [ { id: 'we3', title: 'Meeting with John', - start: new Date('2024-05-5 14:00:00'), - end: new Date('2024-05-5 23:30:00'), + start: new Date('2024-05-06 14:00:00'), + end: new Date('2024-05-06 15:30:00'), color: Token.ColorTeal500, }, { diff --git a/src/dummy-data/data-grid.tsx b/src/dummy-data/data-grid.tsx index 86dcf2c2..25c16373 100644 --- a/src/dummy-data/data-grid.tsx +++ b/src/dummy-data/data-grid.tsx @@ -58,14 +58,21 @@ const countries = [ export const CountrySelect = (props: any) => { const { id, edit, value, options, error, warning, onEdit, onCancel } = props - const { refocus } = useContext(DataGridContext) + const { refocus, selectionLock } = useContext(DataGridContext) const [selected, setSelected] = useState([value]) const ref = useRef(null) + const handleClose = () => { + onCancel() + selectionLock(false) + refocus() // unnecessary + } + const handleSelect = (option, dismiss) => { setSelected([option.key]) onEdit(option.key) - refocus() + selectionLock(false) + refocus() // unnecessary } const handleFilter = (text: string) => { @@ -74,10 +81,9 @@ export const CountrySelect = (props: any) => { useEffect(() => { if (edit) { - waitForRender(() => { - ref.current.focus() - ref.current.childNodes[0].childNodes[0].click() - }) + // manually click on the select input after React renders + selectionLock(true) + waitForRender(() => ref.current.querySelector(':scope input').focus(), 10) } }, [edit]) @@ -87,17 +93,21 @@ export const CountrySelect = (props: any) => { setText(e.target.value)}/> @@ -423,7 +425,7 @@ export const Control = () => { - + ```tsx export const Control = () => { @@ -485,6 +487,7 @@ export const Control = () => { { width={15} height={15} bg={color} + tabIndex={0} className="f-buttonize" onClick={show} /> @@ -692,9 +696,8 @@ export const Pin = () => ( export const WithPopover = () => { const [text, setText] = useState(''); - const { show, delayedShow, hide, visible } = useVisibility(false); - return ( - Plese make sure your password: + return ( + Please make sure your password:
  • Is more than 8 characters long
  • Does not container easily identifiable words
    • @@ -702,34 +705,30 @@ export const WithPopover = () => {
  • Contains special characters
    •      }> - setText(e.target.value)} onFocus={(e) => delayedShow()}/> - ); + setText(e.target.value)}/> + ); };
    - + ```tsx export const WithPopover = () => { const [text, setText] = useState('') - const { show, delayedShow, hide, visible } = useVisibility(false) return ( - - Plese make sure your password: + Please make sure your password:
  • Is more than 8 characters long
  • Does not container easily identifiable words
    • @@ -739,13 +738,14 @@ export const WithPopover = () => { }> setText(e.target.value)} - onFocus={(e) => delayedShow()} /> -     + ) } ``` diff --git a/src/pages/docs/core/menu.mdx b/src/pages/docs/core/menu.mdx index 3f3fd4d1..a6373ae5 100644 --- a/src/pages/docs/core/menu.mdx +++ b/src/pages/docs/core/menu.mdx @@ -24,7 +24,7 @@ export const docs = { 'Menu components are a very common feature of almost any user interface. They are useful when screen real estate is limited or when there is a need to provide additional functionality to the relevant menu target.', } -export const props = [{"tags":{},"filePath":"packages/core/src/menu/index.ts","description":"","displayName":"MenuButton","methods":[],"props":{"menu":{"defaultValue":null,"description":"","name":"menu","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"any"},"tags":{}},"popoverProps":{"defaultValue":null,"description":"","name":"popoverProps","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ targetId?: string; fixPosition?: { top: number; left: number; }; arrow?: boolean; anchor?: PopoutPosition; anchorProps?: any; content?: any; isVisible?: boolean; onDismiss?: any; } & AriaAttributes & CommonProps & ShorthandProps & DOMAttributes<...>"},"tags":{}},"as":{"defaultValue":null,"description":"","name":"as","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"a\" | \"button\""},"tags":{}},"underlined":{"defaultValue":null,"description":"","name":"underlined","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"loading":{"defaultValue":null,"description":"","name":"loading","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"outline":{"defaultValue":null,"description":"","name":"outline","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"flat":{"defaultValue":null,"description":"","name":"flat","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"subtle":{"defaultValue":null,"description":"","name":"subtle","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"variant":{"defaultValue":null,"description":"","name":"variant","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Variant"},"tags":{}},"form":{"defaultValue":null,"description":"","name":"form","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"prefix":{"defaultValue":null,"description":"","name":"prefix","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"suffix":{"defaultValue":null,"description":"","name":"suffix","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"active":{"defaultValue":null,"description":"","name":"active","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"},{"fileName":"fold/packages/core/src/types/index.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"target":{"defaultValue":null,"description":"","name":"target","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"LinkTarget"},"tags":{}},"href":{"defaultValue":null,"description":"","name":"href","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"ellipsis":{"defaultValue":null,"description":"","name":"ellipsis","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"onClick":{"defaultValue":null,"description":"","name":"onClick","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"},{"fileName":"fold/node_modules/@types/react/ts5.0/index.d.ts","name":"DOMAttributes"}],"required":false,"type":{"name":"any"},"tags":{}},"type":{"defaultValue":null,"description":"","name":"type","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"button\" | \"submit\""},"tags":{}}}},{"tags":{},"filePath":"packages/core/src/menu/index.ts","description":"","displayName":"MenuItemOption","methods":[],"props":{"value":{"defaultValue":null,"description":"","name":"value","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string | number"},"tags":{}},"type":{"defaultValue":null,"description":"","name":"type","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"checkbox\" | \"radio\""},"tags":{}},"role":{"defaultValue":null,"description":"","name":"role","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"},{"fileName":"fold/packages/core/src/types/index.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"menu":{"defaultValue":null,"description":"","name":"menu","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"target":{"defaultValue":null,"description":"","name":"target","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"href":{"defaultValue":null,"description":"","name":"href","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"label":{"defaultValue":null,"description":"","name":"label","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"prefix":{"defaultValue":null,"description":"","name":"prefix","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"suffix":{"defaultValue":null,"description":"","name":"suffix","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"},{"fileName":"fold/packages/core/src/types/index.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"active":{"defaultValue":null,"description":"","name":"active","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"onClick":{"defaultValue":null,"description":"","name":"onClick","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"},{"fileName":"fold/node_modules/@types/react/ts5.0/index.d.ts","name":"DOMAttributes"}],"required":false,"type":{"name":"any"},"tags":{}},"tabIndex":{"defaultValue":null,"description":"","name":"tabIndex","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"},{"fileName":"fold/packages/core/src/types/index.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"setFocusToPreviousMenuitem":{"defaultValue":null,"description":"","name":"setFocusToPreviousMenuitem","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"setFocusToNextMenuitem":{"defaultValue":null,"description":"","name":"setFocusToNextMenuitem","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"setFocusToFirstMenuitem":{"defaultValue":null,"description":"","name":"setFocusToFirstMenuitem","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"setFocusToLastMenuitem":{"defaultValue":null,"description":"","name":"setFocusToLastMenuitem","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"setFocusToCache":{"defaultValue":null,"description":"","name":"setFocusToCache","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"closeFromMenu":{"defaultValue":null,"description":"","name":"closeFromMenu","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"anchorProps":{"defaultValue":null,"description":"","name":"anchorProps","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Omit"},"tags":{}}}},{"tags":{},"filePath":"packages/core/src/menu/index.ts","description":"","displayName":"MenuOptionGroup","methods":[],"props":{"defaultValue":{"defaultValue":null,"description":"","name":"defaultValue","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"title":{"defaultValue":null,"description":"","name":"title","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"type":{"defaultValue":null,"description":"","name":"type","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"checkbox\" | \"radio\""},"tags":{}},"onChange":{"defaultValue":null,"description":"","name":"onChange","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"},{"fileName":"fold/node_modules/@types/react/ts5.0/index.d.ts","name":"DOMAttributes"}],"required":false,"type":{"name":"any"},"tags":{}}}},{"tags":{},"filePath":"packages/core/src/menu/index.ts","description":"","displayName":"Menu","methods":[],"props":{"disableAutoFocus":{"defaultValue":null,"description":"","name":"disableAutoFocus","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"variant":{"defaultValue":null,"description":"","name":"variant","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"menu\" | \"menubar\""},"tags":{}},"width":{"defaultValue":null,"description":"CSS width","name":"width","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"},{"fileName":"fold/packages/core/src/types/index.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string | number"},"tags":{}},"closeFromParenMenuItem":{"defaultValue":null,"description":"","name":"closeFromParenMenuItem","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"isSubmenu":{"defaultValue":null,"description":"","name":"isSubmenu","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}}}},{"tags":{},"filePath":"packages/core/src/menu/index.ts","description":"","displayName":"MenuItem","methods":[],"props":{"role":{"defaultValue":null,"description":"","name":"role","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"},{"fileName":"fold/packages/core/src/types/index.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"menu":{"defaultValue":null,"description":"","name":"menu","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"target":{"defaultValue":null,"description":"","name":"target","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"href":{"defaultValue":null,"description":"","name":"href","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"label":{"defaultValue":null,"description":"","name":"label","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"prefix":{"defaultValue":null,"description":"","name":"prefix","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"suffix":{"defaultValue":null,"description":"","name":"suffix","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"},{"fileName":"fold/packages/core/src/types/index.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"active":{"defaultValue":null,"description":"","name":"active","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"onClick":{"defaultValue":null,"description":"","name":"onClick","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"},{"fileName":"fold/node_modules/@types/react/ts5.0/index.d.ts","name":"DOMAttributes"}],"required":false,"type":{"name":"any"},"tags":{}},"tabIndex":{"defaultValue":null,"description":"","name":"tabIndex","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"},{"fileName":"fold/packages/core/src/types/index.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"setFocusToPreviousMenuitem":{"defaultValue":null,"description":"","name":"setFocusToPreviousMenuitem","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"setFocusToNextMenuitem":{"defaultValue":null,"description":"","name":"setFocusToNextMenuitem","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"setFocusToFirstMenuitem":{"defaultValue":null,"description":"","name":"setFocusToFirstMenuitem","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"setFocusToLastMenuitem":{"defaultValue":null,"description":"","name":"setFocusToLastMenuitem","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"setFocusToCache":{"defaultValue":null,"description":"","name":"setFocusToCache","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"closeFromMenu":{"defaultValue":null,"description":"","name":"closeFromMenu","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"anchorProps":{"defaultValue":null,"description":"","name":"anchorProps","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Omit"},"tags":{}}}},{"tags":{},"filePath":"packages/core/src/menu/index.ts","description":"","displayName":"MenuHeading","methods":[],"props":{"headingProps":{"defaultValue":null,"description":"","name":"headingProps","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ jumbo?: boolean; huge?: boolean; as?: Headings; } & AriaAttributes & CommonProps & ShorthandProps & DOMAttributes"},"tags":{}},"prefix":{"defaultValue":null,"description":"","name":"prefix","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"suffix":{"defaultValue":null,"description":"","name":"suffix","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}}}},{"tags":{},"filePath":"packages/core/src/menu/index.ts","description":"","displayName":"MenuSection","methods":[],"props":{}},{"tags":{},"filePath":"packages/core/src/menu/index.ts","description":"","displayName":"MenuDivider","methods":[],"props":{}},{"tags":{},"filePath":"packages/core/src/menu/index.ts","description":"","displayName":"MenuProvider","methods":[],"props":{"menu":{"defaultValue":null,"description":"","name":"menu","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"any"},"tags":{}},"popoverProps":{"defaultValue":null,"description":"","name":"popoverProps","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ targetId?: string; fixPosition?: { top: number; left: number; }; arrow?: boolean; anchor?: PopoutPosition; anchorProps?: any; content?: any; isVisible?: boolean; onDismiss?: any; } & AriaAttributes & CommonProps & ShorthandProps & DOMAttributes<...>"},"tags":{}}}},{"tags":{},"filePath":"packages/core/src/menu/index.ts","description":"","displayName":"MenuContext","methods":[],"props":{"data":{"defaultValue":null,"description":"","name":"data","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"any"},"tags":{}}}}] +export const props = [{"tags":{},"filePath":"packages/core/src/menu/index.ts","description":"","displayName":"MenuButton","methods":[],"props":{"menu":{"defaultValue":null,"description":"","name":"menu","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"any"},"tags":{}},"popoverProps":{"defaultValue":null,"description":"","name":"popoverProps","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ hardEscape?: boolean; __focusTrapTimeoutDelay?: number; __blockDismissEvent?: boolean; focusTrap?: boolean; targetId?: string; fixPosition?: { top: number; left: number; }; arrow?: boolean; anchor?: PopoutPosition; anchorProps?: any; content?: any; isVisible?: boolean; onDismiss?: any; } & AriaAttributes & CommonP..."},"tags":{}},"as":{"defaultValue":null,"description":"","name":"as","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"a\" | \"button\""},"tags":{}},"underlined":{"defaultValue":null,"description":"","name":"underlined","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"loading":{"defaultValue":null,"description":"","name":"loading","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"outline":{"defaultValue":null,"description":"","name":"outline","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"flat":{"defaultValue":null,"description":"","name":"flat","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"subtle":{"defaultValue":null,"description":"","name":"subtle","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"variant":{"defaultValue":null,"description":"","name":"variant","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Variant"},"tags":{}},"form":{"defaultValue":null,"description":"","name":"form","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"prefix":{"defaultValue":null,"description":"","name":"prefix","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"suffix":{"defaultValue":null,"description":"","name":"suffix","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"active":{"defaultValue":null,"description":"","name":"active","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"},{"fileName":"fold/packages/core/src/types/index.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"target":{"defaultValue":null,"description":"","name":"target","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"LinkTarget"},"tags":{}},"href":{"defaultValue":null,"description":"","name":"href","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"ellipsis":{"defaultValue":null,"description":"","name":"ellipsis","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"onClick":{"defaultValue":null,"description":"","name":"onClick","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"},{"fileName":"fold/node_modules/@types/react/ts5.0/index.d.ts","name":"DOMAttributes"}],"required":false,"type":{"name":"any"},"tags":{}},"type":{"defaultValue":null,"description":"","name":"type","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"button\" | \"submit\""},"tags":{}}}},{"tags":{},"filePath":"packages/core/src/menu/index.ts","description":"","displayName":"MenuItemOption","methods":[],"props":{"value":{"defaultValue":null,"description":"","name":"value","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string | number"},"tags":{}},"type":{"defaultValue":null,"description":"","name":"type","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"checkbox\" | \"radio\""},"tags":{}},"role":{"defaultValue":null,"description":"","name":"role","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"},{"fileName":"fold/packages/core/src/types/index.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"menu":{"defaultValue":null,"description":"","name":"menu","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"target":{"defaultValue":null,"description":"","name":"target","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"href":{"defaultValue":null,"description":"","name":"href","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"label":{"defaultValue":null,"description":"","name":"label","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"prefix":{"defaultValue":null,"description":"","name":"prefix","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"suffix":{"defaultValue":null,"description":"","name":"suffix","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"},{"fileName":"fold/packages/core/src/types/index.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"active":{"defaultValue":null,"description":"","name":"active","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"onClick":{"defaultValue":null,"description":"","name":"onClick","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"},{"fileName":"fold/node_modules/@types/react/ts5.0/index.d.ts","name":"DOMAttributes"}],"required":false,"type":{"name":"any"},"tags":{}},"tabIndex":{"defaultValue":null,"description":"","name":"tabIndex","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"},{"fileName":"fold/packages/core/src/types/index.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"setFocusToPreviousMenuitem":{"defaultValue":null,"description":"","name":"setFocusToPreviousMenuitem","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"setFocusToNextMenuitem":{"defaultValue":null,"description":"","name":"setFocusToNextMenuitem","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"setFocusToFirstMenuitem":{"defaultValue":null,"description":"","name":"setFocusToFirstMenuitem","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"setFocusToLastMenuitem":{"defaultValue":null,"description":"","name":"setFocusToLastMenuitem","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"setFocusToCache":{"defaultValue":null,"description":"","name":"setFocusToCache","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"closeFromMenu":{"defaultValue":null,"description":"","name":"closeFromMenu","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"anchorProps":{"defaultValue":null,"description":"","name":"anchorProps","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Omit"},"tags":{}}}},{"tags":{},"filePath":"packages/core/src/menu/index.ts","description":"","displayName":"MenuOptionGroup","methods":[],"props":{"defaultValue":{"defaultValue":null,"description":"","name":"defaultValue","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"title":{"defaultValue":null,"description":"","name":"title","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"type":{"defaultValue":null,"description":"","name":"type","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"checkbox\" | \"radio\""},"tags":{}},"onChange":{"defaultValue":null,"description":"","name":"onChange","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"},{"fileName":"fold/node_modules/@types/react/ts5.0/index.d.ts","name":"DOMAttributes"}],"required":false,"type":{"name":"any"},"tags":{}}}},{"tags":{},"filePath":"packages/core/src/menu/index.ts","description":"","displayName":"Menu","methods":[],"props":{"disableAutoFocus":{"defaultValue":null,"description":"","name":"disableAutoFocus","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"variant":{"defaultValue":null,"description":"","name":"variant","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"menu\" | \"menubar\""},"tags":{}},"width":{"defaultValue":null,"description":"CSS width","name":"width","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"},{"fileName":"fold/packages/core/src/types/index.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string | number"},"tags":{}},"closeFromParentMenuItem":{"defaultValue":null,"description":"","name":"closeFromParentMenuItem","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"isSubmenu":{"defaultValue":null,"description":"","name":"isSubmenu","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}}}},{"tags":{},"filePath":"packages/core/src/menu/index.ts","description":"","displayName":"MenuItem","methods":[],"props":{"role":{"defaultValue":null,"description":"","name":"role","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"},{"fileName":"fold/packages/core/src/types/index.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"menu":{"defaultValue":null,"description":"","name":"menu","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"target":{"defaultValue":null,"description":"","name":"target","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"href":{"defaultValue":null,"description":"","name":"href","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"label":{"defaultValue":null,"description":"","name":"label","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"prefix":{"defaultValue":null,"description":"","name":"prefix","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"suffix":{"defaultValue":null,"description":"","name":"suffix","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"},{"fileName":"fold/packages/core/src/types/index.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"active":{"defaultValue":null,"description":"","name":"active","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"onClick":{"defaultValue":null,"description":"","name":"onClick","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"},{"fileName":"fold/node_modules/@types/react/ts5.0/index.d.ts","name":"DOMAttributes"}],"required":false,"type":{"name":"any"},"tags":{}},"tabIndex":{"defaultValue":null,"description":"","name":"tabIndex","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"},{"fileName":"fold/packages/core/src/types/index.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"setFocusToPreviousMenuitem":{"defaultValue":null,"description":"","name":"setFocusToPreviousMenuitem","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"setFocusToNextMenuitem":{"defaultValue":null,"description":"","name":"setFocusToNextMenuitem","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"setFocusToFirstMenuitem":{"defaultValue":null,"description":"","name":"setFocusToFirstMenuitem","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"setFocusToLastMenuitem":{"defaultValue":null,"description":"","name":"setFocusToLastMenuitem","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"setFocusToCache":{"defaultValue":null,"description":"","name":"setFocusToCache","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"closeFromMenu":{"defaultValue":null,"description":"","name":"closeFromMenu","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"anchorProps":{"defaultValue":null,"description":"","name":"anchorProps","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Omit"},"tags":{}}}},{"tags":{},"filePath":"packages/core/src/menu/index.ts","description":"","displayName":"MenuHeading","methods":[],"props":{"headingProps":{"defaultValue":null,"description":"","name":"headingProps","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ jumbo?: boolean; huge?: boolean; as?: Headings; } & AriaAttributes & CommonProps & ShorthandProps & DOMAttributes"},"tags":{}},"prefix":{"defaultValue":null,"description":"","name":"prefix","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"suffix":{"defaultValue":null,"description":"","name":"suffix","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}}}},{"tags":{},"filePath":"packages/core/src/menu/index.ts","description":"","displayName":"MenuSection","methods":[],"props":{}},{"tags":{},"filePath":"packages/core/src/menu/index.ts","description":"","displayName":"MenuDivider","methods":[],"props":{}},{"tags":{},"filePath":"packages/core/src/menu/index.ts","description":"","displayName":"MenuProvider","methods":[],"props":{"menu":{"defaultValue":null,"description":"","name":"menu","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"any"},"tags":{}},"popoverProps":{"defaultValue":null,"description":"","name":"popoverProps","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ hardEscape?: boolean; __focusTrapTimeoutDelay?: number; __blockDismissEvent?: boolean; focusTrap?: boolean; targetId?: string; fixPosition?: { top: number; left: number; }; arrow?: boolean; anchor?: PopoutPosition; anchorProps?: any; content?: any; isVisible?: boolean; onDismiss?: any; } & AriaAttributes & CommonP..."},"tags":{}}}},{"tags":{},"filePath":"packages/core/src/menu/index.ts","description":"","displayName":"MenuContext","methods":[],"props":{"data":{"defaultValue":null,"description":"","name":"data","declarations":[{"fileName":"fold/packages/core/src/menu/menu.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"any"},"tags":{}}}}] export const css = [[["--f-menu-shadow","var(--f-shadow-menu)"],["--f-menu-padding","var(--f-radius)"],["--f-menu-background-color","var(--f-color-surface)"],["--f-menu-border-color","var(--f-color-border)"],["--f-menu-heading-color","var(--f-color-text-weakest)"],["--f-menu-border-radius","var(--f-radius)"],["--f-menu-item-background-color-hover","var(--f-color-surface-strong)"],["--f-menu-item-background-color-active","var(--f-color-surface-strong)"],["--f-menu-item-color","var(--f-color-text-weaker)"],["--f-menu-item-color-hover","var(--f-color-text-weak)"],["--f-menu-item-color-active","var(--f-color-accent)"],["--f-menu-item-color-system-active","var(--f-color-surface-stronger)"],["--f-menu-item-active-size","0.2rem"],["--f-menu-item-color-disabled","var(--f-color-text-weakest)"],["--f-menu-item-padding","var(--f-space-2) var(--f-space-5)"],["--f-menu-item-height","fit-content"],["--f-menubar-item-padding","var(--f-space-2)"],["--f-menu-divider-spacing","var(--f-space-2)"],["--f-menu-divider-color","var(--f-color-border)"],["--f-menu-item-font-weight","var(--f-font-weight-normal)"],["--f-menu-offset","10px"],["--f-menu-item-ix-spacing","0.75rem"],["--f-menubar-padding","var(--f-space-2)"]]] @@ -50,7 +50,7 @@ import { > Whilst not recommended, the automatic focus on the first item can be disabled. It's disabled here so the page doesn't jump down (to focus on the first item). -export const Usage = () => ( +export const Usage = () => ( Edit Copy Cut @@ -68,11 +68,11 @@ export const Usage = () => ( - + ```tsx export const Usage = () => ( - + Edit Copy Cut @@ -89,7 +89,7 @@ export const Usage = () => ( ``` ### Prefix And Suffix -export const PrefixAndSuffix = () => ( +export const PrefixAndSuffix = () => ( } suffix={}> Core @@ -108,11 +108,11 @@ export const PrefixAndSuffix = () => ( - + ```tsx export const PrefixAndSuffix = () => ( - + } suffix={}> @@ -134,7 +134,7 @@ export const PrefixAndSuffix = () => ( ``` ### States -export const States = () => ( +export const States = () => ( Normal Active Disabled @@ -144,11 +144,11 @@ export const States = () => ( - + ```tsx export const States = () => ( - + Normal Active Disabled @@ -157,7 +157,7 @@ export const States = () => ( ``` ### Option Group -export const OptionGroup = () => ( +export const OptionGroup = () => ( Redux MobX @@ -171,11 +171,11 @@ export const OptionGroup = () => ( - + ```tsx export const OptionGroup = () => ( - + ( ``` ### Submenu -export const Submenu = () => ( +export const Submenu = () => ( }>Edit }>Copy }>Cut @@ -219,11 +219,11 @@ export const Submenu = () => ( - + ```tsx export const Submenu = () => ( - + }>Edit }>Copy }>Cut @@ -259,7 +259,7 @@ export const Submenu = () => ( ``` ### Context -export const Context = () => ( ( +export const Context = () => ( ( {data.heading ?? 'Context Menu'} }>Edit }>Copy @@ -280,13 +280,13 @@ export const Context = () => ( ( - + ```tsx export const Context = () => ( ( - + {data.heading ?? 'Context Menu'} }>Edit }>Copy @@ -350,7 +350,7 @@ export const DropdownMenuButton = () => ( ``` ### Menu Bar -export const MenuBar = () => ( +export const MenuBar = () => ( }>Edit }>Copy }>Cut @@ -374,11 +374,11 @@ export const MenuBar = () => ( - + ```tsx export const MenuBar = () => ( - + }>Edit }>Copy }>Cut diff --git a/src/pages/docs/core/modal.mdx b/src/pages/docs/core/modal.mdx index bf422e3c..6334c24f 100644 --- a/src/pages/docs/core/modal.mdx +++ b/src/pages/docs/core/modal.mdx @@ -12,7 +12,7 @@ export const docs = { 'The Modal component is a fundamental element & useful for crafting any sort of dialogues, popovers, lightboxes, or alerts.', } -export const props = [{"tags":{},"filePath":"packages/core/src/modal/index.ts","description":"","displayName":"ModalClose","methods":[],"props":{"as":{"defaultValue":null,"description":"","name":"as","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"a\" | \"button\""},"tags":{}},"underlined":{"defaultValue":null,"description":"","name":"underlined","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"loading":{"defaultValue":null,"description":"","name":"loading","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"outline":{"defaultValue":null,"description":"","name":"outline","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"flat":{"defaultValue":null,"description":"","name":"flat","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"subtle":{"defaultValue":null,"description":"","name":"subtle","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"variant":{"defaultValue":null,"description":"","name":"variant","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Variant"},"tags":{}},"form":{"defaultValue":null,"description":"","name":"form","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"prefix":{"defaultValue":null,"description":"","name":"prefix","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"suffix":{"defaultValue":null,"description":"","name":"suffix","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"active":{"defaultValue":null,"description":"","name":"active","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"},{"fileName":"fold/packages/core/src/types/index.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"target":{"defaultValue":null,"description":"","name":"target","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"LinkTarget"},"tags":{}},"href":{"defaultValue":null,"description":"","name":"href","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"ellipsis":{"defaultValue":null,"description":"","name":"ellipsis","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"onClick":{"defaultValue":null,"description":"","name":"onClick","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"},{"fileName":"fold/node_modules/@types/react/ts5.0/index.d.ts","name":"DOMAttributes"}],"required":false,"type":{"name":"any"},"tags":{}},"type":{"defaultValue":null,"description":"","name":"type","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"button\" | \"submit\""},"tags":{}}}},{"tags":{},"filePath":"packages/core/src/modal/index.ts","description":"","displayName":"Modal","methods":[],"props":{"dismissOnEscape":{"defaultValue":null,"description":"","name":"dismissOnEscape","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"focusTrap":{"defaultValue":null,"description":"","name":"focusTrap","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"anchor":{"defaultValue":null,"description":"","name":"anchor","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ModalAnchor"},"tags":{}},"isVisible":{"defaultValue":null,"description":"","name":"isVisible","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"boolean"},"tags":{}},"footer":{"defaultValue":null,"description":"","name":"footer","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement> | ReactElement>[]"},"tags":{}},"header":{"defaultValue":null,"description":"","name":"header","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement> | ReactElement>[]"},"tags":{}},"borderless":{"defaultValue":null,"description":"","name":"borderless","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"disableBackgroundDismiss":{"defaultValue":null,"description":"","name":"disableBackgroundDismiss","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"disableBackgroundEventPropagation":{"defaultValue":null,"description":"","name":"disableBackgroundEventPropagation","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"noOverlay":{"defaultValue":null,"description":"","name":"noOverlay","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"noDocumentScrolling":{"defaultValue":null,"description":"","name":"noDocumentScrolling","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"portal":{"defaultValue":null,"description":"","name":"portal","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"onDismiss":{"defaultValue":null,"description":"","name":"onDismiss","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}}}}] +export const props = [{"tags":{},"filePath":"packages/core/src/modal/index.ts","description":"","displayName":"ModalClose","methods":[],"props":{"as":{"defaultValue":null,"description":"","name":"as","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"a\" | \"button\""},"tags":{}},"underlined":{"defaultValue":null,"description":"","name":"underlined","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"loading":{"defaultValue":null,"description":"","name":"loading","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"outline":{"defaultValue":null,"description":"","name":"outline","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"flat":{"defaultValue":null,"description":"","name":"flat","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"subtle":{"defaultValue":null,"description":"","name":"subtle","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"variant":{"defaultValue":null,"description":"","name":"variant","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Variant"},"tags":{}},"form":{"defaultValue":null,"description":"","name":"form","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"prefix":{"defaultValue":null,"description":"","name":"prefix","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"suffix":{"defaultValue":null,"description":"","name":"suffix","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"active":{"defaultValue":null,"description":"","name":"active","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"},{"fileName":"fold/packages/core/src/types/index.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"target":{"defaultValue":null,"description":"","name":"target","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"LinkTarget"},"tags":{}},"href":{"defaultValue":null,"description":"","name":"href","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"ellipsis":{"defaultValue":null,"description":"","name":"ellipsis","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"onClick":{"defaultValue":null,"description":"","name":"onClick","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"},{"fileName":"fold/node_modules/@types/react/ts5.0/index.d.ts","name":"DOMAttributes"}],"required":false,"type":{"name":"any"},"tags":{}},"type":{"defaultValue":null,"description":"","name":"type","declarations":[{"fileName":"fold/packages/core/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"button\" | \"submit\""},"tags":{}}}},{"tags":{},"filePath":"packages/core/src/modal/index.ts","description":"","displayName":"Modal","methods":[],"props":{"headerProps":{"defaultValue":null,"description":"","name":"headerProps","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"footerProps":{"defaultValue":null,"description":"","name":"footerProps","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"bodyProps":{"defaultValue":null,"description":"","name":"bodyProps","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"dismissOnEscape":{"defaultValue":null,"description":"","name":"dismissOnEscape","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"__focusTrapTimeoutDelay":{"defaultValue":null,"description":"","name":"__focusTrapTimeoutDelay","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"focusTrap":{"defaultValue":null,"description":"","name":"focusTrap","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"anchor":{"defaultValue":null,"description":"","name":"anchor","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ModalAnchor"},"tags":{}},"isVisible":{"defaultValue":null,"description":"","name":"isVisible","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"boolean"},"tags":{}},"footer":{"defaultValue":null,"description":"","name":"footer","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement> | ReactElement>[]"},"tags":{}},"header":{"defaultValue":null,"description":"","name":"header","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement> | ReactElement>[]"},"tags":{}},"borderless":{"defaultValue":null,"description":"","name":"borderless","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"disableBackgroundDismiss":{"defaultValue":null,"description":"","name":"disableBackgroundDismiss","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"disableBackgroundEventPropagation":{"defaultValue":null,"description":"","name":"disableBackgroundEventPropagation","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"noOverlay":{"defaultValue":null,"description":"","name":"noOverlay","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"noDocumentScrolling":{"defaultValue":null,"description":"","name":"noDocumentScrolling","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"portal":{"defaultValue":null,"description":"","name":"portal","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"onDismiss":{"defaultValue":null,"description":"","name":"onDismiss","declarations":[{"fileName":"fold/packages/core/src/modal/modal.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}}}}] export const css = [[["--f-modal-overlay","var(--f-color-overlay)"],["--f-modal-box-shadow","var(--f-shadow-lg)"],["--f-modal-background","var(--f-color-surface)"],["--f-modal-border-color","var(--f-color-border)"],["--f-modal-border-width","1px"],["--f-modal-border-radius","var(--f-radius)"],["--f-modal-padding","var(--f-space-4)"],["--f-modal-body-padding","var(--f-space-4)"]]] @@ -307,4 +307,4 @@ export const WithHeaderAndFooter = () => { } ``` -export default ({ children }) => {children} +export default ({ children }) => {children} \ No newline at end of file diff --git a/src/pages/docs/core/popover.mdx b/src/pages/docs/core/popover.mdx index 9c4859a4..4947183c 100644 --- a/src/pages/docs/core/popover.mdx +++ b/src/pages/docs/core/popover.mdx @@ -8,6 +8,9 @@ import { Flexer, Heading, Input, + InputPopover, + Li, + List, Menu, MenuButton, MenuItem, @@ -16,7 +19,7 @@ import { useVisibility, View, } from '@fold-dev/core' -import React, { useRef } from 'react' +import React, { useRef, useState } from 'react' export const docs = { title: 'Popover', @@ -25,7 +28,7 @@ export const docs = { 'A Popover component serves as a valuable tool for presenting in-depth information within a pop-up box that is positioned in proximity to the element being clicked or hovered. Popover components have many uses, but are particularly useful for adding context to particular pieces of content, such use quick-view information, form input & warning or failure details.', } -export const props = [{"tags":{},"filePath":"packages/core/src/popover/index.ts","description":"","displayName":"PopoverContent","methods":[],"props":{}},{"tags":{},"filePath":"packages/core/src/popover/index.ts","description":"","displayName":"Popover","methods":[],"props":{"targetId":{"defaultValue":null,"description":"","name":"targetId","declarations":[{"fileName":"fold/packages/core/src/popover/popover.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"fixPosition":{"defaultValue":null,"description":"","name":"fixPosition","declarations":[{"fileName":"fold/packages/core/src/popover/popover.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ top: number; left: number; }"},"tags":{}},"arrow":{"defaultValue":null,"description":"","name":"arrow","declarations":[{"fileName":"fold/packages/core/src/popover/popover.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"anchor":{"defaultValue":null,"description":"","name":"anchor","declarations":[{"fileName":"fold/packages/core/src/popover/popover.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"PopoutPosition"},"tags":{}},"anchorProps":{"defaultValue":null,"description":"","name":"anchorProps","declarations":[{"fileName":"fold/packages/core/src/popover/popover.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"content":{"defaultValue":null,"description":"","name":"content","declarations":[{"fileName":"fold/packages/core/src/popover/popover.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"isVisible":{"defaultValue":null,"description":"","name":"isVisible","declarations":[{"fileName":"fold/packages/core/src/popover/popover.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"onDismiss":{"defaultValue":null,"description":"","name":"onDismiss","declarations":[{"fileName":"fold/packages/core/src/popover/popover.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}}}}] +export const props = [{"tags":{},"filePath":"packages/core/src/popover/index.ts","description":"","displayName":"PopoverContent","methods":[],"props":{}},{"tags":{},"filePath":"packages/core/src/popover/index.ts","description":"","displayName":"Popover","methods":[],"props":{"hardEscape":{"defaultValue":null,"description":"","name":"hardEscape","declarations":[{"fileName":"fold/packages/core/src/popover/popover.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{"description":"Be careful as this can have unintended consequences with other elements"}},"__focusTrapTimeoutDelay":{"defaultValue":null,"description":"","name":"__focusTrapTimeoutDelay","declarations":[{"fileName":"fold/packages/core/src/popover/popover.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"__blockDismissEvent":{"defaultValue":null,"description":"","name":"__blockDismissEvent","declarations":[{"fileName":"fold/packages/core/src/popover/popover.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"focusTrap":{"defaultValue":null,"description":"","name":"focusTrap","declarations":[{"fileName":"fold/packages/core/src/popover/popover.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"targetId":{"defaultValue":null,"description":"","name":"targetId","declarations":[{"fileName":"fold/packages/core/src/popover/popover.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"fixPosition":{"defaultValue":null,"description":"","name":"fixPosition","declarations":[{"fileName":"fold/packages/core/src/popover/popover.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ top: number; left: number; }"},"tags":{}},"arrow":{"defaultValue":null,"description":"","name":"arrow","declarations":[{"fileName":"fold/packages/core/src/popover/popover.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"anchor":{"defaultValue":null,"description":"","name":"anchor","declarations":[{"fileName":"fold/packages/core/src/popover/popover.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"PopoutPosition"},"tags":{}},"anchorProps":{"defaultValue":null,"description":"","name":"anchorProps","declarations":[{"fileName":"fold/packages/core/src/popover/popover.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"content":{"defaultValue":null,"description":"","name":"content","declarations":[{"fileName":"fold/packages/core/src/popover/popover.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"isVisible":{"defaultValue":null,"description":"","name":"isVisible","declarations":[{"fileName":"fold/packages/core/src/popover/popover.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"onDismiss":{"defaultValue":null,"description":"","name":"onDismiss","declarations":[{"fileName":"fold/packages/core/src/popover/popover.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}}}}] export const css = [[["--f-popover-border-color","var(--f-color-border)"],["--f-popover-border-radius","var(--f-radius)"],["--f-popover-background","var(--f-color-surface)"],["--f-popover-box-shadow","var(--f-shadow-lg)"]]] @@ -40,7 +43,7 @@ import { PopoverContent, Popover } from "@fold-dev/core"; export const Usage = () => { const { visible, show, hide } = useVisibility(true); - return ( + return ( Craig Pather CTO Acme Corp @@ -59,7 +62,7 @@ export const Usage = () => { - + ```tsx export const Usage = () => { @@ -68,6 +71,7 @@ export const Usage = () => { return ( { ### Focus Trap With Child Width export const FocusTrapWithChildWidth = () => { - const { visible, show, hide } = useVisibility(true); - const ref1 = useRef(null); - const ref2 = useRef(null); - return (Fixed to the width of the container & only blurring will dismiss this.} isVisible={visible} onDismiss={(e) => { - switch (e.target) { - case ref1.current: - return console.log('main input'); - case ref2.current: - return console.log('popup content input'); - default: - hide(); - } - }}> - null}/> - ); + const [text, setText] = useState(''); + return ( + Plese make sure your password: + +
  • Is more than 8 characters long
    • +
  • Does not container easily identifiable words
    • +
  • Contains alpha-numeric characters
    • +
  • Contains special characters
    • +     + }> + setText(e.target.value)}/> +     ); };
    - + ```tsx export const FocusTrapWithChildWidth = () => { - const { visible, show, hide } = useVisibility(true) - const ref1 = useRef(null) - const ref2 = useRef(null) + const [text, setText] = useState('') return ( - Fixed to the width of the container & only blurring will dismiss this.} - isVisible={visible} - onDismiss={(e) => { - switch (e.target) { - case ref1.current: - return console.log('main input') - case ref2.current: - return console.log('popup content input') - default: - hide() - } - }}> + + Plese make sure your password: + +
  • Is more than 8 characters long
    • +
  • Does not container easily identifiable words
    • +
  • Contains alpha-numeric characters
    • +
  • Contains special characters
    • +     + + }> null} + placeholder="Enter your password" + value={text} + type="password" + onChange={(e) => setText(e.target.value)} /> -     + ) } ``` diff --git a/src/pages/docs/core/select.mdx b/src/pages/docs/core/select.mdx index d950f4fb..cf48f777 100644 --- a/src/pages/docs/core/select.mdx +++ b/src/pages/docs/core/select.mdx @@ -28,7 +28,7 @@ export const docs = { 'Select components are a common feature of almost every user experience on the web (and off) where the user is tasked to input data. The Fold Select component attempts to cover as many general use-case scenarios, as well as specialized, whilst keeping the interface performant and responsive.', } -export const props = [{"tags":{},"filePath":"packages/core/src/select/index.ts","description":"","displayName":"Select","methods":[],"props":{"noListFocus":{"defaultValue":null,"description":"","name":"noListFocus","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"hideSelected":{"defaultValue":null,"description":"","name":"hideSelected","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"as":{"defaultValue":null,"description":"","name":"as","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"default\" | \"virtual\""},"tags":{}},"variant":{"defaultValue":null,"description":"","name":"variant","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"default\" | \"static\""},"tags":{}},"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"customPlaceholder":{"defaultValue":null,"description":"","name":"customPlaceholder","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"placeholder":{"defaultValue":null,"description":"","name":"placeholder","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"string"},"tags":{}},"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"},{"fileName":"fold/packages/core/src/types/index.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"readOnly":{"defaultValue":null,"description":"","name":"readOnly","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"fixed":{"defaultValue":null,"description":"","name":"fixed","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"selected":{"defaultValue":null,"description":"","name":"selected","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(string | number)[]"},"tags":{}},"options":{"defaultValue":null,"description":"","name":"options","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"any[]"},"tags":{}},"footer":{"defaultValue":null,"description":"","name":"footer","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"header":{"defaultValue":null,"description":"","name":"header","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"onSelect":{"defaultValue":null,"description":"","name":"onSelect","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"any"},"tags":{}},"onFilter":{"defaultValue":null,"description":"","name":"onFilter","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"onOpen":{"defaultValue":null,"description":"","name":"onOpen","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"() => void"},"tags":{}},"onClose":{"defaultValue":null,"description":"","name":"onClose","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"() => void"},"tags":{}},"filterDelay":{"defaultValue":null,"description":"","name":"filterDelay","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"inputProps":{"defaultValue":null,"description":"","name":"inputProps","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ size?: Size; showIndicator?: boolean; selectOnFocus?: boolean; } & AriaAttributes & CommonProps & ShorthandProps & DOMAttributes & { ...; } & Omit<...>"},"tags":{}},"prefix":{"defaultValue":null,"description":"","name":"prefix","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"suffix":{"defaultValue":null,"description":"","name":"suffix","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"tagInputProps":{"defaultValue":null,"description":"","name":"tagInputProps","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ render: any; size?: Size; disabled?: boolean; } & AriaAttributes & CommonProps & ShorthandProps & DOMAttributes"},"tags":{}},"tagInputFieldProps":{"defaultValue":null,"description":"","name":"tagInputFieldProps","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"AriaAttributes & CommonProps & ShorthandProps & DOMAttributes & { type?: \"number\" | \"color\" | \"hidden\" | ... 10 more ... | \"week\"; } & Omit<...>"},"tags":{}},"selectListProps":{"defaultValue":null,"description":"","name":"selectListProps","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ noFocus?: boolean; as?: \"default\" | \"virtual\"; cursor?: number; options?: any[]; selected?: (string | number)[]; onOptionClick?: any; onCursorUpdate?: any; header?: ReactElement>; footer?: ReactElement<...>; optionComponent?: any; noOptionsComponent?: any; virtualProps?: Se..."},"tags":{}},"virtualProps":{"defaultValue":null,"description":"","name":"virtualProps","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"SelectListVirtual"},"tags":{}},"optionComponent":{"defaultValue":null,"description":"","name":"optionComponent","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"noOptionsComponent":{"defaultValue":null,"description":"","name":"noOptionsComponent","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"render":{"defaultValue":null,"description":"","name":"render","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"tagInput":{"defaultValue":null,"description":"","name":"tagInput","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}}}},{"tags":{},"filePath":"packages/core/src/select/index.ts","description":"","displayName":"SelectList","methods":[],"props":{"noFocus":{"defaultValue":null,"description":"","name":"noFocus","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"as":{"defaultValue":null,"description":"","name":"as","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"default\" | \"virtual\""},"tags":{}},"cursor":{"defaultValue":null,"description":"","name":"cursor","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"options":{"defaultValue":null,"description":"","name":"options","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any[]"},"tags":{}},"selected":{"defaultValue":null,"description":"","name":"selected","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(string | number)[]"},"tags":{}},"onOptionClick":{"defaultValue":null,"description":"","name":"onOptionClick","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"onCursorUpdate":{"defaultValue":null,"description":"","name":"onCursorUpdate","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"header":{"defaultValue":null,"description":"","name":"header","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"footer":{"defaultValue":null,"description":"","name":"footer","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"optionComponent":{"defaultValue":null,"description":"","name":"optionComponent","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"noOptionsComponent":{"defaultValue":null,"description":"","name":"noOptionsComponent","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"virtualProps":{"defaultValue":null,"description":"","name":"virtualProps","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"SelectListVirtual"},"tags":{}}}},{"tags":{},"filePath":"packages/core/src/select/index.ts","description":"","displayName":"SelectListOption","methods":[],"props":{"option":{"defaultValue":null,"description":"","name":"option","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"any"},"tags":{}},"selected":{"defaultValue":null,"description":"","name":"selected","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"onOptionClick":{"defaultValue":null,"description":"","name":"onOptionClick","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}}}}] +export const props = [{"tags":{},"filePath":"packages/core/src/select/index.ts","description":"","displayName":"Select","methods":[],"props":{"trapFocus":{"defaultValue":null,"description":"","name":"trapFocus","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{"description":"traps the focus within the options list"}},"openOnFocus":{"defaultValue":null,"description":"","name":"openOnFocus","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"openOnMount":{"defaultValue":null,"description":"","name":"openOnMount","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"noListFocus":{"defaultValue":null,"description":"","name":"noListFocus","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"hideSelected":{"defaultValue":null,"description":"","name":"hideSelected","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"as":{"defaultValue":null,"description":"","name":"as","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"default\" | \"virtual\""},"tags":{}},"variant":{"defaultValue":null,"description":"","name":"variant","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"default\" | \"static\""},"tags":{}},"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"customPlaceholder":{"defaultValue":null,"description":"","name":"customPlaceholder","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"placeholder":{"defaultValue":null,"description":"","name":"placeholder","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"string"},"tags":{}},"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"},{"fileName":"fold/packages/core/src/types/index.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"readOnly":{"defaultValue":null,"description":"","name":"readOnly","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"fixed":{"defaultValue":null,"description":"","name":"fixed","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"selected":{"defaultValue":null,"description":"","name":"selected","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(string | number)[]"},"tags":{}},"options":{"defaultValue":null,"description":"","name":"options","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"any[]"},"tags":{}},"footer":{"defaultValue":null,"description":"","name":"footer","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"header":{"defaultValue":null,"description":"","name":"header","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"onSelect":{"defaultValue":null,"description":"","name":"onSelect","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"any"},"tags":{}},"onFilter":{"defaultValue":null,"description":"","name":"onFilter","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"onOpen":{"defaultValue":null,"description":"","name":"onOpen","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"() => void"},"tags":{}},"onClose":{"defaultValue":null,"description":"","name":"onClose","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"() => void"},"tags":{}},"filterDelay":{"defaultValue":null,"description":"","name":"filterDelay","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"inputProps":{"defaultValue":null,"description":"","name":"inputProps","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ size?: Size; showIndicator?: boolean; selectOnFocus?: boolean; } & AriaAttributes & CommonProps & ShorthandProps & DOMAttributes & { ...; } & Omit<...>"},"tags":{}},"prefix":{"defaultValue":null,"description":"","name":"prefix","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"suffix":{"defaultValue":null,"description":"","name":"suffix","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"tagInputProps":{"defaultValue":null,"description":"","name":"tagInputProps","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ render: any; size?: Size; disabled?: boolean; } & AriaAttributes & CommonProps & ShorthandProps & DOMAttributes"},"tags":{}},"tagInputFieldProps":{"defaultValue":null,"description":"","name":"tagInputFieldProps","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"AriaAttributes & CommonProps & ShorthandProps & DOMAttributes & { type?: \"number\" | \"color\" | \"hidden\" | ... 10 more ... | \"week\"; } & Omit<...>"},"tags":{}},"selectListProps":{"defaultValue":null,"description":"","name":"selectListProps","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ noFocus?: boolean; as?: \"default\" | \"virtual\"; cursor?: number; options?: any[]; selected?: (string | number)[]; onOptionClick?: any; onCursorUpdate?: any; header?: ReactElement>; footer?: ReactElement<...>; optionComponent?: any; noOptionsComponent?: any; virtualProps?: Se..."},"tags":{}},"selectPopoverProps":{"defaultValue":null,"description":"","name":"selectPopoverProps","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"virtualProps":{"defaultValue":null,"description":"","name":"virtualProps","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"SelectListVirtual"},"tags":{}},"optionComponent":{"defaultValue":null,"description":"","name":"optionComponent","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"noOptionsComponent":{"defaultValue":null,"description":"","name":"noOptionsComponent","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"render":{"defaultValue":null,"description":"","name":"render","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"tagInput":{"defaultValue":null,"description":"","name":"tagInput","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}}}},{"tags":{},"filePath":"packages/core/src/select/index.ts","description":"","displayName":"SelectList","methods":[],"props":{"noFocus":{"defaultValue":null,"description":"","name":"noFocus","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"as":{"defaultValue":null,"description":"","name":"as","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"default\" | \"virtual\""},"tags":{}},"cursor":{"defaultValue":null,"description":"","name":"cursor","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"options":{"defaultValue":null,"description":"","name":"options","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any[]"},"tags":{}},"selected":{"defaultValue":null,"description":"","name":"selected","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(string | number)[]"},"tags":{}},"onOptionClick":{"defaultValue":null,"description":"","name":"onOptionClick","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"onCursorUpdate":{"defaultValue":null,"description":"","name":"onCursorUpdate","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"header":{"defaultValue":null,"description":"","name":"header","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"footer":{"defaultValue":null,"description":"","name":"footer","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"},"tags":{}},"optionComponent":{"defaultValue":null,"description":"","name":"optionComponent","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"noOptionsComponent":{"defaultValue":null,"description":"","name":"noOptionsComponent","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"virtualProps":{"defaultValue":null,"description":"","name":"virtualProps","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"SelectListVirtual"},"tags":{}}}},{"tags":{},"filePath":"packages/core/src/select/index.ts","description":"","displayName":"SelectListOption","methods":[],"props":{"option":{"defaultValue":null,"description":"","name":"option","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"any"},"tags":{}},"selected":{"defaultValue":null,"description":"","name":"selected","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"onOptionClick":{"defaultValue":null,"description":"","name":"onOptionClick","declarations":[{"fileName":"fold/packages/core/src/select/select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}}}}] export const css = [[["--f-select-width","300px"],["--f-select-color","var(--f-color-text)"],["--f-select-color-placeholder","var(--f-color-text-weakest)"],["--f-select-color-disabled","var(--f-color-text-weakest)"],["--f-select-color-selected","var(--f-color-accent)"],["--f-select-background-selected","var(--f-color-surface-strong)"],["--f-select-option-focus","var(--f-color-surface-stronger)"],["--f-select-option-active-size","0.2rem"],["--f-select-option-hover","var(--f-color-surface-strong)"],["--f-select-option-active","var(--f-color-surface-stronger)"],["--f-select-options-height","200px"],["--f-select-option-padding","var(--f-space-inset-x-3)"],["--f-select-popover-border-color","var(--f-color-border)"],["--f-select-popover-border-radius","var(--f-radius)"],["--f-select-popover-background","var(--f-color-surface)"],["--f-select-popover-box-shadow","var(--f-shadow-lg)"]]] @@ -683,125 +683,6 @@ export const ListVirtualization = () => { ) } ``` -### Standalone List Default - -export const StandaloneListDefault = () => { - const [selected, setSelected] = useState([timezones[0], timezones[4], timezones[8]]); - const options = timezones.map((option, index) => { - return { - key: option, - label: option, - }; - }); - const [cursor, setCursor] = useState(-1); - const listRef = useRef(null); - const handleSelect = (option, dismiss) => { - if (selected.includes(option.key)) { - setSelected([...selected.filter((optionKey) => option.key != optionKey)]); - } - else { - setSelected([...selected, option.key]); - } - }; - return (); -}; - -
    - -
    - - - -```tsx -export const StandaloneListDefault = () => { - const [selected, setSelected] = useState([timezones[0], timezones[4], timezones[8]]) - const options = timezones.map((option: any, index) => { - return { - key: option, - label: option, - } - }) - const [cursor, setCursor] = useState(-1) - const listRef = useRef(null) - - const handleSelect = (option, dismiss) => { - if (selected.includes(option.key)) { - setSelected([...selected.filter((optionKey) => option.key != optionKey)]) - } else { - setSelected([...selected, option.key]) - } - } - - return ( - - ) -} -``` -### Standalone List Virtual - -export const StandaloneListVirtual = () => { - const [selected, setSelected] = useState([timezones[0], timezones[4], timezones[8]]); - const options = timezones.map((option, index) => { - return { - key: option, - label: option, - }; - }); - const handleSelect = (option, dismiss) => { - if (selected.includes(option.key)) { - setSelected([...selected.filter((optionKey) => option.key != optionKey)]); - } - else { - setSelected([...selected, option.key]); - } - }; - return (); -}; - -
    - -
    - - - -```tsx -export const StandaloneListVirtual = () => { - const [selected, setSelected] = useState([timezones[0], timezones[4], timezones[8]]) - - const options = timezones.map((option: any, index) => { - return { - key: option, - label: option, - } - }) - - const handleSelect = (option, dismiss) => { - if (selected.includes(option.key)) { - setSelected([...selected.filter((optionKey) => option.key != optionKey)]) - } else { - setSelected([...selected, option.key]) - } - } - - return ( - - ) -} -``` ### Option Configuration And Forced Placeholder export const OptionConfigurationAndForcedPlaceholder = () => { diff --git a/src/pages/docs/core/slider.mdx b/src/pages/docs/core/slider.mdx index 72384729..26d5c2ab 100644 --- a/src/pages/docs/core/slider.mdx +++ b/src/pages/docs/core/slider.mdx @@ -291,4 +291,4 @@ export const WithColorAndLabels = () => { } ``` -export default ({ children }) => {children} +export default ({ children }) => {children} \ No newline at end of file diff --git a/src/pages/docs/core/text.mdx b/src/pages/docs/core/text.mdx index 0a13fcb4..cb11efc0 100644 --- a/src/pages/docs/core/text.mdx +++ b/src/pages/docs/core/text.mdx @@ -181,4 +181,4 @@ export const Highlight = () => ( ) ``` -export default ({ children }) => {children} +export default ({ children }) => {children} \ No newline at end of file diff --git a/src/pages/license.tsx b/src/pages/license.tsx index c3bc24a8..88a7f479 100644 --- a/src/pages/license.tsx +++ b/src/pages/license.tsx @@ -14,6 +14,9 @@ export const LicenseContent = (props) => ( The LICENSEE is granted a license to use the SOFTWARE as the basis of any non commercial/internal application, so long as that application is owned and operated by you, the LICENSEE. + Free License + Unlimited internal & external use of Fold Core. + Indie License The LICENSEE is permitted to have a maximum of three (3) developers utilizing the license key. This limitation includes any Continuous Integration/Continuous Deployment (CI/CD) platforms, which shall be considered as one of the developers. @@ -48,11 +51,10 @@ export const LicenseContent = (props) => ( Technical support is limited to bug reports and feature requests. No support will be provided to diagnose or advise application-level code issues. If you require more specialised support or consultancy email support@fold.dev. Refunds - Johannes du Plessis ("Fold") does not provide refunds, whether full or partial, for the SOFTWARE during Early Access. + Johannes du Plessis ("Fold") does not provide refunds, whether full or partial, for the SOFTWARE. Exceptions to this policy may be made solely at the discretion of Johannes du Plessis ("Fold") on a case-by-case basis. Refund requests may be sent to licensing@fold.dev. If a refund is issued, the LICENSEE agrees to delete all files within 24 hours and is not permitted to use SOFTWARE in projects (including personal/non-commercial projects). - We encourage you to try out the CodeSandbox before making a decision to purchase a license, to make sure it's right for you. From f062634c67e27838ae6fb09e7bf07d6843070256 Mon Sep 17 00:00:00 2001 From: Jo du Plessis Date: Mon, 24 Jun 2024 08:59:48 +0200 Subject: [PATCH 03/10] update widths to tbe equal --- src/components/pricing.component.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/pricing.component.tsx b/src/components/pricing.component.tsx index d338962b..0db3c851 100644 --- a/src/components/pricing.component.tsx +++ b/src/components/pricing.component.tsx @@ -422,7 +422,7 @@ export const PricingComponent = () => { { Date: Mon, 24 Jun 2024 09:52:38 +0200 Subject: [PATCH 04/10] style updates --- src/components/core.component.tsx | 3 +- src/components/graphic.component.tsx | 4 +- src/components/header.component.tsx | 87 +++++++++++----------------- src/components/hero.component.tsx | 27 +++++---- src/layouts/site.layout.tsx | 74 +++++++---------------- src/styles/globals.css | 13 +++++ 6 files changed, 83 insertions(+), 125 deletions(-) diff --git a/src/components/core.component.tsx b/src/components/core.component.tsx index 65b6729e..d443818f 100644 --- a/src/components/core.component.tsx +++ b/src/components/core.component.tsx @@ -1133,7 +1133,7 @@ const All = () => { p="0.5rem 0.5rem"> { { - const { style = {}, color = 'white', ...rest } = props + const { style = {}, color = 'var(--f-color-accent-weak)', ...rest } = props return ( { } export const GraphicLeft = (props: any) => { - const { style = {}, color = 'white', ...rest } = props + const { style = {}, color = 'var(--f-color-accent-weak', ...rest } = props return ( { return ( <> - - - - - - - - {!!subtitle && ( - - {subtitle} - - )} - - {title} - - - {!!description && ( + + {!!subtitle && ( + + {subtitle} + + )} - {description} + huge + textAlign="center"> + {title} - )} - - - + {!!description && ( + + {description} + + )} + + + + ) } diff --git a/src/components/hero.component.tsx b/src/components/hero.component.tsx index b43f831c..c840876a 100644 --- a/src/components/hero.component.tsx +++ b/src/components/hero.component.tsx @@ -9,10 +9,10 @@ export const HeroComponent = () => { p="111px 0 0 0" m="-111px 0 0 0" position="relative" - style={{ overflow: 'hidden' }} - bg="linear-gradient(175deg, var(--f-color-accent-500), var(--f-color-accent-600))"> + style={{ overflow: 'hidden' }} + className="hero-background"> @@ -34,15 +34,15 @@ export const HeroComponent = () => { position="relative"> + colorToken="accent"> Introducing { Powerful, fully customizable React components for scaling your project to the next level. @@ -70,10 +70,9 @@ export const HeroComponent = () => { outline as="a" href="#pro" - border="0.15rem solid var(--f-color-white)" + border="0.15rem solid var(--f-color-accent)" style={{ - '--f-button-color': 'var(--f-color-white)', - '--f-color-text-on-color': 'var(--f-color-accent-400)', + '--f-button-color': 'var(--f-color-accent)', }}> Buy Now @@ -83,28 +82,28 @@ export const HeroComponent = () => { textDecoration="none" className="f-underline" m="0 -1rem 0 0" - colorToken="white"> + colorToken="accent"> Read Documentation ↗ + colorToken="accent"> Subscribe to the newsletter & get notified of any updates. diff --git a/src/layouts/site.layout.tsx b/src/layouts/site.layout.tsx index 8bd6d6f6..334486eb 100644 --- a/src/layouts/site.layout.tsx +++ b/src/layouts/site.layout.tsx @@ -95,7 +95,7 @@ export default function SiteLayout(props: any) { zIndex={10000} width="100%" position="relative" - bg="linear-gradient(15deg, var(--f-color-neonpink-600), var(--f-color-neonpink-400))"> + bg="linear-gradient(15deg, var(--f-color-purple-500), var(--f-color-neonpink-400))"> @@ -119,7 +119,7 @@ export default function SiteLayout(props: any) { height={100} position="relative" border="none" - bg={stuck ? 'var(--f-color-accent-500)' : 'transparent'} + bg={stuck ? 'rgb(from var(--f-color-surface) r g b / 0.9)' : 'transparent'} style={{ backdropFilter: 'blur(5px)', transition: 'background 0.1s', @@ -130,47 +130,23 @@ export default function SiteLayout(props: any) { width="100%" p="0 4rem"> - + Home Core - - - EARLY ACCESS - - - )} - href="/#pro"> - Pro - + Pro Support @@ -211,21 +179,21 @@ export default function SiteLayout(props: any) { target="_blank" style={{ width: 35, height: 35 }} fgColor="var(--f-color-accent)" - bgColor="var(--f-color-white)" + bgColor="var(--f-color-accent-weak)" /> diff --git a/src/styles/globals.css b/src/styles/globals.css index 14ba1216..ca22a3e8 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -190,6 +190,19 @@ body { overflow-y: auto; } +[data-theme="dark"] .hero-background { + background: radial-gradient(circle, var(--f-color-base-800) 0%, var(--f-color-surface) 80%); +} + +[data-theme="dark"] .hero-background .graphic-right, +[data-theme="dark"] .hero-background .graphic-left { + opacity: 0.3 !important; +} + +[data-theme="light"] .hero-background { + background: radial-gradient(circle, var(--f-color-accent-weak) 0%, var(--f-color-surface-strong) 100%); +} + .mobile-component { display: none; position: fixed; From e462532f2171bab9941c45bf8aa79f58ce2bc0a7 Mon Sep 17 00:00:00 2001 From: Jo du Plessis Date: Mon, 24 Jun 2024 10:02:48 +0200 Subject: [PATCH 05/10] update Pro components --- src/components/pro.component.tsx | 194 +++++++++++++++++++++++++++++-- 1 file changed, 183 insertions(+), 11 deletions(-) diff --git a/src/components/pro.component.tsx b/src/components/pro.component.tsx index 4aec1ba7..14cd4051 100644 --- a/src/components/pro.component.tsx +++ b/src/components/pro.component.tsx @@ -13,7 +13,7 @@ import { DataGridTypes, DatePicker, DateRangeProvider, Detail, Kanban, KanbanColumnMenu, KanbanSelection, KanbanSwimlaneMenu, KanbanTypes, LabelMenu, Popup, Todo, TodoSectionMenu, UserMenu, dataGridState, - dispatchDataGridEvent, dispatchTodoEvent, getShortDateFormat, kanbanState, + dispatchDataGridEvent, dispatchKanbanEvent, dispatchTodoEvent, getShortDateFormat, kanbanState, todoState } from '@fold-pro/react' import { useMemo, useState } from 'react' @@ -25,13 +25,33 @@ export const Calendar1 = () => { const [events, setEvents] = useState(data.events) const [event, setEvent] = useState({}) const [title, setTitle] = useState('') + const { setDialog, closeDialog } = useDialog() const handleEventUpdate = (ev) => { setEvents(events.map((event) => (event.id == ev.id ? { ...event, ...ev } : event))) } const handleEventDelete = (ev) => { - setEvents(events.filter((event) => event.id != ev.id)) + setDialog({ + title: 'Are you sure?', + description: 'This action cannot be undone.', + footer: ( + + + + + ), + }) } const handleEventOpen = (event) => { @@ -41,6 +61,7 @@ export const Calendar1 = () => { const getMenu = ({ data: { target, payload }, dismiss }) => { return ( { @@ -436,6 +457,7 @@ export const DataGrid1 = () => { export const Kanban1 = () => { const [swimlanes, setSwimlanes] = useState([data.swimlanes[0]]) const [card, setCard] = useState({}) + const { setDialog, closeDialog } = useDialog() const handleCardMove = ({ origin, target }, selection: KanbanSelection[]) => { kanbanState({ swimlanes, setSwimlanes, card, setCard }).handleCardMove({ origin, target }, selection) @@ -462,7 +484,26 @@ export const Kanban1 = () => { } const handleCardDelete = (ca) => { - kanbanState({ swimlanes, setSwimlanes, card, setCard }).handleCardDelete(ca) + setDialog({ + title: 'Are you sure?', + description: 'This action cannot be undone.', + footer: ( + + + + + ), + }) } const handleColumnAdd = ({ value, swimlaneIndex }) => { @@ -570,7 +611,7 @@ export const Kanban1 = () => { return ( {!!card.id && ( { { + return ( + + {Object.keys(selection).length} selected + { + setDialog({ + title: 'Are you sure?', + description: 'This action cannot be undone.', + portal: Portal, + footer: ( + + + + + ), + }) + }} + /> + + ) + }} /> @@ -616,6 +723,7 @@ export const Todo1 = () => { const [sections, setSections] = useState(data.sections) const [task, setTask] = useState({}) const [options, setOptions] = useState([]) + const { setDialog, closeDialog } = useDialog() const handleTaskOpen = (task) => { todoState({ task, setTask, sections, setSections }).handleTaskOpen(task) @@ -626,7 +734,26 @@ export const Todo1 = () => { } const handleTaskDelete = (task) => { - todoState({ task, setTask, sections, setSections }).handleTaskDelete(task) + setDialog({ + title: 'Are you sure?', + description: 'This action cannot be undone.', + footer: ( + + + + + ), + }) } const handleTaskAddBelow = ({ id, shouldIndent, task: { title, users, badges, labels } }) => { @@ -764,9 +891,13 @@ export const Todo1 = () => { <> {!!task.id && ( { setTask({}) @@ -784,6 +915,7 @@ export const Todo1 = () => { { richInputHighlight={handleHighlight} richInputTrigger={handleTrigger} richInputOptions={options} - targetVariant={{ cards: 'animated', nav: 'focus' }} + targetVariant={{ 'projects': 'focus' }} task={undefined} sectionHeader={undefined} defaultSelection={{}} @@ -808,7 +940,7 @@ export const Todo1 = () => { return ( { style={{ bottom: 10, left: '50%', transform: 'translateX(-50%)' }}> {Object.keys(selection).length} selected dispatchTodoEvent('select', {})} + onClick={() => { + setDialog({ + title: 'Are you sure?', + description: 'This action cannot be undone.', + portal: Portal, + footer: ( + + + + + ), + }) + }} /> ) @@ -883,7 +1053,7 @@ export const DatePicker1 = () => { } export const ProComponent = () => { - const [option, setOption] = useState(4) + const [option, setOption] = useState(2) return ( { position="relative"> Date: Mon, 24 Jun 2024 10:18:31 +0200 Subject: [PATCH 06/10] bump version labels --- src/layouts/docs.layout.tsx | 4 +- src/pages/docs/pro/calendar.mdx | 198 +++++++++- src/pages/docs/pro/common.mdx | 28 +- src/pages/docs/pro/csv-importer.mdx | 89 +---- src/pages/docs/pro/data-grid.mdx | 585 ++++++++-------------------- src/pages/docs/pro/date-picker.mdx | 117 +++--- src/pages/docs/pro/kanban.mdx | 156 +++++++- src/pages/docs/pro/todo.mdx | 132 ++++++- 8 files changed, 709 insertions(+), 600 deletions(-) diff --git a/src/layouts/docs.layout.tsx b/src/layouts/docs.layout.tsx index 301d633a..1bc2c955 100644 --- a/src/layouts/docs.layout.tsx +++ b/src/layouts/docs.layout.tsx @@ -532,7 +532,7 @@ export default function DocsLayout(props: any) { color={Token.ColorAccent400} size="xs" subtle> - v0.1.1 + v0.1.2 )}> Pro Components @@ -568,7 +568,7 @@ export default function DocsLayout(props: any) { size="xs" subtle color={Token.ColorAccent400}> - v0.11.8 + v0.12.0 }> Core Components diff --git a/src/pages/docs/pro/calendar.mdx b/src/pages/docs/pro/calendar.mdx index 7987c77e..ba6b8d3e 100644 --- a/src/pages/docs/pro/calendar.mdx +++ b/src/pages/docs/pro/calendar.mdx @@ -13,6 +13,7 @@ import { Text, View, generateUEID, + useDialog, } from '@fold-dev/core' import React, { useMemo, useState } from 'react' import { CalendarDays, CalendarProvider, CalendarSchedule, Detail, Popup, getShortDateFormat } from '@fold-pro/react' @@ -20,7 +21,7 @@ import * as data from '@/dummy-data' export const docs = {"title":"Calendar","subtitle":"Effortlessly organize events across multiple views with the Calendar component.","description":"The Calendar component offers the user a familiar, Google Calendar-like, experience when interacting with events & schedules.","pro":true} -export const props = [{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"CalendarDaysDay","methods":[],"props":{"day":{"defaultValue":null,"description":"","name":"day","declarations":[{"fileName":"pro/src/calendar/calendar-days-day.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Date"},"tags":{}},"date":{"defaultValue":null,"description":"","name":"date","declarations":[{"fileName":"pro/src/calendar/calendar-days-day.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Date"},"tags":{}},"index":{"defaultValue":null,"description":"","name":"index","declarations":[{"fileName":"pro/src/calendar/calendar-days-day.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"number"},"tags":{}},"width":{"defaultValue":null,"description":"","name":"width","declarations":[{"fileName":"pro/src/calendar/calendar-days-day.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"number"},"tags":{}},"noClamp":{"defaultValue":null,"description":"","name":"noClamp","declarations":[{"fileName":"pro/src/calendar/calendar-days-day.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"weekIndex":{"defaultValue":null,"description":"","name":"weekIndex","declarations":[{"fileName":"pro/src/calendar/calendar-days-day.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"number"},"tags":{}},"weekEvents":{"defaultValue":null,"description":"","name":"weekEvents","declarations":[{"fileName":"pro/src/calendar/calendar-days-day.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Event[]"},"tags":{}},"onMouseEnter":{"defaultValue":null,"description":"","name":"onMouseEnter","declarations":[{"fileName":"pro/src/calendar/calendar-days-day.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(e: any) => void"},"tags":{}}}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"CalendarDaysEventComponent","methods":[],"props":{}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"CalendarDaysEvent","methods":[],"props":{"event":{"defaultValue":null,"description":"","name":"event","declarations":[{"fileName":"pro/src/calendar/calendar-days-event.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Event & { isEnd: boolean; isFirst: boolean; size: number; }"},"tags":{}},"day":{"defaultValue":null,"description":"","name":"day","declarations":[{"fileName":"pro/src/calendar/calendar-days-event.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Date"},"tags":{}},"index":{"defaultValue":null,"description":"","name":"index","declarations":[{"fileName":"pro/src/calendar/calendar-days-event.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"number"},"tags":{}},"expanded":{"defaultValue":null,"description":"","name":"expanded","declarations":[{"fileName":"pro/src/calendar/calendar-days-event.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"boolean"},"tags":{}},"displayLabel":{"defaultValue":null,"description":"","name":"displayLabel","declarations":[{"fileName":"pro/src/calendar/calendar-days-event.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}}}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"CalendarDays","methods":[],"props":{"date":{"defaultValue":null,"description":"","name":"date","declarations":[{"fileName":"pro/src/calendar/calendar-days.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Date"},"tags":{}},"custom":{"defaultValue":null,"description":"","name":"custom","declarations":[{"fileName":"pro/src/calendar/calendar-days.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Date[][]"},"tags":{}},"events":{"defaultValue":null,"description":"","name":"events","declarations":[{"fileName":"pro/src/calendar/calendar-days.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Event[]"},"tags":{}},"noClamp":{"defaultValue":null,"description":"","name":"noClamp","declarations":[{"fileName":"pro/src/calendar/calendar-days.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}}}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"CalendarScheduleDay","methods":[],"props":{"day":{"defaultValue":null,"description":"","name":"day","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-day.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Date"},"tags":{}},"workingHours":{"defaultValue":null,"description":"","name":"workingHours","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-day.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"WorkingHours"},"tags":{}},"start":{"defaultValue":null,"description":"","name":"start","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-day.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Date"},"tags":{}},"end":{"defaultValue":null,"description":"","name":"end","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-day.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Date"},"tags":{}},"events":{"defaultValue":null,"description":"","name":"events","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-day.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Event[]"},"tags":{}}}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"CalendarScheduleEventComponent","methods":[],"props":{}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"CalendarScheduleEvent","methods":[],"props":{"id":{"defaultValue":null,"description":"","name":"id","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-event.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"string"},"tags":{}},"title":{"defaultValue":null,"description":"","name":"title","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-event.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"string"},"tags":{}},"start":{"defaultValue":null,"description":"","name":"start","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-event.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Date"},"tags":{}},"end":{"defaultValue":null,"description":"","name":"end","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-event.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Date"},"tags":{}},"allDay":{"defaultValue":null,"description":"","name":"allDay","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-event.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"color":{"defaultValue":null,"description":"","name":"color","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-event.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"zIndex":{"defaultValue":null,"description":"","name":"zIndex","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-event.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"top":{"defaultValue":null,"description":"","name":"top","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-event.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"number"},"tags":{}},"height":{"defaultValue":null,"description":"","name":"height","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-event.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"number"},"tags":{}},"width":{"defaultValue":null,"description":"","name":"width","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-event.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"number"},"tags":{}},"left":{"defaultValue":null,"description":"","name":"left","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-event.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"number"},"tags":{}},"onMouseDownSchedule":{"defaultValue":null,"description":"","name":"onMouseDownSchedule","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-event.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(data: any) => void"},"tags":{}}}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"CalendarScheduleGutter","methods":[],"props":{}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"CalendarScheduleSegment","methods":[],"props":{}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"CalendarScheduleSegments","methods":[],"props":{"workingHours":{"defaultValue":null,"description":"","name":"workingHours","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-segments.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"WorkingHours"},"tags":{}},"start":{"defaultValue":null,"description":"","name":"start","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-segments.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Date"},"tags":{}},"end":{"defaultValue":null,"description":"","name":"end","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-segments.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Date"},"tags":{}}}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"CalendarSchedule","methods":[],"props":{"days":{"defaultValue":null,"description":"","name":"days","declarations":[{"fileName":"pro/src/calendar/calendar-schedule.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Schedule[]"},"tags":{}},"events":{"defaultValue":null,"description":"","name":"events","declarations":[{"fileName":"pro/src/calendar/calendar-schedule.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Event[]"},"tags":{}}}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"CalendarProvider","methods":[],"props":{"canUpdate":{"defaultValue":null,"description":"","name":"canUpdate","declarations":[{"fileName":"pro/src/calendar/calendar.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"canAdd":{"defaultValue":null,"description":"","name":"canAdd","declarations":[{"fileName":"pro/src/calendar/calendar.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"hideDateLabels":{"defaultValue":null,"description":"","name":"hideDateLabels","declarations":[{"fileName":"pro/src/calendar/calendar.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"dimPastEvents":{"defaultValue":null,"description":"","name":"dimPastEvents","declarations":[{"fileName":"pro/src/calendar/calendar.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"scheduleOverlapThreshold":{"defaultValue":null,"description":"","name":"scheduleOverlapThreshold","declarations":[{"fileName":"pro/src/calendar/calendar.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"scheduleEvent":{"defaultValue":null,"description":"","name":"scheduleEvent","declarations":[{"fileName":"pro/src/calendar/calendar.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(props: any) => ReactElement>"},"tags":{}},"monthEvent":{"defaultValue":null,"description":"","name":"monthEvent","declarations":[{"fileName":"pro/src/calendar/calendar.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(props: any) => ReactElement>"},"tags":{}},"onEventOpen":{"defaultValue":null,"description":"","name":"onEventOpen","declarations":[{"fileName":"pro/src/calendar/calendar.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(data: any) => void"},"tags":{}},"onEventUpdate":{"defaultValue":null,"description":"","name":"onEventUpdate","declarations":[{"fileName":"pro/src/calendar/calendar.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(data: any) => void"},"tags":{}},"onEventAdd":{"defaultValue":null,"description":"","name":"onEventAdd","declarations":[{"fileName":"pro/src/calendar/calendar.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(data: any) => ReactNode"},"tags":{}}}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"timeToDecimal","methods":[],"props":{}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"getHeight","methods":[],"props":{}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"setMidnight","methods":[],"props":{}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"getColumnName","methods":[],"props":{}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"dateString","methods":[],"props":{}}] +export const props = [{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"CalendarDaysDay","methods":[],"props":{"day":{"defaultValue":null,"description":"","name":"day","declarations":[{"fileName":"pro/src/calendar/calendar-days-day.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Date"},"tags":{}},"date":{"defaultValue":null,"description":"","name":"date","declarations":[{"fileName":"pro/src/calendar/calendar-days-day.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Date"},"tags":{}},"index":{"defaultValue":null,"description":"","name":"index","declarations":[{"fileName":"pro/src/calendar/calendar-days-day.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"number"},"tags":{}},"width":{"defaultValue":null,"description":"","name":"width","declarations":[{"fileName":"pro/src/calendar/calendar-days-day.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"number"},"tags":{}},"noClamp":{"defaultValue":null,"description":"","name":"noClamp","declarations":[{"fileName":"pro/src/calendar/calendar-days-day.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"weekIndex":{"defaultValue":null,"description":"","name":"weekIndex","declarations":[{"fileName":"pro/src/calendar/calendar-days-day.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"number"},"tags":{}},"weekEvents":{"defaultValue":null,"description":"","name":"weekEvents","declarations":[{"fileName":"pro/src/calendar/calendar-days-day.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Event[]"},"tags":{}},"onMouseEnter":{"defaultValue":null,"description":"","name":"onMouseEnter","declarations":[{"fileName":"pro/src/calendar/calendar-days-day.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(e: any) => void"},"tags":{}}}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"CalendarDaysEventComponent","methods":[],"props":{}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"CalendarDaysEvent","methods":[],"props":{"event":{"defaultValue":null,"description":"","name":"event","declarations":[{"fileName":"pro/src/calendar/calendar-days-event.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Event & { isEnd: boolean; isFirst: boolean; size: number; }"},"tags":{}},"day":{"defaultValue":null,"description":"","name":"day","declarations":[{"fileName":"pro/src/calendar/calendar-days-event.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Date"},"tags":{}},"index":{"defaultValue":null,"description":"","name":"index","declarations":[{"fileName":"pro/src/calendar/calendar-days-event.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"number"},"tags":{}},"expanded":{"defaultValue":null,"description":"","name":"expanded","declarations":[{"fileName":"pro/src/calendar/calendar-days-event.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"boolean"},"tags":{}},"displayLabel":{"defaultValue":null,"description":"","name":"displayLabel","declarations":[{"fileName":"pro/src/calendar/calendar-days-event.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}}}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"CalendarDays","methods":[],"props":{"date":{"defaultValue":null,"description":"","name":"date","declarations":[{"fileName":"pro/src/calendar/calendar-days.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Date"},"tags":{}},"custom":{"defaultValue":null,"description":"","name":"custom","declarations":[{"fileName":"pro/src/calendar/calendar-days.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Date[][]"},"tags":{}},"events":{"defaultValue":null,"description":"","name":"events","declarations":[{"fileName":"pro/src/calendar/calendar-days.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Event[]"},"tags":{}},"noClamp":{"defaultValue":null,"description":"","name":"noClamp","declarations":[{"fileName":"pro/src/calendar/calendar-days.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}}}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"CalendarScheduleDay","methods":[],"props":{"day":{"defaultValue":null,"description":"","name":"day","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-day.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Date"},"tags":{}},"workingHours":{"defaultValue":null,"description":"","name":"workingHours","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-day.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"WorkingHours"},"tags":{}},"start":{"defaultValue":null,"description":"","name":"start","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-day.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Date"},"tags":{}},"end":{"defaultValue":null,"description":"","name":"end","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-day.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Date"},"tags":{}},"getMasterEvents":{"defaultValue":null,"description":"","name":"getMasterEvents","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-day.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"() => Event[]"},"tags":{}},"events":{"defaultValue":null,"description":"","name":"events","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-day.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Event[]"},"tags":{}}}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"CalendarScheduleEventComponent","methods":[],"props":{}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"CalendarScheduleEvent","methods":[],"props":{"id":{"defaultValue":null,"description":"","name":"id","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-event.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"string"},"tags":{}},"title":{"defaultValue":null,"description":"","name":"title","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-event.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"string"},"tags":{}},"start":{"defaultValue":null,"description":"","name":"start","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-event.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Date"},"tags":{}},"end":{"defaultValue":null,"description":"","name":"end","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-event.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Date"},"tags":{}},"allDay":{"defaultValue":null,"description":"","name":"allDay","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-event.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"color":{"defaultValue":null,"description":"","name":"color","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-event.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"zIndex":{"defaultValue":null,"description":"","name":"zIndex","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-event.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"top":{"defaultValue":null,"description":"","name":"top","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-event.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"number"},"tags":{}},"height":{"defaultValue":null,"description":"","name":"height","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-event.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"number"},"tags":{}},"width":{"defaultValue":null,"description":"","name":"width","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-event.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"number"},"tags":{}},"left":{"defaultValue":null,"description":"","name":"left","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-event.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"number"},"tags":{}},"onMouseDownSchedule":{"defaultValue":null,"description":"","name":"onMouseDownSchedule","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-event.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(data: any) => void"},"tags":{}}}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"CalendarScheduleGutter","methods":[],"props":{}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"CalendarScheduleSegment","methods":[],"props":{}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"CalendarScheduleSegments","methods":[],"props":{"workingHours":{"defaultValue":null,"description":"","name":"workingHours","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-segments.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"WorkingHours"},"tags":{}},"start":{"defaultValue":null,"description":"","name":"start","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-segments.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Date"},"tags":{}},"end":{"defaultValue":null,"description":"","name":"end","declarations":[{"fileName":"pro/src/calendar/calendar-schedule-segments.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Date"},"tags":{}}}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"CalendarSchedule","methods":[],"props":{"days":{"defaultValue":null,"description":"","name":"days","declarations":[{"fileName":"pro/src/calendar/calendar-schedule.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Schedule[]"},"tags":{}},"events":{"defaultValue":null,"description":"","name":"events","declarations":[{"fileName":"pro/src/calendar/calendar-schedule.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Event[]"},"tags":{}}}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"CalendarProvider","methods":[],"props":{"__ghostDismissTimeout":{"defaultValue":null,"description":"","name":"__ghostDismissTimeout","declarations":[{"fileName":"pro/src/calendar/calendar.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"canUpdate":{"defaultValue":null,"description":"","name":"canUpdate","declarations":[{"fileName":"pro/src/calendar/calendar.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"canAdd":{"defaultValue":null,"description":"","name":"canAdd","declarations":[{"fileName":"pro/src/calendar/calendar.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"hideDateLabels":{"defaultValue":null,"description":"","name":"hideDateLabels","declarations":[{"fileName":"pro/src/calendar/calendar.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"dimPastEvents":{"defaultValue":null,"description":"","name":"dimPastEvents","declarations":[{"fileName":"pro/src/calendar/calendar.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"scheduleOverlapThreshold":{"defaultValue":null,"description":"","name":"scheduleOverlapThreshold","declarations":[{"fileName":"pro/src/calendar/calendar.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"scheduleEvent":{"defaultValue":null,"description":"","name":"scheduleEvent","declarations":[{"fileName":"pro/src/calendar/calendar.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(props: any) => ReactElement>"},"tags":{}},"monthEvent":{"defaultValue":null,"description":"","name":"monthEvent","declarations":[{"fileName":"pro/src/calendar/calendar.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(props: any) => ReactElement>"},"tags":{}},"onEventOpen":{"defaultValue":null,"description":"","name":"onEventOpen","declarations":[{"fileName":"pro/src/calendar/calendar.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(data: any) => void"},"tags":{}},"onEventUpdate":{"defaultValue":null,"description":"","name":"onEventUpdate","declarations":[{"fileName":"pro/src/calendar/calendar.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(data: any) => void"},"tags":{}},"onEventAdd":{"defaultValue":null,"description":"","name":"onEventAdd","declarations":[{"fileName":"pro/src/calendar/calendar.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(data: any) => ReactNode"},"tags":{}}}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"timeToDecimal","methods":[],"props":{}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"getHeight","methods":[],"props":{}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"setMidnight","methods":[],"props":{}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"getColumnName","methods":[],"props":{}},{"tags":{},"filePath":"src/calendar/index.ts","description":"","displayName":"dateString","methods":[],"props":{}}] export const css = [[["--f-calendar-schedule-background","var(--f-color-surface)"],["--f-calendar-schedule-border-color","var(--f-color-border)"],["--f-calendar-schedule-caret-color","var(--f-color-accent)"],["--f-calendar-schedule-width","100%"],["--f-calendar-schedule-height","800px"]],[["--f-calendar-schedule-event-background","var(--f-color-surface-strong)"],["--f-calendar-schedule-event-color","var(--f-color-text)"],["--f-calendar-schedule-event-border","1px solid var(--f-color-border)"]],[["--f-calendar-past-background","var(--f-color-surface-strong)"],["--f-calendar-past-color","var(--f-color-text-weaker)"],["--f-calendar-past-opacity","0.5"]],[["--f-calendar-schedule-gutter-width","80px"],["--f-calendar-schedule-gutter-highlight"," var(--f-color-border)"],["--f-calendar-schedule-gutter-highlight-width","25px"],["--f-calendar-schedule-gutter-background","var(--f-color-surface)"]],[["--f-calendar-segment-background-highlighted","var(--f-color-border)"],["--f-calendar-segment-background","var(--f-color-surface-strong)"],["--f-calendar-segment-dimmed","var(--f-color-surface-strong)"],["--f-calendar-segment-hover","var(--f-color-surface-strong)"],["--f-calendar-segment-dimmer-hover","var(--f-color-surface-stronger)"],["--f-calendar-segment-dimmed-opacity","0.5"]],[["--f-calendar-days-background","var(--f-color-surface-strong)"],["--f-calendar-days-grid-columns","repeat(7, calc(100%/7))"],["--f-calendar-days-width","100%"],["--f-calendar-days-height","800px"],["--f-calendar-days-border","var(--f-color-border)"]],[["--f-calendar-event-height","22px"],["--f-calendar-days-day-background","var(--f-color-surface)"],["--f-calendar-days-day-background-hover","var(--f-color-surface)"],["--f-calendar-days-day-color","var(--f-color-text-weakest)"]],[],[["--f-month-event-background","var(--f-color-surface-strongest)"],["--f-month-event-color","var(--f-color-surface-strongest)"]],[["--f-calendar-dragging-opacity","0.5"]]] @@ -56,11 +57,24 @@ export const Month = () => { const [events, setEvents] = useState(data.events); const [event, setEvent] = useState({}); const [title, setTitle] = useState(''); + const { setDialog, closeDialog } = useDialog(); const handleEventUpdate = (ev) => { setEvents(events.map((event) => (event.id == ev.id ? { ...event, ...ev } : event))); }; const handleEventDelete = (ev) => { - setEvents(events.filter((event) => event.id != ev.id)); + setDialog({ + title: 'Are you sure?', + description: 'This action cannot be undone.', + footer: ( + + + ), + }); }; const handleEventOpen = (event) => { setEvent(event); @@ -116,7 +130,7 @@ export const Month = () => { - + ```tsx export const Month = () => { @@ -124,13 +138,33 @@ export const Month = () => { const [events, setEvents] = useState(data.events) const [event, setEvent] = useState({}) const [title, setTitle] = useState('') + const { setDialog, closeDialog } = useDialog() const handleEventUpdate = (ev) => { setEvents(events.map((event) => (event.id == ev.id ? { ...event, ...ev } : event))) } const handleEventDelete = (ev) => { - setEvents(events.filter((event) => event.id != ev.id)) + setDialog({ + title: 'Are you sure?', + description: 'This action cannot be undone.', + footer: ( + + + + + ), + }) } const handleEventOpen = (event) => { @@ -244,11 +278,24 @@ export const CustomDays = () => { const [event, setEvent] = useState({}); const [custom, setCustom] = useState(data.custom); const [title, setTitle] = useState(''); + const { setDialog, closeDialog } = useDialog(); const handleEventUpdate = (ev) => { setEvents(events.map((event) => (event.id == ev.id ? { ...event, ...ev } : event))); }; const handleEventDelete = (ev) => { - setEvents(events.filter((event) => event.id != ev.id)); + setDialog({ + title: 'Are you sure?', + description: 'This action cannot be undone.', + footer: ( + + + ), + }); }; const handleEventOpen = (event) => { setEvent(event); @@ -304,7 +351,7 @@ export const CustomDays = () => { - + ```tsx export const CustomDays = () => { @@ -313,13 +360,33 @@ export const CustomDays = () => { const [event, setEvent] = useState({}) const [custom, setCustom] = useState(data.custom) const [title, setTitle] = useState('') + const { setDialog, closeDialog } = useDialog() const handleEventUpdate = (ev) => { setEvents(events.map((event) => (event.id == ev.id ? { ...event, ...ev } : event))) } const handleEventDelete = (ev) => { - setEvents(events.filter((event) => event.id != ev.id)) + setDialog({ + title: 'Are you sure?', + description: 'This action cannot be undone.', + footer: ( + + + + + ), + }) } const handleEventOpen = (event) => { @@ -435,11 +502,24 @@ export const Schedule = () => { const [events, setEvents] = useState(data.events); const [event, setEvent] = useState({}); const [title, setTitle] = useState(''); + const { setDialog, closeDialog } = useDialog(); const handleEventUpdate = (ev) => { setEvents(events.map((event) => (event.id == ev.id ? { ...event, ...ev } : event))); }; const handleEventDelete = (ev) => { - setEvents(events.filter((event) => event.id != ev.id)); + setDialog({ + title: 'Are you sure?', + description: 'This action cannot be undone.', + footer: ( + + + ), + }); }; const handleEventOpen = (event) => { setEvent(event); @@ -495,7 +575,7 @@ export const Schedule = () => { - + ```tsx export const Schedule = () => { @@ -503,13 +583,33 @@ export const Schedule = () => { const [events, setEvents] = useState(data.events) const [event, setEvent] = useState({}) const [title, setTitle] = useState('') + const { setDialog, closeDialog } = useDialog() const handleEventUpdate = (ev) => { setEvents(events.map((event) => (event.id == ev.id ? { ...event, ...ev } : event))) } const handleEventDelete = (ev) => { - setEvents(events.filter((event) => event.id != ev.id)) + setDialog({ + title: 'Are you sure?', + description: 'This action cannot be undone.', + footer: ( + + + + + ), + }) } const handleEventOpen = (event) => { @@ -626,11 +726,24 @@ export const ScheduleDay = () => { const [events, setEvents] = useState(data.events); const [event, setEvent] = useState({}); const [title, setTitle] = useState(''); + const { setDialog, closeDialog } = useDialog(); const handleEventUpdate = (ev) => { setEvents(events.map((event) => (event.id == ev.id ? { ...event, ...ev } : event))); }; const handleEventDelete = (ev) => { - setEvents(events.filter((event) => event.id != ev.id)); + setDialog({ + title: 'Are you sure?', + description: 'This action cannot be undone.', + footer: ( + + + ), + }); }; const handleEventOpen = (event) => { setEvent(event); @@ -686,7 +799,7 @@ export const ScheduleDay = () => { - + ```tsx export const ScheduleDay = () => { @@ -694,13 +807,33 @@ export const ScheduleDay = () => { const [events, setEvents] = useState(data.events) const [event, setEvent] = useState({}) const [title, setTitle] = useState('') + const { setDialog, closeDialog } = useDialog() const handleEventUpdate = (ev) => { setEvents(events.map((event) => (event.id == ev.id ? { ...event, ...ev } : event))) } const handleEventDelete = (ev) => { - setEvents(events.filter((event) => event.id != ev.id)) + setDialog({ + title: 'Are you sure?', + description: 'This action cannot be undone.', + footer: ( + + + + + ), + }) } const handleEventOpen = (event) => { @@ -820,11 +953,24 @@ export const WeekView = () => { const [events, setEvents] = useState(data.events); const [event, setEvent] = useState({}); const [title, setTitle] = useState(''); + const { setDialog, closeDialog } = useDialog(); const handleEventUpdate = (ev) => { setEvents(events.map((event) => (event.id == ev.id ? { ...event, ...ev } : event))); }; const handleEventDelete = (ev) => { - setEvents(events.filter((event) => event.id != ev.id)); + setDialog({ + title: 'Are you sure?', + description: 'This action cannot be undone.', + footer: ( + + + ), + }); }; const handleEventOpen = (event) => { setEvent(event); @@ -892,7 +1038,7 @@ export const WeekView = () => { - + ```tsx export const WeekView = () => { @@ -902,13 +1048,33 @@ export const WeekView = () => { const [events, setEvents] = useState(data.events) const [event, setEvent] = useState({}) const [title, setTitle] = useState('') + const { setDialog, closeDialog } = useDialog() const handleEventUpdate = (ev) => { setEvents(events.map((event) => (event.id == ev.id ? { ...event, ...ev } : event))) } const handleEventDelete = (ev) => { - setEvents(events.filter((event) => event.id != ev.id)) + setDialog({ + title: 'Are you sure?', + description: 'This action cannot be undone.', + footer: ( + + + + + ), + }) } const handleEventOpen = (event) => { diff --git a/src/pages/docs/pro/common.mdx b/src/pages/docs/pro/common.mdx index 59999dd1..ea6dfe24 100644 --- a/src/pages/docs/pro/common.mdx +++ b/src/pages/docs/pro/common.mdx @@ -3,26 +3,25 @@ import DocsLayout from '@/layouts/docs.layout' import ComponentLayout from '@/layouts/component.layout' import { Button, View } from '@fold-dev/core' import * as Token from '@fold-dev/design/tokens' -import React, { useState } from 'react' +import React, { useEffect, useState } from 'react' import { Badges, Detail, LabelSelect, Labels, RichInput, UserSelect, Users, processHTML } from '@fold-pro/react' import * as data from '@/dummy-data' -import { sections } from '@/dummy-data' +import { sections, swimlanes } from '@/dummy-data' export const docs = {"title":"Common","subtitle":"Common components are shared components used by the Kanban Board, Todo List & Calendar components.","description":"These components offer a unified experience when interacting with the rest of the Pro components. They are meant as examples, that can be easily extended.","pro":true} -export const props = [{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"Badge","methods":[],"props":{"onClick":{"defaultValue":null,"description":"","name":"onClick","declarations":[{"fileName":"pro/src/common/badges.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(e: any) => void"},"tags":{}},"icon":{"defaultValue":null,"description":"","name":"icon","declarations":[{"fileName":"pro/src/common/badges.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"color":{"defaultValue":null,"description":"","name":"color","declarations":[{"fileName":"pro/src/common/badges.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"progress":{"defaultValue":null,"description":"","name":"progress","declarations":[{"fileName":"pro/src/common/badges.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"label":{"defaultValue":null,"description":"","name":"label","declarations":[{"fileName":"pro/src/common/badges.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"hide":{"defaultValue":null,"description":"","name":"hide","declarations":[{"fileName":"pro/src/common/badges.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"value":{"defaultValue":null,"description":"","name":"value","declarations":[{"fileName":"pro/src/common/badges.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}}}},{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"Badges","methods":[],"props":{"badges":{"defaultValue":null,"description":"","name":"badges","declarations":[{"fileName":"pro/src/common/badges.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"BadgesBadge[]"},"tags":{}},"onClick":{"defaultValue":null,"description":"","name":"onClick","declarations":[{"fileName":"pro/src/common/badges.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(e: any) => void"},"tags":{}}}},{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"Check","methods":[],"props":{"onCheck":{"defaultValue":null,"description":"","name":"onCheck","declarations":[{"fileName":"pro/src/common/check.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(e: any) => void"},"tags":{}},"checked":{"defaultValue":null,"description":"","name":"checked","declarations":[{"fileName":"pro/src/common/check.tsx","name":"TypeLiteral"},{"fileName":"packages/core/dist/checkbox/checkbox.d.ts","name":"TypeLiteral"},{"fileName":"fold/node_modules/@types/react/ts5.0/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"},"tags":{}},"iconProps":{"defaultValue":null,"description":"","name":"iconProps","declarations":[{"fileName":"pro/src/common/check.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}}}},{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"Description","methods":[],"props":{"text":{"defaultValue":null,"description":"","name":"text","declarations":[{"fileName":"pro/src/common/description.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"string"},"tags":{}},"complete":{"defaultValue":null,"description":"","name":"complete","declarations":[{"fileName":"pro/src/common/description.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"boolean"},"tags":{}}}},{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"Detail","methods":[],"props":{"onCancel":{"defaultValue":null,"description":"","name":"onCancel","declarations":[{"fileName":"pro/src/common/detail.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"() => void"},"tags":{}},"onSave":{"defaultValue":null,"description":"","name":"onSave","declarations":[{"fileName":"pro/src/common/detail.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(value: any) => void"},"tags":{}},"onDelete":{"defaultValue":null,"description":"","name":"onDelete","declarations":[{"fileName":"pro/src/common/detail.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(value: any) => void"},"tags":{}},"onUserFilter":{"defaultValue":null,"description":"","name":"onUserFilter","declarations":[{"fileName":"pro/src/common/detail.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: string) => void"},"tags":{}},"onLabelFilter":{"defaultValue":null,"description":"","name":"onLabelFilter","declarations":[{"fileName":"pro/src/common/detail.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: string) => void"},"tags":{}},"availableUsers":{"defaultValue":null,"description":"","name":"availableUsers","declarations":[{"fileName":"pro/src/common/detail.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"UserSelectUser[]"},"tags":{}},"availableLabels":{"defaultValue":null,"description":"","name":"availableLabels","declarations":[{"fileName":"pro/src/common/detail.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"LabelSelectLabel[]"},"tags":{}},"item":{"defaultValue":null,"description":"","name":"item","declarations":[{"fileName":"pro/src/common/detail.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"any"},"tags":{}},"monthNames":{"defaultValue":null,"description":"","name":"monthNames","declarations":[{"fileName":"pro/src/common/detail.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string[]"},"tags":{}},"colorPalette":{"defaultValue":null,"description":"","name":"colorPalette","declarations":[{"fileName":"pro/src/common/detail.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"string[]"},"tags":{}}}},{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"LabelMenu","methods":[],"props":{"saveOnUpdate":{"defaultValue":null,"description":"","name":"saveOnUpdate","declarations":[{"fileName":"pro/src/common/label-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"autoFocus":{"defaultValue":null,"description":"","name":"autoFocus","declarations":[{"fileName":"pro/src/common/label-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"variant":{"defaultValue":null,"description":"","name":"variant","declarations":[{"fileName":"pro/src/common/label-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"static\" | \"default\""},"tags":{}},"labels":{"defaultValue":null,"description":"","name":"labels","declarations":[{"fileName":"pro/src/common/label-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"LabelSelectLabel[]"},"tags":{}},"availableLabels":{"defaultValue":null,"description":"","name":"availableLabels","declarations":[{"fileName":"pro/src/common/label-menu.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"LabelSelectLabel[]"},"tags":{}},"onSave":{"defaultValue":null,"description":"","name":"onSave","declarations":[{"fileName":"pro/src/common/label-menu.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(labels: LabelSelectLabel[]) => void"},"tags":{}},"onCancel":{"defaultValue":null,"description":"","name":"onCancel","declarations":[{"fileName":"pro/src/common/label-menu.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"() => void"},"tags":{}},"onFilter":{"defaultValue":null,"description":"","name":"onFilter","declarations":[{"fileName":"pro/src/common/label-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(text: string) => void"},"tags":{}}}},{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"LabelSelect","methods":[],"props":{"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"},{"fileName":"packages/core/dist/select/select.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"enableNotFound":{"defaultValue":null,"description":"","name":"enableNotFound","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"variant":{"defaultValue":null,"description":"","name":"variant","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"},{"fileName":"packages/core/dist/select/select.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"\"static\" | \"default\""},"tags":{}},"labels":{"defaultValue":null,"description":"","name":"labels","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"LabelSelectLabel[]"},"tags":{}},"inputPlaceholder":{"defaultValue":null,"description":"","name":"inputPlaceholder","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"actionPrefix":{"defaultValue":null,"description":"","name":"actionPrefix","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"availableLabels":{"defaultValue":null,"description":"","name":"availableLabels","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"LabelSelectLabel[]"},"tags":{}},"onLabelAdd":{"defaultValue":null,"description":"","name":"onLabelAdd","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"any"},"tags":{}},"onLabelDelete":{"defaultValue":null,"description":"","name":"onLabelDelete","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"any"},"tags":{}},"onFilter":{"defaultValue":null,"description":"","name":"onFilter","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"},{"fileName":"packages/core/dist/select/select.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"pillProps":{"defaultValue":null,"description":"","name":"pillProps","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"PillProps"},"tags":{}}}},{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"Label","methods":[],"props":{"onClick":{"defaultValue":null,"description":"","name":"onClick","declarations":[{"fileName":"pro/src/common/labels.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(e: any) => void"},"tags":{}},"id":{"defaultValue":{"value":"null"},"description":"","name":"id","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string | number"},"tags":{}},"icon":{"defaultValue":{"value":"null"},"description":"","name":"icon","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"color":{"defaultValue":null,"description":"","name":"color","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"text":{"defaultValue":null,"description":"","name":"text","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"string"},"tags":{}}}},{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"Labels","methods":[],"props":{"labels":{"defaultValue":null,"description":"","name":"labels","declarations":[{"fileName":"pro/src/common/labels.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"LabelSelectLabel[]"},"tags":{}},"onClick":{"defaultValue":null,"description":"","name":"onClick","declarations":[{"fileName":"pro/src/common/labels.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(e: any) => void"},"tags":{}}}},{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"Popup","methods":[],"props":{}},{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"OptionsMenu","methods":[],"props":{}},{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"RichInput","methods":[],"props":{"dontClearOnSubmit":{"defaultValue":null,"description":"","name":"dontClearOnSubmit","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"autoFocus":{"defaultValue":null,"description":"","name":"autoFocus","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"placeholder":{"defaultValue":null,"description":"","name":"placeholder","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"defaultValue":{"defaultValue":null,"description":"","name":"defaultValue","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"triggers":{"defaultValue":null,"description":"","name":"triggers","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string[]"},"tags":{}},"options":{"defaultValue":null,"description":"","name":"options","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any[]"},"tags":{}},"className":{"defaultValue":null,"description":"","name":"className","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"},{"fileName":"packages/core/dist/types/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"onTrigger":{"defaultValue":null,"description":"","name":"onTrigger","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any) => void"},"tags":{}},"onWord":{"defaultValue":null,"description":"","name":"onWord","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any, cb: any, always?: any) => void"},"tags":{}},"onEnter":{"defaultValue":null,"description":"","name":"onEnter","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any) => void"},"tags":{}},"onCancel":{"defaultValue":null,"description":"","name":"onCancel","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"() => void"},"tags":{}},"onBlur":{"defaultValue":null,"description":"","name":"onBlur","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any) => void"},"tags":{}},"onIndent":{"defaultValue":null,"description":"","name":"onIndent","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"() => void"},"tags":{}},"onOutdent":{"defaultValue":null,"description":"","name":"onOutdent","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"() => void"},"tags":{}},"onUp":{"defaultValue":null,"description":"","name":"onUp","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"() => void"},"tags":{}},"onDown":{"defaultValue":null,"description":"","name":"onDown","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"() => void"},"tags":{}}}},{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"Title","methods":[],"props":{"text":{"defaultValue":null,"description":"","name":"text","declarations":[{"fileName":"pro/src/common/title.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"string"},"tags":{}},"complete":{"defaultValue":null,"description":"","name":"complete","declarations":[{"fileName":"pro/src/common/title.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"boolean"},"tags":{}}}},{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"TitleEditable","methods":[],"props":{"text":{"defaultValue":null,"description":"","name":"text","declarations":[{"fileName":"pro/src/common/title.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"string"},"tags":{}},"complete":{"defaultValue":null,"description":"","name":"complete","declarations":[{"fileName":"pro/src/common/title.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"boolean"},"tags":{}}}},{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"UserMenu","methods":[],"props":{"saveOnUpdate":{"defaultValue":null,"description":"","name":"saveOnUpdate","declarations":[{"fileName":"pro/src/common/user-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"autoFocus":{"defaultValue":null,"description":"","name":"autoFocus","declarations":[{"fileName":"pro/src/common/user-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"variant":{"defaultValue":null,"description":"","name":"variant","declarations":[{"fileName":"pro/src/common/user-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"static\" | \"default\""},"tags":{}},"users":{"defaultValue":null,"description":"","name":"users","declarations":[{"fileName":"pro/src/common/user-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"UserSelectUser[]"},"tags":{}},"availableUsers":{"defaultValue":null,"description":"","name":"availableUsers","declarations":[{"fileName":"pro/src/common/user-menu.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"UserSelectUser[]"},"tags":{}},"onSave":{"defaultValue":null,"description":"","name":"onSave","declarations":[{"fileName":"pro/src/common/user-menu.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(users: UserSelectUser[]) => void"},"tags":{}},"onCancel":{"defaultValue":null,"description":"","name":"onCancel","declarations":[{"fileName":"pro/src/common/user-menu.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"() => void"},"tags":{}},"onFilter":{"defaultValue":null,"description":"","name":"onFilter","declarations":[{"fileName":"pro/src/common/user-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(text: string) => void"},"tags":{}}}},{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"UserSelect","methods":[],"props":{"enableNotFound":{"defaultValue":null,"description":"","name":"enableNotFound","declarations":[{"fileName":"pro/src/common/user-select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"users":{"defaultValue":null,"description":"","name":"users","declarations":[{"fileName":"pro/src/common/user-select.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"UserSelectUser[]"},"tags":{}},"inputPlaceholder":{"defaultValue":null,"description":"","name":"inputPlaceholder","declarations":[{"fileName":"pro/src/common/user-select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"actionPrefix":{"defaultValue":null,"description":"","name":"actionPrefix","declarations":[{"fileName":"pro/src/common/user-select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"availableUsers":{"defaultValue":null,"description":"","name":"availableUsers","declarations":[{"fileName":"pro/src/common/user-select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"UserSelectUser[]"},"tags":{}},"onUserAdd":{"defaultValue":null,"description":"","name":"onUserAdd","declarations":[{"fileName":"pro/src/common/user-select.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"any"},"tags":{}},"onUserDelete":{"defaultValue":null,"description":"","name":"onUserDelete","declarations":[{"fileName":"pro/src/common/user-select.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"any"},"tags":{}},"onFilter":{"defaultValue":null,"description":"","name":"onFilter","declarations":[{"fileName":"pro/src/common/user-select.tsx","name":"TypeLiteral"},{"fileName":"packages/core/dist/select/select.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"pillProps":{"defaultValue":null,"description":"","name":"pillProps","declarations":[{"fileName":"pro/src/common/user-select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"PillProps"},"tags":{}}}},{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"Users","methods":[],"props":{"users":{"defaultValue":null,"description":"","name":"users","declarations":[{"fileName":"pro/src/common/users.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"UserSelectUser[]"},"tags":{}},"onClick":{"defaultValue":null,"description":"","name":"onClick","declarations":[{"fileName":"pro/src/common/users.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(e: any) => void"},"tags":{}}}}] +export const props = [{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"Badge","methods":[],"props":{"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"pro/src/common/badges.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"onClick":{"defaultValue":null,"description":"","name":"onClick","declarations":[{"fileName":"pro/src/common/badges.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(e: any) => void"},"tags":{}},"icon":{"defaultValue":null,"description":"","name":"icon","declarations":[{"fileName":"pro/src/common/badges.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"color":{"defaultValue":null,"description":"","name":"color","declarations":[{"fileName":"pro/src/common/badges.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"progress":{"defaultValue":null,"description":"","name":"progress","declarations":[{"fileName":"pro/src/common/badges.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"label":{"defaultValue":null,"description":"","name":"label","declarations":[{"fileName":"pro/src/common/badges.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"hide":{"defaultValue":null,"description":"","name":"hide","declarations":[{"fileName":"pro/src/common/badges.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"value":{"defaultValue":null,"description":"","name":"value","declarations":[{"fileName":"pro/src/common/badges.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}}}},{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"Badges","methods":[],"props":{"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"pro/src/common/badges.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"badges":{"defaultValue":null,"description":"","name":"badges","declarations":[{"fileName":"pro/src/common/badges.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"BadgesBadge[]"},"tags":{}},"onClick":{"defaultValue":null,"description":"","name":"onClick","declarations":[{"fileName":"pro/src/common/badges.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(e: any) => void"},"tags":{}}}},{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"Check","methods":[],"props":{"onCheck":{"defaultValue":null,"description":"","name":"onCheck","declarations":[{"fileName":"pro/src/common/check.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(e: any) => void"},"tags":{}},"checked":{"defaultValue":null,"description":"","name":"checked","declarations":[{"fileName":"pro/src/common/check.tsx","name":"TypeLiteral"},{"fileName":"pro/node_modules/@fold-dev/core/dist/checkbox/checkbox.d.ts","name":"TypeLiteral"},{"fileName":"fold/node_modules/@types/react/ts5.0/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"},"tags":{}},"iconProps":{"defaultValue":null,"description":"","name":"iconProps","declarations":[{"fileName":"pro/src/common/check.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}}}},{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"Detail","methods":[],"props":{"onCancel":{"defaultValue":null,"description":"","name":"onCancel","declarations":[{"fileName":"pro/src/common/detail.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"() => void"},"tags":{}},"onSave":{"defaultValue":null,"description":"","name":"onSave","declarations":[{"fileName":"pro/src/common/detail.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(value: any) => void"},"tags":{}},"onDelete":{"defaultValue":null,"description":"","name":"onDelete","declarations":[{"fileName":"pro/src/common/detail.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(value: any) => void"},"tags":{}},"onUserFilter":{"defaultValue":null,"description":"","name":"onUserFilter","declarations":[{"fileName":"pro/src/common/detail.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: string) => void"},"tags":{}},"onLabelFilter":{"defaultValue":null,"description":"","name":"onLabelFilter","declarations":[{"fileName":"pro/src/common/detail.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: string) => void"},"tags":{}},"useRichTitle":{"defaultValue":null,"description":"","name":"useRichTitle","declarations":[{"fileName":"pro/src/common/detail.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"richInputOptions":{"defaultValue":null,"description":"","name":"richInputOptions","declarations":[{"fileName":"pro/src/common/detail.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"RichInputOption[]"},"tags":{}},"richInputTrigger":{"defaultValue":null,"description":"","name":"richInputTrigger","declarations":[{"fileName":"pro/src/common/detail.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(word: any) => void"},"tags":{}},"richInputHighlight":{"defaultValue":null,"description":"","name":"richInputHighlight","declarations":[{"fileName":"pro/src/common/detail.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(word: string, cb: Function, always: boolean) => void"},"tags":{}},"availableUsers":{"defaultValue":null,"description":"","name":"availableUsers","declarations":[{"fileName":"pro/src/common/detail.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"UserSelectUser[]"},"tags":{}},"availableLabels":{"defaultValue":null,"description":"","name":"availableLabels","declarations":[{"fileName":"pro/src/common/detail.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"LabelSelectLabel[]"},"tags":{}},"item":{"defaultValue":null,"description":"","name":"item","declarations":[{"fileName":"pro/src/common/detail.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"any"},"tags":{}},"monthNames":{"defaultValue":null,"description":"","name":"monthNames","declarations":[{"fileName":"pro/src/common/detail.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string[]"},"tags":{}},"colorPalette":{"defaultValue":null,"description":"","name":"colorPalette","declarations":[{"fileName":"pro/src/common/detail.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"string[]"},"tags":{}}}},{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"LabelMenu","methods":[],"props":{"trapFocus":{"defaultValue":null,"description":"","name":"trapFocus","declarations":[{"fileName":"pro/src/common/label-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"saveOnUpdate":{"defaultValue":null,"description":"","name":"saveOnUpdate","declarations":[{"fileName":"pro/src/common/label-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"autoFocus":{"defaultValue":null,"description":"","name":"autoFocus","declarations":[{"fileName":"pro/src/common/label-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"variant":{"defaultValue":null,"description":"","name":"variant","declarations":[{"fileName":"pro/src/common/label-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"static\" | \"default\""},"tags":{}},"labels":{"defaultValue":null,"description":"","name":"labels","declarations":[{"fileName":"pro/src/common/label-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"LabelSelectLabel[]"},"tags":{}},"availableLabels":{"defaultValue":null,"description":"","name":"availableLabels","declarations":[{"fileName":"pro/src/common/label-menu.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"LabelSelectLabel[]"},"tags":{}},"onSave":{"defaultValue":null,"description":"","name":"onSave","declarations":[{"fileName":"pro/src/common/label-menu.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(labels: LabelSelectLabel[]) => void"},"tags":{}},"onCancel":{"defaultValue":null,"description":"","name":"onCancel","declarations":[{"fileName":"pro/src/common/label-menu.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"() => void"},"tags":{}},"onFilter":{"defaultValue":null,"description":"","name":"onFilter","declarations":[{"fileName":"pro/src/common/label-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(text: string) => void"},"tags":{}},"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"pro/src/common/label-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}}}},{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"LabelSelect","methods":[],"props":{"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"},{"fileName":"pro/node_modules/@fold-dev/core/dist/select/select.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"trapFocus":{"defaultValue":null,"description":"","name":"trapFocus","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"},{"fileName":"pro/node_modules/@fold-dev/core/dist/select/select.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{"description":"traps the focus within the options list"}},"enableNotFound":{"defaultValue":null,"description":"","name":"enableNotFound","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"variant":{"defaultValue":null,"description":"","name":"variant","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"},{"fileName":"pro/node_modules/@fold-dev/core/dist/select/select.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"\"static\" | \"default\""},"tags":{}},"labels":{"defaultValue":null,"description":"","name":"labels","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"LabelSelectLabel[]"},"tags":{}},"inputPlaceholder":{"defaultValue":null,"description":"","name":"inputPlaceholder","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"actionPrefix":{"defaultValue":null,"description":"","name":"actionPrefix","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"availableLabels":{"defaultValue":null,"description":"","name":"availableLabels","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"LabelSelectLabel[]"},"tags":{}},"onLabelAdd":{"defaultValue":null,"description":"","name":"onLabelAdd","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"any"},"tags":{}},"onLabelDelete":{"defaultValue":null,"description":"","name":"onLabelDelete","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"any"},"tags":{}},"onFilter":{"defaultValue":null,"description":"","name":"onFilter","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"},{"fileName":"pro/node_modules/@fold-dev/core/dist/select/select.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"pillProps":{"defaultValue":null,"description":"","name":"pillProps","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"PillProps"},"tags":{}}}},{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"Label","methods":[],"props":{"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"pro/src/common/labels.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"onClick":{"defaultValue":null,"description":"","name":"onClick","declarations":[{"fileName":"pro/src/common/labels.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(e: any) => void"},"tags":{}},"id":{"defaultValue":{"value":"null"},"description":"","name":"id","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string | number"},"tags":{}},"icon":{"defaultValue":{"value":"null"},"description":"","name":"icon","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"color":{"defaultValue":null,"description":"","name":"color","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"text":{"defaultValue":null,"description":"","name":"text","declarations":[{"fileName":"pro/src/common/label-select.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"string"},"tags":{}}}},{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"Labels","methods":[],"props":{"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"pro/src/common/labels.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"labels":{"defaultValue":null,"description":"","name":"labels","declarations":[{"fileName":"pro/src/common/labels.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"LabelSelectLabel[]"},"tags":{}},"onClick":{"defaultValue":null,"description":"","name":"onClick","declarations":[{"fileName":"pro/src/common/labels.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(e: any) => void"},"tags":{}}}},{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"Popup","methods":[],"props":{}},{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"OptionsMenu","methods":[],"props":{}},{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"RichInput","methods":[],"props":{"dontClearOnSubmit":{"defaultValue":null,"description":"","name":"dontClearOnSubmit","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"autoFocus":{"defaultValue":null,"description":"","name":"autoFocus","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"placeholder":{"defaultValue":null,"description":"","name":"placeholder","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"defaultValue":{"defaultValue":null,"description":"","name":"defaultValue","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"triggers":{"defaultValue":null,"description":"","name":"triggers","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string[]"},"tags":{}},"options":{"defaultValue":null,"description":"","name":"options","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any[]"},"tags":{}},"className":{"defaultValue":null,"description":"","name":"className","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"},{"fileName":"pro/node_modules/@fold-dev/core/dist/types/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"onTrigger":{"defaultValue":null,"description":"","name":"onTrigger","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any) => void"},"tags":{}},"onWord":{"defaultValue":null,"description":"","name":"onWord","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any, cb: any, always?: any) => void"},"tags":{}},"onEnter":{"defaultValue":null,"description":"","name":"onEnter","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any) => void"},"tags":{}},"onCancel":{"defaultValue":null,"description":"","name":"onCancel","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"() => void"},"tags":{}},"onBlur":{"defaultValue":null,"description":"","name":"onBlur","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any) => void"},"tags":{}},"onIndent":{"defaultValue":null,"description":"","name":"onIndent","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"() => void"},"tags":{}},"onOutdent":{"defaultValue":null,"description":"","name":"onOutdent","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"() => void"},"tags":{}},"onUp":{"defaultValue":null,"description":"","name":"onUp","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"() => void"},"tags":{}},"onDown":{"defaultValue":null,"description":"","name":"onDown","declarations":[{"fileName":"pro/src/common/rich-input.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"() => void"},"tags":{}}}},{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"UserMenu","methods":[],"props":{"trapFocus":{"defaultValue":null,"description":"","name":"trapFocus","declarations":[{"fileName":"pro/src/common/user-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"saveOnUpdate":{"defaultValue":null,"description":"","name":"saveOnUpdate","declarations":[{"fileName":"pro/src/common/user-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"autoFocus":{"defaultValue":null,"description":"","name":"autoFocus","declarations":[{"fileName":"pro/src/common/user-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"variant":{"defaultValue":null,"description":"","name":"variant","declarations":[{"fileName":"pro/src/common/user-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"static\" | \"default\""},"tags":{}},"users":{"defaultValue":null,"description":"","name":"users","declarations":[{"fileName":"pro/src/common/user-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"UserSelectUser[]"},"tags":{}},"availableUsers":{"defaultValue":null,"description":"","name":"availableUsers","declarations":[{"fileName":"pro/src/common/user-menu.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"UserSelectUser[]"},"tags":{}},"onSave":{"defaultValue":null,"description":"","name":"onSave","declarations":[{"fileName":"pro/src/common/user-menu.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(users: UserSelectUser[]) => void"},"tags":{}},"onCancel":{"defaultValue":null,"description":"","name":"onCancel","declarations":[{"fileName":"pro/src/common/user-menu.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"() => void"},"tags":{}},"onFilter":{"defaultValue":null,"description":"","name":"onFilter","declarations":[{"fileName":"pro/src/common/user-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(text: string) => void"},"tags":{}},"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"pro/src/common/user-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}}}},{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"UserSelect","methods":[],"props":{"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"pro/src/common/user-select.tsx","name":"TypeLiteral"},{"fileName":"pro/node_modules/@fold-dev/core/dist/select/select.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"trapFocus":{"defaultValue":null,"description":"","name":"trapFocus","declarations":[{"fileName":"pro/src/common/user-select.tsx","name":"TypeLiteral"},{"fileName":"pro/node_modules/@fold-dev/core/dist/select/select.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{"description":"traps the focus within the options list"}},"enableNotFound":{"defaultValue":null,"description":"","name":"enableNotFound","declarations":[{"fileName":"pro/src/common/user-select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"users":{"defaultValue":null,"description":"","name":"users","declarations":[{"fileName":"pro/src/common/user-select.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"UserSelectUser[]"},"tags":{}},"inputPlaceholder":{"defaultValue":null,"description":"","name":"inputPlaceholder","declarations":[{"fileName":"pro/src/common/user-select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"actionPrefix":{"defaultValue":null,"description":"","name":"actionPrefix","declarations":[{"fileName":"pro/src/common/user-select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"availableUsers":{"defaultValue":null,"description":"","name":"availableUsers","declarations":[{"fileName":"pro/src/common/user-select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"UserSelectUser[]"},"tags":{}},"onUserAdd":{"defaultValue":null,"description":"","name":"onUserAdd","declarations":[{"fileName":"pro/src/common/user-select.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"any"},"tags":{}},"onUserDelete":{"defaultValue":null,"description":"","name":"onUserDelete","declarations":[{"fileName":"pro/src/common/user-select.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"any"},"tags":{}},"onFilter":{"defaultValue":null,"description":"","name":"onFilter","declarations":[{"fileName":"pro/src/common/user-select.tsx","name":"TypeLiteral"},{"fileName":"pro/node_modules/@fold-dev/core/dist/select/select.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"pillProps":{"defaultValue":null,"description":"","name":"pillProps","declarations":[{"fileName":"pro/src/common/user-select.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"PillProps"},"tags":{}}}},{"tags":{},"filePath":"src/common/index.ts","description":"","displayName":"Users","methods":[],"props":{"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"pro/src/common/users.tsx","name":"TypeLiteral"},{"fileName":"pro/node_modules/@fold-dev/core/dist/types/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"users":{"defaultValue":null,"description":"","name":"users","declarations":[{"fileName":"pro/src/common/users.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"UserSelectUser[]"},"tags":{}},"onClick":{"defaultValue":null,"description":"","name":"onClick","declarations":[{"fileName":"pro/src/common/users.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(e: any) => void"},"tags":{}}}}] -export const css = [[["--f-title-description-completed-color","var(--f-color-text-weakest)"],["--f-title-color","var(--f-color-text)"],["--f-description-color","var(--f-color-text-weaker)"],["--f-title-size","var(--f-font-size-md)"],["--f-description-size","var(--f-font-size-md)"]],[["--f-check-padding","0"],["--f-check-margin-card","0"]],[["--f-badges-color","var(--f-color-text-weaker)"]],[["--f-rich-input-padding","0rem"],["--f-rich-input-color","var(--f-color-text)"],["--f-rich-input-color-placeholder","var(--f-color-text-weakest)"]]] +export const css = [[["--f-common-label-height","22px"],["--f-common-avatar-size","22px"],["--f-common-text-size","12px"],["--f-common-line-height","14px"],["--f-common-badges-color","var(--f-color-text-weaker)"]],[["--f-common-check-padding","0"],["--f-common-check-size","20px"],["--f-common-check-size-lg","30px"]],[["--f-rich-input-padding","0px"],["--f-rich-input-color","var(--f-color-text)"],["--f-rich-input-color-placeholder","var(--f-color-text-weakest)"],["--f-rich-input-entity-radius","var(--f-radius)"],["--f-rich-input-entity-padding","0"],["--f-rich-input-entity-color","var(--f-color-accent)"],["--f-rich-input-entity-background","var(--f-color-accent-weak)"],["--f-rich-input-link-color","var(--f-color-text-link)"],["--f-rich-input-decoration-size","default"],["--f-rich-input-menu-color-background","var(--f-color-surface)"],["--f-rich-input-menu-border-radius","var(--f-radius)"],["--f-rich-input-menu-border-color","var(--f-color-border)"],["--f-rich-input-menu-shadow","var(--f-shadow-card)"],["--f-rich-input-menu-padding","0.5rem"],["--f-rich-input-menu-item-padding","0.5px 15px"],["--f-rich-input-menu-text-size","14px"],["--f-rich-input-menu-line-height","20px"]]] - + ```tsx import { Badge, Badges, Check, - Description, Detail, LabelMenu, LabelSelect, @@ -31,8 +30,6 @@ import { Popup, OptionsMenu, RichInput, - Title, - TitleEditable, UserMenu, UserSelect, Users, @@ -205,12 +202,12 @@ export const LabelIndicator = () => { ### Item Detail export const ItemDetail = () => { - const [task, setTask] = useState({}); + const [task, setTask] = useState(swimlanes[0].columns[0].cards[0]); const isVisible = !!task.id; return ( - + - {isVisible && ( setTask({})} onSave={(task) => console.log('Save', task)} onDelete={(task) => console.log('Delete', task)}/>)} + {isVisible && ( setTask({})} onSave={(task) => console.log('Save', task)} onDelete={(task) => console.log('Delete', task)}/>)} ); }; @@ -218,21 +215,20 @@ export const ItemDetail = () => { - + ```tsx export const ItemDetail = () => { - const [task, setTask] = useState({}) + const [task, setTask] = useState(swimlanes[0].columns[0].cards[0]) const isVisible = !!task.id - - return ( - + {isVisible && ( { - return ( console.log('data', data)} csvData={data.csv} defaultRecords={data.records} defaultHeader={data.headers} defaultMapping={data.mapping} schema={[ - { key: 'customer-id', label: 'Customer ID', type: 'string' }, - { key: 'first-name', label: 'First Name', type: 'string' }, - { key: 'last-name', label: 'Last Name', type: 'string' }, - { key: 'company', label: 'Company', type: 'string' }, - { key: 'website', label: 'Website', type: 'string' }, - { - key: 'email', - label: 'Email', - type: 'string', - validate: ({ value }) => { - const valid = String(value) - .toLowerCase() - .match(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/); - if (valid) { - return []; - } - else { - return ['Not a valid email address']; - } - }, - }, - { - key: 'subscription-date', - label: 'Subscription Date', - type: 'date', - transform: ({ value }) => { - return new Date(value).toLocaleDateString('en-US', { - weekday: 'short', - year: 'numeric', - month: 'long', - day: 'numeric', - }); - }, - }, + return ( console.log('data', data)} schema={[ + { key: 'year', label: 'Year', type: 'string' }, + { key: 'variable', label: 'Variable', type: 'string' }, ]} toolbar={ Download CSV file ↗ @@ -80,56 +48,23 @@ export const Usage = () => { - + ```tsx export const Usage = () => { return ( console.log('data', data)} - csvData={data.csv} - defaultRecords={data.records} - defaultHeader={data.headers} - defaultMapping={data.mapping} + + + + schema={[ - { key: 'customer-id', label: 'Customer ID', type: 'string' }, - { key: 'first-name', label: 'First Name', type: 'string' }, - { key: 'last-name', label: 'Last Name', type: 'string' }, - { key: 'company', label: 'Company', type: 'string' }, - { key: 'website', label: 'Website', type: 'string' }, - { - key: 'email', - label: 'Email', - type: 'string', - validate: ({ value }) => { - const valid = String(value) - .toLowerCase() - .match( - /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ - ) - - if (valid) { - return [] - } else { - return ['Not a valid email address'] - } - }, - }, - { - key: 'subscription-date', - label: 'Subscription Date', - type: 'date', - transform: ({ value }) => { - return new Date(value).toLocaleDateString('en-US', { - weekday: 'short', - year: 'numeric', - month: 'long', - day: 'numeric', - }) - }, - }, + { key: 'year', label: 'Year', type: 'string' }, + { key: 'variable', label: 'Variable', type: 'string' }, + ]} toolbar={ "},"tags":{}},"selected":{"defaultValue":null,"description":"","name":"selected","declarations":[{"fileName":"pro/src/data-grid/data-grid-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"onSelect":{"defaultValue":null,"description":"","name":"onSelect","declarations":[{"fileName":"pro/src/data-grid/data-grid-cell.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(value: any) => void"},"tags":{}}}},{"tags":{},"filePath":"src/data-grid/index.ts","description":"","displayName":"DataGridCellComponent","methods":[],"props":{"value":{"defaultValue":null,"description":"","name":"value","declarations":[{"fileName":"pro/src/data-grid/data-grid-cell-component.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"string | number"},"tags":{}},"options":{"defaultValue":null,"description":"","name":"options","declarations":[{"fileName":"pro/src/data-grid/data-grid-cell-component.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"icon":{"defaultValue":null,"description":"","name":"icon","declarations":[{"fileName":"pro/src/data-grid/data-grid-cell-component.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"color":{"defaultValue":null,"description":"","name":"color","declarations":[{"fileName":"pro/src/data-grid/data-grid-cell-component.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"edit":{"defaultValue":null,"description":"","name":"edit","declarations":[{"fileName":"pro/src/data-grid/data-grid-cell-component.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"onEdit":{"defaultValue":null,"description":"","name":"onEdit","declarations":[{"fileName":"pro/src/data-grid/data-grid-cell-component.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(value: any) => void"},"tags":{}},"onCancel":{"defaultValue":null,"description":"","name":"onCancel","declarations":[{"fileName":"pro/src/data-grid/data-grid-cell-component.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"() => void"},"tags":{}}}},{"tags":{},"filePath":"src/data-grid/index.ts","description":"","displayName":"DataGridDefaultCellComponent","methods":[],"props":{}},{"tags":{},"filePath":"src/data-grid/index.ts","description":"","displayName":"DataGridHeader","methods":[],"props":{"sticky":{"defaultValue":null,"description":"","name":"sticky","declarations":[{"fileName":"pro/src/data-grid/data-grid-header.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"columns":{"defaultValue":null,"description":"","name":"columns","declarations":[{"fileName":"pro/src/data-grid/data-grid-header.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Column[]"},"tags":{}},"hideCheckbox":{"defaultValue":null,"description":"","name":"hideCheckbox","declarations":[{"fileName":"pro/src/data-grid/data-grid-header.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"component":{"defaultValue":null,"description":"","name":"component","declarations":[{"fileName":"pro/src/data-grid/data-grid-header.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"FunctionComponent<{}>"},"tags":{}},"resizableColumns":{"defaultValue":null,"description":"","name":"resizableColumns","declarations":[{"fileName":"pro/src/data-grid/data-grid-header.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"onWidthChange":{"defaultValue":null,"description":"","name":"onWidthChange","declarations":[{"fileName":"pro/src/data-grid/data-grid-header.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(index: any, value: any) => void"},"tags":{}},"onColumnClick":{"defaultValue":null,"description":"","name":"onColumnClick","declarations":[{"fileName":"pro/src/data-grid/data-grid-header.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(index: any, value: any) => void"},"tags":{}}}},{"tags":{},"filePath":"src/data-grid/index.ts","description":"","displayName":"DataGridHeaderCell","methods":[],"props":{"index":{"defaultValue":null,"description":"","name":"index","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"id":{"defaultValue":null,"description":"","name":"id","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell.tsx","name":"TypeLiteral"},{"fileName":"packages/core/dist/types/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"label":{"defaultValue":null,"description":"","name":"label","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell.tsx","name":"TypeLiteral"},{"fileName":"packages/core/dist/types/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"menu":{"defaultValue":null,"description":"","name":"menu","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"align":{"defaultValue":null,"description":"","name":"align","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"center\" | \"left\" | \"right\""},"tags":{}},"prefix":{"defaultValue":null,"description":"","name":"prefix","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"},"tags":{}},"suffix":{"defaultValue":null,"description":"","name":"suffix","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"},"tags":{}},"sortOrder":{"defaultValue":null,"description":"","name":"sortOrder","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"ASC\" | \"DESC\""},"tags":{}},"component":{"defaultValue":null,"description":"","name":"component","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"FunctionComponent<{}>"},"tags":{}},"onClick":{"defaultValue":null,"description":"","name":"onClick","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any) => void"},"tags":{}},"onWidthChange":{"defaultValue":null,"description":"","name":"onWidthChange","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any) => void"},"tags":{}},"disableWidthChange":{"defaultValue":null,"description":"","name":"disableWidthChange","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"disableDrag":{"defaultValue":null,"description":"","name":"disableDrag","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}}}},{"tags":{},"filePath":"src/data-grid/index.ts","description":"","displayName":"DataGridHeaderCellComponent","methods":[],"props":{"id":{"defaultValue":null,"description":"","name":"id","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell-component.tsx","name":"TypeLiteral"},{"fileName":"packages/core/dist/types/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"label":{"defaultValue":null,"description":"","name":"label","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell-component.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"string"},"tags":{}},"sortOrder":{"defaultValue":null,"description":"","name":"sortOrder","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell-component.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"ASC\" | \"DESC\""},"tags":{}},"menu":{"defaultValue":null,"description":"","name":"menu","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell-component.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"prefix":{"defaultValue":null,"description":"","name":"prefix","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell-component.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"},"tags":{}},"suffix":{"defaultValue":null,"description":"","name":"suffix","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell-component.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"},"tags":{}},"align":{"defaultValue":null,"description":"","name":"align","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell-component.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"center\" | \"left\" | \"right\""},"tags":{}},"onClick":{"defaultValue":null,"description":"","name":"onClick","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell-component.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(value: any) => void"},"tags":{}}}},{"tags":{},"filePath":"src/data-grid/index.ts","description":"","displayName":"DataGridRow","methods":[],"props":{}},{"tags":{},"filePath":"src/data-grid/index.ts","description":"","displayName":"DataGridProvider","methods":[],"props":{"id":{"defaultValue":null,"description":"","name":"id","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"defaultCellSelection":{"defaultValue":null,"description":"","name":"defaultCellSelection","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"defaultRowSelection":{"defaultValue":null,"description":"","name":"defaultRowSelection","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"draggableColumns":{"defaultValue":null,"description":"","name":"draggableColumns","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"draggableRows":{"defaultValue":null,"description":"","name":"draggableRows","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"maxRowsSelectable":{"defaultValue":null,"description":"","name":"maxRowsSelectable","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"singleRowSelect":{"defaultValue":null,"description":"","name":"singleRowSelect","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"columnWidths":{"defaultValue":null,"description":"","name":"columnWidths","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"any[]"},"tags":{}},"onSelect":{"defaultValue":null,"description":"","name":"onSelect","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any) => void"},"tags":{}}}},{"tags":{},"filePath":"src/data-grid/index.ts","description":"","displayName":"DataGridCore","methods":[],"props":{"variant":{"defaultValue":null,"description":"","name":"variant","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"virtual\" | \"default\""},"tags":{}},"virtual":{"defaultValue":null,"description":"","name":"virtual","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ rows: number; rowHeight: number; paddingTop: number; paddingBottom: number; }"},"tags":{}},"hideCheckbox":{"defaultValue":null,"description":"","name":"hideCheckbox","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"hideGutter":{"defaultValue":null,"description":"","name":"hideGutter","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"useFoldScroll":{"defaultValue":null,"description":"","name":"useFoldScroll","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"rows":{"defaultValue":null,"description":"","name":"rows","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Cell[][]"},"tags":{}},"footer":{"defaultValue":null,"description":"","name":"footer","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"},"tags":{}},"header":{"defaultValue":null,"description":"","name":"header","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"},"tags":{}},"pinFirst":{"defaultValue":null,"description":"","name":"pinFirst","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"pinLast":{"defaultValue":null,"description":"","name":"pinLast","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"onCellUpdate":{"defaultValue":null,"description":"","name":"onCellUpdate","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any) => void"},"tags":{}},"onCellDelete":{"defaultValue":null,"description":"","name":"onCellDelete","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any) => void"},"tags":{}},"onColumnMove":{"defaultValue":null,"description":"","name":"onColumnMove","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any) => void"},"tags":{}},"onRowMove":{"defaultValue":null,"description":"","name":"onRowMove","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any) => void"},"tags":{}},"onScroll":{"defaultValue":null,"description":"","name":"onScroll","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"},{"fileName":"fold/node_modules/@types/react/ts5.0/index.d.ts","name":"DOMAttributes"}],"required":false,"type":{"name":"((value: any) => void) & UIEventHandler"},"tags":{}},"toolbar":{"defaultValue":null,"description":"","name":"toolbar","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(selection: any) => ReactNode"},"tags":{}}}},{"tags":{},"filePath":"src/data-grid/index.ts","description":"","displayName":"DataGrid","methods":[],"props":{"variant":{"defaultValue":null,"description":"","name":"variant","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"virtual\" | \"default\""},"tags":{}},"virtual":{"defaultValue":null,"description":"","name":"virtual","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ rows: number; rowHeight: number; paddingTop: number; paddingBottom: number; }"},"tags":{}},"hideCheckbox":{"defaultValue":null,"description":"","name":"hideCheckbox","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"hideGutter":{"defaultValue":null,"description":"","name":"hideGutter","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"useFoldScroll":{"defaultValue":null,"description":"","name":"useFoldScroll","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"rows":{"defaultValue":null,"description":"","name":"rows","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Cell[][]"},"tags":{}},"footer":{"defaultValue":null,"description":"","name":"footer","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"},"tags":{}},"header":{"defaultValue":null,"description":"","name":"header","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"},"tags":{}},"pinFirst":{"defaultValue":null,"description":"","name":"pinFirst","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"pinLast":{"defaultValue":null,"description":"","name":"pinLast","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"onCellUpdate":{"defaultValue":null,"description":"","name":"onCellUpdate","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any) => void"},"tags":{}},"onCellDelete":{"defaultValue":null,"description":"","name":"onCellDelete","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any) => void"},"tags":{}},"onColumnMove":{"defaultValue":null,"description":"","name":"onColumnMove","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any) => void"},"tags":{}},"onRowMove":{"defaultValue":null,"description":"","name":"onRowMove","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any) => void"},"tags":{}},"onScroll":{"defaultValue":null,"description":"","name":"onScroll","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"},{"fileName":"fold/node_modules/@types/react/ts5.0/index.d.ts","name":"DOMAttributes"}],"required":false,"type":{"name":"((value: any) => void) & UIEventHandler"},"tags":{}},"toolbar":{"defaultValue":null,"description":"","name":"toolbar","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(selection: any) => ReactNode"},"tags":{}},"defaultCellSelection":{"defaultValue":null,"description":"","name":"defaultCellSelection","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"defaultRowSelection":{"defaultValue":null,"description":"","name":"defaultRowSelection","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"draggableColumns":{"defaultValue":null,"description":"","name":"draggableColumns","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"draggableRows":{"defaultValue":null,"description":"","name":"draggableRows","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"maxRowsSelectable":{"defaultValue":null,"description":"","name":"maxRowsSelectable","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"singleRowSelect":{"defaultValue":null,"description":"","name":"singleRowSelect","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"columnWidths":{"defaultValue":null,"description":"","name":"columnWidths","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"any[]"},"tags":{}}}},{"tags":{},"filePath":"src/data-grid/index.ts","description":"","displayName":"setExperimentalGlobalRowCellComponents","methods":[],"props":{}}] +export const props = [{"tags":{},"filePath":"src/data-grid/index.ts","description":"","displayName":"DataGridCell","methods":[],"props":{"value":{"defaultValue":null,"description":"","name":"value","declarations":[{"fileName":"pro/src/data-grid/data-grid-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string | number"},"tags":{}},"id":{"defaultValue":null,"description":"","name":"id","declarations":[{"fileName":"pro/src/data-grid/data-grid-cell.tsx","name":"TypeLiteral"},{"fileName":"pro/node_modules/@fold-dev/core/dist/types/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"index":{"defaultValue":null,"description":"","name":"index","declarations":[{"fileName":"pro/src/data-grid/data-grid-cell.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"number"},"tags":{}},"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"pro/src/data-grid/data-grid-cell.tsx","name":"TypeLiteral"},{"fileName":"pro/node_modules/@fold-dev/core/dist/types/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"edit":{"defaultValue":null,"description":"","name":"edit","declarations":[{"fileName":"pro/src/data-grid/data-grid-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"color":{"defaultValue":null,"description":"","name":"color","declarations":[{"fileName":"pro/src/data-grid/data-grid-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"icon":{"defaultValue":null,"description":"","name":"icon","declarations":[{"fileName":"pro/src/data-grid/data-grid-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"options":{"defaultValue":null,"description":"","name":"options","declarations":[{"fileName":"pro/src/data-grid/data-grid-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"disableSelect":{"defaultValue":null,"description":"","name":"disableSelect","declarations":[{"fileName":"pro/src/data-grid/data-grid-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"disableEdit":{"defaultValue":null,"description":"","name":"disableEdit","declarations":[{"fileName":"pro/src/data-grid/data-grid-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"component":{"defaultValue":null,"description":"","name":"component","declarations":[{"fileName":"pro/src/data-grid/data-grid-cell.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"FunctionComponent<{}>"},"tags":{}},"selected":{"defaultValue":null,"description":"","name":"selected","declarations":[{"fileName":"pro/src/data-grid/data-grid-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"onSelect":{"defaultValue":null,"description":"","name":"onSelect","declarations":[{"fileName":"pro/src/data-grid/data-grid-cell.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(value: any) => void"},"tags":{}}}},{"tags":{},"filePath":"src/data-grid/index.ts","description":"","displayName":"DataGridCellComponent","methods":[],"props":{"value":{"defaultValue":null,"description":"","name":"value","declarations":[{"fileName":"pro/src/data-grid/data-grid-cell-component.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"string | number"},"tags":{}},"options":{"defaultValue":null,"description":"","name":"options","declarations":[{"fileName":"pro/src/data-grid/data-grid-cell-component.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"icon":{"defaultValue":null,"description":"","name":"icon","declarations":[{"fileName":"pro/src/data-grid/data-grid-cell-component.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"color":{"defaultValue":null,"description":"","name":"color","declarations":[{"fileName":"pro/src/data-grid/data-grid-cell-component.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"edit":{"defaultValue":null,"description":"","name":"edit","declarations":[{"fileName":"pro/src/data-grid/data-grid-cell-component.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"onEdit":{"defaultValue":null,"description":"","name":"onEdit","declarations":[{"fileName":"pro/src/data-grid/data-grid-cell-component.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(value: any) => void"},"tags":{}},"onCancel":{"defaultValue":null,"description":"","name":"onCancel","declarations":[{"fileName":"pro/src/data-grid/data-grid-cell-component.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"() => void"},"tags":{}}}},{"tags":{},"filePath":"src/data-grid/index.ts","description":"","displayName":"DataGridDefaultCellComponent","methods":[],"props":{}},{"tags":{},"filePath":"src/data-grid/index.ts","description":"","displayName":"DataGridHeader","methods":[],"props":{"sticky":{"defaultValue":null,"description":"","name":"sticky","declarations":[{"fileName":"pro/src/data-grid/data-grid-header.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"columns":{"defaultValue":null,"description":"","name":"columns","declarations":[{"fileName":"pro/src/data-grid/data-grid-header.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Column[]"},"tags":{}},"hideCheckbox":{"defaultValue":null,"description":"","name":"hideCheckbox","declarations":[{"fileName":"pro/src/data-grid/data-grid-header.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"component":{"defaultValue":null,"description":"","name":"component","declarations":[{"fileName":"pro/src/data-grid/data-grid-header.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"FunctionComponent<{}>"},"tags":{}},"resizableColumns":{"defaultValue":null,"description":"","name":"resizableColumns","declarations":[{"fileName":"pro/src/data-grid/data-grid-header.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"onWidthChange":{"defaultValue":null,"description":"","name":"onWidthChange","declarations":[{"fileName":"pro/src/data-grid/data-grid-header.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(index: any, value: any) => void"},"tags":{}},"onColumnClick":{"defaultValue":null,"description":"","name":"onColumnClick","declarations":[{"fileName":"pro/src/data-grid/data-grid-header.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(index: any, value: any) => void"},"tags":{}}}},{"tags":{},"filePath":"src/data-grid/index.ts","description":"","displayName":"DataGridHeaderCell","methods":[],"props":{"index":{"defaultValue":null,"description":"","name":"index","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"id":{"defaultValue":null,"description":"","name":"id","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell.tsx","name":"TypeLiteral"},{"fileName":"pro/node_modules/@fold-dev/core/dist/types/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"label":{"defaultValue":null,"description":"","name":"label","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell.tsx","name":"TypeLiteral"},{"fileName":"pro/node_modules/@fold-dev/core/dist/types/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"menu":{"defaultValue":null,"description":"","name":"menu","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"align":{"defaultValue":null,"description":"","name":"align","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"center\" | \"left\" | \"right\""},"tags":{}},"prefix":{"defaultValue":null,"description":"","name":"prefix","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"},"tags":{}},"suffix":{"defaultValue":null,"description":"","name":"suffix","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"},"tags":{}},"sortOrder":{"defaultValue":null,"description":"","name":"sortOrder","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"ASC\" | \"DESC\""},"tags":{}},"component":{"defaultValue":null,"description":"","name":"component","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"FunctionComponent<{}>"},"tags":{}},"onClick":{"defaultValue":null,"description":"","name":"onClick","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any) => void"},"tags":{}},"onWidthChange":{"defaultValue":null,"description":"","name":"onWidthChange","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any) => void"},"tags":{}},"disableWidthChange":{"defaultValue":null,"description":"","name":"disableWidthChange","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"disableDrag":{"defaultValue":null,"description":"","name":"disableDrag","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}}}},{"tags":{},"filePath":"src/data-grid/index.ts","description":"","displayName":"DataGridHeaderCellComponent","methods":[],"props":{"id":{"defaultValue":null,"description":"","name":"id","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell-component.tsx","name":"TypeLiteral"},{"fileName":"pro/node_modules/@fold-dev/core/dist/types/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"label":{"defaultValue":null,"description":"","name":"label","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell-component.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"string"},"tags":{}},"sortOrder":{"defaultValue":null,"description":"","name":"sortOrder","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell-component.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"ASC\" | \"DESC\""},"tags":{}},"menu":{"defaultValue":null,"description":"","name":"menu","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell-component.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"prefix":{"defaultValue":null,"description":"","name":"prefix","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell-component.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"},"tags":{}},"suffix":{"defaultValue":null,"description":"","name":"suffix","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell-component.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"},"tags":{}},"align":{"defaultValue":null,"description":"","name":"align","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell-component.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"center\" | \"left\" | \"right\""},"tags":{}},"onClick":{"defaultValue":null,"description":"","name":"onClick","declarations":[{"fileName":"pro/src/data-grid/data-grid-header-cell-component.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(value: any) => void"},"tags":{}}}},{"tags":{},"filePath":"src/data-grid/index.ts","description":"","displayName":"DataGridRow","methods":[],"props":{}},{"tags":{},"filePath":"src/data-grid/index.ts","description":"","displayName":"DataGridProvider","methods":[],"props":{"id":{"defaultValue":null,"description":"","name":"id","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"defaultCellSelection":{"defaultValue":null,"description":"","name":"defaultCellSelection","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"defaultRowSelection":{"defaultValue":null,"description":"","name":"defaultRowSelection","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"draggableColumns":{"defaultValue":null,"description":"","name":"draggableColumns","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"draggableRows":{"defaultValue":null,"description":"","name":"draggableRows","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"maxRowsSelectable":{"defaultValue":null,"description":"","name":"maxRowsSelectable","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"singleRowSelect":{"defaultValue":null,"description":"","name":"singleRowSelect","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"columnWidths":{"defaultValue":null,"description":"","name":"columnWidths","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"any[]"},"tags":{}},"columnTypes":{"defaultValue":null,"description":"","name":"columnTypes","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"FunctionComponent<{}>[]"},"tags":{}},"onSelect":{"defaultValue":null,"description":"","name":"onSelect","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any) => void"},"tags":{}}}},{"tags":{},"filePath":"src/data-grid/index.ts","description":"","displayName":"DataGridCore","methods":[],"props":{"variant":{"defaultValue":null,"description":"","name":"variant","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"virtual\" | \"default\""},"tags":{}},"virtual":{"defaultValue":null,"description":"","name":"virtual","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ rows: number; rowHeight: number; paddingTop: number; paddingBottom: number; }"},"tags":{}},"hideCheckbox":{"defaultValue":null,"description":"","name":"hideCheckbox","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"useFoldScroll":{"defaultValue":null,"description":"","name":"useFoldScroll","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"rows":{"defaultValue":null,"description":"","name":"rows","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Cell[][]"},"tags":{}},"footer":{"defaultValue":null,"description":"","name":"footer","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"},"tags":{}},"header":{"defaultValue":null,"description":"","name":"header","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"},"tags":{}},"pinFirst":{"defaultValue":null,"description":"","name":"pinFirst","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"pinLast":{"defaultValue":null,"description":"","name":"pinLast","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"onCellUpdate":{"defaultValue":null,"description":"","name":"onCellUpdate","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any) => void"},"tags":{}},"onCellDelete":{"defaultValue":null,"description":"","name":"onCellDelete","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any) => void"},"tags":{}},"onColumnMove":{"defaultValue":null,"description":"","name":"onColumnMove","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any) => void"},"tags":{}},"onRowMove":{"defaultValue":null,"description":"","name":"onRowMove","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any) => void"},"tags":{}},"onScroll":{"defaultValue":null,"description":"","name":"onScroll","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"},{"fileName":"fold/node_modules/@types/react/ts5.0/index.d.ts","name":"DOMAttributes"}],"required":false,"type":{"name":"((value: any) => void) & UIEventHandler"},"tags":{}},"toolbar":{"defaultValue":null,"description":"","name":"toolbar","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(selection: any) => ReactNode"},"tags":{}}}},{"tags":{},"filePath":"src/data-grid/index.ts","description":"","displayName":"DataGrid","methods":[],"props":{"variant":{"defaultValue":null,"description":"","name":"variant","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"virtual\" | \"default\""},"tags":{}},"virtual":{"defaultValue":null,"description":"","name":"virtual","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ rows: number; rowHeight: number; paddingTop: number; paddingBottom: number; }"},"tags":{}},"hideCheckbox":{"defaultValue":null,"description":"","name":"hideCheckbox","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"useFoldScroll":{"defaultValue":null,"description":"","name":"useFoldScroll","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"rows":{"defaultValue":null,"description":"","name":"rows","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Cell[][]"},"tags":{}},"footer":{"defaultValue":null,"description":"","name":"footer","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"},"tags":{}},"header":{"defaultValue":null,"description":"","name":"header","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"},"tags":{}},"pinFirst":{"defaultValue":null,"description":"","name":"pinFirst","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"pinLast":{"defaultValue":null,"description":"","name":"pinLast","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"onCellUpdate":{"defaultValue":null,"description":"","name":"onCellUpdate","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any) => void"},"tags":{}},"onCellDelete":{"defaultValue":null,"description":"","name":"onCellDelete","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any) => void"},"tags":{}},"onColumnMove":{"defaultValue":null,"description":"","name":"onColumnMove","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any) => void"},"tags":{}},"onRowMove":{"defaultValue":null,"description":"","name":"onRowMove","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(value: any) => void"},"tags":{}},"onScroll":{"defaultValue":null,"description":"","name":"onScroll","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"},{"fileName":"fold/node_modules/@types/react/ts5.0/index.d.ts","name":"DOMAttributes"}],"required":false,"type":{"name":"((value: any) => void) & UIEventHandler"},"tags":{}},"toolbar":{"defaultValue":null,"description":"","name":"toolbar","declarations":[{"fileName":"pro/src/data-grid/data-grid.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(selection: any) => ReactNode"},"tags":{}},"defaultCellSelection":{"defaultValue":null,"description":"","name":"defaultCellSelection","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"defaultRowSelection":{"defaultValue":null,"description":"","name":"defaultRowSelection","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"draggableColumns":{"defaultValue":null,"description":"","name":"draggableColumns","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"draggableRows":{"defaultValue":null,"description":"","name":"draggableRows","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"maxRowsSelectable":{"defaultValue":null,"description":"","name":"maxRowsSelectable","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"singleRowSelect":{"defaultValue":null,"description":"","name":"singleRowSelect","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"columnWidths":{"defaultValue":null,"description":"","name":"columnWidths","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"any[]"},"tags":{}},"columnTypes":{"defaultValue":null,"description":"","name":"columnTypes","declarations":[{"fileName":"pro/src/data-grid/data-grid.provider.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"FunctionComponent<{}>[]"},"tags":{}}}}] -export const css = [[["--f-data-grid-selected-width","0.2rem"],["--f-data-grid-background","var(--f-color-surface)"],["--f-data-grid-columns","var(--f-data-grid-gutter-width) 300px 200px 200px 200px 200px 200px 200px 150px 150px"],["--f-data-grid-cell-height","40px"]],[["--f-data-grid-row-padding-left","0rem"],["--f-data-grid-row-padding-right","2px"]],[["--f-data-grid-gutter-width","80px"]]] +export const css = [[["--f-data-grid-gutter-width","100px"]],[["--f-data-grid-selected-width","0.2rem"],["--f-data-grid-border","none"],["--f-data-grid-background","var(--f-color-surface)"],["--f-data-grid-columns","var(--f-data-grid-gutter-width) 300px 200px 200px 200px 200px 200px 200px 150px 150px 150px 150px 150px"],["--f-data-grid-cell-height","40px"],["--f-data-grid-border-bottom","1px solid var(--f-color-surface-stronger)"],["--f-data-grid-border-right","0px solid var(--f-color-surface-stronger)"],["--f-data-grid-background-selected","var(--f-color-surface-stronger)"],["--f-data-grid-background-hover","var(--f-color-surface-strong)"],["--f-data-grid-background-header","var(--f-color-surface-strong)"],["--f-data-grid-background-header-hover","var(--f-color-surface-stronger)"]],[["--f-data-grid-row-padding-left","1rem"],["--f-data-grid-row-padding-right","5rem"]],[["--f-data-grid-gutter-number-display","block"],["--f-data-grid-gutter-number-left","0px"],["--f-data-grid-gutter-number-size","var(--f-font-size-md)"]]] - + ```tsx import { DataGridCell, @@ -34,7 +40,6 @@ import { DataGridProvider, DataGridCore, DataGrid, - setExperimentalGlobalRowCellComponents, } from "@fold-dev/core"; ``` @@ -44,11 +49,15 @@ export const Usage = () => { const [columnWidths, setColumnWidths] = useState(data.widths); const [columns, setColumns] = useState(data.columns); const [footerColumns, setFooterColumns] = useState(data.footer); + const [columnTypes, setColumnTypes] = useState(data.columnTypes); const [rows, setRows] = useState(data.rows); + const { setDialog, closeDialog } = useDialog(); const handleColumnMove = ({ origin, target }) => { dataGridState({ columnWidths, setColumnWidths, + columnTypes, + setColumnTypes, columns, setColumns, footerColumns, @@ -61,6 +70,8 @@ export const Usage = () => { dataGridState({ columnWidths, setColumnWidths, + columnTypes, + setColumnTypes, columns, setColumns, footerColumns, @@ -73,6 +84,8 @@ export const Usage = () => { dataGridState({ columnWidths, setColumnWidths, + columnTypes, + setColumnTypes, columns, setColumns, footerColumns, @@ -85,6 +98,8 @@ export const Usage = () => { dataGridState({ columnWidths, setColumnWidths, + columnTypes, + setColumnTypes, columns, setColumns, footerColumns, @@ -97,6 +112,8 @@ export const Usage = () => { dataGridState({ columnWidths, setColumnWidths, + columnTypes, + setColumnTypes, columns, setColumns, footerColumns, @@ -105,34 +122,41 @@ export const Usage = () => { setRows, }).handleCellDelete({ row, col }); }; - useLayoutEffect(() => { - setExperimentalGlobalRowCellComponents(data._rowCellComponents); - }, []); return ( ( Menu for: {target} )}> -
    - null} variant="virtual" virtual={{ + null} variant="virtual" virtual={{ rows: 10, rowHeight: 40, paddingTop: 40, paddingBottom: 30, - }} hideCheckbox={false} hideGutter={true} rows={rows} columnWidths={columnWidths} header={ setColumnWidths(columnWidths.map((w, i) => (i == index ? width : w)))}/>} footer={ setColumnWidths(columnWidths.map((w, i) => (i == index ? width : w)))}/>} footer={} pinFirst onCellUpdate={handleCellUpdate} onCellDelete={handleCellDelete} onColumnMove={handleColumnMove} onRowMove={handleRowMove} toolbar={({ rowSelection, cellSelection }) => ( - - {Object.values(rowSelection).length} rows,   - {Object.values(cellSelection).length} cells - - { - dispatchDataGridEvent('select-cells', { instanceId: 'instance-1' }); - dispatchDataGridEvent('select-rows', { instanceId: 'instance-1' }); + }}/>} pinFirst pinLast onCellUpdate={handleCellUpdate} onCellDelete={handleCellDelete} onColumnMove={handleColumnMove} onRowMove={handleRowMove} toolbar={({ rowSelection, cellSelection }) => ( + + {Object.values(rowSelection).length}{' '} + {Object.values(rowSelection).length == 1 ? 'row' : 'rows'} selected + + { + setDialog({ + title: 'Are you sure?', + description: 'This action cannot be undone.', + portal: Portal, + footer: ( + + + ), + }); }}/> - )}/> -
    +     )}/>     ); }; @@ -140,19 +164,23 @@ export const Usage = () => { - + ```tsx export const Usage = () => { const [columnWidths, setColumnWidths] = useState(data.widths) const [columns, setColumns] = useState(data.columns) const [footerColumns, setFooterColumns] = useState(data.footer) + const [columnTypes, setColumnTypes] = useState(data.columnTypes) const [rows, setRows] = useState(data.rows) + const { setDialog, closeDialog } = useDialog() const handleColumnMove = ({ origin, target }) => { dataGridState({ columnWidths, setColumnWidths, + columnTypes, + setColumnTypes, columns, setColumns, footerColumns, @@ -166,6 +194,8 @@ export const Usage = () => { dataGridState({ columnWidths, setColumnWidths, + columnTypes, + setColumnTypes, columns, setColumns, footerColumns, @@ -179,6 +209,8 @@ export const Usage = () => { dataGridState({ columnWidths, setColumnWidths, + columnTypes, + setColumnTypes, columns, setColumns, footerColumns, @@ -192,6 +224,8 @@ export const Usage = () => { dataGridState({ columnWidths, setColumnWidths, + columnTypes, + setColumnTypes, columns, setColumns, footerColumns, @@ -205,6 +239,8 @@ export const Usage = () => { dataGridState({ columnWidths, setColumnWidths, + columnTypes, + setColumnTypes, columns, setColumns, footerColumns, @@ -214,301 +250,6 @@ export const Usage = () => { }).handleCellDelete({ row, col }) } - useLayoutEffect(() => { - - - - - - - setExperimentalGlobalRowCellComponents(data._rowCellComponents) - }, []) - - return ( - ( - - Menu for: {target} - - )}> -
    - null} - - - - variant="virtual" - virtual={{ - rows: 10, - rowHeight: 40, - paddingTop: 40, - paddingBottom: 30, - }} - hideCheckbox={false} - hideGutter={true} - rows={rows} - columnWidths={columnWidths} - header={ - - setColumnWidths(columnWidths.map((w, i) => (i == index ? width : w))) - } - /> - } - footer={ - - } - pinFirst - - onCellUpdate={handleCellUpdate} - onCellDelete={handleCellDelete} - onColumnMove={handleColumnMove} - onRowMove={handleRowMove} - toolbar={({ rowSelection, cellSelection }) => ( - - - {Object.values(rowSelection).length} rows,   - {Object.values(cellSelection).length} cells - - { - dispatchDataGridEvent('select-cells', { instanceId: 'instance-1' }) - dispatchDataGridEvent('select-rows', { instanceId: 'instance-1' }) - }} - /> - - )} - /> -
    -     - ) -} -``` -### Borderless - -export const Borderless = () => { - const [columnWidths, setColumnWidths] = useState(data.widths); - const [columns, setColumns] = useState(data.columns); - const [footerColumns, setFooterColumns] = useState(data.footer); - const [rows, setRows] = useState(data.rows); - const handleColumnMove = ({ origin, target }) => { - dataGridState({ - columnWidths, - setColumnWidths, - columns, - setColumns, - footerColumns, - setFooterColumns, - rows, - setRows, - }).handleColumnMove({ origin, target }); - }; - const handleRowMove = ({ origin, target }) => { - dataGridState({ - columnWidths, - setColumnWidths, - columns, - setColumns, - footerColumns, - setFooterColumns, - rows, - setRows, - }).handleRowMove({ origin, target }); - }; - const handleColumnClick = (index, column) => { - dataGridState({ - columnWidths, - setColumnWidths, - columns, - setColumns, - footerColumns, - setFooterColumns, - rows, - setRows, - }).handleColumnClick(index, column); - }; - const handleCellUpdate = ({ value, row, col }) => { - dataGridState({ - columnWidths, - setColumnWidths, - columns, - setColumns, - footerColumns, - setFooterColumns, - rows, - setRows, - }).handleCellUpdate({ value, row, col }); - }; - const handleCellDelete = ({ row, col }) => { - dataGridState({ - columnWidths, - setColumnWidths, - columns, - setColumns, - footerColumns, - setFooterColumns, - rows, - setRows, - }).handleCellDelete({ row, col }); - }; - useLayoutEffect(() => { - setExperimentalGlobalRowCellComponents(data._rowCellComponents); - }, []); - return ( ( - Menu for: {target} - )}> -
    - null} variant="virtual" virtual={{ - rows: 10, - rowHeight: 40, - paddingTop: 40, - paddingBottom: 30, - }} hideCheckbox={false} hideGutter={false} rows={rows} columnWidths={columnWidths} header={ setColumnWidths(columnWidths.map((w, i) => (i == index ? width : w)))}/>} footer={} pinFirst pinLast onCellUpdate={handleCellUpdate} onCellDelete={handleCellDelete} onColumnMove={handleColumnMove} onRowMove={handleRowMove} toolbar={({ rowSelection, cellSelection }) => ( - - {Object.values(rowSelection).length} rows,   - {Object.values(cellSelection).length} cells - - { - dispatchDataGridEvent('select-cells', { instanceId: 'instance-1' }); - dispatchDataGridEvent('select-rows', { instanceId: 'instance-1' }); - }}/> - )}/> -
    -     ); -}; - -
    - -
    - - - -```tsx -export const Borderless = () => { - const [columnWidths, setColumnWidths] = useState(data.widths) - const [columns, setColumns] = useState(data.columns) - const [footerColumns, setFooterColumns] = useState(data.footer) - const [rows, setRows] = useState(data.rows) - - const handleColumnMove = ({ origin, target }) => { - dataGridState({ - columnWidths, - setColumnWidths, - columns, - setColumns, - footerColumns, - setFooterColumns, - rows, - setRows, - }).handleColumnMove({ origin, target }) - } - - const handleRowMove = ({ origin, target }) => { - dataGridState({ - columnWidths, - setColumnWidths, - columns, - setColumns, - footerColumns, - setFooterColumns, - rows, - setRows, - }).handleRowMove({ origin, target }) - } - - const handleColumnClick = (index, column: DataGridTypes.Column) => { - dataGridState({ - columnWidths, - setColumnWidths, - columns, - setColumns, - footerColumns, - setFooterColumns, - rows, - setRows, - }).handleColumnClick(index, column) - } - - const handleCellUpdate = ({ value, row, col }) => { - dataGridState({ - columnWidths, - setColumnWidths, - columns, - setColumns, - footerColumns, - setFooterColumns, - rows, - setRows, - }).handleCellUpdate({ value, row, col }) - } - - const handleCellDelete = ({ row, col }) => { - dataGridState({ - columnWidths, - setColumnWidths, - columns, - setColumns, - footerColumns, - setFooterColumns, - rows, - setRows, - }).handleCellDelete({ row, col }) - } - - useLayoutEffect(() => { - - - - - - - setExperimentalGlobalRowCellComponents(data._rowCellComponents) - }, []) - return ( ( @@ -516,98 +257,108 @@ export const Borderless = () => { Menu for: {target}     )}> -
    - null} - - - - variant="virtual" - virtual={{ - rows: 10, - rowHeight: 40, - paddingTop: 40, - paddingBottom: 30, - }} - hideCheckbox={false} - hideGutter={false} - rows={rows} - columnWidths={columnWidths} - header={ - - setColumnWidths(columnWidths.map((w, i) => (i == index ? width : w))) - } - /> - } - footer={ - null} + + + + variant="virtual" + virtual={{ + rows: 10, + rowHeight: 40, + paddingTop: 40, + paddingBottom: 30, + }} + hideCheckbox={false} + rows={rows} + columnWidths={columnWidths} + columnTypes={columnTypes} + header={ + + setColumnWidths(columnWidths.map((w, i) => (i == index ? width : w))) + } + /> + } + footer={ + + } + pinFirst + pinLast + onCellUpdate={handleCellUpdate} + onCellDelete={handleCellDelete} + onColumnMove={handleColumnMove} + onRowMove={handleRowMove} + toolbar={({ rowSelection, cellSelection }) => ( + + + {Object.values(rowSelection).length}{' '} + {Object.values(rowSelection).length == 1 ? 'row' : 'rows'} selected + + { + setDialog({ + title: 'Are you sure?', + description: 'This action cannot be undone.', + portal: Portal, + footer: ( + + + + + ), + }) }} /> - } - pinFirst - pinLast - onCellUpdate={handleCellUpdate} - onCellDelete={handleCellDelete} - onColumnMove={handleColumnMove} - onRowMove={handleRowMove} - toolbar={({ rowSelection, cellSelection }) => ( - - - {Object.values(rowSelection).length} rows,   - {Object.values(cellSelection).length} cells - - { - dispatchDataGridEvent('select-cells', { instanceId: 'instance-1' }) - dispatchDataGridEvent('select-rows', { instanceId: 'instance-1' }) - }} - /> - - )} - /> -
    + + )} + /> ) } diff --git a/src/pages/docs/pro/date-picker.mdx b/src/pages/docs/pro/date-picker.mdx index cd5f3984..e6f64612 100644 --- a/src/pages/docs/pro/date-picker.mdx +++ b/src/pages/docs/pro/date-picker.mdx @@ -5,9 +5,11 @@ import { Badge, Button, Card, + Heading, IconLib, Input, InputControl, + InputPopover, InputSuffix, pad, Popover, @@ -16,7 +18,7 @@ import { useVisibility, View, } from '@fold-dev/core' -import React, { useMemo, useRef, useState } from 'react' +import React, { useEffect, useMemo, useRef, useState } from 'react' import { DateCell, DatePicker, @@ -32,9 +34,9 @@ import { export const docs = {"title":"Date & Time Pickers","subtitle":"Date Time components offer highly versatile options for displaying and inputting dates.","description":"Date and Time components serve as fundamental elements for creating a wide range of date input controls, adapting to various requirements. While date elements can function on their own, their value is enhanced when incorporated within a DateRange context.","pro":true} -export const props = [{"tags":{},"filePath":"src/date-picker/index.ts","description":"","displayName":"DateCell","methods":[],"props":{"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"pro/src/date-picker/date-cell.tsx","name":"TypeLiteral"},{"fileName":"packages/core/dist/types/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"unavailable":{"defaultValue":null,"description":"","name":"unavailable","declarations":[{"fileName":"pro/src/date-picker/date-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"selected":{"defaultValue":null,"description":"","name":"selected","declarations":[{"fileName":"pro/src/date-picker/date-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"today":{"defaultValue":null,"description":"","name":"today","declarations":[{"fileName":"pro/src/date-picker/date-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"pending":{"defaultValue":null,"description":"","name":"pending","declarations":[{"fileName":"pro/src/date-picker/date-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"pendingStart":{"defaultValue":null,"description":"","name":"pendingStart","declarations":[{"fileName":"pro/src/date-picker/date-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"pendingEnd":{"defaultValue":null,"description":"","name":"pendingEnd","declarations":[{"fileName":"pro/src/date-picker/date-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"weekend":{"defaultValue":null,"description":"","name":"weekend","declarations":[{"fileName":"pro/src/date-picker/date-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"start":{"defaultValue":null,"description":"","name":"start","declarations":[{"fileName":"pro/src/date-picker/date-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"end":{"defaultValue":null,"description":"","name":"end","declarations":[{"fileName":"pro/src/date-picker/date-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}}}},{"tags":{},"filePath":"src/date-picker/index.ts","description":"","displayName":"DatePickerMonth","methods":[],"props":{"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"pro/src/date-picker/date-picker-month.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"selectWeek":{"defaultValue":null,"description":"","name":"selectWeek","declarations":[{"fileName":"pro/src/date-picker/date-picker-month.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"selection":{"defaultValue":null,"description":"","name":"selection","declarations":[{"fileName":"pro/src/date-picker/date-picker-month.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"DateSelection[]"},"tags":{}},"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"pro/src/date-picker/date-picker-month.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"DateSelection[]"},"tags":{}},"weekendDays":{"defaultValue":null,"description":"","name":"weekendDays","declarations":[{"fileName":"pro/src/date-picker/date-picker-month.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number[]"},"tags":{}},"date":{"defaultValue":null,"description":"","name":"date","declarations":[{"fileName":"pro/src/date-picker/date-picker-month.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Date"},"tags":{}},"offsetDays":{"defaultValue":null,"description":"","name":"offsetDays","declarations":[{"fileName":"pro/src/date-picker/date-picker-month.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"renderDay":{"defaultValue":null,"description":"","name":"renderDay","declarations":[{"fileName":"pro/src/date-picker/date-picker-month.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"onChange":{"defaultValue":null,"description":"","name":"onChange","declarations":[{"fileName":"pro/src/date-picker/date-picker-month.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"dateCellProps":{"defaultValue":null,"description":"","name":"dateCellProps","declarations":[{"fileName":"pro/src/date-picker/date-picker-month.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ disabled?: boolean; unavailable?: boolean; selected?: boolean; today?: boolean; pending?: boolean; pendingStart?: boolean; pendingEnd?: boolean; weekend?: boolean; start?: boolean; end?: boolean; } & { ...; } & AriaAttributes & CommonProps & ShorthandProps & DOMAttributes<...>"},"tags":{}}}},{"tags":{},"filePath":"src/date-picker/index.ts","description":"","displayName":"DatePickerWeekdays","methods":[],"props":{"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"pro/src/date-picker/date-picker-weekdays.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"weekdays":{"defaultValue":null,"description":"","name":"weekdays","declarations":[{"fileName":"pro/src/date-picker/date-picker-weekdays.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string[]"},"tags":{}}}},{"tags":{},"filePath":"src/date-picker/index.ts","description":"","displayName":"DatePicker","methods":[],"props":{"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"selectWeek":{"defaultValue":null,"description":"","name":"selectWeek","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"selection":{"defaultValue":null,"description":"","name":"selection","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"DateSelection[]"},"tags":{}},"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"DateSelection[]"},"tags":{}},"weekendDays":{"defaultValue":null,"description":"","name":"weekendDays","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number[]"},"tags":{}},"weekdays":{"defaultValue":null,"description":"","name":"weekdays","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string[]"},"tags":{}},"defaultDate":{"defaultValue":null,"description":"","name":"defaultDate","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Date"},"tags":{}},"offsetDays":{"defaultValue":null,"description":"","name":"offsetDays","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"renderDay":{"defaultValue":null,"description":"","name":"renderDay","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"onChange":{"defaultValue":null,"description":"","name":"onChange","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"dateCellProps":{"defaultValue":null,"description":"","name":"dateCellProps","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ disabled?: boolean; unavailable?: boolean; selected?: boolean; today?: boolean; pending?: boolean; pendingStart?: boolean; pendingEnd?: boolean; weekend?: boolean; start?: boolean; end?: boolean; } & { ...; } & AriaAttributes & CommonProps & ShorthandProps & DOMAttributes<...>"},"tags":{}},"yearAmount":{"defaultValue":null,"description":"","name":"yearAmount","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"defaultLevel":{"defaultValue":null,"description":"","name":"defaultLevel","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"days\" | \"months\" | \"years\""},"tags":{}},"lockLevel":{"defaultValue":null,"description":"","name":"lockLevel","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"panels":{"defaultValue":null,"description":"","name":"panels","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"weekdaysProps":{"defaultValue":null,"description":"","name":"weekdaysProps","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ size?: Size; weekdays?: string[]; } & AriaAttributes & CommonProps & ShorthandProps & DOMAttributes"},"tags":{}},"monthProps":{"defaultValue":null,"description":"","name":"monthProps","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Omit"},"tags":{}},"monthsProps":{"defaultValue":null,"description":"","name":"monthsProps","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Omit"},"tags":{}},"yearsProps":{"defaultValue":null,"description":"","name":"yearsProps","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Omit"},"tags":{}}}},{"tags":{},"filePath":"src/date-picker/index.ts","description":"","displayName":"DateRangeProvider","methods":[],"props":{}},{"tags":{},"filePath":"src/date-picker/index.ts","description":"","displayName":"MonthPicker","methods":[],"props":{"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"pro/src/date-picker/month-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"selection":{"defaultValue":null,"description":"","name":"selection","declarations":[{"fileName":"pro/src/date-picker/month-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"DateSelection[]"},"tags":{}},"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"pro/src/date-picker/month-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"DateSelection[]"},"tags":{}},"date":{"defaultValue":null,"description":"","name":"date","declarations":[{"fileName":"pro/src/date-picker/month-picker.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Date"},"tags":{}},"renderMonth":{"defaultValue":null,"description":"","name":"renderMonth","declarations":[{"fileName":"pro/src/date-picker/month-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"monthNames":{"defaultValue":null,"description":"","name":"monthNames","declarations":[{"fileName":"pro/src/date-picker/month-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any[]"},"tags":{}},"onChange":{"defaultValue":null,"description":"","name":"onChange","declarations":[{"fileName":"pro/src/date-picker/month-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"dateCellProps":{"defaultValue":null,"description":"","name":"dateCellProps","declarations":[{"fileName":"pro/src/date-picker/month-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ disabled?: boolean; unavailable?: boolean; selected?: boolean; today?: boolean; pending?: boolean; pendingStart?: boolean; pendingEnd?: boolean; weekend?: boolean; start?: boolean; end?: boolean; } & { ...; } & AriaAttributes & CommonProps & ShorthandProps & DOMAttributes<...>"},"tags":{}}}},{"tags":{},"filePath":"src/date-picker/index.ts","description":"","displayName":"ScrollingDatePicker","methods":[],"props":{"width":{"defaultValue":null,"description":"CSS width","name":"width","declarations":[{"fileName":"pro/src/date-picker/scrolling-date-picker.tsx","name":"TypeLiteral"},{"fileName":"packages/core/dist/types/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"height":{"defaultValue":null,"description":"CSS height","name":"height","declarations":[{"fileName":"pro/src/date-picker/scrolling-date-picker.tsx","name":"TypeLiteral"},{"fileName":"packages/core/dist/types/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"scrollThreshold":{"defaultValue":null,"description":"","name":"scrollThreshold","declarations":[{"fileName":"pro/src/date-picker/scrolling-date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"pro/src/date-picker/scrolling-date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"selection":{"defaultValue":null,"description":"","name":"selection","declarations":[{"fileName":"pro/src/date-picker/scrolling-date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"DateSelection[]"},"tags":{}},"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"pro/src/date-picker/scrolling-date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"DateSelection[]"},"tags":{}},"defaultDate":{"defaultValue":null,"description":"","name":"defaultDate","declarations":[{"fileName":"pro/src/date-picker/scrolling-date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Date"},"tags":{}},"onChange":{"defaultValue":null,"description":"","name":"onChange","declarations":[{"fileName":"pro/src/date-picker/scrolling-date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"renderDay":{"defaultValue":null,"description":"","name":"renderDay","declarations":[{"fileName":"pro/src/date-picker/scrolling-date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"dateCellProps":{"defaultValue":null,"description":"","name":"dateCellProps","declarations":[{"fileName":"pro/src/date-picker/scrolling-date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ disabled?: boolean; unavailable?: boolean; selected?: boolean; today?: boolean; pending?: boolean; pendingStart?: boolean; pendingEnd?: boolean; weekend?: boolean; start?: boolean; end?: boolean; } & { ...; } & AriaAttributes & CommonProps & ShorthandProps & DOMAttributes<...>"},"tags":{}},"weekdaysProps":{"defaultValue":null,"description":"","name":"weekdaysProps","declarations":[{"fileName":"pro/src/date-picker/scrolling-date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ size?: Size; weekdays?: string[]; } & AriaAttributes & CommonProps & ShorthandProps & DOMAttributes"},"tags":{}},"monthProps":{"defaultValue":null,"description":"","name":"monthProps","declarations":[{"fileName":"pro/src/date-picker/scrolling-date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Omit"},"tags":{}},"monthNames":{"defaultValue":null,"description":"","name":"monthNames","declarations":[{"fileName":"pro/src/date-picker/scrolling-date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string[]"},"tags":{}},"monthTitle":{"defaultValue":null,"description":"","name":"monthTitle","declarations":[{"fileName":"pro/src/date-picker/scrolling-date-picker.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(date: Date) => ReactElement>"},"tags":{}}}},{"tags":{},"filePath":"src/date-picker/index.ts","description":"","displayName":"TimePickerColumn","methods":[],"props":{"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"pro/src/date-picker/time-picker-column.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"items":{"defaultValue":null,"description":"","name":"items","declarations":[{"fileName":"pro/src/date-picker/time-picker-column.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"number[]"},"tags":{}},"selected":{"defaultValue":null,"description":"","name":"selected","declarations":[{"fileName":"pro/src/date-picker/time-picker-column.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"number"},"tags":{}},"onSelect":{"defaultValue":null,"description":"","name":"onSelect","declarations":[{"fileName":"pro/src/date-picker/time-picker-column.tsx","name":"TypeLiteral"},{"fileName":"fold/node_modules/@types/react/ts5.0/index.d.ts","name":"DOMAttributes"}],"required":false,"type":{"name":"any"},"tags":{}}}},{"tags":{},"filePath":"src/date-picker/index.ts","description":"","displayName":"TimePickerTime","methods":[],"props":{"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"pro/src/date-picker/time-picker-time.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Size"},"tags":{}},"value":{"defaultValue":null,"description":"","name":"value","declarations":[{"fileName":"pro/src/date-picker/time-picker-time.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"number"},"tags":{}},"selected":{"defaultValue":null,"description":"","name":"selected","declarations":[{"fileName":"pro/src/date-picker/time-picker-time.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"boolean"},"tags":{}},"onSelect":{"defaultValue":null,"description":"","name":"onSelect","declarations":[{"fileName":"pro/src/date-picker/time-picker-time.tsx","name":"TypeLiteral"},{"fileName":"fold/node_modules/@types/react/ts5.0/index.d.ts","name":"DOMAttributes"}],"required":false,"type":{"name":"any"},"tags":{}}}},{"tags":{},"filePath":"src/date-picker/index.ts","description":"","displayName":"TimePicker","methods":[],"props":{"twelveHours":{"defaultValue":null,"description":"","name":"twelveHours","declarations":[{"fileName":"pro/src/date-picker/time-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"customHours":{"defaultValue":null,"description":"","name":"customHours","declarations":[{"fileName":"pro/src/date-picker/time-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"hideAmPm":{"defaultValue":null,"description":"","name":"hideAmPm","declarations":[{"fileName":"pro/src/date-picker/time-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"date":{"defaultValue":null,"description":"","name":"date","declarations":[{"fileName":"pro/src/date-picker/time-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Date"},"tags":{}},"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"pro/src/date-picker/time-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"footer":{"defaultValue":null,"description":"","name":"footer","declarations":[{"fileName":"pro/src/date-picker/time-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"onChange":{"defaultValue":null,"description":"","name":"onChange","declarations":[{"fileName":"pro/src/date-picker/time-picker.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(date: Date) => void"},"tags":{}}}},{"tags":{},"filePath":"src/date-picker/index.ts","description":"","displayName":"YearPicker","methods":[],"props":{"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"pro/src/date-picker/year-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"selection":{"defaultValue":null,"description":"","name":"selection","declarations":[{"fileName":"pro/src/date-picker/year-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"DateSelection[]"},"tags":{}},"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"pro/src/date-picker/year-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"DateSelection[]"},"tags":{}},"date":{"defaultValue":null,"description":"","name":"date","declarations":[{"fileName":"pro/src/date-picker/year-picker.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Date"},"tags":{}},"renderYear":{"defaultValue":null,"description":"","name":"renderYear","declarations":[{"fileName":"pro/src/date-picker/year-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"yearAmount":{"defaultValue":null,"description":"","name":"yearAmount","declarations":[{"fileName":"pro/src/date-picker/year-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"onChange":{"defaultValue":null,"description":"","name":"onChange","declarations":[{"fileName":"pro/src/date-picker/year-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"dateCellProps":{"defaultValue":null,"description":"","name":"dateCellProps","declarations":[{"fileName":"pro/src/date-picker/year-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ disabled?: boolean; unavailable?: boolean; selected?: boolean; today?: boolean; pending?: boolean; pendingStart?: boolean; pendingEnd?: boolean; weekend?: boolean; start?: boolean; end?: boolean; } & { ...; } & AriaAttributes & CommonProps & ShorthandProps & DOMAttributes<...>"},"tags":{}}}}] +export const props = [{"tags":{},"filePath":"src/date-picker/index.ts","description":"","displayName":"DateCell","methods":[],"props":{"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"pro/src/date-picker/date-cell.tsx","name":"TypeLiteral"},{"fileName":"pro/node_modules/@fold-dev/core/dist/types/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"unavailable":{"defaultValue":null,"description":"","name":"unavailable","declarations":[{"fileName":"pro/src/date-picker/date-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"selected":{"defaultValue":null,"description":"","name":"selected","declarations":[{"fileName":"pro/src/date-picker/date-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"today":{"defaultValue":null,"description":"","name":"today","declarations":[{"fileName":"pro/src/date-picker/date-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"pending":{"defaultValue":null,"description":"","name":"pending","declarations":[{"fileName":"pro/src/date-picker/date-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"pendingStart":{"defaultValue":null,"description":"","name":"pendingStart","declarations":[{"fileName":"pro/src/date-picker/date-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"pendingEnd":{"defaultValue":null,"description":"","name":"pendingEnd","declarations":[{"fileName":"pro/src/date-picker/date-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"weekend":{"defaultValue":null,"description":"","name":"weekend","declarations":[{"fileName":"pro/src/date-picker/date-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"start":{"defaultValue":null,"description":"","name":"start","declarations":[{"fileName":"pro/src/date-picker/date-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"end":{"defaultValue":null,"description":"","name":"end","declarations":[{"fileName":"pro/src/date-picker/date-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}}}},{"tags":{},"filePath":"src/date-picker/index.ts","description":"","displayName":"DatePickerMonth","methods":[],"props":{"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"pro/src/date-picker/date-picker-month.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"selectWeek":{"defaultValue":null,"description":"","name":"selectWeek","declarations":[{"fileName":"pro/src/date-picker/date-picker-month.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"selection":{"defaultValue":null,"description":"","name":"selection","declarations":[{"fileName":"pro/src/date-picker/date-picker-month.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"DateSelection[]"},"tags":{}},"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"pro/src/date-picker/date-picker-month.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"DateSelection[]"},"tags":{}},"weekendDays":{"defaultValue":null,"description":"","name":"weekendDays","declarations":[{"fileName":"pro/src/date-picker/date-picker-month.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number[]"},"tags":{}},"date":{"defaultValue":null,"description":"","name":"date","declarations":[{"fileName":"pro/src/date-picker/date-picker-month.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Date"},"tags":{}},"offsetDays":{"defaultValue":null,"description":"","name":"offsetDays","declarations":[{"fileName":"pro/src/date-picker/date-picker-month.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"renderDay":{"defaultValue":null,"description":"","name":"renderDay","declarations":[{"fileName":"pro/src/date-picker/date-picker-month.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"onChange":{"defaultValue":null,"description":"","name":"onChange","declarations":[{"fileName":"pro/src/date-picker/date-picker-month.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"dateCellProps":{"defaultValue":null,"description":"","name":"dateCellProps","declarations":[{"fileName":"pro/src/date-picker/date-picker-month.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ disabled?: boolean; unavailable?: boolean; selected?: boolean; today?: boolean; pending?: boolean; pendingStart?: boolean; pendingEnd?: boolean; weekend?: boolean; start?: boolean; end?: boolean; } & { ...; } & AriaAttributes & CommonProps & ShorthandProps & DOMAttributes<...>"},"tags":{}}}},{"tags":{},"filePath":"src/date-picker/index.ts","description":"","displayName":"DatePickerWeekdays","methods":[],"props":{"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"pro/src/date-picker/date-picker-weekdays.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"weekdays":{"defaultValue":null,"description":"","name":"weekdays","declarations":[{"fileName":"pro/src/date-picker/date-picker-weekdays.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string[]"},"tags":{}}}},{"tags":{},"filePath":"src/date-picker/index.ts","description":"","displayName":"DatePicker","methods":[],"props":{"autoFocus":{"defaultValue":null,"description":"","name":"autoFocus","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"selectWeek":{"defaultValue":null,"description":"","name":"selectWeek","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"selection":{"defaultValue":null,"description":"","name":"selection","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"DateSelection[]"},"tags":{}},"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"DateSelection[]"},"tags":{}},"weekendDays":{"defaultValue":null,"description":"","name":"weekendDays","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number[]"},"tags":{}},"weekdays":{"defaultValue":null,"description":"","name":"weekdays","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string[]"},"tags":{}},"defaultDate":{"defaultValue":null,"description":"","name":"defaultDate","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Date"},"tags":{}},"offsetDays":{"defaultValue":null,"description":"","name":"offsetDays","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"renderDay":{"defaultValue":null,"description":"","name":"renderDay","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"onChange":{"defaultValue":null,"description":"","name":"onChange","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"dateCellProps":{"defaultValue":null,"description":"","name":"dateCellProps","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ disabled?: boolean; unavailable?: boolean; selected?: boolean; today?: boolean; pending?: boolean; pendingStart?: boolean; pendingEnd?: boolean; weekend?: boolean; start?: boolean; end?: boolean; } & { ...; } & AriaAttributes & CommonProps & ShorthandProps & DOMAttributes<...>"},"tags":{}},"yearAmount":{"defaultValue":null,"description":"","name":"yearAmount","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"defaultLevel":{"defaultValue":null,"description":"","name":"defaultLevel","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"days\" | \"months\" | \"years\""},"tags":{}},"lockLevel":{"defaultValue":null,"description":"","name":"lockLevel","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"panels":{"defaultValue":null,"description":"","name":"panels","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"weekdaysProps":{"defaultValue":null,"description":"","name":"weekdaysProps","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ size?: Size; weekdays?: string[]; } & AriaAttributes & CommonProps & ShorthandProps & DOMAttributes"},"tags":{}},"monthProps":{"defaultValue":null,"description":"","name":"monthProps","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Omit"},"tags":{}},"monthsProps":{"defaultValue":null,"description":"","name":"monthsProps","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Omit"},"tags":{}},"yearsProps":{"defaultValue":null,"description":"","name":"yearsProps","declarations":[{"fileName":"pro/src/date-picker/date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Omit"},"tags":{}}}},{"tags":{},"filePath":"src/date-picker/index.ts","description":"","displayName":"DateRangeProvider","methods":[],"props":{}},{"tags":{},"filePath":"src/date-picker/index.ts","description":"","displayName":"MonthPicker","methods":[],"props":{"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"pro/src/date-picker/month-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"selection":{"defaultValue":null,"description":"","name":"selection","declarations":[{"fileName":"pro/src/date-picker/month-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"DateSelection[]"},"tags":{}},"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"pro/src/date-picker/month-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"DateSelection[]"},"tags":{}},"date":{"defaultValue":null,"description":"","name":"date","declarations":[{"fileName":"pro/src/date-picker/month-picker.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Date"},"tags":{}},"renderMonth":{"defaultValue":null,"description":"","name":"renderMonth","declarations":[{"fileName":"pro/src/date-picker/month-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"monthNames":{"defaultValue":null,"description":"","name":"monthNames","declarations":[{"fileName":"pro/src/date-picker/month-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any[]"},"tags":{}},"onChange":{"defaultValue":null,"description":"","name":"onChange","declarations":[{"fileName":"pro/src/date-picker/month-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"dateCellProps":{"defaultValue":null,"description":"","name":"dateCellProps","declarations":[{"fileName":"pro/src/date-picker/month-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ disabled?: boolean; unavailable?: boolean; selected?: boolean; today?: boolean; pending?: boolean; pendingStart?: boolean; pendingEnd?: boolean; weekend?: boolean; start?: boolean; end?: boolean; } & { ...; } & AriaAttributes & CommonProps & ShorthandProps & DOMAttributes<...>"},"tags":{}}}},{"tags":{},"filePath":"src/date-picker/index.ts","description":"","displayName":"ScrollingDatePicker","methods":[],"props":{"autoFocus":{"defaultValue":null,"description":"","name":"autoFocus","declarations":[{"fileName":"pro/src/date-picker/scrolling-date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"width":{"defaultValue":null,"description":"CSS width","name":"width","declarations":[{"fileName":"pro/src/date-picker/scrolling-date-picker.tsx","name":"TypeLiteral"},{"fileName":"pro/node_modules/@fold-dev/core/dist/types/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"height":{"defaultValue":null,"description":"CSS height","name":"height","declarations":[{"fileName":"pro/src/date-picker/scrolling-date-picker.tsx","name":"TypeLiteral"},{"fileName":"pro/node_modules/@fold-dev/core/dist/types/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"scrollThreshold":{"defaultValue":null,"description":"","name":"scrollThreshold","declarations":[{"fileName":"pro/src/date-picker/scrolling-date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"pro/src/date-picker/scrolling-date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"selection":{"defaultValue":null,"description":"","name":"selection","declarations":[{"fileName":"pro/src/date-picker/scrolling-date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"DateSelection[]"},"tags":{}},"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"pro/src/date-picker/scrolling-date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"DateSelection[]"},"tags":{}},"defaultDate":{"defaultValue":null,"description":"","name":"defaultDate","declarations":[{"fileName":"pro/src/date-picker/scrolling-date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Date"},"tags":{}},"onChange":{"defaultValue":null,"description":"","name":"onChange","declarations":[{"fileName":"pro/src/date-picker/scrolling-date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"renderDay":{"defaultValue":null,"description":"","name":"renderDay","declarations":[{"fileName":"pro/src/date-picker/scrolling-date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"dateCellProps":{"defaultValue":null,"description":"","name":"dateCellProps","declarations":[{"fileName":"pro/src/date-picker/scrolling-date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ disabled?: boolean; unavailable?: boolean; selected?: boolean; today?: boolean; pending?: boolean; pendingStart?: boolean; pendingEnd?: boolean; weekend?: boolean; start?: boolean; end?: boolean; } & { ...; } & AriaAttributes & CommonProps & ShorthandProps & DOMAttributes<...>"},"tags":{}},"weekdaysProps":{"defaultValue":null,"description":"","name":"weekdaysProps","declarations":[{"fileName":"pro/src/date-picker/scrolling-date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ size?: Size; weekdays?: string[]; } & AriaAttributes & CommonProps & ShorthandProps & DOMAttributes"},"tags":{}},"monthProps":{"defaultValue":null,"description":"","name":"monthProps","declarations":[{"fileName":"pro/src/date-picker/scrolling-date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Omit"},"tags":{}},"monthNames":{"defaultValue":null,"description":"","name":"monthNames","declarations":[{"fileName":"pro/src/date-picker/scrolling-date-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string[]"},"tags":{}},"monthTitle":{"defaultValue":null,"description":"","name":"monthTitle","declarations":[{"fileName":"pro/src/date-picker/scrolling-date-picker.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(date: Date) => ReactElement>"},"tags":{}}}},{"tags":{},"filePath":"src/date-picker/index.ts","description":"","displayName":"TimePickerColumn","methods":[],"props":{"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"pro/src/date-picker/time-picker-column.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"items":{"defaultValue":null,"description":"","name":"items","declarations":[{"fileName":"pro/src/date-picker/time-picker-column.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"number[]"},"tags":{}},"selected":{"defaultValue":null,"description":"","name":"selected","declarations":[{"fileName":"pro/src/date-picker/time-picker-column.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"number"},"tags":{}},"onSelect":{"defaultValue":null,"description":"","name":"onSelect","declarations":[{"fileName":"pro/src/date-picker/time-picker-column.tsx","name":"TypeLiteral"},{"fileName":"fold/node_modules/@types/react/ts5.0/index.d.ts","name":"DOMAttributes"}],"required":false,"type":{"name":"any"},"tags":{}}}},{"tags":{},"filePath":"src/date-picker/index.ts","description":"","displayName":"TimePickerTime","methods":[],"props":{"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"pro/src/date-picker/time-picker-time.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Size"},"tags":{}},"value":{"defaultValue":null,"description":"","name":"value","declarations":[{"fileName":"pro/src/date-picker/time-picker-time.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"number"},"tags":{}},"selected":{"defaultValue":null,"description":"","name":"selected","declarations":[{"fileName":"pro/src/date-picker/time-picker-time.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"boolean"},"tags":{}},"onSelect":{"defaultValue":null,"description":"","name":"onSelect","declarations":[{"fileName":"pro/src/date-picker/time-picker-time.tsx","name":"TypeLiteral"},{"fileName":"fold/node_modules/@types/react/ts5.0/index.d.ts","name":"DOMAttributes"}],"required":false,"type":{"name":"any"},"tags":{}}}},{"tags":{},"filePath":"src/date-picker/index.ts","description":"","displayName":"TimePicker","methods":[],"props":{"autoFocus":{"defaultValue":null,"description":"","name":"autoFocus","declarations":[{"fileName":"pro/src/date-picker/time-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"twelveHours":{"defaultValue":null,"description":"","name":"twelveHours","declarations":[{"fileName":"pro/src/date-picker/time-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"customHours":{"defaultValue":null,"description":"","name":"customHours","declarations":[{"fileName":"pro/src/date-picker/time-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"minutesDivider":{"defaultValue":null,"description":"","name":"minutesDivider","declarations":[{"fileName":"pro/src/date-picker/time-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"secondsDivider":{"defaultValue":null,"description":"","name":"secondsDivider","declarations":[{"fileName":"pro/src/date-picker/time-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"showHours":{"defaultValue":null,"description":"","name":"showHours","declarations":[{"fileName":"pro/src/date-picker/time-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"showMinutes":{"defaultValue":null,"description":"","name":"showMinutes","declarations":[{"fileName":"pro/src/date-picker/time-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"showSeconds":{"defaultValue":null,"description":"","name":"showSeconds","declarations":[{"fileName":"pro/src/date-picker/time-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"showAmPm":{"defaultValue":null,"description":"","name":"showAmPm","declarations":[{"fileName":"pro/src/date-picker/time-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"date":{"defaultValue":null,"description":"","name":"date","declarations":[{"fileName":"pro/src/date-picker/time-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Date"},"tags":{}},"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"pro/src/date-picker/time-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"footer":{"defaultValue":null,"description":"","name":"footer","declarations":[{"fileName":"pro/src/date-picker/time-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"onChange":{"defaultValue":null,"description":"","name":"onChange","declarations":[{"fileName":"pro/src/date-picker/time-picker.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(date: Date) => void"},"tags":{}}}},{"tags":{},"filePath":"src/date-picker/index.ts","description":"","displayName":"YearPicker","methods":[],"props":{"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"pro/src/date-picker/year-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"selection":{"defaultValue":null,"description":"","name":"selection","declarations":[{"fileName":"pro/src/date-picker/year-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"DateSelection[]"},"tags":{}},"disabled":{"defaultValue":null,"description":"","name":"disabled","declarations":[{"fileName":"pro/src/date-picker/year-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"DateSelection[]"},"tags":{}},"date":{"defaultValue":null,"description":"","name":"date","declarations":[{"fileName":"pro/src/date-picker/year-picker.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"Date"},"tags":{}},"renderYear":{"defaultValue":null,"description":"","name":"renderYear","declarations":[{"fileName":"pro/src/date-picker/year-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"yearAmount":{"defaultValue":null,"description":"","name":"yearAmount","declarations":[{"fileName":"pro/src/date-picker/year-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"},"tags":{}},"onChange":{"defaultValue":null,"description":"","name":"onChange","declarations":[{"fileName":"pro/src/date-picker/year-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"any"},"tags":{}},"dateCellProps":{"defaultValue":null,"description":"","name":"dateCellProps","declarations":[{"fileName":"pro/src/date-picker/year-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ disabled?: boolean; unavailable?: boolean; selected?: boolean; today?: boolean; pending?: boolean; pendingStart?: boolean; pendingEnd?: boolean; weekend?: boolean; start?: boolean; end?: boolean; } & { ...; } & AriaAttributes & CommonProps & ShorthandProps & DOMAttributes<...>"},"tags":{}}}}] -export const css = [[["--f-date-cell-weekend","var(--f-color-text)"],["--f-date-cell-weekend-background","var(--f-color-surface-strong)"],["--f-date-cell-unavailable","var(--f-color-text-weakest)"],["--f-date-cell-disabled","var(--f-color-text-weakest)"],["--f-date-cell-disabled-background","var(--f-color-surface-strong)"],["--f-date-cell-pending","var(--f-color-accent)"],["--f-date-cell-pending-background","var(--f-color-accent-weak)"],["--f-date-cell-edge-selected","var(--f-color-accent-weak)"],["--f-date-cell-edge-selected-background","var(--f-color-accent)"],["--f-date-cell-selected","var(--f-color-accent)"],["--f-date-cell-selected-background","var(--f-color-accent-weak)"],["--f-date-cell-selected-space","1px"],["--f-date-cell-today","var(--f-color-accent)"],["--f-date-cell-pending-opacity","0.25"]],[["--f-month-weekday-padding","var(--f-space-5) 0"],["--f-month-weekdays-background","transparent"]],[["--f-month-day-width","calc(100%/7)"]],[["--f-months-month-width","calc(100%/12*3)"]],[["--f-years-year-width","calc(100%/12*3)"]],[["--f-date-picker-height","300px"]],[["--f-time-picker-background-color-hover","var(--f-color-surface-strong)"],["--f-time-picker-background-color-active","var(--f-color-surface-strong)"],["--f-time-picker-color","var(--f-color-text-weaker)"],["--f-time-picker-color-hover","var(--f-color-text-weak)"],["--f-time-picker-color-active","var(--f-color-accent)"],["--f-time-picker-padding","var(--f-space-2) var(--f-space-5)"],["--f-time-picker-ampm-padding","var(--f-space-3)"]]] +export const css = [[["--f-date-cell-weekend","var(--f-color-text)"],["--f-date-cell-weekend-background","var(--f-color-surface-strong)"],["--f-date-cell-unavailable","var(--f-color-text-weakest)"],["--f-date-cell-disabled","var(--f-color-text-weakest)"],["--f-date-cell-disabled-background","var(--f-color-surface-strong)"],["--f-date-cell-pending","var(--f-color-accent)"],["--f-date-cell-pending-background","var(--f-color-accent-weak)"],["--f-date-cell-edge-selected","var(--f-color-accent-weak)"],["--f-date-cell-edge-selected-background","var(--f-color-accent)"],["--f-date-cell-selected","var(--f-color-accent)"],["--f-date-cell-selected-background","var(--f-color-accent-weak)"],["--f-date-cell-selected-space","1px"],["--f-date-cell-today","var(--f-color-accent)"],["--f-date-cell-pending-opacity","0.25"]],[["--f-month-weekday-padding","var(--f-space-5) 0"],["--f-month-weekdays-background","transparent"]],[["--f-month-day-width","calc(100%/7)"]],[["--f-months-month-width","calc(100%/12*3)"]],[["--f-years-year-width","calc(100%/12*3)"]],[["--f-date-picker-height","300px"]],[["--f-time-picker-background-color-hover","var(--f-color-surface-strong)"],["--f-time-picker-background-color-active","var(--f-color-surface-strong)"],["--f-time-picker-color","var(--f-color-text-weaker)"],["--f-time-picker-color-hover","var(--f-color-text-weak)"],["--f-time-picker-color-active","var(--f-color-accent)"],["--f-time-picker-padding","var(--f-space-2) var(--f-space-5)"],["--f-time-picker-ampm-padding","0 var(--f-space-5)"]]] @@ -572,10 +574,10 @@ export const DateCellVariants = () => ( ### Time export const Time = () => { - const [date, setDate] = useState(new Date()); + const [date, setDate] = useState(new Date('2024-06-20 10:15:25')); return ( - + ); }; @@ -583,11 +585,11 @@ export const Time = () => {