@xqmsg/ui-core 0.18.8 → 0.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/icons/neutral/index.d.ts +1 -0
- package/dist/components/toast/Toast.stories.d.ts +5 -0
- package/dist/components/toast/index.d.ts +12 -0
- package/dist/hooks/useToast.d.ts +6 -0
- package/dist/index.d.ts +1 -0
- package/dist/theme/provider/index.d.ts +1 -1
- package/dist/ui-core.cjs.development.js +88 -5
- package/dist/ui-core.cjs.development.js.map +1 -1
- package/dist/ui-core.cjs.production.min.js +1 -1
- package/dist/ui-core.cjs.production.min.js.map +1 -1
- package/dist/ui-core.esm.js +88 -6
- package/dist/ui-core.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/icons/neutral/index.tsx +3 -2
- package/src/components/icons/neutral/neutral.svg +1 -1
- package/src/components/toast/Toast.stories.tsx +52 -0
- package/src/components/toast/index.tsx +78 -0
- package/src/hooks/useToast.tsx +13 -0
- package/src/index.tsx +1 -0
- package/src/theme/provider/index.tsx +1 -1
package/dist/ui-core.esm.js
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import React__default, { memo, forwardRef, createElement, useMemo, useCallback, useRef, useEffect, useState } from 'react';
|
|
2
|
-
import { Button as Button$2, Alert as Alert$1, AlertDescription, Flex, Box, Text as Text$2, Spinner, Checkbox, InputGroup, Input as Input$2, RadioGroup, Radio, InputRightElement, Textarea as Textarea$1, useOutsideClick, Switch as Switch$1, FormLabel as FormLabel$1, Tooltip, FormControl, FormErrorMessage, FormHelperText, SimpleGrid, useMediaQuery, Grid, GridItem, IconButton, Collapse, Link as Link$2, Table as Table$2, Tbody, Tr, Td, TableContainer, Thead, Th, Tabs as Tabs$1, TabList, Tab, extendTheme } from '@chakra-ui/react';
|
|
2
|
+
import { Button as Button$2, Alert as Alert$1, AlertDescription, Flex, Box, Text as Text$2, Spinner, Checkbox, InputGroup, Input as Input$2, RadioGroup, Radio, InputRightElement, Textarea as Textarea$1, useOutsideClick, Switch as Switch$1, FormLabel as FormLabel$1, Tooltip, FormControl, FormErrorMessage, FormHelperText, SimpleGrid, useMediaQuery, Grid, GridItem, IconButton, Collapse, Link as Link$2, Table as Table$2, Tbody, Tr, Td, TableContainer, Thead, Th, Tabs as Tabs$1, TabList, Tab, extendTheme, ChakraProvider, useToast as useToast$1 } from '@chakra-ui/react';
|
|
3
3
|
import { FormProvider, useWatch, Controller } from 'react-hook-form';
|
|
4
4
|
import { debounce, truncate } from 'lodash-es';
|
|
5
5
|
import { QuestionOutlineIcon, CloseIcon, HamburgerIcon } from '@chakra-ui/icons';
|
|
6
6
|
import { Link as Link$3 } from 'react-router-dom';
|
|
7
7
|
import { HiOutlineRefresh } from 'react-icons/hi';
|
|
8
|
-
import { ChakraProvider } from '@chakra-ui/provider';
|
|
9
8
|
import { createBreakpoints, transparentize, mode, getColor } from '@chakra-ui/theme-tools';
|
|
10
9
|
import { defineStyle } from '@chakra-ui/system';
|
|
11
10
|
|
|
@@ -84,7 +83,7 @@ var SvgNeutral = function SvgNeutral(props, ref) {
|
|
|
84
83
|
ref: ref
|
|
85
84
|
}, props), _path$1 || (_path$1 = /*#__PURE__*/createElement("path", {
|
|
86
85
|
d: "M7 4.5V4a.5.5 0 0 0-.5.5H7Zm.005 0h.5a.5.5 0 0 0-.5-.5v.5Zm0 .005v.5a.5.5 0 0 0 .5-.5h-.5Zm-.005 0h-.5a.5.5 0 0 0 .5.5v-.5Zm-.724 1.548a.5.5 0 1 0 .448.894l-.448-.894Zm.252.433-.224-.447.224.447Zm.708.569.485.12-.485-.12Zm-.472 1.89-.485-.12.485.12Zm.708.569.224.447-.224-.447Zm.252.433a.5.5 0 1 0-.448-.894l.448.894ZM12.5 7A5.5 5.5 0 0 1 7 12.5v1A6.5 6.5 0 0 0 13.5 7h-1ZM7 12.5A5.5 5.5 0 0 1 1.5 7h-1A6.5 6.5 0 0 0 7 13.5v-1ZM1.5 7A5.5 5.5 0 0 1 7 1.5v-1A6.5 6.5 0 0 0 .5 7h1ZM7 1.5A5.5 5.5 0 0 1 12.5 7h1A6.5 6.5 0 0 0 7 .5v1ZM7 5h.005V4H7v1Zm-.495-.5v.005h1V4.5h-1Zm.5-.495H7v1h.005v-1Zm.495.5V4.5h-1v.005h1Zm-.776 2.442.027-.014-.447-.894-.028.014.448.894Zm.027-.014L6.28 8.824l.97.243.472-1.891-.97-.243Zm.945 3.028.028-.014-.448-.894-.027.014.447.894ZM6.279 8.824a1 1 0 0 0 1.417 1.137l-.447-.894-.97-.243Zm.472-1.89.97.242a1 1 0 0 0-1.417-1.137l.447.894Z",
|
|
87
|
-
fill: "
|
|
86
|
+
fill: "current",
|
|
88
87
|
fillOpacity: 0.6
|
|
89
88
|
})));
|
|
90
89
|
};
|
|
@@ -96,9 +95,11 @@ var Memo$1 = /*#__PURE__*/memo(ForwardRef$1);
|
|
|
96
95
|
*/
|
|
97
96
|
|
|
98
97
|
var Neutral = function Neutral(_ref) {
|
|
99
|
-
var
|
|
98
|
+
var color = _ref.color,
|
|
99
|
+
boxSize = _ref.boxSize;
|
|
100
100
|
return /*#__PURE__*/React__default.createElement(Memo$1, {
|
|
101
|
-
boxSize: boxSize
|
|
101
|
+
boxSize: boxSize,
|
|
102
|
+
fill: color || '#3C3C43'
|
|
102
103
|
});
|
|
103
104
|
};
|
|
104
105
|
|
|
@@ -4310,6 +4311,87 @@ var Toolbar = function Toolbar(_ref) {
|
|
|
4310
4311
|
}, children, " ")));
|
|
4311
4312
|
};
|
|
4312
4313
|
|
|
4314
|
+
/**
|
|
4315
|
+
* A functional React component utilized to render the `Toast` component
|
|
4316
|
+
*/
|
|
4317
|
+
|
|
4318
|
+
var Toast = function Toast(_ref) {
|
|
4319
|
+
var variant = _ref.variant,
|
|
4320
|
+
message = _ref.message,
|
|
4321
|
+
buttonText = _ref.buttonText,
|
|
4322
|
+
onClick = _ref.onClick;
|
|
4323
|
+
var Icon = useMemo(function () {
|
|
4324
|
+
switch (variant) {
|
|
4325
|
+
case 'error':
|
|
4326
|
+
return /*#__PURE__*/React__default.createElement(Error$1, {
|
|
4327
|
+
boxSize: "16px"
|
|
4328
|
+
});
|
|
4329
|
+
|
|
4330
|
+
case 'neutral':
|
|
4331
|
+
return /*#__PURE__*/React__default.createElement(Neutral, {
|
|
4332
|
+
boxSize: "16px",
|
|
4333
|
+
color: "white"
|
|
4334
|
+
});
|
|
4335
|
+
|
|
4336
|
+
case 'positive':
|
|
4337
|
+
return /*#__PURE__*/React__default.createElement(Positive, {
|
|
4338
|
+
boxSize: "16px"
|
|
4339
|
+
});
|
|
4340
|
+
|
|
4341
|
+
case 'warning':
|
|
4342
|
+
return /*#__PURE__*/React__default.createElement(Warning, {
|
|
4343
|
+
boxSize: "16px"
|
|
4344
|
+
});
|
|
4345
|
+
|
|
4346
|
+
default:
|
|
4347
|
+
return null;
|
|
4348
|
+
}
|
|
4349
|
+
}, [variant]);
|
|
4350
|
+
return /*#__PURE__*/React__default.createElement(Flex, {
|
|
4351
|
+
alignItems: "center",
|
|
4352
|
+
width: "fit-content",
|
|
4353
|
+
height: "32px",
|
|
4354
|
+
p: "8px",
|
|
4355
|
+
bg: "#151515D9",
|
|
4356
|
+
borderColor: "#9999991A",
|
|
4357
|
+
borderRadius: "8px"
|
|
4358
|
+
}, /*#__PURE__*/React__default.createElement(Box, {
|
|
4359
|
+
pr: "8px"
|
|
4360
|
+
}, Icon), /*#__PURE__*/React__default.createElement(Text$2, {
|
|
4361
|
+
pr: "16px",
|
|
4362
|
+
fontSize: "13px",
|
|
4363
|
+
color: colors.label.primary.dark
|
|
4364
|
+
}, message), onClick && buttonText && /*#__PURE__*/React__default.createElement(Flex, {
|
|
4365
|
+
ml: "auto",
|
|
4366
|
+
justifyContent: "flex-end"
|
|
4367
|
+
}, /*#__PURE__*/React__default.createElement(Button$2, {
|
|
4368
|
+
color: colors.fill.action,
|
|
4369
|
+
style: {
|
|
4370
|
+
background: 'transparent',
|
|
4371
|
+
border: 'transparent',
|
|
4372
|
+
boxShadow: 'none'
|
|
4373
|
+
},
|
|
4374
|
+
_hover: {
|
|
4375
|
+
bg: 'transparent',
|
|
4376
|
+
border: 'transparent',
|
|
4377
|
+
boxShadow: 'none'
|
|
4378
|
+
},
|
|
4379
|
+
onClick: onClick
|
|
4380
|
+
}, buttonText)));
|
|
4381
|
+
};
|
|
4382
|
+
|
|
4383
|
+
var useToast = function useToast(props) {
|
|
4384
|
+
var toast = useToast$1();
|
|
4385
|
+
return function () {
|
|
4386
|
+
return toast({
|
|
4387
|
+
position: props.position,
|
|
4388
|
+
render: function render() {
|
|
4389
|
+
return /*#__PURE__*/React__default.createElement(Toast, Object.assign({}, props));
|
|
4390
|
+
}
|
|
4391
|
+
});
|
|
4392
|
+
};
|
|
4393
|
+
};
|
|
4394
|
+
|
|
4313
4395
|
function formatErrorResponse(error) {
|
|
4314
4396
|
var _error$response, _error$response$data;
|
|
4315
4397
|
|
|
@@ -4336,5 +4418,5 @@ function formatErrorResponse(error) {
|
|
|
4336
4418
|
};
|
|
4337
4419
|
}
|
|
4338
4420
|
|
|
4339
|
-
export { Banner, Breadcrumbs, Button, Checkmark, ChevronDown, ChevronRight, Clock, Close, Dropdown$1 as Dropdown, Error$1 as Error, FileFill, FileOutline, FolderAddFill, FolderAddOutline, FolderFill, FolderOutline, Form, FormSection, Google, GoogleButton, GoogleDrive, Group, Home, Image, Input, Layout, Link, LoadingIndicator, Menu, Microsoft, MicrosoftButton, MicrosoftOneDrive, NavigationMenu, Neutral, Positive, Search, Settings, SpinnerButton, Table, TableFill, TableOutline, TabsWrapper, Text, Toolbar, Trash, Warning, XQThemeProvider, colors, formatErrorResponse };
|
|
4421
|
+
export { Banner, Breadcrumbs, Button, Checkmark, ChevronDown, ChevronRight, Clock, Close, Dropdown$1 as Dropdown, Error$1 as Error, FileFill, FileOutline, FolderAddFill, FolderAddOutline, FolderFill, FolderOutline, Form, FormSection, Google, GoogleButton, GoogleDrive, Group, Home, Image, Input, Layout, Link, LoadingIndicator, Menu, Microsoft, MicrosoftButton, MicrosoftOneDrive, NavigationMenu, Neutral, Positive, Search, Settings, SpinnerButton, Table, TableFill, TableOutline, TabsWrapper, Text, Toolbar, Trash, Warning, XQThemeProvider, colors, formatErrorResponse, useToast };
|
|
4340
4422
|
//# sourceMappingURL=ui-core.esm.js.map
|