oa-componentbook 0.18.13 → 0.18.15

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 (7) hide show
  1. package/build/components/oa-component-notification/CustomNotification.js +23 -21
  2. package/build/widgets/oa-widget-approval/ApprovalWidget.js +1 -1
  3. package/build/widgets/oa-widget-approval/styles.js +5 -4
  4. package/build/widgets/oa-widget-chat/ChatWidget.js +93 -95
  5. package/build/widgets/oa-widget-chat/styles.js +2 -1
  6. package/build/widgets/oa-widget-custom-details/CustomDetails.js +8 -0
  7. package/package.json +5 -2
package/build/components/oa-component-notification/CustomNotification.js CHANGED
@@ -15,9 +15,12 @@ var _Typography = _interopRequireDefault(require("../oa-component-typography/Typ
15
15
  var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
16
16
  var _typographyOptions = require("../../global-css/typography-options");
17
17
  var _styles = require("./styles");
18
+ const _excluded = ["description", "duration", "onClick", "onClose", "title", "type"];
18
19
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
20
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
20
21
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
22
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
23
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
21
24
  // Import the styles from the separate file
22
25
 
23
26
  const notificationOptions = exports.notificationOptions = ['positive', 'negative'];
@@ -25,7 +28,7 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
25
28
  let {
26
29
  storyConfig,
27
30
  // Useful only for the purpose of displaying in storybook
28
- onClick,
31
+ onClick: _onClick,
29
32
  onClose,
30
33
  placement,
31
34
  typographies
@@ -33,25 +36,16 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
33
36
  const [api, contextHolder] = _antd.notification.useNotification({
34
37
  placement
35
38
  });
36
- const handleClick = (0, _react.useCallback)(() => {
37
- // console.log('`handleClick` in Notification component');
38
-
39
- // Call to `onClick` callback received from props.
40
- onClick();
41
- }, [onClick]);
42
- const handleClose = (0, _react.useCallback)(() => {
43
- // console.log('`handleClose` in Notification component');
44
-
45
- // Call to `onClose` callback received from props.
46
- onClose();
47
- }, [onClose]);
48
39
  const openNotification = (0, _react.useCallback)(_ref2 => {
49
40
  let {
50
- description,
51
- title,
52
- type,
53
- duration
54
- } = _ref2;
41
+ description,
42
+ duration,
43
+ onClick: onClickDynamic = () => {},
44
+ onClose: onCloseDynamic = () => {},
45
+ title,
46
+ type
47
+ } = _ref2,
48
+ otherConfig = _objectWithoutProperties(_ref2, _excluded);
55
49
  // type can be success or failure
56
50
  const titleColor = type === 'success' ? 'positive' : 'negative';
57
51
  const descriptionColor = type === 'success' ? 'primary-content' : 'primary-content';
@@ -63,6 +57,10 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
63
57
  color: descriptionColor,
64
58
  typography: typographies.description
65
59
  }, /*#__PURE__*/_react.default.createElement("small", null, description))));
60
+ const handleClose = () => {
61
+ onClose();
62
+ onCloseDynamic();
63
+ };
66
64
  api.open({
67
65
  message: customNotification,
68
66
  style: {
@@ -80,11 +78,15 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
80
78
  onClick: handleClose,
81
79
  size: 20
82
80
  }),
83
- onClick: handleClick,
81
+ onClick: () => {
82
+ _onClick();
83
+ onClickDynamic();
84
+ },
84
85
  onClose: handleClose,
85
- duration: duration !== null && duration !== void 0 ? duration : 4.5
86
+ duration: duration !== null && duration !== void 0 ? duration : 4.5,
87
+ otherConfig
86
88
  });
87
- }, [api, handleClick, handleClose, typographies]);
89
+ }, [api, _onClick, onClose, typographies]);
88
90
  (0, _react.useImperativeHandle)(ref, () => ({
89
91
  openNotification
90
92
  }));
