@economic/taco 2.34.0 → 2.35.0
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/dist/components/Drawer/Context.d.ts +1 -0
- package/dist/components/Drawer/Drawer.d.ts +6 -0
- package/dist/components/Icon/components/DocumentSigned.d.ts +3 -0
- package/dist/components/Icon/components/Home2.d.ts +3 -0
- package/dist/components/Icon/components/Id.d.ts +3 -0
- package/dist/components/Icon/components/MastercardOs.d.ts +3 -0
- package/dist/components/Icon/components/NovemberFirst.d.ts +3 -0
- package/dist/components/Icon/components/index.d.ts +1 -1
- package/dist/components/Input/Input.d.ts +1 -1
- package/dist/components/Menu/components/Item.d.ts +1 -1
- package/dist/components/Menu/components/Link.d.ts +1 -1
- package/dist/components/Navigation2/components/Link.d.ts +1 -1
- package/dist/components/Provider/Localization.d.ts +1 -0
- package/dist/components/Select2/Select2.d.ts +25 -4
- package/dist/components/Select2/components/Option.d.ts +2 -2
- package/dist/components/Select2/components/Search.d.ts +1 -1
- package/dist/components/Table3/components/Columns/Internal/EditingActionsMenu.d.ts +1 -0
- package/dist/components/Table3/features/useTableEditing.d.ts +0 -1
- package/dist/components/Table3/listeners/useTableEditingListener.d.ts +3 -1
- package/dist/components/Tag/Tag.d.ts +1 -1
- package/dist/esm/index.css +4 -0
- package/dist/esm/packages/taco/src/components/Datepicker/Datepicker.js +13 -3
- package/dist/esm/packages/taco/src/components/Datepicker/Datepicker.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Drawer/Context.js +1 -0
- package/dist/esm/packages/taco/src/components/Drawer/Context.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Drawer/Drawer.js +3 -1
- package/dist/esm/packages/taco/src/components/Drawer/Drawer.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Drawer/components/Content.js +41 -8
- package/dist/esm/packages/taco/src/components/Drawer/components/Content.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Drawer/util.js +1 -1
- package/dist/esm/packages/taco/src/components/Drawer/util.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Icon/components/DocumentSigned.js +19 -0
- package/dist/esm/packages/taco/src/components/Icon/components/DocumentSigned.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Icon/components/Home2.js +19 -0
- package/dist/esm/packages/taco/src/components/Icon/components/Home2.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Icon/components/Id.js +19 -0
- package/dist/esm/packages/taco/src/components/Icon/components/Id.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Icon/components/MastercardOs.js +23 -0
- package/dist/esm/packages/taco/src/components/Icon/components/MastercardOs.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Icon/components/NovemberFirst.js +20 -0
- package/dist/esm/packages/taco/src/components/Icon/components/NovemberFirst.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Icon/components/index.js +10 -0
- package/dist/esm/packages/taco/src/components/Icon/components/index.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Input/Input.js +5 -0
- package/dist/esm/packages/taco/src/components/Input/Input.js.map +1 -1
- package/dist/esm/packages/taco/src/components/List/components/Toggle.js +26 -15
- package/dist/esm/packages/taco/src/components/List/components/Toggle.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Provider/Localization.js +2 -1
- package/dist/esm/packages/taco/src/components/Provider/Localization.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Select2/Select2.js +48 -10
- package/dist/esm/packages/taco/src/components/Select2/Select2.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/Table3.js +1 -7
- package/dist/esm/packages/taco/src/components/Table3/Table3.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/Editing/RowMoveIndicator.js +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/Editing/RowMoveIndicator.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/EditingControlCell.js +1 -0
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/EditingControlCell.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/util.js +2 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/util.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Internal/EditingActionsMenu.js +9 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Internal/EditingActionsMenu.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Row.js +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Row.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/features/useTableEditing.js +1 -12
- package/dist/esm/packages/taco/src/components/Table3/features/useTableEditing.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/listeners/useTableEditingListener.js +16 -1
- package/dist/esm/packages/taco/src/components/Table3/listeners/useTableEditingListener.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/useTable3.js +3 -2
- package/dist/esm/packages/taco/src/components/Table3/useTable3.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/Table.js +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/Table.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Body/Body.js +2 -2
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Body/Body.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Body/util.js +12 -5
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Body/util.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Header/components/Menu.js +9 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Header/components/Menu.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.js +1 -2
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Filters/components/FilterColumn.js +3 -4
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Filters/components/FilterColumn.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Filters/components/FilterComparator.js +3 -4
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Filters/components/FilterComparator.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableDataLoader.js +0 -4
- package/dist/esm/packages/taco/src/primitives/Table/useTableDataLoader.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/util/search.js +3 -2
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/util/search.js.map +1 -1
- package/dist/index.css +4 -0
- package/dist/primitives/Table/Core/components/Body/util.d.ts +2 -2
- package/dist/primitives/Table/Core/components/Toolbar/components/Filters/components/FilterColumn.d.ts +1 -1
- package/dist/taco.cjs.development.js +287 -87
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/package.json +2 -2
|
@@ -3,7 +3,6 @@ import { Cell as ReactTableCell, Table as ReactTable } from '@tanstack/react-tab
|
|
|
3
3
|
import { Table3EditingSaveHandler, Table3EditingValidatorFn } from '../types';
|
|
4
4
|
import { TableRef } from '../../../primitives/Table/types';
|
|
5
5
|
export declare function useTableEditing<TType = unknown>(isEnabled: boolean | undefined, handleSave: Table3EditingSaveHandler<TType> | undefined, validator: Table3EditingValidatorFn<TType> | undefined): {
|
|
6
|
-
handleBlur: (event: React.FocusEvent<HTMLTableElement>) => void;
|
|
7
6
|
getCellValue: <T extends TType>(cell: ReactTableCell<T, unknown>) => unknown;
|
|
8
7
|
getCellError: <T_1 extends TType>(cell: ReactTableCell<T_1, unknown>) => string | undefined;
|
|
9
8
|
setCellValue: <T_2 extends TType>(cell: ReactTableCell<T_2, unknown>, change: unknown, rowIndex: number) => void;
|
|
@@ -1,2 +1,4 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { Table as ReactTable } from '@tanstack/react-table';
|
|
2
|
-
|
|
3
|
+
import { TableRef } from '../../../primitives/Table/types';
|
|
4
|
+
export declare function useTableEditingListener<TType = unknown>(table: ReactTable<TType>, tableRef: React.RefObject<TableRef>): void;
|
|
@@ -13,7 +13,7 @@ export declare const Tag: React.ForwardRefExoticComponent<Pick<React.HTMLAttribu
|
|
|
13
13
|
children: string;
|
|
14
14
|
color?: "green" | "yellow" | "red" | "blue" | "purple" | "brown" | "pink" | "orange" | "grey" | "transparent" | undefined;
|
|
15
15
|
disabled?: boolean | undefined;
|
|
16
|
-
icon?: React.ReactElement<IconProps, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | "account-preview" | "accounting-year-cancel" | "accounting-year" | "accounting" | "ai-chat-solid" | "ai-stars" | "arrow-bottom" | "arrow-down" | "arrow-end" | "arrow-left" | "arrow-right" | "arrow-start" | "arrow-top" | "arrow-up" | "attach-auto" | "attach-cancel" | "attach-warning" | "attach" | "autotext-insert" | "autotext" | "basic-tabs" | "basic" | "bell-solid" | "book" | "booking" | "budget" | "calendar" | "cash-account" | "cash-reports" | "chart-area" | "chart-bar" | "chart-line" | "chart-pie" | "chart-table" | "chat-solid" | "chat" | "chevron-down-double" | "chevron-down-solid" | "chevron-down" | "chevron-left-double" | "chevron-left-solid" | "chevron-left" | "chevron-right-double" | "chevron-right-solid" | "chevron-right" | "chevron-up-double" | "chevron-up-solid" | "chevron-up" | "circle-close" | "circle-information" | "circle-minus" | "circle-plus" | "circle-questionmark" | "circle-tick" | "circle-warning" | "clamp-open" | "clamp" | "close" | "column-freeze" | "column-unfreeze" | "columns" | "connection-enable" | "connection-revoke" | "contacts" | "copy" | "courses" | "credit" | "delete-permanently" | "delete" | "depecriate" | "developer" | "distribution-template" | "document-approve" | "document-create-entry" | "document-cut" | "document-error" | "document-isolate-page" | "document-merge" | "document-move" | "document-preview" | "document-received" | "document-rejected-request" | "document-split" | "document-time" | "document" | "download" | "drag" | "e-copedia" | "e-signature" | "edit-simple" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "entries-on-account" | "entries-open" | "entries-warning" | "entry-type-customer-invoice" | "entry-type-customer-payment" | "entry-type-journal-entry" | "entry-type-manual-customer-invoice" | "entry-type-supplier-invoice" | "entry-type-supplier-payment" | "envelope-approved" | "envelope-solid" | "envelope" | "expand-view" | "expenses" | "export-to-excel" | "export-to-pdf" | "export" | "eye-off" | "eye-on" | "filter-solid" | "filter" | "font-size" | "graph-solid" | "hash" | "height-extra-tall" | "height-medium" | "height-short" | "height-tall" | "home" | "images" | "import" | "inbox-einvoicing" | "inbox-scanning" | "inbox-smart" | "inbox" | "info" | "inventory-matrix" | "inventory" | "journal-pro" | "layout-both" | "layout-first" | "layout-last" | "layout-none" | "layout" | "ledger-card-customer-reminder" | "ledger-card-manual-customer-invoice" | "ledger-card-obsolete-stock" | "ledger-card-opening-entry" | "ledger-card-reserved-entry" | "ledger-card-shrinkage-pilferage" | "ledger-card-stock-adjustment" | "ledger-card-transferred-opening-entry" | "ledger-card" | "lightbulb" | "line" | "link-external" | "list-bulleted" | "list-search" | "list" | "location" | "lock-open" | "lock" | "log-out" | "log" | "market" | "match-amount" | "match-entries" | "menu" | "mileage" | "modal-resize" | "modal-shrink" | "more-solid" | "more" | "move" | "navigation-list" | "note-follow-up" | "note-read" | "note" | "numbers" | "partner-api" | "payment-paid" | "payment-unpaid" | "period" | "person-change" | "person-minus" | "person-plus" | "person-tick" | "phone-solid" | "phone" | "play" | "plus-minus" | "print" | "process-payment" | "product-ledger-card" | "profile" | "project-cards" | "projects" | "question-mark-bold" | "question-mark" | "quicklinks" | "rating-bankruptcy" | "rating-payment-problems" | "reconciled" | "refresh" | "report-solid" | "report" | "restore" | "rotate-left" | "rotate-right" | "sales" | "search-bold" | "search" | "secure-tick" | "secure" | "settings-solid" | "settings" | "shortcuts" | "show-all" | "show-less" | "show-more" | "show-template" | "sliders" | "smartpay" | "sort-by" | "star-solid" | "star" | "subscriptions" | "system-entries" | "tag" | "template-override" | "templates" | "thumb-both" | "thumb-down-solid" | "thumb-down" | "thumb-up-solid" | "thumb-up" | "tick-bold" | "tick" | "time" | "transfer-cancel" | "transfer-locked" | "transfer" | "undo" | "undock" | "unreconciled" | "warning" | "webshop" | "website" | "workflow-template-basic" | "workflow" | "zoom" | undefined;
|
|
16
|
+
icon?: "id" | React.ReactElement<IconProps, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | "account-preview" | "accounting-year-cancel" | "accounting-year" | "accounting" | "ai-chat-solid" | "ai-stars" | "arrow-bottom" | "arrow-down" | "arrow-end" | "arrow-left" | "arrow-right" | "arrow-start" | "arrow-top" | "arrow-up" | "attach-auto" | "attach-cancel" | "attach-warning" | "attach" | "autotext-insert" | "autotext" | "basic-tabs" | "basic" | "bell-solid" | "book" | "booking" | "budget" | "calendar" | "cash-account" | "cash-reports" | "chart-area" | "chart-bar" | "chart-line" | "chart-pie" | "chart-table" | "chat-solid" | "chat" | "chevron-down-double" | "chevron-down-solid" | "chevron-down" | "chevron-left-double" | "chevron-left-solid" | "chevron-left" | "chevron-right-double" | "chevron-right-solid" | "chevron-right" | "chevron-up-double" | "chevron-up-solid" | "chevron-up" | "circle-close" | "circle-information" | "circle-minus" | "circle-plus" | "circle-questionmark" | "circle-tick" | "circle-warning" | "clamp-open" | "clamp" | "close" | "column-freeze" | "column-unfreeze" | "columns" | "connection-enable" | "connection-revoke" | "contacts" | "copy" | "courses" | "credit" | "delete-permanently" | "delete" | "depecriate" | "developer" | "distribution-template" | "document-approve" | "document-create-entry" | "document-cut" | "document-error" | "document-isolate-page" | "document-merge" | "document-move" | "document-preview" | "document-received" | "document-rejected-request" | "document-signed" | "document-split" | "document-time" | "document" | "download" | "drag" | "e-copedia" | "e-signature" | "edit-simple" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "entries-on-account" | "entries-open" | "entries-warning" | "entry-type-customer-invoice" | "entry-type-customer-payment" | "entry-type-journal-entry" | "entry-type-manual-customer-invoice" | "entry-type-supplier-invoice" | "entry-type-supplier-payment" | "envelope-approved" | "envelope-solid" | "envelope" | "expand-view" | "expenses" | "export-to-excel" | "export-to-pdf" | "export" | "eye-off" | "eye-on" | "filter-solid" | "filter" | "font-size" | "graph-solid" | "hash" | "height-extra-tall" | "height-medium" | "height-short" | "height-tall" | "home2" | "home" | "images" | "import" | "inbox-einvoicing" | "inbox-scanning" | "inbox-smart" | "inbox" | "info" | "inventory-matrix" | "inventory" | "journal-pro" | "layout-both" | "layout-first" | "layout-last" | "layout-none" | "layout" | "ledger-card-customer-reminder" | "ledger-card-manual-customer-invoice" | "ledger-card-obsolete-stock" | "ledger-card-opening-entry" | "ledger-card-reserved-entry" | "ledger-card-shrinkage-pilferage" | "ledger-card-stock-adjustment" | "ledger-card-transferred-opening-entry" | "ledger-card" | "lightbulb" | "line" | "link-external" | "list-bulleted" | "list-search" | "list" | "location" | "lock-open" | "lock" | "log-out" | "log" | "market" | "mastercard-os" | "match-amount" | "match-entries" | "menu" | "mileage" | "modal-resize" | "modal-shrink" | "more-solid" | "more" | "move" | "navigation-list" | "note-follow-up" | "note-read" | "note" | "november-first" | "numbers" | "partner-api" | "payment-paid" | "payment-unpaid" | "period" | "person-change" | "person-minus" | "person-plus" | "person-tick" | "phone-solid" | "phone" | "play" | "plus-minus" | "print" | "process-payment" | "product-ledger-card" | "profile" | "project-cards" | "projects" | "question-mark-bold" | "question-mark" | "quicklinks" | "rating-bankruptcy" | "rating-payment-problems" | "reconciled" | "refresh" | "report-solid" | "report" | "restore" | "rotate-left" | "rotate-right" | "sales" | "search-bold" | "search" | "secure-tick" | "secure" | "settings-solid" | "settings" | "shortcuts" | "show-all" | "show-less" | "show-more" | "show-template" | "sliders" | "smartpay" | "sort-by" | "star-solid" | "star" | "subscriptions" | "system-entries" | "tag" | "template-override" | "templates" | "thumb-both" | "thumb-down-solid" | "thumb-down" | "thumb-up-solid" | "thumb-up" | "tick-bold" | "tick" | "time" | "transfer-cancel" | "transfer-locked" | "transfer" | "undo" | "undock" | "unreconciled" | "warning" | "webshop" | "website" | "workflow-template-basic" | "workflow" | "zoom" | undefined;
|
|
17
17
|
readOnly?: boolean | undefined;
|
|
18
18
|
onDelete?: ((event: React.MouseEvent<SVGSVGElement>) => void) | undefined;
|
|
19
19
|
} & React.RefAttributes<HTMLSpanElement>>;
|
package/dist/esm/index.css
CHANGED
|
@@ -1216,6 +1216,10 @@ table[data-taco='table3'][data-table-editing-mode='detailed'] td [data-taco='tex
|
|
|
1216
1216
|
@apply yt-focus-dark;
|
|
1217
1217
|
}
|
|
1218
1218
|
|
|
1219
|
+
table[data-taco='table3'] td:focus {
|
|
1220
|
+
@apply rounded-sm ring-2 ring-inset ring-[#4573D2];
|
|
1221
|
+
}
|
|
1222
|
+
|
|
1219
1223
|
table[data-taco='table3'][data-table-editing-mode] tbody tr:not([data-row-active='true']):hover td [data-taco='input'],
|
|
1220
1224
|
table[data-taco='table3'][data-table-editing-mode] tbody tr:not([data-row-active='true']):hover td [data-taco='textarea'],
|
|
1221
1225
|
table[data-taco='table3'][data-table-editing-mode] tbody tr:not([data-row-active='true']):hover td [data-taco='Select2'] {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { forwardRef, createElement } from 'react';
|
|
1
|
+
import { forwardRef, useRef, useCallback, createElement } from 'react';
|
|
2
2
|
import cn from 'clsx';
|
|
3
3
|
import { IconButton } from '../IconButton/IconButton.js';
|
|
4
4
|
import { useLocalization } from '../Provider/Localization.js';
|
|
@@ -24,6 +24,13 @@ const Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {
|
|
|
24
24
|
texts
|
|
25
25
|
} = useLocalization();
|
|
26
26
|
const className = cn('inline-flex w-full text-black font-normal', externalClassName);
|
|
27
|
+
const popoverContentRef = useRef(null);
|
|
28
|
+
const handleOpenAutofocus = useCallback(e => {
|
|
29
|
+
var _popoverContentRef$cu, _popoverContentRef$cu2;
|
|
30
|
+
e.preventDefault();
|
|
31
|
+
const currentDay = (_popoverContentRef$cu = popoverContentRef === null || popoverContentRef === void 0 ? void 0 : (_popoverContentRef$cu2 = popoverContentRef.current) === null || _popoverContentRef$cu2 === void 0 ? void 0 : _popoverContentRef$cu2.querySelector('table button[name="day"][aria-selected="true"]')) !== null && _popoverContentRef$cu !== void 0 ? _popoverContentRef$cu : null;
|
|
32
|
+
currentDay === null || currentDay === void 0 ? void 0 : currentDay.focus();
|
|
33
|
+
}, [popoverContentRef]);
|
|
27
34
|
return /*#__PURE__*/createElement("span", {
|
|
28
35
|
className: className,
|
|
29
36
|
"data-taco": "datepicker",
|
|
@@ -34,10 +41,13 @@ const Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {
|
|
|
34
41
|
disabled: input.disabled || input.readOnly,
|
|
35
42
|
icon: "calendar",
|
|
36
43
|
tabIndex: -1,
|
|
37
|
-
popover: props => ( /*#__PURE__*/createElement(Popover, Object.assign({}, props), /*#__PURE__*/createElement(Popover.Content,
|
|
44
|
+
popover: props => ( /*#__PURE__*/createElement(Popover, Object.assign({}, props), /*#__PURE__*/createElement(Popover.Content, {
|
|
45
|
+
onOpenAutoFocus: handleOpenAutofocus
|
|
46
|
+
}, ({
|
|
38
47
|
close
|
|
39
48
|
}) => ( /*#__PURE__*/createElement("div", {
|
|
40
|
-
className: "-m-3 flex
|
|
49
|
+
className: '[&_button[name="day"]:focus]:yt-focus -m-3 flex',
|
|
50
|
+
ref: popoverContentRef
|
|
41
51
|
}, /*#__PURE__*/createElement(Calendar, Object.assign({}, calendar, {
|
|
42
52
|
onChange: (date, event) => {
|
|
43
53
|
calendar.onChange(date, event);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Datepicker.js","sources":["../../../../../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\nimport { Input, InputProps } from '../Input/Input';\nimport { useLocalization } from '../Provider/Localization';\nimport { useDatepicker } from './useDatepicker';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Popover } from '../Popover/Popover';\n\nexport type DatepickerTexts = {\n /** Aria-label for calendar */\n calendar: string;\n /** Clear button text */\n clear: string;\n /**\n * Aria-label for calendar icon button in the input.\n * Calendar will open when user clicks this icon button.\n */\n expand: string;\n /** Shortcut heading text */\n shortcuts: string;\n};\n\nexport type DatePickerShortcut = {\n onClick: (event: React.MouseEvent) => void;\n text: string;\n};\n\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\n /** [Calendar](component:calendar) component associated with the DatePicker */\n calendar?: CalendarProps;\n /** List of shortcuts */\n shortcuts?: DatePickerShortcut[];\n /** Title for the shortcuts panel */\n shortcutsText?: string;\n /** Handler to be called when the clear button is clicked */\n onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n /**\n * Date value of the calendar.\n * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\n */\n value?: Date;\n};\n\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\n const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\n const { calendar, input } = useDatepicker(otherProps, ref);\n const { texts } = useLocalization();\n const className = cn('inline-flex w-full text-black font-normal', externalClassName);\n\n return (\n <span className={className} data-taco=\"datepicker\" style={style}>\n <Input\n {...input}\n button={\n input.readOnly ? undefined : (\n <IconButton\n aria-label={texts.datepicker.expand}\n disabled={input.disabled || input.readOnly}\n icon=\"calendar\"\n tabIndex={-1}\n popover={props => (\n <Popover {...props}>\n <Popover.Content>\n {({ close }) => (\n <div className=\"-m-3 flex\">\n <Calendar\n {...calendar}\n onChange={(date: Date, event?: React.MouseEvent<Element>) => {\n calendar.onChange(date, event);\n close();\n }}\n />\n {shortcuts && (\n <div className=\"border-grey-300 flex flex-col border-l\">\n <span className=\"m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold\">\n {shortcutsText ?? texts.datepicker.shortcuts}\n </span>\n <ul>\n {shortcuts.map(shortcut => (\n <li key={shortcut.text}>\n <button\n type=\"button\"\n className=\"hover:wcag-grey-200 flex w-full items-start px-4 py-1 text-xs\"\n onClick={event => {\n event.persist();\n shortcut.onClick(event);\n close();\n }}>\n {shortcut.text}\n </button>\n </li>\n ))}\n </ul>\n {handleReset && (\n <button\n type=\"button\"\n className=\"mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n onClick={event => {\n event.persist();\n handleReset(event);\n close();\n }}>\n {texts.datepicker.clear}\n </button>\n )}\n </div>\n )}\n </div>\n )}\n </Popover.Content>\n </Popover>\n )}\n tooltip={texts.datepicker.calendar}\n />\n )\n }\n />\n </span>\n );\n});\nDatepicker.displayName = 'Datepicker';\n"],"names":["Datepicker","React","props","ref","className","externalClassName","onReset","handleReset","style","shortcuts","shortcutsText","otherProps","calendar","input","useDatepicker","texts","useLocalization","cn","Input","button","readOnly","undefined","IconButton","datepicker","expand","disabled","icon","tabIndex","popover","Popover","Content","close","Calendar","onChange","date","event","map","shortcut","key","text","type","onClick","persist","clear","tooltip","displayName"],"mappings":";;;;;;;;;MA4CaA,UAAU,gBAAGC,UAAgB,CAAC,SAASD,UAAUA,CAACE,KAAsB,EAAEC,GAAgC;EACnH,MAAM;IAAEC,SAAS,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC,WAAW;IAAEC,KAAK;IAAEC,SAAS;IAAEC,aAAa;IAAE,GAAGC;GAAY,GAAGT,KAAK;EACpH,MAAM;IAAEU,QAAQ;IAAEC;GAAO,GAAGC,aAAa,CAACH,UAAU,EAAER,GAAG,CAAC;EAC1D,MAAM;IAAEY;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMZ,SAAS,GAAGa,EAAE,CAAC,2CAA2C,EAAEZ,iBAAiB,CAAC;EAEpF,oBACIJ;IAAMG,SAAS,EAAEA,SAAS;iBAAY,YAAY;IAACI,KAAK,EAAEA;kBACtDP,cAACiB,KAAK,oBACEL,KAAK;IACTM,MAAM,EACFN,KAAK,CAACO,QAAQ,GAAGC,SAAS,kBACtBpB,cAACqB,UAAU;oBACKP,KAAK,CAACQ,UAAU,CAACC,MAAM;MACnCC,QAAQ,EAAEZ,KAAK,CAACY,QAAQ,IAAIZ,KAAK,CAACO,QAAQ;MAC1CM,IAAI,EAAC,UAAU;MACfC,QAAQ,EAAE,CAAC,CAAC;MACZC,OAAO,EAAE1B,KAAK,mBACVD,cAAC4B,OAAO,oBAAK3B,KAAK,gBACdD,cAAC4B,OAAO,CAACC,OAAO,QACX,CAAC;QAAEC;OAAO,oBACP9B;QAAKG,SAAS,EAAC;sBACXH,cAAC+B,QAAQ,oBACDpB,QAAQ;QACZqB,QAAQ,EAAEA,CAACC,IAAU,EAAEC,KAAiC;UACpDvB,QAAQ,CAACqB,QAAQ,CAACC,IAAI,EAAEC,KAAK,CAAC;UAC9BJ,KAAK,EAAE;;SAEb,EACDtB,SAAS,mBACNR;QAAKG,SAAS,EAAC;sBACXH;QAAMG,SAAS,EAAC;SACXM,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAIK,KAAK,CAACQ,UAAU,CAACd,SAAS,CACzC,eACPR,0BACKQ,SAAS,CAAC2B,GAAG,CAACC,QAAQ,mBACnBpC;QAAIqC,GAAG,EAAED,QAAQ,CAACE;sBACdtC;QACIuC,IAAI,EAAC,QAAQ;QACbpC,SAAS,EAAC,+DAA+D;QACzEqC,OAAO,EAAEN,KAAK;UACVA,KAAK,CAACO,OAAO,EAAE;UACfL,QAAQ,CAACI,OAAO,CAACN,KAAK,CAAC;UACvBJ,KAAK,EAAE;;SAEVM,QAAQ,CAACE,IAAI,CACT,CACR,CACR,CAAC,CACD,EACJhC,WAAW,mBACRN;QACIuC,IAAI,EAAC,QAAQ;QACbpC,SAAS,EAAC,sHAAsH;QAChIqC,OAAO,EAAEN,KAAK;UACVA,KAAK,CAACO,OAAO,EAAE;UACfnC,WAAW,CAAC4B,KAAK,CAAC;UAClBJ,KAAK,EAAE;;SAEVhB,KAAK,CAACQ,UAAU,CAACoB,KAAK,CAClB,CACZ,CACC,CACT,CACC,CACT,CACa,CACZ,CACb;MACDC,OAAO,EAAE7B,KAAK,CAACQ,UAAU,CAACX;MAC5B;KAGZ,CACC;AAEf,CAAC;AACDZ,UAAU,CAAC6C,WAAW,GAAG,YAAY;;;;"}
|
|
1
|
+
{"version":3,"file":"Datepicker.js","sources":["../../../../../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\nimport { Input, InputProps } from '../Input/Input';\nimport { useLocalization } from '../Provider/Localization';\nimport { useDatepicker } from './useDatepicker';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Popover } from '../Popover/Popover';\n\nexport type DatepickerTexts = {\n /** Aria-label for calendar */\n calendar: string;\n /** Clear button text */\n clear: string;\n /**\n * Aria-label for calendar icon button in the input.\n * Calendar will open when user clicks this icon button.\n */\n expand: string;\n /** Shortcut heading text */\n shortcuts: string;\n};\n\nexport type DatePickerShortcut = {\n onClick: (event: React.MouseEvent) => void;\n text: string;\n};\n\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\n /** [Calendar](component:calendar) component associated with the DatePicker */\n calendar?: CalendarProps;\n /** List of shortcuts */\n shortcuts?: DatePickerShortcut[];\n /** Title for the shortcuts panel */\n shortcutsText?: string;\n /** Handler to be called when the clear button is clicked */\n onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n /**\n * Date value of the calendar.\n * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\n */\n value?: Date;\n};\n\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\n const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\n const { calendar, input } = useDatepicker(otherProps, ref);\n const { texts } = useLocalization();\n const className = cn('inline-flex w-full text-black font-normal', externalClassName);\n\n const popoverContentRef = React.useRef<HTMLDivElement>(null);\n const handleOpenAutofocus = React.useCallback(\n (e: Event) => {\n e.preventDefault();\n\n const currentDay: HTMLButtonElement | null =\n popoverContentRef?.current?.querySelector('table button[name=\"day\"][aria-selected=\"true\"]') ?? null;\n currentDay?.focus();\n },\n [popoverContentRef]\n );\n\n return (\n <span className={className} data-taco=\"datepicker\" style={style}>\n <Input\n {...input}\n button={\n input.readOnly ? undefined : (\n <IconButton\n aria-label={texts.datepicker.expand}\n disabled={input.disabled || input.readOnly}\n icon=\"calendar\"\n tabIndex={-1}\n popover={props => (\n <Popover {...props}>\n <Popover.Content onOpenAutoFocus={handleOpenAutofocus}>\n {({ close }) => (\n <div\n className='[&_button[name=\"day\"]:focus]:yt-focus -m-3 flex'\n ref={popoverContentRef}>\n <Calendar\n {...calendar}\n onChange={(date: Date, event?: React.MouseEvent<Element>) => {\n calendar.onChange(date, event);\n close();\n }}\n />\n {shortcuts && (\n <div className=\"border-grey-300 flex flex-col border-l\">\n <span className=\"m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold\">\n {shortcutsText ?? texts.datepicker.shortcuts}\n </span>\n <ul>\n {shortcuts.map(shortcut => (\n <li key={shortcut.text}>\n <button\n type=\"button\"\n className=\"hover:wcag-grey-200 flex w-full items-start px-4 py-1 text-xs\"\n onClick={event => {\n event.persist();\n shortcut.onClick(event);\n close();\n }}>\n {shortcut.text}\n </button>\n </li>\n ))}\n </ul>\n {handleReset && (\n <button\n type=\"button\"\n className=\"mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n onClick={event => {\n event.persist();\n handleReset(event);\n close();\n }}>\n {texts.datepicker.clear}\n </button>\n )}\n </div>\n )}\n </div>\n )}\n </Popover.Content>\n </Popover>\n )}\n tooltip={texts.datepicker.calendar}\n />\n )\n }\n />\n </span>\n );\n});\nDatepicker.displayName = 'Datepicker';\n"],"names":["Datepicker","React","props","ref","className","externalClassName","onReset","handleReset","style","shortcuts","shortcutsText","otherProps","calendar","input","useDatepicker","texts","useLocalization","cn","popoverContentRef","handleOpenAutofocus","e","preventDefault","currentDay","_popoverContentRef$cu","_popoverContentRef$cu2","current","querySelector","focus","Input","button","readOnly","undefined","IconButton","datepicker","expand","disabled","icon","tabIndex","popover","Popover","Content","onOpenAutoFocus","close","Calendar","onChange","date","event","map","shortcut","key","text","type","onClick","persist","clear","tooltip","displayName"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Context.js","sources":["../../../../../../../src/components/Drawer/Context.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\nimport * as React from 'react';\nimport { DrawerSize, DrawerVariant } from './types';\n\nexport type DrawerContext = {\n closeOnEscape: boolean;\n showCloseButton: boolean;\n onClose?: () => void;\n onResize?: (delta: number) => void;\n props: {};\n ref: React.Ref<HTMLElement>;\n size: DrawerSize;\n open?: boolean;\n setOpen?: (open: boolean) => void;\n variant: DrawerVariant;\n focusTrap?: boolean;\n outlet?: HTMLElement;\n};\n\nexport const DrawerContext = React.createContext<DrawerContext>({\n closeOnEscape: true,\n showCloseButton: true,\n onClose: () => {},\n onResize: () => {},\n props: {},\n ref: null,\n size: 'md',\n variant: 'embedded',\n});\n\nexport const useCurrentDrawer = () => {\n return React.useContext(DrawerContext);\n};\n"],"names":["DrawerContext","React","closeOnEscape","showCloseButton","onClose","onResize","props","ref","size","variant","useCurrentDrawer"],"mappings":";;AAAA;
|
|
1
|
+
{"version":3,"file":"Context.js","sources":["../../../../../../../src/components/Drawer/Context.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\nimport * as React from 'react';\nimport { DrawerSize, DrawerVariant } from './types';\n\nexport type DrawerContext = {\n closeOnEscape: boolean;\n showCloseButton: boolean;\n onClickBack?: () => void;\n onClose?: () => void;\n onResize?: (delta: number) => void;\n props: {};\n ref: React.Ref<HTMLElement>;\n size: DrawerSize;\n open?: boolean;\n setOpen?: (open: boolean) => void;\n variant: DrawerVariant;\n focusTrap?: boolean;\n outlet?: HTMLElement;\n};\n\nexport const DrawerContext = React.createContext<DrawerContext>({\n closeOnEscape: true,\n showCloseButton: true,\n onClickBack: () => {},\n onClose: () => {},\n onResize: () => {},\n props: {},\n ref: null,\n size: 'md',\n variant: 'embedded',\n});\n\nexport const useCurrentDrawer = () => {\n return React.useContext(DrawerContext);\n};\n"],"names":["DrawerContext","React","closeOnEscape","showCloseButton","onClickBack","onClose","onResize","props","ref","size","variant","useCurrentDrawer"],"mappings":";;AAAA;MAoBaA,aAAa,gBAAGC,aAAmB,CAAgB;EAC5DC,aAAa,EAAE,IAAI;EACnBC,eAAe,EAAE,IAAI;EACrBC,WAAW,EAAEA,QAAQ;EACrBC,OAAO,EAAEA,QAAQ;EACjBC,QAAQ,EAAEA,QAAQ;EAClBC,KAAK,EAAE,EAAE;EACTC,GAAG,EAAE,IAAI;EACTC,IAAI,EAAE,IAAI;EACVC,OAAO,EAAE;CACZ;MAEYC,gBAAgB,GAAGA;EAC5B,OAAOV,UAAgB,CAACD,aAAa,CAAC;AAC1C;;;;"}
|
|
@@ -32,6 +32,7 @@ const Drawer = /*#__PURE__*/forwardRef(function Drawer(props, ref) {
|
|
|
32
32
|
closeOnEscape = true,
|
|
33
33
|
onResize,
|
|
34
34
|
onClose,
|
|
35
|
+
onClickBack,
|
|
35
36
|
size = 'md',
|
|
36
37
|
trigger,
|
|
37
38
|
children,
|
|
@@ -48,6 +49,7 @@ const Drawer = /*#__PURE__*/forwardRef(function Drawer(props, ref) {
|
|
|
48
49
|
const [outlet, setOutlet] = useState();
|
|
49
50
|
const context = useMemo(() => ({
|
|
50
51
|
closeOnEscape,
|
|
52
|
+
onClickBack,
|
|
51
53
|
onClose,
|
|
52
54
|
onResize,
|
|
53
55
|
props: otherProps,
|
|
@@ -59,7 +61,7 @@ const Drawer = /*#__PURE__*/forwardRef(function Drawer(props, ref) {
|
|
|
59
61
|
focusTrap,
|
|
60
62
|
showCloseButton,
|
|
61
63
|
outlet
|
|
62
|
-
}), [closeOnEscape, open, setOpen, otherProps, variant, onResize, onClose, size, focusTrap, showCloseButton, outlet]);
|
|
64
|
+
}), [closeOnEscape, open, setOpen, otherProps, variant, onResize, onClose, size, focusTrap, showCloseButton, outlet, onClickBack]);
|
|
63
65
|
// this prevents two drawers being open at once and used when one drawer getting opened before another one got closed.
|
|
64
66
|
const close = useCallback(() => {
|
|
65
67
|
setOpen(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","sources":["../../../../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n Actions,\n Footer,\n InnerContent,\n DrawerInnerContentProps,\n DrawerFooterProps,\n DrawerTitleProps,\n Title,\n Close,\n Content,\n DrawerContentProps,\n DrawerCloseProps,\n} from './components/Content';\nimport { GroupProps } from '../Group/Group';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport cn from 'clsx';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { DrawerTriggerProps, Trigger } from './components/Trigger';\nimport { DrawerContext } from './Context';\nimport { DrawerSize, DrawerVariant } from './types';\n\nexport type DrawerTexts = {\n /**\n * Aria-label for close icon button in drawer.\n */\n close: string;\n};\n\nexport type DrawerProps = Omit<DialogProps, 'draggable' | 'size'> & {\n children: React.ReactNode | React.ReactNode[];\n /** Size of the drawer. This is the recommended way to set a size for drawer component. */\n size?: DrawerSize;\n /** When `true`, pressing escape will close the drawer */\n closeOnEscape?: boolean;\n /** Set whether the drawer is open by default or not, use when not providing a trigger */\n defaultOpen?: boolean;\n /** Handler called when drawer closes by user interaction */\n onClose?: () => void;\n /** Called when the drawer opens or closes, must be used in conjunction with open */\n onChange?: (open: boolean | undefined) => void;\n /** Control the open state of the drawer from outside the component */\n open?: boolean;\n /** A trigger to be used for the drawer, should not be set if `children` already contains a trigger */\n trigger?: JSX.Element;\n /** Triggers when resizing, can be throttled or debounced for better performances */\n onResize?: (delta: number) => void;\n /** Rendering variant of the drawer */\n variant?: DrawerVariant;\n /** className for children container, needed for embedded version, in cases where we might need to control children height */\n className?: string;\n /** When 'true' preventing focus from leaving drawer content */\n focusTrap?: boolean;\n /** When 'true' renders close button in topr right cornenr of drawer content */\n showCloseButton?: boolean;\n /** Target specific named outlet allowing you to render a drawer to a specific outlet */\n outletName?: string;\n};\n\nexport type OutletProps = React.HTMLAttributes<HTMLDivElement> & {\n name?: string;\n};\n\nconst DEFAULT_OUTLET_NAME = 'default';\n\nconst Outlet = React.forwardRef(function Outlet(props: OutletProps, ref: React.Ref<HTMLDivElement>) {\n const className = cn('h-full ml-auto overflow-hidden flex-shrink-0', props.className);\n return (\n <div\n {...props}\n className={className}\n data-taco=\"drawer-outlet\"\n data-taco-outlet-name={props.name ?? DEFAULT_OUTLET_NAME}\n ref={ref}\n />\n );\n});\n\n// drawerStack getting set by previous drawer instance, to be able to close previous instance, when new instance getting opened.\nlet drawerStack: undefined | (() => void);\n\nexport type ForwardedDrawerWithStatics = React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLElement>> & {\n Trigger: React.ForwardRefExoticComponent<DrawerTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n Content: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;\n InnerContent: React.ForwardRefExoticComponent<DrawerInnerContentProps & React.RefAttributes<HTMLDivElement>>;\n Title: React.ForwardRefExoticComponent<DrawerTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n Footer: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;\n Close: React.ForwardRefExoticComponent<DrawerCloseProps & React.RefAttributes<HTMLButtonElement>>;\n Actions: React.ForwardRefExoticComponent<GroupProps & React.RefAttributes<HTMLDivElement>>;\n Outlet: React.ForwardRefExoticComponent<OutletProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Drawer = React.forwardRef(function Drawer(props: DrawerProps, ref: React.Ref<HTMLElement>) {\n const {\n open: openProp,\n defaultOpen: defaultOpenProp,\n // if onChange is not provided, then replace it with empty function, needed for useControllableState\n onChange = () => {\n // do nothing.\n },\n variant = 'embedded',\n className,\n closeOnEscape = true,\n onResize,\n onClose,\n size = 'md',\n trigger,\n children,\n focusTrap = props.focusTrap === undefined && props.variant === 'overlay' ? true : props.focusTrap,\n showCloseButton = true,\n outletName,\n ...otherProps\n } = props;\n\n const [open, setOpen] = useControllableState<boolean | undefined>({\n prop: openProp,\n defaultProp: defaultOpenProp,\n onChange,\n });\n\n const [outlet, setOutlet] = React.useState<HTMLElement>();\n\n const context = React.useMemo(\n () => ({\n closeOnEscape,\n onClose,\n onResize,\n props: otherProps,\n size,\n ref,\n open,\n setOpen,\n variant,\n focusTrap,\n showCloseButton,\n outlet,\n }),\n [closeOnEscape, open, setOpen, otherProps, variant, onResize, onClose, size, focusTrap, showCloseButton, outlet]\n );\n\n // this prevents two drawers being open at once and used when one drawer getting opened before another one got closed.\n const close = React.useCallback(() => {\n setOpen(false);\n onClose && onClose();\n }, []);\n\n React.useEffect(() => {\n const outletSelector = `[data-taco=\"drawer-outlet\"][data-taco-outlet-name=\"${outletName ?? DEFAULT_OUTLET_NAME}\"]`;\n const outletElement = document.querySelector<HTMLElement>(outletSelector) ?? document.body;\n setOutlet(outletElement);\n }, [outletName]);\n\n React.useEffect(() => {\n if (open) {\n // if drawerStack is defined, this means that another drawer was opened before\n if (drawerStack) {\n drawerStack();\n }\n drawerStack = close;\n } else {\n // if drawerStack is equal to current close callback,\n // this means that drawer getting closed completely instead of getting closed on re-open\n if (drawerStack === close) {\n drawerStack = undefined;\n }\n }\n }, [open]);\n\n return (\n <DrawerContext.Provider value={context}>\n <DialogPrimitive.Root modal={variant === 'overlay' ? true : false} open={open} onOpenChange={setOpen}>\n {trigger && <Trigger>{trigger}</Trigger>}\n {children}\n </DialogPrimitive.Root>\n </DrawerContext.Provider>\n );\n}) as ForwardedDrawerWithStatics;\n\nDrawer.Trigger = Trigger;\nDrawer.Content = Content;\nDrawer.InnerContent = InnerContent;\nDrawer.Title = Title;\nDrawer.Footer = Footer;\nDrawer.Close = Close;\nDrawer.Actions = Actions;\nDrawer.Outlet = Outlet;\n"],"names":["DEFAULT_OUTLET_NAME","Outlet","React","props","ref","className","cn","name","_props$name","drawerStack","Drawer","open","openProp","defaultOpen","defaultOpenProp","onChange","variant","closeOnEscape","onResize","onClose","size","trigger","children","focusTrap","undefined","showCloseButton","outletName","otherProps","setOpen","useControllableState","prop","defaultProp","outlet","setOutlet","context","close","outletSelector","outletElement","_document$querySelect","document","querySelector","body","DrawerContext","Provider","value","DialogPrimitive","modal","onOpenChange","Trigger","Content","InnerContent","Title","Footer","Close","Actions"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Drawer.js","sources":["../../../../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n Actions,\n Footer,\n InnerContent,\n DrawerInnerContentProps,\n DrawerFooterProps,\n DrawerTitleProps,\n Title,\n Close,\n Content,\n DrawerContentProps,\n DrawerCloseProps,\n} from './components/Content';\nimport { GroupProps } from '../Group/Group';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport cn from 'clsx';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { DrawerTriggerProps, Trigger } from './components/Trigger';\nimport { DrawerContext } from './Context';\nimport { DrawerSize, DrawerVariant } from './types';\n\nexport type DrawerTexts = {\n /**\n * Aria-label for back icon button in drawer.\n */\n back: string;\n /**\n * Aria-label for close icon button in drawer.\n */\n close: string;\n};\n\nexport type DrawerProps = Omit<DialogProps, 'draggable' | 'size'> & {\n children: React.ReactNode | React.ReactNode[];\n /** Size of the drawer. This is the recommended way to set a size for drawer component. */\n size?: DrawerSize;\n /** When `true`, pressing escape will close the drawer */\n closeOnEscape?: boolean;\n /** Set whether the drawer is open by default or not, use when not providing a trigger */\n defaultOpen?: boolean;\n /** Handles the back button click and determines its visibility */\n onClickBack?: () => void;\n /** Handler called when drawer closes by user interaction */\n onClose?: () => void;\n /** Called when the drawer opens or closes, must be used in conjunction with open */\n onChange?: (open: boolean | undefined) => void;\n /** Control the open state of the drawer from outside the component */\n open?: boolean;\n /** A trigger to be used for the drawer, should not be set if `children` already contains a trigger */\n trigger?: JSX.Element;\n /** Triggers when resizing, can be throttled or debounced for better performances */\n onResize?: (delta: number) => void;\n /** Rendering variant of the drawer */\n variant?: DrawerVariant;\n /** className for children container, needed for embedded version, in cases where we might need to control children height */\n className?: string;\n /** When 'true' preventing focus from leaving drawer content */\n focusTrap?: boolean;\n /** When 'true' renders close button in topr right cornenr of drawer content */\n showCloseButton?: boolean;\n /** Target specific named outlet allowing you to render a drawer to a specific outlet */\n outletName?: string;\n};\n\nexport type OutletProps = React.HTMLAttributes<HTMLDivElement> & {\n name?: string;\n};\n\nconst DEFAULT_OUTLET_NAME = 'default';\n\nconst Outlet = React.forwardRef(function Outlet(props: OutletProps, ref: React.Ref<HTMLDivElement>) {\n const className = cn('h-full ml-auto overflow-hidden flex-shrink-0', props.className);\n return (\n <div\n {...props}\n className={className}\n data-taco=\"drawer-outlet\"\n data-taco-outlet-name={props.name ?? DEFAULT_OUTLET_NAME}\n ref={ref}\n />\n );\n});\n\n// drawerStack getting set by previous drawer instance, to be able to close previous instance, when new instance getting opened.\nlet drawerStack: undefined | (() => void);\n\nexport type ForwardedDrawerWithStatics = React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLElement>> & {\n Trigger: React.ForwardRefExoticComponent<DrawerTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n Content: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;\n InnerContent: React.ForwardRefExoticComponent<DrawerInnerContentProps & React.RefAttributes<HTMLDivElement>>;\n Title: React.ForwardRefExoticComponent<DrawerTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n Footer: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;\n Close: React.ForwardRefExoticComponent<DrawerCloseProps & React.RefAttributes<HTMLButtonElement>>;\n Actions: React.ForwardRefExoticComponent<GroupProps & React.RefAttributes<HTMLDivElement>>;\n Outlet: React.ForwardRefExoticComponent<OutletProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Drawer = React.forwardRef(function Drawer(props: DrawerProps, ref: React.Ref<HTMLElement>) {\n const {\n open: openProp,\n defaultOpen: defaultOpenProp,\n // if onChange is not provided, then replace it with empty function, needed for useControllableState\n onChange = () => {\n // do nothing.\n },\n variant = 'embedded',\n className,\n closeOnEscape = true,\n onResize,\n onClose,\n onClickBack,\n size = 'md',\n trigger,\n children,\n focusTrap = props.focusTrap === undefined && props.variant === 'overlay' ? true : props.focusTrap,\n showCloseButton = true,\n outletName,\n ...otherProps\n } = props;\n\n const [open, setOpen] = useControllableState<boolean | undefined>({\n prop: openProp,\n defaultProp: defaultOpenProp,\n onChange,\n });\n\n const [outlet, setOutlet] = React.useState<HTMLElement>();\n\n const context = React.useMemo(\n () => ({\n closeOnEscape,\n onClickBack,\n onClose,\n onResize,\n props: otherProps,\n size,\n ref,\n open,\n setOpen,\n variant,\n focusTrap,\n showCloseButton,\n outlet,\n }),\n [\n closeOnEscape,\n open,\n setOpen,\n otherProps,\n variant,\n onResize,\n onClose,\n size,\n focusTrap,\n showCloseButton,\n outlet,\n onClickBack,\n ]\n );\n\n // this prevents two drawers being open at once and used when one drawer getting opened before another one got closed.\n const close = React.useCallback(() => {\n setOpen(false);\n onClose && onClose();\n }, []);\n\n React.useEffect(() => {\n const outletSelector = `[data-taco=\"drawer-outlet\"][data-taco-outlet-name=\"${outletName ?? DEFAULT_OUTLET_NAME}\"]`;\n const outletElement = document.querySelector<HTMLElement>(outletSelector) ?? document.body;\n setOutlet(outletElement);\n }, [outletName]);\n\n React.useEffect(() => {\n if (open) {\n // if drawerStack is defined, this means that another drawer was opened before\n if (drawerStack) {\n drawerStack();\n }\n drawerStack = close;\n } else {\n // if drawerStack is equal to current close callback,\n // this means that drawer getting closed completely instead of getting closed on re-open\n if (drawerStack === close) {\n drawerStack = undefined;\n }\n }\n }, [open]);\n\n return (\n <DrawerContext.Provider value={context}>\n <DialogPrimitive.Root modal={variant === 'overlay' ? true : false} open={open} onOpenChange={setOpen}>\n {trigger && <Trigger>{trigger}</Trigger>}\n {children}\n </DialogPrimitive.Root>\n </DrawerContext.Provider>\n );\n}) as ForwardedDrawerWithStatics;\n\nDrawer.Trigger = Trigger;\nDrawer.Content = Content;\nDrawer.InnerContent = InnerContent;\nDrawer.Title = Title;\nDrawer.Footer = Footer;\nDrawer.Close = Close;\nDrawer.Actions = Actions;\nDrawer.Outlet = Outlet;\n"],"names":["DEFAULT_OUTLET_NAME","Outlet","React","props","ref","className","cn","name","_props$name","drawerStack","Drawer","open","openProp","defaultOpen","defaultOpenProp","onChange","variant","closeOnEscape","onResize","onClose","onClickBack","size","trigger","children","focusTrap","undefined","showCloseButton","outletName","otherProps","setOpen","useControllableState","prop","defaultProp","outlet","setOutlet","context","close","outletSelector","outletElement","_document$querySelect","document","querySelector","body","DrawerContext","Provider","value","DialogPrimitive","modal","onOpenChange","Trigger","Content","InnerContent","Title","Footer","Close","Actions"],"mappings":"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"}
|
|
@@ -35,24 +35,55 @@ const RenderPropWrapper = /*#__PURE__*/React__default.forwardRef(function Render
|
|
|
35
35
|
...renderProps
|
|
36
36
|
});
|
|
37
37
|
});
|
|
38
|
-
const Title = /*#__PURE__*/React__default.forwardRef(function DrawerTitle(props,
|
|
38
|
+
const Title = /*#__PURE__*/React__default.forwardRef(function DrawerTitle(props, externalRef) {
|
|
39
39
|
const {
|
|
40
40
|
className,
|
|
41
41
|
children,
|
|
42
42
|
...otherProps
|
|
43
43
|
} = props;
|
|
44
|
+
const ref = useMergedRef(externalRef);
|
|
45
|
+
const [style, setStyle] = React__default.useState({});
|
|
46
|
+
const {
|
|
47
|
+
texts
|
|
48
|
+
} = useLocalization();
|
|
49
|
+
const {
|
|
50
|
+
onClickBack
|
|
51
|
+
} = useCurrentDrawer();
|
|
44
52
|
/**
|
|
45
53
|
* By design in default drawer version Title has grey separator, but we might have exceptions like Drawer + Tabs scenario,
|
|
46
|
-
* where we might want to hide the grey separator. For this reason separator was
|
|
47
|
-
* so it can be easily overriden in exceptional
|
|
54
|
+
* where we might want to hide the grey separator. For this reason separator was rendered with using of classNames,
|
|
55
|
+
* so it can be easily overriden in exceptional scenarios.
|
|
48
56
|
* */
|
|
49
|
-
const cName = cn('grow-0 py-4
|
|
57
|
+
const cName = cn('grow-0 py-4 px-4 justify-self-start mb-0 border-b-[1px] border-grey-300 flex items-start', className);
|
|
58
|
+
React__default.useEffect(() => {
|
|
59
|
+
var _ref$current, _drawer$querySelector, _closeButton$offsetWi, _drawer$querySelector2, _actionsWrapper$offse;
|
|
60
|
+
const drawer = ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.closest('[data-taco="drawer"]');
|
|
61
|
+
// This is the margin amount that we need to deduct from the margins to align with the design
|
|
62
|
+
const marginAdjust = 4;
|
|
63
|
+
const closeButton = (_drawer$querySelector = drawer === null || drawer === void 0 ? void 0 : drawer.querySelector(`[aria-label="${texts.drawer.close}"]`)) !== null && _drawer$querySelector !== void 0 ? _drawer$querySelector : null;
|
|
64
|
+
const closeButtonWidth = (_closeButton$offsetWi = closeButton === null || closeButton === void 0 ? void 0 : closeButton.offsetWidth) !== null && _closeButton$offsetWi !== void 0 ? _closeButton$offsetWi : 0;
|
|
65
|
+
const closeButtonRightMargin = 8;
|
|
66
|
+
const actionsWrapper = (_drawer$querySelector2 = drawer === null || drawer === void 0 ? void 0 : drawer.querySelector(`#taco-drawer-actions[data-taco="group"]`)) !== null && _drawer$querySelector2 !== void 0 ? _drawer$querySelector2 : null;
|
|
67
|
+
const actionsWrapperWidth = (_actionsWrapper$offse = actionsWrapper === null || actionsWrapper === void 0 ? void 0 : actionsWrapper.offsetWidth) !== null && _actionsWrapper$offse !== void 0 ? _actionsWrapper$offse : 0;
|
|
68
|
+
const actionsWrapperRightMargin = 8;
|
|
69
|
+
const marginRight = closeButtonWidth + actionsWrapperWidth + closeButtonRightMargin + actionsWrapperRightMargin - marginAdjust;
|
|
70
|
+
setStyle({
|
|
71
|
+
marginRight
|
|
72
|
+
});
|
|
73
|
+
}, [ref, texts.drawer.close]);
|
|
50
74
|
return /*#__PURE__*/React__default.createElement(Title$1, Object.assign({
|
|
51
75
|
className: cName
|
|
52
76
|
}, otherProps, {
|
|
53
77
|
ref: ref
|
|
54
|
-
}), /*#__PURE__*/React__default.createElement(
|
|
55
|
-
|
|
78
|
+
}), onClickBack ? ( /*#__PURE__*/React__default.createElement(IconButton, {
|
|
79
|
+
appearance: "discrete",
|
|
80
|
+
"aria-label": texts.drawer.back,
|
|
81
|
+
className: "mr-3 text-base",
|
|
82
|
+
icon: "chevron-left",
|
|
83
|
+
onClick: onClickBack
|
|
84
|
+
})) : null, /*#__PURE__*/React__default.createElement("span", {
|
|
85
|
+
className: "line-clamp-2 inline-block overflow-y-hidden",
|
|
86
|
+
style: style
|
|
56
87
|
}, children));
|
|
57
88
|
});
|
|
58
89
|
const Footer = /*#__PURE__*/React__default.forwardRef(function DrawerFooter(props, ref) {
|
|
@@ -75,8 +106,10 @@ const Actions = /*#__PURE__*/React__default.forwardRef(function Actions(props, r
|
|
|
75
106
|
...otherProps
|
|
76
107
|
} = props;
|
|
77
108
|
const cName = cn('absolute top-0 right-10 mr-[8px] mt-4', className);
|
|
109
|
+
// Id is added to identify the actions wrapper inside a useEffect in Dialog.Title
|
|
78
110
|
return /*#__PURE__*/React__default.createElement(Group, Object.assign({}, otherProps, {
|
|
79
111
|
className: cName,
|
|
112
|
+
id: "taco-drawer-actions",
|
|
80
113
|
ref: ref
|
|
81
114
|
}));
|
|
82
115
|
});
|
|
@@ -190,8 +223,8 @@ const DrawerContent = /*#__PURE__*/React__default.forwardRef(function Content(pr
|
|
|
190
223
|
};
|
|
191
224
|
}, [size, variant, open]);
|
|
192
225
|
const handleEscapeKeyDown = event => {
|
|
193
|
-
var _ref$
|
|
194
|
-
const isTargetInsideDrawerContent = (_ref$
|
|
226
|
+
var _ref$current2;
|
|
227
|
+
const isTargetInsideDrawerContent = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.contains(event.target);
|
|
195
228
|
if (isTargetInsideDrawerContent) {
|
|
196
229
|
if (!closeOnEscape) {
|
|
197
230
|
event.preventDefault();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Content.js","sources":["../../../../../../../../src/components/Drawer/components/Content.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { Group, GroupProps } from '../../Group/Group';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Backdrop } from '../../Backdrop/Backdrop';\nimport { useCurrentMenu } from '../../Menu/Context';\nimport { useCurrentDrawer } from '../Context';\nimport {\n getBackdropClassNames,\n getDrawerContainerClassNames,\n getDrawerContentClassNames,\n getDrawerDragHandlerClassNames,\n} from '../util';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { FocusScope } from '@react-aria/focus';\nimport { ScrollArea } from '../../ScrollArea/ScrollArea';\nimport { useGlobalKeyDown } from '../../../hooks/useGlobalKeyDown';\n\nconst RESIZE_MIN = 360;\nconst RESIZE_MAX = 1000;\n\nexport type DrawerContentRenderProps = {\n close: () => void;\n};\n\nexport enum DrawerAnimationDefinition {\n Visible = 'visible',\n Hidden = 'hidden',\n}\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n const close = () => {\n onClick(new CustomEvent('close'));\n };\n\n return children({ close, ref, ...renderProps });\n});\n\nexport type DrawerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DrawerTitle(props: DrawerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n const { className, children, ...otherProps } = props;\n /**\n * By design in default drawer version Title has grey separator, but we might have exceptions like Drawer + Tabs scenario,\n * where we might want to hide the grey separator. For this reason separator was rendedr with using of classNames,\n * so it can be easily overriden in exceptional scenarious.\n * */\n const cName = cn('grow-0 py-4 pl-4 justify-self-start mb-0 border-b-[1px] border-grey-300 flex items-center', className);\n return (\n <DialogPrimitive.Title className={cName} {...otherProps} ref={ref}>\n <span className=\"line-clamp-2 inline-block w-4/6 overflow-y-hidden\">{children}</span>\n </DialogPrimitive.Title>\n );\n});\n\nexport type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DrawerFooter(props: DrawerFooterProps, ref: React.Ref<HTMLDivElement>) {\n const { className, ...otherProps } = props;\n /**\n * The same scenario as Title, grey separator rendered using classNames to have posibility to override it.\n */\n const cName = cn('mt-auto flex justify-end grow-0 p-4 border-t-[1px] border-grey-300', props.className);\n return <div {...otherProps} className={cName} ref={ref} />;\n});\n\nexport const Actions = React.forwardRef(function Actions(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n const { className, ...otherProps } = props;\n const cName = cn('absolute top-0 right-10 mr-[8px] mt-4', className);\n return <Group {...otherProps} className={cName} ref={ref} />;\n});\n\nexport type DrawerCloseProps = React.HTMLAttributes<HTMLButtonElement>;\nexport const Close = React.forwardRef(function DrawerClose(props: DrawerCloseProps, ref: React.Ref<HTMLButtonElement>) {\n const { onClose } = useCurrentDrawer();\n\n return <DialogPrimitive.Close {...props} onClick={onClose} ref={ref} asChild />;\n});\n\n/**\n * It is container component, needed to provide default scrolling behaviour and padding, to simplyfy usage, requested by feature devs.\n * It is optional to use InnerContent component, if consumer need to implement custom behaviour or paddings for inner content,\n * then it's simply enough to render children and wrap them in custom implementation.\n */\nexport type DrawerInnerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n /**\n * Consumer might want to use innerContent component to apply default paddings, but want to implement custom scrolling behaviour,\n * default value - true\n */\n isScrollable?: boolean;\n};\nexport const InnerContent = React.forwardRef(function InnerContent(\n props: DrawerInnerContentProps,\n ref: React.Ref<HTMLDivElement>\n) {\n const { className, isScrollable = true, children, ...otherProps } = props;\n const cName = cn(\n 'grow flex flex-col',\n {\n 'overflow-y-hidden': isScrollable,\n 'p-4': !isScrollable,\n },\n className\n );\n return (\n <div {...otherProps} className={cName} ref={ref}>\n {isScrollable ? <ScrollArea className=\"w-full gap-y-0.5 p-4\">{children}</ScrollArea> : children}\n </div>\n );\n});\n\nconst Portal = (props: DialogPrimitive.DialogPortalProps) => {\n const { children, ...otherProps } = props;\n const { open = false, variant, outlet } = useCurrentDrawer();\n\n const backdropClassNames = React.useMemo(() => {\n return getBackdropClassNames(open);\n }, [open]);\n\n if (!outlet) {\n return null;\n }\n\n return (\n <DialogPrimitive.Portal {...otherProps} container={outlet ?? undefined}>\n {variant === 'overlay' ? (\n <DialogPrimitive.Overlay forceMount>\n {/* Animate backdrop appearance for overlay version of Drawer */}\n <Backdrop className={backdropClassNames} />\n </DialogPrimitive.Overlay>\n ) : null}\n {children}\n </DialogPrimitive.Portal>\n );\n};\n\ntype UntrappedFocusDrawerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n onEscape: (event: KeyboardEvent) => void;\n};\nconst UntrappedFocusDrawerContent = React.forwardRef(function EmbeddedDrawerContent(\n props: UntrappedFocusDrawerContentProps,\n ref: React.Ref<HTMLDivElement>\n) {\n const { onEscape, children, ...otherProps } = props;\n\n useGlobalKeyDown('Escape', onEscape);\n\n return (\n <div {...otherProps} ref={ref}>\n <FocusScope autoFocus={true} restoreFocus={true}>\n {children}\n </FocusScope>\n </div>\n );\n});\n\nexport type DrawerContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n /** An accessible label to be announced when the side drawer is opened */\n 'aria-label': string;\n children: Omit<React.ReactNode, 'Function'> | ((props: DrawerContentRenderProps) => JSX.Element);\n};\nexport const DrawerContent = React.forwardRef(function Content(\n props: DrawerContentProps,\n externalRef: React.Ref<HTMLDivElement>\n) {\n const {\n size,\n onClose,\n onResize,\n open = false,\n closeOnEscape,\n variant,\n focusTrap,\n showCloseButton,\n setOpen,\n } = useCurrentDrawer();\n const { className, style, children, ...otherProps } = props;\n const { texts } = useLocalization();\n const ref = useMergedRef<HTMLDivElement>(externalRef);\n\n // if the drawer was opened by a menu, we need to close the menu when the drawer closes\n // the menu is still open (and mounted) because it is the trigger for the drawer\n const menu = useCurrentMenu();\n let handleCloseAutoFocus: DialogPrimitive.DialogContentProps['onCloseAutoFocus'];\n\n if (menu) {\n handleCloseAutoFocus = () => {\n menu.close();\n };\n }\n\n const containerClassName: string = React.useMemo(() => cn(getDrawerContainerClassNames(variant), className), [className]);\n\n const { contentClassName, dragHandlerClassName } = React.useMemo(() => {\n const contentClassName = getDrawerContentClassNames(size, variant, open);\n const dragHandlerClassName: string = getDrawerDragHandlerClassNames();\n return { contentClassName, dragHandlerClassName };\n }, [size, variant, open]);\n\n const handleEscapeKeyDown = (event: KeyboardEvent) => {\n const isTargetInsideDrawerContent = ref.current?.contains(event.target as HTMLElement);\n if (isTargetInsideDrawerContent) {\n if (!closeOnEscape) {\n event.preventDefault();\n } else {\n setOpen && setOpen(false);\n if (onClose) {\n onClose();\n }\n }\n }\n };\n\n const [containerWidth, setContainerWidth] = React.useState<number>();\n\n const dragHandlerRef = React.useRef<HTMLDivElement>(null);\n const {\n position,\n dragging,\n handleProps: dragHandleProps,\n resetPosition,\n } = useDraggable(useMergedRef<HTMLDivElement>(dragHandlerRef));\n\n const contentRef = React.useRef<HTMLDivElement>(null);\n\n React.useEffect(() => {\n if (onResize) {\n onResize(position.x);\n }\n }, [position]);\n\n React.useEffect(() => {\n setContainerWidth(contentRef.current?.offsetWidth);\n }, [contentRef, open]);\n\n const resizedWidth = React.useMemo((): number | undefined => {\n if (containerWidth) {\n return Math.min(RESIZE_MAX, Math.max(RESIZE_MIN, containerWidth - position.x || 0));\n }\n return;\n }, [containerWidth, position]);\n\n React.useEffect(() => {\n if (!dragging && resizedWidth) {\n setContainerWidth(resizedWidth);\n resetPosition();\n }\n }, [dragging]);\n\n let output;\n\n if (typeof children === 'function') {\n output = (\n <Close>\n <RenderPropWrapper>{children}</RenderPropWrapper>\n </Close>\n );\n } else {\n output = children;\n }\n\n const content = (\n <div ref={contentRef} data-taco=\"drawer\" className={containerClassName}>\n {output}\n <div className={dragHandlerClassName} {...dragHandleProps} data-testid=\"resize-handler\" ref={dragHandlerRef}>\n {dragging ? <div data-testid=\"resize-hit-area\" className=\"fixed bottom-0 left-0 right-0 top-0\" /> : null}\n </div>\n {showCloseButton ? (\n <Close>\n <IconButton\n appearance=\"discrete\"\n aria-label={texts.drawer.close}\n className=\"absolute right-0 top-0 mr-2 mt-4\"\n icon=\"close\"\n />\n </Close>\n ) : null}\n </div>\n );\n\n const styleProp = {\n ...style,\n ...{ width: resizedWidth },\n };\n\n return focusTrap ? (\n <DialogPrimitive.Content\n forceMount\n {...otherProps}\n className={contentClassName}\n onEscapeKeyDown={handleEscapeKeyDown}\n onInteractOutside={variant === 'overlay' ? undefined : event => event.preventDefault()}\n onCloseAutoFocus={handleCloseAutoFocus}\n ref={ref}\n style={styleProp}>\n {content}\n </DialogPrimitive.Content>\n ) : (\n <UntrappedFocusDrawerContent onEscape={handleEscapeKeyDown} className={contentClassName} style={styleProp} ref={ref}>\n {content}\n </UntrappedFocusDrawerContent>\n );\n});\n\nexport const Content = React.forwardRef(function Content(props: DrawerContentProps, externalRef: React.Ref<HTMLDivElement>) {\n const { children } = props;\n\n return (\n <Portal>\n <DrawerContent {...props} ref={externalRef}>\n {children}\n </DrawerContent>\n </Portal>\n );\n});\n"],"names":["RESIZE_MIN","RESIZE_MAX","DrawerAnimationDefinition","RenderPropWrapper","React","forwardRef","children","onClick","renderProps","ref","close","CustomEvent","Title","DrawerTitle","props","className","otherProps","cName","cn","DialogPrimitive","Footer","DrawerFooter","Actions","Group","Close","DrawerClose","onClose","useCurrentDrawer","asChild","InnerContent","isScrollable","ScrollArea","Portal","open","variant","outlet","backdropClassNames","useMemo","getBackdropClassNames","container","undefined","forceMount","Backdrop","UntrappedFocusDrawerContent","EmbeddedDrawerContent","onEscape","useGlobalKeyDown","FocusScope","autoFocus","restoreFocus","DrawerContent","Content","externalRef","size","onResize","closeOnEscape","focusTrap","showCloseButton","setOpen","style","texts","useLocalization","useMergedRef","menu","useCurrentMenu","handleCloseAutoFocus","containerClassName","getDrawerContainerClassNames","contentClassName","dragHandlerClassName","getDrawerContentClassNames","getDrawerDragHandlerClassNames","handleEscapeKeyDown","event","isTargetInsideDrawerContent","_ref$current","current","contains","target","preventDefault","containerWidth","setContainerWidth","useState","dragHandlerRef","useRef","position","dragging","handleProps","dragHandleProps","resetPosition","useDraggable","contentRef","useEffect","x","_contentRef$current","offsetWidth","resizedWidth","Math","min","max","output","content","IconButton","appearance","drawer","icon","styleProp","width","onEscapeKeyDown","onInteractOutside","onCloseAutoFocus"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Content.js","sources":["../../../../../../../../src/components/Drawer/components/Content.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { Group, GroupProps } from '../../Group/Group';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Backdrop } from '../../Backdrop/Backdrop';\nimport { useCurrentMenu } from '../../Menu/Context';\nimport { useCurrentDrawer } from '../Context';\nimport {\n getBackdropClassNames,\n getDrawerContainerClassNames,\n getDrawerContentClassNames,\n getDrawerDragHandlerClassNames,\n} from '../util';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { FocusScope } from '@react-aria/focus';\nimport { ScrollArea } from '../../ScrollArea/ScrollArea';\nimport { useGlobalKeyDown } from '../../../hooks/useGlobalKeyDown';\n\nconst RESIZE_MIN = 360;\nconst RESIZE_MAX = 1000;\n\nexport type DrawerContentRenderProps = {\n close: () => void;\n};\n\nexport enum DrawerAnimationDefinition {\n Visible = 'visible',\n Hidden = 'hidden',\n}\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n const close = () => {\n onClick(new CustomEvent('close'));\n };\n\n return children({ close, ref, ...renderProps });\n});\n\nexport type DrawerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DrawerTitle(props: DrawerTitleProps, externalRef: React.Ref<HTMLHeadingElement>) {\n const { className, children, ...otherProps } = props;\n const ref = useMergedRef<HTMLHeadingElement>(externalRef);\n const [style, setStyle] = React.useState({});\n const { texts } = useLocalization();\n const { onClickBack } = useCurrentDrawer();\n\n /**\n * By design in default drawer version Title has grey separator, but we might have exceptions like Drawer + Tabs scenario,\n * where we might want to hide the grey separator. For this reason separator was rendered with using of classNames,\n * so it can be easily overriden in exceptional scenarios.\n * */\n const cName = cn('grow-0 py-4 px-4 justify-self-start mb-0 border-b-[1px] border-grey-300 flex items-start', className);\n\n React.useEffect(() => {\n const drawer = ref?.current?.closest('[data-taco=\"drawer\"]');\n\n // This is the margin amount that we need to deduct from the margins to align with the design\n const marginAdjust = 4;\n\n const closeButton: HTMLButtonElement | null = drawer?.querySelector(`[aria-label=\"${texts.drawer.close}\"]`) ?? null;\n const closeButtonWidth = closeButton?.offsetWidth ?? 0;\n const closeButtonRightMargin = 8;\n\n const actionsWrapper: HTMLSpanElement | null = drawer?.querySelector(`#taco-drawer-actions[data-taco=\"group\"]`) ?? null;\n const actionsWrapperWidth = actionsWrapper?.offsetWidth ?? 0;\n const actionsWrapperRightMargin = 8;\n\n const marginRight =\n closeButtonWidth + actionsWrapperWidth + closeButtonRightMargin + actionsWrapperRightMargin - marginAdjust;\n\n setStyle({ marginRight });\n }, [ref, texts.drawer.close]);\n\n return (\n <DialogPrimitive.Title className={cName} {...otherProps} ref={ref}>\n {onClickBack ? (\n <IconButton\n appearance=\"discrete\"\n aria-label={texts.drawer.back}\n className=\"mr-3 text-base\"\n icon=\"chevron-left\"\n onClick={onClickBack}\n />\n ) : null}\n {\n // We need to apply the right margin as an inline style instead of using Tailwind CSS.\n // This is necessary because we are creating styles dynamically at runtime,\n // and Tailwind doesn't support generating runtime styles.\n }\n <span className=\"line-clamp-2 inline-block overflow-y-hidden\" style={style}>\n {children}\n </span>\n </DialogPrimitive.Title>\n );\n});\n\nexport type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DrawerFooter(props: DrawerFooterProps, ref: React.Ref<HTMLDivElement>) {\n const { className, ...otherProps } = props;\n /**\n * The same scenario as Title, grey separator rendered using classNames to have posibility to override it.\n */\n const cName = cn('mt-auto flex justify-end grow-0 p-4 border-t-[1px] border-grey-300', props.className);\n return <div {...otherProps} className={cName} ref={ref} />;\n});\n\nexport const Actions = React.forwardRef(function Actions(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n const { className, ...otherProps } = props;\n const cName = cn('absolute top-0 right-10 mr-[8px] mt-4', className);\n // Id is added to identify the actions wrapper inside a useEffect in Dialog.Title\n return <Group {...otherProps} className={cName} id=\"taco-drawer-actions\" ref={ref} />;\n});\n\nexport type DrawerCloseProps = React.HTMLAttributes<HTMLButtonElement>;\nexport const Close = React.forwardRef(function DrawerClose(props: DrawerCloseProps, ref: React.Ref<HTMLButtonElement>) {\n const { onClose } = useCurrentDrawer();\n\n return <DialogPrimitive.Close {...props} onClick={onClose} ref={ref} asChild />;\n});\n\n/**\n * It is container component, needed to provide default scrolling behaviour and padding, to simplyfy usage, requested by feature devs.\n * It is optional to use InnerContent component, if consumer need to implement custom behaviour or paddings for inner content,\n * then it's simply enough to render children and wrap them in custom implementation.\n */\nexport type DrawerInnerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n /**\n * Consumer might want to use innerContent component to apply default paddings, but want to implement custom scrolling behaviour,\n * default value - true\n */\n isScrollable?: boolean;\n};\nexport const InnerContent = React.forwardRef(function InnerContent(\n props: DrawerInnerContentProps,\n ref: React.Ref<HTMLDivElement>\n) {\n const { className, isScrollable = true, children, ...otherProps } = props;\n const cName = cn(\n 'grow flex flex-col',\n {\n 'overflow-y-hidden': isScrollable,\n 'p-4': !isScrollable,\n },\n className\n );\n return (\n <div {...otherProps} className={cName} ref={ref}>\n {isScrollable ? <ScrollArea className=\"w-full gap-y-0.5 p-4\">{children}</ScrollArea> : children}\n </div>\n );\n});\n\nconst Portal = (props: DialogPrimitive.DialogPortalProps) => {\n const { children, ...otherProps } = props;\n const { open = false, variant, outlet } = useCurrentDrawer();\n\n const backdropClassNames = React.useMemo(() => {\n return getBackdropClassNames(open);\n }, [open]);\n\n if (!outlet) {\n return null;\n }\n\n return (\n <DialogPrimitive.Portal {...otherProps} container={outlet ?? undefined}>\n {variant === 'overlay' ? (\n <DialogPrimitive.Overlay forceMount>\n {/* Animate backdrop appearance for overlay version of Drawer */}\n <Backdrop className={backdropClassNames} />\n </DialogPrimitive.Overlay>\n ) : null}\n {children}\n </DialogPrimitive.Portal>\n );\n};\n\ntype UntrappedFocusDrawerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n onEscape: (event: KeyboardEvent) => void;\n};\nconst UntrappedFocusDrawerContent = React.forwardRef(function EmbeddedDrawerContent(\n props: UntrappedFocusDrawerContentProps,\n ref: React.Ref<HTMLDivElement>\n) {\n const { onEscape, children, ...otherProps } = props;\n\n useGlobalKeyDown('Escape', onEscape);\n\n return (\n <div {...otherProps} ref={ref}>\n <FocusScope autoFocus={true} restoreFocus={true}>\n {children}\n </FocusScope>\n </div>\n );\n});\n\nexport type DrawerContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n /** An accessible label to be announced when the side drawer is opened */\n 'aria-label': string;\n children: Omit<React.ReactNode, 'Function'> | ((props: DrawerContentRenderProps) => JSX.Element);\n};\nexport const DrawerContent = React.forwardRef(function Content(\n props: DrawerContentProps,\n externalRef: React.Ref<HTMLDivElement>\n) {\n const {\n size,\n onClose,\n onResize,\n open = false,\n closeOnEscape,\n variant,\n focusTrap,\n showCloseButton,\n setOpen,\n } = useCurrentDrawer();\n const { className, style, children, ...otherProps } = props;\n const { texts } = useLocalization();\n const ref = useMergedRef<HTMLDivElement>(externalRef);\n\n // if the drawer was opened by a menu, we need to close the menu when the drawer closes\n // the menu is still open (and mounted) because it is the trigger for the drawer\n const menu = useCurrentMenu();\n let handleCloseAutoFocus: DialogPrimitive.DialogContentProps['onCloseAutoFocus'];\n\n if (menu) {\n handleCloseAutoFocus = () => {\n menu.close();\n };\n }\n\n const containerClassName: string = React.useMemo(() => cn(getDrawerContainerClassNames(variant), className), [className]);\n\n const { contentClassName, dragHandlerClassName } = React.useMemo(() => {\n const contentClassName = getDrawerContentClassNames(size, variant, open);\n const dragHandlerClassName: string = getDrawerDragHandlerClassNames();\n return { contentClassName, dragHandlerClassName };\n }, [size, variant, open]);\n\n const handleEscapeKeyDown = (event: KeyboardEvent) => {\n const isTargetInsideDrawerContent = ref.current?.contains(event.target as HTMLElement);\n if (isTargetInsideDrawerContent) {\n if (!closeOnEscape) {\n event.preventDefault();\n } else {\n setOpen && setOpen(false);\n if (onClose) {\n onClose();\n }\n }\n }\n };\n\n const [containerWidth, setContainerWidth] = React.useState<number>();\n\n const dragHandlerRef = React.useRef<HTMLDivElement>(null);\n const {\n position,\n dragging,\n handleProps: dragHandleProps,\n resetPosition,\n } = useDraggable(useMergedRef<HTMLDivElement>(dragHandlerRef));\n\n const contentRef = React.useRef<HTMLDivElement>(null);\n\n React.useEffect(() => {\n if (onResize) {\n onResize(position.x);\n }\n }, [position]);\n\n React.useEffect(() => {\n setContainerWidth(contentRef.current?.offsetWidth);\n }, [contentRef, open]);\n\n const resizedWidth = React.useMemo((): number | undefined => {\n if (containerWidth) {\n return Math.min(RESIZE_MAX, Math.max(RESIZE_MIN, containerWidth - position.x || 0));\n }\n return;\n }, [containerWidth, position]);\n\n React.useEffect(() => {\n if (!dragging && resizedWidth) {\n setContainerWidth(resizedWidth);\n resetPosition();\n }\n }, [dragging]);\n\n let output;\n\n if (typeof children === 'function') {\n output = (\n <Close>\n <RenderPropWrapper>{children}</RenderPropWrapper>\n </Close>\n );\n } else {\n output = children;\n }\n\n const content = (\n <div ref={contentRef} data-taco=\"drawer\" className={containerClassName}>\n {output}\n <div className={dragHandlerClassName} {...dragHandleProps} data-testid=\"resize-handler\" ref={dragHandlerRef}>\n {dragging ? <div data-testid=\"resize-hit-area\" className=\"fixed bottom-0 left-0 right-0 top-0\" /> : null}\n </div>\n {showCloseButton ? (\n <Close>\n <IconButton\n appearance=\"discrete\"\n aria-label={texts.drawer.close}\n className=\"absolute right-0 top-0 mr-2 mt-4\"\n icon=\"close\"\n />\n </Close>\n ) : null}\n </div>\n );\n\n const styleProp = {\n ...style,\n ...{ width: resizedWidth },\n };\n\n return focusTrap ? (\n <DialogPrimitive.Content\n forceMount\n {...otherProps}\n className={contentClassName}\n onEscapeKeyDown={handleEscapeKeyDown}\n onInteractOutside={variant === 'overlay' ? undefined : event => event.preventDefault()}\n onCloseAutoFocus={handleCloseAutoFocus}\n ref={ref}\n style={styleProp}>\n {content}\n </DialogPrimitive.Content>\n ) : (\n <UntrappedFocusDrawerContent onEscape={handleEscapeKeyDown} className={contentClassName} style={styleProp} ref={ref}>\n {content}\n </UntrappedFocusDrawerContent>\n );\n});\n\nexport const Content = React.forwardRef(function Content(props: DrawerContentProps, externalRef: React.Ref<HTMLDivElement>) {\n const { children } = props;\n\n return (\n <Portal>\n <DrawerContent {...props} ref={externalRef}>\n {children}\n </DrawerContent>\n </Portal>\n );\n});\n"],"names":["RESIZE_MIN","RESIZE_MAX","DrawerAnimationDefinition","RenderPropWrapper","React","forwardRef","children","onClick","renderProps","ref","close","CustomEvent","Title","DrawerTitle","props","externalRef","className","otherProps","useMergedRef","style","setStyle","useState","texts","useLocalization","onClickBack","useCurrentDrawer","cName","cn","useEffect","drawer","_ref$current","current","closest","marginAdjust","closeButton","_drawer$querySelector","querySelector","closeButtonWidth","_closeButton$offsetWi","offsetWidth","closeButtonRightMargin","actionsWrapper","_drawer$querySelector2","actionsWrapperWidth","_actionsWrapper$offse","actionsWrapperRightMargin","marginRight","DialogPrimitive","IconButton","appearance","back","icon","Footer","DrawerFooter","Actions","Group","id","Close","DrawerClose","onClose","asChild","InnerContent","isScrollable","ScrollArea","Portal","open","variant","outlet","backdropClassNames","useMemo","getBackdropClassNames","container","undefined","forceMount","Backdrop","UntrappedFocusDrawerContent","EmbeddedDrawerContent","onEscape","useGlobalKeyDown","FocusScope","autoFocus","restoreFocus","DrawerContent","Content","size","onResize","closeOnEscape","focusTrap","showCloseButton","setOpen","menu","useCurrentMenu","handleCloseAutoFocus","containerClassName","getDrawerContainerClassNames","contentClassName","dragHandlerClassName","getDrawerContentClassNames","getDrawerDragHandlerClassNames","handleEscapeKeyDown","event","isTargetInsideDrawerContent","_ref$current2","contains","target","preventDefault","containerWidth","setContainerWidth","dragHandlerRef","useRef","position","dragging","handleProps","dragHandleProps","resetPosition","useDraggable","contentRef","x","_contentRef$current","resizedWidth","Math","min","max","output","content","styleProp","width","onEscapeKeyDown","onInteractOutside","onCloseAutoFocus"],"mappings":"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"}
|
|
@@ -20,7 +20,7 @@ const getDrawerContentClassNames = (size, variant, open) => {
|
|
|
20
20
|
const getDrawerContainerClassNames = variant => {
|
|
21
21
|
return cn('bg-white mx-auto absolute h-full w-full flex flex-col ', {
|
|
22
22
|
'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]': variant === 'overlay',
|
|
23
|
-
'border-l border-grey h-full': variant === 'embedded'
|
|
23
|
+
'border-l border-grey-300 h-full': variant === 'embedded'
|
|
24
24
|
});
|
|
25
25
|
};
|
|
26
26
|
const getDrawerDragHandlerClassNames = () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Drawer/util.ts"],"sourcesContent":["import { DrawerSize, DrawerVariant } from './types';\nimport cn from 'clsx';\n\nexport const getDrawerSizeClassnames = (size: DrawerSize): string => {\n switch (size) {\n case 'lg':\n return 'w-[600px]';\n case 'md':\n default:\n return 'w-[420px]';\n }\n};\n\nexport const getDrawerPrimitiveContentClassNames = (): string => {\n return 'fixed bottom-0 top-0 right-0';\n};\n\nexport const getDrawerContentClassNames = (size: DrawerSize, variant: DrawerVariant, open: boolean): string => {\n return cn(\n 'bg-white h-full bottom-0 top-0 right-0 transition-none',\n {\n block: open,\n hidden: !open,\n fixed: variant === 'overlay',\n 'relative h-full overflow-hidden': variant === 'embedded',\n },\n getDrawerSizeClassnames(size)\n );\n};\n\nexport const getDrawerContainerClassNames = (variant: DrawerVariant): string => {\n return cn('bg-white mx-auto absolute h-full w-full flex flex-col ', {\n 'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]': variant === 'overlay',\n 'border-l border-grey h-full': variant === 'embedded',\n });\n};\n\nexport const getDrawerDragHandlerClassNames = (): string => {\n return cn('border-[2px] absolute border-transparent top-0 w-2 h-full cursor-ew-resize left-0 hover:border-l-blue-500');\n};\n\nexport const getBackdropClassNames = (open: boolean): string => {\n return cn({\n block: open,\n hidden: !open,\n });\n};\n"],"names":["getDrawerSizeClassnames","size","getDrawerContentClassNames","variant","open","cn","block","hidden","fixed","getDrawerContainerClassNames","getDrawerDragHandlerClassNames","getBackdropClassNames"],"mappings":";;MAGaA,uBAAuB,GAAIC,IAAgB;EACpD,QAAQA,IAAI;IACR,KAAK,IAAI;MACL,OAAO,WAAW;IACtB,KAAK,IAAI;IACT;MACI,OAAO,WAAW;;AAE9B;MAMaC,0BAA0B,GAAGA,CAACD,IAAgB,EAAEE,OAAsB,EAAEC,IAAa;EAC9F,OAAOC,EAAE,CACL,wDAAwD,EACxD;IACIC,KAAK,EAAEF,IAAI;IACXG,MAAM,EAAE,CAACH,IAAI;IACbI,KAAK,EAAEL,OAAO,KAAK,SAAS;IAC5B,iCAAiC,EAAEA,OAAO,KAAK;GAClD,EACDH,uBAAuB,CAACC,IAAI,CAAC,CAChC;AACL;MAEaQ,4BAA4B,GAAIN,OAAsB;EAC/D,OAAOE,EAAE,CAAC,wDAAwD,EAAE;IAChE,sEAAsE,EAAEF,OAAO,KAAK,SAAS;IAC7F,
|
|
1
|
+
{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Drawer/util.ts"],"sourcesContent":["import { DrawerSize, DrawerVariant } from './types';\nimport cn from 'clsx';\n\nexport const getDrawerSizeClassnames = (size: DrawerSize): string => {\n switch (size) {\n case 'lg':\n return 'w-[600px]';\n case 'md':\n default:\n return 'w-[420px]';\n }\n};\n\nexport const getDrawerPrimitiveContentClassNames = (): string => {\n return 'fixed bottom-0 top-0 right-0';\n};\n\nexport const getDrawerContentClassNames = (size: DrawerSize, variant: DrawerVariant, open: boolean): string => {\n return cn(\n 'bg-white h-full bottom-0 top-0 right-0 transition-none',\n {\n block: open,\n hidden: !open,\n fixed: variant === 'overlay',\n 'relative h-full overflow-hidden': variant === 'embedded',\n },\n getDrawerSizeClassnames(size)\n );\n};\n\nexport const getDrawerContainerClassNames = (variant: DrawerVariant): string => {\n return cn('bg-white mx-auto absolute h-full w-full flex flex-col ', {\n 'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]': variant === 'overlay',\n 'border-l border-grey-300 h-full': variant === 'embedded',\n });\n};\n\nexport const getDrawerDragHandlerClassNames = (): string => {\n return cn('border-[2px] absolute border-transparent top-0 w-2 h-full cursor-ew-resize left-0 hover:border-l-blue-500');\n};\n\nexport const getBackdropClassNames = (open: boolean): string => {\n return cn({\n block: open,\n hidden: !open,\n });\n};\n"],"names":["getDrawerSizeClassnames","size","getDrawerContentClassNames","variant","open","cn","block","hidden","fixed","getDrawerContainerClassNames","getDrawerDragHandlerClassNames","getBackdropClassNames"],"mappings":";;MAGaA,uBAAuB,GAAIC,IAAgB;EACpD,QAAQA,IAAI;IACR,KAAK,IAAI;MACL,OAAO,WAAW;IACtB,KAAK,IAAI;IACT;MACI,OAAO,WAAW;;AAE9B;MAMaC,0BAA0B,GAAGA,CAACD,IAAgB,EAAEE,OAAsB,EAAEC,IAAa;EAC9F,OAAOC,EAAE,CACL,wDAAwD,EACxD;IACIC,KAAK,EAAEF,IAAI;IACXG,MAAM,EAAE,CAACH,IAAI;IACbI,KAAK,EAAEL,OAAO,KAAK,SAAS;IAC5B,iCAAiC,EAAEA,OAAO,KAAK;GAClD,EACDH,uBAAuB,CAACC,IAAI,CAAC,CAChC;AACL;MAEaQ,4BAA4B,GAAIN,OAAsB;EAC/D,OAAOE,EAAE,CAAC,wDAAwD,EAAE;IAChE,sEAAsE,EAAEF,OAAO,KAAK,SAAS;IAC7F,iCAAiC,EAAEA,OAAO,KAAK;GAClD,CAAC;AACN;MAEaO,8BAA8B,GAAGA;EAC1C,OAAOL,EAAE,CAAC,2GAA2G,CAAC;AAC1H;MAEaM,qBAAqB,GAAIP,IAAa;EAC/C,OAAOC,EAAE,CAAC;IACNC,KAAK,EAAEF,IAAI;IACXG,MAAM,EAAE,CAACH;GACZ,CAAC;AACN;;;;"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { forwardRef, createElement } from 'react';
|
|
2
|
+
|
|
3
|
+
function IconDocumentSigned(props, svgRef) {
|
|
4
|
+
return /*#__PURE__*/createElement("svg", Object.assign({
|
|
5
|
+
fill: "none",
|
|
6
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
7
|
+
viewBox: "0 0 24 24",
|
|
8
|
+
ref: svgRef
|
|
9
|
+
}, props), /*#__PURE__*/createElement("path", {
|
|
10
|
+
fillRule: "evenodd",
|
|
11
|
+
clipRule: "evenodd",
|
|
12
|
+
d: "M14.293 2.293A1 1 0 0013.586 2H5.75A1.75 1.75 0 004 3.75v16.5c0 .966.784 1.75 1.75 1.75h12.5A1.75 1.75 0 0020 20.25V8.414a1 1 0 00-.293-.707l-5.414-5.414zM5.75 3.5H13v3.75l.006.144A1.75 1.75 0 0014.75 9h3.75v11.25l-.007.057a.25.25 0 01-.243.193H5.75l-.057-.007a.25.25 0 01-.193-.243V3.75l.007-.057A.25.25 0 015.75 3.5zm8.75 1.121V7.25a.25.25 0 00.193.243l.057.007h2.63L14.5 4.621zm-6.693 9.425C8.183 12.37 9.194 11 10.43 11c1.547 0 1.796 1.624 1 3.337a6.972 6.972 0 01-1.424 2.009l-.156.148.138-.007.17-.017c1.058-.13 1.702-.687 2.014-1.725l.044-.16.026-.08c.239-.613 1.208-.407 1.13.292a10.03 10.03 0 00-.074 1.205l.006.168.084-.093.202-.245c.451-.532.863-.748 1.332-.404.185.135.278.313.343.543l.019.072.033.156.064.387.087-.088.147-.16.172-.202.197-.242.22-.284.23-.312.057-.067a.59.59 0 01.898.758l-.133.182-.252.334-.127.162c-.665.834-1.147 1.225-1.605 1.266-.419.037-.725-.198-.889-.556a1.83 1.83 0 01-.128-.403l-.016-.081-.08.09-.093.096c-.583.591-1.13.773-1.585.251l-.068-.084-.054-.08a1.31 1.31 0 01-.128-.29l-.011-.04-.098.082-.152.112c-.568.398-1.28.616-2.126.645l-.2.003-.167-.005a1.862 1.862 0 01-.843-.253l-.016-.01-.077.046-.256.137a6.378 6.378 0 01-.8.342l-.222.072-.078.018a.59.59 0 01-.267-1.145 5.16 5.16 0 00.806-.324l.15-.08-.043-.116-.056-.188c-.133-.511-.144-1.121-.036-1.775l.031-.17.038-.181zm2.617-.347c.422-.975.323-1.52.004-1.52-.545 0-1.255 1.006-1.502 2.273-.09.462-.108.86-.061 1.178l.025.14.082-.07.197-.186a5.84 5.84 0 001.1-1.488l.091-.185.064-.142z",
|
|
13
|
+
fill: "currentColor"
|
|
14
|
+
}));
|
|
15
|
+
}
|
|
16
|
+
var DocumentSigned = /*#__PURE__*/forwardRef(IconDocumentSigned);
|
|
17
|
+
|
|
18
|
+
export default DocumentSigned;
|
|
19
|
+
//# sourceMappingURL=DocumentSigned.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DocumentSigned.js","sources":["../../../../../../../../src/components/Icon/components/DocumentSigned.tsx"],"sourcesContent":["import * as React from 'react';\nfunction IconDocumentSigned(props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>): JSX.Element {\n return (\n <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" ref={svgRef} {...props}>\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M14.293 2.293A1 1 0 0013.586 2H5.75A1.75 1.75 0 004 3.75v16.5c0 .966.784 1.75 1.75 1.75h12.5A1.75 1.75 0 0020 20.25V8.414a1 1 0 00-.293-.707l-5.414-5.414zM5.75 3.5H13v3.75l.006.144A1.75 1.75 0 0014.75 9h3.75v11.25l-.007.057a.25.25 0 01-.243.193H5.75l-.057-.007a.25.25 0 01-.193-.243V3.75l.007-.057A.25.25 0 015.75 3.5zm8.75 1.121V7.25a.25.25 0 00.193.243l.057.007h2.63L14.5 4.621zm-6.693 9.425C8.183 12.37 9.194 11 10.43 11c1.547 0 1.796 1.624 1 3.337a6.972 6.972 0 01-1.424 2.009l-.156.148.138-.007.17-.017c1.058-.13 1.702-.687 2.014-1.725l.044-.16.026-.08c.239-.613 1.208-.407 1.13.292a10.03 10.03 0 00-.074 1.205l.006.168.084-.093.202-.245c.451-.532.863-.748 1.332-.404.185.135.278.313.343.543l.019.072.033.156.064.387.087-.088.147-.16.172-.202.197-.242.22-.284.23-.312.057-.067a.59.59 0 01.898.758l-.133.182-.252.334-.127.162c-.665.834-1.147 1.225-1.605 1.266-.419.037-.725-.198-.889-.556a1.83 1.83 0 01-.128-.403l-.016-.081-.08.09-.093.096c-.583.591-1.13.773-1.585.251l-.068-.084-.054-.08a1.31 1.31 0 01-.128-.29l-.011-.04-.098.082-.152.112c-.568.398-1.28.616-2.126.645l-.2.003-.167-.005a1.862 1.862 0 01-.843-.253l-.016-.01-.077.046-.256.137a6.378 6.378 0 01-.8.342l-.222.072-.078.018a.59.59 0 01-.267-1.145 5.16 5.16 0 00.806-.324l.15-.08-.043-.116-.056-.188c-.133-.511-.144-1.121-.036-1.775l.031-.17.038-.181zm2.617-.347c.422-.975.323-1.52.004-1.52-.545 0-1.255 1.006-1.502 2.273-.09.462-.108.86-.061 1.178l.025.14.082-.07.197-.186a5.84 5.84 0 001.1-1.488l.091-.185.064-.142z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\nexport default React.forwardRef(IconDocumentSigned);\n"],"names":["IconDocumentSigned","props","svgRef","React","fill","xmlns","viewBox","ref","fillRule","clipRule","d"],"mappings":";;AACA,SAASA,kBAAkBA,CAACC,KAAoC,EAAEC,MAAiC;EAC/F,oBACIC;IAAKC,IAAI,EAAC,MAAM;IAACC,KAAK,EAAC,4BAA4B;IAACC,OAAO,EAAC,WAAW;IAACC,GAAG,EAAEL;KAAYD,KAAK,gBAC1FE;IACIK,QAAQ,EAAC,SAAS;IAClBC,QAAQ,EAAC,SAAS;IAClBC,CAAC,EAAC,68CAA68C;IAC/8CN,IAAI,EAAC;IACP,CACA;AAEd;AACA,kCAAeD,UAAgB,CAACH,kBAAkB,CAAC;;;;"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { forwardRef, createElement } from 'react';
|
|
2
|
+
|
|
3
|
+
function IconHome2(props, svgRef) {
|
|
4
|
+
return /*#__PURE__*/createElement("svg", Object.assign({
|
|
5
|
+
fill: "none",
|
|
6
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
7
|
+
viewBox: "0 0 24 24",
|
|
8
|
+
ref: svgRef
|
|
9
|
+
}, props), /*#__PURE__*/createElement("path", {
|
|
10
|
+
fillRule: "evenodd",
|
|
11
|
+
clipRule: "evenodd",
|
|
12
|
+
d: "M11.116 2.823a1.25 1.25 0 011.768 0L17.25 7.19V6a.75.75 0 011.5 0v2.69l2.78 2.78a.75.75 0 01-1.06 1.06l-2.994-2.993-.013-.013L12 4.061l-8.47 8.47a.75.75 0 01-1.06-1.061l8.646-8.647zm1.768 3.25l7 7c.234.235.366.553.366.884v6.293c0 .69-.56 1.25-1.25 1.25h-4c-.69 0-1.25-.56-1.25-1.25V16.5h-3.5v3.75c0 .69-.56 1.25-1.25 1.25H5c-.69 0-1.25-.56-1.25-1.25v-6.293c0-.332.132-.65.366-.884l7-7a1.25 1.25 0 011.768 0zM12 7.311l-6.75 6.75V20h3.5v-3.75c0-.69.56-1.25 1.25-1.25h4c.69 0 1.25.56 1.25 1.25V20h3.5v-5.94L12 7.31z",
|
|
13
|
+
fill: "currentColor"
|
|
14
|
+
}));
|
|
15
|
+
}
|
|
16
|
+
var Home2 = /*#__PURE__*/forwardRef(IconHome2);
|
|
17
|
+
|
|
18
|
+
export default Home2;
|
|
19
|
+
//# sourceMappingURL=Home2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Home2.js","sources":["../../../../../../../../src/components/Icon/components/Home2.tsx"],"sourcesContent":["import * as React from 'react';\nfunction IconHome2(props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>): JSX.Element {\n return (\n <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" ref={svgRef} {...props}>\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M11.116 2.823a1.25 1.25 0 011.768 0L17.25 7.19V6a.75.75 0 011.5 0v2.69l2.78 2.78a.75.75 0 01-1.06 1.06l-2.994-2.993-.013-.013L12 4.061l-8.47 8.47a.75.75 0 01-1.06-1.061l8.646-8.647zm1.768 3.25l7 7c.234.235.366.553.366.884v6.293c0 .69-.56 1.25-1.25 1.25h-4c-.69 0-1.25-.56-1.25-1.25V16.5h-3.5v3.75c0 .69-.56 1.25-1.25 1.25H5c-.69 0-1.25-.56-1.25-1.25v-6.293c0-.332.132-.65.366-.884l7-7a1.25 1.25 0 011.768 0zM12 7.311l-6.75 6.75V20h3.5v-3.75c0-.69.56-1.25 1.25-1.25h4c.69 0 1.25.56 1.25 1.25V20h3.5v-5.94L12 7.31z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\nexport default React.forwardRef(IconHome2);\n"],"names":["IconHome2","props","svgRef","React","fill","xmlns","viewBox","ref","fillRule","clipRule","d"],"mappings":";;AACA,SAASA,SAASA,CAACC,KAAoC,EAAEC,MAAiC;EACtF,oBACIC;IAAKC,IAAI,EAAC,MAAM;IAACC,KAAK,EAAC,4BAA4B;IAACC,OAAO,EAAC,WAAW;IAACC,GAAG,EAAEL;KAAYD,KAAK,gBAC1FE;IACIK,QAAQ,EAAC,SAAS;IAClBC,QAAQ,EAAC,SAAS;IAClBC,CAAC,EAAC,kgBAAkgB;IACpgBN,IAAI,EAAC;IACP,CACA;AAEd;AACA,yBAAeD,UAAgB,CAACH,SAAS,CAAC;;;;"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { forwardRef, createElement } from 'react';
|
|
2
|
+
|
|
3
|
+
function IconId(props, svgRef) {
|
|
4
|
+
return /*#__PURE__*/createElement("svg", Object.assign({
|
|
5
|
+
fill: "none",
|
|
6
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
7
|
+
viewBox: "0 0 24 24",
|
|
8
|
+
ref: svgRef
|
|
9
|
+
}, props), /*#__PURE__*/createElement("path", {
|
|
10
|
+
fillRule: "evenodd",
|
|
11
|
+
clipRule: "evenodd",
|
|
12
|
+
d: "M20.25 5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0120.25 19H3.75A1.75 1.75 0 012 17.25V6.75C2 5.784 2.784 5 3.75 5h16.5zm0 1.5H3.75a.25.25 0 00-.243.193L3.5 6.75v10.5a.25.25 0 00.193.243l.057.007h16.5a.25.25 0 00.243-.193l.007-.057V6.75a.25.25 0 00-.193-.243L20.25 6.5zm-9.268 7.993c-.316-1.81-1.31-2.714-2.982-2.714-1.673 0-2.667.905-2.982 2.714a1.204 1.204 0 001.184 1.41h3.595a1.204 1.204 0 001.185-1.41zM8 8c.76 0 1.374.77 1.374 1.718 0 .949-.615 1.718-1.374 1.718-.759 0-1.374-.77-1.374-1.718C6.626 8.769 7.24 8 8 8zm11 .75a.75.75 0 00-.75-.75h-6a.75.75 0 000 1.5h6a.75.75 0 00.75-.75zM18.25 14a.75.75 0 010 1.5h-4.5a.75.75 0 010-1.5h4.5zm.75-2.25a.75.75 0 00-.75-.75h-4.5a.75.75 0 000 1.5h4.5a.75.75 0 00.75-.75z",
|
|
13
|
+
fill: "currentColor"
|
|
14
|
+
}));
|
|
15
|
+
}
|
|
16
|
+
var Id = /*#__PURE__*/forwardRef(IconId);
|
|
17
|
+
|
|
18
|
+
export default Id;
|
|
19
|
+
//# sourceMappingURL=Id.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Id.js","sources":["../../../../../../../../src/components/Icon/components/Id.tsx"],"sourcesContent":["import * as React from 'react';\nfunction IconId(props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>): JSX.Element {\n return (\n <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" ref={svgRef} {...props}>\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M20.25 5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0120.25 19H3.75A1.75 1.75 0 012 17.25V6.75C2 5.784 2.784 5 3.75 5h16.5zm0 1.5H3.75a.25.25 0 00-.243.193L3.5 6.75v10.5a.25.25 0 00.193.243l.057.007h16.5a.25.25 0 00.243-.193l.007-.057V6.75a.25.25 0 00-.193-.243L20.25 6.5zm-9.268 7.993c-.316-1.81-1.31-2.714-2.982-2.714-1.673 0-2.667.905-2.982 2.714a1.204 1.204 0 001.184 1.41h3.595a1.204 1.204 0 001.185-1.41zM8 8c.76 0 1.374.77 1.374 1.718 0 .949-.615 1.718-1.374 1.718-.759 0-1.374-.77-1.374-1.718C6.626 8.769 7.24 8 8 8zm11 .75a.75.75 0 00-.75-.75h-6a.75.75 0 000 1.5h6a.75.75 0 00.75-.75zM18.25 14a.75.75 0 010 1.5h-4.5a.75.75 0 010-1.5h4.5zm.75-2.25a.75.75 0 00-.75-.75h-4.5a.75.75 0 000 1.5h4.5a.75.75 0 00.75-.75z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\nexport default React.forwardRef(IconId);\n"],"names":["IconId","props","svgRef","React","fill","xmlns","viewBox","ref","fillRule","clipRule","d"],"mappings":";;AACA,SAASA,MAAMA,CAACC,KAAoC,EAAEC,MAAiC;EACnF,oBACIC;IAAKC,IAAI,EAAC,MAAM;IAACC,KAAK,EAAC,4BAA4B;IAACC,OAAO,EAAC,WAAW;IAACC,GAAG,EAAEL;KAAYD,KAAK,gBAC1FE;IACIK,QAAQ,EAAC,SAAS;IAClBC,QAAQ,EAAC,SAAS;IAClBC,CAAC,EAAC,mtBAAmtB;IACrtBN,IAAI,EAAC;IACP,CACA;AAEd;AACA,sBAAeD,UAAgB,CAACH,MAAM,CAAC;;;;"}
|