@spscommerce/ds-react 4.6.0 → 4.7.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/lib/index.cjs.js +352 -242
- package/lib/index.d.ts +1 -0
- package/lib/index.esm.js +352 -244
- package/lib/insight-tile/SpsInsightTile.d.ts +18 -0
- package/lib/insight-tile/SpsInsightTile.examples.d.ts +2 -0
- package/lib/insight-tile/SpsInsights.d.ts +10 -0
- package/lib/insight-tile/index.d.ts +2 -0
- package/package.json +9 -9
package/lib/index.cjs.js
CHANGED
|
@@ -211,7 +211,7 @@ var spsGlobalPropTypes = {
|
|
|
211
211
|
|
|
212
212
|
var I18nContext = React__namespace.createContext(dsShared.noI18nI18n);
|
|
213
213
|
|
|
214
|
-
var propsDoc$
|
|
214
|
+
var propsDoc$1w = {
|
|
215
215
|
disabled: 'boolean',
|
|
216
216
|
href: 'string',
|
|
217
217
|
icon: 'SpsIcon',
|
|
@@ -220,7 +220,7 @@ var propsDoc$1v = {
|
|
|
220
220
|
spinningTitle: 'string',
|
|
221
221
|
type: 'ButtonType',
|
|
222
222
|
};
|
|
223
|
-
var propTypes$
|
|
223
|
+
var propTypes$1B = __assign(__assign({}, spsGlobalPropTypes), { disabled: PropTypes.bool, href: PropTypes.string, icon: enumValue(dsShared.SpsIcon), kind: enumValue(dsShared.ButtonKind), spinning: PropTypes.bool, spinningTitle: PropTypes.string, type: enumValue(dsShared.ButtonType) });
|
|
224
224
|
function SpsButton(props) {
|
|
225
225
|
var children = props.children, className = props.className, href = props.href, icon = props.icon, _a = props.kind, kind = _a === void 0 ? dsShared.ButtonKind.DEFAULT : _a, spinning = props.spinning, spinningTitle = props.spinningTitle, _b = props.type, type = _b === void 0 ? dsShared.ButtonType.BUTTON : _b, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "href", "icon", "kind", "spinning", "spinningTitle", "type", "unsafelyReplaceClassName"]);
|
|
226
226
|
var disabled = props.disabled;
|
|
@@ -244,8 +244,8 @@ function SpsButton(props) {
|
|
|
244
244
|
spinner))));
|
|
245
245
|
}
|
|
246
246
|
Object.assign(SpsButton, {
|
|
247
|
-
props: propsDoc$
|
|
248
|
-
propTypes: propTypes$
|
|
247
|
+
props: propsDoc$1w,
|
|
248
|
+
propTypes: propTypes$1B,
|
|
249
249
|
displayName: 'SpsButton',
|
|
250
250
|
});
|
|
251
251
|
|
|
@@ -282,8 +282,8 @@ function contentOf(nodeOrRenderFn) {
|
|
|
282
282
|
: nodeOrRenderFn;
|
|
283
283
|
}
|
|
284
284
|
|
|
285
|
-
var propsDoc$
|
|
286
|
-
var propTypes$
|
|
285
|
+
var propsDoc$1v = __assign(__assign({}, spsFormProps), { controlsDisabled: 'boolean', footerLinks: 'ReactNodeOrRenderFn', formMeta: 'SpsFormArrayMeta<any> | SpsFormGroupMeta<any>', isOpen: 'boolean', onClear: '() => void', onSubmit: 'React.FormEventHandler', pinned: { type: 'boolean', deprecated: true } });
|
|
286
|
+
var propTypes$1A = __assign(__assign(__assign({}, spsGlobalPropTypes), spsFormPropTypes), { controlsDisabled: PropTypes.bool, footerLinks: nodeOrRenderFn, formArray: impl(), formGroup: impl(), formMeta: PropTypes.oneOfType([
|
|
287
287
|
impl(),
|
|
288
288
|
impl(),
|
|
289
289
|
]), isOpen: PropTypes.bool, onClear: fun(), onSubmit: fun(), pinned: PropTypes.bool });
|
|
@@ -309,8 +309,8 @@ function SpsAdvancedSearch(props) {
|
|
|
309
309
|
React__namespace.createElement(SpsButton, { kind: dsShared.ButtonKind.KEY, type: dsShared.ButtonType.SUBMIT, disabled: controlsDisabled }, t('design-system:advancedSearch.search')))))));
|
|
310
310
|
}
|
|
311
311
|
Object.assign(SpsAdvancedSearch, {
|
|
312
|
-
props: propsDoc$
|
|
313
|
-
propTypes: propTypes$
|
|
312
|
+
props: propsDoc$1v,
|
|
313
|
+
propTypes: propTypes$1A,
|
|
314
314
|
displayName: 'SpsAdvancedSearch',
|
|
315
315
|
});
|
|
316
316
|
|
|
@@ -319,7 +319,7 @@ var SpsAdvancedSearchExamples = {
|
|
|
319
319
|
label: 'Basic Usage',
|
|
320
320
|
examples: {
|
|
321
321
|
basic: {
|
|
322
|
-
react: utils.code(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n function Component(props) {\n const [toolbarSearchText, setToolbarSearchText] = React.useState(\"\");\n const [advSearch, patchAdvSearch] = usePatchReducer({\n isOpen: true,\n enteredFields: 0,\n });\n\n const initValue = {\n sender: \"\",\n receiver: \"\",\n doctype: \"\",\n status: \"\",\n };\n const { formValue, formMeta, updateForm } = useSpsForm(initValue);\n\n React.useEffect(() => {\n // Simulate that someone has entered a search term\n updateForm({\n ...formValue,\n receiver: \"Walmart\"\n });\n patchAdvSearch({ enteredFields: 1 });\n }, []);\n\n function handleToolbarSearchChange(event) {\n setToolbarSearchText(event.target.value);\n }\n\n function handleToggleAdvancedSearch(isOpen) {\n patchAdvSearch({ isOpen });\n }\n\n function handleAdvancedSearchSubmit() {\n patchAdvSearch({ enteredFields: diff(initValue, formValue).length });\n }\n\n function handleAdvancedSearchClear() {\n updateForm(initValue);\n patchAdvSearch({ enteredFields: 0 });\n }\n\n return <>\n <SpsListToolbar advancedSearch={advSearch}\n onToggleAdvancedSearch={handleToggleAdvancedSearch}\n >\n <SpsListToolbarSearch>\n <SpsTextInput value={toolbarSearchText}\n onChange={handleToolbarSearchChange}\n disabled={advSearch.isOpen}\n title=\"Search\"\n />\n <SpsButton kind={ButtonKind.ICON}\n icon={SpsIcon.SEARCH}\n disabled={advSearch.isOpen}\n />\n </SpsListToolbarSearch>\n </SpsListToolbar>\n <SpsAdvancedSearch {...advSearch}\n formMeta={formMeta}\n onSubmit={handleAdvancedSearchSubmit}\n onClear={handleAdvancedSearchClear}\n >\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.sender}>Sender</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.sender}\n value={formValue.sender}\n />\n </div>\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.receiver}>Receiver</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.receiver}\n value={formValue.receiver}\n />\n </div>\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.doctype}>Document Type</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.doctype}\n value={formValue.doctype}\n />\n </div>\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.status}>Status</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.status}\n value={formValue.status}\n />\n </div>\n </div>\n </SpsAdvancedSearch>\n </>;\n }\n "], ["\n function Component(props) {\n const [toolbarSearchText, setToolbarSearchText] = React.useState(\"\");\n const [advSearch, patchAdvSearch] = usePatchReducer({\n isOpen: true,\n enteredFields: 0,\n });\n\n const initValue = {\n sender: \"\",\n receiver: \"\",\n doctype: \"\",\n status: \"\",\n };\n const { formValue, formMeta, updateForm } = useSpsForm(initValue);\n\n React.useEffect(() => {\n // Simulate that someone has entered a search term\n updateForm({\n ...formValue,\n receiver: \"Walmart\"\n });\n patchAdvSearch({ enteredFields: 1 });\n }, []);\n\n function handleToolbarSearchChange(event) {\n setToolbarSearchText(event.target.value);\n }\n\n function handleToggleAdvancedSearch(isOpen) {\n patchAdvSearch({ isOpen });\n }\n\n function handleAdvancedSearchSubmit() {\n patchAdvSearch({ enteredFields: diff(initValue, formValue).length });\n }\n\n function handleAdvancedSearchClear() {\n updateForm(initValue);\n patchAdvSearch({ enteredFields: 0 });\n }\n\n return <>\n <SpsListToolbar advancedSearch={advSearch}\n onToggleAdvancedSearch={handleToggleAdvancedSearch}\n >\n <SpsListToolbarSearch>\n <SpsTextInput value={toolbarSearchText}\n onChange={handleToolbarSearchChange}\n disabled={advSearch.isOpen}\n title=\"Search\"\n />\n <SpsButton kind={ButtonKind.ICON}\n icon={SpsIcon.SEARCH}\n disabled={advSearch.isOpen}\n />\n </SpsListToolbarSearch>\n </SpsListToolbar>\n <SpsAdvancedSearch {...advSearch}\n formMeta={formMeta}\n onSubmit={handleAdvancedSearchSubmit}\n onClear={handleAdvancedSearchClear}\n >\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.sender}>Sender</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.sender}\n value={formValue.sender}\n />\n </div>\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.receiver}>Receiver</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.receiver}\n value={formValue.receiver}\n />\n </div>\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.doctype}>Document Type</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.doctype}\n value={formValue.doctype}\n />\n </div>\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.status}>Status</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.status}\n value={formValue.status}\n />\n </div>\n </div>\n </SpsAdvancedSearch>\n </>;\n }\n "]))),
|
|
322
|
+
react: utils.code(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n function Component(props) {\n const [toolbarSearchText, setToolbarSearchText] = React.useState(\"\");\n const [advSearch, patchAdvSearch] = usePatchReducer({\n isOpen: true,\n enteredFields: 0,\n });\n\n const initValue = {\n sender: \"\",\n receiver: \"\",\n doctype: \"\",\n status: \"\",\n };\n const { formValue, formMeta, updateForm } = useSpsForm(initValue);\n\n React.useEffect(() => {\n // Simulate that someone has entered a search term\n updateForm({\n ...formValue,\n receiver: \"Walmart\"\n });\n patchAdvSearch({ enteredFields: 1 });\n }, []);\n\n function handleToolbarSearchChange(event) {\n setToolbarSearchText(event.target.value);\n }\n\n function handleToggleAdvancedSearch(isOpen) {\n patchAdvSearch({ isOpen });\n }\n\n function handleAdvancedSearchSubmit() {\n patchAdvSearch({ enteredFields: diff(initValue, formValue).length });\n }\n\n function handleAdvancedSearchClear() {\n updateForm(initValue);\n patchAdvSearch({ enteredFields: 0 });\n }\n\n return <>\n <SpsListToolbar advancedSearch={advSearch}\n onToggleAdvancedSearch={handleToggleAdvancedSearch}\n >\n <SpsListToolbarSearch>\n <SpsTextInput value={toolbarSearchText}\n onChange={handleToolbarSearchChange}\n disabled={advSearch.isOpen}\n title=\"Search\"\n />\n <SpsButton kind={ButtonKind.ICON}\n icon={SpsIcon.SEARCH}\n disabled={advSearch.isOpen}\n />\n </SpsListToolbarSearch>\n </SpsListToolbar>\n <SpsAdvancedSearch {...advSearch}\n formMeta={formMeta}\n onSubmit={handleAdvancedSearchSubmit}\n onClear={handleAdvancedSearchClear}\n >\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.sender}>Sender</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.sender}\n value={formValue.sender}\n />\n </div>\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.receiver}>Receiver</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.receiver}\n value={formValue.receiver}\n />\n </div>\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.doctype}>Document Type</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.doctype}\n value={formValue.doctype}\n />\n </div>\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.status}>Status</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.status}\n value={formValue.status}\n />\n </div>\n </div>\n </SpsAdvancedSearch>\n </>;\n }\n "], ["\n function Component(props) {\n const [toolbarSearchText, setToolbarSearchText] = React.useState(\"\");\n const [advSearch, patchAdvSearch] = usePatchReducer({\n isOpen: true,\n enteredFields: 0,\n });\n\n const initValue = {\n sender: \"\",\n receiver: \"\",\n doctype: \"\",\n status: \"\",\n };\n const { formValue, formMeta, updateForm } = useSpsForm(initValue);\n\n React.useEffect(() => {\n // Simulate that someone has entered a search term\n updateForm({\n ...formValue,\n receiver: \"Walmart\"\n });\n patchAdvSearch({ enteredFields: 1 });\n }, []);\n\n function handleToolbarSearchChange(event) {\n setToolbarSearchText(event.target.value);\n }\n\n function handleToggleAdvancedSearch(isOpen) {\n patchAdvSearch({ isOpen });\n }\n\n function handleAdvancedSearchSubmit() {\n patchAdvSearch({ enteredFields: diff(initValue, formValue).length });\n }\n\n function handleAdvancedSearchClear() {\n updateForm(initValue);\n patchAdvSearch({ enteredFields: 0 });\n }\n\n return <>\n <SpsListToolbar advancedSearch={advSearch}\n onToggleAdvancedSearch={handleToggleAdvancedSearch}\n >\n <SpsListToolbarSearch>\n <SpsTextInput value={toolbarSearchText}\n onChange={handleToolbarSearchChange}\n disabled={advSearch.isOpen}\n title=\"Search\"\n />\n <SpsButton kind={ButtonKind.ICON}\n icon={SpsIcon.SEARCH}\n disabled={advSearch.isOpen}\n />\n </SpsListToolbarSearch>\n </SpsListToolbar>\n <SpsAdvancedSearch {...advSearch}\n formMeta={formMeta}\n onSubmit={handleAdvancedSearchSubmit}\n onClear={handleAdvancedSearchClear}\n >\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.sender}>Sender</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.sender}\n value={formValue.sender}\n />\n </div>\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.receiver}>Receiver</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.receiver}\n value={formValue.receiver}\n />\n </div>\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.doctype}>Document Type</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.doctype}\n value={formValue.doctype}\n />\n </div>\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.status}>Status</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.status}\n value={formValue.status}\n />\n </div>\n </div>\n </SpsAdvancedSearch>\n </>;\n }\n "]))),
|
|
323
323
|
},
|
|
324
324
|
},
|
|
325
325
|
},
|
|
@@ -327,30 +327,30 @@ var SpsAdvancedSearchExamples = {
|
|
|
327
327
|
label: 'Disabling the Clear/Search Buttons',
|
|
328
328
|
examples: {
|
|
329
329
|
disabledButtons: {
|
|
330
|
-
react: utils.code(templateObject_2$
|
|
330
|
+
react: utils.code(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n function Component() {\n const [advSearch, setAdvSearch] = React.useState({\n isOpen: true,\n controlsDisabled: true,\n });\n\n function handleToggleAdvancedSearch(isOpen) {\n setAdvSearch({ isOpen });\n }\n\n return <>\n <SpsListToolbar advancedSearch={advSearch}\n onToggleAdvancedSearch={handleToggleAdvancedSearch}\n >\n <SpsListToolbarSearch>\n <i>quick search goes here</i>\n </SpsListToolbarSearch>\n </SpsListToolbar>\n <SpsAdvancedSearch {...advSearch}>\n <i>insert form here</i>\n </SpsAdvancedSearch>\n </>;\n }\n "], ["\n function Component() {\n const [advSearch, setAdvSearch] = React.useState({\n isOpen: true,\n controlsDisabled: true,\n });\n\n function handleToggleAdvancedSearch(isOpen) {\n setAdvSearch({ isOpen });\n }\n\n return <>\n <SpsListToolbar advancedSearch={advSearch}\n onToggleAdvancedSearch={handleToggleAdvancedSearch}\n >\n <SpsListToolbarSearch>\n <i>quick search goes here</i>\n </SpsListToolbarSearch>\n </SpsListToolbar>\n <SpsAdvancedSearch {...advSearch}>\n <i>insert form here</i>\n </SpsAdvancedSearch>\n </>;\n }\n "]))),
|
|
331
331
|
},
|
|
332
332
|
},
|
|
333
333
|
},
|
|
334
334
|
c_footerLink: {
|
|
335
335
|
label: 'Footer Link',
|
|
336
|
-
description: utils.code(templateObject_3$
|
|
336
|
+
description: utils.code(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n <p>Some applications have a need to add a link button to the footer\n as directed by the product design team.</p>\n "], ["\n <p>Some applications have a need to add a link button to the footer\n as directed by the product design team.</p>\n "]))),
|
|
337
337
|
examples: {
|
|
338
338
|
footerLink: {
|
|
339
|
-
react: utils.code(templateObject_4$
|
|
339
|
+
react: utils.code(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n function Component(props) {\n const [advSearch, setAdvSearch] = React.useState({\n isOpen: true\n });\n\n function handleToggleAdvancedSearch(isOpen) {\n setAdvSearch({ isOpen });\n }\n\n return <>\n <SpsListToolbar advancedSearch={advSearch}\n onToggleAdvancedSearch={handleToggleAdvancedSearch}\n >\n <SpsListToolbarSearch>\n <i>quick search goes here</i>\n </SpsListToolbarSearch>\n </SpsListToolbar>\n <SpsAdvancedSearch {...advSearch}\n footerLinks={\n <SpsButton kind={ButtonKind.LINK} icon={SpsIcon.GEAR}>\n Advanced Search Defaults\n </SpsButton>\n }\n >\n <i>insert form here</i>\n </SpsAdvancedSearch>\n </>;\n }\n "], ["\n function Component(props) {\n const [advSearch, setAdvSearch] = React.useState({\n isOpen: true\n });\n\n function handleToggleAdvancedSearch(isOpen) {\n setAdvSearch({ isOpen });\n }\n\n return <>\n <SpsListToolbar advancedSearch={advSearch}\n onToggleAdvancedSearch={handleToggleAdvancedSearch}\n >\n <SpsListToolbarSearch>\n <i>quick search goes here</i>\n </SpsListToolbarSearch>\n </SpsListToolbar>\n <SpsAdvancedSearch {...advSearch}\n footerLinks={\n <SpsButton kind={ButtonKind.LINK} icon={SpsIcon.GEAR}>\n Advanced Search Defaults\n </SpsButton>\n }\n >\n <i>insert form here</i>\n </SpsAdvancedSearch>\n </>;\n }\n "]))),
|
|
340
340
|
},
|
|
341
341
|
},
|
|
342
342
|
},
|
|
343
343
|
d_withTitle: {
|
|
344
344
|
label: 'Title Bar With No List Toolbar Search',
|
|
345
|
-
description: utils.code(templateObject_5$
|
|
345
|
+
description: utils.code(templateObject_5$p || (templateObject_5$p = __makeTemplateObject(["\n <p>If you do not provide a search within the List Toolbar, then it will\n act as a title bar and the Advanced Search will not be togglable.</p>\n "], ["\n <p>If you do not provide a search within the List Toolbar, then it will\n act as a title bar and the Advanced Search will not be togglable.</p>\n "]))),
|
|
346
346
|
examples: {
|
|
347
347
|
withTitle: {
|
|
348
|
-
react: utils.code(templateObject_6$
|
|
348
|
+
react: utils.code(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n function Component(props) {\n const [advSearch, patchAdvSearch] = usePatchReducer({\n isOpen: true,\n });\n\n return <>\n <SpsListToolbar title=\"Advanced Search\"\n advancedSearch={advSearch}\n />\n <SpsAdvancedSearch isOpen={advSearch.isOpen}>\n <i>insert form here</i>\n </SpsAdvancedSearch>\n </>;\n }\n "], ["\n function Component(props) {\n const [advSearch, patchAdvSearch] = usePatchReducer({\n isOpen: true,\n });\n\n return <>\n <SpsListToolbar title=\"Advanced Search\"\n advancedSearch={advSearch}\n />\n <SpsAdvancedSearch isOpen={advSearch.isOpen}>\n <i>insert form here</i>\n </SpsAdvancedSearch>\n </>;\n }\n "]))),
|
|
349
349
|
},
|
|
350
350
|
},
|
|
351
351
|
},
|
|
352
352
|
};
|
|
353
|
-
var templateObject_1$
|
|
353
|
+
var templateObject_1$T, templateObject_2$O, templateObject_3$G, templateObject_4$x, templateObject_5$p, templateObject_6$k;
|
|
354
354
|
|
|
355
355
|
function useElementId(id) {
|
|
356
356
|
return React.useRef(id || nanoid__default['default']());
|
|
@@ -633,7 +633,7 @@ var searchableOptionListProps = {
|
|
|
633
633
|
searchDebounce: PropTypes.number,
|
|
634
634
|
searchPlaceholder: PropTypes.string,
|
|
635
635
|
};
|
|
636
|
-
var propTypes$
|
|
636
|
+
var propTypes$1z = __assign(__assign(__assign(__assign({}, spsGlobalPropTypes), spsOptionListPassthroughProps.propTypes), searchableOptionListProps), { attachTo: ref().isRequired, conformWidth: PropTypes.bool, id: PropTypes.string.isRequired, isOpen: PropTypes.bool, keepOpen: PropTypes.bool, keyDown: impl(), nullOption: PropTypes.string, offsets: PropTypes.arrayOf(PropTypes.number), onOptionListChanged: fun(), onOptionSelected: fun(), onPositionFlip: fun(), onSelfToggle: fun(), optionRole: PropTypes.string, positionOverride: PropTypes.arrayOf(enumValue(dsShared.Position)), selectedOption: PropTypes.any, specialAction: fun(), ignoreWidthStyles: PropTypes.bool });
|
|
637
637
|
|
|
638
638
|
function updateOptions(props, searchState, searchStatePatch, setOptionList, setAnyOptionHasIcon) {
|
|
639
639
|
return __awaiter(this, void 0, void 0, function () {
|
|
@@ -1105,7 +1105,7 @@ var SpsOptionList = React__namespace.forwardRef(function (props, ref) {
|
|
|
1105
1105
|
React__namespace.createElement("span", null, specialAction.label)))));
|
|
1106
1106
|
});
|
|
1107
1107
|
Object.assign(SpsOptionList, {
|
|
1108
|
-
propTypes: propTypes$
|
|
1108
|
+
propTypes: propTypes$1z,
|
|
1109
1109
|
displayName: 'SpsOptionList',
|
|
1110
1110
|
});
|
|
1111
1111
|
|
|
@@ -1244,7 +1244,7 @@ function useInputPopup(rootRef, popupRef, formMeta) {
|
|
|
1244
1244
|
};
|
|
1245
1245
|
}
|
|
1246
1246
|
|
|
1247
|
-
var propsDoc$
|
|
1247
|
+
var propsDoc$1u = {
|
|
1248
1248
|
debounce: 'number',
|
|
1249
1249
|
disabled: 'boolean',
|
|
1250
1250
|
formMeta: 'SpsFormFieldMeta<string>',
|
|
@@ -1259,7 +1259,7 @@ var propsDoc$1t = {
|
|
|
1259
1259
|
value: 'string',
|
|
1260
1260
|
zeroState: 'string',
|
|
1261
1261
|
};
|
|
1262
|
-
var propTypes$
|
|
1262
|
+
var propTypes$1y = __assign(__assign({}, spsGlobalPropTypes), { debounce: PropTypes.number, disabled: PropTypes.bool, formControl: impl(), formMeta: impl(), icon: enumValue(dsShared.SpsIcon), onChange: fun(), placeholder: PropTypes.string, suggestions: PropTypes.oneOfType([
|
|
1263
1263
|
PropTypes.arrayOf(PropTypes.string),
|
|
1264
1264
|
PropTypes.instanceOf(Promise),
|
|
1265
1265
|
fun(),
|
|
@@ -1327,8 +1327,8 @@ function SpsAutocomplete(_a) {
|
|
|
1327
1327
|
React__namespace.createElement(SpsOptionList, { id: wrapperId + "_options", ref: optionListRef, attachTo: rootRef, isOpen: showPopup, options: suggestions, hideInlineSearch: true, keyDown: state.keyDown, onOptionSelected: setAndPropagateValue, onPositionFlip: handlePositionFlip, onSelfToggle: handleSelfToggle, offsets: [1, 0], search: value, searchDebounce: debounce, tall: tallOptionList, zeroState: zeroState })));
|
|
1328
1328
|
}
|
|
1329
1329
|
Object.assign(SpsAutocomplete, {
|
|
1330
|
-
props: propsDoc$
|
|
1331
|
-
propTypes: propTypes$
|
|
1330
|
+
props: propsDoc$1u,
|
|
1331
|
+
propTypes: propTypes$1y,
|
|
1332
1332
|
displayName: 'SpsAutocomplete',
|
|
1333
1333
|
});
|
|
1334
1334
|
|
|
@@ -1337,13 +1337,13 @@ var SpsAutocompleteExamples = {
|
|
|
1337
1337
|
label: 'Basic',
|
|
1338
1338
|
examples: {
|
|
1339
1339
|
basic: {
|
|
1340
|
-
react: utils.code(templateObject_1$
|
|
1340
|
+
react: utils.code(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n function DemoComponent() {\n const [color, setColor] = React.useState();\n const colors = [\"red\", \"blue\", \"green\"];\n\n function handleChange(event) {\n setColor(event.target.value);\n }\n\n return (\n <SpsAutocomplete suggestions={colors}\n value={color}\n onChange={handleChange}\n placeholder=\"Enter a color\"\n />\n );\n }\n "], ["\n function DemoComponent() {\n const [color, setColor] = React.useState();\n const colors = [\"red\", \"blue\", \"green\"];\n\n function handleChange(event) {\n setColor(event.target.value);\n }\n\n return (\n <SpsAutocomplete suggestions={colors}\n value={color}\n onChange={handleChange}\n placeholder=\"Enter a color\"\n />\n );\n }\n "]))),
|
|
1341
1341
|
},
|
|
1342
1342
|
disabled: {
|
|
1343
|
-
jsx: utils.code(templateObject_2$
|
|
1343
|
+
jsx: utils.code(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n <SpsAutocomplete suggestions={[\"red\", \"blue\", \"green\"]} value=\"yellow\" disabled id=\"disabledAutocomplete\"/>\n "], ["\n <SpsAutocomplete suggestions={[\"red\", \"blue\", \"green\"]} value=\"yellow\" disabled id=\"disabledAutocomplete\"/>\n "]))),
|
|
1344
1344
|
},
|
|
1345
1345
|
form: {
|
|
1346
|
-
react: utils.code(templateObject_3$
|
|
1346
|
+
react: utils.code(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n function DemoComponent() {\n const colors = [\"red\", \"orange\", \"yellow\", \"green\", \"blue\", \"indigo\", \"violet\"];\n\n const { formValue, formMeta, updateForm } = useSpsForm({ color: colors[0] });\n\n return (\n <SpsForm formMeta={formMeta}>\n <div className=\"sps-row\">\n <div className=\"col-4\">\n <SpsLabel for={formMeta.fields.color}>Color</SpsLabel>\n <SpsAutocomplete id=\"formHookAutocomplete\" suggestions={colors}\n formMeta={formMeta.fields.color}\n value={formValue.color}\n />\n </div>\n <div className=\"col-8\">\n <br/>\n <p>Color: {formValue.color}</p>\n </div>\n </div>\n </SpsForm>\n )\n }\n "], ["\n function DemoComponent() {\n const colors = [\"red\", \"orange\", \"yellow\", \"green\", \"blue\", \"indigo\", \"violet\"];\n\n const { formValue, formMeta, updateForm } = useSpsForm({ color: colors[0] });\n\n return (\n <SpsForm formMeta={formMeta}>\n <div className=\"sps-row\">\n <div className=\"col-4\">\n <SpsLabel for={formMeta.fields.color}>Color</SpsLabel>\n <SpsAutocomplete id=\"formHookAutocomplete\" suggestions={colors}\n formMeta={formMeta.fields.color}\n value={formValue.color}\n />\n </div>\n <div className=\"col-8\">\n <br/>\n <p>Color: {formValue.color}</p>\n </div>\n </div>\n </SpsForm>\n )\n }\n "]))),
|
|
1347
1347
|
},
|
|
1348
1348
|
},
|
|
1349
1349
|
},
|
|
@@ -1351,20 +1351,20 @@ var SpsAutocompleteExamples = {
|
|
|
1351
1351
|
label: 'Async Autocomplete',
|
|
1352
1352
|
examples: {
|
|
1353
1353
|
func: {
|
|
1354
|
-
react: utils.code(templateObject_4$
|
|
1354
|
+
react: utils.code(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n function DemoComponent() {\n const [color, setColor] = React.useState();\n function colorSearch(search) {\n return [\"red\", \"blue\", \"green\"];\n }\n\n function handleChange(event) {\n setColor(event.target.value);\n }\n\n return (\n <SpsAutocomplete suggestions={colorSearch} value={color} onChange={handleChange} placeholder=\"Enter a color\"/>\n );\n }\n "], ["\n function DemoComponent() {\n const [color, setColor] = React.useState();\n function colorSearch(search) {\n return [\"red\", \"blue\", \"green\"];\n }\n\n function handleChange(event) {\n setColor(event.target.value);\n }\n\n return (\n <SpsAutocomplete suggestions={colorSearch} value={color} onChange={handleChange} placeholder=\"Enter a color\"/>\n );\n }\n "]))),
|
|
1355
1355
|
},
|
|
1356
1356
|
debounce: {
|
|
1357
|
-
react: utils.code(templateObject_5$
|
|
1357
|
+
react: utils.code(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n function DemoComponent() {\n const [color, setColor] = React.useState();\n function colorSearch(search) {\n return [\"red\", \"blue\", \"green\"];\n }\n\n function handleChange(event) {\n setColor(event.target.value);\n }\n\n return (\n <SpsAutocomplete suggestions={colorSearch} debounce={1000} value={color} onChange={handleChange} placeholder=\"Enter a color\"/>\n );\n }\n "], ["\n function DemoComponent() {\n const [color, setColor] = React.useState();\n function colorSearch(search) {\n return [\"red\", \"blue\", \"green\"];\n }\n\n function handleChange(event) {\n setColor(event.target.value);\n }\n\n return (\n <SpsAutocomplete suggestions={colorSearch} debounce={1000} value={color} onChange={handleChange} placeholder=\"Enter a color\"/>\n );\n }\n "]))),
|
|
1358
1358
|
},
|
|
1359
1359
|
promise: {
|
|
1360
|
-
react: utils.code(templateObject_6$
|
|
1360
|
+
react: utils.code(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n function DemoComponent() {\n const [color, setColor] = React.useState();\n function colorSearch(search) {\n return new Promise((resolve, reject) => {\n resolve([\"red\", \"blue\", \"green\"]);\n });\n }\n\n function handleChange(event) {\n setColor(event.target.value);\n }\n\n return (\n <SpsAutocomplete suggestions={colorSearch} value={color} onChange={handleChange} placeholder=\"Enter a color\"/>\n );\n }\n "], ["\n function DemoComponent() {\n const [color, setColor] = React.useState();\n function colorSearch(search) {\n return new Promise((resolve, reject) => {\n resolve([\"red\", \"blue\", \"green\"]);\n });\n }\n\n function handleChange(event) {\n setColor(event.target.value);\n }\n\n return (\n <SpsAutocomplete suggestions={colorSearch} value={color} onChange={handleChange} placeholder=\"Enter a color\"/>\n );\n }\n "]))),
|
|
1361
1361
|
},
|
|
1362
1362
|
},
|
|
1363
1363
|
},
|
|
1364
1364
|
};
|
|
1365
|
-
var templateObject_1$
|
|
1365
|
+
var templateObject_1$S, templateObject_2$N, templateObject_3$F, templateObject_4$w, templateObject_5$o, templateObject_6$j;
|
|
1366
1366
|
|
|
1367
|
-
var propsDoc$
|
|
1367
|
+
var propsDoc$1t = {
|
|
1368
1368
|
alignLeft: 'boolean',
|
|
1369
1369
|
disabled: 'boolean',
|
|
1370
1370
|
icon: 'SpsIcon',
|
|
@@ -1377,7 +1377,7 @@ var propsDoc$1s = {
|
|
|
1377
1377
|
onOpen: '() => void',
|
|
1378
1378
|
onClose: '() => void',
|
|
1379
1379
|
};
|
|
1380
|
-
var propTypes$
|
|
1380
|
+
var propTypes$1x = __assign(__assign({}, spsGlobalPropTypes), { alignLeft: PropTypes.bool, disabled: PropTypes.bool, icon: enumValue(dsShared.SpsIcon), kind: enumValue(dsShared.DropdownKind), label: PropTypes.string,
|
|
1381
1381
|
// eslint thinks there is a space between the name and open paren below for some reason
|
|
1382
1382
|
// eslint-disable-next-line no-spaced-func
|
|
1383
1383
|
options: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.any])).isRequired, spinning: PropTypes.bool, spinningTitle: PropTypes.string, tallOptionList: PropTypes.bool, onOpen: fun(), onClose: fun() });
|
|
@@ -1472,13 +1472,13 @@ function SpsDropdown(props) {
|
|
|
1472
1472
|
spinning && (React__namespace.createElement("div", { className: "sps-spinner", key: 1 }, spinningTitle || t('design-system:button.spinningTitle')))))));
|
|
1473
1473
|
}
|
|
1474
1474
|
Object.assign(SpsDropdown, {
|
|
1475
|
-
props: propsDoc$
|
|
1476
|
-
propTypes: propTypes$
|
|
1475
|
+
props: propsDoc$1t,
|
|
1476
|
+
propTypes: propTypes$1x,
|
|
1477
1477
|
displayName: 'SpsDropdown',
|
|
1478
1478
|
});
|
|
1479
1479
|
|
|
1480
|
-
var propsDoc$
|
|
1481
|
-
var propTypes$
|
|
1480
|
+
var propsDoc$1s = {};
|
|
1481
|
+
var propTypes$1w = __assign({}, spsGlobalPropTypes);
|
|
1482
1482
|
function SpsButtonGroup(props) {
|
|
1483
1483
|
var children = props.children, className = props.className, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "unsafelyReplaceClassName"]);
|
|
1484
1484
|
var _a = __read(selectChildren(children, [
|
|
@@ -1496,8 +1496,8 @@ function SpsButtonGroup(props) {
|
|
|
1496
1496
|
others.length > 0 && others));
|
|
1497
1497
|
}
|
|
1498
1498
|
Object.assign(SpsButtonGroup, {
|
|
1499
|
-
props: propsDoc$
|
|
1500
|
-
propTypes: propTypes$
|
|
1499
|
+
props: propsDoc$1s,
|
|
1500
|
+
propTypes: propTypes$1w,
|
|
1501
1501
|
displayName: 'SpsButtonGroup',
|
|
1502
1502
|
});
|
|
1503
1503
|
|
|
@@ -1514,15 +1514,15 @@ var SpsButtonExamples = {
|
|
|
1514
1514
|
examples: {
|
|
1515
1515
|
basic: {
|
|
1516
1516
|
description: 'Without Icons',
|
|
1517
|
-
jsx: utils.code(templateObject_1$
|
|
1517
|
+
jsx: utils.code(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n <>\n <SpsButton className=\"mr-1 mb-1\">Default</SpsButton>\n <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.KEY}>Key</SpsButton>\n <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.CONFIRM}>Confirm</SpsButton>\n <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.DELETE}>Delete</SpsButton>\n <SpsButton className=\"mr-1 mb-1\" disabled>Disabled</SpsButton>\n </>\n "], ["\n <>\n <SpsButton className=\"mr-1 mb-1\">Default</SpsButton>\n <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.KEY}>Key</SpsButton>\n <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.CONFIRM}>Confirm</SpsButton>\n <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.DELETE}>Delete</SpsButton>\n <SpsButton className=\"mr-1 mb-1\" disabled>Disabled</SpsButton>\n </>\n "]))),
|
|
1518
1518
|
},
|
|
1519
1519
|
buttonsWithIcons: {
|
|
1520
1520
|
description: 'With Icons',
|
|
1521
|
-
jsx: utils.code(templateObject_2$
|
|
1521
|
+
jsx: utils.code(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n <>\n <SpsButton className=\"mr-1 mb-1\" icon={SpsIcon.DOWNLOAD_CLOUD}>\n Default\n </SpsButton>\n <SpsButton className=\"mr-1 mb-1\" icon={SpsIcon.KEY} kind={ButtonKind.KEY}>\n Key\n </SpsButton>\n <SpsButton\n className=\"mr-1 mb-1\"\n icon={SpsIcon.DOWNLOAD_CLOUD}\n kind={ButtonKind.CONFIRM}\n >\n Confirm\n </SpsButton>\n <SpsButton\n className=\"mr-1 mb-1\"\n icon={SpsIcon.TRASH}\n kind={ButtonKind.DELETE}\n >\n Delete\n </SpsButton>\n <SpsButton className=\"mr-1 mb-1\" icon={SpsIcon.DOWNLOAD_CLOUD} disabled>\n Disabled\n </SpsButton>\n </>\n "], ["\n <>\n <SpsButton className=\"mr-1 mb-1\" icon={SpsIcon.DOWNLOAD_CLOUD}>\n Default\n </SpsButton>\n <SpsButton className=\"mr-1 mb-1\" icon={SpsIcon.KEY} kind={ButtonKind.KEY}>\n Key\n </SpsButton>\n <SpsButton\n className=\"mr-1 mb-1\"\n icon={SpsIcon.DOWNLOAD_CLOUD}\n kind={ButtonKind.CONFIRM}\n >\n Confirm\n </SpsButton>\n <SpsButton\n className=\"mr-1 mb-1\"\n icon={SpsIcon.TRASH}\n kind={ButtonKind.DELETE}\n >\n Delete\n </SpsButton>\n <SpsButton className=\"mr-1 mb-1\" icon={SpsIcon.DOWNLOAD_CLOUD} disabled>\n Disabled\n </SpsButton>\n </>\n "]))),
|
|
1522
1522
|
},
|
|
1523
1523
|
spinning: {
|
|
1524
1524
|
description: 'Spinning',
|
|
1525
|
-
jsx: utils.code(templateObject_3$
|
|
1525
|
+
jsx: utils.code(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n <>\n <SpsButton className=\"mr-1 mb-1\" spinning>Default</SpsButton>\n <SpsButton className=\"mr-1 mb-1\" spinning kind={ButtonKind.KEY}>Key</SpsButton>\n <SpsButton className=\"mr-1 mb-1\" spinning kind={ButtonKind.CONFIRM}>Confirm</SpsButton>\n <SpsButton className=\"mr-1 mb-1\" spinning kind={ButtonKind.DELETE}>Delete</SpsButton>\n </>\n "], ["\n <>\n <SpsButton className=\"mr-1 mb-1\" spinning>Default</SpsButton>\n <SpsButton className=\"mr-1 mb-1\" spinning kind={ButtonKind.KEY}>Key</SpsButton>\n <SpsButton className=\"mr-1 mb-1\" spinning kind={ButtonKind.CONFIRM}>Confirm</SpsButton>\n <SpsButton className=\"mr-1 mb-1\" spinning kind={ButtonKind.DELETE}>Delete</SpsButton>\n </>\n "]))),
|
|
1526
1526
|
},
|
|
1527
1527
|
},
|
|
1528
1528
|
},
|
|
@@ -1532,15 +1532,15 @@ var SpsButtonExamples = {
|
|
|
1532
1532
|
examples: {
|
|
1533
1533
|
basic: {
|
|
1534
1534
|
description: 'Without Icons',
|
|
1535
|
-
jsx: utils.code(templateObject_4$
|
|
1535
|
+
jsx: utils.code(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n <>\n <SpsDropdown\n className=\"mr-1 mb-1\"\n label=\"Default\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n <SpsDropdown\n className=\"mr-1 mb-1\"\n kind={ButtonKind.KEY}\n label=\"Key\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n <SpsDropdown\n className=\"mr-1 mb-1\"\n kind={ButtonKind.CONFIRM}\n label=\"Confirm\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n <SpsDropdown\n className=\"mr-1 mb-1\"\n kind={ButtonKind.DELETE}\n label=\"Delete\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n <SpsDropdown\n className=\"mr-1 mb-1\"\n disabled\n label=\"Disabled\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n </>\n "], ["\n <>\n <SpsDropdown\n className=\"mr-1 mb-1\"\n label=\"Default\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n <SpsDropdown\n className=\"mr-1 mb-1\"\n kind={ButtonKind.KEY}\n label=\"Key\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n <SpsDropdown\n className=\"mr-1 mb-1\"\n kind={ButtonKind.CONFIRM}\n label=\"Confirm\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n <SpsDropdown\n className=\"mr-1 mb-1\"\n kind={ButtonKind.DELETE}\n label=\"Delete\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n <SpsDropdown\n className=\"mr-1 mb-1\"\n disabled\n label=\"Disabled\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n </>\n "]))),
|
|
1536
1536
|
},
|
|
1537
1537
|
withIcon: {
|
|
1538
1538
|
description: 'With Icons',
|
|
1539
|
-
jsx: utils.code(templateObject_5$
|
|
1539
|
+
jsx: utils.code(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n <>\n <SpsDropdown\n className=\"mr-1 mb-1\"\n icon={SpsIcon.DOWNLOAD_CLOUD}\n label=\"Default\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n <SpsDropdown\n className=\"mr-1 mb-1\"\n icon={SpsIcon.DOWNLOAD_CLOUD}\n kind={ButtonKind.KEY}\n label=\"Key\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n <SpsDropdown\n className=\"mr-1 mb-1\"\n icon={SpsIcon.DOWNLOAD_CLOUD}\n kind={ButtonKind.CONFIRM}\n label=\"Confirm\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n <SpsDropdown\n className=\"mr-1 mb-1\"\n icon={SpsIcon.TRASH}\n kind={ButtonKind.DELETE}\n label=\"Delete\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n <SpsDropdown\n className=\"mr-1 mb-1\"\n icon={SpsIcon.DOWNLOAD_CLOUD}\n disabled\n label=\"Disabled\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n </>\n "], ["\n <>\n <SpsDropdown\n className=\"mr-1 mb-1\"\n icon={SpsIcon.DOWNLOAD_CLOUD}\n label=\"Default\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n <SpsDropdown\n className=\"mr-1 mb-1\"\n icon={SpsIcon.DOWNLOAD_CLOUD}\n kind={ButtonKind.KEY}\n label=\"Key\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n <SpsDropdown\n className=\"mr-1 mb-1\"\n icon={SpsIcon.DOWNLOAD_CLOUD}\n kind={ButtonKind.CONFIRM}\n label=\"Confirm\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n <SpsDropdown\n className=\"mr-1 mb-1\"\n icon={SpsIcon.TRASH}\n kind={ButtonKind.DELETE}\n label=\"Delete\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n <SpsDropdown\n className=\"mr-1 mb-1\"\n icon={SpsIcon.DOWNLOAD_CLOUD}\n disabled\n label=\"Disabled\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n </>\n "]))),
|
|
1540
1540
|
},
|
|
1541
1541
|
spinning: {
|
|
1542
1542
|
description: 'Spinning',
|
|
1543
|
-
jsx: utils.code(templateObject_6$
|
|
1543
|
+
jsx: utils.code(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n <>\n <SpsDropdown\n spinning\n className=\"mr-1 mb-1\"\n label=\"Default\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n <SpsDropdown\n spinning\n className=\"mr-1 mb-1\"\n kind={ButtonKind.KEY}\n label=\"Key\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n <SpsDropdown\n spinning\n className=\"mr-1 mb-1\"\n kind={ButtonKind.CONFIRM}\n label=\"Confirm\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n <SpsDropdown\n spinning\n className=\"mr-1 mb-1\"\n kind={ButtonKind.DELETE}\n label=\"Delete\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n </>\n "], ["\n <>\n <SpsDropdown\n spinning\n className=\"mr-1 mb-1\"\n label=\"Default\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n <SpsDropdown\n spinning\n className=\"mr-1 mb-1\"\n kind={ButtonKind.KEY}\n label=\"Key\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n <SpsDropdown\n spinning\n className=\"mr-1 mb-1\"\n kind={ButtonKind.CONFIRM}\n label=\"Confirm\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n <SpsDropdown\n spinning\n className=\"mr-1 mb-1\"\n kind={ButtonKind.DELETE}\n label=\"Delete\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n </>\n "]))),
|
|
1544
1544
|
},
|
|
1545
1545
|
},
|
|
1546
1546
|
},
|
|
@@ -1692,14 +1692,14 @@ var SpsButtonExamples = {
|
|
|
1692
1692
|
},
|
|
1693
1693
|
},
|
|
1694
1694
|
};
|
|
1695
|
-
var templateObject_1$
|
|
1695
|
+
var templateObject_1$R, templateObject_2$M, templateObject_3$E, templateObject_4$v, templateObject_5$n, templateObject_6$i, templateObject_7$e, templateObject_8$d, templateObject_9$a, templateObject_10$8, templateObject_11$6, templateObject_12$4, templateObject_13$4, templateObject_14$4, templateObject_15$3, templateObject_16$2, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1;
|
|
1696
1696
|
|
|
1697
|
-
var propsDoc$
|
|
1697
|
+
var propsDoc$1r = {
|
|
1698
1698
|
content: 'ReactNodeLike',
|
|
1699
1699
|
icon: 'SpsIcon',
|
|
1700
1700
|
title: 'string',
|
|
1701
1701
|
};
|
|
1702
|
-
var propTypes$
|
|
1702
|
+
var propTypes$1v = __assign(__assign({}, spsGlobalPropTypes), { content: PropTypes.node, icon: enumValue(dsShared.SpsIcon), title: PropTypes.string });
|
|
1703
1703
|
function SpsCardHeader(props) {
|
|
1704
1704
|
var content = props.content, className = props.className, icon = props.icon, title = props.title; props["data-testid"]; var unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["content", "className", "icon", "title", 'data-testid', "unsafelyReplaceClassName"]);
|
|
1705
1705
|
var classes = clsx__default['default'](unsafelyReplaceClassName || 'sps-card__header', className);
|
|
@@ -1712,16 +1712,16 @@ function SpsCardHeader(props) {
|
|
|
1712
1712
|
React__namespace.createElement("div", { className: "sps-card__header-content" }, content)));
|
|
1713
1713
|
}
|
|
1714
1714
|
Object.assign(SpsCardHeader, {
|
|
1715
|
-
props: propsDoc$
|
|
1716
|
-
propTypes: propTypes$
|
|
1715
|
+
props: propsDoc$1r,
|
|
1716
|
+
propTypes: propTypes$1v,
|
|
1717
1717
|
displayName: 'SpsCardHeader',
|
|
1718
1718
|
});
|
|
1719
1719
|
|
|
1720
|
-
var propsDoc$
|
|
1720
|
+
var propsDoc$1q = {
|
|
1721
1721
|
icon: 'SpsIcon',
|
|
1722
1722
|
kind: 'TagKind',
|
|
1723
1723
|
};
|
|
1724
|
-
var propTypes$
|
|
1724
|
+
var propTypes$1u = __assign(__assign({}, spsGlobalPropTypes), { icon: enumValue(dsShared.SpsIcon), kind: enumValue(dsShared.TagKind) });
|
|
1725
1725
|
function SpsTag(props) {
|
|
1726
1726
|
var children = props.children, className = props.className, icon = props.icon, _a = props.kind, kind = _a === void 0 ? dsShared.TagKind.DEFAULT : _a, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "icon", "kind", 'data-testid', "unsafelyReplaceClassName"]);
|
|
1727
1727
|
var title = React__namespace.Children.toArray(children)
|
|
@@ -1733,12 +1733,12 @@ function SpsTag(props) {
|
|
|
1733
1733
|
children));
|
|
1734
1734
|
}
|
|
1735
1735
|
Object.assign(SpsTag, {
|
|
1736
|
-
props: propsDoc$
|
|
1737
|
-
propTypes: propTypes$
|
|
1736
|
+
props: propsDoc$1q,
|
|
1737
|
+
propTypes: propTypes$1u,
|
|
1738
1738
|
displayName: 'SpsTag',
|
|
1739
1739
|
});
|
|
1740
1740
|
|
|
1741
|
-
var propsDoc$
|
|
1741
|
+
var propsDoc$1p = {
|
|
1742
1742
|
activateTab: 'Function',
|
|
1743
1743
|
active: 'boolean',
|
|
1744
1744
|
icon: 'SpsIcon',
|
|
@@ -1748,7 +1748,7 @@ var propsDoc$1o = {
|
|
|
1748
1748
|
tagKind: 'TagKind',
|
|
1749
1749
|
tagIcon: 'SpsIcon',
|
|
1750
1750
|
};
|
|
1751
|
-
var propTypes$
|
|
1751
|
+
var propTypes$1t = __assign(__assign({}, spsGlobalPropTypes), { activateTab: PropTypes.func, active: PropTypes.bool, icon: enumValue(dsShared.SpsIcon), label: PropTypes.string, index: PropTypes.number, tag: PropTypes.string, tagKind: enumValue(dsShared.TagKind), tagIcon: enumValue(dsShared.SpsIcon) });
|
|
1752
1752
|
function SpsCardTabbedPane(props) {
|
|
1753
1753
|
var _this = this;
|
|
1754
1754
|
var activateTab = props.activateTab, active = props.active, children = props.children, className = props.className, label = props.label, icon = props.icon, id = props.id, index = props.index, tag = props.tag, tagKind = props.tagKind, tagIcon = props.tagIcon; props["data-testid"]; var unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["activateTab", "active", "children", "className", "label", "icon", "id", "index", "tag", "tagKind", "tagIcon", 'data-testid', "unsafelyReplaceClassName"]);
|
|
@@ -1769,8 +1769,8 @@ function SpsCardTabbedPane(props) {
|
|
|
1769
1769
|
tag && React__namespace.createElement(SpsTag, { kind: tagKind || dsShared.TagKind.KEY, icon: tagIcon }, tag)));
|
|
1770
1770
|
}
|
|
1771
1771
|
Object.assign(SpsCardTabbedPane, {
|
|
1772
|
-
props: propsDoc$
|
|
1773
|
-
propTypes: propTypes$
|
|
1772
|
+
props: propsDoc$1p,
|
|
1773
|
+
propTypes: propTypes$1t,
|
|
1774
1774
|
displayName: 'SpsCardTabbedPane',
|
|
1775
1775
|
});
|
|
1776
1776
|
|
|
@@ -1845,14 +1845,14 @@ function useTab$1(children, activeTab, isTabbedCard) {
|
|
|
1845
1845
|
return [currentlyActiveTab, activateTab];
|
|
1846
1846
|
}
|
|
1847
1847
|
|
|
1848
|
-
var propsDoc$
|
|
1848
|
+
var propsDoc$1o = {
|
|
1849
1849
|
activeTab: 'string',
|
|
1850
1850
|
footer: 'ReactNodeOrRenderFn',
|
|
1851
1851
|
headerContent: 'ReactNodeOrRenderFn',
|
|
1852
1852
|
headerIcon: 'SpsIcon',
|
|
1853
1853
|
headerTitle: 'string',
|
|
1854
1854
|
};
|
|
1855
|
-
var propTypes$
|
|
1855
|
+
var propTypes$1s = __assign(__assign({}, spsGlobalPropTypes), { activeTab: PropTypes.string, footer: nodeOrRenderFn, headerContent: nodeOrRenderFn, headerIcon: enumValue(dsShared.SpsIcon), headerTitle: PropTypes.string });
|
|
1856
1856
|
function SpsCard(props) {
|
|
1857
1857
|
React__namespace.useEffect(function () {
|
|
1858
1858
|
console.log([
|
|
@@ -1883,8 +1883,8 @@ function SpsCard(props) {
|
|
|
1883
1883
|
footer && (React__namespace.createElement("div", { className: "sps-card__footer", "data-testid": testId + "__footer" }, contentOf(footer)))));
|
|
1884
1884
|
}
|
|
1885
1885
|
Object.assign(SpsCard, {
|
|
1886
|
-
props: propsDoc$
|
|
1887
|
-
propTypes: propTypes$
|
|
1886
|
+
props: propsDoc$1o,
|
|
1887
|
+
propTypes: propTypes$1s,
|
|
1888
1888
|
displayName: 'SpsCard',
|
|
1889
1889
|
});
|
|
1890
1890
|
|
|
@@ -1894,13 +1894,13 @@ var SpsCardExamples = {
|
|
|
1894
1894
|
description: '<p>Basic Cards can include any type of content, such as tables, forms, description lists, or general copy</p>',
|
|
1895
1895
|
examples: {
|
|
1896
1896
|
basic: {
|
|
1897
|
-
jsx: utils.code(templateObject_1$
|
|
1897
|
+
jsx: utils.code(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n <SpsCardV2>\n <p>Plain card.</p>\n </SpsCardV2>\n "], ["\n <SpsCardV2>\n <p>Plain card.</p>\n </SpsCardV2>\n "]))),
|
|
1898
1898
|
},
|
|
1899
1899
|
sections: {
|
|
1900
|
-
jsx: utils.code(templateObject_2$
|
|
1900
|
+
jsx: utils.code(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n <SpsCardV2>\n <section>\n <h3>Description</h3>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt\n ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in\n voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat\n non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n </section>\n <section>\n <h3>Usage Guidelines</h3>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque\n laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi\n architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit\n aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione\n voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,\n consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et\n dolore magnam aliquam quaerat voluptatem.\n </p>\n </section>\n </SpsCardV2>\n "], ["\n <SpsCardV2>\n <section>\n <h3>Description</h3>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt\n ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in\n voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat\n non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n </section>\n <section>\n <h3>Usage Guidelines</h3>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque\n laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi\n architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit\n aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione\n voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,\n consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et\n dolore magnam aliquam quaerat voluptatem.\n </p>\n </section>\n </SpsCardV2>\n "]))),
|
|
1901
1901
|
},
|
|
1902
1902
|
nestedSections: {
|
|
1903
|
-
jsx: utils.code(templateObject_3$
|
|
1903
|
+
jsx: utils.code(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n <SpsCardV2>\n <section>\n <p>Card Header</p>\n </section>\n <section className=\"d-flex\">\n <section>\n <p>Section 1</p>\n </section>\n <section>\n <p>Section 2</p>\n </section>\n <section>\n <p>Section 3</p>\n </section>\n </section>\n </SpsCardV2>\n "], ["\n <SpsCardV2>\n <section>\n <p>Card Header</p>\n </section>\n <section className=\"d-flex\">\n <section>\n <p>Section 1</p>\n </section>\n <section>\n <p>Section 2</p>\n </section>\n <section>\n <p>Section 3</p>\n </section>\n </section>\n </SpsCardV2>\n "]))),
|
|
1904
1904
|
},
|
|
1905
1905
|
},
|
|
1906
1906
|
},
|
|
@@ -1909,13 +1909,13 @@ var SpsCardExamples = {
|
|
|
1909
1909
|
description: '<p>Cards requiring a descriptive title or actionable items such as buttons or links can utilize the Card Header</p>',
|
|
1910
1910
|
examples: {
|
|
1911
1911
|
title: {
|
|
1912
|
-
jsx: utils.code(templateObject_4$
|
|
1912
|
+
jsx: utils.code(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n <SpsCardV2>\n <SpsCardV2Header>\n <SpsCardV2Title>Card Title</SpsCardV2Title>\n </SpsCardV2Header>\n <p>Card with title.</p>\n </SpsCardV2>\n "], ["\n <SpsCardV2>\n <SpsCardV2Header>\n <SpsCardV2Title>Card Title</SpsCardV2Title>\n </SpsCardV2Header>\n <p>Card with title.</p>\n </SpsCardV2>\n "]))),
|
|
1913
1913
|
},
|
|
1914
1914
|
titleAndIcon: {
|
|
1915
|
-
jsx: utils.code(templateObject_5$
|
|
1915
|
+
jsx: utils.code(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n <SpsCardV2>\n <SpsCardV2Header>\n <SpsCardV2Title>\n <SpsI icon={SpsIcon.CHART_PIE}/>\n <span className=\"mr-1\">Card Title</span>\n <SpsTag kind={TagKind.INFO}>33</SpsTag>\n </SpsCardV2Title>\n </SpsCardV2Header>\n <p>Card with title including icon and tag.</p>\n </SpsCardV2>\n "], ["\n <SpsCardV2>\n <SpsCardV2Header>\n <SpsCardV2Title>\n <SpsI icon={SpsIcon.CHART_PIE}/>\n <span className=\"mr-1\">Card Title</span>\n <SpsTag kind={TagKind.INFO}>33</SpsTag>\n </SpsCardV2Title>\n </SpsCardV2Header>\n <p>Card with title including icon and tag.</p>\n </SpsCardV2>\n "]))),
|
|
1916
1916
|
},
|
|
1917
1917
|
controls: {
|
|
1918
|
-
jsx: utils.code(templateObject_6$
|
|
1918
|
+
jsx: utils.code(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n <SpsCardV2>\n <SpsCardV2Header className=\"sfg-row\">\n <div className=\"sfg-col-6\">\n <SpsCardV2Title>Card Title</SpsCardV2Title>\n </div>\n <div className=\"sfg-col-6 text-right\">\n <SpsSelect options={[\"a\", \"b\", \"c\"]}/>\n <SpsVr/>\n <SpsButton kind={ButtonKind.LINK}>Button Text</SpsButton>\n <SpsVr/>\n <SpsButton\n kind={ButtonKind.ICON}\n icon={SpsIcon.PRINTER}\n aria-label=\"Print\"\n />\n <SpsButton\n kind={ButtonKind.ICON}\n icon={SpsIcon.DOWNLOAD_CLOUD}\n aria-label=\"Download\"\n />\n <SpsVr/>\n <SpsButton>Button</SpsButton>\n </div>\n </SpsCardV2Header>\n\n <p>Card with title and controls in header.</p>\n </SpsCardV2>\n "], ["\n <SpsCardV2>\n <SpsCardV2Header className=\"sfg-row\">\n <div className=\"sfg-col-6\">\n <SpsCardV2Title>Card Title</SpsCardV2Title>\n </div>\n <div className=\"sfg-col-6 text-right\">\n <SpsSelect options={[\"a\", \"b\", \"c\"]}/>\n <SpsVr/>\n <SpsButton kind={ButtonKind.LINK}>Button Text</SpsButton>\n <SpsVr/>\n <SpsButton\n kind={ButtonKind.ICON}\n icon={SpsIcon.PRINTER}\n aria-label=\"Print\"\n />\n <SpsButton\n kind={ButtonKind.ICON}\n icon={SpsIcon.DOWNLOAD_CLOUD}\n aria-label=\"Download\"\n />\n <SpsVr/>\n <SpsButton>Button</SpsButton>\n </div>\n </SpsCardV2Header>\n\n <p>Card with title and controls in header.</p>\n </SpsCardV2>\n "]))),
|
|
1919
1919
|
},
|
|
1920
1920
|
},
|
|
1921
1921
|
},
|
|
@@ -1956,9 +1956,9 @@ var SpsCardExamples = {
|
|
|
1956
1956
|
},
|
|
1957
1957
|
},
|
|
1958
1958
|
};
|
|
1959
|
-
var templateObject_1$
|
|
1959
|
+
var templateObject_1$Q, templateObject_2$L, templateObject_3$D, templateObject_4$u, templateObject_5$m, templateObject_6$h, templateObject_7$d, templateObject_8$c, templateObject_9$9, templateObject_10$7, templateObject_11$5, templateObject_12$3, templateObject_13$3, templateObject_14$3, templateObject_15$2;
|
|
1960
1960
|
|
|
1961
|
-
var propsDoc$
|
|
1961
|
+
var propsDoc$1n = {
|
|
1962
1962
|
checked: 'boolean',
|
|
1963
1963
|
disabled: 'boolean',
|
|
1964
1964
|
formMeta: 'SpsFormFieldMeta<boolean>',
|
|
@@ -1967,7 +1967,7 @@ var propsDoc$1m = {
|
|
|
1967
1967
|
label: 'string',
|
|
1968
1968
|
onChange: 'ChangeEventHandler',
|
|
1969
1969
|
};
|
|
1970
|
-
var propTypes$
|
|
1970
|
+
var propTypes$1r = __assign(__assign({}, spsGlobalPropTypes), { checked: PropTypes.bool, disabled: PropTypes.bool, formControl: impl(), formMeta: impl(), indeterminate: PropTypes.bool, inline: PropTypes.bool, label: PropTypes.string, onChange: fun() });
|
|
1971
1971
|
function SpsCheckbox(_a) {
|
|
1972
1972
|
var checkedProp = _a.checked, className = _a.className, disabled = _a.disabled, formControl = _a.formControl, formMeta = _a.formMeta, id = _a.id, indeterminateProp = _a.indeterminate, inline = _a.inline, label = _a.label, onChange = _a.onChange, testId = _a["data-testid"], unsafelyReplaceClassName = _a.unsafelyReplaceClassName, rest = __rest(_a, ["checked", "className", "disabled", "formControl", "formMeta", "id", "indeterminate", "inline", "label", "onChange", 'data-testid', "unsafelyReplaceClassName"]);
|
|
1973
1973
|
var meta = formMeta || formControl;
|
|
@@ -1998,18 +1998,18 @@ function SpsCheckbox(_a) {
|
|
|
1998
1998
|
React__namespace.createElement("label", { className: "sps-checkable__label", htmlFor: controlId }, label || '')));
|
|
1999
1999
|
}
|
|
2000
2000
|
Object.assign(SpsCheckbox, {
|
|
2001
|
-
props: propsDoc$
|
|
2002
|
-
propTypes: propTypes$
|
|
2001
|
+
props: propsDoc$1n,
|
|
2002
|
+
propTypes: propTypes$1r,
|
|
2003
2003
|
displayName: 'SpsCheckbox',
|
|
2004
2004
|
});
|
|
2005
2005
|
|
|
2006
2006
|
var SpsCheckboxExamples = {
|
|
2007
2007
|
labels: {
|
|
2008
2008
|
label: 'Labels',
|
|
2009
|
-
description: utils.code(templateObject_1$
|
|
2009
|
+
description: utils.code(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n <p>An individual checkbox should be labeled with its own <code>label</code> prop,\n not the <code><SpsLabel></code> component.</p>\n "], ["\n <p>An individual checkbox should be labeled with its own <code>label</code> prop,\n not the <code><SpsLabel></code> component.</p>\n "]))),
|
|
2010
2010
|
examples: {
|
|
2011
2011
|
label: {
|
|
2012
|
-
react: utils.code(templateObject_2$
|
|
2012
|
+
react: utils.code(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n function DemoComponent() {\n const { formValue, formMeta, updateForm } = useSpsForm({\n red: true,\n blue: false,\n green: false,\n })\n\n return <>\n <SpsCheckbox\n name=\"red\"\n label=\"Red\"\n checked={formValue.red}\n formMeta={formMeta.fields.red}\n />\n <SpsCheckbox\n name=\"blue\"\n label=\"Blue\"\n checked={formValue.blue}\n formMeta={formMeta.fields.blue}\n />\n <SpsCheckbox\n name=\"green\"\n label=\"Green\"\n checked={formValue.green}\n formMeta={formMeta.fields.green}\n indeterminate\n />\n </>\n }\n "], ["\n function DemoComponent() {\n const { formValue, formMeta, updateForm } = useSpsForm({\n red: true,\n blue: false,\n green: false,\n })\n\n return <>\n <SpsCheckbox\n name=\"red\"\n label=\"Red\"\n checked={formValue.red}\n formMeta={formMeta.fields.red}\n />\n <SpsCheckbox\n name=\"blue\"\n label=\"Blue\"\n checked={formValue.blue}\n formMeta={formMeta.fields.blue}\n />\n <SpsCheckbox\n name=\"green\"\n label=\"Green\"\n checked={formValue.green}\n formMeta={formMeta.fields.green}\n indeterminate\n />\n </>\n }\n "]))),
|
|
2013
2013
|
},
|
|
2014
2014
|
},
|
|
2015
2015
|
},
|
|
@@ -2017,30 +2017,30 @@ var SpsCheckboxExamples = {
|
|
|
2017
2017
|
label: 'Disabled',
|
|
2018
2018
|
examples: {
|
|
2019
2019
|
disabled: {
|
|
2020
|
-
react: utils.code(templateObject_3$
|
|
2020
|
+
react: utils.code(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n function DemoComponent() {\n const { formValue, formMeta, updateForm } = useSpsForm({\n red: true,\n blue: false,\n green: false,\n })\n\n return <>\n <SpsCheckbox\n name=\"red\"\n label=\"Red\"\n checked={formValue.red}\n formMeta={formMeta.fields.red}\n disabled\n />\n <SpsCheckbox\n name=\"blue\"\n label=\"Blue\"\n checked={formValue.blue}\n formMeta={formMeta.fields.blue}\n disabled\n />\n <SpsCheckbox\n name=\"green\"\n label=\"Green\"\n checked={formValue.green}\n formMeta={formMeta.fields.green}\n indeterminate\n disabled\n />\n </>\n }\n "], ["\n function DemoComponent() {\n const { formValue, formMeta, updateForm } = useSpsForm({\n red: true,\n blue: false,\n green: false,\n })\n\n return <>\n <SpsCheckbox\n name=\"red\"\n label=\"Red\"\n checked={formValue.red}\n formMeta={formMeta.fields.red}\n disabled\n />\n <SpsCheckbox\n name=\"blue\"\n label=\"Blue\"\n checked={formValue.blue}\n formMeta={formMeta.fields.blue}\n disabled\n />\n <SpsCheckbox\n name=\"green\"\n label=\"Green\"\n checked={formValue.green}\n formMeta={formMeta.fields.green}\n indeterminate\n disabled\n />\n </>\n }\n "]))),
|
|
2021
2021
|
},
|
|
2022
2022
|
},
|
|
2023
2023
|
},
|
|
2024
2024
|
c_noLabels: {
|
|
2025
2025
|
label: 'No Label',
|
|
2026
|
-
description: utils.code(templateObject_4$
|
|
2026
|
+
description: utils.code(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n <p>Checkboxes without labels are used in table rows and Summary List Rows\n to allow those rows to be selected and deselected. They are not normally\n used elsewhere and doing so should be done with utmost caution. Any checkbox\n without a label should visually have an obvious purpose and should always have\n an <code>aria-label</code> describing what it's for to screen reader users.</p>\n "], ["\n <p>Checkboxes without labels are used in table rows and Summary List Rows\n to allow those rows to be selected and deselected. They are not normally\n used elsewhere and doing so should be done with utmost caution. Any checkbox\n without a label should visually have an obvious purpose and should always have\n an <code>aria-label</code> describing what it's for to screen reader users.</p>\n "]))),
|
|
2027
2027
|
examples: {
|
|
2028
2028
|
noLabels: {
|
|
2029
|
-
react: utils.code(templateObject_5$
|
|
2029
|
+
react: utils.code(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n function Component() {\n const [rowIsSelected, setRowIsSelected] = React.useState(true);\n\n function handleSelectionChange(event) {\n setRowIsSelected(event.target.checked);\n }\n\n return (\n <SpsSummaryListRow selected={rowIsSelected}>\n <SpsSummaryListColumn width=\"2.8rem\" lean>\n <SpsCheckbox aria-label=\"Row Selected\" checked={rowIsSelected} onChange={handleSelectionChange}/>\n </SpsSummaryListColumn>\n <SpsSummaryListColumn>\n <SpsI icon={SpsIcon.STATUS_ERROR} size={SpsIconSize.LARGE} className=\"align-middle mr-2 pr-1\" />\n <div className=\"d-inline-block align-middle\">\n <div className=\"fs-18\">\n <a href=\"#\">Heading</a>\n </div>\n <div className=\"fs-14\">Sub Heading</div>\n </div>\n </SpsSummaryListColumn>\n </SpsSummaryListRow>\n );\n }\n "], ["\n function Component() {\n const [rowIsSelected, setRowIsSelected] = React.useState(true);\n\n function handleSelectionChange(event) {\n setRowIsSelected(event.target.checked);\n }\n\n return (\n <SpsSummaryListRow selected={rowIsSelected}>\n <SpsSummaryListColumn width=\"2.8rem\" lean>\n <SpsCheckbox aria-label=\"Row Selected\" checked={rowIsSelected} onChange={handleSelectionChange}/>\n </SpsSummaryListColumn>\n <SpsSummaryListColumn>\n <SpsI icon={SpsIcon.STATUS_ERROR} size={SpsIconSize.LARGE} className=\"align-middle mr-2 pr-1\" />\n <div className=\"d-inline-block align-middle\">\n <div className=\"fs-18\">\n <a href=\"#\">Heading</a>\n </div>\n <div className=\"fs-14\">Sub Heading</div>\n </div>\n </SpsSummaryListColumn>\n </SpsSummaryListRow>\n );\n }\n "]))),
|
|
2030
2030
|
},
|
|
2031
2031
|
},
|
|
2032
2032
|
},
|
|
2033
2033
|
};
|
|
2034
|
-
var templateObject_1$
|
|
2034
|
+
var templateObject_1$P, templateObject_2$K, templateObject_3$C, templateObject_4$t, templateObject_5$l;
|
|
2035
2035
|
|
|
2036
|
-
var propsDoc$
|
|
2036
|
+
var propsDoc$1m = {
|
|
2037
2037
|
disabled: 'boolean',
|
|
2038
2038
|
href: 'string',
|
|
2039
2039
|
kind: 'ClickableTagKind',
|
|
2040
2040
|
onAdd: '() => void',
|
|
2041
2041
|
onRemove: '() => void',
|
|
2042
2042
|
};
|
|
2043
|
-
var propTypes$
|
|
2043
|
+
var propTypes$1q = __assign(__assign({}, spsGlobalPropTypes), { disabled: PropTypes.bool, href: PropTypes.string, kind: enumValue(dsShared.ClickableTagKind), onAdd: fun(), onRemove: fun() });
|
|
2044
2044
|
function SpsClickableTag(props) {
|
|
2045
2045
|
var children = props.children, className = props.className, disabled = props.disabled, href = props.href, _a = props.kind, kind = _a === void 0 ? dsShared.ClickableTagKind.BLUE : _a, onAdd = props.onAdd, onRemove = props.onRemove, onClick = props.onClick, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "disabled", "href", "kind", "onAdd", "onRemove", "onClick", 'data-testid', "unsafelyReplaceClassName"]);
|
|
2046
2046
|
var classes = clsx__default['default'](unsafelyReplaceClassName || 'sps-clickable-tag', "sps-clickable-tag--" + kind, className, disabled && 'sps-clickable-tag--disabled', (onAdd || onRemove) && 'sps-clickable-tag--icon');
|
|
@@ -2095,8 +2095,8 @@ function SpsMultiSelectTag(props) {
|
|
|
2095
2095
|
return React__namespace.createElement(SpsClickableTag, __assign({}, clickableTagProps), children);
|
|
2096
2096
|
}
|
|
2097
2097
|
Object.assign(SpsClickableTag, {
|
|
2098
|
-
props: propsDoc$
|
|
2099
|
-
propTypes: propTypes$
|
|
2098
|
+
props: propsDoc$1m,
|
|
2099
|
+
propTypes: propTypes$1q,
|
|
2100
2100
|
displayName: 'SpsClickableTag',
|
|
2101
2101
|
});
|
|
2102
2102
|
|
|
@@ -2105,10 +2105,10 @@ var SpsClickableTagExamples = {
|
|
|
2105
2105
|
label: 'Basic',
|
|
2106
2106
|
examples: {
|
|
2107
2107
|
basic: {
|
|
2108
|
-
react: utils.code(templateObject_1$
|
|
2108
|
+
react: utils.code(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n import { SpsClickableTag } from \"@spscommerce/ds-react\";\n import { ClickableTagKind } from \"@spscommerce/ds-shared\";\n function Component() {\n return (\n <>\n <SpsClickableTag className=\"mt-1 ml-1\">Blue</SpsClickableTag>\n <SpsClickableTag className=\"mt-1 ml-1\" kind={ClickableTagKind.GRAY}>\n Gray\n </SpsClickableTag>\n </>\n );\n }\n "], ["\n import { SpsClickableTag } from \"@spscommerce/ds-react\";\n import { ClickableTagKind } from \"@spscommerce/ds-shared\";\n function Component() {\n return (\n <>\n <SpsClickableTag className=\"mt-1 ml-1\">Blue</SpsClickableTag>\n <SpsClickableTag className=\"mt-1 ml-1\" kind={ClickableTagKind.GRAY}>\n Gray\n </SpsClickableTag>\n </>\n );\n }\n "]))),
|
|
2109
2109
|
},
|
|
2110
2110
|
disabled: {
|
|
2111
|
-
react: utils.code(templateObject_2$
|
|
2111
|
+
react: utils.code(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n import { SpsClickableTag } from \"@spscommerce/ds-react\";\n function Component() {\n return (\n <SpsClickableTag className=\"mt-1 ml-1\" disabled>\n Disabled\n </SpsClickableTag>\n );\n }\n "], ["\n import { SpsClickableTag } from \"@spscommerce/ds-react\";\n function Component() {\n return (\n <SpsClickableTag className=\"mt-1 ml-1\" disabled>\n Disabled\n </SpsClickableTag>\n );\n }\n "]))),
|
|
2112
2112
|
},
|
|
2113
2113
|
},
|
|
2114
2114
|
},
|
|
@@ -2116,10 +2116,10 @@ var SpsClickableTagExamples = {
|
|
|
2116
2116
|
label: 'Button',
|
|
2117
2117
|
examples: {
|
|
2118
2118
|
Remove: {
|
|
2119
|
-
react: utils.code(templateObject_3$
|
|
2119
|
+
react: utils.code(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n import { SpsClickableTag } from \"@spscommerce/ds-react\";\n function Component() {\n return (\n <>\n <SpsClickableTag\n className=\"mt-1 ml-1\"\n onRemove={() => console.log(\"removed\")}\n >\n One\n </SpsClickableTag>\n <SpsClickableTag\n className=\"mt-1 ml-1\"\n onRemove={() => console.log(\"removed\")}\n >\n Two\n </SpsClickableTag>\n </>\n );\n }\n "], ["\n import { SpsClickableTag } from \"@spscommerce/ds-react\";\n function Component() {\n return (\n <>\n <SpsClickableTag\n className=\"mt-1 ml-1\"\n onRemove={() => console.log(\"removed\")}\n >\n One\n </SpsClickableTag>\n <SpsClickableTag\n className=\"mt-1 ml-1\"\n onRemove={() => console.log(\"removed\")}\n >\n Two\n </SpsClickableTag>\n </>\n );\n }\n "]))),
|
|
2120
2120
|
},
|
|
2121
2121
|
Add: {
|
|
2122
|
-
react: utils.code(templateObject_4$
|
|
2122
|
+
react: utils.code(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n import { SpsClickableTag } from \"@spscommerce/ds-react\";\n function Component() {\n return (\n <>\n <SpsClickableTag className=\"mt-1 ml-1\" onAdd={() => console.log(\"added\")}>\n One\n </SpsClickableTag>\n <SpsClickableTag className=\"mt-1 ml-1\" onAdd={() => console.log(\"added\")}>\n Two\n </SpsClickableTag>\n </>\n );\n }\n "], ["\n import { SpsClickableTag } from \"@spscommerce/ds-react\";\n function Component() {\n return (\n <>\n <SpsClickableTag className=\"mt-1 ml-1\" onAdd={() => console.log(\"added\")}>\n One\n </SpsClickableTag>\n <SpsClickableTag className=\"mt-1 ml-1\" onAdd={() => console.log(\"added\")}>\n Two\n </SpsClickableTag>\n </>\n );\n }\n "]))),
|
|
2123
2123
|
},
|
|
2124
2124
|
},
|
|
2125
2125
|
},
|
|
@@ -2127,17 +2127,17 @@ var SpsClickableTagExamples = {
|
|
|
2127
2127
|
label: 'Link',
|
|
2128
2128
|
examples: {
|
|
2129
2129
|
basic: {
|
|
2130
|
-
react: utils.code(templateObject_5$
|
|
2130
|
+
react: utils.code(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n import { SpsClickableTag } from \"@spscommerce/ds-react\";\n import { ClickableTagKind } from \"@spscommerce/ds-shared\";\n function Component() {\n return (\n <>\n <SpsClickableTag\n className=\"mt-1 ml-1\"\n href=\"https://google.com\"\n >\n Link\n </SpsClickableTag>\n <SpsClickableTag\n className=\"mt-1 ml-1\"\n onClick={() => window.alert(\"hi\")}\n kind={ClickableTagKind.GRAY}\n >\n Link\n </SpsClickableTag>\n </>\n )\n }\n "], ["\n import { SpsClickableTag } from \"@spscommerce/ds-react\";\n import { ClickableTagKind } from \"@spscommerce/ds-shared\";\n function Component() {\n return (\n <>\n <SpsClickableTag\n className=\"mt-1 ml-1\"\n href=\"https://google.com\"\n >\n Link\n </SpsClickableTag>\n <SpsClickableTag\n className=\"mt-1 ml-1\"\n onClick={() => window.alert(\"hi\")}\n kind={ClickableTagKind.GRAY}\n >\n Link\n </SpsClickableTag>\n </>\n )\n }\n "]))),
|
|
2131
2131
|
},
|
|
2132
2132
|
button: {
|
|
2133
|
-
react: utils.code(templateObject_6$
|
|
2133
|
+
react: utils.code(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n import { SpsClickableTag } from \"@spscommerce/ds-react\";\n function Component() {\n return (\n <>\n <SpsClickableTag\n className=\"mt-1 ml-1\"\n href=\"https://google.com\"\n onRemove={() => console.log(\"removed\")}\n >\n Remove\n </SpsClickableTag>\n <SpsClickableTag\n className=\"mt-1 ml-1\"\n onClick={() => window.alert(\"hi\")}\n onAdd={() => console.log(\"added\")}\n >\n Add\n </SpsClickableTag>\n </>\n );\n }\n "], ["\n import { SpsClickableTag } from \"@spscommerce/ds-react\";\n function Component() {\n return (\n <>\n <SpsClickableTag\n className=\"mt-1 ml-1\"\n href=\"https://google.com\"\n onRemove={() => console.log(\"removed\")}\n >\n Remove\n </SpsClickableTag>\n <SpsClickableTag\n className=\"mt-1 ml-1\"\n onClick={() => window.alert(\"hi\")}\n onAdd={() => console.log(\"added\")}\n >\n Add\n </SpsClickableTag>\n </>\n );\n }\n "]))),
|
|
2134
2134
|
},
|
|
2135
2135
|
},
|
|
2136
2136
|
},
|
|
2137
2137
|
};
|
|
2138
|
-
var templateObject_1$
|
|
2138
|
+
var templateObject_1$O, templateObject_2$J, templateObject_3$B, templateObject_4$s, templateObject_5$k, templateObject_6$g;
|
|
2139
2139
|
|
|
2140
|
-
var propsDoc$
|
|
2140
|
+
var propsDoc$1l = {
|
|
2141
2141
|
index: 'number',
|
|
2142
2142
|
key: 'string',
|
|
2143
2143
|
columnId: 'string',
|
|
@@ -2146,7 +2146,7 @@ var propsDoc$1k = {
|
|
|
2146
2146
|
onDelete: '(columnValue: string) => void',
|
|
2147
2147
|
mandatory: 'boolean',
|
|
2148
2148
|
};
|
|
2149
|
-
var propTypes$
|
|
2149
|
+
var propTypes$1p = __assign(__assign({}, spsGlobalPropTypes), { index: PropTypes.number, key: PropTypes.string, columnId: PropTypes.string, name: PropTypes.string, value: PropTypes.string, onDelete: fun(), mandatory: PropTypes.bool });
|
|
2150
2150
|
function SpsColumnChooserColumn(props) {
|
|
2151
2151
|
var index = props.index; props.key; var columnId = props.columnId, name = props.name, value = props.value, onDelete = props.onDelete, mandatory = props.mandatory, rest = __rest(props, ["index", "key", "columnId", "name", "value", "onDelete", "mandatory"]);
|
|
2152
2152
|
var t = React__namespace.useContext(I18nContext).t;
|
|
@@ -2165,19 +2165,19 @@ function SpsColumnChooserColumn(props) {
|
|
|
2165
2165
|
} })))))); }));
|
|
2166
2166
|
}
|
|
2167
2167
|
Object.assign(SpsColumnChooserColumn, {
|
|
2168
|
-
props: propsDoc$
|
|
2169
|
-
propTypes: propTypes$
|
|
2168
|
+
props: propsDoc$1l,
|
|
2169
|
+
propTypes: propTypes$1p,
|
|
2170
2170
|
displayName: 'SpsColumnChooserColumn',
|
|
2171
2171
|
});
|
|
2172
2172
|
|
|
2173
2173
|
// TODO: Put English strings into i18n system
|
|
2174
|
-
var propsDoc$
|
|
2174
|
+
var propsDoc$1k = {
|
|
2175
2175
|
maxSelectedColumns: 'number',
|
|
2176
2176
|
unselectedColumns: 'ColumnProps[]',
|
|
2177
2177
|
selectedColumns: 'ColumnProps[]',
|
|
2178
2178
|
onApplyChanges: '(selectedColumns: ColumnProps[]) => void',
|
|
2179
2179
|
};
|
|
2180
|
-
var propTypes$
|
|
2180
|
+
var propTypes$1o = __assign(__assign({}, spsGlobalPropTypes), { maxSelectedColumns: PropTypes.number, unselectedColumns: PropTypes.array, selectedColumns: PropTypes.array, onApplyChanges: fun() });
|
|
2181
2181
|
function SpsColumnChooser(props) {
|
|
2182
2182
|
var unselectedColumns = props.unselectedColumns, selectedColumns = props.selectedColumns, maxSelectedColumns = props.maxSelectedColumns, onApplyChanges = props.onApplyChanges, className = props.className; props.unsafelyReplaceClassName; var rest = __rest(props, ["unselectedColumns", "selectedColumns", "maxSelectedColumns", "onApplyChanges", "className", "unsafelyReplaceClassName"]);
|
|
2183
2183
|
var _a = __read(usePatchReducer({
|
|
@@ -2265,8 +2265,8 @@ function SpsColumnChooser(props) {
|
|
|
2265
2265
|
provided.placeholder)); }))))));
|
|
2266
2266
|
}
|
|
2267
2267
|
Object.assign(SpsColumnChooser, {
|
|
2268
|
-
props: propsDoc$
|
|
2269
|
-
propTypes: propTypes$
|
|
2268
|
+
props: propsDoc$1k,
|
|
2269
|
+
propTypes: propTypes$1o,
|
|
2270
2270
|
displayName: 'SpsColumnChooser',
|
|
2271
2271
|
});
|
|
2272
2272
|
|
|
@@ -2276,45 +2276,45 @@ var SpsColumnChooserExamples = {
|
|
|
2276
2276
|
description: 'Column chooser component',
|
|
2277
2277
|
examples: {
|
|
2278
2278
|
basic: {
|
|
2279
|
-
react: utils.code(templateObject_1$
|
|
2279
|
+
react: utils.code(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n function DemoComponent() {\n const unselectedCols = [\n { name: \"Red Fish\", value: \"Red\" },\n { name: \"Blue Fish\", value: \"Blue\" }\n ];\n const selectedCols = [\n { name: \"One Fish\", value: \"One\" },\n { name: \"Two Fish\", value: \"Two\" }\n ]\n return (\n <SpsColumnChooser\n unselectedColumns={unselectedCols}\n selectedColumns={selectedCols}\n onApplyChanges={(selectedColumns) => {console.log(selectedColumns)}}\n />\n );\n }\n "], ["\n function DemoComponent() {\n const unselectedCols = [\n { name: \"Red Fish\", value: \"Red\" },\n { name: \"Blue Fish\", value: \"Blue\" }\n ];\n const selectedCols = [\n { name: \"One Fish\", value: \"One\" },\n { name: \"Two Fish\", value: \"Two\" }\n ]\n return (\n <SpsColumnChooser\n unselectedColumns={unselectedCols}\n selectedColumns={selectedCols}\n onApplyChanges={(selectedColumns) => {console.log(selectedColumns)}}\n />\n );\n }\n "]))),
|
|
2280
2280
|
},
|
|
2281
2281
|
},
|
|
2282
2282
|
},
|
|
2283
2283
|
};
|
|
2284
|
-
var templateObject_1$
|
|
2284
|
+
var templateObject_1$N;
|
|
2285
2285
|
|
|
2286
|
-
var propsDoc$
|
|
2286
|
+
var propsDoc$1j = {
|
|
2287
2287
|
icon: { type: 'SpsIcon', required: true },
|
|
2288
2288
|
size: 'SpsIconSize',
|
|
2289
2289
|
};
|
|
2290
|
-
var propTypes$
|
|
2290
|
+
var propTypes$1n = __assign(__assign({}, spsGlobalPropTypes), { icon: enumValue(dsShared.SpsIcon).isRequired, size: enumValue(dsShared.SpsIconSize) });
|
|
2291
2291
|
function SpsIcon(props) {
|
|
2292
2292
|
var className = props.className, testId = props["data-testid"], icon = props.icon, _a = props.size, size = _a === void 0 ? dsShared.SpsIconSize.MEDIUM : _a, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["className", 'data-testid', "icon", "size", "unsafelyReplaceClassName"]);
|
|
2293
2293
|
var classes = clsx__default['default'](unsafelyReplaceClassName || 'sps-icon', "sps-icon-" + icon, "sps-icon--" + size, className);
|
|
2294
2294
|
return React__namespace.createElement("i", __assign({ className: classes, "aria-hidden": "true", "data-testid": testId }, rest));
|
|
2295
2295
|
}
|
|
2296
2296
|
Object.assign(SpsIcon, {
|
|
2297
|
-
props: propsDoc$
|
|
2298
|
-
propTypes: propTypes$
|
|
2297
|
+
props: propsDoc$1j,
|
|
2298
|
+
propTypes: propTypes$1n,
|
|
2299
2299
|
displayName: 'SpsI',
|
|
2300
2300
|
});
|
|
2301
2301
|
function SpsI(props) {
|
|
2302
2302
|
return React__namespace.createElement(SpsIcon, __assign({}, props));
|
|
2303
2303
|
}
|
|
2304
2304
|
Object.assign(SpsI, {
|
|
2305
|
-
props: propsDoc$
|
|
2306
|
-
propTypes: propTypes$
|
|
2305
|
+
props: propsDoc$1j,
|
|
2306
|
+
propTypes: propTypes$1n,
|
|
2307
2307
|
displayName: 'SpsI',
|
|
2308
2308
|
});
|
|
2309
2309
|
|
|
2310
|
-
var propsDoc$
|
|
2310
|
+
var propsDoc$1i = {
|
|
2311
2311
|
borderless: 'boolean',
|
|
2312
2312
|
lean: 'boolean',
|
|
2313
2313
|
leaner: { type: 'boolean', deprecated: true },
|
|
2314
2314
|
widthPx: 'number',
|
|
2315
2315
|
widthRem: 'number',
|
|
2316
2316
|
};
|
|
2317
|
-
var propTypes$
|
|
2317
|
+
var propTypes$1m = __assign(__assign({}, spsGlobalPropTypes), { borderless: PropTypes.bool, lean: PropTypes.bool, leaner: PropTypes.bool, widthPx: PropTypes.number, widthRem: PropTypes.number });
|
|
2318
2318
|
function SpsContentRowCol(props) {
|
|
2319
2319
|
var borderless = props.borderless, children = props.children; props.className; var lean = props.lean, leaner = props.leaner, style = props.style, unsafelyReplaceClassName = props.unsafelyReplaceClassName, widthPx = props.widthPx, widthRem = props.widthRem, rest = __rest(props, ["borderless", "children", "className", "lean", "leaner", "style", "unsafelyReplaceClassName", "widthPx", "widthRem"]);
|
|
2320
2320
|
React__namespace.useEffect(function () {
|
|
@@ -2334,25 +2334,25 @@ function SpsContentRowCol(props) {
|
|
|
2334
2334
|
return (React__namespace.createElement("div", __assign({}, rest, { className: classes, style: inlineStyles }), children));
|
|
2335
2335
|
}
|
|
2336
2336
|
Object.assign(SpsContentRowCol, {
|
|
2337
|
-
props: propsDoc$
|
|
2338
|
-
propTypes: propTypes$
|
|
2337
|
+
props: propsDoc$1i,
|
|
2338
|
+
propTypes: propTypes$1m,
|
|
2339
2339
|
displayName: 'SpsContentRowCol',
|
|
2340
2340
|
});
|
|
2341
2341
|
|
|
2342
|
-
var propsDoc$
|
|
2343
|
-
var propTypes$
|
|
2342
|
+
var propsDoc$1h = {};
|
|
2343
|
+
var propTypes$1l = __assign({}, spsGlobalPropTypes);
|
|
2344
2344
|
function SpsContentRowExpansion(props) {
|
|
2345
2345
|
var children = props.children, className = props.className, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", 'data-testid', "unsafelyReplaceClassName"]);
|
|
2346
2346
|
var classes = clsx__default['default'](unsafelyReplaceClassName || 'sps-content-row__expansion', className);
|
|
2347
2347
|
return (React__namespace.createElement("div", __assign({ className: classes }, rest, { "data-testid": testId + "__expansion" }), children));
|
|
2348
2348
|
}
|
|
2349
2349
|
Object.assign(SpsContentRowExpansion, {
|
|
2350
|
-
props: propsDoc$
|
|
2351
|
-
propTypes: propTypes$
|
|
2350
|
+
props: propsDoc$1h,
|
|
2351
|
+
propTypes: propTypes$1l,
|
|
2352
2352
|
displayName: 'SpsContentRowExpansion',
|
|
2353
2353
|
});
|
|
2354
2354
|
|
|
2355
|
-
var propsDoc$
|
|
2355
|
+
var propsDoc$1g = {
|
|
2356
2356
|
alternateLayout: 'boolean',
|
|
2357
2357
|
initiallyExpanded: 'boolean',
|
|
2358
2358
|
cardSpacing: 'boolean',
|
|
@@ -2364,7 +2364,7 @@ var propsDoc$1f = {
|
|
|
2364
2364
|
selectable: 'boolean',
|
|
2365
2365
|
selected: 'boolean',
|
|
2366
2366
|
};
|
|
2367
|
-
var propTypes$
|
|
2367
|
+
var propTypes$1k = __assign(__assign({}, spsGlobalPropTypes), { alternateLayout: PropTypes.bool, cardSpacing: PropTypes.bool, initiallyExpanded: PropTypes.bool, onBeforeCollapsed: fun(), onBeforeExpanded: fun(), onSelectionChange: fun(), onCollapsed: fun(), onExpanded: fun(), selectable: PropTypes.bool, selected: PropTypes.bool });
|
|
2368
2368
|
function SpsContentRow(props) {
|
|
2369
2369
|
var _a = props.alternateLayout, alternateLayout = _a === void 0 ? false : _a, children = props.children, className = props.className, onBeforeCollapsed = props.onBeforeCollapsed, onBeforeExpanded = props.onBeforeExpanded, onSelectionChange = props.onSelectionChange, onCollapsed = props.onCollapsed, onExpanded = props.onExpanded, _b = props.initiallyExpanded, initiallyExpanded = _b === void 0 ? false : _b, _c = props.cardSpacing, cardSpacing = _c === void 0 ? false : _c, _d = props.selectable, selectable = _d === void 0 ? false : _d, selected = props.selected, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["alternateLayout", "children", "className", "onBeforeCollapsed", "onBeforeExpanded", "onSelectionChange", "onCollapsed", "onExpanded", "initiallyExpanded", "cardSpacing", "selectable", "selected", "unsafelyReplaceClassName"]);
|
|
2370
2370
|
var t = React__namespace.useContext(I18nContext).t;
|
|
@@ -2407,8 +2407,8 @@ function SpsContentRow(props) {
|
|
|
2407
2407
|
expansion));
|
|
2408
2408
|
}
|
|
2409
2409
|
Object.assign(SpsContentRow, {
|
|
2410
|
-
props: propsDoc$
|
|
2411
|
-
propTypes: propTypes$
|
|
2410
|
+
props: propsDoc$1g,
|
|
2411
|
+
propTypes: propTypes$1k,
|
|
2412
2412
|
displayName: 'SpsContentRow',
|
|
2413
2413
|
});
|
|
2414
2414
|
|
|
@@ -2417,13 +2417,13 @@ var SpsContentRowExamples = {
|
|
|
2417
2417
|
label: 'Content rows',
|
|
2418
2418
|
examples: {
|
|
2419
2419
|
basic: {
|
|
2420
|
-
react: utils.code(templateObject_1$
|
|
2420
|
+
react: utils.code(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n function DemoComponent() {\n return (\n <SpsContentRow>\n <SpsContentRowCol>\n <SpsI icon={SpsIcon.STATUS_IN_PROCESS} size={SpsIconSize.LARGE} className=\"mr-2\" />\n <a href=\"#\" className=\"fs-14\">3532379</a>\n </SpsContentRowCol>\n <SpsContentRowCol widthPx={150}>\n May 23, 2018 @ 4:38 PM\n </SpsContentRowCol>\n </SpsContentRow>\n )\n }\n "], ["\n function DemoComponent() {\n return (\n <SpsContentRow>\n <SpsContentRowCol>\n <SpsI icon={SpsIcon.STATUS_IN_PROCESS} size={SpsIconSize.LARGE} className=\"mr-2\" />\n <a href=\"#\" className=\"fs-14\">3532379</a>\n </SpsContentRowCol>\n <SpsContentRowCol widthPx={150}>\n May 23, 2018 @ 4:38 PM\n </SpsContentRowCol>\n </SpsContentRow>\n )\n }\n "]))),
|
|
2421
2421
|
},
|
|
2422
2422
|
withCheckbox: {
|
|
2423
|
-
react: utils.code(templateObject_2$
|
|
2423
|
+
react: utils.code(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n function DemoComponent() {\n\n const { formValue, formMeta, updateForm } = useSpsForm({\n selected: false\n });\n\n function selectRow() {\n updateForm({ selected: !formValue.selected })\n }\n\n return (\n <>\n <SpsContentRow\n selectable\n selected={formValue.selected}\n onSelect={selectRow}\n >\n <SpsContentRowCol>\n <SpsI icon={SpsIcon.STATUS_IN_PROCESS} size={SpsIconSize.LARGE} className=\"mr-2\" />\n <a href=\"#\" className=\"fs-14\">3532379</a>\n </SpsContentRowCol>\n <SpsContentRowCol widthPx={150}>\n May 23, 2018 @ 4:38 PM\n </SpsContentRowCol>\n </SpsContentRow>\n </>\n )\n }\n "], ["\n function DemoComponent() {\n\n const { formValue, formMeta, updateForm } = useSpsForm({\n selected: false\n });\n\n function selectRow() {\n updateForm({ selected: !formValue.selected })\n }\n\n return (\n <>\n <SpsContentRow\n selectable\n selected={formValue.selected}\n onSelect={selectRow}\n >\n <SpsContentRowCol>\n <SpsI icon={SpsIcon.STATUS_IN_PROCESS} size={SpsIconSize.LARGE} className=\"mr-2\" />\n <a href=\"#\" className=\"fs-14\">3532379</a>\n </SpsContentRowCol>\n <SpsContentRowCol widthPx={150}>\n May 23, 2018 @ 4:38 PM\n </SpsContentRowCol>\n </SpsContentRow>\n </>\n )\n }\n "]))),
|
|
2424
2424
|
},
|
|
2425
2425
|
withCheckboxAndFavorite: {
|
|
2426
|
-
react: utils.code(templateObject_3$
|
|
2426
|
+
react: utils.code(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n function DemoComponent() {\n\n const { formValue, formMeta, updateForm } = useSpsForm({ selected: false });\n\n function selectRow() {\n updateForm({ selected: !formValue.selected })\n }\n\n return (\n <>\n <SpsContentRow\n selectable\n selected={formValue.selected}\n onSelect={selectRow}\n >\n <SpsContentRowCol style={{ width: \"2.9rem\" }}>\n <SpsI\n className=\"blue200\"\n icon={SpsIcon.STAR}\n />\n </SpsContentRowCol>\n <SpsContentRowCol>\n <SpsI icon={SpsIcon.STATUS_IN_PROCESS} size={SpsIconSize.LARGE} className=\"mr-2\" />\n <a href=\"#\" className=\"fs-14\">3532379</a>\n </SpsContentRowCol>\n <SpsContentRowCol widthPx={150}>\n May 23, 2018 @ 4:38 PM\n </SpsContentRowCol>\n </SpsContentRow>\n </>\n )\n }\n "], ["\n function DemoComponent() {\n\n const { formValue, formMeta, updateForm } = useSpsForm({ selected: false });\n\n function selectRow() {\n updateForm({ selected: !formValue.selected })\n }\n\n return (\n <>\n <SpsContentRow\n selectable\n selected={formValue.selected}\n onSelect={selectRow}\n >\n <SpsContentRowCol style={{ width: \"2.9rem\" }}>\n <SpsI\n className=\"blue200\"\n icon={SpsIcon.STAR}\n />\n </SpsContentRowCol>\n <SpsContentRowCol>\n <SpsI icon={SpsIcon.STATUS_IN_PROCESS} size={SpsIconSize.LARGE} className=\"mr-2\" />\n <a href=\"#\" className=\"fs-14\">3532379</a>\n </SpsContentRowCol>\n <SpsContentRowCol widthPx={150}>\n May 23, 2018 @ 4:38 PM\n </SpsContentRowCol>\n </SpsContentRow>\n </>\n )\n }\n "]))),
|
|
2427
2427
|
},
|
|
2428
2428
|
},
|
|
2429
2429
|
},
|
|
@@ -2431,13 +2431,13 @@ var SpsContentRowExamples = {
|
|
|
2431
2431
|
label: 'Expandable content rows',
|
|
2432
2432
|
examples: {
|
|
2433
2433
|
basic: {
|
|
2434
|
-
react: utils.code(templateObject_4$
|
|
2434
|
+
react: utils.code(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n function DemoComponent() {\n return (\n <>\n <SpsContentRow>\n <SpsContentRowCol>\n <SpsI icon={SpsIcon.STATUS_IN_PROCESS} size={SpsIconSize.LARGE} className=\"mr-2\" />\n <a href=\"#\" className=\"fs-14\">3532379</a>\n </SpsContentRowCol>\n <SpsContentRowCol widthPx={150}>\n May 23, 2018 @ 4:38 PM\n </SpsContentRowCol>\n <SpsContentRowExpansion>\n <SpsCard>\n <br />\n <br />\n <br />\n <br />\n Additional content\n <br />\n <br />\n <br />\n <br />\n </SpsCard>\n </SpsContentRowExpansion>\n </SpsContentRow>\n </>\n )\n }\n "], ["\n function DemoComponent() {\n return (\n <>\n <SpsContentRow>\n <SpsContentRowCol>\n <SpsI icon={SpsIcon.STATUS_IN_PROCESS} size={SpsIconSize.LARGE} className=\"mr-2\" />\n <a href=\"#\" className=\"fs-14\">3532379</a>\n </SpsContentRowCol>\n <SpsContentRowCol widthPx={150}>\n May 23, 2018 @ 4:38 PM\n </SpsContentRowCol>\n <SpsContentRowExpansion>\n <SpsCard>\n <br />\n <br />\n <br />\n <br />\n Additional content\n <br />\n <br />\n <br />\n <br />\n </SpsCard>\n </SpsContentRowExpansion>\n </SpsContentRow>\n </>\n )\n }\n "]))),
|
|
2435
2435
|
},
|
|
2436
2436
|
expandableWithCheckbox: {
|
|
2437
|
-
react: utils.code(templateObject_5$
|
|
2437
|
+
react: utils.code(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n function DemoComponent() {\n\n const { formValue, formMeta, updateForm } = useSpsForm({ selected: false });\n\n function selectRow() {\n updateForm({ selected: !formValue.selected })\n }\n\n return (\n <>\n <SpsContentRow\n selectable\n selected={formValue.selected}\n onSelect={selectRow}\n >\n <SpsContentRowCol>\n <SpsI icon={SpsIcon.STATUS_IN_PROCESS} size={SpsIconSize.LARGE} className=\"mr-2\" />\n <a href=\"#\" className=\"fs-14\">3532379</a>\n </SpsContentRowCol>\n <SpsContentRowCol widthPx={150}>\n May 23, 2018 @ 4:38 PM\n </SpsContentRowCol>\n <SpsContentRowExpansion>\n <SpsCard>\n <br />\n <br />\n <br />\n <br />\n Additional content\n <br />\n <br />\n <br />\n <br />\n </SpsCard>\n </SpsContentRowExpansion>\n </SpsContentRow>\n </>\n )\n }\n "], ["\n function DemoComponent() {\n\n const { formValue, formMeta, updateForm } = useSpsForm({ selected: false });\n\n function selectRow() {\n updateForm({ selected: !formValue.selected })\n }\n\n return (\n <>\n <SpsContentRow\n selectable\n selected={formValue.selected}\n onSelect={selectRow}\n >\n <SpsContentRowCol>\n <SpsI icon={SpsIcon.STATUS_IN_PROCESS} size={SpsIconSize.LARGE} className=\"mr-2\" />\n <a href=\"#\" className=\"fs-14\">3532379</a>\n </SpsContentRowCol>\n <SpsContentRowCol widthPx={150}>\n May 23, 2018 @ 4:38 PM\n </SpsContentRowCol>\n <SpsContentRowExpansion>\n <SpsCard>\n <br />\n <br />\n <br />\n <br />\n Additional content\n <br />\n <br />\n <br />\n <br />\n </SpsCard>\n </SpsContentRowExpansion>\n </SpsContentRow>\n </>\n )\n }\n "]))),
|
|
2438
2438
|
},
|
|
2439
2439
|
expandableWithCheckboxAlternate: {
|
|
2440
|
-
react: utils.code(templateObject_6$
|
|
2440
|
+
react: utils.code(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n function DemoComponent() {\n\n const { formValue, formMeta, updateForm } = useSpsForm({ selected: false });\n\n function selectRow() {\n updateForm({ selected: !formValue.selected })\n }\n\n return (\n <>\n <SpsContentRow\n selectable\n selected={formValue.selected}\n onSelect={selectRow}\n alternateLayout\n >\n <SpsContentRowCol>\n <SpsI icon={SpsIcon.STATUS_IN_PROCESS} size={SpsIconSize.LARGE} className=\"mr-2\" />\n <a href=\"#\" className=\"fs-14\">3532379</a>\n </SpsContentRowCol>\n <SpsContentRowCol>\n <SpsKeyValueList inline>\n <SpsKeyValueListItem itemKey=\"partner\">\n Bass Pro\n </SpsKeyValueListItem>\n <SpsKeyValueListItem itemKey=\"status\">\n Open\n </SpsKeyValueListItem>\n <SpsKeyValueListItem itemKey=\"source id\">\n 12345\n </SpsKeyValueListItem>\n </SpsKeyValueList>\n </SpsContentRowCol>\n <SpsContentRowCol>\n <SpsKeyValueList inline>\n <SpsKeyValueListItem itemKey=\"document tag\">\n 1234\n </SpsKeyValueListItem>\n </SpsKeyValueList>\n </SpsContentRowCol>\n <SpsContentRowCol widthPx={150}>\n May 23, 2018 @ 4:38 PM\n </SpsContentRowCol>\n <SpsContentRowExpansion>\n <SpsCard>\n <br />\n <br />\n <br />\n <br />\n Additional content\n <br />\n <br />\n <br />\n <br />\n </SpsCard>\n </SpsContentRowExpansion>\n </SpsContentRow>\n </>\n )\n }\n "], ["\n function DemoComponent() {\n\n const { formValue, formMeta, updateForm } = useSpsForm({ selected: false });\n\n function selectRow() {\n updateForm({ selected: !formValue.selected })\n }\n\n return (\n <>\n <SpsContentRow\n selectable\n selected={formValue.selected}\n onSelect={selectRow}\n alternateLayout\n >\n <SpsContentRowCol>\n <SpsI icon={SpsIcon.STATUS_IN_PROCESS} size={SpsIconSize.LARGE} className=\"mr-2\" />\n <a href=\"#\" className=\"fs-14\">3532379</a>\n </SpsContentRowCol>\n <SpsContentRowCol>\n <SpsKeyValueList inline>\n <SpsKeyValueListItem itemKey=\"partner\">\n Bass Pro\n </SpsKeyValueListItem>\n <SpsKeyValueListItem itemKey=\"status\">\n Open\n </SpsKeyValueListItem>\n <SpsKeyValueListItem itemKey=\"source id\">\n 12345\n </SpsKeyValueListItem>\n </SpsKeyValueList>\n </SpsContentRowCol>\n <SpsContentRowCol>\n <SpsKeyValueList inline>\n <SpsKeyValueListItem itemKey=\"document tag\">\n 1234\n </SpsKeyValueListItem>\n </SpsKeyValueList>\n </SpsContentRowCol>\n <SpsContentRowCol widthPx={150}>\n May 23, 2018 @ 4:38 PM\n </SpsContentRowCol>\n <SpsContentRowExpansion>\n <SpsCard>\n <br />\n <br />\n <br />\n <br />\n Additional content\n <br />\n <br />\n <br />\n <br />\n </SpsCard>\n </SpsContentRowExpansion>\n </SpsContentRow>\n </>\n )\n }\n "]))),
|
|
2441
2441
|
},
|
|
2442
2442
|
expandableWithCheckboxAndFavorite: {
|
|
2443
2443
|
react: utils.code(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n function DemoComponent() {\n\n const { formValue, formMeta, updateForm } = useSpsForm({ selected: false });\n\n function selectRow() {\n updateForm({ selected: !formValue.selected })\n }\n\n return (\n <>\n <SpsContentRow\n selectable\n selected={formValue.selected}\n onSelect={selectRow}\n >\n <SpsContentRowCol style={{ width: \"2.9rem\" }}>\n <SpsI\n className=\"blue200\"\n icon={SpsIcon.STAR}\n />\n </SpsContentRowCol>\n <SpsContentRowCol>\n <SpsI icon={SpsIcon.STATUS_IN_PROCESS} size={SpsIconSize.LARGE} className=\"mr-2\" />\n <a href=\"#\" className=\"fs-14\">3532379</a>\n </SpsContentRowCol>\n <SpsContentRowCol widthPx={150}>\n May 23, 2018 @ 4:38 PM\n </SpsContentRowCol>\n <SpsContentRowExpansion>\n <SpsCard>\n <br />\n <br />\n <br />\n <br />\n Additional content\n <br />\n <br />\n <br />\n <br />\n </SpsCard>\n </SpsContentRowExpansion>\n </SpsContentRow>\n </>\n )\n }\n "], ["\n function DemoComponent() {\n\n const { formValue, formMeta, updateForm } = useSpsForm({ selected: false });\n\n function selectRow() {\n updateForm({ selected: !formValue.selected })\n }\n\n return (\n <>\n <SpsContentRow\n selectable\n selected={formValue.selected}\n onSelect={selectRow}\n >\n <SpsContentRowCol style={{ width: \"2.9rem\" }}>\n <SpsI\n className=\"blue200\"\n icon={SpsIcon.STAR}\n />\n </SpsContentRowCol>\n <SpsContentRowCol>\n <SpsI icon={SpsIcon.STATUS_IN_PROCESS} size={SpsIconSize.LARGE} className=\"mr-2\" />\n <a href=\"#\" className=\"fs-14\">3532379</a>\n </SpsContentRowCol>\n <SpsContentRowCol widthPx={150}>\n May 23, 2018 @ 4:38 PM\n </SpsContentRowCol>\n <SpsContentRowExpansion>\n <SpsCard>\n <br />\n <br />\n <br />\n <br />\n Additional content\n <br />\n <br />\n <br />\n <br />\n </SpsCard>\n </SpsContentRowExpansion>\n </SpsContentRow>\n </>\n )\n }\n "]))),
|
|
@@ -2456,7 +2456,7 @@ var SpsContentRowExamples = {
|
|
|
2456
2456
|
},
|
|
2457
2457
|
},
|
|
2458
2458
|
};
|
|
2459
|
-
var templateObject_1$
|
|
2459
|
+
var templateObject_1$M, templateObject_2$I, templateObject_3$A, templateObject_4$r, templateObject_5$j, templateObject_6$f, templateObject_7$c, templateObject_8$b, templateObject_9$8;
|
|
2460
2460
|
|
|
2461
2461
|
var moment$5 = moment__namespace.default || moment__namespace;
|
|
2462
2462
|
function newWeekArray$1() {
|
|
@@ -2488,7 +2488,7 @@ function parse(value) {
|
|
|
2488
2488
|
function weekOfMonth$1(date) {
|
|
2489
2489
|
return Math.floor((date.clone().date(1).day() + date.date() - 1) / 7);
|
|
2490
2490
|
}
|
|
2491
|
-
var propsDoc$
|
|
2491
|
+
var propsDoc$1f = {
|
|
2492
2492
|
disabled: 'boolean',
|
|
2493
2493
|
format: 'string',
|
|
2494
2494
|
maxDate: 'string',
|
|
@@ -2498,7 +2498,7 @@ var propsDoc$1e = {
|
|
|
2498
2498
|
placeholder: 'string',
|
|
2499
2499
|
value: 'string',
|
|
2500
2500
|
};
|
|
2501
|
-
var propTypes$
|
|
2501
|
+
var propTypes$1j = __assign(__assign({}, spsGlobalPropTypes), { disabled: PropTypes.bool, format: PropTypes.string, maxDate: PropTypes.string, minDate: PropTypes.string, onChange: fun(), onClickOutside: fun(), placeholder: PropTypes.string, value: PropTypes.string });
|
|
2502
2502
|
function SpsDatepicker(props) {
|
|
2503
2503
|
var className = props.className, disabled = props.disabled, _a = props.format, format = _a === void 0 ? moment$5.localeData().longDateFormat('MM/DD/YYYY') || 'MM/DD/YYYY' : _a, maxDate = props.maxDate, minDate = props.minDate, onChange = props.onChange, onClickOutside = props.onClickOutside, _b = props.placeholder, placeholder = _b === void 0 ? 'MM/DD/YYYY' : _b, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, value = props.value, id = props.id, rest = __rest(props, ["className", "disabled", "format", "maxDate", "minDate", "onChange", "onClickOutside", "placeholder", 'data-testid', "unsafelyReplaceClassName", "value", "id"]);
|
|
2504
2504
|
var calendarRef = React__namespace.useRef();
|
|
@@ -2833,8 +2833,8 @@ function SpsDatepicker(props) {
|
|
|
2833
2833
|
!disabled && (inputRef && inputRef.current && inputRef.current.value) && (React__namespace.createElement("i", { className: "sps-icon sps-icon-x-circle sps-form-control__clear-btn", onClick: handleClearClick }))))));
|
|
2834
2834
|
}
|
|
2835
2835
|
Object.assign(SpsDatepicker, {
|
|
2836
|
-
props: propsDoc$
|
|
2837
|
-
propTypes: propTypes$
|
|
2836
|
+
props: propsDoc$1f,
|
|
2837
|
+
propTypes: propTypes$1j,
|
|
2838
2838
|
displayName: 'SpsDatepicker',
|
|
2839
2839
|
});
|
|
2840
2840
|
|
|
@@ -2843,7 +2843,7 @@ var SpsDatepickerExamples = {
|
|
|
2843
2843
|
label: 'Basic',
|
|
2844
2844
|
examples: {
|
|
2845
2845
|
basic: {
|
|
2846
|
-
react: utils.code(templateObject_1$
|
|
2846
|
+
react: utils.code(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n function Component() {\n const { formValue, formMeta, updateForm } = useSpsForm({\n date: { year: 2018, month: 10, date: 31 },\n }, {\n \"date\": [SpsValidators.date]\n });\n\n return (\n <div className=\"sfg-row\">\n <div className=\"sfg-col-3\">\n <SpsLabel for={formMeta.fields.date}>Date</SpsLabel>\n <SpsDatepickerV2\n value={formValue.date}\n formMeta={formMeta.fields.date}\n />\n </div>\n </div>\n );\n }\n "], ["\n function Component() {\n const { formValue, formMeta, updateForm } = useSpsForm({\n date: { year: 2018, month: 10, date: 31 },\n }, {\n \"date\": [SpsValidators.date]\n });\n\n return (\n <div className=\"sfg-row\">\n <div className=\"sfg-col-3\">\n <SpsLabel for={formMeta.fields.date}>Date</SpsLabel>\n <SpsDatepickerV2\n value={formValue.date}\n formMeta={formMeta.fields.date}\n />\n </div>\n </div>\n );\n }\n "]))),
|
|
2847
2847
|
},
|
|
2848
2848
|
},
|
|
2849
2849
|
},
|
|
@@ -2851,7 +2851,7 @@ var SpsDatepickerExamples = {
|
|
|
2851
2851
|
label: 'Constraints',
|
|
2852
2852
|
examples: {
|
|
2853
2853
|
basic: {
|
|
2854
|
-
react: utils.code(templateObject_2$
|
|
2854
|
+
react: utils.code(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n function Component() {\n const constraints = React.useRef({\n minDate: { year: 2021, month: 04, date: 05 },\n maxDate: { year: 2021, month: 04, date: 15 }\n })\n const { formValue, formMeta, updateForm } = useSpsForm({\n date: null,\n }, {\n \"date\": [SpsValidators.date, SpsValidators.dateConstraint(constraints.current)]\n });\n\n return (\n <div className=\"sfg-row\">\n <div className=\"sfg-col-3\">\n <SpsLabel for={formMeta.fields.date}>Date</SpsLabel>\n <SpsDatepickerV2\n value={formValue.date}\n formMeta={formMeta.fields.date}\n {...constraints.current}\n />\n </div>\n </div>\n );\n }\n "], ["\n function Component() {\n const constraints = React.useRef({\n minDate: { year: 2021, month: 04, date: 05 },\n maxDate: { year: 2021, month: 04, date: 15 }\n })\n const { formValue, formMeta, updateForm } = useSpsForm({\n date: null,\n }, {\n \"date\": [SpsValidators.date, SpsValidators.dateConstraint(constraints.current)]\n });\n\n return (\n <div className=\"sfg-row\">\n <div className=\"sfg-col-3\">\n <SpsLabel for={formMeta.fields.date}>Date</SpsLabel>\n <SpsDatepickerV2\n value={formValue.date}\n formMeta={formMeta.fields.date}\n {...constraints.current}\n />\n </div>\n </div>\n );\n }\n "]))),
|
|
2855
2855
|
},
|
|
2856
2856
|
},
|
|
2857
2857
|
},
|
|
@@ -2859,14 +2859,14 @@ var SpsDatepickerExamples = {
|
|
|
2859
2859
|
label: 'Disabled',
|
|
2860
2860
|
examples: {
|
|
2861
2861
|
disabled: {
|
|
2862
|
-
react: utils.code(templateObject_3$
|
|
2862
|
+
react: utils.code(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n function Component() {\n const { formValue, formMeta, updateForm } = useSpsForm({\n date: { year: 2018, month: 10, date: 31 },\n }, {\n \"date\": [SpsValidators.date]\n });\n\n return (\n <div className=\"sfg-row\">\n <div className=\"sfg-col-3\">\n <SpsLabel for={formMeta.fields.date}>Date</SpsLabel>\n <SpsDatepickerV2\n value={formValue.date}\n formMeta={formMeta.fields.date}\n disabled\n />\n </div>\n </div>\n );\n }\n "], ["\n function Component() {\n const { formValue, formMeta, updateForm } = useSpsForm({\n date: { year: 2018, month: 10, date: 31 },\n }, {\n \"date\": [SpsValidators.date]\n });\n\n return (\n <div className=\"sfg-row\">\n <div className=\"sfg-col-3\">\n <SpsLabel for={formMeta.fields.date}>Date</SpsLabel>\n <SpsDatepickerV2\n value={formValue.date}\n formMeta={formMeta.fields.date}\n disabled\n />\n </div>\n </div>\n );\n }\n "]))),
|
|
2863
2863
|
},
|
|
2864
2864
|
},
|
|
2865
2865
|
},
|
|
2866
2866
|
};
|
|
2867
|
-
var templateObject_1$
|
|
2867
|
+
var templateObject_1$L, templateObject_2$H, templateObject_3$z;
|
|
2868
2868
|
|
|
2869
|
-
var propsDoc$
|
|
2869
|
+
var propsDoc$1e = {
|
|
2870
2870
|
placeholder: 'string',
|
|
2871
2871
|
disabled: 'boolean',
|
|
2872
2872
|
format: 'string',
|
|
@@ -2877,7 +2877,7 @@ var propsDoc$1d = {
|
|
|
2877
2877
|
value: 'MomentRange',
|
|
2878
2878
|
preset: 'Duration',
|
|
2879
2879
|
};
|
|
2880
|
-
var propTypes$
|
|
2880
|
+
var propTypes$1i = __assign(__assign({}, spsGlobalPropTypes), { placeholder: PropTypes.string, disabled: PropTypes.bool, format: PropTypes.string, minDate: PropTypes.string, maxDate: PropTypes.string, availablePresets: PropTypes.array, onChange: fun(), value: impl(), preset: impl() });
|
|
2881
2881
|
function weekOfMonth(mmt) {
|
|
2882
2882
|
return Math.floor((mmt.clone().date(1).day() + mmt.date() - 1) / 7);
|
|
2883
2883
|
}
|
|
@@ -3451,8 +3451,8 @@ function SpsDateRangePicker(props) {
|
|
|
3451
3451
|
(currentValue && currentValue.start && currentValue.end && !disabled) ? (React__namespace.createElement("i", { className: "sps-icon sps-icon-x-circle sps-form-control__clear-btn", onClick: clear })) : ''))));
|
|
3452
3452
|
}
|
|
3453
3453
|
Object.assign(SpsDateRangePicker, {
|
|
3454
|
-
props: propsDoc$
|
|
3455
|
-
propTypes: propTypes$
|
|
3454
|
+
props: propsDoc$1e,
|
|
3455
|
+
propTypes: propTypes$1i,
|
|
3456
3456
|
displayName: 'SpsDateRangePicker',
|
|
3457
3457
|
});
|
|
3458
3458
|
|
|
@@ -3461,7 +3461,7 @@ var SpsDateRangePickerExamples = {
|
|
|
3461
3461
|
label: 'Basic',
|
|
3462
3462
|
examples: {
|
|
3463
3463
|
basic: {
|
|
3464
|
-
react: utils.code(templateObject_1$
|
|
3464
|
+
react: utils.code(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n function Component() {\n const { formValue, formMeta, updateForm } = useSpsForm({\n dateRange: [\n { year: 2021, month: 4, date: 10 },\n { year: 2021, month: 4, date: 18 }\n ]\n }, {\n \"dateRange\": [SpsValidators.dateRange]\n });\n\n return (\n <div className=\"sfg-row\">\n <div className=\"sfg-col-3\">\n <SpsLabel for={formMeta.fields.dateRange}>Date</SpsLabel>\n <SpsDateRangePickerV2\n value={formValue.dateRange}\n formMeta={formMeta.fields.dateRange}\n />\n </div>\n </div>\n );\n }\n "], ["\n function Component() {\n const { formValue, formMeta, updateForm } = useSpsForm({\n dateRange: [\n { year: 2021, month: 4, date: 10 },\n { year: 2021, month: 4, date: 18 }\n ]\n }, {\n \"dateRange\": [SpsValidators.dateRange]\n });\n\n return (\n <div className=\"sfg-row\">\n <div className=\"sfg-col-3\">\n <SpsLabel for={formMeta.fields.dateRange}>Date</SpsLabel>\n <SpsDateRangePickerV2\n value={formValue.dateRange}\n formMeta={formMeta.fields.dateRange}\n />\n </div>\n </div>\n );\n }\n "]))),
|
|
3465
3465
|
},
|
|
3466
3466
|
},
|
|
3467
3467
|
},
|
|
@@ -3469,7 +3469,7 @@ var SpsDateRangePickerExamples = {
|
|
|
3469
3469
|
label: 'Constraints',
|
|
3470
3470
|
examples: {
|
|
3471
3471
|
basic: {
|
|
3472
|
-
react: utils.code(templateObject_2$
|
|
3472
|
+
react: utils.code(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n function Component() {\n const constraints = React.useRef({\n minDate: { year: 2021, month: 04, date: 05 },\n maxDate: { year: 2021, month: 04, date: 15 }\n })\n const { formValue, formMeta, updateForm } = useSpsForm({\n dateRange: null,\n }, {\n \"dateRange\": [SpsValidators.dateRange, SpsValidators.dateConstraint(constraints.current)]\n });\n\n return (\n <div className=\"sfg-row\">\n <div className=\"sfg-col-3\">\n <SpsLabel for={formMeta.fields.dateRange}>Date</SpsLabel>\n <SpsDateRangePickerV2\n value={formValue.dateRange}\n formMeta={formMeta.fields.dateRange}\n {...constraints.current}\n />\n </div>\n </div>\n );\n }\n "], ["\n function Component() {\n const constraints = React.useRef({\n minDate: { year: 2021, month: 04, date: 05 },\n maxDate: { year: 2021, month: 04, date: 15 }\n })\n const { formValue, formMeta, updateForm } = useSpsForm({\n dateRange: null,\n }, {\n \"dateRange\": [SpsValidators.dateRange, SpsValidators.dateConstraint(constraints.current)]\n });\n\n return (\n <div className=\"sfg-row\">\n <div className=\"sfg-col-3\">\n <SpsLabel for={formMeta.fields.dateRange}>Date</SpsLabel>\n <SpsDateRangePickerV2\n value={formValue.dateRange}\n formMeta={formMeta.fields.dateRange}\n {...constraints.current}\n />\n </div>\n </div>\n );\n }\n "]))),
|
|
3473
3473
|
},
|
|
3474
3474
|
},
|
|
3475
3475
|
},
|
|
@@ -3477,7 +3477,7 @@ var SpsDateRangePickerExamples = {
|
|
|
3477
3477
|
label: 'Disabled',
|
|
3478
3478
|
examples: {
|
|
3479
3479
|
disabled: {
|
|
3480
|
-
react: utils.code(templateObject_3$
|
|
3480
|
+
react: utils.code(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n function Component() {\n const { formValue, formMeta, updateForm } = useSpsForm({\n dateRange: [\n { year: 2021, month: 4, date: 10 },\n { year: 2021, month: 4, date: 18 }\n ]\n }, {\n \"dateRange\": [SpsValidators.dateRange]\n });\n\n return (\n <div className=\"sfg-row\">\n <div className=\"sfg-col-3\">\n <SpsLabel for={formMeta.fields.dateRange}>Date</SpsLabel>\n <SpsDateRangePickerV2\n value={formValue.dateRange}\n formMeta={formMeta.fields.dateRange}\n disabled\n />\n </div>\n </div>\n );\n }\n "], ["\n function Component() {\n const { formValue, formMeta, updateForm } = useSpsForm({\n dateRange: [\n { year: 2021, month: 4, date: 10 },\n { year: 2021, month: 4, date: 18 }\n ]\n }, {\n \"dateRange\": [SpsValidators.dateRange]\n });\n\n return (\n <div className=\"sfg-row\">\n <div className=\"sfg-col-3\">\n <SpsLabel for={formMeta.fields.dateRange}>Date</SpsLabel>\n <SpsDateRangePickerV2\n value={formValue.dateRange}\n formMeta={formMeta.fields.dateRange}\n disabled\n />\n </div>\n </div>\n );\n }\n "]))),
|
|
3481
3481
|
},
|
|
3482
3482
|
},
|
|
3483
3483
|
},
|
|
@@ -3486,12 +3486,12 @@ var SpsDateRangePickerExamples = {
|
|
|
3486
3486
|
description: 'The definition of a preset can be either an ISO 8601 duration string, or a function that returns a SimpleDateRange.',
|
|
3487
3487
|
examples: {
|
|
3488
3488
|
presets: {
|
|
3489
|
-
react: utils.code(templateObject_4$
|
|
3489
|
+
react: utils.code(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n function Component() {\n const presets = React.useRef([\n {\n label: \"Yesterday\",\n definition: () => {\n const yesterday = SimpleDateUtils.createFrom(\n moment().subtract(1, \"day\")\n )\n return [yesterday, yesterday]\n },\n },\n {\n label: \"Last 45 days\",\n definition: \"P45D\",\n },\n ])\n const { formValue, formMeta, updateForm } = useSpsForm(\n {\n dateRange: presets.current[0],\n },\n {\n dateRange: [SpsValidators.dateRange],\n }\n )\n\n return (\n <div className=\"sfg-row\">\n <div className=\"sfg-col-3\">\n <SpsLabel for={formMeta.fields.dateRange}>Date</SpsLabel>\n <SpsDateRangePickerV2\n presets={presets.current}\n value={formValue.dateRange}\n formMeta={formMeta.fields.dateRange}\n />\n </div>\n </div>\n )\n }\n "], ["\n function Component() {\n const presets = React.useRef([\n {\n label: \"Yesterday\",\n definition: () => {\n const yesterday = SimpleDateUtils.createFrom(\n moment().subtract(1, \"day\")\n )\n return [yesterday, yesterday]\n },\n },\n {\n label: \"Last 45 days\",\n definition: \"P45D\",\n },\n ])\n const { formValue, formMeta, updateForm } = useSpsForm(\n {\n dateRange: presets.current[0],\n },\n {\n dateRange: [SpsValidators.dateRange],\n }\n )\n\n return (\n <div className=\"sfg-row\">\n <div className=\"sfg-col-3\">\n <SpsLabel for={formMeta.fields.dateRange}>Date</SpsLabel>\n <SpsDateRangePickerV2\n presets={presets.current}\n value={formValue.dateRange}\n formMeta={formMeta.fields.dateRange}\n />\n </div>\n </div>\n )\n }\n "]))),
|
|
3490
3490
|
},
|
|
3491
3491
|
},
|
|
3492
3492
|
},
|
|
3493
3493
|
};
|
|
3494
|
-
var templateObject_1$
|
|
3494
|
+
var templateObject_1$K, templateObject_2$G, templateObject_3$y, templateObject_4$q;
|
|
3495
3495
|
|
|
3496
3496
|
var currentLocale = moment__default['default'].locale();
|
|
3497
3497
|
require('moment/locale/en-au');
|
|
@@ -3589,7 +3589,7 @@ var formatMaps = {
|
|
|
3589
3589
|
LONG_FULLDATETIME: 'LLLL',
|
|
3590
3590
|
LONG_FULLDATETIME_ZONE: 'LLLL z', // Monday February 29, 2016 3:03 PM CST
|
|
3591
3591
|
};
|
|
3592
|
-
var propsDoc$
|
|
3592
|
+
var propsDoc$1d = {
|
|
3593
3593
|
currentUser: 'any',
|
|
3594
3594
|
dateToFormat: 'string | Date',
|
|
3595
3595
|
format: 'string',
|
|
@@ -3598,7 +3598,7 @@ var propsDoc$1c = {
|
|
|
3598
3598
|
relativeHrs: 'number',
|
|
3599
3599
|
tz: 'string',
|
|
3600
3600
|
};
|
|
3601
|
-
var propTypes$
|
|
3601
|
+
var propTypes$1h = __assign(__assign({}, spsGlobalPropTypes), { currentUser: PropTypes.any, dateToFormat: PropTypes.oneOfType([
|
|
3602
3602
|
PropTypes.string,
|
|
3603
3603
|
PropTypes.instanceOf(Date),
|
|
3604
3604
|
]), format: PropTypes.string, locale: PropTypes.string, relative: PropTypes.bool, relativeHrs: PropTypes.number, tz: PropTypes.string });
|
|
@@ -3655,8 +3655,8 @@ function SpsDateTime(props) {
|
|
|
3655
3655
|
})));
|
|
3656
3656
|
}
|
|
3657
3657
|
Object.assign(SpsDateTime, {
|
|
3658
|
-
props: propsDoc$
|
|
3659
|
-
propTypes: propTypes$
|
|
3658
|
+
props: propsDoc$1d,
|
|
3659
|
+
propTypes: propTypes$1h,
|
|
3660
3660
|
displayName: 'SpsDateTime',
|
|
3661
3661
|
});
|
|
3662
3662
|
|
|
@@ -3666,22 +3666,22 @@ var SpsDatetimeExamples = {
|
|
|
3666
3666
|
description: '<p>Formats dates</p>',
|
|
3667
3667
|
examples: {
|
|
3668
3668
|
basicAttribute: {
|
|
3669
|
-
jsx: utils.code(templateObject_1$
|
|
3669
|
+
jsx: utils.code(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n <SpsDateTime dateToFormat=\"2018-09-11T16:32:52.822000Z\" />\n "], ["\n <SpsDateTime dateToFormat=\"2018-09-11T16:32:52.822000Z\" />\n "]))),
|
|
3670
3670
|
},
|
|
3671
3671
|
basicChild: {
|
|
3672
|
-
jsx: utils.code(templateObject_2$
|
|
3672
|
+
jsx: utils.code(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n <SpsDateTime>2018-09-11T16:32:52.822000Z</SpsDateTime>\n "], ["\n <SpsDateTime>2018-09-11T16:32:52.822000Z</SpsDateTime>\n "]))),
|
|
3673
3673
|
},
|
|
3674
3674
|
},
|
|
3675
3675
|
},
|
|
3676
3676
|
};
|
|
3677
|
-
var templateObject_1$
|
|
3677
|
+
var templateObject_1$J, templateObject_2$F;
|
|
3678
3678
|
|
|
3679
|
-
var propsDoc$
|
|
3679
|
+
var propsDoc$1c = {
|
|
3680
3680
|
compact: 'boolean',
|
|
3681
3681
|
wideTerms: 'boolean',
|
|
3682
3682
|
widerTerms: 'boolean',
|
|
3683
3683
|
};
|
|
3684
|
-
var propTypes$
|
|
3684
|
+
var propTypes$1g = __assign(__assign({}, spsGlobalPropTypes), { compact: PropTypes.bool, wideTerms: PropTypes.bool, widerTerms: PropTypes.bool });
|
|
3685
3685
|
function SpsDescriptionList(props) {
|
|
3686
3686
|
var children = props.children, className = props.className, _a = props.compact, compact = _a === void 0 ? false : _a, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, _b = props.wideTerms, wideTerms = _b === void 0 ? false : _b, _c = props.widerTerms, widerTerms = _c === void 0 ? false : _c, rest = __rest(props, ["children", "className", "compact", 'data-testid', "unsafelyReplaceClassName", "wideTerms", "widerTerms"]);
|
|
3687
3687
|
/** holy shit this is awful. TODO: fix this garbage */
|
|
@@ -3703,37 +3703,37 @@ function SpsDescriptionList(props) {
|
|
|
3703
3703
|
return (React__namespace.createElement("dl", __assign({ className: classes, "data-testid": "" + testId }, rest), childrenWithProps));
|
|
3704
3704
|
}
|
|
3705
3705
|
Object.assign(SpsDescriptionList, {
|
|
3706
|
-
props: propsDoc$
|
|
3707
|
-
propTypes: propTypes$
|
|
3706
|
+
props: propsDoc$1c,
|
|
3707
|
+
propTypes: propTypes$1g,
|
|
3708
3708
|
displayName: 'SpsDescriptionList / SpsDl',
|
|
3709
3709
|
});
|
|
3710
3710
|
function SpsDl(p) {
|
|
3711
3711
|
return SpsDescriptionList(p);
|
|
3712
3712
|
}
|
|
3713
3713
|
Object.assign(SpsDl, {
|
|
3714
|
-
props: propsDoc$
|
|
3715
|
-
propTypes: propTypes$
|
|
3714
|
+
props: propsDoc$1c,
|
|
3715
|
+
propTypes: propTypes$1g,
|
|
3716
3716
|
displayName: 'SpsDescriptionList / SpsDl',
|
|
3717
3717
|
});
|
|
3718
3718
|
|
|
3719
|
-
var propsDoc$
|
|
3720
|
-
var propTypes$
|
|
3719
|
+
var propsDoc$1b = {};
|
|
3720
|
+
var propTypes$1f = __assign({}, spsGlobalPropTypes);
|
|
3721
3721
|
function SpsDescriptionListDefinition(props) {
|
|
3722
3722
|
var children = props.children, className = props.className, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", 'data-testid', "unsafelyReplaceClassName"]);
|
|
3723
3723
|
var classes = clsx__default['default'](unsafelyReplaceClassName || 'sps-description-list__definition', className);
|
|
3724
3724
|
return (React__namespace.createElement("dd", __assign({ className: classes, "data-testid": "" + testId }, rest), children));
|
|
3725
3725
|
}
|
|
3726
3726
|
Object.assign(SpsDescriptionListDefinition, {
|
|
3727
|
-
props: propsDoc$
|
|
3728
|
-
propTypes: propTypes$
|
|
3727
|
+
props: propsDoc$1b,
|
|
3728
|
+
propTypes: propTypes$1f,
|
|
3729
3729
|
displayName: 'SpsDescriptionListDefinition / SpsDd',
|
|
3730
3730
|
});
|
|
3731
3731
|
function SpsDd(p) {
|
|
3732
3732
|
return SpsDescriptionListDefinition(p);
|
|
3733
3733
|
}
|
|
3734
3734
|
Object.assign(SpsDd, {
|
|
3735
|
-
props: propsDoc$
|
|
3736
|
-
propTypes: propTypes$
|
|
3735
|
+
props: propsDoc$1b,
|
|
3736
|
+
propTypes: propTypes$1f,
|
|
3737
3737
|
displayName: 'SpsDescriptionListDefinition / SpsDd',
|
|
3738
3738
|
});
|
|
3739
3739
|
|
|
@@ -3751,7 +3751,7 @@ function toggleTooltipState(state) {
|
|
|
3751
3751
|
}
|
|
3752
3752
|
var CARET_SPACING_PX = 13;
|
|
3753
3753
|
var openTips = new Map();
|
|
3754
|
-
var propsDoc$
|
|
3754
|
+
var propsDoc$1a = {
|
|
3755
3755
|
for: { type: 'React.MutableRefObject<any> | string', required: true },
|
|
3756
3756
|
hideDelay: 'number',
|
|
3757
3757
|
isShown: 'TooltipVisibility',
|
|
@@ -3763,7 +3763,7 @@ var propsDoc$19 = {
|
|
|
3763
3763
|
showOn: 'TooltipShowTrigger',
|
|
3764
3764
|
title: 'string',
|
|
3765
3765
|
};
|
|
3766
|
-
var propTypes$
|
|
3766
|
+
var propTypes$1e = __assign(__assign({}, spsGlobalPropTypes), { for: PropTypes.oneOfType([ref(), PropTypes.string]).isRequired, hideDelay: PropTypes.number, isShown: enumValue(exports.TooltipVisibility), kind: enumValue(dsShared.TooltipKind), offsets: PropTypes.arrayOf(PropTypes.number), onDeferred: fun(), position: enumValue(dsShared.Position), altPosition: enumValue(dsShared.Position), showOn: enumValue(dsShared.TooltipShowTrigger), title: PropTypes.string });
|
|
3767
3767
|
function SpsTooltip(_a) {
|
|
3768
3768
|
var children = _a.children, className = _a.className, forProp = _a.for, testId = _a["data-testid"], _b = _a.hideDelay, hideDelay = _b === void 0 ? dsShared.TOOLTIP_HIDE_DELAY_MS_DEFAULT : _b, isShown = _a.isShown, _c = _a.kind, kind = _c === void 0 ? dsShared.TooltipKind.DEFAULT : _c, _d = _a.offsets, offsets = _d === void 0 ? [0, 0] : _d, onDeferred = _a.onDeferred, _e = _a.position, position = _e === void 0 ? dsShared.Position.TOP_MIDDLE : _e, _f = _a.altPosition, altPosition = _f === void 0 ? flipPosition(position) : _f, _g = _a.showOn, showOn = _g === void 0 ? dsShared.TooltipShowTrigger.MOUSEOVER : _g, style = _a.style, title = _a.title, unsafelyReplaceClassName = _a.unsafelyReplaceClassName;
|
|
3769
3769
|
var iref = React__namespace.useRef({
|
|
@@ -3921,19 +3921,19 @@ function SpsTooltip(_a) {
|
|
|
3921
3921
|
React__namespace.createElement("span", { className: "sps-tooltip__caret" })));
|
|
3922
3922
|
}
|
|
3923
3923
|
Object.assign(SpsTooltip, {
|
|
3924
|
-
props: propsDoc$
|
|
3925
|
-
propTypes: propTypes$
|
|
3924
|
+
props: propsDoc$1a,
|
|
3925
|
+
propTypes: propTypes$1e,
|
|
3926
3926
|
displayName: 'SpsTooltip',
|
|
3927
3927
|
});
|
|
3928
3928
|
|
|
3929
|
-
var propsDoc$
|
|
3929
|
+
var propsDoc$19 = {
|
|
3930
3930
|
error: 'boolean',
|
|
3931
3931
|
errors: 'ReactNodeOrRenderFn',
|
|
3932
3932
|
help: 'ReactNodeOrRenderFn',
|
|
3933
3933
|
labelFor: 'SpsFormFieldMeta<any>',
|
|
3934
3934
|
required: 'boolean',
|
|
3935
3935
|
};
|
|
3936
|
-
var propTypes$
|
|
3936
|
+
var propTypes$1d = __assign(__assign({}, spsGlobalPropTypes), { error: PropTypes.bool, errors: nodeOrRenderFn, help: nodeOrRenderFn, labelFor: PropTypes.oneOfType([
|
|
3937
3937
|
impl(),
|
|
3938
3938
|
impl(),
|
|
3939
3939
|
]), required: PropTypes.bool });
|
|
@@ -3962,16 +3962,16 @@ function SpsDescriptionListTerm(props) {
|
|
|
3962
3962
|
React__namespace.createElement(SpsTooltip, { kind: tipKind, for: dtElement, showOn: dsShared.TooltipShowTrigger.MANUAL, isShown: showTip }, contentOf(tipKind === dsShared.TooltipKind.ERROR ? errors : help))));
|
|
3963
3963
|
}
|
|
3964
3964
|
Object.assign(SpsDescriptionListTerm, {
|
|
3965
|
-
props: propsDoc$
|
|
3966
|
-
propTypes: propTypes$
|
|
3965
|
+
props: propsDoc$19,
|
|
3966
|
+
propTypes: propTypes$1d,
|
|
3967
3967
|
displayName: 'SpsDescriptionListTerm / SpsDt',
|
|
3968
3968
|
});
|
|
3969
3969
|
function SpsDt(p) {
|
|
3970
3970
|
return SpsDescriptionListTerm(p);
|
|
3971
3971
|
}
|
|
3972
3972
|
Object.assign(SpsDt, {
|
|
3973
|
-
props: propsDoc$
|
|
3974
|
-
propTypes: propTypes$
|
|
3973
|
+
props: propsDoc$19,
|
|
3974
|
+
propTypes: propTypes$1d,
|
|
3975
3975
|
displayName: 'SpsDescriptionListTerm / SpsDt',
|
|
3976
3976
|
});
|
|
3977
3977
|
|
|
@@ -3980,10 +3980,10 @@ var SpsDescriptionListExamples = {
|
|
|
3980
3980
|
label: 'Basic Description List',
|
|
3981
3981
|
examples: {
|
|
3982
3982
|
basic: {
|
|
3983
|
-
jsx: utils.code(templateObject_1$
|
|
3983
|
+
jsx: utils.code(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n <SpsDl>\n <SpsDt>Term 1</SpsDt>\n <SpsDd>Definition</SpsDd>\n <SpsDt>Term</SpsDt>\n <SpsDd>Definition</SpsDd>\n <SpsDt>\n Term that wraps to the next line cause it's got so dang much text in it.\n </SpsDt>\n <SpsDd>Definition</SpsDd>\n <SpsDt>Term</SpsDt>\n <SpsDd>\n Definition that has a LOOOOOOOOOOT of text in it.\n Definition that has a LOOOOOOOOOOT of text in it.\n </SpsDd>\n </SpsDl>\n "], ["\n <SpsDl>\n <SpsDt>Term 1</SpsDt>\n <SpsDd>Definition</SpsDd>\n <SpsDt>Term</SpsDt>\n <SpsDd>Definition</SpsDd>\n <SpsDt>\n Term that wraps to the next line cause it's got so dang much text in it.\n </SpsDt>\n <SpsDd>Definition</SpsDd>\n <SpsDt>Term</SpsDt>\n <SpsDd>\n Definition that has a LOOOOOOOOOOT of text in it.\n Definition that has a LOOOOOOOOOOT of text in it.\n </SpsDd>\n </SpsDl>\n "]))),
|
|
3984
3984
|
},
|
|
3985
3985
|
dynamic: {
|
|
3986
|
-
react: utils.code(templateObject_2$
|
|
3986
|
+
react: utils.code(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n function DemoComponent() {\n const list = [\n { term: \"Term 1\", definition: \"Definition 1\" },\n { term: \"Term 2\", definition: \"Definition 2\" },\n { term: \"Term 3\", definition: \"Definition 3\" },\n ];\n\n return (\n <SpsDl>\n {list.map((item, i) => (\n <React.Fragment>\n <SpsDt>{item.term}</SpsDt>\n <SpsDd>{item.definition}</SpsDd>\n </React.Fragment>\n ))}\n </SpsDl>\n );\n }\n "], ["\n function DemoComponent() {\n const list = [\n { term: \"Term 1\", definition: \"Definition 1\" },\n { term: \"Term 2\", definition: \"Definition 2\" },\n { term: \"Term 3\", definition: \"Definition 3\" },\n ];\n\n return (\n <SpsDl>\n {list.map((item, i) => (\n <React.Fragment>\n <SpsDt>{item.term}</SpsDt>\n <SpsDd>{item.definition}</SpsDd>\n </React.Fragment>\n ))}\n </SpsDl>\n );\n }\n "]))),
|
|
3987
3987
|
},
|
|
3988
3988
|
},
|
|
3989
3989
|
},
|
|
@@ -3991,7 +3991,7 @@ var SpsDescriptionListExamples = {
|
|
|
3991
3991
|
label: 'Advanced Description List',
|
|
3992
3992
|
examples: {
|
|
3993
3993
|
advanced: {
|
|
3994
|
-
react: utils.code(templateObject_3$
|
|
3994
|
+
react: utils.code(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n function DemoComponent() {\n const { formValue, formMeta, updateForm } = useSpsForm({\n firstName: \"\",\n lastName: \"\",\n title: \"\",\n accomplishments: \"\"\n }, {\n \"lastName\": [SpsValidators.required]\n })\n\n React.useEffect(() => {\n // Make the error state visible for this demo\n formMeta.fields.lastName.markAsDirty()\n }, [])\n\n return (\n <SpsCard>\n <SpsForm formMeta={formMeta}>\n <SpsDl>\n <SpsDt id=\"firstNameLabel\" labelFor={formMeta.fields.firstName}>\n First Name\n </SpsDt>\n <SpsDd>\n <SpsTextInput\n aria-labelledby=\"firstNameLabel\"\n value={formValue.firstName}\n formMeta={formMeta.fields.firstName}\n />\n </SpsDd>\n <SpsDt\n id=\"lastNameLabel\"\n labelFor={formMeta.fields.lastName}\n errors={() =>\n formMeta.fields.lastName.hasError(\"required\") &&\n \"Please enter a last name.\"\n }\n >\n Last Name\n </SpsDt>\n <SpsDd>\n <SpsTextInput\n aria-labelledby=\"lastNameLabel\"\n value={formValue.lastName}\n formMeta={formMeta.fields.lastName}\n />\n </SpsDd>\n <SpsDt id=\"titleLabel\" labelFor={formMeta.fields.title}>\n Title\n </SpsDt>\n <SpsDd>\n <SpsTextInput\n aria-labelledby=\"titleLabel\"\n value={formValue.title}\n formMeta={formMeta.fields.title}\n />\n </SpsDd>\n <SpsDt\n id=\"accomplishmentsLabel\"\n labelFor={formMeta.fields.accomplishments}\n help=\"If they haven't achieved anything, make stuff up.\"\n >\n Top 5 Greatest Accomplishments\n </SpsDt>\n <SpsDd>\n <SpsTextarea\n rows={3}\n value={formValue.accomplishments}\n formMeta={formMeta.fields.accomplishments}\n aria-labelledby=\"accomplishmentsLabel\"\n />\n </SpsDd>\n </SpsDl>\n </SpsForm>\n </SpsCard>\n )\n }\n "], ["\n function DemoComponent() {\n const { formValue, formMeta, updateForm } = useSpsForm({\n firstName: \"\",\n lastName: \"\",\n title: \"\",\n accomplishments: \"\"\n }, {\n \"lastName\": [SpsValidators.required]\n })\n\n React.useEffect(() => {\n // Make the error state visible for this demo\n formMeta.fields.lastName.markAsDirty()\n }, [])\n\n return (\n <SpsCard>\n <SpsForm formMeta={formMeta}>\n <SpsDl>\n <SpsDt id=\"firstNameLabel\" labelFor={formMeta.fields.firstName}>\n First Name\n </SpsDt>\n <SpsDd>\n <SpsTextInput\n aria-labelledby=\"firstNameLabel\"\n value={formValue.firstName}\n formMeta={formMeta.fields.firstName}\n />\n </SpsDd>\n <SpsDt\n id=\"lastNameLabel\"\n labelFor={formMeta.fields.lastName}\n errors={() =>\n formMeta.fields.lastName.hasError(\"required\") &&\n \"Please enter a last name.\"\n }\n >\n Last Name\n </SpsDt>\n <SpsDd>\n <SpsTextInput\n aria-labelledby=\"lastNameLabel\"\n value={formValue.lastName}\n formMeta={formMeta.fields.lastName}\n />\n </SpsDd>\n <SpsDt id=\"titleLabel\" labelFor={formMeta.fields.title}>\n Title\n </SpsDt>\n <SpsDd>\n <SpsTextInput\n aria-labelledby=\"titleLabel\"\n value={formValue.title}\n formMeta={formMeta.fields.title}\n />\n </SpsDd>\n <SpsDt\n id=\"accomplishmentsLabel\"\n labelFor={formMeta.fields.accomplishments}\n help=\"If they haven't achieved anything, make stuff up.\"\n >\n Top 5 Greatest Accomplishments\n </SpsDt>\n <SpsDd>\n <SpsTextarea\n rows={3}\n value={formValue.accomplishments}\n formMeta={formMeta.fields.accomplishments}\n aria-labelledby=\"accomplishmentsLabel\"\n />\n </SpsDd>\n </SpsDl>\n </SpsForm>\n </SpsCard>\n )\n }\n "]))),
|
|
3995
3995
|
},
|
|
3996
3996
|
},
|
|
3997
3997
|
},
|
|
@@ -3999,7 +3999,7 @@ var SpsDescriptionListExamples = {
|
|
|
3999
3999
|
label: 'Compact Description List',
|
|
4000
4000
|
examples: {
|
|
4001
4001
|
compact: {
|
|
4002
|
-
jsx: utils.code(templateObject_4$
|
|
4002
|
+
jsx: utils.code(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n <SpsDl compact>\n <SpsDt>Term 1</SpsDt>\n <SpsDd>Definition</SpsDd>\n <SpsDt>Term</SpsDt>\n <SpsDd>Definition</SpsDd>\n <SpsDt>Term that wraps to the next line cause it's got so dang much text in it.</SpsDt>\n <SpsDd>Definition</SpsDd>\n <SpsDt>Term</SpsDt>\n <SpsDd>Definition that has a LOOOOOOOOOOT of text in it. Definition that has a LOOOOOOOOOOT of text in it.\n </SpsDd>\n </SpsDl>\n "], ["\n <SpsDl compact>\n <SpsDt>Term 1</SpsDt>\n <SpsDd>Definition</SpsDd>\n <SpsDt>Term</SpsDt>\n <SpsDd>Definition</SpsDd>\n <SpsDt>Term that wraps to the next line cause it's got so dang much text in it.</SpsDt>\n <SpsDd>Definition</SpsDd>\n <SpsDt>Term</SpsDt>\n <SpsDd>Definition that has a LOOOOOOOOOOT of text in it. Definition that has a LOOOOOOOOOOT of text in it.\n </SpsDd>\n </SpsDl>\n "]))),
|
|
4003
4003
|
},
|
|
4004
4004
|
},
|
|
4005
4005
|
},
|
|
@@ -4007,15 +4007,15 @@ var SpsDescriptionListExamples = {
|
|
|
4007
4007
|
label: 'Alternate Column Widths',
|
|
4008
4008
|
examples: {
|
|
4009
4009
|
wideTerms: {
|
|
4010
|
-
jsx: utils.code(templateObject_5$
|
|
4010
|
+
jsx: utils.code(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n <SpsDl wideTerms>\n <SpsDt>Term 1</SpsDt>\n <SpsDd>Definition</SpsDd>\n <SpsDt>Term</SpsDt>\n <SpsDd>Definition</SpsDd>\n <SpsDt>Term that wraps to the next line cause it's got so dang much text in it.</SpsDt>\n <SpsDd>Definition</SpsDd>\n </SpsDl>\n "], ["\n <SpsDl wideTerms>\n <SpsDt>Term 1</SpsDt>\n <SpsDd>Definition</SpsDd>\n <SpsDt>Term</SpsDt>\n <SpsDd>Definition</SpsDd>\n <SpsDt>Term that wraps to the next line cause it's got so dang much text in it.</SpsDt>\n <SpsDd>Definition</SpsDd>\n </SpsDl>\n "]))),
|
|
4011
4011
|
},
|
|
4012
4012
|
widerTerms: {
|
|
4013
|
-
jsx: utils.code(templateObject_6$
|
|
4013
|
+
jsx: utils.code(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n <SpsDl widerTerms>\n <SpsDt>Term 1</SpsDt>\n <SpsDd>Definition</SpsDd>\n <SpsDt>Term</SpsDt>\n <SpsDd>Definition</SpsDd>\n <SpsDt>Term that wraps to the next line cause it's got so dang much text in it.</SpsDt>\n <SpsDd>Definition</SpsDd>\n </SpsDl>\n "], ["\n <SpsDl widerTerms>\n <SpsDt>Term 1</SpsDt>\n <SpsDd>Definition</SpsDd>\n <SpsDt>Term</SpsDt>\n <SpsDd>Definition</SpsDd>\n <SpsDt>Term that wraps to the next line cause it's got so dang much text in it.</SpsDt>\n <SpsDd>Definition</SpsDd>\n </SpsDl>\n "]))),
|
|
4014
4014
|
},
|
|
4015
4015
|
},
|
|
4016
4016
|
},
|
|
4017
4017
|
};
|
|
4018
|
-
var templateObject_1$
|
|
4018
|
+
var templateObject_1$I, templateObject_2$E, templateObject_3$x, templateObject_4$p, templateObject_5$i, templateObject_6$e;
|
|
4019
4019
|
|
|
4020
4020
|
var SpsDropdownExamples = {
|
|
4021
4021
|
labelled: {
|
|
@@ -4023,19 +4023,19 @@ var SpsDropdownExamples = {
|
|
|
4023
4023
|
examples: {
|
|
4024
4024
|
default: {
|
|
4025
4025
|
description: '<h3> Default Dropdown</h3>',
|
|
4026
|
-
react: utils.code(templateObject_1$
|
|
4026
|
+
react: utils.code(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n function SpsDropdownBasicDefault(props) {\n const [action, updateAction] = useSpsAction({\n label: \"Option B\"\n }, () => console.log(\"Option B\"));\n return (\n <SpsDropdown id=\"regular\" label=\"Dropdown\" options={[\n [{ label: \"Option A\" }, () => console.log(\"Option A\")],\n action,\n ]}/>\n );\n }\n "], ["\n function SpsDropdownBasicDefault(props) {\n const [action, updateAction] = useSpsAction({\n label: \"Option B\"\n }, () => console.log(\"Option B\"));\n return (\n <SpsDropdown id=\"regular\" label=\"Dropdown\" options={[\n [{ label: \"Option A\" }, () => console.log(\"Option A\")],\n action,\n ]}/>\n );\n }\n "]))),
|
|
4027
4027
|
},
|
|
4028
4028
|
key: {
|
|
4029
4029
|
description: '<h3> Key Dropdown</h3>',
|
|
4030
|
-
react: utils.code(templateObject_2$
|
|
4030
|
+
react: utils.code(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n function SpsDropdownBasicKey(props) {\n return (\n <SpsDropdown\n label=\"Dropdown\"\n kind=\"key\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n );\n }\n "], ["\n function SpsDropdownBasicKey(props) {\n return (\n <SpsDropdown\n label=\"Dropdown\"\n kind=\"key\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n );\n }\n "]))),
|
|
4031
4031
|
},
|
|
4032
4032
|
confirm: {
|
|
4033
4033
|
description: '<h3> Confirm Dropdown</h3>',
|
|
4034
|
-
react: utils.code(templateObject_3$
|
|
4034
|
+
react: utils.code(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n function SpsDropdownBasicConfirm(props) {\n return (\n <SpsDropdown\n label=\"Dropdown\"\n kind=\"confirm\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n );\n }\n "], ["\n function SpsDropdownBasicConfirm(props) {\n return (\n <SpsDropdown\n label=\"Dropdown\"\n kind=\"confirm\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n );\n }\n "]))),
|
|
4035
4035
|
},
|
|
4036
4036
|
delete: {
|
|
4037
4037
|
description: '<h3> Delete Dropdown</h3>',
|
|
4038
|
-
react: utils.code(templateObject_4$
|
|
4038
|
+
react: utils.code(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n function SpsDropdownBasicDelete(props) {\n return (\n <SpsDropdown\n label=\"Dropdown\"\n kind=\"delete\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n );\n }\n "], ["\n function SpsDropdownBasicDelete(props) {\n return (\n <SpsDropdown\n label=\"Dropdown\"\n kind=\"delete\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n );\n }\n "]))),
|
|
4039
4039
|
},
|
|
4040
4040
|
},
|
|
4041
4041
|
},
|
|
@@ -4044,11 +4044,11 @@ var SpsDropdownExamples = {
|
|
|
4044
4044
|
examples: {
|
|
4045
4045
|
default: {
|
|
4046
4046
|
description: '<h3> Default Dropdown With Icon</h3>',
|
|
4047
|
-
react: utils.code(templateObject_5$
|
|
4047
|
+
react: utils.code(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n function SpsDropdownWithIconDefault(props) {\n const [action, updateAction] = useSpsAction(\n {\n label: \"Option B\"\n },\n () => console.log(\"Option B\")\n );\n return (\n <SpsDropdown\n label=\"Dropdown\"\n icon=\"drill\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")], action]}\n />\n );\n }\n "], ["\n function SpsDropdownWithIconDefault(props) {\n const [action, updateAction] = useSpsAction(\n {\n label: \"Option B\"\n },\n () => console.log(\"Option B\")\n );\n return (\n <SpsDropdown\n label=\"Dropdown\"\n icon=\"drill\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")], action]}\n />\n );\n }\n "]))),
|
|
4048
4048
|
},
|
|
4049
4049
|
key: {
|
|
4050
4050
|
description: '<h3>Key Dropdown With Icon</h3>',
|
|
4051
|
-
react: utils.code(templateObject_6$
|
|
4051
|
+
react: utils.code(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n function SpsDropdownWithIconKey(props) {\n return (\n <SpsDropdown\n label=\"Dropdown\"\n kind=\"key\"\n icon=\"key\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n );\n }\n "], ["\n function SpsDropdownWithIconKey(props) {\n return (\n <SpsDropdown\n label=\"Dropdown\"\n kind=\"key\"\n icon=\"key\"\n options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n />\n );\n }\n "]))),
|
|
4052
4052
|
},
|
|
4053
4053
|
confirm: {
|
|
4054
4054
|
description: '<h3> Confirm Dropdown With Icon</h3>',
|
|
@@ -4105,16 +4105,16 @@ var SpsDropdownExamples = {
|
|
|
4105
4105
|
},
|
|
4106
4106
|
},
|
|
4107
4107
|
};
|
|
4108
|
-
var templateObject_1$
|
|
4108
|
+
var templateObject_1$H, templateObject_2$D, templateObject_3$w, templateObject_4$o, templateObject_5$h, templateObject_6$d, templateObject_7$b, templateObject_8$a, templateObject_9$7, templateObject_10$6, templateObject_11$4, templateObject_12$2, templateObject_13$2, templateObject_14$2;
|
|
4109
4109
|
|
|
4110
|
-
var propsDoc$
|
|
4110
|
+
var propsDoc$18 = {
|
|
4111
4111
|
checked: 'boolean',
|
|
4112
4112
|
onChange: 'ChangeEventHandler',
|
|
4113
4113
|
indeterminate: 'boolean',
|
|
4114
4114
|
disabled: 'boolean',
|
|
4115
4115
|
options: 'Array<SpsActionMethod | [SpsActionDescriptor, () => void]>',
|
|
4116
4116
|
};
|
|
4117
|
-
var propTypes$
|
|
4117
|
+
var propTypes$1c = __assign(__assign({}, spsGlobalPropTypes), { checked: PropTypes.bool, onChange: fun(), indeterminate: PropTypes.bool,
|
|
4118
4118
|
// the type arg to PropTypes.arrayOf<T>() here confuses eslint greatly
|
|
4119
4119
|
/* eslint-disable */
|
|
4120
4120
|
options: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.any])).isRequired,
|
|
@@ -4128,15 +4128,15 @@ function SpsCheckboxDropdown(props) {
|
|
|
4128
4128
|
React__namespace.createElement(SpsDropdown, { disabled: disabled, options: options, icon: dsShared.SpsIcon.CHEVRON_DOWN })));
|
|
4129
4129
|
}
|
|
4130
4130
|
Object.assign(SpsCheckboxDropdown, {
|
|
4131
|
-
props: propsDoc$
|
|
4132
|
-
propTypes: propTypes$
|
|
4131
|
+
props: propsDoc$18,
|
|
4132
|
+
propTypes: propTypes$1c,
|
|
4133
4133
|
displayName: 'SpsCheckboxDropdown',
|
|
4134
4134
|
});
|
|
4135
4135
|
|
|
4136
|
-
var propsDoc$
|
|
4136
|
+
var propsDoc$17 = {
|
|
4137
4137
|
kind: 'FeedbackBlockKind',
|
|
4138
4138
|
};
|
|
4139
|
-
var propTypes$
|
|
4139
|
+
var propTypes$1b = __assign(__assign({}, spsGlobalPropTypes), { kind: enumValue(dsShared.FeedbackBlockKind) });
|
|
4140
4140
|
function SpsFeedbackBlock(props) {
|
|
4141
4141
|
var children = props.children, className = props.className, _a = props.kind, kind = _a === void 0 ? dsShared.FeedbackBlockKind.TIP : _a, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "kind", 'data-testid', "unsafelyReplaceClassName"]);
|
|
4142
4142
|
var classes = clsx__default['default'](unsafelyReplaceClassName || 'sps-feedback-block', "sps-feedback-block--" + kind, className);
|
|
@@ -4145,8 +4145,8 @@ function SpsFeedbackBlock(props) {
|
|
|
4145
4145
|
React__namespace.createElement("span", { className: "sps-feedback-block__content", "data-testid": testId + "__text" }, children)));
|
|
4146
4146
|
}
|
|
4147
4147
|
Object.assign(SpsFeedbackBlock, {
|
|
4148
|
-
props: propsDoc$
|
|
4149
|
-
propTypes: propTypes$
|
|
4148
|
+
props: propsDoc$17,
|
|
4149
|
+
propTypes: propTypes$1b,
|
|
4150
4150
|
displayName: 'SpsFeedbackBlock',
|
|
4151
4151
|
});
|
|
4152
4152
|
|
|
@@ -4157,23 +4157,23 @@ var SpsFeedbackBlockExamples = {
|
|
|
4157
4157
|
examples: {
|
|
4158
4158
|
error: {
|
|
4159
4159
|
description: 'Error',
|
|
4160
|
-
jsx: utils.code(templateObject_1$
|
|
4160
|
+
jsx: utils.code(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n <SpsFeedbackBlock kind={FeedbackBlockKind.ERROR}>\n We are experiencing difficulties communicating to the server. Please try again later.\n </SpsFeedbackBlock>\n "], ["\n <SpsFeedbackBlock kind={FeedbackBlockKind.ERROR}>\n We are experiencing difficulties communicating to the server. Please try again later.\n </SpsFeedbackBlock>\n "]))),
|
|
4161
4161
|
},
|
|
4162
4162
|
info: {
|
|
4163
4163
|
description: 'Information',
|
|
4164
|
-
jsx: utils.code(templateObject_2$
|
|
4164
|
+
jsx: utils.code(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n <SpsFeedbackBlock kind={FeedbackBlockKind.INFO}>\n FYI - This page has been updated. Click refresh to see the most recent version.\n </SpsFeedbackBlock>\n "], ["\n <SpsFeedbackBlock kind={FeedbackBlockKind.INFO}>\n FYI - This page has been updated. Click refresh to see the most recent version.\n </SpsFeedbackBlock>\n "]))),
|
|
4165
4165
|
},
|
|
4166
4166
|
proTip: {
|
|
4167
4167
|
description: 'Pro Tip',
|
|
4168
|
-
jsx: utils.code(templateObject_3$
|
|
4168
|
+
jsx: utils.code(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n <SpsFeedbackBlock kind={FeedbackBlockKind.TIP}>\n Please Note: Click the Receive button above to check for new transactions from QuickBooks.\n </SpsFeedbackBlock>\n "], ["\n <SpsFeedbackBlock kind={FeedbackBlockKind.TIP}>\n Please Note: Click the Receive button above to check for new transactions from QuickBooks.\n </SpsFeedbackBlock>\n "]))),
|
|
4169
4169
|
},
|
|
4170
4170
|
success: {
|
|
4171
4171
|
description: 'Success',
|
|
4172
|
-
jsx: utils.code(templateObject_4$
|
|
4172
|
+
jsx: utils.code(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n <SpsFeedbackBlock kind={FeedbackBlockKind.SUCCESS}>\n All items have been uploaded and are ready for export.\n </SpsFeedbackBlock>\n "], ["\n <SpsFeedbackBlock kind={FeedbackBlockKind.SUCCESS}>\n All items have been uploaded and are ready for export.\n </SpsFeedbackBlock>\n "]))),
|
|
4173
4173
|
},
|
|
4174
4174
|
warning: {
|
|
4175
4175
|
description: 'Warning',
|
|
4176
|
-
jsx: utils.code(templateObject_5$
|
|
4176
|
+
jsx: utils.code(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n <SpsFeedbackBlock kind={FeedbackBlockKind.WARNING}>\n Warning! This order is missing a shipment date and is in jeopardy of being past due.\n </SpsFeedbackBlock>\n "], ["\n <SpsFeedbackBlock kind={FeedbackBlockKind.WARNING}>\n Warning! This order is missing a shipment date and is in jeopardy of being past due.\n </SpsFeedbackBlock>\n "]))),
|
|
4177
4177
|
},
|
|
4178
4178
|
},
|
|
4179
4179
|
},
|
|
@@ -4183,7 +4183,7 @@ var SpsFeedbackBlockExamples = {
|
|
|
4183
4183
|
examples: {
|
|
4184
4184
|
error: {
|
|
4185
4185
|
description: 'Error',
|
|
4186
|
-
jsx: utils.code(templateObject_6$
|
|
4186
|
+
jsx: utils.code(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n <SpsMicroBlock\n kind={FeedbackBlockKind.ERROR}\n message=\"We are experiencing difficulties communicating to the server. Please try again later.\"\n />\n "], ["\n <SpsMicroBlock\n kind={FeedbackBlockKind.ERROR}\n message=\"We are experiencing difficulties communicating to the server. Please try again later.\"\n />\n "]))),
|
|
4187
4187
|
},
|
|
4188
4188
|
info: {
|
|
4189
4189
|
description: 'Information',
|
|
@@ -4204,9 +4204,9 @@ var SpsFeedbackBlockExamples = {
|
|
|
4204
4204
|
},
|
|
4205
4205
|
},
|
|
4206
4206
|
};
|
|
4207
|
-
var templateObject_1$
|
|
4207
|
+
var templateObject_1$G, templateObject_2$C, templateObject_3$v, templateObject_4$n, templateObject_5$g, templateObject_6$c, templateObject_7$a, templateObject_8$9, templateObject_9$6, templateObject_10$5;
|
|
4208
4208
|
|
|
4209
|
-
var propsDoc$
|
|
4209
|
+
var propsDoc$16 = {
|
|
4210
4210
|
errors: 'ReactNodeOrRenderFn',
|
|
4211
4211
|
formMeta: 'SpsFormSetMeta<any>',
|
|
4212
4212
|
legend: 'string',
|
|
@@ -4215,7 +4215,7 @@ var propsDoc$15 = {
|
|
|
4215
4215
|
onToggled: '(isEnabled: boolean) => void',
|
|
4216
4216
|
tooltip: 'string',
|
|
4217
4217
|
};
|
|
4218
|
-
var propTypes$
|
|
4218
|
+
var propTypes$1a = __assign(__assign({}, spsGlobalPropTypes), { errors: nodeOrRenderFn, formArray: impl(), formGroup: impl(), formMeta: impl(), legend: PropTypes.string, optional: PropTypes.bool, enabled: PropTypes.bool, onToggled: fun(), tooltip: PropTypes.string });
|
|
4219
4219
|
function SpsFieldset(_a) {
|
|
4220
4220
|
var children = _a.children, className = _a.className, errors = _a.errors, formArray = _a.formArray, formGroup = _a.formGroup, formMeta = _a.formMeta, legend = _a.legend, unsafelyReplaceClassName = _a.unsafelyReplaceClassName, _b = _a.optional, optional = _b === void 0 ? false : _b, enabled = _a.enabled, onToggled = _a.onToggled, tooltip = _a.tooltip;
|
|
4221
4221
|
var formControlSet = formGroup || formArray;
|
|
@@ -4265,8 +4265,8 @@ function SpsFieldset(_a) {
|
|
|
4265
4265
|
children)));
|
|
4266
4266
|
}
|
|
4267
4267
|
Object.assign(SpsFieldset, {
|
|
4268
|
-
props: propsDoc$
|
|
4269
|
-
propTypes: propTypes$
|
|
4268
|
+
props: propsDoc$16,
|
|
4269
|
+
propTypes: propTypes$1a,
|
|
4270
4270
|
displayName: 'SpsFieldset',
|
|
4271
4271
|
});
|
|
4272
4272
|
|
|
@@ -4276,7 +4276,7 @@ var SpsFieldsetExamples = {
|
|
|
4276
4276
|
description: 'info about basic fieldsets',
|
|
4277
4277
|
examples: {
|
|
4278
4278
|
basic: {
|
|
4279
|
-
react: utils.code(templateObject_1$
|
|
4279
|
+
react: utils.code(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n function DemoComponent() {\n const RADIO_OPTIONS = [\n { value: \"a\", label: \"Option A\" },\n { value: \"b\", label: \"Option B\" }\n ];\n const { formValue, formMeta, updateForm } = useSpsForm({\n myFieldset: {\n foo: \"\",\n bar: \"\",\n baz: RADIO_OPTIONS[0].value\n }\n });\n\n return <>\n <SpsFieldset formMeta={formMeta.fields.myFieldset} legend=\"Fieldset Legend\" tooltip=\"Add a Tooltip\">\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.myFieldset.fields.foo}>Foo</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.myFieldset.fields.foo}\n value={formValue.myFieldset.foo}\n ></SpsTextInput>\n </div>\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.myFieldset.fields.bar}>Bar</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.myFieldset.fields.bar}\n value={formValue.myFieldset.bar}\n ></SpsTextInput>\n </div>\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.myFieldset.fields.baz}>Baz</SpsLabel>\n {RADIO_OPTIONS.map(option => (\n <SpsRadioButton key={option.value} name=\"baz\"\n label={option.label} value={option.value}\n formMeta={formMeta.fields.myFieldset.fields.baz}\n checked={formValue.myFieldset.baz === option.value}\n />\n ))}\n </div>\n </div>\n </SpsFieldset>\n </>\n }\n "], ["\n function DemoComponent() {\n const RADIO_OPTIONS = [\n { value: \"a\", label: \"Option A\" },\n { value: \"b\", label: \"Option B\" }\n ];\n const { formValue, formMeta, updateForm } = useSpsForm({\n myFieldset: {\n foo: \"\",\n bar: \"\",\n baz: RADIO_OPTIONS[0].value\n }\n });\n\n return <>\n <SpsFieldset formMeta={formMeta.fields.myFieldset} legend=\"Fieldset Legend\" tooltip=\"Add a Tooltip\">\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.myFieldset.fields.foo}>Foo</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.myFieldset.fields.foo}\n value={formValue.myFieldset.foo}\n ></SpsTextInput>\n </div>\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.myFieldset.fields.bar}>Bar</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.myFieldset.fields.bar}\n value={formValue.myFieldset.bar}\n ></SpsTextInput>\n </div>\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.myFieldset.fields.baz}>Baz</SpsLabel>\n {RADIO_OPTIONS.map(option => (\n <SpsRadioButton key={option.value} name=\"baz\"\n label={option.label} value={option.value}\n formMeta={formMeta.fields.myFieldset.fields.baz}\n checked={formValue.myFieldset.baz === option.value}\n />\n ))}\n </div>\n </div>\n </SpsFieldset>\n </>\n }\n "]))),
|
|
4280
4280
|
},
|
|
4281
4281
|
},
|
|
4282
4282
|
},
|
|
@@ -4285,7 +4285,7 @@ var SpsFieldsetExamples = {
|
|
|
4285
4285
|
description: 'info about nested fieldsets',
|
|
4286
4286
|
examples: {
|
|
4287
4287
|
nested: {
|
|
4288
|
-
react: utils.code(templateObject_2$
|
|
4288
|
+
react: utils.code(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n function DemoComponent() {\n const RADIO_OPTIONS = [\n { value: \"a\", label: \"Option A\" },\n { value: \"b\", label: \"Option B\" }\n ];\n const { formValue, formMeta, updateForm } = useSpsForm({\n topFieldset: {\n foo: \"\",\n fsNested: {\n bar: RADIO_OPTIONS[1].value,\n fsNested2: {\n baz: \"\"\n }\n }\n }\n });\n\n return <>\n <SpsFieldset formMeta={formMeta.fields.topFieldset} legend=\"Fieldset Legend\">\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.topFieldset.fields.foo}>Foo</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.topFieldset.fields.foo}\n value={formValue.topFieldset.foo}\n placeholder=\"Enter a thing\"\n ></SpsTextInput>\n </div>\n </div>\n <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.fsNested} legend=\"Nested Fieldset\">\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.topFieldset.fields.fsNested.fields.bar}>Bar</SpsLabel>\n {RADIO_OPTIONS.map(option => (\n <SpsRadioButton key={option.value} name=\"fsRadio\"\n label={option.label} value={option.value}\n formMeta={formMeta.fields.topFieldset.fields.fsNested.fields.bar}\n checked={formValue.topFieldset.fsNested.bar === option.value}\n />\n ))}\n </div>\n </div>\n <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.fsNested.fields.fsNested2} legend=\"Doubly Nested Fieldset\">\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.topFieldset.fields.fsNested.fields.fsNested2.fields.baz}>Baz</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.topFieldset.fields.fsNested.fields.fsNested2.fields.baz}\n value={formValue.topFieldset.fsNested.baz}\n placeholder=\"Enter a thing\"\n ></SpsTextInput>\n </div>\n </div>\n </SpsFieldset>\n </SpsFieldset>\n </SpsFieldset>\n </>\n }\n "], ["\n function DemoComponent() {\n const RADIO_OPTIONS = [\n { value: \"a\", label: \"Option A\" },\n { value: \"b\", label: \"Option B\" }\n ];\n const { formValue, formMeta, updateForm } = useSpsForm({\n topFieldset: {\n foo: \"\",\n fsNested: {\n bar: RADIO_OPTIONS[1].value,\n fsNested2: {\n baz: \"\"\n }\n }\n }\n });\n\n return <>\n <SpsFieldset formMeta={formMeta.fields.topFieldset} legend=\"Fieldset Legend\">\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.topFieldset.fields.foo}>Foo</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.topFieldset.fields.foo}\n value={formValue.topFieldset.foo}\n placeholder=\"Enter a thing\"\n ></SpsTextInput>\n </div>\n </div>\n <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.fsNested} legend=\"Nested Fieldset\">\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.topFieldset.fields.fsNested.fields.bar}>Bar</SpsLabel>\n {RADIO_OPTIONS.map(option => (\n <SpsRadioButton key={option.value} name=\"fsRadio\"\n label={option.label} value={option.value}\n formMeta={formMeta.fields.topFieldset.fields.fsNested.fields.bar}\n checked={formValue.topFieldset.fsNested.bar === option.value}\n />\n ))}\n </div>\n </div>\n <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.fsNested.fields.fsNested2} legend=\"Doubly Nested Fieldset\">\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.topFieldset.fields.fsNested.fields.fsNested2.fields.baz}>Baz</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.topFieldset.fields.fsNested.fields.fsNested2.fields.baz}\n value={formValue.topFieldset.fsNested.baz}\n placeholder=\"Enter a thing\"\n ></SpsTextInput>\n </div>\n </div>\n </SpsFieldset>\n </SpsFieldset>\n </SpsFieldset>\n </>\n }\n "]))),
|
|
4289
4289
|
},
|
|
4290
4290
|
},
|
|
4291
4291
|
},
|
|
@@ -4294,7 +4294,7 @@ var SpsFieldsetExamples = {
|
|
|
4294
4294
|
description: 'info about optional fieldsets',
|
|
4295
4295
|
examples: {
|
|
4296
4296
|
optional: {
|
|
4297
|
-
react: utils.code(templateObject_3$
|
|
4297
|
+
react: utils.code(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n function DemoComponent() {\n const initValue = {\n optionalFieldset: {\n foo: \"\",\n bar: \"\",\n }\n };\n const { formValue, formMeta, updateForm } = useSpsForm(initValue);\n\n function handleToggle(isChecked) {\n console.log(isChecked ? \"optional fieldset visible\" : \"optional fieldset not visible\");\n }\n\n return <>\n <SpsFieldset legend=\"Fieldset Legend\" formMeta={formMeta.fields.optionalFieldset} optional enabled={false} onToggled={handleToggle}>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.optionalFieldset.fields.foo}>Foo</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.optionalFieldset.fields.foo}\n value={formValue.optionalFieldset.foo}\n placeholder=\"Enter a thing\"\n ></SpsTextInput>\n </div>\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.optionalFieldset.fields.bar}>Bar</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.optionalFieldset.fields.bar}\n value={formValue.optionalFieldset.bar}\n placeholder=\"Enter a thing\"\n ></SpsTextInput>\n </div>\n </div>\n </SpsFieldset>\n </>\n }\n "], ["\n function DemoComponent() {\n const initValue = {\n optionalFieldset: {\n foo: \"\",\n bar: \"\",\n }\n };\n const { formValue, formMeta, updateForm } = useSpsForm(initValue);\n\n function handleToggle(isChecked) {\n console.log(isChecked ? \"optional fieldset visible\" : \"optional fieldset not visible\");\n }\n\n return <>\n <SpsFieldset legend=\"Fieldset Legend\" formMeta={formMeta.fields.optionalFieldset} optional enabled={false} onToggled={handleToggle}>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.optionalFieldset.fields.foo}>Foo</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.optionalFieldset.fields.foo}\n value={formValue.optionalFieldset.foo}\n placeholder=\"Enter a thing\"\n ></SpsTextInput>\n </div>\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.optionalFieldset.fields.bar}>Bar</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.optionalFieldset.fields.bar}\n value={formValue.optionalFieldset.bar}\n placeholder=\"Enter a thing\"\n ></SpsTextInput>\n </div>\n </div>\n </SpsFieldset>\n </>\n }\n "]))),
|
|
4298
4298
|
},
|
|
4299
4299
|
},
|
|
4300
4300
|
},
|
|
@@ -4303,7 +4303,7 @@ var SpsFieldsetExamples = {
|
|
|
4303
4303
|
description: 'info about validation on fields',
|
|
4304
4304
|
examples: {
|
|
4305
4305
|
validationOnField: {
|
|
4306
|
-
react: utils.code(templateObject_4$
|
|
4306
|
+
react: utils.code(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n function DemoComponent() {\n const { formValue, formMeta, updateForm } = useSpsForm({\n myFieldset: {\n foo: \"\",\n }\n }, {\n \"myFieldset.foo\": [SpsValidators.required]\n })\n\n React.useEffect(() => {\n formMeta.markAsDirty();\n }, [])\n\n return <>\n <SpsFieldset formMeta={formMeta.fields.myFieldset} legend=\"Fieldset Legend\">\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.myFieldset.fields.foo}>Foo</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.myFieldset.fields.foo}\n value={formValue.myFieldset.foo}\n ></SpsTextInput>\n </div>\n </div>\n </SpsFieldset>\n </>\n }\n "], ["\n function DemoComponent() {\n const { formValue, formMeta, updateForm } = useSpsForm({\n myFieldset: {\n foo: \"\",\n }\n }, {\n \"myFieldset.foo\": [SpsValidators.required]\n })\n\n React.useEffect(() => {\n formMeta.markAsDirty();\n }, [])\n\n return <>\n <SpsFieldset formMeta={formMeta.fields.myFieldset} legend=\"Fieldset Legend\">\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.myFieldset.fields.foo}>Foo</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.myFieldset.fields.foo}\n value={formValue.myFieldset.foo}\n ></SpsTextInput>\n </div>\n </div>\n </SpsFieldset>\n </>\n }\n "]))),
|
|
4307
4307
|
},
|
|
4308
4308
|
},
|
|
4309
4309
|
},
|
|
@@ -4312,15 +4312,15 @@ var SpsFieldsetExamples = {
|
|
|
4312
4312
|
description: 'info about validation on fieldsets',
|
|
4313
4313
|
examples: {
|
|
4314
4314
|
validationOnFieldset: {
|
|
4315
|
-
react: utils.code(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n function DemoComponent() {\n function mustSelectAColorValidator(value) {\n if (value.radio === \"b\") {\n if (value.colors.filter(Boolean).length === 0) {\n return {\n mustSelectAColor: true\n };\n }\n }\n return null;\n };\n\n const COLOR_OPTIONS = [\"Red\", \"Orange\", \"Yellow\", \"Green\", \"Blue\", \"Indigo\", \"Violet\"];\n const { formValue, formMeta, updateForm } = useSpsForm({\n topFieldset: {\n text: \"\",\n nestedFieldset: {\n radio: \"b\",\n colors: COLOR_OPTIONS.map(() => false)\n }\n }\n }, {\n \"topFieldset.nestedFieldset\": [mustSelectAColorValidator]\n });\n\n React.useEffect(() => {\n formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio.markAsDirty();\n }, [])\n\n return (\n <SpsForm formMeta={formMeta}>\n <SpsFieldset formMeta={formMeta.fields.topFieldset} legend=\"Fieldset Legend\">\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.topFieldset.fields.text}>Input</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.topFieldset.fields.text}\n value={formValue.topFieldset.text}\n placeholder=\"Enter a thing\"\n ></SpsTextInput>\n </div>\n </div>\n <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.nestedFieldset}\n legend=\"Nested Fieldset\"\n errors={() => formMeta.fields.topFieldset.fields.nestedFieldset.hasError(\"mustSelectAColor\")\n && \"If you choose Option B, you must select at least one color.\"}\n >\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio}>Radio</SpsLabel>\n <SpsRadioButton name=\"radio\" label=\"Option A\" value=\"a\"\n formMeta={formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio}\n checked={formValue.topFieldset.nestedFieldset.radio === \"a\"}\n />\n <SpsRadioButton name=\"radio\" label=\"Option B\" value=\"b\"\n formMeta={formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio}\n checked={formValue.topFieldset.nestedFieldset.radio === \"b\"}\n />\n </div>\n <div className=\"sfg-col-8\">\n <SpsLabel for={formMeta.fields.topFieldset.fields.nestedFieldset.fields.colors}>Colors</SpsLabel>\n {COLOR_OPTIONS.map((color, index) =>\n <SpsCheckbox key={index} name=\"colors\" label={color}\n formMeta={formMeta.fields.topFieldset.fields.nestedFieldset.fields.colors[index]}\n checked={formValue.topFieldset.nestedFieldset.colors[index]}\n />\n )}\n </div>\n </div>\n </SpsFieldset>\n </SpsFieldset>\n </SpsForm>\n )\n }\n "], ["\n function DemoComponent() {\n function mustSelectAColorValidator(value) {\n if (value.radio === \"b\") {\n if (value.colors.filter(Boolean).length === 0) {\n return {\n mustSelectAColor: true\n };\n }\n }\n return null;\n };\n\n const COLOR_OPTIONS = [\"Red\", \"Orange\", \"Yellow\", \"Green\", \"Blue\", \"Indigo\", \"Violet\"];\n const { formValue, formMeta, updateForm } = useSpsForm({\n topFieldset: {\n text: \"\",\n nestedFieldset: {\n radio: \"b\",\n colors: COLOR_OPTIONS.map(() => false)\n }\n }\n }, {\n \"topFieldset.nestedFieldset\": [mustSelectAColorValidator]\n });\n\n React.useEffect(() => {\n formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio.markAsDirty();\n }, [])\n\n return (\n <SpsForm formMeta={formMeta}>\n <SpsFieldset formMeta={formMeta.fields.topFieldset} legend=\"Fieldset Legend\">\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.topFieldset.fields.text}>Input</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.topFieldset.fields.text}\n value={formValue.topFieldset.text}\n placeholder=\"Enter a thing\"\n ></SpsTextInput>\n </div>\n </div>\n <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.nestedFieldset}\n legend=\"Nested Fieldset\"\n errors={() => formMeta.fields.topFieldset.fields.nestedFieldset.hasError(\"mustSelectAColor\")\n && \"If you choose Option B, you must select at least one color.\"}\n >\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio}>Radio</SpsLabel>\n <SpsRadioButton name=\"radio\" label=\"Option A\" value=\"a\"\n formMeta={formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio}\n checked={formValue.topFieldset.nestedFieldset.radio === \"a\"}\n />\n <SpsRadioButton name=\"radio\" label=\"Option B\" value=\"b\"\n formMeta={formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio}\n checked={formValue.topFieldset.nestedFieldset.radio === \"b\"}\n />\n </div>\n <div className=\"sfg-col-8\">\n <SpsLabel for={formMeta.fields.topFieldset.fields.nestedFieldset.fields.colors}>Colors</SpsLabel>\n {COLOR_OPTIONS.map((color, index) =>\n <SpsCheckbox key={index} name=\"colors\" label={color}\n formMeta={formMeta.fields.topFieldset.fields.nestedFieldset.fields.colors[index]}\n checked={formValue.topFieldset.nestedFieldset.colors[index]}\n />\n )}\n </div>\n </div>\n </SpsFieldset>\n </SpsFieldset>\n </SpsForm>\n )\n }\n "]))),
|
|
4315
|
+
react: utils.code(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n function DemoComponent() {\n function mustSelectAColorValidator(value) {\n if (value.radio === \"b\") {\n if (value.colors.filter(Boolean).length === 0) {\n return {\n mustSelectAColor: true\n };\n }\n }\n return null;\n };\n\n const COLOR_OPTIONS = [\"Red\", \"Orange\", \"Yellow\", \"Green\", \"Blue\", \"Indigo\", \"Violet\"];\n const { formValue, formMeta, updateForm } = useSpsForm({\n topFieldset: {\n text: \"\",\n nestedFieldset: {\n radio: \"b\",\n colors: COLOR_OPTIONS.map(() => false)\n }\n }\n }, {\n \"topFieldset.nestedFieldset\": [mustSelectAColorValidator]\n });\n\n React.useEffect(() => {\n formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio.markAsDirty();\n }, [])\n\n return (\n <SpsForm formMeta={formMeta}>\n <SpsFieldset formMeta={formMeta.fields.topFieldset} legend=\"Fieldset Legend\">\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.topFieldset.fields.text}>Input</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.topFieldset.fields.text}\n value={formValue.topFieldset.text}\n placeholder=\"Enter a thing\"\n ></SpsTextInput>\n </div>\n </div>\n <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.nestedFieldset}\n legend=\"Nested Fieldset\"\n errors={() => formMeta.fields.topFieldset.fields.nestedFieldset.hasError(\"mustSelectAColor\")\n && \"If you choose Option B, you must select at least one color.\"}\n >\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio}>Radio</SpsLabel>\n <SpsRadioButton name=\"radio\" label=\"Option A\" value=\"a\"\n formMeta={formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio}\n checked={formValue.topFieldset.nestedFieldset.radio === \"a\"}\n />\n <SpsRadioButton name=\"radio\" label=\"Option B\" value=\"b\"\n formMeta={formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio}\n checked={formValue.topFieldset.nestedFieldset.radio === \"b\"}\n />\n </div>\n <div className=\"sfg-col-8\">\n <SpsLabel for={formMeta.fields.topFieldset.fields.nestedFieldset.fields.colors}>Colors</SpsLabel>\n {COLOR_OPTIONS.map((color, index) =>\n <SpsCheckbox key={index} name=\"colors\" label={color}\n formMeta={formMeta.fields.topFieldset.fields.nestedFieldset.fields.colors[index]}\n checked={formValue.topFieldset.nestedFieldset.colors[index]}\n />\n )}\n </div>\n </div>\n </SpsFieldset>\n </SpsFieldset>\n </SpsForm>\n )\n }\n "], ["\n function DemoComponent() {\n function mustSelectAColorValidator(value) {\n if (value.radio === \"b\") {\n if (value.colors.filter(Boolean).length === 0) {\n return {\n mustSelectAColor: true\n };\n }\n }\n return null;\n };\n\n const COLOR_OPTIONS = [\"Red\", \"Orange\", \"Yellow\", \"Green\", \"Blue\", \"Indigo\", \"Violet\"];\n const { formValue, formMeta, updateForm } = useSpsForm({\n topFieldset: {\n text: \"\",\n nestedFieldset: {\n radio: \"b\",\n colors: COLOR_OPTIONS.map(() => false)\n }\n }\n }, {\n \"topFieldset.nestedFieldset\": [mustSelectAColorValidator]\n });\n\n React.useEffect(() => {\n formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio.markAsDirty();\n }, [])\n\n return (\n <SpsForm formMeta={formMeta}>\n <SpsFieldset formMeta={formMeta.fields.topFieldset} legend=\"Fieldset Legend\">\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.topFieldset.fields.text}>Input</SpsLabel>\n <SpsTextInput formMeta={formMeta.fields.topFieldset.fields.text}\n value={formValue.topFieldset.text}\n placeholder=\"Enter a thing\"\n ></SpsTextInput>\n </div>\n </div>\n <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.nestedFieldset}\n legend=\"Nested Fieldset\"\n errors={() => formMeta.fields.topFieldset.fields.nestedFieldset.hasError(\"mustSelectAColor\")\n && \"If you choose Option B, you must select at least one color.\"}\n >\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio}>Radio</SpsLabel>\n <SpsRadioButton name=\"radio\" label=\"Option A\" value=\"a\"\n formMeta={formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio}\n checked={formValue.topFieldset.nestedFieldset.radio === \"a\"}\n />\n <SpsRadioButton name=\"radio\" label=\"Option B\" value=\"b\"\n formMeta={formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio}\n checked={formValue.topFieldset.nestedFieldset.radio === \"b\"}\n />\n </div>\n <div className=\"sfg-col-8\">\n <SpsLabel for={formMeta.fields.topFieldset.fields.nestedFieldset.fields.colors}>Colors</SpsLabel>\n {COLOR_OPTIONS.map((color, index) =>\n <SpsCheckbox key={index} name=\"colors\" label={color}\n formMeta={formMeta.fields.topFieldset.fields.nestedFieldset.fields.colors[index]}\n checked={formValue.topFieldset.nestedFieldset.colors[index]}\n />\n )}\n </div>\n </div>\n </SpsFieldset>\n </SpsFieldset>\n </SpsForm>\n )\n }\n "]))),
|
|
4316
4316
|
},
|
|
4317
4317
|
},
|
|
4318
4318
|
},
|
|
4319
4319
|
};
|
|
4320
|
-
var templateObject_1$
|
|
4320
|
+
var templateObject_1$F, templateObject_2$B, templateObject_3$u, templateObject_4$m, templateObject_5$f;
|
|
4321
4321
|
|
|
4322
|
-
var propsDoc$
|
|
4323
|
-
var propTypes$
|
|
4322
|
+
var propsDoc$15 = {};
|
|
4323
|
+
var propTypes$19 = __assign({}, spsGlobalPropTypes);
|
|
4324
4324
|
function SpsFocusedTaskActions(props) {
|
|
4325
4325
|
var children = props.children, className = props.className, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "unsafelyReplaceClassName"]);
|
|
4326
4326
|
var classes = clsx__default['default'](unsafelyReplaceClassName || 'sps-list-action-bar-container', 'z-stratum-bar', className);
|
|
@@ -4329,17 +4329,17 @@ function SpsFocusedTaskActions(props) {
|
|
|
4329
4329
|
React__namespace.createElement("div", { className: "sps-list-action-bar__actions" }, children))));
|
|
4330
4330
|
}
|
|
4331
4331
|
Object.assign(SpsFocusedTaskActions, {
|
|
4332
|
-
props: propsDoc$
|
|
4333
|
-
propTypes: propTypes$
|
|
4332
|
+
props: propsDoc$15,
|
|
4333
|
+
propTypes: propTypes$19,
|
|
4334
4334
|
displayName: 'SpsFocusedTaskActions',
|
|
4335
4335
|
});
|
|
4336
4336
|
|
|
4337
|
-
var propsDoc$
|
|
4337
|
+
var propsDoc$14 = {
|
|
4338
4338
|
fullWidth: 'boolean',
|
|
4339
4339
|
isOpen: 'boolean',
|
|
4340
4340
|
onClose: '() => void',
|
|
4341
4341
|
};
|
|
4342
|
-
var propTypes$
|
|
4342
|
+
var propTypes$18 = __assign(__assign({}, spsGlobalPropTypes), { fullWidth: PropTypes.bool, isOpen: PropTypes.bool, onClose: fun() });
|
|
4343
4343
|
function SpsFocusedTask(props) {
|
|
4344
4344
|
var children = props.children, className = props.className, fullWidth = props.fullWidth, isOpen = props.isOpen, onClose = props.onClose; props.title; var testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "fullWidth", "isOpen", "onClose", "title", 'data-testid', "unsafelyReplaceClassName"]);
|
|
4345
4345
|
var rootRef = React__namespace.useRef();
|
|
@@ -4362,8 +4362,8 @@ function SpsFocusedTask(props) {
|
|
|
4362
4362
|
actions));
|
|
4363
4363
|
}
|
|
4364
4364
|
Object.assign(SpsFocusedTask, {
|
|
4365
|
-
props: propsDoc$
|
|
4366
|
-
propTypes: propTypes$
|
|
4365
|
+
props: propsDoc$14,
|
|
4366
|
+
propTypes: propTypes$18,
|
|
4367
4367
|
displayName: 'SpsFocusedTask',
|
|
4368
4368
|
});
|
|
4369
4369
|
|
|
@@ -4371,15 +4371,15 @@ var SpsFocusedTaskExamples = {
|
|
|
4371
4371
|
basic: {
|
|
4372
4372
|
examples: {
|
|
4373
4373
|
basic: {
|
|
4374
|
-
react: utils.code(templateObject_1$
|
|
4374
|
+
react: utils.code(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n function SpsFocusedTaskBasic() {\n const [showFocusedTask, setShowFocusedTask] = React.useState(false);\n\n function onClose() {\n setShowFocusedTask(false);\n console.log(\"onClose called\");\n }\n\n function onFormSubmit() {\n setShowFocusedTask(false);\n }\n\n return (\n <>\n <SpsButton onClick={() => setShowFocusedTask(true)}>\n Open Focused Task\n </SpsButton>\n <SpsFocusedTask isOpen={showFocusedTask} onClose={onClose}>\n <h2>Focused Task</h2>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-3\"></div>\n <div className=\"sfg-col-6\">\n <SpsCard>\n <i>pretend there's a form here</i>\n </SpsCard>\n </div>\n <div className=\"sfg-col-3\"></div>\n </div>\n <SpsFocusedTaskActions>\n <SpsButton kind=\"confirm\" onClick={onFormSubmit}>\n Submit\n </SpsButton>\n </SpsFocusedTaskActions>\n </SpsFocusedTask>\n </>\n );\n }\n "], ["\n function SpsFocusedTaskBasic() {\n const [showFocusedTask, setShowFocusedTask] = React.useState(false);\n\n function onClose() {\n setShowFocusedTask(false);\n console.log(\"onClose called\");\n }\n\n function onFormSubmit() {\n setShowFocusedTask(false);\n }\n\n return (\n <>\n <SpsButton onClick={() => setShowFocusedTask(true)}>\n Open Focused Task\n </SpsButton>\n <SpsFocusedTask isOpen={showFocusedTask} onClose={onClose}>\n <h2>Focused Task</h2>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-3\"></div>\n <div className=\"sfg-col-6\">\n <SpsCard>\n <i>pretend there's a form here</i>\n </SpsCard>\n </div>\n <div className=\"sfg-col-3\"></div>\n </div>\n <SpsFocusedTaskActions>\n <SpsButton kind=\"confirm\" onClick={onFormSubmit}>\n Submit\n </SpsButton>\n </SpsFocusedTaskActions>\n </SpsFocusedTask>\n </>\n );\n }\n "]))),
|
|
4375
4375
|
},
|
|
4376
4376
|
fullWidth: {
|
|
4377
|
-
react: utils.code(templateObject_2$
|
|
4377
|
+
react: utils.code(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n function SpsFocusedTaskFullWidth() {\n const [showFocusedTask, setShowFocusedTask] = React.useState(false);\n\n function onClose() {\n setShowFocusedTask(false);\n console.log(\"onClose called\");\n }\n\n function onFormSubmit() {\n setShowFocusedTask(false);\n }\n\n return (\n <>\n <SpsButton onClick={() => setShowFocusedTask(true)}>\n Open Focused Task\n </SpsButton>\n <SpsFocusedTask fullWidth isOpen={showFocusedTask} onClose={onClose}>\n <h2>Focused Task</h2>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-3\"></div>\n <div className=\"sfg-col-6\">\n <SpsCard>\n <i>pretend there's a form here</i>\n </SpsCard>\n </div>\n <div className=\"sfg-col-3\"></div>\n </div>\n <SpsFocusedTaskActions>\n <SpsButton kind=\"confirm\" onClick={onFormSubmit}>\n Submit\n </SpsButton>\n </SpsFocusedTaskActions>\n </SpsFocusedTask>\n </>\n );\n }\n "], ["\n function SpsFocusedTaskFullWidth() {\n const [showFocusedTask, setShowFocusedTask] = React.useState(false);\n\n function onClose() {\n setShowFocusedTask(false);\n console.log(\"onClose called\");\n }\n\n function onFormSubmit() {\n setShowFocusedTask(false);\n }\n\n return (\n <>\n <SpsButton onClick={() => setShowFocusedTask(true)}>\n Open Focused Task\n </SpsButton>\n <SpsFocusedTask fullWidth isOpen={showFocusedTask} onClose={onClose}>\n <h2>Focused Task</h2>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-3\"></div>\n <div className=\"sfg-col-6\">\n <SpsCard>\n <i>pretend there's a form here</i>\n </SpsCard>\n </div>\n <div className=\"sfg-col-3\"></div>\n </div>\n <SpsFocusedTaskActions>\n <SpsButton kind=\"confirm\" onClick={onFormSubmit}>\n Submit\n </SpsButton>\n </SpsFocusedTaskActions>\n </SpsFocusedTask>\n </>\n );\n }\n "]))),
|
|
4378
4378
|
},
|
|
4379
4379
|
},
|
|
4380
4380
|
},
|
|
4381
4381
|
};
|
|
4382
|
-
var templateObject_1$
|
|
4382
|
+
var templateObject_1$E, templateObject_2$A;
|
|
4383
4383
|
|
|
4384
4384
|
var OnBlurErrorKeys = new Set();
|
|
4385
4385
|
|
|
@@ -5695,7 +5695,7 @@ var SpsFormExamples = {
|
|
|
5695
5695
|
description: '',
|
|
5696
5696
|
examples: {
|
|
5697
5697
|
basic: {
|
|
5698
|
-
react: utils.code(templateObject_1$
|
|
5698
|
+
react: utils.code(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n function DemoComponent() {\n const COLOR_OPTIONS = [\"red\", \"blue\", \"green\"];\n const initValue = {\n name: \"Foo\",\n color: COLOR_OPTIONS[0],\n };\n const { formValue, formMeta, updateForm } = useSpsForm(initValue, {\n \"name\": value => value.color === COLOR_OPTIONS[0] ? [SpsValidators.required] : []\n });\n\n function handleSubmit() {\n console.log(\"submit\", formValue);\n }\n function reset() {\n updateForm(initValue);\n }\n\n return <>\n <SpsForm formMeta={formMeta} onSubmit={handleSubmit}>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-8\">\n <SpsLabel for={formMeta.fields.name}>Name</SpsLabel>\n <SpsTextInput\n value={formValue.name}\n formMeta={formMeta.fields.name}\n />\n </div>\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.color}>Color</SpsLabel>\n {COLOR_OPTIONS.map(color =>\n <SpsRadioButton key={color} name={color} value={color} label={color}\n checked={color === formValue.color}\n formMeta={formMeta.fields.color}\n />\n )}\n </div>\n </div>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-12\">\n <SpsButton className=\"mr-1\" onClick={reset}>Reset</SpsButton>\n <SpsButton type={ButtonType.SUBMIT} kind={ButtonKind.CONFIRM}>Submit</SpsButton>\n </div>\n </div>\n </SpsForm>\n <br/>\n {JSON.stringify(formValue)}\n </>;\n }\n "], ["\n function DemoComponent() {\n const COLOR_OPTIONS = [\"red\", \"blue\", \"green\"];\n const initValue = {\n name: \"Foo\",\n color: COLOR_OPTIONS[0],\n };\n const { formValue, formMeta, updateForm } = useSpsForm(initValue, {\n \"name\": value => value.color === COLOR_OPTIONS[0] ? [SpsValidators.required] : []\n });\n\n function handleSubmit() {\n console.log(\"submit\", formValue);\n }\n function reset() {\n updateForm(initValue);\n }\n\n return <>\n <SpsForm formMeta={formMeta} onSubmit={handleSubmit}>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-8\">\n <SpsLabel for={formMeta.fields.name}>Name</SpsLabel>\n <SpsTextInput\n value={formValue.name}\n formMeta={formMeta.fields.name}\n />\n </div>\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.color}>Color</SpsLabel>\n {COLOR_OPTIONS.map(color =>\n <SpsRadioButton key={color} name={color} value={color} label={color}\n checked={color === formValue.color}\n formMeta={formMeta.fields.color}\n />\n )}\n </div>\n </div>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-12\">\n <SpsButton className=\"mr-1\" onClick={reset}>Reset</SpsButton>\n <SpsButton type={ButtonType.SUBMIT} kind={ButtonKind.CONFIRM}>Submit</SpsButton>\n </div>\n </div>\n </SpsForm>\n <br/>\n {JSON.stringify(formValue)}\n </>;\n }\n "]))),
|
|
5699
5699
|
},
|
|
5700
5700
|
},
|
|
5701
5701
|
},
|
|
@@ -5704,7 +5704,7 @@ var SpsFormExamples = {
|
|
|
5704
5704
|
description: '',
|
|
5705
5705
|
examples: {
|
|
5706
5706
|
array: {
|
|
5707
|
-
react: utils.code(templateObject_2$
|
|
5707
|
+
react: utils.code(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n function DemoComponent() {\n const initValue = {\n itemList: [\"foo\"],\n }\n const { formValue, formMeta, updateForm } = useSpsForm(initValue, {\n \"itemList.*\": [SpsValidators.required],\n })\n\n function handleSubmit() {\n console.log(\"submit\", formValue)\n }\n function reset() {\n updateForm(initValue)\n }\n\n function addItem() {\n updateForm({\n ...formValue,\n itemList: [...formValue.itemList, \"\"],\n })\n }\n function removeItem(index) {\n updateForm({\n ...formValue,\n itemList: formValue.itemList.filter((_, i) => index !== i),\n })\n }\n\n return (\n <>\n <SpsForm formMeta={formMeta} onSubmit={handleSubmit}>\n {formValue.itemList.map((item, index) => (\n <div className=\"sfg-row\" key={index}>\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.itemList.fields[index]}>\n Item\n </SpsLabel>\n <SpsTextInput\n value={item}\n formMeta={formMeta.fields.itemList.fields[index]}\n />\n </div>\n <div className=\"sfg-col-1\">\n <SpsButton\n kind={ButtonKind.ICON}\n icon={SpsIcon.TRASH}\n className=\"sps-label-spacing\"\n onClick={() => removeItem(index)}\n />\n </div>\n </div>\n ))}\n <div className=\"sfg-row\">\n <div className=\"sfg-col-12\">\n <SpsButton\n className=\"mr-1\"\n kind={ButtonKind.KEY}\n icon={SpsIcon.PLUS_SIGN}\n onClick={addItem}\n >\n Add Item\n </SpsButton>\n <SpsButton className=\"mr-1\" onClick={reset}>\n Reset\n </SpsButton>\n <SpsButton\n type={ButtonType.SUBMIT}\n kind={ButtonKind.CONFIRM}\n >\n Submit\n </SpsButton>\n </div>\n </div>\n </SpsForm>\n <br />\n {JSON.stringify(formValue)}\n </>\n )\n }\n "], ["\n function DemoComponent() {\n const initValue = {\n itemList: [\"foo\"],\n }\n const { formValue, formMeta, updateForm } = useSpsForm(initValue, {\n \"itemList.*\": [SpsValidators.required],\n })\n\n function handleSubmit() {\n console.log(\"submit\", formValue)\n }\n function reset() {\n updateForm(initValue)\n }\n\n function addItem() {\n updateForm({\n ...formValue,\n itemList: [...formValue.itemList, \"\"],\n })\n }\n function removeItem(index) {\n updateForm({\n ...formValue,\n itemList: formValue.itemList.filter((_, i) => index !== i),\n })\n }\n\n return (\n <>\n <SpsForm formMeta={formMeta} onSubmit={handleSubmit}>\n {formValue.itemList.map((item, index) => (\n <div className=\"sfg-row\" key={index}>\n <div className=\"sfg-col-4\">\n <SpsLabel for={formMeta.fields.itemList.fields[index]}>\n Item\n </SpsLabel>\n <SpsTextInput\n value={item}\n formMeta={formMeta.fields.itemList.fields[index]}\n />\n </div>\n <div className=\"sfg-col-1\">\n <SpsButton\n kind={ButtonKind.ICON}\n icon={SpsIcon.TRASH}\n className=\"sps-label-spacing\"\n onClick={() => removeItem(index)}\n />\n </div>\n </div>\n ))}\n <div className=\"sfg-row\">\n <div className=\"sfg-col-12\">\n <SpsButton\n className=\"mr-1\"\n kind={ButtonKind.KEY}\n icon={SpsIcon.PLUS_SIGN}\n onClick={addItem}\n >\n Add Item\n </SpsButton>\n <SpsButton className=\"mr-1\" onClick={reset}>\n Reset\n </SpsButton>\n <SpsButton\n type={ButtonType.SUBMIT}\n kind={ButtonKind.CONFIRM}\n >\n Submit\n </SpsButton>\n </div>\n </div>\n </SpsForm>\n <br />\n {JSON.stringify(formValue)}\n </>\n )\n }\n "]))),
|
|
5708
5708
|
},
|
|
5709
5709
|
},
|
|
5710
5710
|
},
|
|
@@ -5713,19 +5713,19 @@ var SpsFormExamples = {
|
|
|
5713
5713
|
description: '',
|
|
5714
5714
|
examples: {
|
|
5715
5715
|
basic: {
|
|
5716
|
-
react: utils.code(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n function DemoComponent() {\n const initValue = {\n name: \"Foo\",\n }\n const { formValue, formMeta, updateForm } = useSpsForm(initValue)\n\n function handleFieldsetToggle(enabled) {\n if (enabled) {\n updateForm({\n ...formValue,\n other_stuff: {\n tagline: \"\",\n description: \"\",\n },\n })\n } else {\n updateForm(omit(formValue, \"other_stuff\"))\n }\n }\n\n function handleSubmit() {\n console.log(\"submit\", formValue)\n }\n function reset() {\n updateForm(initValue)\n }\n\n return (\n <>\n <SpsForm formMeta={formMeta} onSubmit={handleSubmit}>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-8\">\n <SpsLabel for={formMeta.fields.name}>Name</SpsLabel>\n <SpsTextInput\n value={formValue.name}\n formMeta={formMeta.fields.name}\n />\n </div>\n <div className=\"sfg-col-4\"></div>\n </div>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-12\">\n <SpsFieldset\n optional\n enabled={formMeta.fields.other_stuff}\n formMeta={formMeta.fields.other_stuff}\n onToggled={handleFieldsetToggle}\n legend=\"Other Stuff\"\n >\n {formMeta.fields.other_stuff && (\n <>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-12\">\n <SpsLabel\n for={formMeta.fields.other_stuff.fields.tagline}\n >\n Tagline\n </SpsLabel>\n <SpsTextInput\n value={formValue.other_stuff.tagline}\n formMeta={formMeta.fields.other_stuff.fields.tagline}\n />\n </div>\n </div>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-12\">\n <SpsLabel\n for={formMeta.fields.other_stuff.fields.description}\n >\n Description\n </SpsLabel>\n <SpsTextInput\n value={formValue.other_stuff.description}\n formMeta={\n formMeta.fields.other_stuff.fields.description\n }\n />\n </div>\n </div>\n </>\n )}\n </SpsFieldset>\n </div>\n </div>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-12\">\n <SpsButton className=\"mr-1\" onClick={reset}>\n Reset\n </SpsButton>\n <SpsButton\n type={ButtonType.SUBMIT}\n kind={ButtonKind.CONFIRM}\n >\n Submit\n </SpsButton>\n </div>\n </div>\n </SpsForm>\n <br />\n {JSON.stringify(formValue)}\n </>\n )\n }\n "], ["\n function DemoComponent() {\n const initValue = {\n name: \"Foo\",\n }\n const { formValue, formMeta, updateForm } = useSpsForm(initValue)\n\n function handleFieldsetToggle(enabled) {\n if (enabled) {\n updateForm({\n ...formValue,\n other_stuff: {\n tagline: \"\",\n description: \"\",\n },\n })\n } else {\n updateForm(omit(formValue, \"other_stuff\"))\n }\n }\n\n function handleSubmit() {\n console.log(\"submit\", formValue)\n }\n function reset() {\n updateForm(initValue)\n }\n\n return (\n <>\n <SpsForm formMeta={formMeta} onSubmit={handleSubmit}>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-8\">\n <SpsLabel for={formMeta.fields.name}>Name</SpsLabel>\n <SpsTextInput\n value={formValue.name}\n formMeta={formMeta.fields.name}\n />\n </div>\n <div className=\"sfg-col-4\"></div>\n </div>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-12\">\n <SpsFieldset\n optional\n enabled={formMeta.fields.other_stuff}\n formMeta={formMeta.fields.other_stuff}\n onToggled={handleFieldsetToggle}\n legend=\"Other Stuff\"\n >\n {formMeta.fields.other_stuff && (\n <>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-12\">\n <SpsLabel\n for={formMeta.fields.other_stuff.fields.tagline}\n >\n Tagline\n </SpsLabel>\n <SpsTextInput\n value={formValue.other_stuff.tagline}\n formMeta={formMeta.fields.other_stuff.fields.tagline}\n />\n </div>\n </div>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-12\">\n <SpsLabel\n for={formMeta.fields.other_stuff.fields.description}\n >\n Description\n </SpsLabel>\n <SpsTextInput\n value={formValue.other_stuff.description}\n formMeta={\n formMeta.fields.other_stuff.fields.description\n }\n />\n </div>\n </div>\n </>\n )}\n </SpsFieldset>\n </div>\n </div>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-12\">\n <SpsButton className=\"mr-1\" onClick={reset}>\n Reset\n </SpsButton>\n <SpsButton\n type={ButtonType.SUBMIT}\n kind={ButtonKind.CONFIRM}\n >\n Submit\n </SpsButton>\n </div>\n </div>\n </SpsForm>\n <br />\n {JSON.stringify(formValue)}\n </>\n )\n }\n "]))),
|
|
5716
|
+
react: utils.code(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n function DemoComponent() {\n const initValue = {\n name: \"Foo\",\n }\n const { formValue, formMeta, updateForm } = useSpsForm(initValue)\n\n function handleFieldsetToggle(enabled) {\n if (enabled) {\n updateForm({\n ...formValue,\n other_stuff: {\n tagline: \"\",\n description: \"\",\n },\n })\n } else {\n updateForm(omit(formValue, \"other_stuff\"))\n }\n }\n\n function handleSubmit() {\n console.log(\"submit\", formValue)\n }\n function reset() {\n updateForm(initValue)\n }\n\n return (\n <>\n <SpsForm formMeta={formMeta} onSubmit={handleSubmit}>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-8\">\n <SpsLabel for={formMeta.fields.name}>Name</SpsLabel>\n <SpsTextInput\n value={formValue.name}\n formMeta={formMeta.fields.name}\n />\n </div>\n <div className=\"sfg-col-4\"></div>\n </div>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-12\">\n <SpsFieldset\n optional\n enabled={formMeta.fields.other_stuff}\n formMeta={formMeta.fields.other_stuff}\n onToggled={handleFieldsetToggle}\n legend=\"Other Stuff\"\n >\n {formMeta.fields.other_stuff && (\n <>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-12\">\n <SpsLabel\n for={formMeta.fields.other_stuff.fields.tagline}\n >\n Tagline\n </SpsLabel>\n <SpsTextInput\n value={formValue.other_stuff.tagline}\n formMeta={formMeta.fields.other_stuff.fields.tagline}\n />\n </div>\n </div>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-12\">\n <SpsLabel\n for={formMeta.fields.other_stuff.fields.description}\n >\n Description\n </SpsLabel>\n <SpsTextInput\n value={formValue.other_stuff.description}\n formMeta={\n formMeta.fields.other_stuff.fields.description\n }\n />\n </div>\n </div>\n </>\n )}\n </SpsFieldset>\n </div>\n </div>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-12\">\n <SpsButton className=\"mr-1\" onClick={reset}>\n Reset\n </SpsButton>\n <SpsButton\n type={ButtonType.SUBMIT}\n kind={ButtonKind.CONFIRM}\n >\n Submit\n </SpsButton>\n </div>\n </div>\n </SpsForm>\n <br />\n {JSON.stringify(formValue)}\n </>\n )\n }\n "], ["\n function DemoComponent() {\n const initValue = {\n name: \"Foo\",\n }\n const { formValue, formMeta, updateForm } = useSpsForm(initValue)\n\n function handleFieldsetToggle(enabled) {\n if (enabled) {\n updateForm({\n ...formValue,\n other_stuff: {\n tagline: \"\",\n description: \"\",\n },\n })\n } else {\n updateForm(omit(formValue, \"other_stuff\"))\n }\n }\n\n function handleSubmit() {\n console.log(\"submit\", formValue)\n }\n function reset() {\n updateForm(initValue)\n }\n\n return (\n <>\n <SpsForm formMeta={formMeta} onSubmit={handleSubmit}>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-8\">\n <SpsLabel for={formMeta.fields.name}>Name</SpsLabel>\n <SpsTextInput\n value={formValue.name}\n formMeta={formMeta.fields.name}\n />\n </div>\n <div className=\"sfg-col-4\"></div>\n </div>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-12\">\n <SpsFieldset\n optional\n enabled={formMeta.fields.other_stuff}\n formMeta={formMeta.fields.other_stuff}\n onToggled={handleFieldsetToggle}\n legend=\"Other Stuff\"\n >\n {formMeta.fields.other_stuff && (\n <>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-12\">\n <SpsLabel\n for={formMeta.fields.other_stuff.fields.tagline}\n >\n Tagline\n </SpsLabel>\n <SpsTextInput\n value={formValue.other_stuff.tagline}\n formMeta={formMeta.fields.other_stuff.fields.tagline}\n />\n </div>\n </div>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-12\">\n <SpsLabel\n for={formMeta.fields.other_stuff.fields.description}\n >\n Description\n </SpsLabel>\n <SpsTextInput\n value={formValue.other_stuff.description}\n formMeta={\n formMeta.fields.other_stuff.fields.description\n }\n />\n </div>\n </div>\n </>\n )}\n </SpsFieldset>\n </div>\n </div>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-12\">\n <SpsButton className=\"mr-1\" onClick={reset}>\n Reset\n </SpsButton>\n <SpsButton\n type={ButtonType.SUBMIT}\n kind={ButtonKind.CONFIRM}\n >\n Submit\n </SpsButton>\n </div>\n </div>\n </SpsForm>\n <br />\n {JSON.stringify(formValue)}\n </>\n )\n }\n "]))),
|
|
5717
5717
|
},
|
|
5718
5718
|
},
|
|
5719
5719
|
},
|
|
5720
5720
|
};
|
|
5721
|
-
var templateObject_1$
|
|
5721
|
+
var templateObject_1$D, templateObject_2$z, templateObject_3$t;
|
|
5722
5722
|
|
|
5723
5723
|
var SpsAddRemoveFormRowExamples = {
|
|
5724
5724
|
ideal: {
|
|
5725
5725
|
label: 'Ideal',
|
|
5726
5726
|
examples: {
|
|
5727
5727
|
ideal: {
|
|
5728
|
-
react: utils.code(templateObject_1$
|
|
5728
|
+
react: utils.code(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n function DemoComponent() {\n const initValue = {\n names: [\"Foo\"],\n }\n const { formValue, formMeta, updateForm } = useSpsForm(initValue, {\n \"names.*\": [SpsValidators.required]\n });\n\n function addName() {\n updateForm({ names: [...formValue.names, \"\"] })\n }\n\n function removeName(index) {\n updateForm({\n names: formValue.names.filter((_, i) => i !== index),\n })\n }\n\n function reset() {\n updateForm(initValue)\n }\n\n return (\n <>\n <SpsForm formMeta={formMeta}>\n {formMeta.fields.names.fields.map((meta, i) => (\n <div className=\"sfg-row\" key={i}>\n <div className=\"sfg-col-6\">\n <SpsLabel for={meta}>Name</SpsLabel>\n <div className=\"d-flex align-items-center\">\n <SpsTextInput\n value={formValue.names[i]}\n formMeta={meta}\n className=\"flex-grow-1 mr-2\"\n />\n <SpsButton kind={ButtonKind.ICON}\n icon={SpsIcon.X}\n onClick={() => removeName(i)}\n />\n </div>\n </div>\n </div>\n ))}\n <div className=\"sfg-row\">\n <div className=\"sfg-col-12\">\n <SpsButton\n kind={ButtonKind.LINK}\n icon={SpsIcon.PLUS_SIGN}\n onClick={addName}\n >\n Add Another\n </SpsButton>\n </div>\n </div>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-12\">\n <SpsButton onClick={reset}>Reset</SpsButton>\n </div>\n </div>\n </SpsForm>\n <br />\n {JSON.stringify(formValue)}\n </>\n )\n }\n "], ["\n function DemoComponent() {\n const initValue = {\n names: [\"Foo\"],\n }\n const { formValue, formMeta, updateForm } = useSpsForm(initValue, {\n \"names.*\": [SpsValidators.required]\n });\n\n function addName() {\n updateForm({ names: [...formValue.names, \"\"] })\n }\n\n function removeName(index) {\n updateForm({\n names: formValue.names.filter((_, i) => i !== index),\n })\n }\n\n function reset() {\n updateForm(initValue)\n }\n\n return (\n <>\n <SpsForm formMeta={formMeta}>\n {formMeta.fields.names.fields.map((meta, i) => (\n <div className=\"sfg-row\" key={i}>\n <div className=\"sfg-col-6\">\n <SpsLabel for={meta}>Name</SpsLabel>\n <div className=\"d-flex align-items-center\">\n <SpsTextInput\n value={formValue.names[i]}\n formMeta={meta}\n className=\"flex-grow-1 mr-2\"\n />\n <SpsButton kind={ButtonKind.ICON}\n icon={SpsIcon.X}\n onClick={() => removeName(i)}\n />\n </div>\n </div>\n </div>\n ))}\n <div className=\"sfg-row\">\n <div className=\"sfg-col-12\">\n <SpsButton\n kind={ButtonKind.LINK}\n icon={SpsIcon.PLUS_SIGN}\n onClick={addName}\n >\n Add Another\n </SpsButton>\n </div>\n </div>\n <div className=\"sfg-row\">\n <div className=\"sfg-col-12\">\n <SpsButton onClick={reset}>Reset</SpsButton>\n </div>\n </div>\n </SpsForm>\n <br />\n {JSON.stringify(formValue)}\n </>\n )\n }\n "]))),
|
|
5729
5729
|
},
|
|
5730
5730
|
},
|
|
5731
5731
|
},
|
|
@@ -5733,21 +5733,21 @@ var SpsAddRemoveFormRowExamples = {
|
|
|
5733
5733
|
label: 'Alternate',
|
|
5734
5734
|
examples: {
|
|
5735
5735
|
alternate: {
|
|
5736
|
-
react: utils.code(templateObject_2$
|
|
5736
|
+
react: utils.code(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n function DemoComponent() {\n const initValue = {\n names: [\"Foo\"],\n }\n const { formValue, formMeta, updateForm } = useSpsForm(initValue, {\n \"names.*\": [SpsValidators.required]\n })\n\n function addName() {\n updateForm({ names: [...formValue.names, \"\"] })\n }\n\n function removeName(index) {\n updateForm({\n names: formValue.names.filter((_, i) => i !== index),\n })\n }\n\n function reset() {\n updateForm(initValue)\n }\n\n return (\n <>\n <SpsForm formMeta={formMeta}>\n {formMeta.fields.names.fields.map((meta, i) => (\n <div className=\"sfg-row\" key={i}>\n <div className=\"sfg-col-6\">\n <SpsLabel for={meta}>Name</SpsLabel>\n <div className=\"d-flex align-items-center\">\n <SpsTextInput\n value={formValue.names[i]}\n formMeta={meta}\n className=\"flex-grow-1 mr-2\"\n />\n <SpsIconButtonPanel>\n <SpsButton\n kind={ButtonKind.ICON}\n icon={SpsIcon.X}\n onClick={() => removeName(i)}\n disabled={formMeta.fields.names.fields.length === 1}\n />\n <SpsButton\n kind={ButtonKind.ICON}\n icon={SpsIcon.PLUS_SIGN}\n onClick={addName}\n disabled={i < formMeta.fields.names.fields.length - 1}\n />\n </SpsIconButtonPanel>\n </div>\n </div>\n </div>\n ))}\n <div className=\"sfg-row\">\n <div className=\"sfg-col-12\">\n <SpsButton onClick={reset}>Reset</SpsButton>\n </div>\n </div>\n </SpsForm>\n <br />\n {JSON.stringify(formValue)}\n </>\n )\n }\n "], ["\n function DemoComponent() {\n const initValue = {\n names: [\"Foo\"],\n }\n const { formValue, formMeta, updateForm } = useSpsForm(initValue, {\n \"names.*\": [SpsValidators.required]\n })\n\n function addName() {\n updateForm({ names: [...formValue.names, \"\"] })\n }\n\n function removeName(index) {\n updateForm({\n names: formValue.names.filter((_, i) => i !== index),\n })\n }\n\n function reset() {\n updateForm(initValue)\n }\n\n return (\n <>\n <SpsForm formMeta={formMeta}>\n {formMeta.fields.names.fields.map((meta, i) => (\n <div className=\"sfg-row\" key={i}>\n <div className=\"sfg-col-6\">\n <SpsLabel for={meta}>Name</SpsLabel>\n <div className=\"d-flex align-items-center\">\n <SpsTextInput\n value={formValue.names[i]}\n formMeta={meta}\n className=\"flex-grow-1 mr-2\"\n />\n <SpsIconButtonPanel>\n <SpsButton\n kind={ButtonKind.ICON}\n icon={SpsIcon.X}\n onClick={() => removeName(i)}\n disabled={formMeta.fields.names.fields.length === 1}\n />\n <SpsButton\n kind={ButtonKind.ICON}\n icon={SpsIcon.PLUS_SIGN}\n onClick={addName}\n disabled={i < formMeta.fields.names.fields.length - 1}\n />\n </SpsIconButtonPanel>\n </div>\n </div>\n </div>\n ))}\n <div className=\"sfg-row\">\n <div className=\"sfg-col-12\">\n <SpsButton onClick={reset}>Reset</SpsButton>\n </div>\n </div>\n </SpsForm>\n <br />\n {JSON.stringify(formValue)}\n </>\n )\n }\n "]))),
|
|
5737
5737
|
},
|
|
5738
5738
|
},
|
|
5739
5739
|
},
|
|
5740
5740
|
};
|
|
5741
|
-
var templateObject_1$
|
|
5741
|
+
var templateObject_1$C, templateObject_2$y;
|
|
5742
5742
|
|
|
5743
|
-
var propsDoc$
|
|
5743
|
+
var propsDoc$13 = {
|
|
5744
5744
|
imgSrc: 'string',
|
|
5745
5745
|
kind: 'GrowlerKind',
|
|
5746
5746
|
onClose: '() => void',
|
|
5747
5747
|
persist: 'boolean',
|
|
5748
5748
|
title: 'string',
|
|
5749
5749
|
};
|
|
5750
|
-
var propTypes$
|
|
5750
|
+
var propTypes$17 = __assign(__assign({}, spsGlobalPropTypes), { imgSrc: PropTypes.string, kind: enumValue(dsShared.GrowlerKind), onClose: fun(), persist: PropTypes.bool, title: PropTypes.string });
|
|
5751
5751
|
function SpsGrowler(props) {
|
|
5752
5752
|
var children = props.children, className = props.className, imgSrc = props.imgSrc, _a = props.kind, kind = _a === void 0 ? dsShared.GrowlerKind.INFO : _a, onClose = props.onClose, persist = props.persist, title = props.title, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "imgSrc", "kind", "onClose", "persist", "title", "unsafelyReplaceClassName"]);
|
|
5753
5753
|
var closeCallback = React__namespace.useRef(onClose);
|
|
@@ -5827,8 +5827,8 @@ function SpsGrowler(props) {
|
|
|
5827
5827
|
React__namespace.createElement("i", { className: "sps-icon sps-icon-x", title: t('design-system:growler.dismiss') })))));
|
|
5828
5828
|
}
|
|
5829
5829
|
Object.assign(SpsGrowler, {
|
|
5830
|
-
props: propsDoc$
|
|
5831
|
-
propTypes: propTypes$
|
|
5830
|
+
props: propsDoc$13,
|
|
5831
|
+
propTypes: propTypes$17,
|
|
5832
5832
|
displayName: 'SpsGrowler',
|
|
5833
5833
|
});
|
|
5834
5834
|
|
|
@@ -5860,11 +5860,11 @@ var SpsGrowlerExamples = {
|
|
|
5860
5860
|
examples: {
|
|
5861
5861
|
primary: {
|
|
5862
5862
|
description: 'Primary Message Only',
|
|
5863
|
-
react: utils.code(templateObject_1$
|
|
5863
|
+
react: utils.code(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n function SpsGrowlerError() {\n const [growl, setGrowl] = React.useState(false);\n\n return (\n <>\n <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n Show Growler\n </SpsButton>\n {growl && (\n <SpsGrowler\n kind={GrowlerKind.ERROR}\n onClose={() => {\n console.log(\"Growler closed.\");\n setGrowl(false);\n }}\n title=\"Document ABC123 has not been sent.\"\n />\n )}\n </>\n );\n }\n "], ["\n import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n function SpsGrowlerError() {\n const [growl, setGrowl] = React.useState(false);\n\n return (\n <>\n <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n Show Growler\n </SpsButton>\n {growl && (\n <SpsGrowler\n kind={GrowlerKind.ERROR}\n onClose={() => {\n console.log(\"Growler closed.\");\n setGrowl(false);\n }}\n title=\"Document ABC123 has not been sent.\"\n />\n )}\n </>\n );\n }\n "]))),
|
|
5864
5864
|
},
|
|
5865
5865
|
primaryAndSecondary: {
|
|
5866
5866
|
description: 'Primary and Secondary Messages',
|
|
5867
|
-
react: utils.code(templateObject_2$
|
|
5867
|
+
react: utils.code(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n function SpsGrowlerError() {\n const [growl, setGrowl] = React.useState(false);\n\n return (\n <>\n <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n Show Growler\n </SpsButton>\n {growl && (\n <SpsGrowler\n kind={GrowlerKind.ERROR}\n onClose={() => {\n console.log(\"Growler closed.\");\n setGrowl(false);\n }}\n title=\"Document ABC123 has not been sent.\"\n >\n Check the form and try sending it again.\n </SpsGrowler>\n )}\n </>\n );\n }\n "], ["\n import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n function SpsGrowlerError() {\n const [growl, setGrowl] = React.useState(false);\n\n return (\n <>\n <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n Show Growler\n </SpsButton>\n {growl && (\n <SpsGrowler\n kind={GrowlerKind.ERROR}\n onClose={() => {\n console.log(\"Growler closed.\");\n setGrowl(false);\n }}\n title=\"Document ABC123 has not been sent.\"\n >\n Check the form and try sending it again.\n </SpsGrowler>\n )}\n </>\n );\n }\n "]))),
|
|
5868
5868
|
},
|
|
5869
5869
|
},
|
|
5870
5870
|
},
|
|
@@ -5875,10 +5875,10 @@ var SpsGrowlerExamples = {
|
|
|
5875
5875
|
React__namespace.createElement("p", null, "Unacceptable message: No access tonight."))); },
|
|
5876
5876
|
examples: {
|
|
5877
5877
|
primary: {
|
|
5878
|
-
react: utils.code(templateObject_3$
|
|
5878
|
+
react: utils.code(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n function SpsGrowlerInfo() {\n const [growl, setGrowl] = React.useState(false);\n\n return (\n <>\n <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n Show Growler\n </SpsButton>\n {growl && (\n <SpsGrowler\n kind={GrowlerKind.INFO}\n onClose={() => {\n console.log(\"Growler closed.\");\n setGrowl(false);\n }}\n title=\"System maintenance tonight from 9-11pm CST.\"\n />\n )}\n </>\n );\n }\n "], ["\n import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n function SpsGrowlerInfo() {\n const [growl, setGrowl] = React.useState(false);\n\n return (\n <>\n <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n Show Growler\n </SpsButton>\n {growl && (\n <SpsGrowler\n kind={GrowlerKind.INFO}\n onClose={() => {\n console.log(\"Growler closed.\");\n setGrowl(false);\n }}\n title=\"System maintenance tonight from 9-11pm CST.\"\n />\n )}\n </>\n );\n }\n "]))),
|
|
5879
5879
|
},
|
|
5880
5880
|
primaryAndSecondary: {
|
|
5881
|
-
react: utils.code(templateObject_4$
|
|
5881
|
+
react: utils.code(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n function SpsGrowlerInfo() {\n const [growl, setGrowl] = React.useState(false);\n\n return (\n <>\n <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n Show Growler\n </SpsButton>\n {growl && (\n <SpsGrowler\n kind={GrowlerKind.INFO}\n onClose={() => {\n console.log(\"Growler closed.\");\n setGrowl(false);\n }}\n title=\"System maintenance notice\"\n >\n We'll be offline tonight from 9-11pm CST.\n </SpsGrowler>\n )}\n </>\n );\n }\n "], ["\n import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n function SpsGrowlerInfo() {\n const [growl, setGrowl] = React.useState(false);\n\n return (\n <>\n <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n Show Growler\n </SpsButton>\n {growl && (\n <SpsGrowler\n kind={GrowlerKind.INFO}\n onClose={() => {\n console.log(\"Growler closed.\");\n setGrowl(false);\n }}\n title=\"System maintenance notice\"\n >\n We'll be offline tonight from 9-11pm CST.\n </SpsGrowler>\n )}\n </>\n );\n }\n "]))),
|
|
5882
5882
|
},
|
|
5883
5883
|
},
|
|
5884
5884
|
},
|
|
@@ -5890,11 +5890,11 @@ var SpsGrowlerExamples = {
|
|
|
5890
5890
|
examples: {
|
|
5891
5891
|
primary: {
|
|
5892
5892
|
description: 'Primary Message Only',
|
|
5893
|
-
react: utils.code(templateObject_5$
|
|
5893
|
+
react: utils.code(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n function SpsGrowlerProgress() {\n const [growl, setGrowl] = React.useState(false);\n\n return (\n <>\n <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n Show Growler\n </SpsButton>\n {growl && (\n <SpsGrowler\n kind={GrowlerKind.PROGRESS}\n onClose={() => {\n console.log(\"Growler closed.\");\n setGrowl(false);\n }}\n title=\"Export in progress.\"\n />\n )}\n </>\n );\n }\n "], ["\n import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n function SpsGrowlerProgress() {\n const [growl, setGrowl] = React.useState(false);\n\n return (\n <>\n <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n Show Growler\n </SpsButton>\n {growl && (\n <SpsGrowler\n kind={GrowlerKind.PROGRESS}\n onClose={() => {\n console.log(\"Growler closed.\");\n setGrowl(false);\n }}\n title=\"Export in progress.\"\n />\n )}\n </>\n );\n }\n "]))),
|
|
5894
5894
|
},
|
|
5895
5895
|
primaryAndSecondary: {
|
|
5896
5896
|
description: 'Primary and Secondary Messages',
|
|
5897
|
-
react: utils.code(templateObject_6$
|
|
5897
|
+
react: utils.code(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n function SpsGrowlerProgress() {\n const [growl, setGrowl] = React.useState(false);\n\n return (\n <>\n <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n Show Growler\n </SpsButton>\n {growl && (\n <SpsGrowler\n kind={GrowlerKind.PROGRESS}\n onClose={() => {\n console.log(\"Growler closed.\");\n setGrowl(false);\n }}\n title=\"Export in progress\"\n >\n We'll let you know when it's done.\n </SpsGrowler>\n )}\n </>\n );\n }\n "], ["\n import { SpsButton, SpsGrowler } from \"@spscommerce/ds-react\";\n import { ButtonKind, GrowlerKind } from \"@spscommerce/ds-shared\";\n\n function SpsGrowlerProgress() {\n const [growl, setGrowl] = React.useState(false);\n\n return (\n <>\n <SpsButton kind={ButtonKind.LINK} onClick={() => setGrowl(true)} disabled={growl}>\n Show Growler\n </SpsButton>\n {growl && (\n <SpsGrowler\n kind={GrowlerKind.PROGRESS}\n onClose={() => {\n console.log(\"Growler closed.\");\n setGrowl(false);\n }}\n title=\"Export in progress\"\n >\n We'll let you know when it's done.\n </SpsGrowler>\n )}\n </>\n );\n }\n "]))),
|
|
5898
5898
|
},
|
|
5899
5899
|
},
|
|
5900
5900
|
},
|
|
@@ -5944,16 +5944,16 @@ var SpsGrowlerExamples = {
|
|
|
5944
5944
|
},
|
|
5945
5945
|
},
|
|
5946
5946
|
};
|
|
5947
|
-
var templateObject_1$
|
|
5947
|
+
var templateObject_1$B, templateObject_2$x, templateObject_3$s, templateObject_4$l, templateObject_5$e, templateObject_6$b, templateObject_7$9, templateObject_8$8, templateObject_9$5, templateObject_10$4, templateObject_11$3;
|
|
5948
5948
|
|
|
5949
|
-
var propsDoc$
|
|
5949
|
+
var propsDoc$12 = {
|
|
5950
5950
|
disabled: 'boolean',
|
|
5951
5951
|
min: 'number',
|
|
5952
5952
|
max: 'number',
|
|
5953
5953
|
step: 'number',
|
|
5954
5954
|
onValueChange: '(newValue: number) => void',
|
|
5955
5955
|
};
|
|
5956
|
-
var propTypes$
|
|
5956
|
+
var propTypes$16 = __assign({ disabled: PropTypes.bool, min: PropTypes.number, max: PropTypes.number, step: PropTypes.number, onValueChange: fun() }, spsGlobalPropTypes);
|
|
5957
5957
|
function SpsIncrementor(props) {
|
|
5958
5958
|
var disabled = props.disabled, min = props.min, max = props.max, _a = props.step, step = _a === void 0 ? 1 : _a, onValueChange = props.onValueChange, unsafelyReplaceClassName = props.unsafelyReplaceClassName, className = props.className, testId = props["data-testid"], rest = __rest(props, ["disabled", "min", "max", "step", "onValueChange", "unsafelyReplaceClassName", "className", 'data-testid']);
|
|
5959
5959
|
var _b = __read(React__namespace.useState(min || 0), 2), value = _b[0], setValue = _b[1];
|
|
@@ -6013,8 +6013,8 @@ function SpsIncrementor(props) {
|
|
|
6013
6013
|
React__namespace.createElement("i", { className: "sps-icon sps-icon-plus-sign", "aria-hidden": "true" })))));
|
|
6014
6014
|
}
|
|
6015
6015
|
Object.assign(SpsIncrementor, {
|
|
6016
|
-
props: propsDoc$
|
|
6017
|
-
propTypes: propTypes$
|
|
6016
|
+
props: propsDoc$12,
|
|
6017
|
+
propTypes: propTypes$16,
|
|
6018
6018
|
displayName: 'SpsIncrementor',
|
|
6019
6019
|
});
|
|
6020
6020
|
|
|
@@ -6024,12 +6024,116 @@ var SpsIncrementorExamples = {
|
|
|
6024
6024
|
description: 'info about incrementor',
|
|
6025
6025
|
examples: {
|
|
6026
6026
|
stacked: {
|
|
6027
|
-
react: utils.code(templateObject_1$
|
|
6027
|
+
react: utils.code(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n function Component () {\n const [value, setValue] = React.useState(\"\");\n const handleChange = val => {\n setValue(val);\n };\n return (\n <React.Fragment>\n <SpsIncrementor\n min={0}\n max={10}\n step={2}\n id=\"basicIncrementor\"\n onValueChange={handleChange}\n />\n Value: {value}\n </React.Fragment>\n );\n }\n "], ["\n function Component () {\n const [value, setValue] = React.useState(\"\");\n const handleChange = val => {\n setValue(val);\n };\n return (\n <React.Fragment>\n <SpsIncrementor\n min={0}\n max={10}\n step={2}\n id=\"basicIncrementor\"\n onValueChange={handleChange}\n />\n Value: {value}\n </React.Fragment>\n );\n }\n "]))),
|
|
6028
|
+
},
|
|
6029
|
+
},
|
|
6030
|
+
},
|
|
6031
|
+
};
|
|
6032
|
+
var templateObject_1$A;
|
|
6033
|
+
|
|
6034
|
+
__assign({}, spsGlobalPropTypes);
|
|
6035
|
+
function SpsInsights(props) {
|
|
6036
|
+
var children = props.children;
|
|
6037
|
+
return React__namespace.createElement("div", { className: "insight-tile-wrapper" }, children);
|
|
6038
|
+
}
|
|
6039
|
+
|
|
6040
|
+
var propsDoc$11 = {
|
|
6041
|
+
horizontal: 'boolean',
|
|
6042
|
+
icon: 'SpsIcon',
|
|
6043
|
+
kind: 'SpsInsightTileKind',
|
|
6044
|
+
title: 'string',
|
|
6045
|
+
metric: 'number',
|
|
6046
|
+
partnerCount: 'number',
|
|
6047
|
+
totalPartners: 'number',
|
|
6048
|
+
};
|
|
6049
|
+
var propTypes$15 = __assign(__assign({}, spsGlobalPropTypes), { horizontal: PropTypes.bool, icon: enumValue(dsShared.SpsIcon), kind: enumValue(dsShared.SpsInsightTileKind), title: PropTypes.string, metric: PropTypes.number, partnerCount: PropTypes.number, totalPartners: PropTypes.number });
|
|
6050
|
+
function SpsInsightTile(props) {
|
|
6051
|
+
var children = props.children, className = props.className, _a = props.horizontal, horizontal = _a === void 0 ? false : _a, icon = props.icon, _b = props.kind, kind = _b === void 0 ? 'general' : _b, title = props.title, metric = props.metric, partnerCount = props.partnerCount, totalPartners = props.totalPartners, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "horizontal", "icon", "kind", "title", "metric", "partnerCount", "totalPartners", "unsafelyReplaceClassName"]);
|
|
6052
|
+
var classes = clsx__default['default'](unsafelyReplaceClassName || 'sps-insight-tile', "sps-insight-tile--" + kind, className, horizontal && 'sps-insight-tile--horizontal', children && 'sps-insight-tile--has-detail');
|
|
6053
|
+
var t = React__namespace.useContext(I18nContext).t;
|
|
6054
|
+
var _c = __read((partnerCount
|
|
6055
|
+
? t('design-system:insightTile.partnerCount', {
|
|
6056
|
+
count: partnerCount,
|
|
6057
|
+
total: totalPartners,
|
|
6058
|
+
})
|
|
6059
|
+
: '').split('|'), 3), count = _c[0], ofText = _c[1], total = _c[2];
|
|
6060
|
+
return (React__namespace.createElement(React__namespace.Fragment, null,
|
|
6061
|
+
React__namespace.createElement("div", __assign({ className: classes }, rest),
|
|
6062
|
+
React__namespace.createElement("div", { className: "sps-insight-tile__body" },
|
|
6063
|
+
icon ? (React__namespace.createElement("i", { className: "sps-icon sps-icon-" + icon })) : (React__namespace.createElement("i", { className: "sps-icon sps-icon-" + dsShared.SpsInsightTileIcons[kind] })),
|
|
6064
|
+
metric && React__namespace.createElement("div", { className: "sps-insight-tile__metric-count" }, metric),
|
|
6065
|
+
title && (React__namespace.createElement("div", { className: "sps-insight-tile__description" },
|
|
6066
|
+
React__namespace.createElement("div", { className: "sps-insight-tile__title",
|
|
6067
|
+
// Both Chrome & FF ignore -webkit-box-orient
|
|
6068
|
+
// in the actual CSS for some reason
|
|
6069
|
+
// Also the TS types don't think -webkit-box-orient
|
|
6070
|
+
// is a real CSS property
|
|
6071
|
+
style: { '-webkit-box-orient': 'vertical' } }, title),
|
|
6072
|
+
React__namespace.createElement("div", { className: "sps-insight-tile__detail" }, children)))),
|
|
6073
|
+
partnerCount && (React__namespace.createElement("div", { className: "sps-insight-tile__partner-count" },
|
|
6074
|
+
partnerCount === totalPartners ? (React__namespace.createElement("div", null, t('design-system:insightTile.all'))) : (React__namespace.createElement(React__namespace.Fragment, null,
|
|
6075
|
+
React__namespace.createElement("div", null, count),
|
|
6076
|
+
React__namespace.createElement("div", null, ofText),
|
|
6077
|
+
React__namespace.createElement("div", null, total))),
|
|
6078
|
+
React__namespace.createElement("div", { className: "sps-insight-tile__partners-text" }, t('design-system:insightTile.partners')))))));
|
|
6079
|
+
}
|
|
6080
|
+
Object.assign(SpsInsightTile, {
|
|
6081
|
+
props: propsDoc$11,
|
|
6082
|
+
propTypes: propTypes$15,
|
|
6083
|
+
displayName: 'SpsInsightTile',
|
|
6084
|
+
});
|
|
6085
|
+
|
|
6086
|
+
var SpsInsightTileExamples = {
|
|
6087
|
+
basic: {
|
|
6088
|
+
label: 'Basic Insight Tiles',
|
|
6089
|
+
examples: {
|
|
6090
|
+
basic: {
|
|
6091
|
+
jsx: utils.code(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n <SpsInsights>\n <SpsInsightTile\n kind={SpsInsightCardKind.GENERAL}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.PROCESSING}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.SUCCESS}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.WARNING}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.ERROR}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n />\n </SpsInsights>\n "], ["\n <SpsInsights>\n <SpsInsightTile\n kind={SpsInsightCardKind.GENERAL}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.PROCESSING}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.SUCCESS}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.WARNING}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.ERROR}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n />\n </SpsInsights>\n "]))),
|
|
6092
|
+
},
|
|
6093
|
+
},
|
|
6094
|
+
},
|
|
6095
|
+
details: {
|
|
6096
|
+
label: 'With Details',
|
|
6097
|
+
examples: {
|
|
6098
|
+
details: {
|
|
6099
|
+
jsx: utils.code(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n <SpsInsights>\n <SpsInsightTile\n kind={SpsInsightCardKind.GENERAL}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </SpsInsightTile>\n <SpsInsightTile\n kind={SpsInsightCardKind.PROCESSING}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </SpsInsightTile>\n <SpsInsightTile\n kind={SpsInsightCardKind.SUCCESS}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </SpsInsightTile>\n <SpsInsightTile\n kind={SpsInsightCardKind.WARNING}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </SpsInsightTile>\n <SpsInsightTile\n kind={SpsInsightCardKind.ERROR}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </SpsInsightTile>\n <SpsInsightTile\n kind={SpsInsightCardKind.SUCCESS}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </SpsInsightTile>\n <SpsInsightTile\n kind={SpsInsightCardKind.ERROR}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </SpsInsightTile>\n </SpsInsights>\n "], ["\n <SpsInsights>\n <SpsInsightTile\n kind={SpsInsightCardKind.GENERAL}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </SpsInsightTile>\n <SpsInsightTile\n kind={SpsInsightCardKind.PROCESSING}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </SpsInsightTile>\n <SpsInsightTile\n kind={SpsInsightCardKind.SUCCESS}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </SpsInsightTile>\n <SpsInsightTile\n kind={SpsInsightCardKind.WARNING}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </SpsInsightTile>\n <SpsInsightTile\n kind={SpsInsightCardKind.ERROR}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </SpsInsightTile>\n <SpsInsightTile\n kind={SpsInsightCardKind.SUCCESS}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </SpsInsightTile>\n <SpsInsightTile\n kind={SpsInsightCardKind.ERROR}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </SpsInsightTile>\n </SpsInsights>\n "]))),
|
|
6100
|
+
},
|
|
6101
|
+
},
|
|
6102
|
+
},
|
|
6103
|
+
partnerCount: {
|
|
6104
|
+
label: 'Partner Count',
|
|
6105
|
+
examples: {
|
|
6106
|
+
partnerCount: {
|
|
6107
|
+
jsx: utils.code(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n <SpsInsights>\n <SpsInsightTile\n kind={SpsInsightCardKind.GENERAL}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n partnerCount=\"250\"\n totalPartners=\"250\"\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.PROCESSING}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n partnerCount=\"122\"\n totalPartners=\"250\"\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.SUCCESS}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n partnerCount=\"207\"\n totalPartners=\"250\"\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.WARNING}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n partnerCount=\"12\"\n totalPartners=\"250\"\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.ERROR}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n partnerCount=\"94\"\n totalPartners=\"250\"\n />\n </SpsInsights>\n "], ["\n <SpsInsights>\n <SpsInsightTile\n kind={SpsInsightCardKind.GENERAL}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n partnerCount=\"250\"\n totalPartners=\"250\"\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.PROCESSING}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n partnerCount=\"122\"\n totalPartners=\"250\"\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.SUCCESS}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n partnerCount=\"207\"\n totalPartners=\"250\"\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.WARNING}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n partnerCount=\"12\"\n totalPartners=\"250\"\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.ERROR}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n partnerCount=\"94\"\n totalPartners=\"250\"\n />\n </SpsInsights>\n "]))),
|
|
6108
|
+
},
|
|
6109
|
+
},
|
|
6110
|
+
},
|
|
6111
|
+
clickHandler: {
|
|
6112
|
+
label: 'Adding a click handler',
|
|
6113
|
+
examples: {
|
|
6114
|
+
clickHandler: {
|
|
6115
|
+
jsx: utils.code(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n <SpsInsights>\n <SpsInsightTile\n kind={SpsInsightCardKind.GENERAL}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n onClick={() => console.log(\"insight tile 1 clicked!\")}\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.GENERAL}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n onClick={() => console.log(\"insight tile 2 clicked!\")}\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.GENERAL}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n onClick={() => console.log(\"insight tile 3 clicked!\")}\n />\n </SpsInsights>\n "], ["\n <SpsInsights>\n <SpsInsightTile\n kind={SpsInsightCardKind.GENERAL}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n onClick={() => console.log(\"insight tile 1 clicked!\")}\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.GENERAL}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n onClick={() => console.log(\"insight tile 2 clicked!\")}\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.GENERAL}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n onClick={() => console.log(\"insight tile 3 clicked!\")}\n />\n </SpsInsights>\n "]))),
|
|
6116
|
+
},
|
|
6117
|
+
},
|
|
6118
|
+
},
|
|
6119
|
+
alternateIcons: {
|
|
6120
|
+
label: 'Using alternate icons',
|
|
6121
|
+
examples: {
|
|
6122
|
+
alternateIcons: {
|
|
6123
|
+
jsx: utils.code(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n <SpsInsights>\n <SpsInsightTile\n kind={SpsInsightCardKind.GENERAL}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n icon={SpsIcon.USER}\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.PROCESSING}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n icon={SpsIcon.ASTERISK}\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.SUCCESS}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n icon={SpsIcon.DOLLAR_SIGN}\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.WARNING}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n icon={SpsIcon.FOLDER_OPEN}\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.ERROR}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n icon={SpsIcon.BAN}\n />\n </SpsInsights>\n "], ["\n <SpsInsights>\n <SpsInsightTile\n kind={SpsInsightCardKind.GENERAL}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n icon={SpsIcon.USER}\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.PROCESSING}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n icon={SpsIcon.ASTERISK}\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.SUCCESS}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n icon={SpsIcon.DOLLAR_SIGN}\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.WARNING}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n icon={SpsIcon.FOLDER_OPEN}\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.ERROR}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n icon={SpsIcon.BAN}\n />\n </SpsInsights>\n "]))),
|
|
6124
|
+
},
|
|
6125
|
+
},
|
|
6126
|
+
},
|
|
6127
|
+
horizontal: {
|
|
6128
|
+
label: 'Horizontal',
|
|
6129
|
+
examples: {
|
|
6130
|
+
horizontal: {
|
|
6131
|
+
jsx: utils.code(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n <SpsInsights>\n <SpsInsightTile\n kind={SpsInsightCardKind.GENERAL}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n horizontal\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </SpsInsightTile>\n <SpsInsightTile\n kind={SpsInsightCardKind.PROCESSING}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n horizontal\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.SUCCESS}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n horizontal\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </SpsInsightTile>\n <SpsInsightTile\n kind={SpsInsightCardKind.WARNING}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n horizontal\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.ERROR}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n horizontal\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </SpsInsightTile>\n </SpsInsights>\n "], ["\n <SpsInsights>\n <SpsInsightTile\n kind={SpsInsightCardKind.GENERAL}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n horizontal\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </SpsInsightTile>\n <SpsInsightTile\n kind={SpsInsightCardKind.PROCESSING}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n horizontal\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.SUCCESS}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n horizontal\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </SpsInsightTile>\n <SpsInsightTile\n kind={SpsInsightCardKind.WARNING}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n horizontal\n />\n <SpsInsightTile\n kind={SpsInsightCardKind.ERROR}\n metric=\"1234\"\n title=\"Insight Tile Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n horizontal\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </SpsInsightTile>\n </SpsInsights>\n "]))),
|
|
6028
6132
|
},
|
|
6029
6133
|
},
|
|
6030
6134
|
},
|
|
6031
6135
|
};
|
|
6032
|
-
var templateObject_1$z;
|
|
6136
|
+
var templateObject_1$z, templateObject_2$w, templateObject_3$r, templateObject_4$k, templateObject_5$d, templateObject_6$a;
|
|
6033
6137
|
|
|
6034
6138
|
var propsDoc$10 = {
|
|
6035
6139
|
inline: 'boolean',
|
|
@@ -10530,6 +10634,10 @@ var MANIFEST = {
|
|
|
10530
10634
|
components: [SpsIncrementor],
|
|
10531
10635
|
examples: SpsIncrementorExamples,
|
|
10532
10636
|
},
|
|
10637
|
+
'Insight Tiles': {
|
|
10638
|
+
components: [SpsInsights, SpsInsightTile],
|
|
10639
|
+
examples: SpsInsightTileExamples,
|
|
10640
|
+
},
|
|
10533
10641
|
'Key Value Lists': {
|
|
10534
10642
|
components: [SpsKeyValueList, SpsKeyValueListItem],
|
|
10535
10643
|
examples: SpsKeyValueListExamples,
|
|
@@ -14802,6 +14910,8 @@ exports.SpsIconButtonPanel = SpsIconButtonPanel;
|
|
|
14802
14910
|
exports.SpsIncrementor = SpsIncrementor;
|
|
14803
14911
|
exports.SpsIncrementorExamples = SpsIncrementorExamples;
|
|
14804
14912
|
exports.SpsInputGroup = SpsInputGroup;
|
|
14913
|
+
exports.SpsInsightTile = SpsInsightTile;
|
|
14914
|
+
exports.SpsInsights = SpsInsights;
|
|
14805
14915
|
exports.SpsKeyValueList = SpsKeyValueList;
|
|
14806
14916
|
exports.SpsKeyValueListExamples = SpsKeyValueListExamples;
|
|
14807
14917
|
exports.SpsKeyValueListItem = SpsKeyValueListItem;
|