@oneplatformdev/ui 0.1.99-beta.26 → 0.1.99-beta.261
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Accordion/Accordion.d.ts +1 -1
- package/Accordion/Accordion.d.ts.map +1 -1
- package/Accordion/Accordion.js +48 -26
- package/Accordion/Accordion.js.map +1 -1
- package/AlertDialog/AlertDialog.stories.js +67 -23
- package/AlertDialog/AlertDialog.stories.js.map +1 -1
- package/AlertDialog/AlertDialogRoot.d.ts.map +1 -1
- package/AlertDialog/AlertDialogRoot.js +20 -18
- package/AlertDialog/AlertDialogRoot.js.map +1 -1
- package/Button/Button.d.ts.map +1 -1
- package/Button/Button.js +43 -43
- package/Button/Button.js.map +1 -1
- package/Button/Button.stories.js +15 -12
- package/Button/Button.stories.js.map +1 -1
- package/Button/Button.utils.d.ts +3 -0
- package/Button/Button.utils.d.ts.map +1 -0
- package/Button/Button.utils.js +14 -0
- package/Button/Button.utils.js.map +1 -0
- package/Button/buttonVariants.d.ts +2 -2
- package/Button/buttonVariants.d.ts.map +1 -1
- package/Button/buttonVariants.js +38 -6
- package/Button/buttonVariants.js.map +1 -1
- package/Button/index.d.ts +1 -0
- package/Button/index.d.ts.map +1 -1
- package/Button/index.js +8 -6
- package/Button/index.js.map +1 -1
- package/ButtonIcon/ButtonIcon.d.ts.map +1 -1
- package/ButtonIcon/ButtonIcon.js +41 -39
- package/ButtonIcon/ButtonIcon.js.map +1 -1
- package/ButtonIcon/ButtonIcon.stories.js +35 -33
- package/ButtonIcon/ButtonIcon.stories.js.map +1 -1
- package/ButtonIcon/buttonIconVariants.d.ts +1 -1
- package/ButtonIcon/buttonIconVariants.d.ts.map +1 -1
- package/ButtonIcon/buttonIconVariants.js +3 -2
- package/ButtonIcon/buttonIconVariants.js.map +1 -1
- package/CHANGELOG.md +1511 -0
- package/Calendar/Calendar.js +5 -4
- package/Calendar/Calendar.js.map +1 -1
- package/Card/Card.d.ts.map +1 -1
- package/Card/Card.js +22 -21
- package/Card/Card.js.map +1 -1
- package/Checkbox/Checkbox.d.ts.map +1 -1
- package/Checkbox/Checkbox.js +36 -34
- package/Checkbox/Checkbox.js.map +1 -1
- package/Checkbox/Checkbox.stories.js +108 -0
- package/Checkbox/Checkbox.stories.js.map +1 -0
- package/Checkbox/Checkbox.types.d.ts +2 -1
- package/Checkbox/Checkbox.types.d.ts.map +1 -1
- package/Combobox/Combobox.d.ts +4 -2
- package/Combobox/Combobox.d.ts.map +1 -1
- package/Combobox/Combobox.js +222 -194
- package/Combobox/Combobox.js.map +1 -1
- package/Combobox/Combobox.stories.js +231 -85
- package/Combobox/Combobox.stories.js.map +1 -1
- package/Combobox/Combobox.types.d.ts +88 -24
- package/Combobox/Combobox.types.d.ts.map +1 -1
- package/Combobox/Combobox.types.js +4 -1
- package/Combobox/Combobox.types.js.map +1 -1
- package/Combobox/ComboboxOptionItem.d.ts +5 -3
- package/Combobox/ComboboxOptionItem.d.ts.map +1 -1
- package/Combobox/ComboboxOptionItem.js +81 -23
- package/Combobox/ComboboxOptionItem.js.map +1 -1
- package/Combobox/ComboboxRenderContent.d.ts +28 -0
- package/Combobox/ComboboxRenderContent.d.ts.map +1 -0
- package/Combobox/ComboboxRenderContent.js +143 -0
- package/Combobox/ComboboxRenderContent.js.map +1 -0
- package/Combobox/ComboboxRenderOptions.d.ts +4 -0
- package/Combobox/ComboboxRenderOptions.d.ts.map +1 -0
- package/Combobox/ComboboxRenderOptions.js +53 -0
- package/Combobox/ComboboxRenderOptions.js.map +1 -0
- package/Combobox/ComboboxRenderTrigger.d.ts +18 -0
- package/Combobox/ComboboxRenderTrigger.d.ts.map +1 -0
- package/Combobox/ComboboxRenderTrigger.js +120 -0
- package/Combobox/ComboboxRenderTrigger.js.map +1 -0
- package/Command/Command.d.ts +6 -1
- package/Command/Command.d.ts.map +1 -1
- package/Command/Command.js +61 -43
- package/Command/Command.js.map +1 -1
- package/ContextPopover/ContextDropdownMenu.d.ts +12 -0
- package/ContextPopover/ContextDropdownMenu.d.ts.map +1 -0
- package/ContextPopover/ContextDropdownMenu.js +41 -0
- package/ContextPopover/ContextDropdownMenu.js.map +1 -0
- package/ContextPopover/ContextPopover.d.ts +12 -0
- package/ContextPopover/ContextPopover.d.ts.map +1 -0
- package/ContextPopover/ContextPopover.js +34 -0
- package/ContextPopover/ContextPopover.js.map +1 -0
- package/ContextPopover/index.d.ts +4 -0
- package/ContextPopover/index.d.ts.map +1 -0
- package/ContextPopover/index.js +9 -0
- package/ContextPopover/index.js.map +1 -0
- package/ContextPopover/useContextPopoverHandler.d.ts +14 -0
- package/ContextPopover/useContextPopoverHandler.d.ts.map +1 -0
- package/ContextPopover/useContextPopoverHandler.js +21 -0
- package/ContextPopover/useContextPopoverHandler.js.map +1 -0
- package/DataTable/DataTable.js +16 -15
- package/DataTable/DataTable.js.map +1 -1
- package/Dialog/Dialog.d.ts +4 -1
- package/Dialog/Dialog.d.ts.map +1 -1
- package/Dialog/Dialog.js +83 -40
- package/Dialog/Dialog.js.map +1 -1
- package/Dialog/Dialog.stories.js +109 -0
- package/Dialog/Dialog.stories.js.map +1 -0
- package/Dialog/Dialog.types.d.ts +4 -0
- package/Dialog/Dialog.types.d.ts.map +1 -0
- package/Dialog/Dialog.types.js +2 -0
- package/Dialog/Dialog.types.js.map +1 -0
- package/Dialog/index.d.ts +1 -0
- package/Dialog/index.d.ts.map +1 -1
- package/Dialog/useDialogClosePosition.d.ts +11 -0
- package/Dialog/useDialogClosePosition.d.ts.map +1 -0
- package/Dialog/useDialogClosePosition.js +50 -0
- package/Dialog/useDialogClosePosition.js.map +1 -0
- package/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/DropdownMenu/DropdownMenu.js +33 -20
- package/DropdownMenu/DropdownMenu.js.map +1 -1
- package/Dropzone/Dropzone.d.ts.map +1 -1
- package/Dropzone/Dropzone.js +46 -28
- package/Dropzone/Dropzone.js.map +1 -1
- package/Dropzone/Dropzone.stories.js +100 -0
- package/Dropzone/Dropzone.stories.js.map +1 -0
- package/Dropzone/Dropzone.types.js +6 -6
- package/Dropzone/Dropzone.types.js.map +1 -1
- package/Form/FormRenderControl.d.ts +1 -1
- package/Form/FormRenderControl.d.ts.map +1 -1
- package/Form/FormRenderControl.js +55 -14
- package/Form/FormRenderControl.js.map +1 -1
- package/Form/FormRenderControl.types.d.ts +6 -2
- package/Form/FormRenderControl.types.d.ts.map +1 -1
- package/FormCombobox/FormCombobox.d.ts +4 -2
- package/FormCombobox/FormCombobox.d.ts.map +1 -1
- package/FormCombobox/FormCombobox.js +30 -17
- package/FormCombobox/FormCombobox.js.map +1 -1
- package/FormCombobox/FormCombobox.types.d.ts +6 -2
- package/FormCombobox/FormCombobox.types.d.ts.map +1 -1
- package/FormDatePicker/FormDatePicker.d.ts.map +1 -1
- package/FormDatePicker/FormDatePicker.js +18 -16
- package/FormDatePicker/FormDatePicker.js.map +1 -1
- package/FormDropzone/FormDropzone.d.ts.map +1 -1
- package/FormDropzone/FormDropzone.js +11 -9
- package/FormDropzone/FormDropzone.js.map +1 -1
- package/FormInput/FormInput.d.ts.map +1 -1
- package/FormInput/FormInput.js +47 -27
- package/FormInput/FormInput.js.map +1 -1
- package/FormInput/FormInput.stories.js +61 -0
- package/FormInput/FormInput.stories.js.map +1 -0
- package/FormInput/FormInput.types.d.ts +1 -0
- package/FormInput/FormInput.types.d.ts.map +1 -1
- package/FormSelect/FormSelect.d.ts.map +1 -1
- package/FormSelect/FormSelect.js +21 -17
- package/FormSelect/FormSelect.js.map +1 -1
- package/FormTextarea/FormTextarea.d.ts.map +1 -1
- package/FormTextarea/FormTextarea.js +15 -12
- package/FormTextarea/FormTextarea.js.map +1 -1
- package/InfoBlock/InfoBlock.d.ts +7 -0
- package/InfoBlock/InfoBlock.d.ts.map +1 -0
- package/InfoBlock/InfoBlock.js +28 -0
- package/InfoBlock/InfoBlock.js.map +1 -0
- package/InfoBlock/InfoBlock.stories.js +50 -0
- package/InfoBlock/InfoBlock.stories.js.map +1 -0
- package/InfoBlock/InfoBlock.types.d.ts +9 -0
- package/InfoBlock/InfoBlock.types.d.ts.map +1 -0
- package/InfoBlock/InfoBlock.types.js +2 -0
- package/InfoBlock/InfoBlock.types.js.map +1 -0
- package/InfoBlock/index.d.ts +3 -0
- package/InfoBlock/index.d.ts.map +1 -0
- package/InfoBlock/index.js +5 -0
- package/InfoBlock/index.js.map +1 -0
- package/InfoBlock/infoBlockVariants.d.ts +6 -0
- package/InfoBlock/infoBlockVariants.d.ts.map +1 -0
- package/InfoBlock/infoBlockVariants.js +27 -0
- package/InfoBlock/infoBlockVariants.js.map +1 -0
- package/Input/Input.d.ts.map +1 -1
- package/Input/Input.js +65 -51
- package/Input/Input.js.map +1 -1
- package/Input/Input.stories.js +154 -0
- package/Input/Input.stories.js.map +1 -0
- package/Input/Input.types.d.ts +1 -0
- package/Input/Input.types.d.ts.map +1 -1
- package/LoadingMask/LoadingMask.d.ts +1 -2
- package/LoadingMask/LoadingMask.d.ts.map +1 -1
- package/LoadingMask/LoadingMask.js +8 -8
- package/LoadingMask/LoadingMask.js.map +1 -1
- package/LoadingMask/LoadingMask.types.d.ts +1 -0
- package/LoadingMask/LoadingMask.types.d.ts.map +1 -1
- package/Popover/Popover.d.ts +3 -1
- package/Popover/Popover.d.ts.map +1 -1
- package/Popover/Popover.js +15 -10
- package/Popover/Popover.js.map +1 -1
- package/ScrollArea/ScrollArea.d.ts +5 -1
- package/ScrollArea/ScrollArea.d.ts.map +1 -1
- package/ScrollArea/ScrollArea.js +23 -17
- package/ScrollArea/ScrollArea.js.map +1 -1
- package/Search/Search.d.ts.map +1 -1
- package/Search/Search.js +40 -31
- package/Search/Search.js.map +1 -1
- package/Select/Select.d.ts.map +1 -1
- package/Select/Select.js +53 -48
- package/Select/Select.js.map +1 -1
- package/Select/Select.types.d.ts +4 -0
- package/Select/Select.types.d.ts.map +1 -1
- package/Select/SelectRoot.d.ts.map +1 -1
- package/Select/SelectRoot.js +78 -65
- package/Select/SelectRoot.js.map +1 -1
- package/Switch/Switch.d.ts +1 -1
- package/Switch/Switch.d.ts.map +1 -1
- package/Switch/Switch.js +19 -9
- package/Switch/Switch.js.map +1 -1
- package/Switch/Switch.stories.js +62 -0
- package/Switch/Switch.stories.js.map +1 -0
- package/TablePagination/TablePagination.js +9 -8
- package/TablePagination/TablePagination.js.map +1 -1
- package/Textarea/Textarea.d.ts.map +1 -1
- package/Textarea/Textarea.js +50 -45
- package/Textarea/Textarea.js.map +1 -1
- package/Textarea/Textarea.types.d.ts +3 -1
- package/Textarea/Textarea.types.d.ts.map +1 -1
- package/Toast/Toast.d.ts +1 -1
- package/Toast/toastVariants.d.ts +1 -1
- package/Tooltip/QuestionMarkIcon.svg.js +6 -0
- package/Tooltip/QuestionMarkIcon.svg.js.map +1 -0
- package/Tooltip/Tooltip.d.ts.map +1 -1
- package/Tooltip/Tooltip.js +52 -32
- package/Tooltip/Tooltip.js.map +1 -1
- package/Tooltip/Tooltip.types.d.ts +10 -0
- package/Tooltip/Tooltip.types.d.ts.map +1 -1
- package/Tooltip/tooltipVariants.d.ts +4 -0
- package/Tooltip/tooltipVariants.d.ts.map +1 -0
- package/Tooltip/tooltipVariants.js +23 -0
- package/Tooltip/tooltipVariants.js.map +1 -0
- package/index.d.ts +2 -0
- package/index.d.ts.map +1 -1
- package/index.js +342 -332
- package/index.js.map +1 -1
- package/package.json +7 -5
- package/vite-env.d.js +2 -0
- package/vite-env.d.js.map +1 -0
- package/vite-env.d.ts +7 -0
- package/Combobox/ComboboxOptions.d.ts +0 -4
- package/Combobox/ComboboxOptions.d.ts.map +0 -1
- package/Combobox/ComboboxOptions.js +0 -65
- package/Combobox/ComboboxOptions.js.map +0 -1
package/DataTable/DataTable.js
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { jsxs as i, jsx as l } from "react/jsx-runtime";
|
|
2
2
|
import { Button as m } from "../Button/Button.js";
|
|
3
3
|
import "../Button/buttonVariants.js";
|
|
4
|
+
import "react";
|
|
4
5
|
import { DropdownMenu as h, DropdownMenuTrigger as p, DropdownMenuContent as g, DropdownMenuCheckboxItem as u } from "../DropdownMenu/DropdownMenu.js";
|
|
5
6
|
import { Table as C, TableHeader as f, TableRow as t, TableHead as w, TableBody as x, TableCell as o } from "../Table/Table.js";
|
|
6
7
|
import { flexRender as d } from "@tanstack/react-table";
|
|
7
8
|
import { ChevronDown as b } from "lucide-react";
|
|
8
|
-
const
|
|
9
|
-
table:
|
|
9
|
+
const y = ({
|
|
10
|
+
table: n,
|
|
10
11
|
ToolBar: a,
|
|
11
12
|
tColumns: s = "Columns",
|
|
12
13
|
tNoResults: c = "No results"
|
|
@@ -19,12 +20,12 @@ const k = ({
|
|
|
19
20
|
" ",
|
|
20
21
|
/* @__PURE__ */ l(b, { className: "ml-2 h-4 w-4" })
|
|
21
22
|
] }) }),
|
|
22
|
-
/* @__PURE__ */ l(g, { align: "end", children:
|
|
23
|
+
/* @__PURE__ */ l(g, { align: "end", children: n.getAllColumns().filter((e) => e.getCanHide()).map((e) => /* @__PURE__ */ l(
|
|
23
24
|
u,
|
|
24
25
|
{
|
|
25
26
|
className: "capitalize",
|
|
26
27
|
checked: e.getIsVisible(),
|
|
27
|
-
onCheckedChange: (
|
|
28
|
+
onCheckedChange: (r) => e.toggleVisibility(!!r),
|
|
28
29
|
children: e.id
|
|
29
30
|
},
|
|
30
31
|
e.id
|
|
@@ -32,24 +33,24 @@ const k = ({
|
|
|
32
33
|
] })
|
|
33
34
|
] }),
|
|
34
35
|
/* @__PURE__ */ l("div", { className: "rounded-md border", children: /* @__PURE__ */ i(C, { children: [
|
|
35
|
-
/* @__PURE__ */ l(f, { children:
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
) },
|
|
39
|
-
/* @__PURE__ */ l(x, { children:
|
|
36
|
+
/* @__PURE__ */ l(f, { children: n.getHeaderGroups().map((e) => /* @__PURE__ */ l(t, { children: e.headers.map((r) => /* @__PURE__ */ l(w, { children: r.isPlaceholder ? null : d(
|
|
37
|
+
r.column.columnDef.header,
|
|
38
|
+
r.getContext()
|
|
39
|
+
) }, r.id)) }, e.id)) }),
|
|
40
|
+
/* @__PURE__ */ l(x, { children: n.getRowModel().rows?.length ? n.getRowModel().rows.map((e) => /* @__PURE__ */ l(
|
|
40
41
|
t,
|
|
41
42
|
{
|
|
42
43
|
"data-state": e.getIsSelected() && "selected",
|
|
43
|
-
children: e.getVisibleCells().map((
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
) },
|
|
44
|
+
children: e.getVisibleCells().map((r) => /* @__PURE__ */ l(o, { children: d(
|
|
45
|
+
r.column.columnDef.cell,
|
|
46
|
+
r.getContext()
|
|
47
|
+
) }, r.id))
|
|
47
48
|
},
|
|
48
49
|
e.id
|
|
49
50
|
)) : /* @__PURE__ */ l(t, { children: /* @__PURE__ */ l(
|
|
50
51
|
o,
|
|
51
52
|
{
|
|
52
|
-
colSpan:
|
|
53
|
+
colSpan: n.getAllColumns().length,
|
|
53
54
|
className: "h-24 text-center",
|
|
54
55
|
children: c
|
|
55
56
|
}
|
|
@@ -57,6 +58,6 @@ const k = ({
|
|
|
57
58
|
] }) })
|
|
58
59
|
] });
|
|
59
60
|
export {
|
|
60
|
-
|
|
61
|
+
y as DataTable
|
|
61
62
|
};
|
|
62
63
|
//# sourceMappingURL=DataTable.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.js","sources":["../../src/DataTable/DataTable.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '../Button';\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuTrigger,\n} from '../DropdownMenu';\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from '../Table';\nimport { flexRender, type Table as ReactTable } from '@tanstack/react-table';\nimport { ChevronDown } from 'lucide-react';\nimport React, { FC } from 'react';\n\ninterface IProps {\n table: ReactTable<any>;\n ToolBar?: React.ReactNode;\n tColumns?: string;\n tNoResults?: string;\n}\n\nexport const DataTable: FC<IProps> = ({\n table,\n ToolBar,\n tColumns = 'Columns',\n tNoResults = 'No results',\n}) => {\n return (\n <div className=\"w-full\">\n <div className=\"flex items-center py-4\">\n {ToolBar}\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" className=\"ml-auto\">\n {tColumns} <ChevronDown className=\"ml-2 h-4 w-4\" />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n {table\n .getAllColumns()\n .filter((column) => column.getCanHide())\n .map((column) => {\n return (\n <DropdownMenuCheckboxItem\n key={column.id}\n className=\"capitalize\"\n checked={column.getIsVisible()}\n onCheckedChange={(value) =>\n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n </DropdownMenuCheckboxItem>\n );\n })}\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n <div className=\"rounded-md border\">\n <Table>\n <TableHeader>\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id}>\n {headerGroup.headers.map((header) => {\n return (\n <TableHead key={header.id}>\n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n </TableHead>\n );\n })}\n </TableRow>\n ))}\n </TableHeader>\n <TableBody>\n {table.getRowModel().rows?.length ? (\n table.getRowModel().rows.map((row) => (\n <TableRow\n key={row.id}\n data-state={row.getIsSelected() && 'selected'}\n >\n {row.getVisibleCells().map((cell) => (\n <TableCell key={cell.id}>\n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext()\n )}\n </TableCell>\n ))}\n </TableRow>\n ))\n ) : (\n <TableRow>\n <TableCell\n colSpan={table.getAllColumns().length}\n className=\"h-24 text-center\"\n >\n {tNoResults}\n </TableCell>\n </TableRow>\n )}\n </TableBody>\n </Table>\n </div>\n </div>\n );\n};\n"],"names":["DataTable","table","ToolBar","tColumns","tNoResults","jsxs","DropdownMenu","jsx","DropdownMenuTrigger","Button","ChevronDown","DropdownMenuContent","column","DropdownMenuCheckboxItem","value","Table","TableHeader","headerGroup","TableRow","header","TableHead","flexRender","TableBody","row","cell","TableCell"],"mappings":"
|
|
1
|
+
{"version":3,"file":"DataTable.js","sources":["../../src/DataTable/DataTable.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '../Button';\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuTrigger,\n} from '../DropdownMenu';\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from '../Table';\nimport { flexRender, type Table as ReactTable } from '@tanstack/react-table';\nimport { ChevronDown } from 'lucide-react';\nimport React, { FC } from 'react';\n\ninterface IProps {\n table: ReactTable<any>;\n ToolBar?: React.ReactNode;\n tColumns?: string;\n tNoResults?: string;\n}\n\nexport const DataTable: FC<IProps> = ({\n table,\n ToolBar,\n tColumns = 'Columns',\n tNoResults = 'No results',\n}) => {\n return (\n <div className=\"w-full\">\n <div className=\"flex items-center py-4\">\n {ToolBar}\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" className=\"ml-auto\">\n {tColumns} <ChevronDown className=\"ml-2 h-4 w-4\" />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n {table\n .getAllColumns()\n .filter((column) => column.getCanHide())\n .map((column) => {\n return (\n <DropdownMenuCheckboxItem\n key={column.id}\n className=\"capitalize\"\n checked={column.getIsVisible()}\n onCheckedChange={(value) =>\n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n </DropdownMenuCheckboxItem>\n );\n })}\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n <div className=\"rounded-md border\">\n <Table>\n <TableHeader>\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id}>\n {headerGroup.headers.map((header) => {\n return (\n <TableHead key={header.id}>\n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n </TableHead>\n );\n })}\n </TableRow>\n ))}\n </TableHeader>\n <TableBody>\n {table.getRowModel().rows?.length ? (\n table.getRowModel().rows.map((row) => (\n <TableRow\n key={row.id}\n data-state={row.getIsSelected() && 'selected'}\n >\n {row.getVisibleCells().map((cell) => (\n <TableCell key={cell.id}>\n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext()\n )}\n </TableCell>\n ))}\n </TableRow>\n ))\n ) : (\n <TableRow>\n <TableCell\n colSpan={table.getAllColumns().length}\n className=\"h-24 text-center\"\n >\n {tNoResults}\n </TableCell>\n </TableRow>\n )}\n </TableBody>\n </Table>\n </div>\n </div>\n );\n};\n"],"names":["DataTable","table","ToolBar","tColumns","tNoResults","jsxs","DropdownMenu","jsx","DropdownMenuTrigger","Button","ChevronDown","DropdownMenuContent","column","DropdownMenuCheckboxItem","value","Table","TableHeader","headerGroup","TableRow","header","TableHead","flexRender","TableBody","row","cell","TableCell"],"mappings":";;;;;;;;AA4BO,MAAMA,IAAwB,CAAC;AAAA,EACpC,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AACf,MAEI,gBAAAC,EAAC,OAAA,EAAI,WAAU,UACb,UAAA;AAAA,EAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,0BACZ,UAAA;AAAA,IAAAH;AAAA,sBACAI,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAoB,SAAO,IAC1B,UAAA,gBAAAH,EAACI,KAAO,SAAQ,WAAU,WAAU,WACjC,UAAA;AAAA,QAAAN;AAAA,QAAS;AAAA,QAAC,gBAAAI,EAACG,GAAA,EAAY,WAAU,eAAA,CAAe;AAAA,MAAA,EAAA,CACnD,EAAA,CACF;AAAA,wBACCC,GAAA,EAAoB,OAAM,OACxB,UAAAV,EACE,gBACA,OAAO,CAACW,MAAWA,EAAO,WAAA,CAAY,EACtC,IAAI,CAACA,MAEF,gBAAAL;AAAA,QAACM;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UACV,SAASD,EAAO,aAAA;AAAA,UAChB,iBAAiB,CAACE,MAChBF,EAAO,iBAAiB,CAAC,CAACE,CAAK;AAAA,UAGhC,UAAAF,EAAO;AAAA,QAAA;AAAA,QAPHA,EAAO;AAAA,MAAA,CAUjB,EAAA,CACL;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAAA,EACA,gBAAAL,EAAC,OAAA,EAAI,WAAU,qBACb,4BAACQ,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAR,EAACS,GAAA,EACE,UAAAf,EAAM,gBAAA,EAAkB,IAAI,CAACgB,MAC5B,gBAAAV,EAACW,GAAA,EACE,UAAAD,EAAY,QAAQ,IAAI,CAACE,MAEtB,gBAAAZ,EAACa,GAAA,EACE,UAAAD,EAAO,gBACJ,OACAE;AAAA,MACEF,EAAO,OAAO,UAAU;AAAA,MACxBA,EAAO,WAAA;AAAA,IAAW,EACpB,GANUA,EAAO,EAOvB,CAEH,EAAA,GAZYF,EAAY,EAa3B,CACD,EAAA,CACH;AAAA,IACA,gBAAAV,EAACe,GAAA,EACE,UAAArB,EAAM,YAAA,EAAc,MAAM,SACzBA,EAAM,YAAA,EAAc,KAAK,IAAI,CAACsB,MAC5B,gBAAAhB;AAAA,MAACW;AAAA,MAAA;AAAA,QAEC,cAAYK,EAAI,cAAA,KAAmB;AAAA,QAElC,YAAI,gBAAA,EAAkB,IAAI,CAACC,wBACzBC,GAAA,EACE,UAAAJ;AAAA,UACCG,EAAK,OAAO,UAAU;AAAA,UACtBA,EAAK,WAAA;AAAA,QAAW,EAClB,GAJcA,EAAK,EAKrB,CACD;AAAA,MAAA;AAAA,MAVID,EAAI;AAAA,IAAA,CAYZ,IAED,gBAAAhB,EAACW,GAAA,EACC,UAAA,gBAAAX;AAAA,MAACkB;AAAA,MAAA;AAAA,QACC,SAASxB,EAAM,cAAA,EAAgB;AAAA,QAC/B,WAAU;AAAA,QAET,UAAAG;AAAA,MAAA;AAAA,IAAA,GAEL,EAAA,CAEJ;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAAA,GACF;"}
|
package/Dialog/Dialog.d.ts
CHANGED
|
@@ -7,10 +7,13 @@ declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPri
|
|
|
7
7
|
declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
declare function DialogContent(props: React.ComponentProps<typeof DialogPrimitive.Content> & {
|
|
9
9
|
showCloseButton?: boolean;
|
|
10
|
+
slotProps?: {
|
|
11
|
+
overlay?: React.ComponentProps<typeof DialogPrimitive.Overlay>;
|
|
12
|
+
};
|
|
10
13
|
}): import("react/jsx-runtime").JSX.Element;
|
|
11
14
|
declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
12
15
|
declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
13
|
-
declare function DialogTitle(
|
|
16
|
+
declare function DialogTitle(props: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
|
|
14
17
|
declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
|
|
15
18
|
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogPrimitive };
|
|
16
19
|
//# sourceMappingURL=Dialog.d.ts.map
|
package/Dialog/Dialog.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAOzD,iBAAS,MAAM,CAAC,EACE,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAEnE;AAED,iBAAS,aAAa,CAAC,EACE,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAE7E;AAED,iBAAS,YAAY,CAAC,EACE,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,2CAE3E;AAED,iBAAS,WAAW,CAAC,EACE,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEzE;AAED,iBAAS,aAAa,CAAC,EACE,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAW7E;AAED,iBAAS,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACnF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE;QACV,OAAO,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAC;KAChE,CAAA;CACF,2CAsEA;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQzE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWzE;AAED,iBAAS,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CA2B7E;AAED,iBAAS,iBAAiB,CAAC,EACE,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,2CAYrF;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,EACb,eAAe,EAChB,CAAA"}
|
package/Dialog/Dialog.js
CHANGED
|
@@ -1,28 +1,32 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
1
|
+
import { jsx as e, jsxs as r } from "react/jsx-runtime";
|
|
2
|
+
import * as p from "react";
|
|
2
3
|
import * as a from "@radix-ui/react-dialog";
|
|
3
|
-
import { XIcon as
|
|
4
|
+
import { XIcon as m } from "lucide-react";
|
|
4
5
|
import { cn as n } from "@oneplatformdev/utils";
|
|
5
|
-
|
|
6
|
+
import { ButtonIcon as x } from "../ButtonIcon/ButtonIcon.js";
|
|
7
|
+
import "../ButtonIcon/buttonIconVariants.js";
|
|
8
|
+
import { useDialogClosePosition as h } from "./useDialogClosePosition.js";
|
|
9
|
+
function P({
|
|
6
10
|
...t
|
|
7
11
|
}) {
|
|
8
12
|
return /* @__PURE__ */ e(a.Root, { "data-slot": "dialog", ...t });
|
|
9
13
|
}
|
|
10
|
-
function
|
|
14
|
+
function k({
|
|
11
15
|
...t
|
|
12
16
|
}) {
|
|
13
17
|
return /* @__PURE__ */ e(a.Trigger, { "data-slot": "dialog-trigger", ...t });
|
|
14
18
|
}
|
|
15
|
-
function
|
|
19
|
+
function v({
|
|
16
20
|
...t
|
|
17
21
|
}) {
|
|
18
22
|
return /* @__PURE__ */ e(a.Portal, { "data-slot": "dialog-portal", ...t });
|
|
19
23
|
}
|
|
20
|
-
function
|
|
24
|
+
function j({
|
|
21
25
|
...t
|
|
22
26
|
}) {
|
|
23
27
|
return /* @__PURE__ */ e(a.Close, { "data-slot": "dialog-close", ...t });
|
|
24
28
|
}
|
|
25
|
-
function
|
|
29
|
+
function b({
|
|
26
30
|
className: t,
|
|
27
31
|
...o
|
|
28
32
|
}) {
|
|
@@ -38,40 +42,47 @@ function f({
|
|
|
38
42
|
}
|
|
39
43
|
);
|
|
40
44
|
}
|
|
41
|
-
function
|
|
45
|
+
function T(t) {
|
|
42
46
|
const {
|
|
43
47
|
className: o,
|
|
44
48
|
children: i,
|
|
45
|
-
showCloseButton:
|
|
46
|
-
style:
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
49
|
+
showCloseButton: s = !0,
|
|
50
|
+
style: c,
|
|
51
|
+
slotProps: d,
|
|
52
|
+
...u
|
|
53
|
+
} = t, [f, g] = p.useState(null), l = h(f, {
|
|
54
|
+
enabled: s
|
|
55
|
+
});
|
|
56
|
+
return /* @__PURE__ */ e(v, { "data-slot": "dialog-portal", children: /* @__PURE__ */ e(b, { ...d?.overlay, children: /* @__PURE__ */ r(
|
|
50
57
|
a.Content,
|
|
51
58
|
{
|
|
59
|
+
ref: g,
|
|
52
60
|
"data-slot": "dialog-content",
|
|
61
|
+
"data-closable": JSON.stringify(s),
|
|
53
62
|
className: n(
|
|
63
|
+
"group group/content",
|
|
54
64
|
"fixed top-[50%] left-[50%] z-50 translate-x-[-50%] translate-y-[-50%]",
|
|
55
65
|
"flex flex-col w-full max-w-[calc(100%-2rem)] sm:max-w-2xl gap-3",
|
|
56
|
-
"
|
|
66
|
+
"max-h-[90%] overflow-auto overscroll-none",
|
|
67
|
+
"bg-background rounded-lg border shadow-lg duration-200 p-6",
|
|
57
68
|
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
58
69
|
"focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 focus:ring-transparent",
|
|
59
70
|
"outline-none focus:outline-none focus-visible:outline-none",
|
|
60
71
|
o
|
|
61
72
|
),
|
|
62
|
-
...
|
|
73
|
+
...u,
|
|
63
74
|
style: {
|
|
64
75
|
pointerEvents: "auto",
|
|
65
|
-
...
|
|
76
|
+
...c || {}
|
|
66
77
|
},
|
|
67
78
|
children: [
|
|
68
79
|
i,
|
|
69
|
-
|
|
80
|
+
s && /* @__PURE__ */ r(
|
|
70
81
|
a.Close,
|
|
71
82
|
{
|
|
72
83
|
"data-slot": "dialog-close",
|
|
73
84
|
className: n(
|
|
74
|
-
"absolute top-
|
|
85
|
+
"absolute top-6 right-6 rounded-2xl opacity-70 transition-opacity hover:opacity-100",
|
|
75
86
|
"data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
|
|
76
87
|
"ring-offset-background focus:ring-transparent focus:ring-0 focus:ring-offset-0 focus:outline-hidden",
|
|
77
88
|
"focus:outline-none focus:ring-0",
|
|
@@ -79,8 +90,19 @@ function b(t) {
|
|
|
79
90
|
'[&_svg]:shrink-0 [&_svg:not([class*="size-"])]:size-5',
|
|
80
91
|
"cursor-pointer size-10 flex items-center justify-center"
|
|
81
92
|
),
|
|
93
|
+
style: {
|
|
94
|
+
top: l.top,
|
|
95
|
+
right: l.right
|
|
96
|
+
},
|
|
82
97
|
children: [
|
|
83
|
-
/* @__PURE__ */ e(
|
|
98
|
+
/* @__PURE__ */ e(
|
|
99
|
+
x,
|
|
100
|
+
{
|
|
101
|
+
variant: "ghost",
|
|
102
|
+
color: "secondary",
|
|
103
|
+
icon: m
|
|
104
|
+
}
|
|
105
|
+
),
|
|
84
106
|
/* @__PURE__ */ e("span", { className: "sr-only", children: "Close" })
|
|
85
107
|
]
|
|
86
108
|
}
|
|
@@ -89,17 +111,17 @@ function b(t) {
|
|
|
89
111
|
}
|
|
90
112
|
) }) });
|
|
91
113
|
}
|
|
92
|
-
function
|
|
114
|
+
function E({ className: t, ...o }) {
|
|
93
115
|
return /* @__PURE__ */ e(
|
|
94
116
|
"div",
|
|
95
117
|
{
|
|
96
118
|
"data-slot": "dialog-header",
|
|
97
|
-
className: n("flex flex-col gap-4 justify-center text-center sm:text-left", t),
|
|
119
|
+
className: n("flex flex-col gap-4 justify-center text-center sm:text-left min-h-10", t),
|
|
98
120
|
...o
|
|
99
121
|
}
|
|
100
122
|
);
|
|
101
123
|
}
|
|
102
|
-
function
|
|
124
|
+
function O({ className: t, ...o }) {
|
|
103
125
|
return /* @__PURE__ */ e(
|
|
104
126
|
"div",
|
|
105
127
|
{
|
|
@@ -112,20 +134,37 @@ function y({ className: t, ...o }) {
|
|
|
112
134
|
}
|
|
113
135
|
);
|
|
114
136
|
}
|
|
115
|
-
function
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
137
|
+
function S(t) {
|
|
138
|
+
const {
|
|
139
|
+
className: o,
|
|
140
|
+
children: i,
|
|
141
|
+
...s
|
|
142
|
+
} = t;
|
|
119
143
|
return /* @__PURE__ */ e(
|
|
120
144
|
a.Title,
|
|
121
145
|
{
|
|
146
|
+
asChild: !0,
|
|
122
147
|
"data-slot": "dialog-title",
|
|
123
|
-
className: n(
|
|
124
|
-
|
|
148
|
+
className: n(
|
|
149
|
+
"flex items-center min-h-10",
|
|
150
|
+
"group-data-[closable='true']/content:pr-13",
|
|
151
|
+
o
|
|
152
|
+
),
|
|
153
|
+
...s,
|
|
154
|
+
children: /* @__PURE__ */ e(
|
|
155
|
+
"span",
|
|
156
|
+
{
|
|
157
|
+
className: n(
|
|
158
|
+
"text-lg leading-[1.2] font-bold text-[#06080D]",
|
|
159
|
+
"whitespace-pre-wrap wrap-break-word line-clamp-10"
|
|
160
|
+
),
|
|
161
|
+
children: i
|
|
162
|
+
}
|
|
163
|
+
)
|
|
125
164
|
}
|
|
126
165
|
);
|
|
127
166
|
}
|
|
128
|
-
function
|
|
167
|
+
function _({
|
|
129
168
|
className: t,
|
|
130
169
|
...o
|
|
131
170
|
}) {
|
|
@@ -133,22 +172,26 @@ function z({
|
|
|
133
172
|
a.Description,
|
|
134
173
|
{
|
|
135
174
|
"data-slot": "dialog-description",
|
|
136
|
-
className: n(
|
|
175
|
+
className: n(
|
|
176
|
+
"text-[#06080D] font-medium text-base",
|
|
177
|
+
"whitespace-pre-wrap wrap-break-word line-clamp-10",
|
|
178
|
+
t
|
|
179
|
+
),
|
|
137
180
|
...o
|
|
138
181
|
}
|
|
139
182
|
);
|
|
140
183
|
}
|
|
141
184
|
export {
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
185
|
+
P as Dialog,
|
|
186
|
+
j as DialogClose,
|
|
187
|
+
T as DialogContent,
|
|
188
|
+
_ as DialogDescription,
|
|
189
|
+
O as DialogFooter,
|
|
190
|
+
E as DialogHeader,
|
|
191
|
+
b as DialogOverlay,
|
|
192
|
+
v as DialogPortal,
|
|
150
193
|
a as DialogPrimitive,
|
|
151
|
-
|
|
152
|
-
|
|
194
|
+
S as DialogTitle,
|
|
195
|
+
k as DialogTrigger
|
|
153
196
|
};
|
|
154
197
|
//# sourceMappingURL=Dialog.js.map
|
package/Dialog/Dialog.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sources":["../../src/Dialog/Dialog.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"@oneplatformdev/utils\"\n\nfunction Dialog({\n ...props\n }: React.ComponentProps<typeof DialogPrimitive.Root>) {\n return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n ...props\n }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n ...props\n }: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n ...props\n }: React.ComponentProps<typeof DialogPrimitive.Close>) {\n return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n className,\n ...props\n }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n return (\n <DialogPrimitive.Overlay\n data-slot=\"dialog-overlay\"\n className={cn(\n \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction DialogContent(props: React.ComponentProps<typeof DialogPrimitive.Content> & {\n showCloseButton?: boolean\n}) {\n const {\n className,\n children,\n showCloseButton = true,\n style,\n ...rest\n } = props;\n return (\n <DialogPortal data-slot=\"dialog-portal\">\n <DialogOverlay>\n <DialogPrimitive.Content\n data-slot=\"dialog-content\"\n className={cn(\n 'fixed top-[50%] left-[50%] z-50 translate-x-[-50%] translate-y-[-50%]',\n 'flex flex-col w-full max-w-[calc(100%-2rem)] sm:max-w-2xl gap-3',\n 'bg-background rounded-lg border
|
|
1
|
+
{"version":3,"file":"Dialog.js","sources":["../../src/Dialog/Dialog.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"@oneplatformdev/utils\"\nimport { ButtonIcon } from \"../ButtonIcon\";\nimport { useDialogClosePosition } from \"./useDialogClosePosition\";\n\nfunction Dialog({\n ...props\n }: React.ComponentProps<typeof DialogPrimitive.Root>) {\n return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n ...props\n }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n ...props\n }: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n ...props\n }: React.ComponentProps<typeof DialogPrimitive.Close>) {\n return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n className,\n ...props\n }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n return (\n <DialogPrimitive.Overlay\n data-slot=\"dialog-overlay\"\n className={cn(\n \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction DialogContent(props: React.ComponentProps<typeof DialogPrimitive.Content> & {\n showCloseButton?: boolean;\n slotProps?: {\n overlay?: React.ComponentProps<typeof DialogPrimitive.Overlay>;\n }\n}) {\n const {\n className,\n children,\n showCloseButton = true,\n style,\n slotProps,\n ...rest\n } = props;\n const [contentEl, setContentEl] = React.useState<HTMLDivElement | null>(null);\n\n const closePosition = useDialogClosePosition(contentEl, {\n enabled: showCloseButton,\n });\n\n\n return (\n <DialogPortal data-slot=\"dialog-portal\">\n <DialogOverlay {...slotProps?.overlay}>\n <DialogPrimitive.Content\n ref={setContentEl}\n data-slot=\"dialog-content\"\n data-closable={JSON.stringify(showCloseButton)}\n className={cn(\n 'group group/content',\n 'fixed top-[50%] left-[50%] z-50 translate-x-[-50%] translate-y-[-50%]',\n 'flex flex-col w-full max-w-[calc(100%-2rem)] sm:max-w-2xl gap-3',\n 'max-h-[90%] overflow-auto overscroll-none',\n 'bg-background rounded-lg border shadow-lg duration-200 p-6',\n 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n \"focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 focus:ring-transparent\",\n 'outline-none focus:outline-none focus-visible:outline-none',\n className\n )}\n {...rest}\n style={{\n pointerEvents: 'auto',\n ...(style || {}),\n }}\n >\n {children}\n {showCloseButton && (\n <DialogPrimitive.Close\n data-slot=\"dialog-close\"\n className={cn(\n 'absolute top-6 right-6 rounded-2xl opacity-70 transition-opacity hover:opacity-100',\n 'data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',\n 'ring-offset-background focus:ring-transparent focus:ring-0 focus:ring-offset-0 focus:outline-hidden',\n 'focus:outline-none focus:ring-0',\n 'disabled:pointer-events-none [&_svg]:pointer-events-none',\n '[&_svg]:shrink-0 [&_svg:not([class*=\"size-\"])]:size-5',\n 'cursor-pointer size-10 flex items-center justify-center',\n )}\n style={{\n top: closePosition.top,\n right: closePosition.right,\n }}\n >\n <ButtonIcon\n variant='ghost'\n color='secondary'\n icon={XIcon}\n />\n <span className=\"sr-only\">Close</span>\n </DialogPrimitive.Close>\n )}\n </DialogPrimitive.Content>\n </DialogOverlay>\n </DialogPortal>\n )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"dialog-header\"\n className={cn(\"flex flex-col gap-4 justify-center text-center sm:text-left min-h-10\", className)}\n {...props}\n />\n )\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"dialog-footer\"\n className={cn(\n \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end pt-4\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction DialogTitle(props: React.ComponentProps<typeof DialogPrimitive.Title>) {\n const {\n className,\n children,\n ...rest\n } = props;\n return (\n <DialogPrimitive.Title\n asChild\n data-slot=\"dialog-title\"\n className={cn(\n \"flex items-center min-h-10\",\n \"group-data-[closable='true']/content:pr-13\",\n className\n )}\n {...rest}\n >\n <span\n className={cn(\n \"text-lg leading-[1.2] font-bold text-[#06080D]\",\n 'whitespace-pre-wrap wrap-break-word line-clamp-10',\n )}\n >\n {children}\n </span>\n </DialogPrimitive.Title>\n )\n}\n\nfunction DialogDescription({\n className,\n ...props\n }: React.ComponentProps<typeof DialogPrimitive.Description>) {\n return (\n <DialogPrimitive.Description\n data-slot=\"dialog-description\"\n className={cn(\n \"text-[#06080D] font-medium text-base\",\n 'whitespace-pre-wrap wrap-break-word line-clamp-10',\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n DialogPrimitive\n}\n"],"names":["Dialog","props","DialogPrimitive","DialogTrigger","DialogPortal","DialogClose","DialogOverlay","className","jsx","cn","DialogContent","children","showCloseButton","style","slotProps","rest","contentEl","setContentEl","React","closePosition","useDialogClosePosition","jsxs","ButtonIcon","XIcon","DialogHeader","DialogFooter","DialogTitle","DialogDescription"],"mappings":"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"}
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import { jsx as o, jsxs as e } from "react/jsx-runtime";
|
|
2
|
+
import { Dialog as b, DialogTrigger as O, DialogContent as B, DialogHeader as v, DialogTitle as w, DialogDescription as N, DialogFooter as T, DialogClose as F } from "./Dialog.js";
|
|
3
|
+
import { Button as l } from "../Button/Button.js";
|
|
4
|
+
import "../Button/buttonVariants.js";
|
|
5
|
+
import { useState as L, useCallback as S } from "react";
|
|
6
|
+
function I(p) {
|
|
7
|
+
const {
|
|
8
|
+
open: i,
|
|
9
|
+
onOpenChange: r,
|
|
10
|
+
title: h,
|
|
11
|
+
description: a,
|
|
12
|
+
showCloseButton: u = !0,
|
|
13
|
+
withFooter: m = !0,
|
|
14
|
+
initialOpen: f = !1,
|
|
15
|
+
triggerLabel: C = "Open dialog",
|
|
16
|
+
bodyText: s = "Some content inside dialog…",
|
|
17
|
+
longBody: c = !1
|
|
18
|
+
} = p, [D, x] = L(f), t = i !== void 0, y = t ? i : D, d = S((n) => {
|
|
19
|
+
t || x(n), r?.(n);
|
|
20
|
+
}, [t, r]);
|
|
21
|
+
return /* @__PURE__ */ o("div", { className: "p-10", children: /* @__PURE__ */ e(b, { open: y, onOpenChange: d, children: [
|
|
22
|
+
/* @__PURE__ */ o(O, { asChild: !0, children: /* @__PURE__ */ o(l, { variant: "outlined", children: C }) }),
|
|
23
|
+
/* @__PURE__ */ e(
|
|
24
|
+
B,
|
|
25
|
+
{
|
|
26
|
+
showCloseButton: u,
|
|
27
|
+
className: "p-12",
|
|
28
|
+
children: [
|
|
29
|
+
/* @__PURE__ */ e(v, { children: [
|
|
30
|
+
/* @__PURE__ */ e(w, { children: [
|
|
31
|
+
h,
|
|
32
|
+
" 123"
|
|
33
|
+
] }),
|
|
34
|
+
a ? /* @__PURE__ */ o(N, { children: a }) : null
|
|
35
|
+
] }),
|
|
36
|
+
/* @__PURE__ */ o("div", { className: c ? "max-h-[50vh] overflow-auto pr-1" : void 0, children: c ? /* @__PURE__ */ o("div", { className: "space-y-3 text-sm leading-6", children: Array.from({ length: 30 }).map((n, g) => /* @__PURE__ */ e("p", { children: [
|
|
37
|
+
"#",
|
|
38
|
+
g + 1,
|
|
39
|
+
". ",
|
|
40
|
+
s,
|
|
41
|
+
" Lorem ipsum dolor sit amet, consectetur adipiscing elit."
|
|
42
|
+
] }, g)) }) : /* @__PURE__ */ o("p", { className: "text-sm leading-6", children: s }) }),
|
|
43
|
+
m ? /* @__PURE__ */ e(T, { children: [
|
|
44
|
+
/* @__PURE__ */ o(F, { asChild: !0, children: /* @__PURE__ */ o(l, { color: "secondary", children: "Cancel" }) }),
|
|
45
|
+
/* @__PURE__ */ o(l, { onClick: () => d(!1), children: "Save" })
|
|
46
|
+
] }) : null
|
|
47
|
+
]
|
|
48
|
+
}
|
|
49
|
+
)
|
|
50
|
+
] }) });
|
|
51
|
+
}
|
|
52
|
+
const W = {
|
|
53
|
+
title: "UI/Dialog",
|
|
54
|
+
component: I,
|
|
55
|
+
parameters: {
|
|
56
|
+
layout: "fullscreen"
|
|
57
|
+
},
|
|
58
|
+
argTypes: {
|
|
59
|
+
title: { control: "text" },
|
|
60
|
+
description: { control: "text" },
|
|
61
|
+
showCloseButton: { control: "boolean" },
|
|
62
|
+
withFooter: { control: "boolean" },
|
|
63
|
+
initialOpen: { control: "boolean" },
|
|
64
|
+
triggerLabel: { control: "text" },
|
|
65
|
+
bodyText: { control: "text" },
|
|
66
|
+
longBody: { control: "boolean" }
|
|
67
|
+
},
|
|
68
|
+
args: {
|
|
69
|
+
title: "Dialog title",
|
|
70
|
+
description: "Dialog description",
|
|
71
|
+
showCloseButton: !0,
|
|
72
|
+
withFooter: !0,
|
|
73
|
+
initialOpen: !1,
|
|
74
|
+
triggerLabel: "Open dialog",
|
|
75
|
+
bodyText: "Some content inside dialog…",
|
|
76
|
+
longBody: !1
|
|
77
|
+
}
|
|
78
|
+
}, _ = {}, q = {
|
|
79
|
+
args: {
|
|
80
|
+
description: ""
|
|
81
|
+
}
|
|
82
|
+
}, z = {
|
|
83
|
+
args: {
|
|
84
|
+
showCloseButton: !1
|
|
85
|
+
}
|
|
86
|
+
}, E = {
|
|
87
|
+
args: {
|
|
88
|
+
withFooter: !1
|
|
89
|
+
}
|
|
90
|
+
}, G = {
|
|
91
|
+
args: {
|
|
92
|
+
longBody: !0,
|
|
93
|
+
bodyText: "Long text line"
|
|
94
|
+
}
|
|
95
|
+
}, J = {
|
|
96
|
+
args: {
|
|
97
|
+
initialOpen: !0
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
export {
|
|
101
|
+
_ as Default,
|
|
102
|
+
J as InitiallyOpen,
|
|
103
|
+
G as LongContentScrollable,
|
|
104
|
+
z as NoCloseButton,
|
|
105
|
+
E as NoFooter,
|
|
106
|
+
q as WithoutDescription,
|
|
107
|
+
W as default
|
|
108
|
+
};
|
|
109
|
+
//# sourceMappingURL=Dialog.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dialog.stories.js","sources":["../../src/Dialog/Dialog.stories.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport {\n Dialog,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogTitle,\n DialogDescription,\n DialogFooter,\n DialogClose,\n} from \"./Dialog\";\nimport { Button } from \"../Button\";\nimport { useCallback, useState } from \"react\";\nimport { DialogControlsProps } from \"./Dialog.types\";\n\ntype DialogDemoProps = DialogControlsProps & {\n title: string;\n description?: string;\n showCloseButton?: boolean;\n withFooter?: boolean;\n initialOpen?: boolean;\n triggerLabel?: string;\n bodyText?: string;\n longBody?: boolean;\n};\n\n// TODO: create cmp like alert\nfunction DialogDemo(props: DialogDemoProps) {\n const {\n open: controlledOpen,\n onOpenChange,\n title,\n description,\n showCloseButton = true,\n withFooter = true,\n initialOpen = false,\n triggerLabel = \"Open dialog\",\n bodyText = \"Some content inside dialog…\",\n longBody = false,\n } = props;\n\n const [ internalOpen, setInternalOpen ] = useState(initialOpen);\n const isControlled = controlledOpen !== undefined;\n const open = isControlled ? controlledOpen : internalOpen;\n const setOpen = useCallback((next: boolean) => {\n if (!isControlled) setInternalOpen(next);\n onOpenChange?.(next);\n }, [ isControlled, onOpenChange ]);\n\n return (\n <div className=\"p-10\">\n <Dialog open={open} onOpenChange={setOpen}>\n <DialogTrigger asChild>\n <Button variant='outlined'>\n {triggerLabel}\n </Button>\n </DialogTrigger>\n\n <DialogContent\n showCloseButton={showCloseButton}\n className='p-12'\n >\n <DialogHeader>\n <DialogTitle>{title} 123</DialogTitle>\n {description ? <DialogDescription>{description}</DialogDescription> : null}\n </DialogHeader>\n\n <div className={longBody ? \"max-h-[50vh] overflow-auto pr-1\" : undefined}>\n {longBody ? (\n <div className=\"space-y-3 text-sm leading-6\">\n {Array.from({ length: 30 }).map((_, i) => (\n <p key={i}>\n #{i + 1}. {bodyText} Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </p>\n ))}\n </div>\n ) : (\n <p className=\"text-sm leading-6\">{bodyText}</p>\n )}\n </div>\n\n {withFooter ? (\n <DialogFooter>\n <DialogClose asChild>\n <Button color='secondary'>\n Cancel\n </Button>\n </DialogClose>\n\n <Button onClick={() => setOpen(false)}>\n Save\n </Button>\n </DialogFooter>\n ) : null}\n </DialogContent>\n </Dialog>\n </div>\n );\n}\n\nconst meta: Meta<typeof DialogDemo> = {\n title: \"UI/Dialog\",\n component: DialogDemo,\n parameters: {\n layout: \"fullscreen\",\n },\n argTypes: {\n title: { control: \"text\" },\n description: { control: \"text\" },\n showCloseButton: { control: \"boolean\" },\n withFooter: { control: \"boolean\" },\n initialOpen: { control: \"boolean\" },\n triggerLabel: { control: \"text\" },\n bodyText: { control: \"text\" },\n longBody: { control: \"boolean\" },\n },\n args: {\n title: \"Dialog title\",\n description: \"Dialog description\",\n showCloseButton: true,\n withFooter: true,\n initialOpen: false,\n triggerLabel: \"Open dialog\",\n bodyText: \"Some content inside dialog…\",\n longBody: false,\n },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof DialogDemo>;\n\nexport const Default: Story = {};\n\nexport const WithoutDescription: Story = {\n args: {\n description: \"\",\n },\n};\n\nexport const NoCloseButton: Story = {\n args: {\n showCloseButton: false,\n },\n};\n\nexport const NoFooter: Story = {\n args: {\n withFooter: false,\n },\n};\n\nexport const LongContentScrollable: Story = {\n args: {\n longBody: true,\n bodyText: \"Long text line\",\n },\n};\n\nexport const InitiallyOpen: Story = {\n args: {\n initialOpen: true,\n },\n};\n"],"names":["DialogDemo","props","controlledOpen","onOpenChange","title","description","showCloseButton","withFooter","initialOpen","triggerLabel","bodyText","longBody","internalOpen","setInternalOpen","useState","isControlled","open","setOpen","useCallback","next","jsx","Dialog","DialogTrigger","Button","jsxs","DialogContent","DialogHeader","DialogTitle","DialogDescription","_","i","DialogFooter","DialogClose","meta","Default","WithoutDescription","NoCloseButton","NoFooter","LongContentScrollable","InitiallyOpen"],"mappings":";;;;;AA6BA,SAASA,EAAWC,GAAwB;AAC1C,QAAM;AAAA,IACJ,MAAMC;AAAA,IACN,cAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,iBAAAC,IAAkB;AAAA,IAClB,YAAAC,IAAa;AAAA,IACb,aAAAC,IAAc;AAAA,IACd,cAAAC,IAAe;AAAA,IACf,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,EAAA,IACTV,GAEE,CAAEW,GAAcC,CAAgB,IAAIC,EAASN,CAAW,GACxDO,IAAeb,MAAmB,QAClCc,IAAOD,IAAeb,IAAiBU,GACvCK,IAAUC,EAAY,CAACC,MAAkB;AAC7C,IAAKJ,KAAcF,EAAgBM,CAAI,GACvChB,IAAegB,CAAI;AAAA,EACrB,GAAG,CAAEJ,GAAcZ,CAAa,CAAC;AAEjC,SACE,gBAAAiB,EAAC,SAAI,WAAU,QACb,4BAACC,GAAA,EAAO,MAAAL,GAAY,cAAcC,GAChC,UAAA;AAAA,IAAA,gBAAAG,EAACE,GAAA,EAAc,SAAO,IACpB,UAAA,gBAAAF,EAACG,KAAO,SAAQ,YACb,aACH,EAAA,CACF;AAAA,IAEA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,iBAAAnB;AAAA,QACA,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA,gBAAAkB,EAACE,GAAA,EACC,UAAA;AAAA,YAAA,gBAAAF,EAACG,GAAA,EAAa,UAAA;AAAA,cAAAvB;AAAA,cAAM;AAAA,YAAA,GAAI;AAAA,YACvBC,IAAc,gBAAAe,EAACQ,GAAA,EAAmB,UAAAvB,EAAA,CAAY,IAAuB;AAAA,UAAA,GACxE;AAAA,UAEA,gBAAAe,EAAC,SAAI,WAAWT,IAAW,oCAAoC,QAC5D,UAAAA,IACC,gBAAAS,EAAC,OAAA,EAAI,WAAU,+BACZ,gBAAM,KAAK,EAAE,QAAQ,GAAA,CAAI,EAAE,IAAI,CAACS,GAAGC,MAClC,gBAAAN,EAAC,KAAA,EAAU,UAAA;AAAA,YAAA;AAAA,YACPM,IAAI;AAAA,YAAE;AAAA,YAAGpB;AAAA,YAAS;AAAA,UAAA,EAAA,GADdoB,CAER,CACD,EAAA,CACH,sBAEC,KAAA,EAAE,WAAU,qBAAqB,UAAApB,EAAA,CAAS,EAAA,CAE/C;AAAA,UAECH,sBACEwB,GAAA,EACC,UAAA;AAAA,YAAA,gBAAAX,EAACY,GAAA,EAAY,SAAO,IAClB,UAAA,gBAAAZ,EAACG,KAAO,OAAM,aAAY,oBAE1B,EAAA,CACF;AAAA,8BAECA,GAAA,EAAO,SAAS,MAAMN,EAAQ,EAAK,GAAG,UAAA,OAAA,CAEvC;AAAA,UAAA,EAAA,CACF,IACE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACN,EAAA,CACF,EAAA,CACF;AAEJ;AAEA,MAAMgB,IAAgC;AAAA,EACpC,OAAO;AAAA,EACP,WAAWjC;AAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,UAAU;AAAA,IACR,OAAO,EAAE,SAAS,OAAA;AAAA,IAClB,aAAa,EAAE,SAAS,OAAA;AAAA,IACxB,iBAAiB,EAAE,SAAS,UAAA;AAAA,IAC5B,YAAY,EAAE,SAAS,UAAA;AAAA,IACvB,aAAa,EAAE,SAAS,UAAA;AAAA,IACxB,cAAc,EAAE,SAAS,OAAA;AAAA,IACzB,UAAU,EAAE,SAAS,OAAA;AAAA,IACrB,UAAU,EAAE,SAAS,UAAA;AAAA,EAAU;AAAA,EAEjC,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,cAAc;AAAA,IACd,UAAU;AAAA,IACV,UAAU;AAAA,EAAA;AAEd,GAKakC,IAAiB,CAAA,GAEjBC,IAA4B;AAAA,EACvC,MAAM;AAAA,IACJ,aAAa;AAAA,EAAA;AAEjB,GAEaC,IAAuB;AAAA,EAClC,MAAM;AAAA,IACJ,iBAAiB;AAAA,EAAA;AAErB,GAEaC,IAAkB;AAAA,EAC7B,MAAM;AAAA,IACJ,YAAY;AAAA,EAAA;AAEhB,GAEaC,IAA+B;AAAA,EAC1C,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,UAAU;AAAA,EAAA;AAEd,GAEaC,IAAuB;AAAA,EAClC,MAAM;AAAA,IACJ,aAAa;AAAA,EAAA;AAEjB;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dialog.types.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dialog.types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/Dialog/index.d.ts
CHANGED
package/Dialog/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,sBAAsB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,sBAAsB,CAAA;AACpC,mBAAmB,gBAAgB,CAAA"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
type UseDialogClosePositionOptions = {
|
|
2
|
+
enabled?: boolean;
|
|
3
|
+
titleSelector?: string;
|
|
4
|
+
};
|
|
5
|
+
type DialogClosePosition = {
|
|
6
|
+
top?: number;
|
|
7
|
+
right?: number;
|
|
8
|
+
};
|
|
9
|
+
export declare function useDialogClosePosition(contentEl: HTMLElement | null, options?: UseDialogClosePositionOptions): DialogClosePosition;
|
|
10
|
+
export {};
|
|
11
|
+
//# sourceMappingURL=useDialogClosePosition.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDialogClosePosition.d.ts","sourceRoot":"","sources":["../../src/Dialog/useDialogClosePosition.ts"],"names":[],"mappings":"AAEA,KAAK,6BAA6B,GAAG;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,WAAW,GAAG,IAAI,EAC7B,OAAO,CAAC,EAAE,6BAA6B,uBAkFxC"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import * as a from "react";
|
|
2
|
+
function g(i, c) {
|
|
3
|
+
const {
|
|
4
|
+
enabled: s = !0,
|
|
5
|
+
titleSelector: u = '[data-slot="dialog-title"]'
|
|
6
|
+
} = c ?? {}, [l, d] = a.useState({}), r = a.useCallback((t) => {
|
|
7
|
+
d((e) => e.top === t.top && e.right === t.right ? e : t);
|
|
8
|
+
}, []), o = a.useCallback(() => {
|
|
9
|
+
if (!s || !i) {
|
|
10
|
+
r({});
|
|
11
|
+
return;
|
|
12
|
+
}
|
|
13
|
+
const t = i.querySelector(u);
|
|
14
|
+
if (!t) {
|
|
15
|
+
r({});
|
|
16
|
+
return;
|
|
17
|
+
}
|
|
18
|
+
const e = i.getBoundingClientRect(), n = t.getBoundingClientRect();
|
|
19
|
+
if (e.width <= 0 || e.height <= 0 || n.width <= 0 || n.height <= 0) {
|
|
20
|
+
r({});
|
|
21
|
+
return;
|
|
22
|
+
}
|
|
23
|
+
r({
|
|
24
|
+
top: Math.round(n.top - e.top),
|
|
25
|
+
right: Math.round(e.right - n.right)
|
|
26
|
+
});
|
|
27
|
+
}, [i, s, r, u]);
|
|
28
|
+
return a.useEffect(() => {
|
|
29
|
+
if (!s || !i) {
|
|
30
|
+
r({});
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
let t = 0, e = 0;
|
|
34
|
+
t = requestAnimationFrame(() => {
|
|
35
|
+
e = requestAnimationFrame(() => {
|
|
36
|
+
o();
|
|
37
|
+
});
|
|
38
|
+
});
|
|
39
|
+
const n = new ResizeObserver(() => {
|
|
40
|
+
o();
|
|
41
|
+
});
|
|
42
|
+
return n.observe(i), window.addEventListener("resize", o), () => {
|
|
43
|
+
cancelAnimationFrame(t), cancelAnimationFrame(e), n.disconnect(), window.removeEventListener("resize", o);
|
|
44
|
+
};
|
|
45
|
+
}, [i, s, o, r]), l;
|
|
46
|
+
}
|
|
47
|
+
export {
|
|
48
|
+
g as useDialogClosePosition
|
|
49
|
+
};
|
|
50
|
+
//# sourceMappingURL=useDialogClosePosition.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDialogClosePosition.js","sources":["../../src/Dialog/useDialogClosePosition.ts"],"sourcesContent":["import * as React from 'react';\n\ntype UseDialogClosePositionOptions = {\n enabled?: boolean;\n titleSelector?: string;\n};\n\ntype DialogClosePosition = {\n top?: number;\n right?: number;\n};\n\nexport function useDialogClosePosition(\n contentEl: HTMLElement | null,\n options?: UseDialogClosePositionOptions,\n) {\n const {\n enabled = true,\n titleSelector = '[data-slot=\"dialog-title\"]',\n } = options ?? {};\n\n const [position, setPosition] = React.useState<DialogClosePosition>({});\n\n const setIfChanged = React.useCallback((next: DialogClosePosition) => {\n setPosition((prev) => {\n if (prev.top === next.top && prev.right === next.right) {\n return prev;\n }\n\n return next;\n });\n }, []);\n\n const measure = React.useCallback(() => {\n if (!enabled || !contentEl) {\n setIfChanged({});\n return;\n }\n\n const titleEl = contentEl.querySelector<HTMLElement>(titleSelector);\n\n if (!titleEl) {\n setIfChanged({});\n return;\n }\n\n const contentRect = contentEl.getBoundingClientRect();\n const titleRect = titleEl.getBoundingClientRect();\n\n if (\n contentRect.width <= 0 ||\n contentRect.height <= 0 ||\n titleRect.width <= 0 ||\n titleRect.height <= 0\n ) {\n setIfChanged({});\n return;\n }\n\n setIfChanged({\n top: Math.round(titleRect.top - contentRect.top),\n right: Math.round(contentRect.right - titleRect.right),\n });\n }, [contentEl, enabled, setIfChanged, titleSelector]);\n\n React.useEffect(() => {\n if (!enabled || !contentEl) {\n setIfChanged({});\n return;\n }\n\n let raf1 = 0;\n let raf2 = 0;\n\n raf1 = requestAnimationFrame(() => {\n raf2 = requestAnimationFrame(() => {\n measure();\n });\n });\n\n const resizeObserver = new ResizeObserver(() => {\n measure();\n });\n\n resizeObserver.observe(contentEl);\n window.addEventListener('resize', measure);\n\n return () => {\n cancelAnimationFrame(raf1);\n cancelAnimationFrame(raf2);\n resizeObserver.disconnect();\n window.removeEventListener('resize', measure);\n };\n }, [contentEl, enabled, measure, setIfChanged]);\n\n return position;\n}\n"],"names":["useDialogClosePosition","contentEl","options","enabled","titleSelector","position","setPosition","React","setIfChanged","next","prev","measure","titleEl","contentRect","titleRect","raf1","raf2","resizeObserver"],"mappings":";AAYO,SAASA,EACdC,GACAC,GACA;AACA,QAAM;AAAA,IACJ,SAAAC,IAAU;AAAA,IACV,eAAAC,IAAgB;AAAA,EAAA,IACdF,KAAW,CAAA,GAET,CAACG,GAAUC,CAAW,IAAIC,EAAM,SAA8B,CAAA,CAAE,GAEhEC,IAAeD,EAAM,YAAY,CAACE,MAA8B;AACpE,IAAAH,EAAY,CAACI,MACPA,EAAK,QAAQD,EAAK,OAAOC,EAAK,UAAUD,EAAK,QACxCC,IAGFD,CACR;AAAA,EACH,GAAG,CAAA,CAAE,GAECE,IAAUJ,EAAM,YAAY,MAAM;AACtC,QAAI,CAACJ,KAAW,CAACF,GAAW;AAC1B,MAAAO,EAAa,CAAA,CAAE;AACf;AAAA,IACF;AAEA,UAAMI,IAAUX,EAAU,cAA2BG,CAAa;AAElE,QAAI,CAACQ,GAAS;AACZ,MAAAJ,EAAa,CAAA,CAAE;AACf;AAAA,IACF;AAEA,UAAMK,IAAcZ,EAAU,sBAAA,GACxBa,IAAYF,EAAQ,sBAAA;AAE1B,QACEC,EAAY,SAAS,KACrBA,EAAY,UAAU,KACtBC,EAAU,SAAS,KACnBA,EAAU,UAAU,GACpB;AACA,MAAAN,EAAa,CAAA,CAAE;AACf;AAAA,IACF;AAEA,IAAAA,EAAa;AAAA,MACX,KAAK,KAAK,MAAMM,EAAU,MAAMD,EAAY,GAAG;AAAA,MAC/C,OAAO,KAAK,MAAMA,EAAY,QAAQC,EAAU,KAAK;AAAA,IAAA,CACtD;AAAA,EACH,GAAG,CAACb,GAAWE,GAASK,GAAcJ,CAAa,CAAC;AAEpD,SAAAG,EAAM,UAAU,MAAM;AACpB,QAAI,CAACJ,KAAW,CAACF,GAAW;AAC1B,MAAAO,EAAa,CAAA,CAAE;AACf;AAAA,IACF;AAEA,QAAIO,IAAO,GACPC,IAAO;AAEX,IAAAD,IAAO,sBAAsB,MAAM;AACjC,MAAAC,IAAO,sBAAsB,MAAM;AACjC,QAAAL,EAAA;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAED,UAAMM,IAAiB,IAAI,eAAe,MAAM;AAC9C,MAAAN,EAAA;AAAA,IACF,CAAC;AAED,WAAAM,EAAe,QAAQhB,CAAS,GAChC,OAAO,iBAAiB,UAAUU,CAAO,GAElC,MAAM;AACX,2BAAqBI,CAAI,GACzB,qBAAqBC,CAAI,GACzBC,EAAe,WAAA,GACf,OAAO,oBAAoB,UAAUN,CAAO;AAAA,IAC9C;AAAA,EACF,GAAG,CAACV,GAAWE,GAASQ,GAASH,CAAY,CAAC,GAEvCH;AACT;"}
|