@economic/taco 1.23.1 → 1.25.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (182) hide show
  1. package/dist/components/Button/Button.d.ts +13 -0
  2. package/dist/components/Dialog/Dialog.d.ts +1 -1
  3. package/dist/components/Dialog/components/DialogDrawer.d.ts +10 -0
  4. package/dist/components/Drawer/Context.d.ts +18 -0
  5. package/dist/components/Drawer/Drawer.d.ts +51 -0
  6. package/dist/components/Drawer/components/Content.d.ts +53 -0
  7. package/dist/components/Drawer/components/Trigger.d.ts +3 -0
  8. package/dist/components/Drawer/images.d.ts +1 -0
  9. package/dist/components/Drawer/types.d.ts +2 -0
  10. package/dist/components/Drawer/util.d.ts +7 -0
  11. package/dist/components/Header/Header.d.ts +28 -0
  12. package/dist/components/Header/components/AgreementSelector.d.ts +18 -0
  13. package/dist/components/Header/components/Agreements/AgreementDetails.d.ts +20 -0
  14. package/dist/components/Header/components/Button.d.ts +11 -0
  15. package/dist/components/Header/components/Link.d.ts +21 -0
  16. package/dist/components/Header/components/Logo.d.ts +3 -0
  17. package/dist/components/Header/components/MenuButton.d.ts +5 -0
  18. package/dist/components/Header/components/PrimaryNavigation.d.ts +3 -0
  19. package/dist/components/Header/components/SecondaryNavigation.d.ts +3 -0
  20. package/dist/components/Layout/Layout.d.ts +16 -0
  21. package/dist/components/Layout/components/Content.d.ts +3 -0
  22. package/dist/components/Layout/components/Context.d.ts +6 -0
  23. package/dist/components/Layout/components/Page.d.ts +3 -0
  24. package/dist/components/Layout/components/Sidebar.d.ts +3 -0
  25. package/dist/components/Layout/components/Top.d.ts +7 -0
  26. package/dist/components/Navigation2/Navigation2.d.ts +17 -0
  27. package/dist/components/Navigation2/components/Content.d.ts +3 -0
  28. package/dist/components/Navigation2/components/Group.d.ts +9 -0
  29. package/dist/components/Navigation2/components/Link.d.ts +24 -0
  30. package/dist/components/Navigation2/components/Section.d.ts +7 -0
  31. package/dist/components/Navigation2/components/util.d.ts +1 -0
  32. package/dist/components/Provider/Localization.d.ts +32 -16
  33. package/dist/esm/packages/taco/src/components/Button/Button.js +2 -0
  34. package/dist/esm/packages/taco/src/components/Button/Button.js.map +1 -1
  35. package/dist/esm/packages/taco/src/components/Button/util.js +5 -0
  36. package/dist/esm/packages/taco/src/components/Button/util.js.map +1 -1
  37. package/dist/esm/packages/taco/src/components/Card/Card.js +1 -1
  38. package/dist/esm/packages/taco/src/components/Card/Card.js.map +1 -1
  39. package/dist/esm/packages/taco/src/components/Dialog/Dialog.js +3 -3
  40. package/dist/esm/packages/taco/src/components/Dialog/Dialog.js.map +1 -1
  41. package/dist/esm/packages/taco/src/components/Dialog/components/{Drawer.js → DialogDrawer.js} +4 -4
  42. package/dist/esm/packages/taco/src/components/Dialog/components/DialogDrawer.js.map +1 -0
  43. package/dist/esm/packages/taco/src/components/Drawer/Context.js +19 -0
  44. package/dist/esm/packages/taco/src/components/Drawer/Context.js.map +1 -0
  45. package/dist/esm/packages/taco/src/components/Drawer/Drawer.js +102 -0
  46. package/dist/esm/packages/taco/src/components/Drawer/Drawer.js.map +1 -0
  47. package/dist/esm/packages/taco/src/components/Drawer/components/Content.js +292 -0
  48. package/dist/esm/packages/taco/src/components/Drawer/components/Content.js.map +1 -0
  49. package/dist/esm/packages/taco/src/components/Drawer/components/Trigger.js +12 -0
  50. package/dist/esm/packages/taco/src/components/Drawer/components/Trigger.js.map +1 -0
  51. package/dist/esm/packages/taco/src/components/Drawer/util.js +37 -0
  52. package/dist/esm/packages/taco/src/components/Drawer/util.js.map +1 -0
  53. package/dist/esm/packages/taco/src/components/Header/Header.js +30 -0
  54. package/dist/esm/packages/taco/src/components/Header/Header.js.map +1 -0
  55. package/dist/esm/packages/taco/src/components/Header/components/AgreementSelector.js +136 -0
  56. package/dist/esm/packages/taco/src/components/Header/components/AgreementSelector.js.map +1 -0
  57. package/dist/esm/packages/taco/src/components/Header/components/Agreements/AgreementDetails.js +73 -0
  58. package/dist/esm/packages/taco/src/components/Header/components/Agreements/AgreementDetails.js.map +1 -0
  59. package/dist/esm/packages/taco/src/components/Header/components/Button.js +24 -0
  60. package/dist/esm/packages/taco/src/components/Header/components/Button.js.map +1 -0
  61. package/dist/esm/packages/taco/src/components/Header/components/Link.js +49 -0
  62. package/dist/esm/packages/taco/src/components/Header/components/Link.js.map +1 -0
  63. package/dist/esm/packages/taco/src/components/Header/components/Logo.js +73 -0
  64. package/dist/esm/packages/taco/src/components/Header/components/Logo.js.map +1 -0
  65. package/dist/esm/packages/taco/src/components/Header/components/MenuButton.js +17 -0
  66. package/dist/esm/packages/taco/src/components/Header/components/MenuButton.js.map +1 -0
  67. package/dist/esm/packages/taco/src/components/Header/components/PrimaryNavigation.js +134 -0
  68. package/dist/esm/packages/taco/src/components/Header/components/PrimaryNavigation.js.map +1 -0
  69. package/dist/esm/packages/taco/src/components/Header/components/SecondaryNavigation.js +13 -0
  70. package/dist/esm/packages/taco/src/components/Header/components/SecondaryNavigation.js.map +1 -0
  71. package/dist/esm/packages/taco/src/components/Layout/Layout.js +28 -0
  72. package/dist/esm/packages/taco/src/components/Layout/Layout.js.map +1 -0
  73. package/dist/esm/packages/taco/src/components/Layout/components/Content.js +13 -0
  74. package/dist/esm/packages/taco/src/components/Layout/components/Content.js.map +1 -0
  75. package/dist/esm/packages/taco/src/components/Layout/components/Context.js +9 -0
  76. package/dist/esm/packages/taco/src/components/Layout/components/Context.js.map +1 -0
  77. package/dist/esm/packages/taco/src/components/Layout/components/Page.js +13 -0
  78. package/dist/esm/packages/taco/src/components/Layout/components/Page.js.map +1 -0
  79. package/dist/esm/packages/taco/src/components/Layout/components/Sidebar.js +83 -0
  80. package/dist/esm/packages/taco/src/components/Layout/components/Sidebar.js.map +1 -0
  81. package/dist/esm/packages/taco/src/components/Layout/components/Top.js +15 -0
  82. package/dist/esm/packages/taco/src/components/Layout/components/Top.js.map +1 -0
  83. package/dist/esm/packages/taco/src/components/Menu/Menu.js +2 -2
  84. package/dist/esm/packages/taco/src/components/Menu/components/Content.js +1 -1
  85. package/dist/esm/packages/taco/src/components/Menu/components/Header.js +1 -1
  86. package/dist/esm/packages/taco/src/components/Menu/components/Item.js +1 -1
  87. package/dist/esm/packages/taco/src/components/Menu/components/Link.js +1 -1
  88. package/dist/esm/packages/taco/src/components/Menu/components/Trigger.js +1 -1
  89. package/dist/esm/packages/taco/src/components/Navigation2/Navigation2.js +31 -0
  90. package/dist/esm/packages/taco/src/components/Navigation2/Navigation2.js.map +1 -0
  91. package/dist/esm/packages/taco/src/components/Navigation2/components/Content.js +20 -0
  92. package/dist/esm/packages/taco/src/components/Navigation2/components/Content.js.map +1 -0
  93. package/dist/esm/packages/taco/src/components/Navigation2/components/Group.js +46 -0
  94. package/dist/esm/packages/taco/src/components/Navigation2/components/Group.js.map +1 -0
  95. package/dist/esm/packages/taco/src/components/Navigation2/components/Link.js +72 -0
  96. package/dist/esm/packages/taco/src/components/Navigation2/components/Link.js.map +1 -0
  97. package/dist/esm/packages/taco/src/components/Navigation2/components/Section.js +25 -0
  98. package/dist/esm/packages/taco/src/components/Navigation2/components/Section.js.map +1 -0
  99. package/dist/esm/packages/taco/src/components/Navigation2/components/util.js +12 -0
  100. package/dist/esm/packages/taco/src/components/Navigation2/components/util.js.map +1 -0
  101. package/dist/esm/packages/taco/src/components/Provider/Localization.js +20 -10
  102. package/dist/esm/packages/taco/src/components/Provider/Localization.js.map +1 -1
  103. package/dist/esm/packages/taco/src/components/SearchInput/SearchInput.js +4 -1
  104. package/dist/esm/packages/taco/src/components/SearchInput/SearchInput.js.map +1 -1
  105. package/dist/esm/packages/taco/src/components/Select2/components/Edit.js +1 -1
  106. package/dist/esm/packages/taco/src/components/Select2/components/Trigger.js +1 -1
  107. package/dist/esm/packages/taco/src/components/Table/util/renderRow.js +1 -1
  108. package/dist/esm/packages/taco/src/components/Table2/components/EditModeButton.js +1 -1
  109. package/dist/esm/packages/taco/src/components/Table2/components/Search.js +1 -1
  110. package/dist/esm/packages/taco/src/components/Table2/components/filters/FiltersButton.js +1 -1
  111. package/dist/esm/packages/taco/src/hooks/useBoundaryOverflowDetection.js +3 -1
  112. package/dist/esm/packages/taco/src/hooks/useBoundaryOverflowDetection.js.map +1 -1
  113. package/dist/esm/packages/taco/src/hooks/useIsLargeScreen.js +6 -0
  114. package/dist/esm/packages/taco/src/hooks/useIsLargeScreen.js.map +1 -0
  115. package/dist/esm/packages/taco/src/hooks/useMatchMedia.js +18 -0
  116. package/dist/esm/packages/taco/src/hooks/useMatchMedia.js.map +1 -0
  117. package/dist/esm/packages/taco/src/index.js +11 -1
  118. package/dist/esm/packages/taco/src/index.js.map +1 -1
  119. package/dist/esm/packages/taco/src/primitives/Collection/Collection.js +3 -0
  120. package/dist/esm/packages/taco/src/primitives/Collection/Collection.js.map +1 -0
  121. package/dist/esm/packages/taco/src/primitives/Collection/components/Root.js +4 -1
  122. package/dist/esm/packages/taco/src/primitives/Collection/components/Root.js.map +1 -1
  123. package/dist/esm/packages/taco/src/primitives/Listbox2/components/Root.js +1 -0
  124. package/dist/esm/packages/taco/src/primitives/Listbox2/components/Root.js.map +1 -1
  125. package/dist/esm/packages/taco/src/utils/hooks/useDraggable.js +8 -1
  126. package/dist/esm/packages/taco/src/utils/hooks/useDraggable.js.map +1 -1
  127. package/dist/hooks/useIsLargeScreen.d.ts +1 -0
  128. package/dist/hooks/useMatchMedia.d.ts +1 -0
  129. package/dist/index.d.ts +8 -0
  130. package/dist/taco.cjs.development.js +1981 -737
  131. package/dist/taco.cjs.development.js.map +1 -1
  132. package/dist/taco.cjs.production.min.js +1 -1
  133. package/dist/taco.cjs.production.min.js.map +1 -1
  134. package/package.json +3 -2
  135. package/tailwind.config.js +1 -0
  136. package/types.json +936 -182
  137. package/dist/components/Accordion/Accordion.stories.d.ts +0 -26
  138. package/dist/components/Alert/Alert.stories.d.ts +0 -36
  139. package/dist/components/AlertDialog/AlertDialog.stories.d.ts +0 -10
  140. package/dist/components/Backdrop/Backdrop.stories.d.ts +0 -7
  141. package/dist/components/BadgeIcon/BadgeIcon.stories.d.ts +0 -12
  142. package/dist/components/Banner/Banner.stories.d.ts +0 -5
  143. package/dist/components/Button/Button.stories.d.ts +0 -77
  144. package/dist/components/Calendar/Calendar.stories.d.ts +0 -13
  145. package/dist/components/Card/Card.stories.d.ts +0 -12
  146. package/dist/components/Datepicker/Datepicker.stories.d.ts +0 -43
  147. package/dist/components/Dialog/Dialog.stories.d.ts +0 -57
  148. package/dist/components/Dialog/components/Drawer.d.ts +0 -10
  149. package/dist/components/Field/Field.stories.d.ts +0 -14
  150. package/dist/components/Form/Form.stories.d.ts +0 -14
  151. package/dist/components/Group/Group.stories.d.ts +0 -23
  152. package/dist/components/Hanger/Hanger.stories.d.ts +0 -11
  153. package/dist/components/HoverCard/HoverCard.stories.d.ts +0 -16
  154. package/dist/components/Icon/Icon.stories.d.ts +0 -8
  155. package/dist/components/IconButton/IconButton.stories.d.ts +0 -12
  156. package/dist/components/Input/Input.stories.d.ts +0 -17
  157. package/dist/components/Listbox/Listbox.stories.d.ts +0 -44
  158. package/dist/components/Menu/Menu.stories.d.ts +0 -73
  159. package/dist/components/Navigation/Navigation.stories.d.ts +0 -7
  160. package/dist/components/Pagination/Pagination.stories.d.ts +0 -28
  161. package/dist/components/Popover/Popover.stories.d.ts +0 -29
  162. package/dist/components/Progress/Progress.stories.d.ts +0 -9
  163. package/dist/components/RadioGroup/RadioGroup.stories.d.ts +0 -49
  164. package/dist/components/ScrollArea/ScrollArea.stories.d.ts +0 -8
  165. package/dist/components/SearchInput/SearchInput.stories.d.ts +0 -38
  166. package/dist/components/Select/Select.stories.d.ts +0 -35
  167. package/dist/components/Select2/Select2.stories.d.ts +0 -57
  168. package/dist/components/Spinner/Spinner.stories.d.ts +0 -15
  169. package/dist/components/Table/Table.stories.d.ts +0 -32
  170. package/dist/components/Table2/Table2.stories.d.ts +0 -48
  171. package/dist/components/Tabs/Tabs.stories.d.ts +0 -19
  172. package/dist/components/Tag/Tag.stories.d.ts +0 -9
  173. package/dist/components/Textarea/Textarea.stories.d.ts +0 -40
  174. package/dist/components/Toast/Toast.stories.d.ts +0 -12
  175. package/dist/components/Tooltip/Tooltip.stories.d.ts +0 -26
  176. package/dist/components/Tour/Tour.stories.d.ts +0 -11
  177. package/dist/css/Typography.stories.d.ts +0 -6
  178. package/dist/esm/packages/taco/src/components/Dialog/components/Drawer.js.map +0 -1
  179. package/dist/hooks/useIsRefOverflowing.d.ts +0 -2
  180. package/dist/primitives/Collection/Collection.stories.d.ts +0 -8
  181. package/dist/primitives/Listbox2/Listbox2.stories.d.ts +0 -16
  182. package/dist/primitives/Sortable/Sortable.stories.d.ts +0 -14
