@soyfri/shared-library 3.1.0 → 3.2.1

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.
Files changed (179) hide show
  1. package/ActionMenu-BXRVKopM.js +106 -0
  2. package/ActionMenu-BXRVKopM.js.map +1 -0
  3. package/ActionMenu-wNWkDZWh.cjs +105 -0
  4. package/ActionMenu-wNWkDZWh.cjs.map +1 -0
  5. package/AppBarMenuToggle-BpXBMeca.js +128 -0
  6. package/AppBarMenuToggle-BpXBMeca.js.map +1 -0
  7. package/AppBarMenuToggle-D_RJGtHO.cjs +127 -0
  8. package/AppBarMenuToggle-D_RJGtHO.cjs.map +1 -0
  9. package/{Autocomplete-CejWztBY.cjs → Autocomplete-Bd3bN4Cw.cjs} +16 -11
  10. package/Autocomplete-Bd3bN4Cw.cjs.map +1 -0
  11. package/{Autocomplete-C_lW1VER.js → Autocomplete-E5aSUGVK.js} +16 -11
  12. package/Autocomplete-E5aSUGVK.js.map +1 -0
  13. package/{Avatar-Dw5rzayR.cjs → Avatar-BjyfSNvP.cjs} +3 -7
  14. package/Avatar-BjyfSNvP.cjs.map +1 -0
  15. package/{Avatar-H8akSege.js → Avatar-C_C4bcb9.js} +3 -7
  16. package/Avatar-C_C4bcb9.js.map +1 -0
  17. package/{Checkbox-gB5YKkVo.js → Checkbox-BL4kvHFB.js} +3 -2
  18. package/Checkbox-BL4kvHFB.js.map +1 -0
  19. package/{Checkbox-BCqMFWt4.cjs → Checkbox-Bx4Asmg7.cjs} +3 -2
  20. package/Checkbox-Bx4Asmg7.cjs.map +1 -0
  21. package/{DatePicker-t7uDTZMl.cjs → DatePicker-CMcQddi1.cjs} +45 -42
  22. package/DatePicker-CMcQddi1.cjs.map +1 -0
  23. package/{DatePicker-_IGWc3I5.js → DatePicker-D__RSgs-.js} +45 -42
  24. package/DatePicker-D__RSgs-.js.map +1 -0
  25. package/{DateTimePicker-BxQyjTCY.cjs → DateTimePicker-BVJGq1A0.cjs} +7 -15
  26. package/DateTimePicker-BVJGq1A0.cjs.map +1 -0
  27. package/{DateTimePicker-CrmWav_j.js → DateTimePicker-LeaE716a.js} +7 -15
  28. package/DateTimePicker-LeaE716a.js.map +1 -0
  29. package/DrawerItem-DlnG_NdY.cjs +272 -0
  30. package/DrawerItem-DlnG_NdY.cjs.map +1 -0
  31. package/DrawerItem-at1lsEo9.js +273 -0
  32. package/DrawerItem-at1lsEo9.js.map +1 -0
  33. package/Flyout-DCcDBYKT.js +117 -0
  34. package/Flyout-DCcDBYKT.js.map +1 -0
  35. package/Flyout-fycujUVf.cjs +116 -0
  36. package/Flyout-fycujUVf.cjs.map +1 -0
  37. package/Gallery-ClBJxCMc.js +491 -0
  38. package/Gallery-ClBJxCMc.js.map +1 -0
  39. package/Gallery-Cn1Bj_ao.cjs +490 -0
  40. package/Gallery-Cn1Bj_ao.cjs.map +1 -0
  41. package/Icon-CUwK2c8z.js +108 -0
  42. package/Icon-CUwK2c8z.js.map +1 -0
  43. package/Icon-ChnAivGo.cjs +107 -0
  44. package/Icon-ChnAivGo.cjs.map +1 -0
  45. package/{Input-BL1NUIbr.js → Input-BibHlnGN.js} +6 -8
  46. package/Input-BibHlnGN.js.map +1 -0
  47. package/{Input-BcLJlPRo.cjs → Input-Bpjw7qwq.cjs} +6 -8
  48. package/Input-Bpjw7qwq.cjs.map +1 -0
  49. package/InputGroup-BZ7cmAcg.cjs +140 -0
  50. package/InputGroup-BZ7cmAcg.cjs.map +1 -0
  51. package/InputGroup-D5pXKGjZ.js +141 -0
  52. package/InputGroup-D5pXKGjZ.js.map +1 -0
  53. package/MenuButton-C4s8rG05.cjs +79 -0
  54. package/MenuButton-C4s8rG05.cjs.map +1 -0
  55. package/MenuButton-CZRN4P6x.js +80 -0
  56. package/MenuButton-CZRN4P6x.js.map +1 -0
  57. package/{RadioGroup-Dd0rHXSX.cjs → RadioGroup-DVvmmDs3.cjs} +3 -2
  58. package/RadioGroup-DVvmmDs3.cjs.map +1 -0
  59. package/{RadioGroup-bO-ahP9T.js → RadioGroup-cKCpag8W.js} +3 -2
  60. package/RadioGroup-cKCpag8W.js.map +1 -0
  61. package/{Select-BY5Y0qZ1.js → Select-BaY3zJhq.js} +4 -3
  62. package/Select-BaY3zJhq.js.map +1 -0
  63. package/{Select-CURrHSyl.cjs → Select-WpHNCHHz.cjs} +4 -3
  64. package/Select-WpHNCHHz.cjs.map +1 -0
  65. package/{Switch-CQFOopYy.cjs → Switch-B4ex7yKR.cjs} +3 -2
  66. package/Switch-B4ex7yKR.cjs.map +1 -0
  67. package/{Switch-D72dpkH2.js → Switch-CY1Dd2ff.js} +3 -2
  68. package/Switch-CY1Dd2ff.js.map +1 -0
  69. package/{Table-C4OM6rrC.cjs → Table-DaNgX7PO.cjs} +8 -11
  70. package/{Table-C4OM6rrC.cjs.map → Table-DaNgX7PO.cjs.map} +1 -1
  71. package/{Table-C2LbW0B1.js → Table-aNFAOuQk.js} +8 -11
  72. package/{Table-C2LbW0B1.js.map → Table-aNFAOuQk.js.map} +1 -1
  73. package/TimelineItem-0jRPFT11.js +68 -0
  74. package/TimelineItem-0jRPFT11.js.map +1 -0
  75. package/TimelineItem-BbhUWJhU.cjs +84 -0
  76. package/TimelineItem-BbhUWJhU.cjs.map +1 -0
  77. package/Tooltip-BB77JBcg.js +42 -0
  78. package/Tooltip-BB77JBcg.js.map +1 -0
  79. package/Tooltip-DpAsWGpN.cjs +41 -0
  80. package/Tooltip-DpAsWGpN.cjs.map +1 -0
  81. package/components/ActionMenu/ActionMenu.cjs +4 -104
  82. package/components/ActionMenu/ActionMenu.cjs.map +1 -1
  83. package/components/ActionMenu/ActionMenu.js +4 -104
  84. package/components/ActionMenu/ActionMenu.js.map +1 -1
  85. package/components/AppBar/AppBar.cjs +6 -126
  86. package/components/AppBar/AppBar.cjs.map +1 -1
  87. package/components/AppBar/AppBar.js +6 -126
  88. package/components/AppBar/AppBar.js.map +1 -1
  89. package/components/Autocomplete/Autocomplete.cjs +1 -1
  90. package/components/Autocomplete/Autocomplete.js +1 -1
  91. package/components/Avatar/Avatar.cjs +1 -1
  92. package/components/Avatar/Avatar.js +1 -1
  93. package/components/Checkbox/Checkbox.cjs +1 -1
  94. package/components/Checkbox/Checkbox.js +1 -1
  95. package/components/DatePicker/DatePicker.cjs +1 -1
  96. package/components/DatePicker/DatePicker.js +1 -1
  97. package/components/DateTimePicker/DateTimePicker.cjs +1 -1
  98. package/components/DateTimePicker/DateTimePicker.js +1 -1
  99. package/components/Drawer/Drawer.cjs +5 -269
  100. package/components/Drawer/Drawer.cjs.map +1 -1
  101. package/components/Drawer/Drawer.js +5 -269
  102. package/components/Drawer/Drawer.js.map +1 -1
  103. package/components/Flyout/Flyout.cjs +2 -114
  104. package/components/Flyout/Flyout.cjs.map +1 -1
  105. package/components/Flyout/Flyout.js +2 -114
  106. package/components/Flyout/Flyout.js.map +1 -1
  107. package/components/Gallery/Gallery.cjs +3 -489
  108. package/components/Gallery/Gallery.cjs.map +1 -1
  109. package/components/Gallery/Gallery.js +3 -489
  110. package/components/Gallery/Gallery.js.map +1 -1
  111. package/components/Icon/Icon.cjs +3 -106
  112. package/components/Icon/Icon.cjs.map +1 -1
  113. package/components/Icon/Icon.js +3 -106
  114. package/components/Icon/Icon.js.map +1 -1
  115. package/components/Input/Input.cjs +1 -1
  116. package/components/Input/Input.js +1 -1
  117. package/components/InputGroup/InputGroup.cjs +3 -137
  118. package/components/InputGroup/InputGroup.cjs.map +1 -1
  119. package/components/InputGroup/InputGroup.js +3 -137
  120. package/components/InputGroup/InputGroup.js.map +1 -1
  121. package/components/MenuButton/MenuButton.cjs +2 -75
  122. package/components/MenuButton/MenuButton.cjs.map +1 -1
  123. package/components/MenuButton/MenuButton.d.ts +6 -0
  124. package/components/MenuButton/MenuButton.js +2 -75
  125. package/components/MenuButton/MenuButton.js.map +1 -1
  126. package/components/RadioGroup/RadioGroup.cjs +1 -1
  127. package/components/RadioGroup/RadioGroup.js +1 -1
  128. package/components/Select/Select.cjs +1 -1
  129. package/components/Select/Select.js +1 -1
  130. package/components/Switch/Switch.cjs +1 -1
  131. package/components/Switch/Switch.js +1 -1
  132. package/components/Table/Table.cjs +1 -1
  133. package/components/Table/Table.js +1 -1
  134. package/components/Timeline/Timeline.cjs +4 -83
  135. package/components/Timeline/Timeline.cjs.map +1 -1
  136. package/components/Timeline/Timeline.js +4 -66
  137. package/components/Timeline/Timeline.js.map +1 -1
  138. package/components/Tooltip/Tooltip.cjs +2 -39
  139. package/components/Tooltip/Tooltip.cjs.map +1 -1
  140. package/components/Tooltip/Tooltip.js +2 -39
  141. package/components/Tooltip/Tooltip.js.map +1 -1
  142. package/{formField.sx-BAX7KwMR.cjs → formField.sx-BZj7TaMa.cjs} +29 -4
  143. package/formField.sx-BZj7TaMa.cjs.map +1 -0
  144. package/{formField.sx-8_QRnKxv.js → formField.sx-DD1sxwWH.js} +29 -4
  145. package/formField.sx-DD1sxwWH.js.map +1 -0
  146. package/index.cjs +36 -10
  147. package/index.cjs.map +1 -1
  148. package/index.d.ts +11 -0
  149. package/index.js +36 -10
  150. package/index.js.map +1 -1
  151. package/package.json +1 -1
  152. package/styles.css +375 -0
  153. package/theme/tokens.d.ts +12 -2
  154. package/{tokens-jaWWNk39.cjs → tokens-BGPazVFO.cjs} +4 -2
  155. package/tokens-BGPazVFO.cjs.map +1 -0
  156. package/{tokens-BRrcP_p_.js → tokens-DE2fV3a9.js} +12 -10
  157. package/tokens-DE2fV3a9.js.map +1 -0
  158. package/Autocomplete-C_lW1VER.js.map +0 -1
  159. package/Autocomplete-CejWztBY.cjs.map +0 -1
  160. package/Avatar-Dw5rzayR.cjs.map +0 -1
  161. package/Avatar-H8akSege.js.map +0 -1
  162. package/Checkbox-BCqMFWt4.cjs.map +0 -1
  163. package/Checkbox-gB5YKkVo.js.map +0 -1
  164. package/DatePicker-_IGWc3I5.js.map +0 -1
  165. package/DatePicker-t7uDTZMl.cjs.map +0 -1
  166. package/DateTimePicker-BxQyjTCY.cjs.map +0 -1
  167. package/DateTimePicker-CrmWav_j.js.map +0 -1
  168. package/Input-BL1NUIbr.js.map +0 -1
  169. package/Input-BcLJlPRo.cjs.map +0 -1
  170. package/RadioGroup-Dd0rHXSX.cjs.map +0 -1
  171. package/RadioGroup-bO-ahP9T.js.map +0 -1
  172. package/Select-BY5Y0qZ1.js.map +0 -1
  173. package/Select-CURrHSyl.cjs.map +0 -1
  174. package/Switch-CQFOopYy.cjs.map +0 -1
  175. package/Switch-D72dpkH2.js.map +0 -1
  176. package/formField.sx-8_QRnKxv.js.map +0 -1
  177. package/formField.sx-BAX7KwMR.cjs.map +0 -1
  178. package/tokens-BRrcP_p_.js.map +0 -1
  179. package/tokens-jaWWNk39.cjs.map +0 -1
