@mrshmllw/smores-react 2.18.5 → 2.18.6
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/SearchInput/SearchInput.js +6 -1
- package/dist/SearchInput/SearchInput.js.map +1 -1
- package/dist/SearchInput/SearchOptions.js +8 -3
- package/dist/SearchInput/SearchOptions.js.map +1 -1
- package/dist/fields/Fieldset/Fieldset.stories.d.ts +1 -0
- package/dist/fields/Fieldset/Fieldset.stories.js +2 -0
- package/dist/fields/Fieldset/Fieldset.stories.js.map +1 -1
- package/dist/fields/commonFieldTypes.d.ts +1 -0
- package/dist/fields/components/InternalField.d.ts +1 -1
- package/dist/fields/components/InternalField.js +29 -3
- package/dist/fields/components/InternalField.js.map +1 -1
- package/package.json +1 -1
|
@@ -66,7 +66,12 @@ export const SearchInput = forwardRef(function SearchInput(_a, ref) {
|
|
|
66
66
|
return (React.createElement(Field, Object.assign({ className: className, renderAsTitle: renderAsTitle, htmlFor: id, outlined: outlined }, otherProps),
|
|
67
67
|
React.createElement(StyledInputBox, { outlined: outlined, selected: isSelected },
|
|
68
68
|
showIcon && React.createElement(SearchIcon, { size: 24, render: "search", color: "subtext" }),
|
|
69
|
-
React.createElement(StyledInput, { ref: ref, id: id, type: "text", name: name, placeholder: placeholder, autoComplete: "off", value: displayedInputText, onChange: handleInputChange, outlined: outlined, selected: isSelected, onBlur:
|
|
69
|
+
React.createElement(StyledInput, { ref: ref, id: id, type: "text", name: name, placeholder: placeholder, autoComplete: "off", value: displayedInputText, onChange: handleInputChange, outlined: outlined, selected: isSelected, onBlur: (e) => {
|
|
70
|
+
if (displayedInputText === '') {
|
|
71
|
+
setSearchQuery(null);
|
|
72
|
+
}
|
|
73
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
|
|
74
|
+
} })),
|
|
70
75
|
showOptions && (React.createElement(SearchOptions, { displayedList: filteredList, onSelect: handleSelect, outlined: outlined, positionRelative: resultsRelativePosition }))));
|
|
71
76
|
});
|
|
72
77
|
const StyledInputBox = styled.div `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../src/SearchInput/SearchInput.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../src/SearchInput/SearchInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,16 +1,18 @@
|
|
|
1
|
+
import { Box } from '../Box';
|
|
1
2
|
import React from 'react';
|
|
2
3
|
import styled from 'styled-components';
|
|
3
4
|
import { theme } from '../theme';
|
|
4
5
|
export const SearchOptions = ({ displayedList, onSelect, outlined, positionRelative, }) => {
|
|
5
|
-
return (React.createElement(
|
|
6
|
-
React.createElement(
|
|
6
|
+
return (React.createElement(BoxWithPositionRelative, null,
|
|
7
|
+
React.createElement(StyledResultsContainer, { positionRelative: positionRelative, outlined: outlined },
|
|
8
|
+
React.createElement(ResultsList, { outlined: outlined }, displayedList.length ? (displayedList.map((el, i) => (React.createElement("li", { key: i, onClick: () => onSelect(el) }, el.label)))) : (React.createElement("li", null, "No results"))))));
|
|
7
9
|
};
|
|
8
10
|
const StyledResultsContainer = styled.div `
|
|
9
11
|
box-sizing: border-box;
|
|
10
12
|
overflow-y: hidden;
|
|
11
13
|
${({ positionRelative }) => !positionRelative && 'position: absolute;'}
|
|
12
14
|
width: 100%;
|
|
13
|
-
${({ outlined }) => outlined && 'left: 0px; top:
|
|
15
|
+
${({ outlined }) => outlined && 'left: 0px; top: -8px;'};
|
|
14
16
|
|
|
15
17
|
ul {
|
|
16
18
|
max-height: 192px;
|
|
@@ -45,4 +47,7 @@ const ResultsList = styled.ul `
|
|
|
45
47
|
}
|
|
46
48
|
}
|
|
47
49
|
`;
|
|
50
|
+
const BoxWithPositionRelative = styled(Box) `
|
|
51
|
+
position: relative;
|
|
52
|
+
`;
|
|
48
53
|
//# sourceMappingURL=SearchOptions.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchOptions.js","sourceRoot":"","sources":["../../src/SearchInput/SearchOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAchC,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,gBAAgB,GACjB,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,sBAAsB,IACrB,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,QAAQ;
|
|
1
|
+
{"version":3,"file":"SearchOptions.js","sourceRoot":"","sources":["../../src/SearchInput/SearchOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAchC,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,gBAAgB,GACjB,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,uBAAuB;QACtB,oBAAC,sBAAsB,IACrB,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,QAAQ;YAElB,oBAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,IAC5B,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CACtB,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAC3B,4BAAI,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,IACpC,EAAE,CAAC,KAAK,CACN,CACN,CAAC,CACH,CAAC,CAAC,CAAC,CACF,6CAAmB,CACpB,CACW,CACS,CACD,CAC3B,CAAA;AACH,CAAC,CAAA;AAED,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAExC;;;IAGG,CAAC,EAAE,gBAAgB,EAAE,EAAE,EAAE,CAAC,CAAC,gBAAgB,IAAI,qBAAqB;;IAEpE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,IAAI,uBAAuB;;;;;CAKxD,CAAA;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,EAAE,CAAsC;;;;;;sBAM7C,KAAK,CAAC,MAAM,CAAC,KAAK;sBAClB,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;IAKtC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjB,QAAQ;IACR;wBACoB,KAAK,CAAC,MAAM,CAAC,OAAO;GACzC;;;;;;aAMU,KAAK,CAAC,MAAM,CAAC,SAAS;;;;0BAIT,KAAK,CAAC,MAAM,CAAC,UAAU;;;CAGhD,CAAA;AAED,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAE1C,CAAA"}
|
|
@@ -19,4 +19,6 @@ export const WithError = Template.bind({});
|
|
|
19
19
|
WithError.args = Object.assign(Object.assign({}, defaultArgs), { error: true, errorMsg: 'This is an error message describing what is wrong' });
|
|
20
20
|
export const WithSmallLabel = Template.bind({});
|
|
21
21
|
WithSmallLabel.args = Object.assign(Object.assign({}, defaultArgs), { renderAsTitle: false });
|
|
22
|
+
export const WithCompletedStatus = Template.bind({});
|
|
23
|
+
WithCompletedStatus.args = Object.assign(Object.assign({}, defaultArgs), { showCompletedStatus: true });
|
|
22
24
|
//# sourceMappingURL=Fieldset.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Fieldset.stories.js","sourceRoot":"","sources":["../../../src/fields/Fieldset/Fieldset.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAA;AAEpD,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,QAAQ;CACpB,CAAA;AAED,MAAM,WAAW,GAAkB;IACjC,KAAK,EAAE,gBAAgB;IACvB,aAAa,EAAE,sCAAsC;IACrD,aAAa,EAAE,IAAI;IACnB,QAAQ,EAAE,KAAK;CAChB,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE,CAAC,CACzC,oBAAC,QAAQ,oBAAK,KAAK;IACjB,oBAAC,WAAW,OAAG,CACN,CACZ,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG,WAAW,CAAA;AAE1B,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1C,SAAS,CAAC,IAAI,mCACT,WAAW,KACd,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,mDAAmD,GAC9D,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE/C,cAAc,CAAC,IAAI,mCACd,WAAW,KACd,aAAa,EAAE,KAAK,GACrB,CAAA"}
|
|
1
|
+
{"version":3,"file":"Fieldset.stories.js","sourceRoot":"","sources":["../../../src/fields/Fieldset/Fieldset.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAA;AAEpD,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,QAAQ;CACpB,CAAA;AAED,MAAM,WAAW,GAAkB;IACjC,KAAK,EAAE,gBAAgB;IACvB,aAAa,EAAE,sCAAsC;IACrD,aAAa,EAAE,IAAI;IACnB,QAAQ,EAAE,KAAK;CAChB,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE,CAAC,CACzC,oBAAC,QAAQ,oBAAK,KAAK;IACjB,oBAAC,WAAW,OAAG,CACN,CACZ,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG,WAAW,CAAA;AAE1B,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1C,SAAS,CAAC,IAAI,mCACT,WAAW,KACd,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,mDAAmD,GAC9D,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE/C,cAAc,CAAC,IAAI,mCACd,WAAW,KACd,aAAa,EAAE,KAAK,GACrB,CAAA;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEpD,mBAAmB,CAAC,IAAI,mCACnB,WAAW,KACd,mBAAmB,EAAE,IAAI,GAC1B,CAAA"}
|
|
@@ -7,5 +7,5 @@ interface InternalFieldProps extends InternalCommonFieldProps {
|
|
|
7
7
|
htmlFor?: string;
|
|
8
8
|
fieldType: 'field' | 'fieldset';
|
|
9
9
|
}
|
|
10
|
-
export declare const InternalField: ({ children, fieldType, renderAsTitle, htmlFor, className, label, assistiveText, outlined, error, errorMsg, required, ...marginProps }: InternalFieldProps) => JSX.Element;
|
|
10
|
+
export declare const InternalField: ({ children, fieldType, renderAsTitle, htmlFor, className, label, assistiveText, outlined, error, errorMsg, required, completed, ...marginProps }: InternalFieldProps) => JSX.Element;
|
|
11
11
|
export {};
|
|
@@ -10,11 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import React from 'react';
|
|
13
|
-
import styled from 'styled-components';
|
|
13
|
+
import styled, { css } from 'styled-components';
|
|
14
14
|
import { Text } from '../../Text';
|
|
15
15
|
import { Box } from '../../Box';
|
|
16
|
+
import { Icon } from '../../Icon';
|
|
16
17
|
export const InternalField = (_a) => {
|
|
17
|
-
var { children, fieldType, renderAsTitle, htmlFor, className, label, assistiveText, outlined = false, error, errorMsg, required } = _a, marginProps = __rest(_a, ["children", "fieldType", "renderAsTitle", "htmlFor", "className", "label", "assistiveText", "outlined", "error", "errorMsg", "required"]);
|
|
18
|
+
var { children, fieldType, renderAsTitle, htmlFor, className, label, assistiveText, outlined = false, error, errorMsg, required, completed } = _a, marginProps = __rest(_a, ["children", "fieldType", "renderAsTitle", "htmlFor", "className", "label", "assistiveText", "outlined", "error", "errorMsg", "required", "completed"]);
|
|
18
19
|
const labelTag = fieldType === 'field' ? 'label' : 'legend';
|
|
19
20
|
return (React.createElement(Container, Object.assign({ as: fieldType === 'field' ? 'div' : 'fieldset', className: className }, marginProps),
|
|
20
21
|
label && (React.createElement(React.Fragment, null, renderAsTitle ? (React.createElement(Box, { mb: "16px" },
|
|
@@ -23,8 +24,33 @@ export const InternalField = (_a) => {
|
|
|
23
24
|
label,
|
|
24
25
|
required && (React.createElement(Text, { tag: "span", typo: "body-small", color: "error" }, "*")))))),
|
|
25
26
|
React.createElement(Box, null, children),
|
|
26
|
-
error && errorMsg && (React.createElement(Text, { tag: "span", typo: "caption", color: "error", mt: "8px" }, errorMsg))
|
|
27
|
+
error && errorMsg && (React.createElement(Text, { tag: "span", typo: "caption", color: "error", mt: "8px" }, errorMsg)),
|
|
28
|
+
completed !== undefined && (React.createElement(AnimationWrapper, { displayStatus: completed, isError: !!(error && errorMsg) },
|
|
29
|
+
React.createElement(StatusWrapper, { mt: '8px' },
|
|
30
|
+
React.createElement(Icon, { render: "included", size: 16, color: "success" }),
|
|
31
|
+
React.createElement(Text, { typo: "caption", color: "success" }, "Complete"))))));
|
|
27
32
|
};
|
|
33
|
+
const AnimationWrapper = styled(Box) `
|
|
34
|
+
width: 0;
|
|
35
|
+
overflow: hidden;
|
|
36
|
+
|
|
37
|
+
${({ displayStatus }) => displayStatus &&
|
|
38
|
+
css `
|
|
39
|
+
transition: width 0.6s ease-in;
|
|
40
|
+
width: 100%;
|
|
41
|
+
`}
|
|
42
|
+
|
|
43
|
+
/* This enables animation to appear when previous state is error */
|
|
44
|
+
${({ isError }) => isError &&
|
|
45
|
+
css `
|
|
46
|
+
height: 0;
|
|
47
|
+
`}
|
|
48
|
+
`;
|
|
49
|
+
const StatusWrapper = styled(Box) `
|
|
50
|
+
display: flex;
|
|
51
|
+
align-items: center;
|
|
52
|
+
gap: 4px;
|
|
53
|
+
`;
|
|
28
54
|
const Container = styled(Box) `
|
|
29
55
|
display: flex;
|
|
30
56
|
flex-direction: column;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InternalField.js","sourceRoot":"","sources":["../../../src/fields/components/InternalField.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,MAAM,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"InternalField.js","sourceRoot":"","sources":["../../../src/fields/components/InternalField.tsx"],"names":[],"mappings":"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"}
|