@@ -0,0 +1,292 @@
1
+ import React__default from 'react';
2
+ import cn from 'classnames';
3
+ import { Backdrop } from '../../Backdrop/Backdrop.js';
4
+ import { IconButton } from '../../IconButton/IconButton.js';
5
+ import { useLocalization } from '../../Provider/Localization.js';
6
+ import { useMergedRef } from '../../../hooks/useMergedRef.js';
7
+ import { Title as Title$1, Close as Close$1, Portal as Portal$1, Overlay, Content as Content$1 } from '@radix-ui/react-dialog';
8
+ import { useDraggable } from '../../../utils/hooks/useDraggable.js';
9
+ import { Group } from '../../Group/Group.js';
10
+ import { useCurrentMenu } from '../../Menu/Context.js';
11
+ import { useCurrentDrawer } from '../Context.js';
12
+ import { getBackdropClassNames, getDrawerContainerClassNames, getDrawerContentClassNames, getDrawerDragHandlerClassNames } from '../util.js';
13
+ import { useGlobalKeyboardShortcut } from '../../../hooks/useGlobalKeyboardShortcut.js';
14
+ import { FocusScope } from '@react-aria/focus';
15
+ import { ScrollArea } from '../../ScrollArea/ScrollArea.js';
16
+
17
+ const RESIZE_MIN = 360;
18
+ const RESIZE_MAX = 1000;
19
+ var DrawerAnimationDefinition;
20
+ (function (DrawerAnimationDefinition) {
21
+ DrawerAnimationDefinition["Visible"] = "visible";
22
+ DrawerAnimationDefinition["Hidden"] = "hidden";
23
+ })(DrawerAnimationDefinition || (DrawerAnimationDefinition = {}));
24
+ const RenderPropWrapper = /*#__PURE__*/React__default.forwardRef(function RenderPropWrapper({
25
+ children,
26
+ onClick,
27
+ renderProps
28
+ }, ref) {
29
+ const close = () => {
30
+ onClick(new CustomEvent('close'));
31
+ };
32
+ return children({
33
+ close,
34
+ ref,
35
+ ...renderProps
36
+ });
37
+ });
38
+ const Title = /*#__PURE__*/React__default.forwardRef(function DrawerTitle(props, ref) {
39
+ const {
40
+ className,
41
+ children,
42
+ ...otherProps
43
+ } = props;
44
+ /**
45
+ * 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 rendedr with using of classNames,
47
+ * so it can be easily overriden in exceptional scenarious.
48
+ * */
49
+ const cName = cn('grow-0 py-4 pl-4 justyfy-self-start mb-0 border-b-[1px] border-grey-300', className);
50
+ return /*#__PURE__*/React__default.createElement(Title$1, Object.assign({
51
+ className: cName
52
+ }, otherProps, {
53
+ ref: ref
54
+ }), /*#__PURE__*/React__default.createElement("span", {
55
+ className: "line-clamp-2 inline-block w-4/6 overflow-y-hidden"
56
+ }, children));
57
+ });
58
+ const Footer = /*#__PURE__*/React__default.forwardRef(function DrawerFooter(props, ref) {
59
+ const {
60
+ className,
61
+ ...otherProps
62
+ } = props;
63
+ /**
64
+ * The same scenario as Title, grey separator rendered using classNames to have posibility to override it.
65
+ */
66
+ const cName = cn('mt-auto flex justify-end grow-0 p-4 border-t-[1px] border-grey-300', props.className);
67
+ return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
68
+ className: cName,
69
+ ref: ref
70
+ }));
71
+ });
72
+ const Actions = /*#__PURE__*/React__default.forwardRef(function Actions(props, ref) {
73
+ const {
74
+ className,
75
+ ...otherProps
76
+ } = props;
77
+ const cName = cn('absolute top-0 right-10 mr-[8px] mt-4', className);
78
+ return /*#__PURE__*/React__default.createElement(Group, Object.assign({}, otherProps, {
79
+ className: cName,
80
+ ref: ref
81
+ }));
82
+ });
83
+ const Close = /*#__PURE__*/React__default.forwardRef(function DrawerClose(props, ref) {
84
+ const {
85
+ onClose
86
+ } = useCurrentDrawer();
87
+ return /*#__PURE__*/React__default.createElement(Close$1, Object.assign({}, props, {
88
+ onClick: onClose,
89
+ ref: ref,
90
+ asChild: true
91
+ }));
92
+ });
93
+ const InnerContent = /*#__PURE__*/React__default.forwardRef(function InnerContent(props, ref) {
94
+ const {
95
+ className,
96
+ isScrollable = true,
97
+ children,
98
+ ...otherProps
99
+ } = props;
100
+ const cName = cn('grow-1 p-4', className);
101
+ return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
102
+ className: cName,
103
+ ref: ref
104
+ }), isScrollable ? /*#__PURE__*/React__default.createElement(ScrollArea, {
105
+ className: "w-full gap-y-0.5"
106
+ }, children) : {
107
+ children
108
+ });
109
+ });
110
+ const Portal = props => {
111
+ const {
112
+ children,
113
+ ...otherProps
114
+ } = props;
115
+ const {
116
+ open = false,
117
+ variant,
118
+ outlet
119
+ } = useCurrentDrawer();
120
+ const backdropClassNames = React__default.useMemo(() => {
121
+ return getBackdropClassNames(open);
122
+ }, [open]);
123
+ if (!outlet) {
124
+ return null;
125
+ }
126
+ return /*#__PURE__*/React__default.createElement(Portal$1, Object.assign({}, otherProps, {
127
+ container: outlet !== null && outlet !== void 0 ? outlet : undefined
128
+ }), variant === 'overlay' ? /*#__PURE__*/React__default.createElement(Overlay, {
129
+ forceMount: true
130
+ }, /*#__PURE__*/React__default.createElement(Backdrop, {
131
+ className: backdropClassNames
132
+ })) : null, children);
133
+ };
134
+ const UntrappedFocusDrawerContent = /*#__PURE__*/React__default.forwardRef(function EmbeddedDrawerContent(props, ref) {
135
+ const {
136
+ onEscape,
137
+ children,
138
+ ...otherProps
139
+ } = props;
140
+ useGlobalKeyboardShortcut(event => {
141
+ if (event.key === 'Escape') {
142
+ onEscape(event);
143
+ }
144
+ });
145
+ return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
146
+ ref: ref
147
+ }), /*#__PURE__*/React__default.createElement(FocusScope, {
148
+ autoFocus: true,
149
+ restoreFocus: true
150
+ }, children));
151
+ });
152
+ const DrawerContent = /*#__PURE__*/React__default.forwardRef(function Content(props, externalRef) {
153
+ const {
154
+ size,
155
+ onClose,
156
+ onResize,
157
+ open = false,
158
+ closeOnEscape,
159
+ variant,
160
+ focusTrap,
161
+ showCloseButton,
162
+ setOpen
163
+ } = useCurrentDrawer();
164
+ const {
165
+ className,
166
+ style,
167
+ children,
168
+ ...otherProps
169
+ } = props;
170
+ const {
171
+ texts
172
+ } = useLocalization();
173
+ const ref = useMergedRef(externalRef);
174
+ // if the drawer was opened by a menu, we need to close the menu when the drawer closes
175
+ // the menu is still open (and mounted) because it is the trigger for the drawer
176
+ const menu = useCurrentMenu();
177
+ let handleCloseAutoFocus;
178
+ if (menu) {
179
+ handleCloseAutoFocus = () => {
180
+ menu.close();
181
+ };
182
+ }
183
+ const containerClassName = React__default.useMemo(() => cn(getDrawerContainerClassNames(variant), className), [className]);
184
+ const {
185
+ contentClassName,
186
+ dragHandlerClassName
187
+ } = React__default.useMemo(() => {
188
+ const contentClassName = getDrawerContentClassNames(size, variant, open);
189
+ const dragHandlerClassName = getDrawerDragHandlerClassNames();
190
+ return {
191
+ contentClassName,
192
+ dragHandlerClassName
193
+ };
194
+ }, [size, variant, open]);
195
+ const handleEscapeKeyDown = event => {
196
+ var _ref$current;
197
+ const isTargetInsideDrawerContent = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.contains(event.target);
198
+ if (isTargetInsideDrawerContent) {
199
+ if (!closeOnEscape) {
200
+ event.preventDefault();
201
+ } else {
202
+ setOpen && setOpen(false);
203
+ if (onClose) {
204
+ onClose();
205
+ }
206
+ }
207
+ }
208
+ };
209
+ const [containerWidth, setContainerWidth] = React__default.useState();
210
+ const dragHandlerRef = React__default.useRef(null);
211
+ const {
212
+ position,
213
+ dragging,
214
+ handleProps: dragHandleProps,
215
+ resetPosition
216
+ } = useDraggable(useMergedRef(dragHandlerRef));
217
+ const contentRef = React__default.useRef(null);
218
+ React__default.useEffect(() => {
219
+ if (onResize) {
220
+ onResize(position.x);
221
+ }
222
+ }, [position]);
223
+ React__default.useEffect(() => {
224
+ var _contentRef$current;
225
+ setContainerWidth((_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.offsetWidth);
226
+ }, [contentRef, open]);
227
+ const resizedWidth = React__default.useMemo(() => {
228
+ if (containerWidth) {
229
+ return Math.min(RESIZE_MAX, Math.max(RESIZE_MIN, containerWidth - position.x || 0));
230
+ }
231
+ return;
232
+ }, [containerWidth, position]);
233
+ React__default.useEffect(() => {
234
+ if (!dragging && resizedWidth) {
235
+ setContainerWidth(resizedWidth);
236
+ resetPosition();
237
+ }
238
+ }, [dragging]);
239
+ let output;
240
+ if (typeof children === 'function') {
241
+ output = /*#__PURE__*/React__default.createElement(Close, null, /*#__PURE__*/React__default.createElement(RenderPropWrapper, null, children));
242
+ } else {
243
+ output = children;
244
+ }
245
+ const content = /*#__PURE__*/React__default.createElement("div", {
246
+ ref: contentRef,
247
+ "data-taco": "drawer",
248
+ className: containerClassName
249
+ }, /*#__PURE__*/React__default.createElement("div", Object.assign({
250
+ className: dragHandlerClassName
251
+ }, dragHandleProps, {
252
+ "data-testid": "resize-handler",
253
+ ref: dragHandlerRef
254
+ })), output, showCloseButton ? /*#__PURE__*/React__default.createElement(Close, null, /*#__PURE__*/React__default.createElement(IconButton, {
255
+ appearance: "discrete",
256
+ "aria-label": texts.drawer.close,
257
+ className: "absolute top-0 right-0 mt-4 mr-2",
258
+ icon: "close"
259
+ })) : null);
260
+ const styleProp = {
261
+ ...style,
262
+ ...{
263
+ width: resizedWidth
264
+ }
265
+ };
266
+ return focusTrap ? /*#__PURE__*/React__default.createElement(Content$1, Object.assign({
267
+ forceMount: true
268
+ }, otherProps, {
269
+ className: contentClassName,
270
+ onEscapeKeyDown: handleEscapeKeyDown,
271
+ onInteractOutside: variant === 'overlay' ? undefined : event => event.preventDefault(),
272
+ onCloseAutoFocus: handleCloseAutoFocus,
273
+ ref: ref,
274
+ style: styleProp
275
+ }), content) : /*#__PURE__*/React__default.createElement(UntrappedFocusDrawerContent, {
276
+ onEscape: handleEscapeKeyDown,
277
+ className: contentClassName,
278
+ style: styleProp,
279
+ ref: ref
280
+ }, content);
281
+ });
282
+ const Content = /*#__PURE__*/React__default.forwardRef(function Content(props, externalRef) {
283
+ const {
284
+ children
285
+ } = props;
286
+ return /*#__PURE__*/React__default.createElement(Portal, null, /*#__PURE__*/React__default.createElement(DrawerContent, Object.assign({}, props, {
287
+ ref: externalRef
288
+ }), children));
289
+ });
290
+
291
+ export { Actions, Close, Content, DrawerAnimationDefinition, DrawerContent, Footer, InnerContent, Title };
292
+ //# sourceMappingURL=Content.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Content.js","sources":["../../../../../../../../src/components/Drawer/components/Content.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\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 { useGlobalKeyboardShortcut } from '../../../hooks/useGlobalKeyboardShortcut';\nimport { FocusScope } from '@react-aria/focus';\nimport { ScrollArea } from '../../ScrollArea/ScrollArea';\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 justyfy-self-start mb-0 border-b-[1px] border-grey-300', 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('grow-1 p-4', className);\n return (\n <div {...otherProps} className={cName} ref={ref}>\n {isScrollable ? <ScrollArea className=\"w-full gap-y-0.5\">{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 useGlobalKeyboardShortcut((event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n onEscape(event);\n }\n });\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 <div className={dragHandlerClassName} {...dragHandleProps} data-testid=\"resize-handler\" ref={dragHandlerRef} />\n {output}\n {showCloseButton ? (\n <Close>\n <IconButton\n appearance=\"discrete\"\n aria-label={texts.drawer.close}\n className=\"absolute top-0 right-0 mt-4 mr-2\"\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","useGlobalKeyboardShortcut","event","key","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","isTargetInsideDrawerContent","current","contains","target","preventDefault","containerWidth","setContainerWidth","useState","dragHandlerRef","useRef","position","dragging","handleProps","dragHandleProps","resetPosition","useDraggable","contentRef","useEffect","x","offsetWidth","resizedWidth","Math","min","max","output","content","IconButton","appearance","drawer","icon","styleProp","width","onEscapeKeyDown","onInteractOutside","onCloseAutoFocus"],"mappings":"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"}
@@ -0,0 +1,12 @@
1
+ import { forwardRef, createElement } from 'react';
2
+ import { Trigger as Trigger$1 } from '@radix-ui/react-dialog';
3
+
4
+ const Trigger = /*#__PURE__*/forwardRef(function DrawerTrigger(props, ref) {
5
+ return /*#__PURE__*/createElement(Trigger$1, Object.assign({}, props, {
6
+ ref: ref,
7
+ asChild: true
8
+ }));
9
+ });
10
+
11
+ export { Trigger };
12
+ //# sourceMappingURL=Trigger.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Trigger.js","sources":["../../../../../../../../src/components/Drawer/components/Trigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nexport type DrawerTriggerProps = React.HTMLAttributes<HTMLButtonElement>;\n\nexport const Trigger = React.forwardRef(function DrawerTrigger(props: DrawerTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n return <DialogPrimitive.Trigger {...props} ref={ref} asChild />;\n});\n"],"names":["Trigger","React","DrawerTrigger","props","ref","DialogPrimitive","asChild"],"mappings":";;;MAIaA,OAAO,gBAAGC,UAAgB,CAAC,SAASC,aAAa,CAACC,KAAyB,EAAEC,GAAiC;EACvH,oBAAOH,cAACI,SAAuB,oBAAKF,KAAK;IAAEC,GAAG,EAAEA,GAAG;IAAEE,OAAO;KAAG;AACnE,CAAC;;;;"}
@@ -0,0 +1,37 @@
1
+ import cn from 'classnames';
2
+
3
+ const getDrawerSizeClassnames = size => {
4
+ switch (size) {
5
+ case 'lg':
6
+ return 'w-[600px]';
7
+ case 'md':
8
+ default:
9
+ return 'w-[420px]';
10
+ }
11
+ };
12
+ const getDrawerContentClassNames = (size, variant, open) => {
13
+ return cn('bg-white h-full bottom-0 top-0 right-0 transition-none', {
14
+ block: open,
15
+ hidden: !open,
16
+ fixed: variant === 'overlay',
17
+ 'relative h-full overflow-hidden': variant === 'embedded'
18
+ }, getDrawerSizeClassnames(size));
19
+ };
20
+ const getDrawerContainerClassNames = variant => {
21
+ return cn('bg-white mx-auto absolute h-full w-full flex flex-col ', {
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'
24
+ });
25
+ };
26
+ const getDrawerDragHandlerClassNames = () => {
27
+ return cn('border-[2px] absolute border-transparent top-0 w-2 h-full cursor-ew-resize left-0 hover:border-l-blue-500');
28
+ };
29
+ const getBackdropClassNames = open => {
30
+ return cn({
31
+ block: open,
32
+ hidden: !open
33
+ });
34
+ };
35
+
36
+ export { getBackdropClassNames, getDrawerContainerClassNames, getDrawerContentClassNames, getDrawerDragHandlerClassNames, getDrawerSizeClassnames };
37
+ //# sourceMappingURL=util.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"util.js","sources":["../../../../../../../src/components/Drawer/util.ts"],"sourcesContent":["import { DrawerSize, DrawerVariant } from './types';\nimport cn from 'classnames';\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,GAAG,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,6BAA6B,EAAEA,OAAO,KAAK;GAC9C,CAAC;AACN;MAEaO,8BAA8B,GAAG;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,30 @@
1
+ import React__default from 'react';
2
+ import cn from 'classnames';
3
+ import { Button } from './components/Button.js';
4
+ import { Link } from './components/Link.js';
5
+ import { Logo } from './components/Logo.js';
6
+ import { PrimaryNavigation } from './components/PrimaryNavigation.js';
7
+ import { SecondaryNavigation } from './components/SecondaryNavigation.js';
8
+ import { MenuButton } from './components/MenuButton.js';
9
+ import { AgreementDisplay, AgreementSelector } from './components/AgreementSelector.js';
10
+
11
+ const Header = /*#__PURE__*/React__default.forwardRef(function Header(props, ref) {
12
+ const className = cn('bg-blue-900 flex h-16 w-full shrink-0 items-center gap-4 pl-2', '[&>a:focus-visible]:yt-focus-dark [&>a]:px-2 [&>a]:rounded [&>a]:h-[calc(100%-14px)]',
13
+ // styles for logo wrapped inside an anchor
14
+ props.className);
15
+ return /*#__PURE__*/React__default.createElement("header", Object.assign({}, props, {
16
+ className: className,
17
+ ref: ref
18
+ }));
19
+ });
20
+ Header.AgreementDisplay = AgreementDisplay;
21
+ Header.AgreementSelector = AgreementSelector;
22
+ Header.Button = Button;
23
+ Header.Link = Link;
24
+ Header.Logo = Logo;
25
+ Header.PrimaryNavigation = PrimaryNavigation;
26
+ Header.SecondaryNavigation = SecondaryNavigation;
27
+ Header.MenuButton = MenuButton;
28
+
29
+ export { Header };
30
+ //# sourceMappingURL=Header.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Header.js","sources":["../../../../../../../src/components/Header/Header.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Button } from './components/Button';\nimport { Link } from './components/Link';\nimport { Logo } from './components/Logo';\nimport { PrimaryNavigation } from './components/PrimaryNavigation';\nimport { SecondaryNavigation } from './components/SecondaryNavigation';\nimport { MenuButton } from './components/MenuButton';\nimport { AgreementDisplay, AgreementSelector } from './components/AgreementSelector';\n\nexport type HeaderTexts = {\n addAgreement: string;\n logout: string;\n more: string;\n new: string;\n search: string;\n};\n\ntype HeaderProps = React.HTMLAttributes<HTMLElement>;\n\nexport type ForwardedHeaderWithStatics = React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLDivElement>> & {\n AgreementDisplay: typeof AgreementDisplay;\n AgreementSelector: typeof AgreementSelector;\n Button: typeof Button;\n Link: typeof Link;\n Logo: typeof Logo;\n PrimaryNavigation: typeof PrimaryNavigation;\n SecondaryNavigation: typeof SecondaryNavigation;\n MenuButton: typeof MenuButton;\n};\n\nexport const Header = React.forwardRef<HTMLDivElement, HeaderProps>(function Header(props, ref) {\n const className = cn(\n 'bg-blue-900 flex h-16 w-full shrink-0 items-center gap-4 pl-2',\n '[&>a:focus-visible]:yt-focus-dark [&>a]:px-2 [&>a]:rounded [&>a]:h-[calc(100%-14px)]', // styles for logo wrapped inside an anchor\n props.className\n );\n\n return <header {...props} className={className} ref={ref} />;\n}) as ForwardedHeaderWithStatics;\n\nHeader.AgreementDisplay = AgreementDisplay;\nHeader.AgreementSelector = AgreementSelector;\nHeader.Button = Button;\nHeader.Link = Link;\nHeader.Logo = Logo;\nHeader.PrimaryNavigation = PrimaryNavigation;\nHeader.SecondaryNavigation = SecondaryNavigation;\nHeader.MenuButton = MenuButton;\n"],"names":["Header","React","forwardRef","props","ref","className","cn","AgreementDisplay","AgreementSelector","Button","Link","Logo","PrimaryNavigation","SecondaryNavigation","MenuButton"],"mappings":";;;;;;;;;;MA+BaA,MAAM,gBAAGC,cAAK,CAACC,UAAU,CAA8B,SAASF,MAAM,CAACG,KAAK,EAAEC,GAAG;EAC1F,MAAMC,SAAS,GAAGC,EAAE,CAChB,+DAA+D,EAC/D,sFAAsF;;EACtFH,KAAK,CAACE,SAAS,CAClB;EAED,oBAAOJ,yDAAYE,KAAK;IAAEE,SAAS,EAAEA,SAAS;IAAED,GAAG,EAAEA;KAAO;AAChE,CAAC;AAEDJ,MAAM,CAACO,gBAAgB,GAAGA,gBAAgB;AAC1CP,MAAM,CAACQ,iBAAiB,GAAGA,iBAAiB;AAC5CR,MAAM,CAACS,MAAM,GAAGA,MAAM;AACtBT,MAAM,CAACU,IAAI,GAAGA,IAAI;AAClBV,MAAM,CAACW,IAAI,GAAGA,IAAI;AAClBX,MAAM,CAACY,iBAAiB,GAAGA,iBAAiB;AAC5CZ,MAAM,CAACa,mBAAmB,GAAGA,mBAAmB;AAChDb,MAAM,CAACc,UAAU,GAAGA,UAAU;;;;"}
@@ -0,0 +1,136 @@
1
+ import React__default from 'react';
2
+ import { Icon } from '../../Icon/Icon.js';
3
+ import { useLocalization } from '../../Provider/Localization.js';
4
+ import { Button } from '../../Button/Button.js';
5
+ import { Root, Trigger, Content } from '@radix-ui/react-popover';
6
+ import { createCustomKeyboardEvent } from '../../../utils/input.js';
7
+ import { useControllableState } from '@radix-ui/react-use-controllable-state';
8
+ import { SearchInput } from '../../SearchInput/SearchInput.js';
9
+ import { Root as Root$1 } from '../../../primitives/Collection/components/Root.js';
10
+ import '../../../primitives/Collection/Collection.js';
11
+ import { AgreementDetails } from './Agreements/AgreementDetails.js';
12
+
13
+ const Container = props => {
14
+ return /*#__PURE__*/React__default.createElement("div", {
15
+ className: "-ml-3 flex flex-shrink-0 flex-grow-0 items-center gap-2 xl:ml-auto xl:w-64 xl:pr-2",
16
+ "data-taco": "header-agreements"
17
+ }, /*#__PURE__*/React__default.createElement("span", {
18
+ className: "hidden h-8 w-px flex-shrink-0 flex-grow-0 bg-white/[0.3] xl:flex"
19
+ }), props.children);
20
+ };
21
+ function AgreementDisplay(props) {
22
+ const {
23
+ currentAgreement,
24
+ fallbackImageSrc
25
+ } = props;
26
+ return /*#__PURE__*/React__default.createElement(Container, null, /*#__PURE__*/React__default.createElement(AgreementDetails, Object.assign({}, currentAgreement, {
27
+ className: "h-12 [&>span>span]:hidden xl:[&>span>span]:flex ",
28
+ fallbackImageSrc: fallbackImageSrc
29
+ })));
30
+ }
31
+ function AgreementSelector(props) {
32
+ const {
33
+ agreements,
34
+ currentAgreement,
35
+ fallbackImageSrc,
36
+ filterAgreement = () => true,
37
+ filterClientAgreement = () => true,
38
+ onAddAgreement: handleAddAgreement,
39
+ onChangeAgreement,
40
+ onLogout: handleLogout,
41
+ open: prop,
42
+ setOpen: onChange
43
+ } = props;
44
+ const {
45
+ texts
46
+ } = useLocalization();
47
+ const collectionRef = React__default.useRef(null);
48
+ const [open, setOpen] = useControllableState({
49
+ onChange,
50
+ prop
51
+ });
52
+ const [search, setSearch] = React__default.useState('');
53
+ React__default.useEffect(() => {
54
+ setSearch('');
55
+ }, [open]);
56
+ const handleKeyDown = event => {
57
+ if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter') {
58
+ var _collectionRef$curren;
59
+ event.preventDefault();
60
+ (_collectionRef$curren = collectionRef.current) === null || _collectionRef$curren === void 0 ? void 0 : _collectionRef$curren.dispatchEvent(createCustomKeyboardEvent(event));
61
+ }
62
+ };
63
+ const handleChangeAgreement = agreement => {
64
+ onChangeAgreement(agreement);
65
+ setOpen(false);
66
+ };
67
+ return /*#__PURE__*/React__default.createElement(Container, null, /*#__PURE__*/React__default.createElement(Root, {
68
+ open: open,
69
+ onOpenChange: setOpen
70
+ }, /*#__PURE__*/React__default.createElement(Trigger, {
71
+ className: "xl:focus-visible:yt-focus-dark [&:focus-visible_img]:yt-focus-dark w-full rounded outline-none xl:[&:focus-visible_img]:shadow-none"
72
+ }, /*#__PURE__*/React__default.createElement(AgreementDetails, Object.assign({}, currentAgreement, {
73
+ className: "h-12 flex-grow xl:hover:bg-white/[0.16] [&>span>span]:hidden xl:[&>span>span]:flex [[aria-current='true']>&]:bg-white/[0.16]",
74
+ fallbackImageSrc: fallbackImageSrc
75
+ }), agreements ? /*#__PURE__*/React__default.createElement(Icon, {
76
+ className: "ml-auto hidden flex-shrink-0 flex-grow-0 text-white xl:flex",
77
+ name: open ? 'chevron-up' : 'chevron-down'
78
+ }) : null)), /*#__PURE__*/React__default.createElement(Content, {
79
+ className: "z-[996] mt-2 flex h-[calc(100vh_-_theme(spacing.16))] w-64 flex-col gap-1 bg-blue-900"
80
+ }, /*#__PURE__*/React__default.createElement(SearchInput, {
81
+ autoFocus: true,
82
+ className: "focus-visible:!yt-focus-dark mx-2 !border-transparent !bg-white/[0.08] !text-white hover:!bg-white/[0.16] hover:!shadow-none focus:!bg-white/[0.16] active:!bg-white/[0.16] [&+div>button]:!text-white",
83
+ onChange: event => setSearch(event.target.value),
84
+ onKeyDown: handleKeyDown,
85
+ placeholder: texts.header.search
86
+ }), /*#__PURE__*/React__default.createElement(Root$1, {
87
+ querySelector: "button",
88
+ className: "-my-1 flex w-full flex-grow flex-col gap-1 overflow-auto px-2 py-1 outline-none",
89
+ ref: collectionRef,
90
+ tabIndex: -1
91
+ }, agreements === null || agreements === void 0 ? void 0 : agreements.filter(agreement => filterAgreement(agreement, filterBySearchValue(search))).map(agreement => {
92
+ const button = createAgreementButton(agreement, fallbackImageSrc, handleChangeAgreement, isCurrentAgreement(agreement, currentAgreement));
93
+ if (agreement.clients) {
94
+ return /*#__PURE__*/React__default.createElement("span", {
95
+ className: "flex flex-col gap-px [&>*:first-child>span]:!rounded-t [&>*:last-child>span]:!rounded-b [&>*>span]:!rounded-none",
96
+ key: `${agreement.number}_${agreement.userId}_clients`
97
+ }, filterBySearchValue(search)(agreement) ? button : null, agreement.clients.filter(agreement => filterClientAgreement(agreement, filterBySearchValue(search))).map(clientAgreement => createAgreementButton(clientAgreement, fallbackImageSrc, handleChangeAgreement, isCurrentAgreement(clientAgreement, currentAgreement))));
98
+ }
99
+ return button;
100
+ })), handleAddAgreement ? /*#__PURE__*/React__default.createElement(Button, {
101
+ className: "focus-visible:!yt-focus-dark my-1 mx-2 !h-9 shrink-0 !bg-white/[0.08] !text-white hover:!bg-white/[0.16]",
102
+ onClick: handleAddAgreement
103
+ }, texts.header.addAgreement) : null, /*#__PURE__*/React__default.createElement("hr", {
104
+ className: "my-0 h-px w-full bg-white/[0.08]"
105
+ }), /*#__PURE__*/React__default.createElement("a", {
106
+ className: "focus-visible:yt-focus-dark mx-2 mb-2 flex h-8 shrink-0 items-center justify-center rounded text-white hover:cursor-pointer hover:text-white hover:underline focus-visible:outline-none",
107
+ onClick: handleLogout,
108
+ tabIndex: 0
109
+ }, texts.header.logout))));
110
+ }
111
+ const filterBySearchValue = search => agreement => {
112
+ if (!search || !search.length) {
113
+ return true;
114
+ }
115
+ const matchesAgreementNumber = String(agreement.number).indexOf(search) > -1;
116
+ const matchesCompanyName = agreement.name.toLowerCase().indexOf(search.toLowerCase()) > -1;
117
+ return matchesAgreementNumber || matchesCompanyName;
118
+ };
119
+ const isCurrentAgreement = (agreement, currentAgreement) => {
120
+ return agreement.number === currentAgreement.number && agreement.userId === currentAgreement.userId;
121
+ };
122
+ const createAgreementButton = (agreement, fallbackImageSrc, onChangeAgreement, isCurrentAgreement = false) => /*#__PURE__*/React__default.createElement("button", {
123
+ "aria-current": isCurrentAgreement ? 'true' : undefined,
124
+ className: "focus:yt-focus-dark w-full rounded outline-none",
125
+ "data-taco": "header-agreements-agreement",
126
+ key: `${agreement.number}_${agreement.userId}`,
127
+ onClick: () => onChangeAgreement(agreement),
128
+ onKeyDown: () => onChangeAgreement(agreement),
129
+ tabIndex: 0
130
+ }, /*#__PURE__*/React__default.createElement(AgreementDetails, Object.assign({}, agreement, {
131
+ className: "h-14 bg-white/[0.08] xl:hover:bg-white/[0.16] [[aria-current='true']>&]:bg-white/[0.16]",
132
+ fallbackImageSrc: fallbackImageSrc
133
+ })));
134
+
135
+ export { AgreementDisplay, AgreementSelector };
136
+ //# sourceMappingURL=AgreementSelector.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AgreementSelector.js","sources":["../../../../../../../../src/components/Header/components/AgreementSelector.tsx"],"sourcesContent":["import React from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport * as CollectionPrimitive from '../../../primitives/Collection/Collection';\nimport { Agreement, AgreementDetails } from './Agreements/AgreementDetails';\nimport { createCustomKeyboardEvent } from '../../../utils/input';\nimport { Icon } from '../../Icon/Icon';\nimport { SearchInput } from '../../SearchInput/SearchInput';\nimport { Button } from '../../Button/Button';\nimport { useLocalization } from '../../Provider/Localization';\n\nconst Container = props => {\n return (\n <div\n className=\"-ml-3 flex flex-shrink-0 flex-grow-0 items-center gap-2 xl:ml-auto xl:w-64 xl:pr-2\"\n data-taco=\"header-agreements\">\n <span className=\"hidden h-8 w-px flex-shrink-0 flex-grow-0 bg-white/[0.3] xl:flex\" />\n {props.children}\n </div>\n );\n};\n\nexport type AgreementDisplayProps = React.HTMLAttributes<HTMLDivElement> & {\n currentAgreement: Agreement;\n fallbackImageSrc: string;\n};\n\nexport function AgreementDisplay(props: AgreementDisplayProps) {\n const { currentAgreement, fallbackImageSrc } = props;\n\n return (\n <Container>\n <AgreementDetails\n {...currentAgreement}\n className=\"h-12 [&>span>span]:hidden xl:[&>span>span]:flex \"\n fallbackImageSrc={fallbackImageSrc}\n />\n </Container>\n );\n}\n\nexport type AgreementSelectorProps = AgreementDisplayProps & {\n agreements: Agreement[];\n filterAgreement: (agreement: Agreement, filter: (agreement: Agreement) => boolean) => void;\n filterClientAgreement: (agreement: Agreement, filter: (agreement: Agreement) => boolean) => void;\n onAddAgreement?: () => void;\n onChangeAgreement: (agreement: Agreement) => void;\n onLogout: () => void;\n open?: boolean;\n setOpen?: (open: boolean) => void;\n};\n\nexport function AgreementSelector(props: AgreementSelectorProps) {\n const {\n agreements,\n currentAgreement,\n fallbackImageSrc,\n filterAgreement = () => true,\n filterClientAgreement = () => true,\n onAddAgreement: handleAddAgreement,\n onChangeAgreement,\n onLogout: handleLogout,\n open: prop,\n setOpen: onChange,\n } = props;\n const { texts } = useLocalization();\n const collectionRef = React.useRef<CollectionPrimitive.CollectionRef | null>(null);\n const [open, setOpen] = useControllableState<boolean>({\n onChange,\n prop,\n });\n const [search, setSearch] = React.useState('');\n\n React.useEffect(() => {\n setSearch('');\n }, [open]);\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter') {\n event.preventDefault();\n collectionRef.current?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n }\n };\n\n const handleChangeAgreement = (agreement: Agreement) => {\n onChangeAgreement(agreement);\n setOpen(false);\n };\n\n return (\n <Container>\n <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n <PopoverPrimitive.Trigger className=\"xl:focus-visible:yt-focus-dark [&:focus-visible_img]:yt-focus-dark w-full rounded outline-none xl:[&:focus-visible_img]:shadow-none\">\n <AgreementDetails\n {...currentAgreement}\n className=\"h-12 flex-grow xl:hover:bg-white/[0.16] [&>span>span]:hidden xl:[&>span>span]:flex [[aria-current='true']>&]:bg-white/[0.16]\"\n fallbackImageSrc={fallbackImageSrc}>\n {agreements ? (\n <Icon\n className=\"ml-auto hidden flex-shrink-0 flex-grow-0 text-white xl:flex\"\n name={open ? 'chevron-up' : 'chevron-down'}\n />\n ) : null}\n </AgreementDetails>\n </PopoverPrimitive.Trigger>\n <PopoverPrimitive.Content className=\"z-[996] mt-2 flex h-[calc(100vh_-_theme(spacing.16))] w-64 flex-col gap-1 bg-blue-900\">\n <SearchInput\n autoFocus\n className=\"focus-visible:!yt-focus-dark mx-2 !border-transparent !bg-white/[0.08] !text-white hover:!bg-white/[0.16] hover:!shadow-none focus:!bg-white/[0.16] active:!bg-white/[0.16] [&+div>button]:!text-white\"\n onChange={event => setSearch(event.target.value)}\n onKeyDown={handleKeyDown}\n placeholder={texts.header.search}\n />\n <CollectionPrimitive.Root\n querySelector=\"button\"\n className=\"-my-1 flex w-full flex-grow flex-col gap-1 overflow-auto px-2 py-1 outline-none\"\n ref={collectionRef}\n tabIndex={-1}>\n {agreements\n ?.filter(agreement => filterAgreement(agreement, filterBySearchValue(search)))\n .map(agreement => {\n const button = createAgreementButton(\n agreement,\n fallbackImageSrc,\n handleChangeAgreement,\n isCurrentAgreement(agreement, currentAgreement)\n );\n\n if (agreement.clients) {\n return (\n <span\n className=\"flex flex-col gap-px [&>*:first-child>span]:!rounded-t [&>*:last-child>span]:!rounded-b [&>*>span]:!rounded-none\"\n key={`${agreement.number}_${agreement.userId}_clients`}>\n {filterBySearchValue(search)(agreement) ? button : null}\n {agreement.clients\n .filter(agreement =>\n filterClientAgreement(agreement, filterBySearchValue(search))\n )\n .map(clientAgreement =>\n createAgreementButton(\n clientAgreement,\n fallbackImageSrc,\n handleChangeAgreement,\n isCurrentAgreement(clientAgreement, currentAgreement)\n )\n )}\n </span>\n );\n }\n\n return button;\n })}\n </CollectionPrimitive.Root>\n {handleAddAgreement ? (\n <Button\n className=\"focus-visible:!yt-focus-dark my-1 mx-2 !h-9 shrink-0 !bg-white/[0.08] !text-white hover:!bg-white/[0.16]\"\n onClick={handleAddAgreement}>\n {texts.header.addAgreement}\n </Button>\n ) : null}\n <hr className=\"my-0 h-px w-full bg-white/[0.08]\" />\n <a\n className=\"focus-visible:yt-focus-dark mx-2 mb-2 flex h-8 shrink-0 items-center justify-center rounded text-white hover:cursor-pointer hover:text-white hover:underline focus-visible:outline-none\"\n onClick={handleLogout}\n tabIndex={0}>\n {texts.header.logout}\n </a>\n </PopoverPrimitive.Content>\n </PopoverPrimitive.Root>\n </Container>\n );\n}\n\nconst filterBySearchValue = (search: string) => (agreement: Agreement) => {\n if (!search || !search.length) {\n return true;\n }\n\n const matchesAgreementNumber = String(agreement.number).indexOf(search) > -1;\n const matchesCompanyName = agreement.name.toLowerCase().indexOf(search.toLowerCase()) > -1;\n\n return matchesAgreementNumber || matchesCompanyName;\n};\n\nconst isCurrentAgreement = (agreement: Agreement, currentAgreement: Agreement) => {\n return agreement.number === currentAgreement.number && agreement.userId === currentAgreement.userId;\n};\n\nconst createAgreementButton = (\n agreement: Agreement,\n fallbackImageSrc: string,\n onChangeAgreement: (agreement: Agreement) => void,\n isCurrentAgreement = false\n) => (\n <button\n aria-current={isCurrentAgreement ? 'true' : undefined}\n className=\"focus:yt-focus-dark w-full rounded outline-none\"\n data-taco=\"header-agreements-agreement\"\n key={`${agreement.number}_${agreement.userId}`}\n onClick={() => onChangeAgreement(agreement)}\n onKeyDown={() => onChangeAgreement(agreement)}\n tabIndex={0}>\n <AgreementDetails\n {...agreement}\n className=\"h-14 bg-white/[0.08] xl:hover:bg-white/[0.16] [[aria-current='true']>&]:bg-white/[0.16]\"\n fallbackImageSrc={fallbackImageSrc}\n />\n </button>\n);\n"],"names":["Container","props","React","className","children","AgreementDisplay","currentAgreement","fallbackImageSrc","AgreementDetails","AgreementSelector","agreements","filterAgreement","filterClientAgreement","onAddAgreement","handleAddAgreement","onChangeAgreement","onLogout","handleLogout","open","prop","setOpen","onChange","texts","useLocalization","collectionRef","useRef","useControllableState","search","setSearch","useState","useEffect","handleKeyDown","event","key","preventDefault","current","dispatchEvent","createCustomKeyboardEvent","handleChangeAgreement","agreement","PopoverPrimitive","onOpenChange","Icon","name","SearchInput","autoFocus","target","value","onKeyDown","placeholder","header","CollectionPrimitive","querySelector","ref","tabIndex","filter","filterBySearchValue","map","button","createAgreementButton","isCurrentAgreement","clients","number","userId","clientAgreement","Button","onClick","addAgreement","logout","length","matchesAgreementNumber","String","indexOf","matchesCompanyName","toLowerCase","undefined"],"mappings":"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"}