@@ -1,117 +1,5 @@
1
1
  "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __defProps = Object.defineProperties;
4
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
5
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
8
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
9
- var __spreadValues = (a, b) => {
10
- for (var prop in b || (b = {}))
11
- if (__hasOwnProp.call(b, prop))
12
- __defNormalProp(a, prop, b[prop]);
13
- if (__getOwnPropSymbols)
14
- for (var prop of __getOwnPropSymbols(b)) {
15
- if (__propIsEnum.call(b, prop))
16
- __defNormalProp(a, prop, b[prop]);
17
- }
18
- return a;
19
- };
20
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
21
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
22
- const jsxRuntime = require("react/jsx-runtime");
23
- const React = require("react");
24
- const material = require("@mui/material");
25
- const CloseIcon = require("@mui/icons-material/Close");
26
- const Flyout = ({
27
- open,
28
- onClose,
29
- title,
30
- anchor = "right",
31
- children,
32
- size = "medium",
33
- // Default size: 'medium'
34
- height = "auto"
35
- }) => {
36
- const getWidthBySize = (flyoutSize) => {
37
- const baseMultiplier = 1.15;
38
- switch (flyoutSize) {
39
- case "small":
40
- return Math.round(300 * baseMultiplier);
41
- // ~345px
42
- case "medium":
43
- return Math.round(450 * baseMultiplier);
44
- // ~518px (rounded)
45
- case "large":
46
- return Math.round(600 * baseMultiplier);
47
- // ~690px
48
- default:
49
- return Math.round(450 * baseMultiplier);
50
- }
51
- };
52
- const calculatedWidth = getWidthBySize(size);
53
- const contentStyle = React.useMemo(() => {
54
- if (anchor === "left" || anchor === "right") {
55
- return { width: calculatedWidth };
56
- } else {
57
- return { height, width: "100%" };
58
- }
59
- }, [anchor, calculatedWidth, height]);
60
- return /* @__PURE__ */ jsxRuntime.jsx(
61
- material.Drawer,
62
- {
63
- anchor,
64
- open,
65
- onClose,
66
- disableEscapeKeyDown: false,
67
- ModalProps: {
68
- // Keep mounted for better performance if content is complex or needs to retain state
69
- keepMounted: true
70
- },
71
- children: /* @__PURE__ */ jsxRuntime.jsxs(
72
- material.Box,
73
- {
74
- sx: __spreadProps(__spreadValues({}, contentStyle), {
75
- // Apply calculated width/height
76
- display: "flex",
77
- flexDirection: "column",
78
- p: 2,
79
- // Padding around the content
80
- backgroundColor: (theme) => theme.palette.background.paper,
81
- // Use theme background color
82
- color: (theme) => theme.palette.text.primary,
83
- // Use theme text color
84
- height: "100%"
85
- // Ensure the main container of the Drawer takes full height
86
- }),
87
- role: "presentation",
88
- children: [
89
- /* @__PURE__ */ jsxRuntime.jsxs(
90
- material.Box,
91
- {
92
- sx: {
93
- display: "flex",
94
- justifyContent: "space-between",
95
- alignItems: "center",
96
- mb: 2,
97
- // Margin bottom for separation from content
98
- flexShrink: 0
99
- // Prevent the header from shrinking when content scrolls
100
- },
101
- children: [
102
- title && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", component: "div", sx: { fontWeight: "bold" }, children: title }),
103
- /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: onClose, sx: { ml: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) })
104
- ]
105
- }
106
- ),
107
- /* @__PURE__ */ jsxRuntime.jsx(material.Divider, { sx: { mb: 2 } }),
108
- " ",
109
- /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { flexGrow: 1, overflowY: "auto" }, children })
110
- ]
111
- }
112
- )
113
- }
114
- );
115
- };
116
- exports.Flyout = Flyout;
3
+ const Flyout = require("../../Flyout-fycujUVf.cjs");
4
+ exports.Flyout = Flyout.Flyout;
117
5
  //# sourceMappingURL=Flyout.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Flyout.cjs","sources":["../../../src/components/Flyout/Flyout.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport {\n Box,\n Typography,\n IconButton,\n Divider,\n Drawer,\n List,\n ListItem,\n ListItemText,\n TextField,\n Button,\n} from '@mui/material';\nimport CloseIcon from '@mui/icons-material/Close';\n\n// Define the size types for the Flyout\ntype FlyoutSize = 'small' | 'medium' | 'large';\n\n// Define the props for the Flyout component\nexport interface FlyoutProps {\n open: boolean;\n onClose: () => void;\n title?: string;\n anchor?: 'left' | 'top' | 'right' | 'bottom';\n children: React.ReactNode;\n size?: FlyoutSize; // New prop for predefined size\n height?: string | number; // Allows custom height for top/bottom anchors\n}\n\nconst Flyout: React.FC<FlyoutProps> = ({\n open,\n onClose,\n title,\n anchor = 'right',\n children,\n size = 'medium', // Default size: 'medium'\n height = 'auto',\n}) => {\n // Mapping of predefined sizes to pixel widths\n const getWidthBySize = (flyoutSize: FlyoutSize): number => {\n const baseMultiplier = 1.15; // 15% larger than base\n switch (flyoutSize) {\n case 'small':\n return Math.round(300 * baseMultiplier); // ~345px\n case 'medium':\n return Math.round(450 * baseMultiplier); // ~518px (rounded)\n case 'large':\n return Math.round(600 * baseMultiplier); // ~690px\n default:\n return Math.round(450 * baseMultiplier); // Fallback, ~518px\n }\n };\n\n // Calculate width based on size prop for left/right anchors\n const calculatedWidth = getWidthBySize(size);\n\n // Determine the style for the content box based on anchor\n const contentStyle = useMemo(() => {\n if (anchor === 'left' || anchor === 'right') {\n return { width: calculatedWidth }; // Use the calculated width\n } else {\n // For 'top' or 'bottom' anchors, width is 100% and height is controlled\n return { height: height, width: '100%' };\n }\n }, [anchor, calculatedWidth, height]);\n\n return (\n <Drawer\n anchor={anchor}\n open={open}\n onClose={onClose}\n // Allows closing with Escape key, but prevents closing by clicking outside if ModalProps.disableBackdropClick is true\n disableEscapeKeyDown={false}\n ModalProps={{\n // Keep mounted for better performance if content is complex or needs to retain state\n keepMounted: true,\n }}\n >\n <Box\n sx={{\n ...contentStyle, // Apply calculated width/height\n display: 'flex',\n flexDirection: 'column',\n p: 2, // Padding around the content\n backgroundColor: (theme) => theme.palette.background.paper, // Use theme background color\n color: (theme) => theme.palette.text.primary, // Use theme text color\n height: '100%', // Ensure the main container of the Drawer takes full height\n }}\n role=\"presentation\" // ARIA role for accessibility\n >\n {/* Header section with title and close button */}\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n mb: 2, // Margin bottom for separation from content\n flexShrink: 0, // Prevent the header from shrinking when content scrolls\n }}\n >\n {title && (\n <Typography variant=\"h6\" component=\"div\" sx={{ fontWeight: 'bold' }}>\n {title}\n </Typography>\n )}\n <IconButton onClick={onClose} sx={{ ml: 'auto' }}>\n <CloseIcon />\n </IconButton>\n </Box>\n\n <Divider sx={{ mb: 2 }} /> {/* Separator line */}\n\n {/* Scrollable content area */}\n <Box sx={{ flexGrow: 1, overflowY: 'auto' }}>\n {children}\n </Box>\n </Box>\n </Drawer>\n );\n};\n\nexport default Flyout;\n"],"names":["useMemo","jsx","Drawer","jsxs","Box","Typography","IconButton","Divider"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAM,SAAgC,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,OAAO;AAAA;AAAA,EACP,SAAS;AACX,MAAM;AAEJ,QAAM,iBAAiB,CAAC,eAAmC;AACzD,UAAM,iBAAiB;AACvB,YAAQ,YAAA;AAAA,MACN,KAAK;AACH,eAAO,KAAK,MAAM,MAAM,cAAc;AAAA;AAAA,MACxC,KAAK;AACH,eAAO,KAAK,MAAM,MAAM,cAAc;AAAA;AAAA,MACxC,KAAK;AACH,eAAO,KAAK,MAAM,MAAM,cAAc;AAAA;AAAA,MACxC;AACE,eAAO,KAAK,MAAM,MAAM,cAAc;AAAA,IAAA;AAAA,EAE5C;AAGA,QAAM,kBAAkB,eAAe,IAAI;AAG3C,QAAM,eAAeA,MAAAA,QAAQ,MAAM;AACjC,QAAI,WAAW,UAAU,WAAW,SAAS;AAC3C,aAAO,EAAE,OAAO,gBAAA;AAAA,IAClB,OAAO;AAEL,aAAO,EAAE,QAAgB,OAAO,OAAA;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,QAAQ,iBAAiB,MAAM,CAAC;AAEpC,SACEC,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA,sBAAsB;AAAA,MACtB,YAAY;AAAA;AAAA,QAEV,aAAa;AAAA,MAAA;AAAA,MAGf,UAAAC,2BAAAA;AAAAA,QAACC,SAAAA;AAAAA,QAAA;AAAA,UACC,IAAI,iCACC,eADD;AAAA;AAAA,YAEF,SAAS;AAAA,YACT,eAAe;AAAA,YACf,GAAG;AAAA;AAAA,YACH,iBAAiB,CAAC,UAAU,MAAM,QAAQ,WAAW;AAAA;AAAA,YACrD,OAAO,CAAC,UAAU,MAAM,QAAQ,KAAK;AAAA;AAAA,YACrC,QAAQ;AAAA;AAAA,UAAA;AAAA,UAEV,MAAK;AAAA,UAGL,UAAA;AAAA,YAAAD,2BAAAA;AAAAA,cAACC,SAAAA;AAAAA,cAAA;AAAA,gBACC,IAAI;AAAA,kBACF,SAAS;AAAA,kBACT,gBAAgB;AAAA,kBAChB,YAAY;AAAA,kBACZ,IAAI;AAAA;AAAA,kBACJ,YAAY;AAAA;AAAA,gBAAA;AAAA,gBAGb,UAAA;AAAA,kBAAA,SACCH,2BAAAA,IAACI,SAAAA,YAAA,EAAW,SAAQ,MAAK,WAAU,OAAM,IAAI,EAAE,YAAY,OAAA,GACxD,UAAA,MAAA,CACH;AAAA,kBAEFJ,2BAAAA,IAACK,SAAAA,YAAA,EAAW,SAAS,SAAS,IAAI,EAAE,IAAI,OAAA,GACtC,UAAAL,2BAAAA,IAAC,WAAA,CAAA,CAAU,EAAA,CACb;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,2CAGDM,SAAAA,SAAA,EAAQ,IAAI,EAAE,IAAI,KAAK;AAAA,YAAE;AAAA,YAG1BN,+BAACG,SAAAA,OAAI,IAAI,EAAE,UAAU,GAAG,WAAW,OAAA,GAChC,SAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;;"}
