@popsure/dirty-swan 0.34.0 → 0.36.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.
Files changed (129) hide show
  1. package/dist/cjs/index.d.ts +1 -1
  2. package/dist/cjs/index.js +159 -114
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/cjs/lib/components/badge/index.d.ts +10 -0
  5. package/dist/cjs/lib/components/badge/index.stories.d.ts +34 -0
  6. package/dist/cjs/lib/components/badge/index.test.d.ts +1 -0
  7. package/dist/cjs/lib/components/cards/cardWithLeftIcon/index.d.ts +6 -3
  8. package/dist/cjs/lib/components/cards/cardWithLeftIcon/index.stories.d.ts +13 -2
  9. package/dist/cjs/lib/components/chip/index.d.ts +2 -1
  10. package/dist/cjs/lib/components/informationBox/index.d.ts +12 -0
  11. package/dist/cjs/lib/components/informationBox/index.stories.d.ts +35 -0
  12. package/dist/cjs/lib/components/informationBox/index.test.d.ts +1 -0
  13. package/dist/cjs/lib/components/input/autoSuggestInput/index.d.ts +7 -7
  14. package/dist/cjs/lib/components/input/autoSuggestInput/index.stories.d.ts +84 -0
  15. package/dist/cjs/lib/components/input/autoSuggestMultiSelect/index.d.ts +7 -7
  16. package/dist/cjs/lib/components/input/autoSuggestMultiSelect/index.stories.d.ts +77 -0
  17. package/dist/cjs/lib/components/link/index.d.ts +2 -0
  18. package/dist/cjs/lib/components/link/index.stories.d.ts +26 -0
  19. package/dist/cjs/lib/index.d.ts +6 -3
  20. package/dist/esm/components/autocompleteAddress/index.test.js +1 -1
  21. package/dist/esm/components/badge/index.js +27 -0
  22. package/dist/esm/components/badge/index.js.map +1 -0
  23. package/dist/esm/components/badge/index.stories.js +39 -0
  24. package/dist/esm/components/badge/index.stories.js.map +1 -0
  25. package/dist/esm/components/badge/index.test.js +21 -0
  26. package/dist/esm/components/badge/index.test.js.map +1 -0
  27. package/dist/esm/components/cards/cardButton/index.js +2 -1
  28. package/dist/esm/components/cards/cardButton/index.js.map +1 -1
  29. package/dist/esm/components/cards/cardButton/index.stories.js +2 -1
  30. package/dist/esm/components/cards/cardButton/index.stories.js.map +1 -1
  31. package/dist/esm/components/cards/cardWithLeftIcon/index.js +2 -1
  32. package/dist/esm/components/cards/cardWithLeftIcon/index.js.map +1 -1
  33. package/dist/esm/components/cards/cardWithLeftIcon/index.stories.js +15 -3
  34. package/dist/esm/components/cards/cardWithLeftIcon/index.stories.js.map +1 -1
  35. package/dist/esm/components/cards/cardWithTopIcon/index.js +2 -1
  36. package/dist/esm/components/cards/cardWithTopIcon/index.js.map +1 -1
  37. package/dist/esm/components/cards/cardWithTopIcon/index.stories.js +2 -1
  38. package/dist/esm/components/cards/cardWithTopIcon/index.stories.js.map +1 -1
  39. package/dist/esm/components/cards/cardWithTopLeftIcon/index.js +2 -1
  40. package/dist/esm/components/cards/cardWithTopLeftIcon/index.js.map +1 -1
  41. package/dist/esm/components/cards/cardWithTopLeftIcon/index.stories.js +2 -1
  42. package/dist/esm/components/cards/cardWithTopLeftIcon/index.stories.js.map +1 -1
  43. package/dist/esm/components/cards/index.js +7 -5
  44. package/dist/esm/components/cards/index.js.map +1 -1
  45. package/dist/esm/components/cards/infoCard/index.js +2 -1
  46. package/dist/esm/components/cards/infoCard/index.js.map +1 -1
  47. package/dist/esm/components/cards/infoCard/index.stories.js +2 -1
  48. package/dist/esm/components/cards/infoCard/index.stories.js.map +1 -1
  49. package/dist/esm/components/chip/index.js +2 -2
  50. package/dist/esm/components/chip/index.js.map +1 -1
  51. package/dist/esm/components/comparisonTable/components/TableButton/index.test.js +2 -2
  52. package/dist/esm/components/comparisonTable/components/TableRowHeader/index.test.js +2 -2
  53. package/dist/esm/components/dateSelector/index.test.js +1 -1
  54. package/dist/esm/components/informationBox/index.js +19 -0
  55. package/dist/esm/components/informationBox/index.js.map +1 -0
  56. package/dist/esm/components/informationBox/index.stories.js +42 -0
  57. package/dist/esm/components/informationBox/index.stories.js.map +1 -0
  58. package/dist/esm/components/informationBox/index.test.js +49 -0
  59. package/dist/esm/components/informationBox/index.test.js.map +1 -0
  60. package/dist/esm/components/input/autoSuggestInput/index.js +3 -3
  61. package/dist/esm/components/input/autoSuggestInput/index.js.map +1 -1
  62. package/dist/esm/components/input/autoSuggestInput/index.stories.js +131 -0
  63. package/dist/esm/components/input/autoSuggestInput/index.stories.js.map +1 -0
  64. package/dist/esm/components/input/autoSuggestMultiSelect/index.js +17 -13
  65. package/dist/esm/components/input/autoSuggestMultiSelect/index.js.map +1 -1
  66. package/dist/esm/components/input/autoSuggestMultiSelect/index.stories.js +107 -0
  67. package/dist/esm/components/input/autoSuggestMultiSelect/index.stories.js.map +1 -0
  68. package/dist/esm/components/input/checkbox/index.test.js +1 -1
  69. package/dist/esm/components/input/currency/index.test.js +1 -1
  70. package/dist/esm/components/link/index.js +11 -0
  71. package/dist/esm/components/link/index.js.map +1 -0
  72. package/dist/esm/components/link/index.stories.js +33 -0
  73. package/dist/esm/components/link/index.stories.js.map +1 -0
  74. package/dist/esm/components/multiDropzone/index.test.js +2 -2
  75. package/dist/esm/components/segmentedControl/index.test.js +1 -1
  76. package/dist/esm/{customRender-4157fcff.js → customRender-20b5f7ec.js} +3 -3
  77. package/dist/esm/{customRender-4157fcff.js.map → customRender-20b5f7ec.js.map} +1 -1
  78. package/dist/esm/{extend-expect-46bdce4a.js → extend-expect-25e5049d.js} +2 -2
  79. package/dist/esm/{extend-expect-46bdce4a.js.map → extend-expect-25e5049d.js.map} +1 -1
  80. package/dist/esm/feather-logo-a3f07990.js +4 -0
  81. package/dist/esm/feather-logo-a3f07990.js.map +1 -0
  82. package/dist/esm/{index-47663d39.js → index-29ac387a.js} +3 -4
  83. package/dist/esm/index-29ac387a.js.map +1 -0
  84. package/dist/esm/index.d.ts +1 -1
  85. package/dist/esm/index.js +7 -3
  86. package/dist/esm/index.js.map +1 -1
  87. package/dist/esm/lib/components/badge/index.d.ts +10 -0
  88. package/dist/esm/lib/components/badge/index.stories.d.ts +34 -0
  89. package/dist/esm/lib/components/badge/index.test.d.ts +1 -0
  90. package/dist/esm/lib/components/cards/cardWithLeftIcon/index.d.ts +6 -3
  91. package/dist/esm/lib/components/cards/cardWithLeftIcon/index.stories.d.ts +13 -2
  92. package/dist/esm/lib/components/chip/index.d.ts +2 -1
  93. package/dist/esm/lib/components/informationBox/index.d.ts +12 -0
  94. package/dist/esm/lib/components/informationBox/index.stories.d.ts +35 -0
  95. package/dist/esm/lib/components/informationBox/index.test.d.ts +1 -0
  96. package/dist/esm/lib/components/input/autoSuggestInput/index.d.ts +7 -7
  97. package/dist/esm/lib/components/input/autoSuggestInput/index.stories.d.ts +84 -0
  98. package/dist/esm/lib/components/input/autoSuggestMultiSelect/index.d.ts +7 -7
  99. package/dist/esm/lib/components/input/autoSuggestMultiSelect/index.stories.d.ts +77 -0
  100. package/dist/esm/lib/components/link/index.d.ts +2 -0
  101. package/dist/esm/lib/components/link/index.stories.d.ts +26 -0
  102. package/dist/esm/lib/index.d.ts +6 -3
  103. package/dist/esm/util/testUtils/customRender.js +1 -1
  104. package/package.json +1 -1
  105. package/src/index.tsx +3 -0
  106. package/src/lib/components/badge/index.stories.tsx +45 -0
  107. package/src/lib/components/badge/index.test.tsx +11 -0
  108. package/src/lib/components/badge/index.tsx +54 -0
  109. package/src/lib/components/badge/style.module.scss +13 -0
  110. package/src/lib/components/cards/cardWithLeftIcon/index.stories.tsx +15 -0
  111. package/src/lib/components/cards/cardWithLeftIcon/index.tsx +19 -5
  112. package/src/lib/components/chip/index.tsx +3 -1
  113. package/src/lib/components/informationBox/index.stories.tsx +51 -0
  114. package/src/lib/components/informationBox/index.test.tsx +55 -0
  115. package/src/lib/components/informationBox/index.tsx +65 -0
  116. package/src/lib/components/informationBox/info.svg +11 -0
  117. package/src/lib/components/informationBox/style.module.scss +62 -0
  118. package/src/lib/components/input/autoSuggestInput/index.stories.tsx +162 -0
  119. package/src/lib/components/input/autoSuggestInput/index.tsx +15 -13
  120. package/src/lib/components/input/autoSuggestMultiSelect/index.stories.tsx +125 -0
  121. package/src/lib/components/input/autoSuggestMultiSelect/index.tsx +42 -29
  122. package/src/lib/components/input/autoSuggestMultiSelect/style.module.scss +6 -0
  123. package/src/lib/components/link/index.stories.tsx +29 -0
  124. package/src/lib/components/link/index.tsx +9 -0
  125. package/src/lib/index.tsx +8 -2
  126. package/dist/esm/index-47663d39.js.map +0 -1
  127. package/src/lib/components/input/autoSuggestInput/index.stories.mdx +0 -138
  128. package/src/lib/components/input/autoSuggestMultiSelect/index.stories.mdx +0 -115
  129. package/src/lib/scss/private/components/badge.stories.mdx +0 -43