package/build/widgets/oa-widget-approval/ApprovalWidget.js CHANGED
@@ -61,7 +61,7 @@ function ApprovalWidget(_ref) {
61
61
  className: isQuestionStyleWidget ? 'col-sm-12 col-md-12 col-lg-12' : 'col-sm-12 col-md-8 col-lg-8 gutter'
62
62
  }, title && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
63
63
  className: "type-b2-400"
64
- }, title, isMandatory && /*#__PURE__*/_react.default.createElement(_styles.RedText, null, "*"))), description && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
64
+ }, title, isMandatory && /*#__PURE__*/_react.default.createElement(_styles.RedText, null, "*"))), description && /*#__PURE__*/_react.default.createElement(_styles.Styledescription, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
65
65
  typography: "type-b2-400",
66
66
  color: "secondary-content"
67
67
  }, description)), viewOnClick && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
package/build/widgets/oa-widget-approval/styles.js CHANGED
@@ -3,10 +3,11 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.StyledContainer = exports.RedText = void 0;
6
+ exports.Styledescription = exports.StyledContainer = exports.RedText = void 0;
7
7
  var _styledComponents = _interopRequireDefault(require("styled-components"));
8
- var _templateObject, _templateObject2;
8
+ var _templateObject, _templateObject2, _templateObject3;
9
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
10
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
11
- const StyledContainer = exports.StyledContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\nlabel.ant-radio-wrapper:first-child{\n margin-inline-end: 32px;\n}\n .container {\n margin-bottom: 16px;\n }\n\n h4{\n padding: 0 0 4px;\n }\n.view-button {\n justify-content: start;\n}\n .ant-form-item.custom-radio-group {\n margin-bottom: 12px;\n }\n\n .ant-divider-horizontal {\n margin: 0px 0px 16px;\n }\n\n .ant-form-item .ant-form-item-control-input {\n min-height: auto;\n }\n\n .ant-radio-group-outline {\n display: flex;\n justify-content: start;\n }\n\n textarea {\n padding: 16px; \n min-height: 88px;\n resize: none;\n border-radius: 4px;\n border: 1px solid var(--color-placeholder-text);\n }\n\n h5 {\n margin: 0 0 4px;\n color: var(--color-primary-content);\n }\n\n radiofield label {\n white-space: nowrap;\n }\n\n docdetailstag a {\n white-space: nowrap;\n }\n\n .view-button {\n margin: 8px 0 12px;\n }\n \n"])));
12
- const RedText = exports.RedText = _styledComponents.default.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: inline-block;\n color: red;\n margin-left: 4px;\n"])));
11
+ const Styledescription = exports.Styledescription = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: 0 0 8px;\n"])));
12
+ const StyledContainer = exports.StyledContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding: 0 0 16px;\nlabel.ant-radio-wrapper:first-child{\n margin-inline-end: 32px;\n}\n .container {\n margin-bottom: 16px;\n }\n\n h4{\n padding: 0 0 4px;\n }\n.view-button {\n justify-content: start;\n}\n .ant-form-item.custom-radio-group {\n margin-bottom: 12px;\n }\n\n .ant-divider-horizontal {\n margin: 16px 0px 0px;\n }\n\n .ant-form-item .ant-form-item-control-input {\n min-height: auto;\n }\n\n .ant-radio-group-outline {\n display: flex;\n justify-content: start;\n }\n\n textarea {\n padding: 16px; \n min-height: 88px;\n resize: none;\n border-radius: 4px;\n border: 1px solid var(--color-placeholder-text);\n }\n\n h5 {\n margin: 0 0 4px;\n color: var(--color-primary-content);\n }\n\n radiofield label {\n white-space: nowrap;\n }\n\n docdetailstag a {\n white-space: nowrap;\n }\n \n"])));
13
+ const RedText = exports.RedText = _styledComponents.default.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: inline-block;\n color: red;\n margin-left: 4px;\n"])));
package/build/widgets/oa-widget-chat/ChatWidget.js CHANGED
@@ -14,12 +14,12 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
14
14
  var _relativeTime = _interopRequireDefault(require("dayjs/plugin/relativeTime"));
15
15
  var _lodash = require("lodash");