1
+ {"version":3,"file":"Flyout.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,117 +1,5 @@
1
- var __defProp = Object.defineProperty;
2
- var __defProps = Object.defineProperties;
3
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
- var __spreadValues = (a, b) => {
9
- for (var prop in b || (b = {}))
10
- if (__hasOwnProp.call(b, prop))
11
- __defNormalProp(a, prop, b[prop]);
12
- if (__getOwnPropSymbols)
13
- for (var prop of __getOwnPropSymbols(b)) {
14
- if (__propIsEnum.call(b, prop))
15
- __defNormalProp(a, prop, b[prop]);
16
- }
17
- return a;
18
- };
19
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
- import { jsx, jsxs } from "react/jsx-runtime";
21
- import { useMemo } from "react";
22
- import { Drawer, Box, Typography, IconButton, Divider } from "@mui/material";
23
- import CloseIcon from "@mui/icons-material/Close";
24
- const Flyout = ({
25
- open,
26
- onClose,
27
- title,
28
- anchor = "right",
29
- children,
30
- size = "medium",
31
- // Default size: 'medium'
32
- height = "auto"
33
- }) => {
34
- const getWidthBySize = (flyoutSize) => {
35
- const baseMultiplier = 1.15;
36
- switch (flyoutSize) {
37
- case "small":
38
- return Math.round(300 * baseMultiplier);
39
- // ~345px
40
- case "medium":
41
- return Math.round(450 * baseMultiplier);
42
- // ~518px (rounded)
43
- case "large":
44
- return Math.round(600 * baseMultiplier);
45
- // ~690px
46
- default:
47
- return Math.round(450 * baseMultiplier);
48
- }
49
- };
50
- const calculatedWidth = getWidthBySize(size);
51
- const contentStyle = useMemo(() => {
52
- if (anchor === "left" || anchor === "right") {
53
- return { width: calculatedWidth };
54
- } else {
55
- return { height, width: "100%" };
56
- }
57
- }, [anchor, calculatedWidth, height]);
58
- return /* @__PURE__ */ jsx(
59
- Drawer,
60
- {
61
- anchor,
62
- open,
63
- onClose,
64
- disableEscapeKeyDown: false,
65
- ModalProps: {
66
- // Keep mounted for better performance if content is complex or needs to retain state
67
- keepMounted: true
68
- },
69
- children: /* @__PURE__ */ jsxs(
70
- Box,
71
- {
72
- sx: __spreadProps(__spreadValues({}, contentStyle), {
73
- // Apply calculated width/height
74
- display: "flex",
75
- flexDirection: "column",
76
- p: 2,
77
- // Padding around the content
78
- backgroundColor: (theme) => theme.palette.background.paper,
79
- // Use theme background color
80
- color: (theme) => theme.palette.text.primary,
81
- // Use theme text color
82
- height: "100%"
83
- // Ensure the main container of the Drawer takes full height
84
- }),
85
- role: "presentation",
86
- children: [
87
- /* @__PURE__ */ jsxs(
88
- Box,
89
- {
90
- sx: {
91
- display: "flex",
92
- justifyContent: "space-between",
93
- alignItems: "center",
94
- mb: 2,
95
- // Margin bottom for separation from content
96
- flexShrink: 0
97
- // Prevent the header from shrinking when content scrolls
98
- },
99
- children: [
100
- title && /* @__PURE__ */ jsx(Typography, { variant: "h6", component: "div", sx: { fontWeight: "bold" }, children: title }),
101
- /* @__PURE__ */ jsx(IconButton, { onClick: onClose, sx: { ml: "auto" }, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
102
- ]
103
- }
104
- ),
105
- /* @__PURE__ */ jsx(Divider, { sx: { mb: 2 } }),
106
- " ",
107
- /* @__PURE__ */ jsx(Box, { sx: { flexGrow: 1, overflowY: "auto" }, children })
108
- ]
109
- }
110
- )
111
- }
112
- );
113
- };
1
+ import { F } from "../../Flyout-DCcDBYKT.js";
114
2
  export {
115
- Flyout
3
+ F as Flyout
116
4
  };
117
5
  //# sourceMappingURL=Flyout.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Flyout.js","sources":["../../../src/components/Flyout/Flyout.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport {\n Box,\n Typography,\n IconButton,\n Divider,\n Drawer,\n List,\n ListItem,\n ListItemText,\n TextField,\n Button,\n} from '@mui/material';\nimport CloseIcon from '@mui/icons-material/Close';\n\n// Define the size types for the Flyout\ntype FlyoutSize = 'small' | 'medium' | 'large';\n\n// Define the props for the Flyout component\nexport interface FlyoutProps {\n open: boolean;\n onClose: () => void;\n title?: string;\n anchor?: 'left' | 'top' | 'right' | 'bottom';\n children: React.ReactNode;\n size?: FlyoutSize; // New prop for predefined size\n height?: string | number; // Allows custom height for top/bottom anchors\n}\n\nconst Flyout: React.FC<FlyoutProps> = ({\n open,\n onClose,\n title,\n anchor = 'right',\n children,\n size = 'medium', // Default size: 'medium'\n height = 'auto',\n}) => {\n // Mapping of predefined sizes to pixel widths\n const getWidthBySize = (flyoutSize: FlyoutSize): number => {\n const baseMultiplier = 1.15; // 15% larger than base\n switch (flyoutSize) {\n case 'small':\n return Math.round(300 * baseMultiplier); // ~345px\n case 'medium':\n return Math.round(450 * baseMultiplier); // ~518px (rounded)\n case 'large':\n return Math.round(600 * baseMultiplier); // ~690px\n default:\n return Math.round(450 * baseMultiplier); // Fallback, ~518px\n }\n };\n\n // Calculate width based on size prop for left/right anchors\n const calculatedWidth = getWidthBySize(size);\n\n // Determine the style for the content box based on anchor\n const contentStyle = useMemo(() => {\n if (anchor === 'left' || anchor === 'right') {\n return { width: calculatedWidth }; // Use the calculated width\n } else {\n // For 'top' or 'bottom' anchors, width is 100% and height is controlled\n return { height: height, width: '100%' };\n }\n }, [anchor, calculatedWidth, height]);\n\n return (\n <Drawer\n anchor={anchor}\n open={open}\n onClose={onClose}\n // Allows closing with Escape key, but prevents closing by clicking outside if ModalProps.disableBackdropClick is true\n disableEscapeKeyDown={false}\n ModalProps={{\n // Keep mounted for better performance if content is complex or needs to retain state\n keepMounted: true,\n }}\n >\n <Box\n sx={{\n ...contentStyle, // Apply calculated width/height\n display: 'flex',\n flexDirection: 'column',\n p: 2, // Padding around the content\n backgroundColor: (theme) => theme.palette.background.paper, // Use theme background color\n color: (theme) => theme.palette.text.primary, // Use theme text color\n height: '100%', // Ensure the main container of the Drawer takes full height\n }}\n role=\"presentation\" // ARIA role for accessibility\n >\n {/* Header section with title and close button */}\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n mb: 2, // Margin bottom for separation from content\n flexShrink: 0, // Prevent the header from shrinking when content scrolls\n }}\n >\n {title && (\n <Typography variant=\"h6\" component=\"div\" sx={{ fontWeight: 'bold' }}>\n {title}\n </Typography>\n )}\n <IconButton onClick={onClose} sx={{ ml: 'auto' }}>\n <CloseIcon />\n </IconButton>\n </Box>\n\n <Divider sx={{ mb: 2 }} /> {/* Separator line */}\n\n {/* Scrollable content area */}\n <Box sx={{ flexGrow: 1, overflowY: 'auto' }}>\n {children}\n </Box>\n </Box>\n </Drawer>\n );\n};\n\nexport default Flyout;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAM,SAAgC,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,OAAO;AAAA;AAAA,EACP,SAAS;AACX,MAAM;AAEJ,QAAM,iBAAiB,CAAC,eAAmC;AACzD,UAAM,iBAAiB;AACvB,YAAQ,YAAA;AAAA,MACN,KAAK;AACH,eAAO,KAAK,MAAM,MAAM,cAAc;AAAA;AAAA,MACxC,KAAK;AACH,eAAO,KAAK,MAAM,MAAM,cAAc;AAAA;AAAA,MACxC,KAAK;AACH,eAAO,KAAK,MAAM,MAAM,cAAc;AAAA;AAAA,MACxC;AACE,eAAO,KAAK,MAAM,MAAM,cAAc;AAAA,IAAA;AAAA,EAE5C;AAGA,QAAM,kBAAkB,eAAe,IAAI;AAG3C,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,WAAW,UAAU,WAAW,SAAS;AAC3C,aAAO,EAAE,OAAO,gBAAA;AAAA,IAClB,OAAO;AAEL,aAAO,EAAE,QAAgB,OAAO,OAAA;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,QAAQ,iBAAiB,MAAM,CAAC;AAEpC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA,sBAAsB;AAAA,MACtB,YAAY;AAAA;AAAA,QAEV,aAAa;AAAA,MAAA;AAAA,MAGf,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,iCACC,eADD;AAAA;AAAA,YAEF,SAAS;AAAA,YACT,eAAe;AAAA,YACf,GAAG;AAAA;AAAA,YACH,iBAAiB,CAAC,UAAU,MAAM,QAAQ,WAAW;AAAA;AAAA,YACrD,OAAO,CAAC,UAAU,MAAM,QAAQ,KAAK;AAAA;AAAA,YACrC,QAAQ;AAAA;AAAA,UAAA;AAAA,UAEV,MAAK;AAAA,UAGL,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI;AAAA,kBACF,SAAS;AAAA,kBACT,gBAAgB;AAAA,kBAChB,YAAY;AAAA,kBACZ,IAAI;AAAA;AAAA,kBACJ,YAAY;AAAA;AAAA,gBAAA;AAAA,gBAGb,UAAA;AAAA,kBAAA,SACC,oBAAC,YAAA,EAAW,SAAQ,MAAK,WAAU,OAAM,IAAI,EAAE,YAAY,OAAA,GACxD,UAAA,MAAA,CACH;AAAA,kBAEF,oBAAC,YAAA,EAAW,SAAS,SAAS,IAAI,EAAE,IAAI,OAAA,GACtC,UAAA,oBAAC,WAAA,CAAA,CAAU,EAAA,CACb;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,gCAGD,SAAA,EAAQ,IAAI,EAAE,IAAI,KAAK;AAAA,YAAE;AAAA,YAG1B,oBAAC,OAAI,IAAI,EAAE,UAAU,GAAG,WAAW,OAAA,GAChC,SAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
1
+ {"version":3,"file":"Flyout.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}