alicia-design-system 1.71.3 → 1.71.4
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.
|
@@ -21,7 +21,7 @@ const Search = ({ query, options = [], loading = false, isError, withRightIcon =
|
|
|
21
21
|
const ArrowIcon = (0, icons_1.ArrowForwardIcon)({ fillColor: 'text' });
|
|
22
22
|
const Magnify = (0, icons_1.SearchIcon)({ fillColor: 'text' });
|
|
23
23
|
const [hoverValue, setHoverValue] = (0, react_1.useState)();
|
|
24
|
-
return ((0, jsx_runtime_1.jsxs)(react_2.Flex, Object.assign({ direction: "column" }, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, Object.assign({ position: "relative", overflow: "hidden", px: (0, polished_1.rem)(showBackdrop ? 24 : 0), pt: (0, polished_1.rem)(showBackdrop ? 24 : 0), direction: "column", bg: showBackdrop ? backgroundColor : 'transparent', borderRadius: (0, polished_1.rem)(25) }, { children: [showBackdrop && ((0, jsx_runtime_1.jsx)(react_2.Box, { pos: "absolute", right: "40px", top: "0", height: "100%", width: "34px", bg: backgroundColor, transform: "skewX(-1.2deg)", borderRadius: (0, polished_1.rem)(25), borderTopLeftRadius: 0 })), (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_2.Input, { autoFocus: true, _placeholder: { opacity: 0.5 }, borderBottomColor: isError ? 'error' : 'backgroundSecondary', color: isError ? 'error' : 'text', fontSize: 20, fontWeight: 400, value: query, variant: "flushed", placeholder: placeholder, onChange: (e) => setQuery(e.target.value) }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, Object.assign({ onClick: () => setQuery('') }, { children: (0, jsx_runtime_1.jsx)(react_2.Flex, Object.assign({ h: "inherit", w: "inherit", cursor: "pointer", justifyContent: "center", alignItems: "center" }, { children: query !== '' ? ((0, jsx_runtime_1.jsx)(Cancel, {})) : ((0, jsx_runtime_1.jsx)(Magnify, { height: (0, polished_1.rem)(28), width: (0, polished_1.rem)(28) })) })) }))] }), loading ? ((0, jsx_runtime_1.jsx)(react_2.Flex, Object.assign({
|
|
24
|
+
return ((0, jsx_runtime_1.jsxs)(react_2.Flex, Object.assign({ direction: "column" }, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, Object.assign({ position: "relative", overflow: "hidden", px: (0, polished_1.rem)(showBackdrop ? 24 : 0), pt: (0, polished_1.rem)(showBackdrop ? 24 : 0), direction: "column", bg: showBackdrop ? backgroundColor : 'transparent', borderRadius: (0, polished_1.rem)(25) }, { children: [showBackdrop && ((0, jsx_runtime_1.jsx)(react_2.Box, { pos: "absolute", right: "40px", top: "0", height: "100%", width: "34px", bg: backgroundColor, transform: "skewX(-1.2deg)", borderRadius: (0, polished_1.rem)(25), borderTopLeftRadius: 0 })), (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_2.Input, { autoFocus: true, _placeholder: { opacity: 0.5 }, borderBottomColor: isError ? 'error' : 'backgroundSecondary', color: isError ? 'error' : 'text', fontSize: 20, fontWeight: 400, value: query, variant: "flushed", placeholder: placeholder, onChange: (e) => setQuery(e.target.value) }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, Object.assign({ onClick: () => setQuery('') }, { children: (0, jsx_runtime_1.jsx)(react_2.Flex, Object.assign({ h: "inherit", w: "inherit", cursor: "pointer", justifyContent: "center", alignItems: "center" }, { children: query !== '' ? ((0, jsx_runtime_1.jsx)(Cancel, {})) : ((0, jsx_runtime_1.jsx)(Magnify, { height: (0, polished_1.rem)(28), width: (0, polished_1.rem)(28) })) })) }))] }), loading ? ((0, jsx_runtime_1.jsx)(react_2.Flex, Object.assign({ my: 8, justifyContent: "center" }, { children: (0, jsx_runtime_1.jsx)(react_2.Spinner, {}) }))) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, Object.assign({ mt: showResultHeading ? 8 : 2, mb: (0, polished_1.rem)(24), direction: "column", zIndex: 6 }, { children: [showResultHeading && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: customListHeading !== null && customListHeading !== void 0 ? customListHeading : (!!(options === null || options === void 0 ? void 0 : options.length) && ((0, jsx_runtime_1.jsxs)(react_2.Text, Object.assign({ color: "text", fontSize: 16, fontWeight: 700 }, { children: [options.length, " ", resultsText] })))) })), (0, jsx_runtime_1.jsx)(react_2.List, Object.assign({ mt: (0, polished_1.rem)(18), zIndex: "1" }, { children: options.map((option, i) => ((0, jsx_runtime_1.jsx)(react_2.ListItem, Object.assign({ color: "text", cursor: "pointer", onMouseEnter: () => setHoverValue(`${option.value}-${i}`), onClick: () => onClickItem(option), borderColor: "backgroundSecondary", fontSize: 20, mb: 3, pb: 3 }, { children: (0, jsx_runtime_1.jsxs)(react_2.Flex, Object.assign({ direction: "row", pos: "relative" }, { children: [(0, jsx_runtime_1.jsx)(react_2.Flex, Object.assign({ flex: 8, overflow: "auto" }, { children: renderItem
|
|
25
25
|
? renderItem(option)
|
|
26
26
|
: (0, exports.boldedText)({
|
|
27
27
|
text: option.label,
|
|
@@ -17,7 +17,7 @@ export const Search = ({ query, options = [], loading = false, isError, withRigh
|
|
|
17
17
|
const ArrowIcon = ArrowForwardIcon({ fillColor: 'text' });
|
|
18
18
|
const Magnify = SearchIcon({ fillColor: 'text' });
|
|
19
19
|
const [hoverValue, setHoverValue] = useState();
|
|
20
|
-
return (_jsxs(Flex, Object.assign({ direction: "column" }, { children: [_jsxs(Flex, Object.assign({ position: "relative", overflow: "hidden", px: rem(showBackdrop ? 24 : 0), pt: rem(showBackdrop ? 24 : 0), direction: "column", bg: showBackdrop ? backgroundColor : 'transparent', borderRadius: rem(25) }, { children: [showBackdrop && (_jsx(Box, { pos: "absolute", right: "40px", top: "0", height: "100%", width: "34px", bg: backgroundColor, transform: "skewX(-1.2deg)", borderRadius: rem(25), borderTopLeftRadius: 0 })), _jsxs(InputGroup, { children: [_jsx(Input, { autoFocus: true, _placeholder: { opacity: 0.5 }, borderBottomColor: isError ? 'error' : 'backgroundSecondary', color: isError ? 'error' : 'text', fontSize: 20, fontWeight: 400, value: query, variant: "flushed", placeholder: placeholder, onChange: (e) => setQuery(e.target.value) }), _jsx(InputRightElement, Object.assign({ onClick: () => setQuery('') }, { children: _jsx(Flex, Object.assign({ h: "inherit", w: "inherit", cursor: "pointer", justifyContent: "center", alignItems: "center" }, { children: query !== '' ? (_jsx(Cancel, {})) : (_jsx(Magnify, { height: rem(28), width: rem(28) })) })) }))] }), loading ? (_jsx(Flex, Object.assign({
|
|
20
|
+
return (_jsxs(Flex, Object.assign({ direction: "column" }, { children: [_jsxs(Flex, Object.assign({ position: "relative", overflow: "hidden", px: rem(showBackdrop ? 24 : 0), pt: rem(showBackdrop ? 24 : 0), direction: "column", bg: showBackdrop ? backgroundColor : 'transparent', borderRadius: rem(25) }, { children: [showBackdrop && (_jsx(Box, { pos: "absolute", right: "40px", top: "0", height: "100%", width: "34px", bg: backgroundColor, transform: "skewX(-1.2deg)", borderRadius: rem(25), borderTopLeftRadius: 0 })), _jsxs(InputGroup, { children: [_jsx(Input, { autoFocus: true, _placeholder: { opacity: 0.5 }, borderBottomColor: isError ? 'error' : 'backgroundSecondary', color: isError ? 'error' : 'text', fontSize: 20, fontWeight: 400, value: query, variant: "flushed", placeholder: placeholder, onChange: (e) => setQuery(e.target.value) }), _jsx(InputRightElement, Object.assign({ onClick: () => setQuery('') }, { children: _jsx(Flex, Object.assign({ h: "inherit", w: "inherit", cursor: "pointer", justifyContent: "center", alignItems: "center" }, { children: query !== '' ? (_jsx(Cancel, {})) : (_jsx(Magnify, { height: rem(28), width: rem(28) })) })) }))] }), loading ? (_jsx(Flex, Object.assign({ my: 8, justifyContent: "center" }, { children: _jsx(Spinner, {}) }))) : (_jsxs(Flex, Object.assign({ mt: showResultHeading ? 8 : 2, mb: rem(24), direction: "column", zIndex: 6 }, { children: [showResultHeading && (_jsx(_Fragment, { children: customListHeading !== null && customListHeading !== void 0 ? customListHeading : (!!(options === null || options === void 0 ? void 0 : options.length) && (_jsxs(Text, Object.assign({ color: "text", fontSize: 16, fontWeight: 700 }, { children: [options.length, " ", resultsText] })))) })), _jsx(List, Object.assign({ mt: rem(18), zIndex: "1" }, { children: options.map((option, i) => (_jsx(ListItem, Object.assign({ color: "text", cursor: "pointer", onMouseEnter: () => setHoverValue(`${option.value}-${i}`), onClick: () => onClickItem(option), borderColor: "backgroundSecondary", fontSize: 20, mb: 3, pb: 3 }, { children: _jsxs(Flex, Object.assign({ direction: "row", pos: "relative" }, { children: [_jsx(Flex, Object.assign({ flex: 8, overflow: "auto" }, { children: renderItem
|
|
21
21
|
? renderItem(option)
|
|
22
22
|
: boldedText({
|
|
23
23
|
text: option.label,
|