16
16
  var _react = _interopRequireWildcard(require("react"));
17
- var _TextArea = _interopRequireDefault(require("../../components/oa-component-textarea/TextArea"));
18
17
  var _icons = require("@material-ui/icons");
18
+ var _system = require("@material-ui/system");
19
+ var _TextArea = _interopRequireDefault(require("../../components/oa-component-textarea/TextArea"));
19
20
  var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
20
21
  var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
21
22
  var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
22
- var _system = require("@material-ui/system");
23
23
  var _templateObject;
24
24
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
25
25
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -80,108 +80,106 @@ function ChatWidget(_ref) {
80
80
  title: headerTitle,
81
81
  footer: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
82
82
  className: "type-b2-400",
83
- color: 'primary-content'
83
+ color: "primary-content"
84
84
  }, "Reply to Query"), /*#__PURE__*/_react.default.createElement(_TextArea.default, {
85
85
  name: "message",
86
86
  value: message,
87
- placeholder: 'Type here...',
87
+ placeholder: "Type here...",
88
88
  onChange: e => setMessage(e.target.value)
89
89
  }), /*#__PURE__*/_react.default.createElement("aside", null, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
90
90
  onClick: onMsgSend,
91
- size: 'medium',
92
- label: 'Send Reply'
91
+ size: "medium",
92
+ label: "Send Reply"
93
93
  })))
94
94
  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
95
95
  color: "primary-content",
96
96
  className: "type-t1-500"