@@ -0,0 +1,131 @@
1
+ import { _ as __assign, d as __spreadArray } from '../../../tslib.es6-5bc94358.js';
2
+ import { jsx } from 'react/jsx-runtime';
3
+ import { useState } from 'react';
4
+ import { AutoSuggestInput } from './index.js';
5
+ import { f as featherLogo } from '../../../feather-logo-a3f07990.js';
6
+ import '../../../index-e9e37a34.js';
7
+ import '../../../index-171a0108.js';
8
+ import '../../../index-dd80248b.js';
9
+ import '../../../style-inject.es-1f59c1d0.js';
10
+ import '../index.js';
11
+ import '../../../index-fb46adf9.js';
12
+
13
+ var story = {
14
+ title: 'JSX/Inputs/AutoSuggestInput',
15
+ component: AutoSuggestInput,
16
+ argTypes: {
17
+ suggestions: {
18
+ description: 'List of suggestions that should be displayed to the respective input',
19
+ defaultValue: [
20
+ { value: 'feather', leftIcon: featherLogo },
21
+ { value: 'feather2', leftIcon: featherLogo },
22
+ {
23
+ value: 'feather3',
24
+ leftIcon: featherLogo,
25
+ },
26
+ {
27
+ value: 'dirtyswan',
28
+ leftIcon: featherLogo,
29
+ },
30
+ {
31
+ value: 'test value',
32
+ leftIcon: featherLogo,
33
+ },
34
+ ]
35
+ },
36
+ currentOption: {
37
+ defaultValue: 'feather',
38
+ description: 'Current input of the component by user',
39
+ },
40
+ placeholder: {
41
+ defaultValue: 'Placeholder',
42
+ description: 'Placeholder for DirtySwan Input component'
43
+ },
44
+ className: {
45
+ defaultValue: '',
46
+ description: 'Class name for the most parent element',
47
+ control: { type: 'text' }
48
+ },
49
+ wrapText: {
50
+ defaultValue: false,
51
+ description: 'Wether or not wrap the entries in the dropdown or hide overflown text',
52
+ },
53
+ inputProps: {
54
+ defaultValue: {},
55
+ description: 'Pass through arbitrary props to the input.',
56
+ control: { type: 'object' },
57
+ table: {
58
+ type: {
59
+ summary: 'InputHTMLAttributes'
60
+ },
61
+ },
62
+ },
63
+ handleSuggestionSelected: {
64
+ description: 'Function that runs when a suggestion is selected from the dropdown',
65
+ action: true,
66
+ table: {
67
+ category: 'Callbacks',
68
+ },
69
+ },
70
+ onChange: {
71
+ description: 'Function that is called when value of current input changes',
72
+ action: true,
73
+ table: {
74
+ category: 'Callbacks',
75
+ },
76
+ },
77
+ handleSuggestionFetchRequest: {
78
+ description: 'Function that allows control of which suggestions should be displayed',
79
+ action: true,
80
+ table: {
81
+ category: 'Callbacks',
82
+ },
83
+ },
84
+ handleSuggestionClearRequest: {
85
+ description: 'Function that runs when suggestions are cleared (eg. input removal, selecting suggestion)',
86
+ action: true,
87
+ table: {
88
+ category: 'Callbacks',
89
+ },
90
+ },
91
+ },
92
+ parameters: {
93
+ componentSubtitle: 'This component allows quick search via the input field to find an option for selection',
94
+ customTypes: {
95
+ Option: "interface Option {\n value: string; // value of option to be stored and displayed on UI\n leftIcon?: string; // image of the provided option to be displayed on UI\n}"
96
+ }
97
+ },
98
+ };
99
+ var AutoSuggestInputStory = function (_a) {
100
+ var _b = _a.currentOption, currentOption = _b === void 0 ? '' : _b, suggestions = _a.suggestions, handleSuggestionSelected = _a.handleSuggestionSelected, onChange = _a.onChange, handleSuggestionFetchRequest = _a.handleSuggestionFetchRequest, handleSuggestionClearRequest = _a.handleSuggestionClearRequest, placeholder = _a.placeholder, className = _a.className, wrapText = _a.wrapText, inputProps = _a.inputProps;
101
+ var _c = useState([]), selectedValues = _c[0], setSelectedValues = _c[1];
102
+ var _d = useState(currentOption), selectedOption = _d[0], setSelectedOption = _d[1];
103
+ var _e = useState([]), options = _e[0], setOptions = _e[1];
104
+ var handleSelected = function (value) {
105
+ handleSuggestionSelected(value);
106
+ var newSelectedOptions = __spreadArray(__spreadArray([], selectedValues), [value]);
107
+ setSelectedValues(newSelectedOptions);
108
+ setSelectedOption(value.value);
109
+ };
110
+ var handleFetchRequest = function (value) {
111
+ handleSuggestionFetchRequest(value);
112
+ var filteredOptions = options.filter(function (option) {
113
+ return option.value.toLowerCase().startsWith(option.value.toLowerCase());
114
+ });
115
+ setSelectedValues(filteredOptions);
116
+ };
117
+ var handleClearSuggestions = function () {
118
+ handleSuggestionClearRequest();
119
+ setOptions([]);
120
+ };
121
+ var handleOnChange = function (value) {
122
+ onChange(value);
123
+ setSelectedOption(value);
124
+ };
125
+ return (jsx("div", __assign({ style: { minHeight: '300px' } }, { children: jsx(AutoSuggestInput, { currentOption: selectedOption, suggestions: suggestions, handleSuggestionSelected: handleSelected, onChange: handleOnChange, handleSuggestionFetchRequest: handleFetchRequest, handleSuggestionClearRequest: handleClearSuggestions, placeholder: placeholder, className: className, wrapText: wrapText, inputProps: inputProps }, void 0) }), void 0));
126
+ };
127
+ AutoSuggestInputStory.storyName = "AutoSuggestInput";
128
+
129
+ export default story;
130
+ export { AutoSuggestInputStory };
131
+ //# sourceMappingURL=index.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/input/autoSuggestInput/index.stories.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { AutoSuggestInput, AutoSuggestInputProps } from '.';\nimport { Option } from '../../../models/autoSuggestInput';\nimport featherLogo from '../../cards/icons/feather-logo.svg';\n\nconst story = {\n title: 'JSX/Inputs/AutoSuggestInput',\n component: AutoSuggestInput,\n argTypes: {\n suggestions: {\n description: 'List of suggestions that should be displayed to the respective input',\n defaultValue: [\n { value: 'feather', leftIcon: featherLogo },\n { value: 'feather2', leftIcon: featherLogo },\n {\n value: 'feather3',\n leftIcon: featherLogo,\n },\n {\n value: 'dirtyswan',\n leftIcon: featherLogo,\n },\n {\n value: 'test value',\n leftIcon: featherLogo,\n },\n ]\n },\n currentOption: {\n defaultValue: 'feather',\n description: 'Current input of the component by user',\n },\n placeholder: {\n defaultValue: 'Placeholder',\n description: 'Placeholder for DirtySwan Input component'\n },\n className: {\n defaultValue: '',\n description: 'Class name for the most parent element',\n control: { type: 'text' }\n },\n wrapText: {\n defaultValue: false,\n description: 'Wether or not wrap the entries in the dropdown or hide overflown text',\n },\n inputProps: {\n defaultValue: {},\n description: 'Pass through arbitrary props to the input.',\n control: { type: 'object' },\n table: {\n type: { \n summary: 'InputHTMLAttributes'\n },\n },\n },\n handleSuggestionSelected: {\n description: 'Function that runs when a suggestion is selected from the dropdown',\n action: true,\n table: {\n category: 'Callbacks',\n },\n },\n onChange: {\n description: 'Function that is called when value of current input changes',\n action: true,\n table: {\n category: 'Callbacks',\n },\n },\n handleSuggestionFetchRequest: {\n description: 'Function that allows control of which suggestions should be displayed',\n action: true,\n table: {\n category: 'Callbacks',\n },\n },\n handleSuggestionClearRequest: {\n description: 'Function that runs when suggestions are cleared (eg. input removal, selecting suggestion)',\n action: true,\n table: {\n category: 'Callbacks',\n },\n },\n },\n parameters: {\n componentSubtitle: 'This component allows quick search via the input field to find an option for selection',\n customTypes: {\n Option: `interface Option {\n value: string; // value of option to be stored and displayed on UI\n leftIcon?: string; // image of the provided option to be displayed on UI\n}`\n }\n },\n};\n\nexport const AutoSuggestInputStory = ({\n currentOption = '', \n suggestions,\n handleSuggestionSelected,\n onChange,\n handleSuggestionFetchRequest,\n handleSuggestionClearRequest,\n placeholder,\n className,\n wrapText,\n inputProps,\n}: AutoSuggestInputProps) => {\n \n const [selectedValues, setSelectedValues] = useState<Option[]>([]);\n const [selectedOption, setSelectedOption] = useState(currentOption);\n const [options, setOptions] = useState([]);\n\n const handleSelected = (value: Option) => {\n handleSuggestionSelected(value);\n\n const newSelectedOptions = [...selectedValues, value];\n setSelectedValues(newSelectedOptions);\n setSelectedOption(value.value);\n };\n\n const handleFetchRequest = (value: Option) => {\n handleSuggestionFetchRequest(value);\n\n const filteredOptions = options.filter((option: Option) =>\n option.value.toLowerCase().startsWith(option.value.toLowerCase())\n );\n setSelectedValues(filteredOptions);\n };\n\n const handleClearSuggestions = () => {\n handleSuggestionClearRequest();\n\n setOptions([]);\n };\n\n const handleOnChange = (value: string) => {\n onChange(value);\n\n setSelectedOption(value);\n };\n\n return (\n <div style={{ minHeight: '300px' }}>\n <AutoSuggestInput\n currentOption={selectedOption}\n suggestions={suggestions}\n handleSuggestionSelected={handleSelected}\n onChange={handleOnChange}\n handleSuggestionFetchRequest={handleFetchRequest}\n handleSuggestionClearRequest={handleClearSuggestions}\n placeholder={placeholder}\n className={className}\n wrapText={wrapText}\n inputProps={inputProps}\n />\n </div>\n );\n};\n\nAutoSuggestInputStory.storyName = \"AutoSuggestInput\";\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}
@@ -2,26 +2,30 @@ import { _ as __assign, d as __spreadArray } from '../../../tslib.es6-5bc94358.j
2
2
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
3
3
  import { useState } from 'react';