97
- }, bodyTitle), /*#__PURE__*/_react.default.createElement("div", null, isContentLoading ? [...Array((0, _lodash.random)(2, 5))].map((_, ind) => {
98
- return ind % 2 ?
99
- /*#__PURE__*/
100
- // Info : This container is to show the loading of the chats (our chats) in the right side of chat body while chats are fetching.
101
- _react.default.createElement(_antd.Skeleton, {
102
- loading: isContentLoading,
103
- avatar: true,
104
- active: true,
105
- title: false,
106
- style: {
107
- backgroundColor: "red"
108
- }
109
- }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, null, (0, _dayjs.default)().fromNow())))) :
110
- /*#__PURE__*/
111
- // Info : This container is to show the loading of the chats (other user) in the left side of chat body while chats are fetching.
112
- _react.default.createElement(_antd.Skeleton, {
113
- loading: isContentLoading,
114
- avatar: true,
115
- active: true,
116
- title: false,
117
- style: {
118
- transform: "scale(-1, 1)"
119
- }
120
- }, /*#__PURE__*/_react.default.createElement("div", {
121
- flexDirection: "column",
122
- style: _objectSpread({}, stylesObj.chatUi),
123
- gap: "2px"
124
- }, /*#__PURE__*/_react.default.createElement("div", {
125
- style: _objectSpread({
126
- display: "flex",
127
- flexDirection: "column",
128
- gap: '2px'
129
- }, stylesObj.chatUi)
130
- }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
131
- type: "secondary",
132
- style: {
133
- fontSize: "10px",
134
- alignSelf: "flex-end",
135
- width: "fit-content"
136
- }
137
- }, (0, _dayjs.default)().fromNow()))));
138
- }) : queryMessages !== null && queryMessages !== void 0 && queryMessages.length ? queryMessages.map(message => {
139
- return message.isUser ?
140
- /*#__PURE__*/
141
- // Info : This is the chat box of right side which will show messages from user.
142
- _react.default.createElement("div", {
143
- style: {
144
- display: 'flex',
145
- alignItems: 'flex-start',
146
- justifyContent: 'flex-end'
147
- }
148
- }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
149
- style: _objectSpread(_objectSpread({
150
- display: "flex",
151
- flexDirection: "column",
152
- gap: '2px'
153
- }, stylesObj.chatUi), {}, {
154
- backgroundColor: '#f6f6f6'
155
- })
156
- }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
157
- className: "type-b1-400",
158
- color: 'primary-content'
159
- }, message.message)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
160
- className: "type-sl1-700",
161
- color: 'secondary-content'
162
- }, message.createdAt))) :
163
- /*#__PURE__*/
164
- // Info : This is the chat box of left side which will show messages from other user.
165
- _react.default.createElement("div", {
166
- style: {
167
- display: 'flex',
168
- alignItems: 'flex-start',
169
- flexDirection: 'column'
170
- }
171
- }, /*#__PURE__*/_react.default.createElement("div", {
172
- style: _objectSpread({
173
- display: 'flex',
174
- flexDirection: 'column',
175
- gap: '2px'
176
- }, stylesObj.chatUi)
177
- }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
178
- className: "type-b1-400",
179
- color: 'primary-content'
180
- }, message.message)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
181
- className: "type-sl1-700",
182
- color: 'secondary-content'
183
- }, message.createdAt));
184
- }) : /*#__PURE__*/_react.default.createElement(_antd.Alert, {
97
+ }, bodyTitle), /*#__PURE__*/_react.default.createElement("div", null, isContentLoading ? [...Array((0, _lodash.random)(2, 5))].map((_, ind) => ind % 2 ?
98
+ /*#__PURE__*/
99
+ // Info : This container is to show the loading of the chats
100
+ // (our chats) in the right side of chat body while chats are fetching.
101
+ _react.default.createElement(_antd.Skeleton, {
102
+ loading: isContentLoading,
103
+ avatar: true,
104
+ active: true,
105
+ title: false,
106
+ style: {
107
+ backgroundColor: 'red'
108
+ }
109
+ }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, null, (0, _dayjs.default)().fromNow())))) :
110
+ /*#__PURE__*/
111
+ // Info : This container is to show the loading of the chats
112
+ // (other user) in the left side of chat body while chats are fetching.
113
+ _react.default.createElement(_antd.Skeleton, {
114
+ loading: isContentLoading,
115
+ avatar: true,
116
+ active: true,
117
+ title: false,
118
+ style: {
119
+ transform: 'scale(-1, 1)'
120
+ }
121
+ }, /*#__PURE__*/_react.default.createElement("div", {
122
+ flexDirection: "column",
123
+ style: _objectSpread({}, stylesObj.chatUi),
124
+ gap: "2px"
125
+ }, /*#__PURE__*/_react.default.createElement("div", {
126
+ style: _objectSpread({
127
+ display: 'flex',
128
+ flexDirection: 'column',
129
+ gap: '2px'
130
+ }, stylesObj.chatUi)
131
+ }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
132
+ type: "secondary",
133
+ style: {
134
+ fontSize: '10px',
135
+ alignSelf: 'flex-end',
136
+ width: 'fit-content'
137
+ }
138
+ }, (0, _dayjs.default)().fromNow()))))) : queryMessages !== null && queryMessages !== void 0 && queryMessages.length ? queryMessages.map(msg => msg.isUser ?
139
+ /*#__PURE__*/
140
+ // Info : This is the chat box of right side which will show messages from user.
141
+ _react.default.createElement("div", {
142
+ style: {
143
+ display: 'flex',
144
+ alignItems: 'flex-start',
145
+ justifyContent: 'flex-end'
146
+ }
147
+ }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
148
+ style: _objectSpread(_objectSpread({
149
+ display: 'flex',
150
+ flexDirection: 'column',
151
+ gap: '2px'
152
+ }, stylesObj.chatUi), {}, {
153
+ backgroundColor: '#f6f6f6'
154
+ })
155
+ }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
156
+ className: "type-b1-400",
157
+ color: "primary-content"
158
+ }, msg.message)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
159
+ className: "type-sl1-700",
160
+ color: "secondary-content"
161
+ }, msg.createdAt))) :
162
+ /*#__PURE__*/
163
+ // Info : This is the chat box of left side which will show messages from other user.
164
+ _react.default.createElement("div", {
165
+ style: {
166
+ display: 'flex',
167
+ alignItems: 'flex-start',
168
+ flexDirection: 'column'
169
+ }
170
+ }, /*#__PURE__*/_react.default.createElement("div", {
171
+ style: _objectSpread({
172
+ display: 'flex',
173
+ flexDirection: 'column',
174
+ gap: '2px'
175
+ }, stylesObj.chatUi)
176
+ }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
177
+ className: "type-b1-400",
178
+ color: "primary-content"
179
+ }, message.message)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
180
+ className: "type-sl1-700",
181
+ color: "secondary-content"
182
+ }, message.createdAt))) : /*#__PURE__*/_react.default.createElement(_antd.Alert, {
185
183
  type: "info",
186
184
  message: "Send a chat to start your chat history for this ticket."
187
185
  }))));
@@ -203,7 +201,7 @@ ChatWidget.defaultProps = {
203
201
  isContentLoading: true,
204
202
  headerTitle: 'VIEW OR REPLY TO QUERY',
205
203
  bodyTitle: 'Purchase Invoice',
206
- onMessageInput: msg => alert('This is your msg :' + msg),
204
+ onMessageInput: msg => alert("This is your msg :".concat(msg)),
207
205
  initialMsg: '',
208
206
  clearInput: true,
209
207
  queryMessages: [{
package/build/widgets/oa-widget-chat/styles.js CHANGED
@@ -5,12 +5,13 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.ChatUi = exports.ChatFooter = exports.ChatDrawer = exports.ChatContainer = void 0;
7
7
  var _styledComponents = _interopRequireDefault(require("styled-components"));
8
+ var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
8
9
  var _templateObject, _templateObject2, _templateObject3, _templateObject4;
9
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
11
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
11
12
  const ChatUi = exports.ChatUi = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: 16px;\n background-color: var(--color-background-info);\n border-radius: 4px;\n max-width: 440px;\n margin-top: 12px;\n"])));
12
13
  const ChatContainer = exports.ChatContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n width: 100%;\n height: 100%;\n position: relative;\n flex: 9;\n overflow: auto;\n"])));
13
- const ChatDrawer = exports.ChatDrawer = (0, _styledComponents.default)(CustomDrawer)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n // Your CustomDrawer styles here\n"])));
14
+ const ChatDrawer = exports.ChatDrawer = (0, _styledComponents.default)(_CustomDrawer.default)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n // Your CustomDrawer styles here\n"])));
14
15
  const ChatFooter = exports.ChatFooter = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n gap: 8px;\n overflow: hidden;\n"])));
15
16
 
16
17
  // Add more styled components as needed
package/build/widgets/oa-widget-custom-details/CustomDetails.js CHANGED
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
  var _react = _interopRequireDefault(require("react"));
8
+ var _propTypes = _interopRequireDefault(require("prop-types"));
8
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
9
10
  var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
10
11
  var _templateObject;
@@ -23,4 +24,11 @@ function CustomDetails(_ref) {
23
24
  color: "primary-content"
24
25
  }, text));
25
26
  }
27
+ CustomDetails.propTypes = {
28
+ text: _propTypes.default.string.isRequired,
29
+ showBorder: _propTypes.default.bool
30
+ };
31
+ CustomDetails.defaultProps = {
32
+ showBorder: true
33
+ };
26
34
  var _default = exports.default = CustomDetails;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oa-componentbook",
3
- "version": "0.18.13",
3
+ "version": "0.18.15",
4
4
  "private": false,
5
5
  "description": "Reusable components",
6
6
  "main": "build/index.js",
@@ -15,11 +15,14 @@
15
15
  "dependencies": {
16
16
  "@ant-design/icons": "^5.2.6",
17
17
  "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
18
+ "@material-ui/system": "^4.12.2",
18
19
  "@storybook/addon-actions": "^7.6.3",
19
20
  "@storybook/addon-styling": "^1.3.7",
20
21
  "@storybook/cli": "^7.6.3",
21
22
  "antd": "^5.11.4",
22
- "d3": "^7.8.5"
23
+ "d3": "^7.8.5",
24
+ "dayjs": "^1.11.10",
25
+ "lodash": "^4.17.21"
23
26
  },
24
27
  "devDependencies": {
25
28
  "@babel/cli": "^7.22.9",