4
4
  import Chip from '../../chip/index.js';
5
- import AutoSuggestInput from '../autoSuggestInput/index.js';
5
+ import { AutoSuggestInput } from '../autoSuggestInput/index.js';
6
6
  import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
7
- import '../../../index-e9e37a34.js';
7
+ import { c as classnames } from '../../../index-e9e37a34.js';
8
8
  import '../../../index-171a0108.js';
9
9
  import '../../../index-dd80248b.js';
10
10
  import '../index.js';
11
11
  import '../../../index-fb46adf9.js';
12
12
 
13
- var css_248z = ".style-module_chip-container__26s37 {\n display: flex;\n flex-wrap: wrap;\n}";
14
- var styles = {"chip-container":"style-module_chip-container__26s37"};
13
+ var css_248z = ".style-module_chip-container__26s37 {\n display: flex;\n flex-wrap: wrap;\n max-height: 10px;\n transition: 0.7s ease-in;\n}\n\n.style-module_appearIn__3XNel {\n max-height: 300px;\n}";
14
+ var styles = {"chip-container":"style-module_chip-container__26s37","appearIn":"style-module_appearIn__3XNel"};
15
15
  styleInject(css_248z);
16
16
 
17
- var index = (function (_a) {
17
+ var AutoSuggestMultiSelect = function (_a) {
18
+ var _b;
18
19
  var options = _a.options, selectedValues = _a.selectedValues, setValues = _a.setValues, placeholder = _a.placeholder, chipsListClassName = _a.chipsListClassName, multiSelectClassName = _a.multiSelectClassName, wrapText = _a.wrapText;
19
- var _b = useState([]), suggestions = _b[0], setSuggestions = _b[1];
20
- var _c = useState(''), currentOption = _c[0], setCurrentOption = _c[1];
21
- return (jsxs(Fragment, { children: [selectedValues && selectedValues.length > 0 && (jsx("div", __assign({ className: "mb8 " + styles['chip-container'] + " " + chipsListClassName }, { children: selectedValues.map(function (value, index) { return (jsx(Chip, { value: value, onRemove: function (value) {
22
- var newValues = __spreadArray([], selectedValues).filter(function (selectedValue) { return selectedValue.value !== value.value; });
23
- setValues(newValues);
24
- } }, value.value + "-" + index)); }) }), void 0)),
20
+ var _c = useState([]), suggestions = _c[0], setSuggestions = _c[1];
21
+ var _d = useState(''), currentOption = _d[0], setCurrentOption = _d[1];
22
+ var hasChips = Boolean(selectedValues && selectedValues.length > 0);
23
+ return (jsxs(Fragment, { children: [jsx("div", __assign({ className: classnames(styles['chip-container'], chipsListClassName, (_b = {},
24
+ _b[styles.appearIn] = hasChips,
25
+ _b)) }, { children: selectedValues && hasChips && (jsx(Fragment, { children: selectedValues.map(function (value, index) { return (jsx(Chip, { className: "mb16", value: value, onRemove: function (value) {
26
+ var newValues = __spreadArray([], selectedValues).filter(function (selectedValue) { return selectedValue.value !== value.value; });
27
+ setValues(newValues);
28
+ } }, value.value + "-" + index)); }) }, void 0)) }), void 0),
25
29
  jsx(AutoSuggestInput, { className: multiSelectClassName, placeholder: placeholder, onChange: setCurrentOption, handleSuggestionSelected: function (value) {
26
30
  var newSelectedOptions = selectedValues !== null && selectedValues !== void 0 ? selectedValues : [];
27
31
  newSelectedOptions === null || newSelectedOptions === void 0 ? void 0 : newSelectedOptions.push(value);
@@ -35,7 +39,7 @@ var index = (function (_a) {
35
39
  });
36
40
  setSuggestions(filteredOptions);
37
41
  }, currentOption: currentOption, suggestions: suggestions, handleSuggestionClearRequest: function () { return setSuggestions([]); }, wrapText: wrapText }, void 0)] }, void 0));
38
- });
42
+ };
39
43
 
40
- export default index;
44
+ export { AutoSuggestMultiSelect };
41
45
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/autoSuggestMultiSelect/index.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { Option } from '../../../models/autoSuggestInput';\nimport Chip from '../../chip';\nimport AutoSuggestInput from '../autoSuggestInput';\nimport styles from './style.module.scss';\n\nexport default ({\n options,\n selectedValues,\n setValues,\n placeholder,\n chipsListClassName,\n multiSelectClassName,\n wrapText,\n}: {\n options: Option[];\n selectedValues?: Option[];\n setValues: (values: Option[]) => void;\n placeholder: string;\n chipsListClassName?: string;\n multiSelectClassName?: string;\n wrapText?: boolean;\n}) => {\n const [suggestions, setSuggestions] = useState<Option[]>([]);\n const [currentOption, setCurrentOption] = useState('');\n\n return (\n <>\n {selectedValues && selectedValues.length > 0 && (\n <div\n className={`mb8 ${styles['chip-container']} ${chipsListClassName}`}\n >\n {selectedValues.map((value, index) => (\n <Chip\n key={`${value.value}-${index}`}\n value={value}\n onRemove={(value: Option) => {\n const newValues = [...selectedValues].filter(\n (selectedValue) => selectedValue.value !== value.value\n );\n setValues(newValues);\n }}\n />\n ))}\n </div>\n )}\n <AutoSuggestInput\n className={multiSelectClassName}\n placeholder={placeholder}\n onChange={setCurrentOption}\n handleSuggestionSelected={(value) => {\n const newSelectedOptions = selectedValues ?? [];\n newSelectedOptions?.push(value);\n setValues(newSelectedOptions);\n setCurrentOption('');\n }}\n handleSuggestionFetchRequest={({ value }) => {\n const filteredOptions = options.filter(\n (option) =>\n option.value.toLowerCase().startsWith(value.toLowerCase()) &&\n selectedValues?.find(\n (selectedValue) => selectedValue.value === option.value\n ) === undefined\n );\n setSuggestions(filteredOptions);\n }}\n currentOption={currentOption}\n suggestions={suggestions}\n handleSuggestionClearRequest={() => setSuggestions([])}\n wrapText={wrapText}\n />\n </>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;AAOA,aAAe,UAAC,EAgBf;QAfC,OAAO,aAAA,EACP,cAAc,oBAAA,EACd,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,kBAAkB,wBAAA,EAClB,oBAAoB,0BAAA,EACpB,QAAQ,cAAA;IAUF,IAAA,KAAgC,QAAQ,CAAW,EAAE,CAAC,EAArD,WAAW,QAAA,EAAE,cAAc,QAA0B,CAAC;IACvD,IAAA,KAAoC,QAAQ,CAAC,EAAE,CAAC,EAA/C,aAAa,QAAA,EAAE,gBAAgB,QAAgB,CAAC;IAEvD,QACEA,4BACG,cAAc,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC,KAC1CC,sBACE,SAAS,EAAE,SAAO,MAAM,CAAC,gBAAgB,CAAC,SAAI,kBAAoB,gBAEjE,cAAc,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,KAAK,IAAK,QACpCA,IAAC,IAAI,IAEH,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,UAAC,KAAa;wBACtB,IAAM,SAAS,GAAG,kBAAI,cAAc,EAAE,MAAM,CAC1C,UAAC,aAAa,IAAK,OAAA,aAAa,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,GAAA,CACvD,CAAC;wBACF,SAAS,CAAC,SAAS,CAAC,CAAC;qBACtB,IAPO,KAAK,CAAC,KAAK,SAAI,KAAO,CAQ9B,IACH,CAAC,YACE,CACP;YACDA,IAAC,gBAAgB,IACf,SAAS,EAAE,oBAAoB,EAC/B,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,gBAAgB,EAC1B,wBAAwB,EAAE,UAAC,KAAK;oBAC9B,IAAM,kBAAkB,GAAG,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,EAAE,CAAC;oBAChD,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,IAAI,CAAC,KAAK,CAAC,CAAC;oBAChC,SAAS,CAAC,kBAAkB,CAAC,CAAC;oBAC9B,gBAAgB,CAAC,EAAE,CAAC,CAAC;iBACtB,EACD,4BAA4B,EAAE,UAAC,EAAS;wBAAP,KAAK,WAAA;oBACpC,IAAM,eAAe,GAAG,OAAO,CAAC,MAAM,CACpC,UAAC,MAAM;wBACL,OAAA,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;4BAC1D,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,IAAI,CAClB,UAAC,aAAa,IAAK,OAAA,aAAa,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,GAAA,CACxD,MAAK,SAAS;qBAAA,CAClB,CAAC;oBACF,cAAc,CAAC,eAAe,CAAC,CAAC;iBACjC,EACD,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,4BAA4B,EAAE,cAAM,OAAA,cAAc,CAAC,EAAE,CAAC,GAAA,EACtD,QAAQ,EAAE,QAAQ,WAClB,YACD,EACH;AACJ,CAAC;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/autoSuggestMultiSelect/index.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { Option } from '../../../models/autoSuggestInput';\nimport Chip from '../../chip';\nimport { AutoSuggestInput } from '../autoSuggestInput';\nimport styles from './style.module.scss';\nimport classNames from 'classnames';\n\nexport interface AutoSuggestMultiSelectProps {\n options: Option[];\n selectedValues?: Option[];\n setValues: (values: Option[]) => void;\n placeholder: string;\n chipsListClassName?: string;\n multiSelectClassName?: string;\n wrapText?: boolean;\n}\n\nexport const AutoSuggestMultiSelect = ({\n options,\n selectedValues,\n setValues,\n placeholder,\n chipsListClassName,\n multiSelectClassName,\n wrapText,\n}: AutoSuggestMultiSelectProps) => {\n const [suggestions, setSuggestions] = useState<Option[]>([]);\n const [currentOption, setCurrentOption] = useState('');\n const hasChips = Boolean(selectedValues && selectedValues.length > 0);\n\n return (\n <>\n <div\n className={classNames(\n styles['chip-container'],\n chipsListClassName,\n {\n [styles.appearIn]: hasChips\n },\n )}\n >\n {selectedValues && hasChips && (\n <>\n {selectedValues.map((value, index) => (\n <Chip\n key={`${value.value}-${index}`}\n className=\"mb16\"\n value={value}\n onRemove={(value: Option) => {\n const newValues = [...selectedValues].filter(\n (selectedValue) => selectedValue.value !== value.value\n );\n setValues(newValues);\n }}\n />\n ))}\n </>\n )}\n </div>\n <AutoSuggestInput\n className={multiSelectClassName}\n placeholder={placeholder}\n onChange={setCurrentOption}\n handleSuggestionSelected={(value) => {\n const newSelectedOptions = selectedValues ?? [];\n newSelectedOptions?.push(value);\n setValues(newSelectedOptions);\n setCurrentOption('');\n }}\n handleSuggestionFetchRequest={({ value }) => {\n const filteredOptions = options.filter(\n (option) =>\n option.value.toLowerCase().startsWith(value.toLowerCase()) &&\n selectedValues?.find(\n (selectedValue) => selectedValue.value === option.value\n ) === undefined\n );\n setSuggestions(filteredOptions);\n }}\n currentOption={currentOption}\n suggestions={suggestions}\n handleSuggestionClearRequest={() => setSuggestions([])}\n wrapText={wrapText}\n />\n </>\n );\n};\n"],"names":["_jsxs","_jsx","classNames"],"mappings":";;;;;;;;;;;;;;;;IAkBa,sBAAsB,GAAG,UAAC,EAQT;;QAP5B,OAAO,aAAA,EACP,cAAc,oBAAA,EACd,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,kBAAkB,wBAAA,EAClB,oBAAoB,0BAAA,EACpB,QAAQ,cAAA;IAEF,IAAA,KAAgC,QAAQ,CAAW,EAAE,CAAC,EAArD,WAAW,QAAA,EAAE,cAAc,QAA0B,CAAC;IACvD,IAAA,KAAoC,QAAQ,CAAC,EAAE,CAAC,EAA/C,aAAa,QAAA,EAAE,gBAAgB,QAAgB,CAAC;IACvD,IAAM,QAAQ,GAAG,OAAO,CAAC,cAAc,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAEtE,QACEA,4BACEC,sBACE,SAAS,EAAEC,UAAU,CACnB,MAAM,CAAC,gBAAgB,CAAC,EACxB,kBAAkB;oBAEhB,GAAC,MAAM,CAAC,QAAQ,IAAG,QAAQ;wBAE9B,gBAEA,cAAc,IAAI,QAAQ,KACzBD,0BACG,cAAc,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,KAAK,IAAK,QACpCA,IAAC,IAAI,IAEH,SAAS,EAAC,MAAM,EAChB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,UAAC,KAAa;4BACtB,IAAM,SAAS,GAAG,kBAAI,cAAc,EAAE,MAAM,CAC1C,UAAC,aAAa,IAAK,OAAA,aAAa,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,GAAA,CACvD,CAAC;4BACF,SAAS,CAAC,SAAS,CAAC,CAAC;yBACtB,IARO,KAAK,CAAC,KAAK,SAAI,KAAO,CAS9B,IACH,CAAC,WACD,CACJ,YACG;YACNA,IAAC,gBAAgB,IACf,SAAS,EAAE,oBAAoB,EAC/B,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,gBAAgB,EAC1B,wBAAwB,EAAE,UAAC,KAAK;oBAC9B,IAAM,kBAAkB,GAAG,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,EAAE,CAAC;oBAChD,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,IAAI,CAAC,KAAK,CAAC,CAAC;oBAChC,SAAS,CAAC,kBAAkB,CAAC,CAAC;oBAC9B,gBAAgB,CAAC,EAAE,CAAC,CAAC;iBACtB,EACD,4BAA4B,EAAE,UAAC,EAAS;wBAAP,KAAK,WAAA;oBACpC,IAAM,eAAe,GAAG,OAAO,CAAC,MAAM,CACpC,UAAC,MAAM;wBACL,OAAA,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;4BAC1D,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,IAAI,CAClB,UAAC,aAAa,IAAK,OAAA,aAAa,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,GAAA,CACxD,MAAK,SAAS;qBAAA,CAClB,CAAC;oBACF,cAAc,CAAC,eAAe,CAAC,CAAC;iBACjC,EACD,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,4BAA4B,EAAE,cAAM,OAAA,cAAc,CAAC,EAAE,CAAC,GAAA,EACtD,QAAQ,EAAE,QAAQ,WAClB,YACD,EACH;AACJ;;;;"}
@@ -0,0 +1,107 @@
1
+ import { _ as __assign } from '../../../tslib.es6-5bc94358.js';
2
+ import { jsx } from 'react/jsx-runtime';
3
+ import { useState } from 'react';
4
+ import { AutoSuggestMultiSelect } from './index.js';
5
+ import { f as featherLogo } from '../../../feather-logo-a3f07990.js';
6
+ import '../../chip/index.js';
7
+ import '../../../style-inject.es-1f59c1d0.js';
8
+ import '../autoSuggestInput/index.js';
9
+ import '../../../index-e9e37a34.js';
10
+ import '../../../index-171a0108.js';
11
+ import '../../../index-dd80248b.js';
12
+ import '../index.js';
13
+ import '../../../index-fb46adf9.js';
14
+
15
+ var story = {
16
+ title: 'JSX/Inputs/AutoSuggestMultiSelect',
17
+ subtitle: 'sgsg',
18
+ component: AutoSuggestMultiSelect,
19
+ argTypes: {
20
+ options: {
21
+ description: 'List of all options available to search from',
22
+ defaultValue: [
23
+ { value: 'feather', leftIcon: featherLogo },
24
+ { value: 'feather2', leftIcon: featherLogo },
25
+ {
26
+ value: 'feather3',
27
+ leftIcon: featherLogo,
28
+ },
29
+ {
30
+ value: 'dirtyswan',
31
+ leftIcon: featherLogo,
32
+ },
33
+ {
34
+ value: 'test value',
35
+ leftIcon: featherLogo,
36
+ },
37
+ ],
38
+ table: {
39
+ type: {
40
+ summary: 'Option[]'
41
+ },
42
+ },
43
+ },
44
+ selectedValues: {
45
+ description: 'List of all selected values',
46
+ defaultValue: [
47
+ { value: 'feather', leftIcon: featherLogo },
48
+ { value: 'feather2', leftIcon: featherLogo },
49
+ ],
50
+ table: {
51
+ type: {
52
+ summary: 'Option[]'
53
+ },
54
+ },
55
+ },
56
+ placeholder: {
57
+ defaultValue: 'Placeholder',
58
+ description: 'Placeholder for DirtySwan Input component'
59
+ },
60
+ chipsListClassName: {
61
+ defaultValue: '',
62
+ description: 'Class name for the most parent element of the Chip component',
63
+ control: { type: 'text' }
64
+ },
65
+ multiSelectClassName: {
66
+ defaultValue: '',
67
+ description: 'Class name for the most parent element of the AutoSuggestInput component',
68
+ control: { type: 'text' }
69
+ },
70
+ wrapText: {
71
+ defaultValue: false,
72
+ description: 'Wether or not wrap the entries in the dropdown or hide overflown text',
73
+ },
74
+ setValues: {
75
+ description: 'Function that runs when selecting values',
76
+ action: true,
77
+ table: {
78
+ category: 'Callbacks',
79
+ },
80
+ },
81
+ },
82
+ parameters: {
83
+ componentSubtitle: 'AutoSuggestMultiSelect is a combination of the AutoSuggestInput and Chip components',
84
+ docs: {
85
+ description: {
86
+ component: "This component allows quick search via the input field to find an option for selection.\n \nUpon selecting an option, the option is displayed above the input field as a chip.\n \nThe chip can be removed by clicking on the X button. Multi options can be selected as well.\n \nProp `setValues` function must be provided to keep track of removed and added option selections."
87
+ },
88
+ },
89
+ customTypes: {
90
+ Option: "interface Option {\n value: string; // value of option to be stored and displayed on UI\n leftIcon?: string; // image of the provided option to be displayed on UI\n}"
91
+ }
92
+ },
93
+ };
94
+ var AutoSuggestMultiSelectStory = function (_a) {
95
+ var options = _a.options, selectedValues = _a.selectedValues, setValues = _a.setValues, placeholder = _a.placeholder, chipsListClassName = _a.chipsListClassName, multiSelectClassName = _a.multiSelectClassName, wrapText = _a.wrapText;
96
+ var _b = useState(selectedValues), values = _b[0], setSelectedValues = _b[1];
97
+ var handleSetValues = function (options) {
98
+ setValues(options);
99
+ setSelectedValues(options);
100
+ };
101
+ return (jsx("div", __assign({ style: { minHeight: '240px' } }, { children: jsx(AutoSuggestMultiSelect, { options: options, selectedValues: values, setValues: handleSetValues, placeholder: placeholder, chipsListClassName: chipsListClassName, multiSelectClassName: multiSelectClassName, wrapText: wrapText }, void 0) }), void 0));
102
+ };
103
+ AutoSuggestMultiSelectStory.storyName = "AutoSuggestMultiSelect";
104
+
105
+ export default story;
106
+ export { AutoSuggestMultiSelectStory };
107
+ //# sourceMappingURL=index.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/input/autoSuggestMultiSelect/index.stories.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { AutoSuggestMultiSelect, AutoSuggestMultiSelectProps } from '.';\nimport { Option } from '../../../models/autoSuggestInput';\nimport featherLogo from '../../cards/icons/feather-logo.svg';\n\nconst story = {\n title: 'JSX/Inputs/AutoSuggestMultiSelect',\n subtitle: 'sgsg',\n component: AutoSuggestMultiSelect,\n argTypes: {\n options: {\n description: 'List of all options available to search from',\n defaultValue: [\n { value: 'feather', leftIcon: featherLogo },\n { value: 'feather2', leftIcon: featherLogo },\n {\n value: 'feather3',\n leftIcon: featherLogo,\n },\n {\n value: 'dirtyswan',\n leftIcon: featherLogo,\n },\n {\n value: 'test value',\n leftIcon: featherLogo,\n },\n ],\n table: {\n type: { \n summary: 'Option[]'\n },\n },\n },\n selectedValues: {\n description: 'List of all selected values',\n defaultValue: [\n { value: 'feather', leftIcon: featherLogo },\n { value: 'feather2', leftIcon: featherLogo },\n ],\n table: {\n type: { \n summary: 'Option[]'\n },\n },\n },\n placeholder: {\n defaultValue: 'Placeholder',\n description: 'Placeholder for DirtySwan Input component'\n },\n chipsListClassName: {\n defaultValue: '',\n description: 'Class name for the most parent element of the Chip component',\n control: { type: 'text' }\n },\n multiSelectClassName: {\n defaultValue: '',\n description: 'Class name for the most parent element of the AutoSuggestInput component',\n control: { type: 'text' }\n },\n wrapText: {\n defaultValue: false,\n description: 'Wether or not wrap the entries in the dropdown or hide overflown text',\n },\n setValues: {\n description: 'Function that runs when selecting values',\n action: true,\n table: {\n category: 'Callbacks',\n },\n },\n },\n parameters: {\n componentSubtitle: 'AutoSuggestMultiSelect is a combination of the AutoSuggestInput and Chip components',\n docs: {\n description: {\n component: `This component allows quick search via the input field to find an option for selection.\n \\nUpon selecting an option, the option is displayed above the input field as a chip.\n \\nThe chip can be removed by clicking on the X button. Multi options can be selected as well.\n \\nProp \\`setValues\\` function must be provided to keep track of removed and added option selections.`\n },\n },\n customTypes: {\n Option: `interface Option {\n value: string; // value of option to be stored and displayed on UI\n leftIcon?: string; // image of the provided option to be displayed on UI\n}`\n }\n },\n};\n\nexport const AutoSuggestMultiSelectStory = ({\n options,\n selectedValues,\n setValues,\n placeholder,\n chipsListClassName,\n multiSelectClassName,\n wrapText,\n}: AutoSuggestMultiSelectProps) => {\n const [values, setSelectedValues] = useState(selectedValues);\n\n const handleSetValues = (options: Option[]) => {\n setValues(options);\n setSelectedValues(options);\n }\n\n return (\n <div style={{ minHeight: '240px' }}>\n <AutoSuggestMultiSelect\n options={options}\n selectedValues={values}\n setValues={handleSetValues}\n placeholder={placeholder}\n chipsListClassName={chipsListClassName}\n multiSelectClassName={multiSelectClassName}\n wrapText={wrapText}\n />\n </div>\n );\n};\n\nAutoSuggestMultiSelectStory.storyName = \"AutoSuggestMultiSelect\";\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;IAKM,KAAK,GAAG;IACZ,KAAK,EAAE,mCAAmC;IAC1C,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,sBAAsB;IACjC,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,WAAW,EAAE,8CAA8C;YAC3D,YAAY,EAAE;gBACZ,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE;gBAC3C,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE;gBAC5C;oBACE,KAAK,EAAE,UAAU;oBACjB,QAAQ,EAAE,WAAW;iBACtB;gBACD;oBACE,KAAK,EAAE,WAAW;oBAClB,QAAQ,EAAE,WAAW;iBACtB;gBACD;oBACE,KAAK,EAAE,YAAY;oBACnB,QAAQ,EAAE,WAAW;iBACtB;aACF;YACD,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,UAAU;iBACpB;aACF;SACF;QACD,cAAc,EAAE;YACd,WAAW,EAAE,6BAA6B;YAC1C,YAAY,EAAE;gBACZ,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE;gBAC3C,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE;aAC7C;YACD,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,UAAU;iBACpB;aACF;SACF;QACD,WAAW,EAAE;YACX,YAAY,EAAE,aAAa;YAC3B,WAAW,EAAE,2CAA2C;SACzD;QACD,kBAAkB,EAAE;YAClB,YAAY,EAAE,EAAE;YAChB,WAAW,EAAE,8DAA8D;YAC3E,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,oBAAoB,EAAE;YACpB,YAAY,EAAE,EAAE;YAChB,WAAW,EAAE,0EAA0E;YACvF,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,QAAQ,EAAE;YACR,YAAY,EAAE,KAAK;YACnB,WAAW,EAAE,uEAAuE;SACrF;QACD,SAAS,EAAE;YACT,WAAW,EAAE,0CAA0C;YACvD,MAAM,EAAE,IAAI;YACZ,KAAK,EAAE;gBACL,QAAQ,EAAE,WAAW;aACtB;SACF;KACF;IACD,UAAU,EAAE;QACV,iBAAiB,EAAE,qFAAqF;QACxG,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE,0YAG0F;aACtG;SACF;QACD,WAAW,EAAE;YACX,MAAM,EAAE,iLAGZ;SACG;KACF;EACD;IAEW,2BAA2B,GAAG,UAAC,EAQd;QAP5B,OAAO,aAAA,EACP,cAAc,oBAAA,EACd,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,kBAAkB,wBAAA,EAClB,oBAAoB,0BAAA,EACpB,QAAQ,cAAA;IAEF,IAAA,KAA8B,QAAQ,CAAC,cAAc,CAAC,EAArD,MAAM,QAAA,EAAE,iBAAiB,QAA4B,CAAC;IAE7D,IAAM,eAAe,GAAG,UAAC,OAAiB;QACxC,SAAS,CAAC,OAAO,CAAC,CAAC;QACnB,iBAAiB,CAAC,OAAO,CAAC,CAAC;KAC5B,CAAA;IAED,QACEA,sBAAK,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,gBAChCA,IAAC,sBAAsB,IACtB,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,MAAM,EACtB,SAAS,EAAE,eAAe,EAC1B,WAAW,EAAE,WAAW,EACxB,kBAAkB,EAAE,kBAAkB,EACtC,oBAAoB,EAAE,oBAAoB,EAC1C,QAAQ,EAAE,QAAQ,WACjB,YACE,EACN;AACJ,EAAE;AAEF,2BAA2B,CAAC,SAAS,GAAG,wBAAwB;;;;;"}
@@ -1,6 +1,6 @@
1
1
  import { b as __awaiter, c as __generator } from '../../../tslib.es6-5bc94358.js';
2
2
  import { jsx } from 'react/jsx-runtime';
3
- import { c as customRender } from '../../../customRender-4157fcff.js';
3
+ import { c as customRender } from '../../../customRender-20b5f7ec.js';
4
4
  import { Checkbox } from './index.js';
5
5
  import 'react';
6
6
  import 'react-dom';
@@ -1,6 +1,6 @@
1
1
  import { b as __awaiter, c as __generator, _ as __assign } from '../../../tslib.es6-5bc94358.js';
2
2
  import { jsx } from 'react/jsx-runtime';
3
- import { c as customRender } from '../../../customRender-4157fcff.js';
3
+ import { c as customRender } from '../../../customRender-20b5f7ec.js';
4
4
  import CurrencyInput from './index.js';
5
5
  import 'react';
6
6
  import 'react-dom';
@@ -0,0 +1,11 @@
1
+ import { a as __rest, _ as __assign } from '../../tslib.es6-5bc94358.js';
2
+ import { jsx } from 'react/jsx-runtime';
3
+ import { c as classnames } from '../../index-e9e37a34.js';
4
+
5
+ var Link = function (_a) {
6
+ var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
7
+ return (jsx("a", __assign({ className: classnames(className, 'p-a c-pointer') }, rest, { children: children }), void 0));
8
+ };
9
+
10
+ export { Link };
11
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../../../../../src/lib/components/link/index.tsx"],"sourcesContent":["import classnames from 'classnames';\n\nexport type LinkProps = JSX.IntrinsicElements['a'];\n\nexport const Link = ({ children, className, ...rest }: LinkProps) => (\n <a className={classnames(className, 'p-a c-pointer')} {...rest}>\n {children}\n </a>\n);"],"names":["_jsx"],"mappings":";;;;IAIa,IAAI,GAAG,UAAC,EAA2C;IAAzC,IAAA,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAK,IAAI,cAA9B,yBAAgC,CAAF;IAAkB,QACnEA,oBAAG,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,eAAe,CAAC,IAAM,IAAI,cAC3D,QAAQ,YACP,EACL;;;;;"}
@@ -0,0 +1,33 @@
1
+ import { a as __rest, _ as __assign } from '../../tslib.es6-5bc94358.js';
2
+ import { jsx } from 'react/jsx-runtime';
3
+ import { Link } from './index.js';
4
+ import '../../index-e9e37a34.js';
5
+
6
+ var story = {
7
+ title: 'JSX/Link',
8
+ component: Link,
9
+ argTypes: {
10
+ children: {
11
+ control: 'text',
12
+ defaultValue: 'Click here to go to Feather Insurance',
13
+ description: 'Content that is displayed as clickable inside the link',
14
+ },
15
+ href: {
16
+ control: 'text',
17
+ defaultValue: 'https://feather-insurance.com',
18
+ description: 'Specifies the URL of the page the link goes to',
19
+ },
20
+ },
21
+ parameters: {
22
+ componentSubtitle: 'Links are a styled helper component for anchor (<a />) tags.',
23
+ },
24
+ };
25
+ var LinkStory = function (_a) {
26
+ var children = _a.children, href = _a.href, rest = __rest(_a, ["children", "href"]);
27
+ return (jsx(Link, __assign({ href: href }, rest, { children: children }), void 0));
28
+ };
29
+ LinkStory.storyName = "Link";
30
+
31
+ export default story;
32
+ export { LinkStory };
33
+ //# sourceMappingURL=index.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/link/index.stories.tsx"],"sourcesContent":["import { Link, LinkProps } from '.';\n\nconst story = {\n title: 'JSX/Link',\n component: Link,\n argTypes: {\n children: {\n control: 'text',\n defaultValue: 'Click here to go to Feather Insurance',\n description: 'Content that is displayed as clickable inside the link',\n },\n href: {\n control: 'text',\n defaultValue: 'https://feather-insurance.com',\n description: 'Specifies the URL of the page the link goes to',\n },\n },\n parameters: {\n componentSubtitle: 'Links are a styled helper component for anchor (<a />) tags.',\n },\n};\n\nexport const LinkStory = ({ children, href, ...rest }: LinkProps) => (\n <Link href={href} {...rest}>{children}</Link>\n);\n\nLinkStory.storyName = \"Link\";\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;IAEM,KAAK,GAAG;IACZ,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,OAAO,EAAE,MAAM;YACf,YAAY,EAAE,uCAAuC;YACrD,WAAW,EAAE,wDAAwD;SACtE;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;YACf,YAAY,EAAE,+BAA+B;YAC7C,WAAW,EAAE,gDAAgD;SAC9D;KACF;IACD,UAAU,EAAE;QACV,iBAAiB,EAAE,8DAA8D;KAClF;EACD;IAEW,SAAS,GAAG,UAAC,EAAsC;IAApC,IAAA,QAAQ,cAAA,EAAE,IAAI,UAAA,EAAK,IAAI,cAAzB,oBAA2B,CAAF;IAAkB,QACnEA,IAAC,IAAI,aAAC,IAAI,EAAE,IAAI,IAAM,IAAI,cAAG,QAAQ,YAAQ,EAC9C;EAAC;AAEF,SAAS,CAAC,SAAS,GAAG,MAAM;;;;;"}
@@ -1,7 +1,7 @@
1
1
  import { b as __awaiter, c as __generator, _ as __assign, a as __rest } from '../../tslib.es6-5bc94358.js';
2
2
  import { jsx } from 'react/jsx-runtime';
3
- import { c as customRender, a as act, f as fireEvent } from '../../customRender-4157fcff.js';
4
- import '../../extend-expect-46bdce4a.js';
3
+ import { c as customRender, a as act, f as fireEvent } from '../../customRender-20b5f7ec.js';
4
+ import '../../extend-expect-25e5049d.js';
5
5
  import { MultiDropzone } from './index.js';
6
6
  import 'react';
7
7
  import 'react-dom';
@@ -1,6 +1,6 @@
1
1
  import { b as __awaiter, c as __generator } from '../../tslib.es6-5bc94358.js';
2
2
  import { jsx } from 'react/jsx-runtime';
3
- import { c as customRender } from '../../customRender-4157fcff.js';
3
+ import { c as customRender } from '../../customRender-20b5f7ec.js';
4
4
  import { SegmentedControl } from './index.js';
5
5
  import 'react';
6
6
  import 'react-dom';
@@ -19170,7 +19170,7 @@ const initialValue = {
19170
19170
  debug,
19171
19171
  logTestingPlaygroundURL
19172
19172
  };
19173
- typeof document !== 'undefined' && document.body // eslint-disable-line @typescript-eslint/no-unnecessary-condition
19173
+ const screen = typeof document !== 'undefined' && document.body // eslint-disable-line @typescript-eslint/no-unnecessary-condition
19174
19174
  ? getQueriesForElement(document.body, queries, initialValue) : Object.keys(queries).reduce((helpers, key) => {
19175
19175
  // `key` is for all intents and purposes the type of keyof `helpers`, which itself is the type of `initialValue` plus incoming properties from `queries`
19176
19176
  // if `Object.keys(something)` returned Array<keyof typeof something> this explicit type assertion would not be necessary
@@ -24098,5 +24098,5 @@ var customRender = function (ui, options) {
24098
24098
  return (__assign({ user: userEvent.setup() }, render(ui, options)));
24099
24099
  };
24100
24100
 
24101
- export { act as a, customRender as c, fireEvent as f, lib as l };
24102
- //# sourceMappingURL=customRender-4157fcff.js.map
24101
+ export { act as a, customRender as c, fireEvent as f, lib as l, screen as s };
24102
+ //# sourceMappingURL=customRender-20b5f7ec.js.map