@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.esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import React__default, { useRef, useEffect, createContext, useContext, useMemo, useReducer, useCallback, useState, useLayoutEffect as useLayoutEffect$1 } from 'react';
|
|
3
|
-
import { noI18nI18n, ButtonKind, ButtonType, SpsIcon as SpsIcon$1, Position, ZStratum, SpsOptionListOption, DropdownKind, SPS_ACTION_DEFAULTS, TagKind, ClickableTagKind, MultiSelectTagKind, SpsIconSize, SelectMode, TooltipKind, TooltipShowTrigger, TOOLTIP_HIDE_DELAY_MS_DEFAULT, FeedbackBlockKind, FeedbackBlockIcons, GrowlerKind, GrowlerIcon, GROWLER_VISIBLE_DURATION_MS, GROWLER_FADEOUT_DURATION_MS, SortDirection, ModalKind, ModalSize, DEFAULT_PAGE_SIZE_OPTIONS, SpinnerSize, StdButtonKind, SpsTaskStatus, TASK_QUEUE_NOTIFICATION_DURATION_MS, SpsTaskStatusIcons, RingSize, WizardSubstepConditions } from '@spscommerce/ds-shared';
|
|
3
|
+
import { noI18nI18n, ButtonKind, ButtonType, SpsIcon as SpsIcon$1, Position, ZStratum, SpsOptionListOption, DropdownKind, SPS_ACTION_DEFAULTS, TagKind, ClickableTagKind, MultiSelectTagKind, SpsIconSize, SelectMode, TooltipKind, TooltipShowTrigger, TOOLTIP_HIDE_DELAY_MS_DEFAULT, FeedbackBlockKind, FeedbackBlockIcons, GrowlerKind, GrowlerIcon, GROWLER_VISIBLE_DURATION_MS, GROWLER_FADEOUT_DURATION_MS, SpsInsightTileKind, SpsInsightTileIcons, SortDirection, ModalKind, ModalSize, DEFAULT_PAGE_SIZE_OPTIONS, SpinnerSize, StdButtonKind, SpsTaskStatus, TASK_QUEUE_NOTIFICATION_DURATION_MS, SpsTaskStatusIcons, RingSize, WizardSubstepConditions } from '@spscommerce/ds-shared';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { values, code, debounce, flatten, deepFreeze, setPath, diff, DiffChange, getPath, crumblePath, traversePath, forEachNestedObject, lockToAnimationFrames, constrain } from '@spscommerce/utils';
|
|
6
6
|
import * as PropTypes from 'prop-types';
|
|
@@ -178,7 +178,7 @@ var spsGlobalPropTypes = {
|
|
|
178
178
|
|
|
179
179
|
var I18nContext = React.createContext(noI18nI18n);
|
|
180
180
|
|
|
181
|
-
var propsDoc$
|
|
181
|
+
var propsDoc$1w = {
|
|
182
182
|
disabled: 'boolean',
|
|
183
183
|
href: 'string',
|
|
184
184
|
icon: 'SpsIcon',
|
|
@@ -187,7 +187,7 @@ var propsDoc$1v = {
|
|
|
187
187
|
spinningTitle: 'string',
|
|
188
188
|
type: 'ButtonType',
|
|
189
189
|
};
|
|
190
|
-
var propTypes$
|
|
190
|
+
var propTypes$1B = __assign(__assign({}, spsGlobalPropTypes), { disabled: bool, href: string, icon: enumValue(SpsIcon$1), kind: enumValue(ButtonKind), spinning: bool, spinningTitle: string, type: enumValue(ButtonType) });
|
|
191
191
|
function SpsButton(props) {
|
|
192
192
|
var children = props.children, className = props.className, href = props.href, icon = props.icon, _a = props.kind, kind = _a === void 0 ? ButtonKind.DEFAULT : _a, spinning = props.spinning, spinningTitle = props.spinningTitle, _b = props.type, type = _b === void 0 ? ButtonType.BUTTON : _b, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "href", "icon", "kind", "spinning", "spinningTitle", "type", "unsafelyReplaceClassName"]);
|
|
193
193
|
var disabled = props.disabled;
|
|
@@ -211,8 +211,8 @@ function SpsButton(props) {
|
|
|
211
211
|
spinner))));
|
|
212
212
|
}
|
|
213
213
|
Object.assign(SpsButton, {
|
|
214
|
-
props: propsDoc$
|
|
215
|
-
propTypes: propTypes$
|
|
214
|
+
props: propsDoc$1w,
|
|
215
|
+
propTypes: propTypes$1B,
|
|
216
216
|
displayName: 'SpsButton',
|
|
217
217
|
});
|
|
218
218
|
|
|
@@ -249,8 +249,8 @@ function contentOf(nodeOrRenderFn) {
|
|
|
249
249
|
: nodeOrRenderFn;
|
|
250
250
|
}
|
|
251
251
|
|
|
252
|
-
var propsDoc$
|
|
253
|
-
var propTypes$
|
|
252
|
+
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 } });
|
|
253
|
+
var propTypes$1A = __assign(__assign(__assign({}, spsGlobalPropTypes), spsFormPropTypes), { controlsDisabled: bool, footerLinks: nodeOrRenderFn, formArray: impl(), formGroup: impl(), formMeta: oneOfType([
|
|
254
254
|
impl(),
|
|
255
255
|
impl(),
|
|
256
256
|
]), isOpen: bool, onClear: fun(), onSubmit: fun(), pinned: bool });
|
|
@@ -276,8 +276,8 @@ function SpsAdvancedSearch(props) {
|
|
|
276
276
|
React.createElement(SpsButton, { kind: ButtonKind.KEY, type: ButtonType.SUBMIT, disabled: controlsDisabled }, t('design-system:advancedSearch.search')))))));
|
|
277
277
|
}
|
|
278
278
|
Object.assign(SpsAdvancedSearch, {
|
|
279
|
-
props: propsDoc$
|
|
280
|
-
propTypes: propTypes$
|
|
279
|
+
props: propsDoc$1v,
|
|
280
|
+
propTypes: propTypes$1A,
|
|
281
281
|
displayName: 'SpsAdvancedSearch',
|
|
282
282
|
});
|
|
283
283
|
|
|
@@ -286,7 +286,7 @@ var SpsAdvancedSearchExamples = {
|
|
|
286
286
|
label: 'Basic Usage',
|
|
287
287
|
examples: {
|
|
288
288
|
basic: {
|
|
289
|
-
react: 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 "]))),
|
|
289
|
+
react: 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 "]))),
|
|
290
290
|
},
|
|
291
291
|
},
|
|
292
292
|
},
|
|
@@ -294,30 +294,30 @@ var SpsAdvancedSearchExamples = {
|
|
|
294
294
|
label: 'Disabling the Clear/Search Buttons',
|
|
295
295
|
examples: {
|
|
296
296
|
disabledButtons: {
|
|
297
|
-
react: code(templateObject_2$
|
|
297
|
+
react: 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 "]))),
|
|
298
298
|
},
|
|
299
299
|
},
|
|
300
300
|
},
|
|
301
301
|
c_footerLink: {
|
|
302
302
|
label: 'Footer Link',
|
|
303
|
-
description: code(templateObject_3$
|
|
303
|
+
description: 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 "]))),
|
|
304
304
|
examples: {
|
|
305
305
|
footerLink: {
|
|
306
|
-
react: code(templateObject_4$
|
|
306
|
+
react: 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 "]))),
|
|
307
307
|
},
|
|
308
308
|
},
|
|
309
309
|
},
|
|
310
310
|
d_withTitle: {
|
|
311
311
|
label: 'Title Bar With No List Toolbar Search',
|
|
312
|
-
description: code(templateObject_5$
|
|
312
|
+
description: 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 "]))),
|
|
313
313
|
examples: {
|
|
314
314
|
withTitle: {
|
|
315
|
-
react: code(templateObject_6$
|
|
315
|
+
react: 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 "]))),
|
|
316
316
|
},
|
|
317
317
|
},
|
|
318
318
|
},
|
|
319
319
|
};
|
|
320
|
-
var templateObject_1$
|
|
320
|
+
var templateObject_1$T, templateObject_2$O, templateObject_3$G, templateObject_4$x, templateObject_5$p, templateObject_6$k;
|
|
321
321
|
|
|
322
322
|
function useElementId(id) {
|
|
323
323
|
return useRef(id || nanoid());
|
|
@@ -600,7 +600,7 @@ var searchableOptionListProps = {
|
|
|
600
600
|
searchDebounce: number,
|
|
601
601
|
searchPlaceholder: string,
|
|
602
602
|
};
|
|
603
|
-
var propTypes$
|
|
603
|
+
var propTypes$1z = __assign(__assign(__assign(__assign({}, spsGlobalPropTypes), spsOptionListPassthroughProps.propTypes), searchableOptionListProps), { attachTo: ref().isRequired, conformWidth: bool, id: string.isRequired, isOpen: bool, keepOpen: bool, keyDown: impl(), nullOption: string, offsets: arrayOf(number), onOptionListChanged: fun(), onOptionSelected: fun(), onPositionFlip: fun(), onSelfToggle: fun(), optionRole: string, positionOverride: arrayOf(enumValue(Position)), selectedOption: any, specialAction: fun(), ignoreWidthStyles: bool });
|
|
604
604
|
|
|
605
605
|
function updateOptions(props, searchState, searchStatePatch, setOptionList, setAnyOptionHasIcon) {
|
|
606
606
|
return __awaiter(this, void 0, void 0, function () {
|
|
@@ -1072,7 +1072,7 @@ var SpsOptionList = React.forwardRef(function (props, ref) {
|
|
|
1072
1072
|
React.createElement("span", null, specialAction.label)))));
|
|
1073
1073
|
});
|
|
1074
1074
|
Object.assign(SpsOptionList, {
|
|
1075
|
-
propTypes: propTypes$
|
|
1075
|
+
propTypes: propTypes$1z,
|
|
1076
1076
|
displayName: 'SpsOptionList',
|
|
1077
1077
|
});
|
|
1078
1078
|
|
|
@@ -1211,7 +1211,7 @@ function useInputPopup(rootRef, popupRef, formMeta) {
|
|
|
1211
1211
|
};
|
|
1212
1212
|
}
|
|
1213
1213
|
|
|
1214
|
-
var propsDoc$
|
|
1214
|
+
var propsDoc$1u = {
|
|
1215
1215
|
debounce: 'number',
|
|
1216
1216
|
disabled: 'boolean',
|
|
1217
1217
|
formMeta: 'SpsFormFieldMeta<string>',
|
|
@@ -1226,7 +1226,7 @@ var propsDoc$1t = {
|
|
|
1226
1226
|
value: 'string',
|
|
1227
1227
|
zeroState: 'string',
|
|
1228
1228
|
};
|
|
1229
|
-
var propTypes$
|
|
1229
|
+
var propTypes$1y = __assign(__assign({}, spsGlobalPropTypes), { debounce: number, disabled: bool, formControl: impl(), formMeta: impl(), icon: enumValue(SpsIcon$1), onChange: fun(), placeholder: string, suggestions: oneOfType([
|
|
1230
1230
|
arrayOf(string),
|
|
1231
1231
|
instanceOf(Promise),
|
|
1232
1232
|
fun(),
|
|
@@ -1294,8 +1294,8 @@ function SpsAutocomplete(_a) {
|
|
|
1294
1294
|
React.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 })));
|
|
1295
1295
|
}
|
|
1296
1296
|
Object.assign(SpsAutocomplete, {
|
|
1297
|
-
props: propsDoc$
|
|
1298
|
-
propTypes: propTypes$
|
|
1297
|
+
props: propsDoc$1u,
|
|
1298
|
+
propTypes: propTypes$1y,
|
|
1299
1299
|
displayName: 'SpsAutocomplete',
|
|
1300
1300
|
});
|
|
1301
1301
|
|
|
@@ -1304,13 +1304,13 @@ var SpsAutocompleteExamples = {
|
|
|
1304
1304
|
label: 'Basic',
|
|
1305
1305
|
examples: {
|
|
1306
1306
|
basic: {
|
|
1307
|
-
react: code(templateObject_1$
|
|
1307
|
+
react: 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 "]))),
|
|
1308
1308
|
},
|
|
1309
1309
|
disabled: {
|
|
1310
|
-
jsx: code(templateObject_2$
|
|
1310
|
+
jsx: 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 "]))),
|
|
1311
1311
|
},
|
|
1312
1312
|
form: {
|
|
1313
|
-
react: code(templateObject_3$
|
|
1313
|
+
react: 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 "]))),
|
|
1314
1314
|
},
|
|
1315
1315
|
},
|
|
1316
1316
|
},
|
|
@@ -1318,20 +1318,20 @@ var SpsAutocompleteExamples = {
|
|
|
1318
1318
|
label: 'Async Autocomplete',
|
|
1319
1319
|
examples: {
|
|
1320
1320
|
func: {
|
|
1321
|
-
react: code(templateObject_4$
|
|
1321
|
+
react: 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 "]))),
|
|
1322
1322
|
},
|
|
1323
1323
|
debounce: {
|
|
1324
|
-
react: code(templateObject_5$
|
|
1324
|
+
react: 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 "]))),
|
|
1325
1325
|
},
|
|
1326
1326
|
promise: {
|
|
1327
|
-
react: code(templateObject_6$
|
|
1327
|
+
react: 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 "]))),
|
|
1328
1328
|
},
|
|
1329
1329
|
},
|
|
1330
1330
|
},
|
|
1331
1331
|
};
|
|
1332
|
-
var templateObject_1$
|
|
1332
|
+
var templateObject_1$S, templateObject_2$N, templateObject_3$F, templateObject_4$w, templateObject_5$o, templateObject_6$j;
|
|
1333
1333
|
|
|
1334
|
-
var propsDoc$
|
|
1334
|
+
var propsDoc$1t = {
|
|
1335
1335
|
alignLeft: 'boolean',
|
|
1336
1336
|
disabled: 'boolean',
|
|
1337
1337
|
icon: 'SpsIcon',
|
|
@@ -1344,7 +1344,7 @@ var propsDoc$1s = {
|
|
|
1344
1344
|
onOpen: '() => void',
|
|
1345
1345
|
onClose: '() => void',
|
|
1346
1346
|
};
|
|
1347
|
-
var propTypes$
|
|
1347
|
+
var propTypes$1x = __assign(__assign({}, spsGlobalPropTypes), { alignLeft: bool, disabled: bool, icon: enumValue(SpsIcon$1), kind: enumValue(DropdownKind), label: string,
|
|
1348
1348
|
// eslint thinks there is a space between the name and open paren below for some reason
|
|
1349
1349
|
// eslint-disable-next-line no-spaced-func
|
|
1350
1350
|
options: arrayOf(oneOfType([func, any])).isRequired, spinning: bool, spinningTitle: string, tallOptionList: bool, onOpen: fun(), onClose: fun() });
|
|
@@ -1439,13 +1439,13 @@ function SpsDropdown(props) {
|
|
|
1439
1439
|
spinning && (React.createElement("div", { className: "sps-spinner", key: 1 }, spinningTitle || t('design-system:button.spinningTitle')))))));
|
|
1440
1440
|
}
|
|
1441
1441
|
Object.assign(SpsDropdown, {
|
|
1442
|
-
props: propsDoc$
|
|
1443
|
-
propTypes: propTypes$
|
|
1442
|
+
props: propsDoc$1t,
|
|
1443
|
+
propTypes: propTypes$1x,
|
|
1444
1444
|
displayName: 'SpsDropdown',
|
|
1445
1445
|
});
|
|
1446
1446
|
|
|
1447
|
-
var propsDoc$
|
|
1448
|
-
var propTypes$
|
|
1447
|
+
var propsDoc$1s = {};
|
|
1448
|
+
var propTypes$1w = __assign({}, spsGlobalPropTypes);
|
|
1449
1449
|
function SpsButtonGroup(props) {
|
|
1450
1450
|
var children = props.children, className = props.className, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "unsafelyReplaceClassName"]);
|
|
1451
1451
|
var _a = __read(selectChildren(children, [
|
|
@@ -1463,8 +1463,8 @@ function SpsButtonGroup(props) {
|
|
|
1463
1463
|
others.length > 0 && others));
|
|
1464
1464
|
}
|
|
1465
1465
|
Object.assign(SpsButtonGroup, {
|
|
1466
|
-
props: propsDoc$
|
|
1467
|
-
propTypes: propTypes$
|
|
1466
|
+
props: propsDoc$1s,
|
|
1467
|
+
propTypes: propTypes$1w,
|
|
1468
1468
|
displayName: 'SpsButtonGroup',
|
|
1469
1469
|
});
|
|
1470
1470
|
|
|
@@ -1481,15 +1481,15 @@ var SpsButtonExamples = {
|
|
|
1481
1481
|
examples: {
|
|
1482
1482
|
basic: {
|
|
1483
1483
|
description: 'Without Icons',
|
|
1484
|
-
jsx: code(templateObject_1$
|
|
1484
|
+
jsx: 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 "]))),
|
|
1485
1485
|
},
|
|
1486
1486
|
buttonsWithIcons: {
|
|
1487
1487
|
description: 'With Icons',
|
|
1488
|
-
jsx: code(templateObject_2$
|
|
1488
|
+
jsx: 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 "]))),
|
|
1489
1489
|
},
|
|
1490
1490
|
spinning: {
|
|
1491
1491
|
description: 'Spinning',
|
|
1492
|
-
jsx: code(templateObject_3$
|
|
1492
|
+
jsx: 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 "]))),
|
|
1493
1493
|
},
|
|
1494
1494
|
},
|
|
1495
1495
|
},
|
|
@@ -1499,15 +1499,15 @@ var SpsButtonExamples = {
|
|
|
1499
1499
|
examples: {
|
|
1500
1500
|
basic: {
|
|
1501
1501
|
description: 'Without Icons',
|
|
1502
|
-
jsx: code(templateObject_4$
|
|
1502
|
+
jsx: 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 "]))),
|
|
1503
1503
|
},
|
|
1504
1504
|
withIcon: {
|
|
1505
1505
|
description: 'With Icons',
|
|
1506
|
-
jsx: code(templateObject_5$
|
|
1506
|
+
jsx: 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 "]))),
|
|
1507
1507
|
},
|
|
1508
1508
|
spinning: {
|
|
1509
1509
|
description: 'Spinning',
|
|
1510
|
-
jsx: code(templateObject_6$
|
|
1510
|
+
jsx: 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 "]))),
|
|
1511
1511
|
},
|
|
1512
1512
|
},
|
|
1513
1513
|
},
|
|
@@ -1659,14 +1659,14 @@ var SpsButtonExamples = {
|
|
|
1659
1659
|
},
|
|
1660
1660
|
},
|
|
1661
1661
|
};
|
|
1662
|
-
var templateObject_1$
|
|
1662
|
+
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;
|
|
1663
1663
|
|
|
1664
|
-
var propsDoc$
|
|
1664
|
+
var propsDoc$1r = {
|
|
1665
1665
|
content: 'ReactNodeLike',
|
|
1666
1666
|
icon: 'SpsIcon',
|
|
1667
1667
|
title: 'string',
|
|
1668
1668
|
};
|
|
1669
|
-
var propTypes$
|
|
1669
|
+
var propTypes$1v = __assign(__assign({}, spsGlobalPropTypes), { content: node, icon: enumValue(SpsIcon$1), title: string });
|
|
1670
1670
|
function SpsCardHeader(props) {
|
|
1671
1671
|
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"]);
|
|
1672
1672
|
var classes = clsx(unsafelyReplaceClassName || 'sps-card__header', className);
|
|
@@ -1679,16 +1679,16 @@ function SpsCardHeader(props) {
|
|
|
1679
1679
|
React.createElement("div", { className: "sps-card__header-content" }, content)));
|
|
1680
1680
|
}
|
|
1681
1681
|
Object.assign(SpsCardHeader, {
|
|
1682
|
-
props: propsDoc$
|
|
1683
|
-
propTypes: propTypes$
|
|
1682
|
+
props: propsDoc$1r,
|
|
1683
|
+
propTypes: propTypes$1v,
|
|
1684
1684
|
displayName: 'SpsCardHeader',
|
|
1685
1685
|
});
|
|
1686
1686
|
|
|
1687
|
-
var propsDoc$
|
|
1687
|
+
var propsDoc$1q = {
|
|
1688
1688
|
icon: 'SpsIcon',
|
|
1689
1689
|
kind: 'TagKind',
|
|
1690
1690
|
};
|
|
1691
|
-
var propTypes$
|
|
1691
|
+
var propTypes$1u = __assign(__assign({}, spsGlobalPropTypes), { icon: enumValue(SpsIcon$1), kind: enumValue(TagKind) });
|
|
1692
1692
|
function SpsTag(props) {
|
|
1693
1693
|
var children = props.children, className = props.className, icon = props.icon, _a = props.kind, kind = _a === void 0 ? TagKind.DEFAULT : _a, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "icon", "kind", 'data-testid', "unsafelyReplaceClassName"]);
|
|
1694
1694
|
var title = React.Children.toArray(children)
|
|
@@ -1700,12 +1700,12 @@ function SpsTag(props) {
|
|
|
1700
1700
|
children));
|
|
1701
1701
|
}
|
|
1702
1702
|
Object.assign(SpsTag, {
|
|
1703
|
-
props: propsDoc$
|
|
1704
|
-
propTypes: propTypes$
|
|
1703
|
+
props: propsDoc$1q,
|
|
1704
|
+
propTypes: propTypes$1u,
|
|
1705
1705
|
displayName: 'SpsTag',
|
|
1706
1706
|
});
|
|
1707
1707
|
|
|
1708
|
-
var propsDoc$
|
|
1708
|
+
var propsDoc$1p = {
|
|
1709
1709
|
activateTab: 'Function',
|
|
1710
1710
|
active: 'boolean',
|
|
1711
1711
|
icon: 'SpsIcon',
|
|
@@ -1715,7 +1715,7 @@ var propsDoc$1o = {
|
|
|
1715
1715
|
tagKind: 'TagKind',
|
|
1716
1716
|
tagIcon: 'SpsIcon',
|
|
1717
1717
|
};
|
|
1718
|
-
var propTypes$
|
|
1718
|
+
var propTypes$1t = __assign(__assign({}, spsGlobalPropTypes), { activateTab: func, active: bool, icon: enumValue(SpsIcon$1), label: string, index: number, tag: string, tagKind: enumValue(TagKind), tagIcon: enumValue(SpsIcon$1) });
|
|
1719
1719
|
function SpsCardTabbedPane(props) {
|
|
1720
1720
|
var _this = this;
|
|
1721
1721
|
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"]);
|
|
@@ -1736,8 +1736,8 @@ function SpsCardTabbedPane(props) {
|
|
|
1736
1736
|
tag && React.createElement(SpsTag, { kind: tagKind || TagKind.KEY, icon: tagIcon }, tag)));
|
|
1737
1737
|
}
|
|
1738
1738
|
Object.assign(SpsCardTabbedPane, {
|
|
1739
|
-
props: propsDoc$
|
|
1740
|
-
propTypes: propTypes$
|
|
1739
|
+
props: propsDoc$1p,
|
|
1740
|
+
propTypes: propTypes$1t,
|
|
1741
1741
|
displayName: 'SpsCardTabbedPane',
|
|
1742
1742
|
});
|
|
1743
1743
|
|
|
@@ -1812,14 +1812,14 @@ function useTab$1(children, activeTab, isTabbedCard) {
|
|
|
1812
1812
|
return [currentlyActiveTab, activateTab];
|
|
1813
1813
|
}
|
|
1814
1814
|
|
|
1815
|
-
var propsDoc$
|
|
1815
|
+
var propsDoc$1o = {
|
|
1816
1816
|
activeTab: 'string',
|
|
1817
1817
|
footer: 'ReactNodeOrRenderFn',
|
|
1818
1818
|
headerContent: 'ReactNodeOrRenderFn',
|
|
1819
1819
|
headerIcon: 'SpsIcon',
|
|
1820
1820
|
headerTitle: 'string',
|
|
1821
1821
|
};
|
|
1822
|
-
var propTypes$
|
|
1822
|
+
var propTypes$1s = __assign(__assign({}, spsGlobalPropTypes), { activeTab: string, footer: nodeOrRenderFn, headerContent: nodeOrRenderFn, headerIcon: enumValue(SpsIcon$1), headerTitle: string });
|
|
1823
1823
|
function SpsCard(props) {
|
|
1824
1824
|
React.useEffect(function () {
|
|
1825
1825
|
console.log([
|
|
@@ -1850,8 +1850,8 @@ function SpsCard(props) {
|
|
|
1850
1850
|
footer && (React.createElement("div", { className: "sps-card__footer", "data-testid": testId + "__footer" }, contentOf(footer)))));
|
|
1851
1851
|
}
|
|
1852
1852
|
Object.assign(SpsCard, {
|
|
1853
|
-
props: propsDoc$
|
|
1854
|
-
propTypes: propTypes$
|
|
1853
|
+
props: propsDoc$1o,
|
|
1854
|
+
propTypes: propTypes$1s,
|
|
1855
1855
|
displayName: 'SpsCard',
|
|
1856
1856
|
});
|
|
1857
1857
|
|
|
@@ -1861,13 +1861,13 @@ var SpsCardExamples = {
|
|
|
1861
1861
|
description: '<p>Basic Cards can include any type of content, such as tables, forms, description lists, or general copy</p>',
|
|
1862
1862
|
examples: {
|
|
1863
1863
|
basic: {
|
|
1864
|
-
jsx: code(templateObject_1$
|
|
1864
|
+
jsx: 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 "]))),
|
|
1865
1865
|
},
|
|
1866
1866
|
sections: {
|
|
1867
|
-
jsx: code(templateObject_2$
|
|
1867
|
+
jsx: 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 "]))),
|
|
1868
1868
|
},
|
|
1869
1869
|
nestedSections: {
|
|
1870
|
-
jsx: code(templateObject_3$
|
|
1870
|
+
jsx: 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 "]))),
|
|
1871
1871
|
},
|
|
1872
1872
|
},
|
|
1873
1873
|
},
|
|
@@ -1876,13 +1876,13 @@ var SpsCardExamples = {
|
|
|
1876
1876
|
description: '<p>Cards requiring a descriptive title or actionable items such as buttons or links can utilize the Card Header</p>',
|
|
1877
1877
|
examples: {
|
|
1878
1878
|
title: {
|
|
1879
|
-
jsx: code(templateObject_4$
|
|
1879
|
+
jsx: 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 "]))),
|
|
1880
1880
|
},
|
|
1881
1881
|
titleAndIcon: {
|
|
1882
|
-
jsx: code(templateObject_5$
|
|
1882
|
+
jsx: 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 "]))),
|
|
1883
1883
|
},
|
|
1884
1884
|
controls: {
|
|
1885
|
-
jsx: code(templateObject_6$
|
|
1885
|
+
jsx: 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 "]))),
|
|
1886
1886
|
},
|
|
1887
1887
|
},
|
|
1888
1888
|
},
|
|
@@ -1923,9 +1923,9 @@ var SpsCardExamples = {
|
|
|
1923
1923
|
},
|
|
1924
1924
|
},
|
|
1925
1925
|
};
|
|
1926
|
-
var templateObject_1$
|
|
1926
|
+
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;
|
|
1927
1927
|
|
|
1928
|
-
var propsDoc$
|
|
1928
|
+
var propsDoc$1n = {
|
|
1929
1929
|
checked: 'boolean',
|
|
1930
1930
|
disabled: 'boolean',
|
|
1931
1931
|
formMeta: 'SpsFormFieldMeta<boolean>',
|
|
@@ -1934,7 +1934,7 @@ var propsDoc$1m = {
|
|
|
1934
1934
|
label: 'string',
|
|
1935
1935
|
onChange: 'ChangeEventHandler',
|
|
1936
1936
|
};
|
|
1937
|
-
var propTypes$
|
|
1937
|
+
var propTypes$1r = __assign(__assign({}, spsGlobalPropTypes), { checked: bool, disabled: bool, formControl: impl(), formMeta: impl(), indeterminate: bool, inline: bool, label: string, onChange: fun() });
|
|
1938
1938
|
function SpsCheckbox(_a) {
|
|
1939
1939
|
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"]);
|
|
1940
1940
|
var meta = formMeta || formControl;
|
|
@@ -1965,18 +1965,18 @@ function SpsCheckbox(_a) {
|
|
|
1965
1965
|
React.createElement("label", { className: "sps-checkable__label", htmlFor: controlId }, label || '')));
|
|
1966
1966
|
}
|
|
1967
1967
|
Object.assign(SpsCheckbox, {
|
|
1968
|
-
props: propsDoc$
|
|
1969
|
-
propTypes: propTypes$
|
|
1968
|
+
props: propsDoc$1n,
|
|
1969
|
+
propTypes: propTypes$1r,
|
|
1970
1970
|
displayName: 'SpsCheckbox',
|
|
1971
1971
|
});
|
|
1972
1972
|
|
|
1973
1973
|
var SpsCheckboxExamples = {
|
|
1974
1974
|
labels: {
|
|
1975
1975
|
label: 'Labels',
|
|
1976
|
-
description: code(templateObject_1$
|
|
1976
|
+
description: 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 "]))),
|
|
1977
1977
|
examples: {
|
|
1978
1978
|
label: {
|
|
1979
|
-
react: code(templateObject_2$
|
|
1979
|
+
react: 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 "]))),
|
|
1980
1980
|
},
|
|
1981
1981
|
},
|
|
1982
1982
|
},
|
|
@@ -1984,30 +1984,30 @@ var SpsCheckboxExamples = {
|
|
|
1984
1984
|
label: 'Disabled',
|
|
1985
1985
|
examples: {
|
|
1986
1986
|
disabled: {
|
|
1987
|
-
react: code(templateObject_3$
|
|
1987
|
+
react: 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 "]))),
|
|
1988
1988
|
},
|
|
1989
1989
|
},
|
|
1990
1990
|
},
|
|
1991
1991
|
c_noLabels: {
|
|
1992
1992
|
label: 'No Label',
|
|
1993
|
-
description: code(templateObject_4$
|
|
1993
|
+
description: 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 "]))),
|
|
1994
1994
|
examples: {
|
|
1995
1995
|
noLabels: {
|
|
1996
|
-
react: code(templateObject_5$
|
|
1996
|
+
react: 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 "]))),
|
|
1997
1997
|
},
|
|
1998
1998
|
},
|
|
1999
1999
|
},
|
|
2000
2000
|
};
|
|
2001
|
-
var templateObject_1$
|
|
2001
|
+
var templateObject_1$P, templateObject_2$K, templateObject_3$C, templateObject_4$t, templateObject_5$l;
|
|
2002
2002
|
|
|
2003
|
-
var propsDoc$
|
|
2003
|
+
var propsDoc$1m = {
|
|
2004
2004
|
disabled: 'boolean',
|
|
2005
2005
|
href: 'string',
|
|
2006
2006
|
kind: 'ClickableTagKind',
|
|
2007
2007
|
onAdd: '() => void',
|
|
2008
2008
|
onRemove: '() => void',
|
|
2009
2009
|
};
|
|
2010
|
-
var propTypes$
|
|
2010
|
+
var propTypes$1q = __assign(__assign({}, spsGlobalPropTypes), { disabled: bool, href: string, kind: enumValue(ClickableTagKind), onAdd: fun(), onRemove: fun() });
|
|
2011
2011
|
function SpsClickableTag(props) {
|
|
2012
2012
|
var children = props.children, className = props.className, disabled = props.disabled, href = props.href, _a = props.kind, kind = _a === void 0 ? 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"]);
|
|
2013
2013
|
var classes = clsx(unsafelyReplaceClassName || 'sps-clickable-tag', "sps-clickable-tag--" + kind, className, disabled && 'sps-clickable-tag--disabled', (onAdd || onRemove) && 'sps-clickable-tag--icon');
|
|
@@ -2062,8 +2062,8 @@ function SpsMultiSelectTag(props) {
|
|
|
2062
2062
|
return React.createElement(SpsClickableTag, __assign({}, clickableTagProps), children);
|
|
2063
2063
|
}
|
|
2064
2064
|
Object.assign(SpsClickableTag, {
|
|
2065
|
-
props: propsDoc$
|
|
2066
|
-
propTypes: propTypes$
|
|
2065
|
+
props: propsDoc$1m,
|
|
2066
|
+
propTypes: propTypes$1q,
|
|
2067
2067
|
displayName: 'SpsClickableTag',
|
|
2068
2068
|
});
|
|
2069
2069
|
|
|
@@ -2072,10 +2072,10 @@ var SpsClickableTagExamples = {
|
|
|
2072
2072
|
label: 'Basic',
|
|
2073
2073
|
examples: {
|
|
2074
2074
|
basic: {
|
|
2075
|
-
react: code(templateObject_1$
|
|
2075
|
+
react: 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 "]))),
|
|
2076
2076
|
},
|
|
2077
2077
|
disabled: {
|
|
2078
|
-
react: code(templateObject_2$
|
|
2078
|
+
react: 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 "]))),
|
|
2079
2079
|
},
|
|
2080
2080
|
},
|
|
2081
2081
|
},
|
|
@@ -2083,10 +2083,10 @@ var SpsClickableTagExamples = {
|
|
|
2083
2083
|
label: 'Button',
|
|
2084
2084
|
examples: {
|
|
2085
2085
|
Remove: {
|
|
2086
|
-
react: code(templateObject_3$
|
|
2086
|
+
react: 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 "]))),
|
|
2087
2087
|
},
|
|
2088
2088
|
Add: {
|
|
2089
|
-
react: code(templateObject_4$
|
|
2089
|
+
react: 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 "]))),
|
|
2090
2090
|
},
|
|
2091
2091
|
},
|
|
2092
2092
|
},
|
|
@@ -2094,17 +2094,17 @@ var SpsClickableTagExamples = {
|
|
|
2094
2094
|
label: 'Link',
|
|
2095
2095
|
examples: {
|
|
2096
2096
|
basic: {
|
|
2097
|
-
react: code(templateObject_5$
|
|
2097
|
+
react: 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 "]))),
|
|
2098
2098
|
},
|
|
2099
2099
|
button: {
|
|
2100
|
-
react: code(templateObject_6$
|
|
2100
|
+
react: 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 "]))),
|
|
2101
2101
|
},
|
|
2102
2102
|
},
|
|
2103
2103
|
},
|
|
2104
2104
|
};
|
|
2105
|
-
var templateObject_1$
|
|
2105
|
+
var templateObject_1$O, templateObject_2$J, templateObject_3$B, templateObject_4$s, templateObject_5$k, templateObject_6$g;
|
|
2106
2106
|
|
|
2107
|
-
var propsDoc$
|
|
2107
|
+
var propsDoc$1l = {
|
|
2108
2108
|
index: 'number',
|
|
2109
2109
|
key: 'string',
|
|
2110
2110
|
columnId: 'string',
|
|
@@ -2113,7 +2113,7 @@ var propsDoc$1k = {
|
|
|
2113
2113
|
onDelete: '(columnValue: string) => void',
|
|
2114
2114
|
mandatory: 'boolean',
|
|
2115
2115
|
};
|
|
2116
|
-
var propTypes$
|
|
2116
|
+
var propTypes$1p = __assign(__assign({}, spsGlobalPropTypes), { index: number, key: string, columnId: string, name: string, value: string, onDelete: fun(), mandatory: bool });
|
|
2117
2117
|
function SpsColumnChooserColumn(props) {
|
|
2118
2118
|
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"]);
|
|
2119
2119
|
var t = React.useContext(I18nContext).t;
|
|
@@ -2132,19 +2132,19 @@ function SpsColumnChooserColumn(props) {
|
|
|
2132
2132
|
} })))))); }));
|
|
2133
2133
|
}
|
|
2134
2134
|
Object.assign(SpsColumnChooserColumn, {
|
|
2135
|
-
props: propsDoc$
|
|
2136
|
-
propTypes: propTypes$
|
|
2135
|
+
props: propsDoc$1l,
|
|
2136
|
+
propTypes: propTypes$1p,
|
|
2137
2137
|
displayName: 'SpsColumnChooserColumn',
|
|
2138
2138
|
});
|
|
2139
2139
|
|
|
2140
2140
|
// TODO: Put English strings into i18n system
|
|
2141
|
-
var propsDoc$
|
|
2141
|
+
var propsDoc$1k = {
|
|
2142
2142
|
maxSelectedColumns: 'number',
|
|
2143
2143
|
unselectedColumns: 'ColumnProps[]',
|
|
2144
2144
|
selectedColumns: 'ColumnProps[]',
|
|
2145
2145
|
onApplyChanges: '(selectedColumns: ColumnProps[]) => void',
|
|
2146
2146
|
};
|
|
2147
|
-
var propTypes$
|
|
2147
|
+
var propTypes$1o = __assign(__assign({}, spsGlobalPropTypes), { maxSelectedColumns: number, unselectedColumns: array, selectedColumns: array, onApplyChanges: fun() });
|
|
2148
2148
|
function SpsColumnChooser(props) {
|
|
2149
2149
|
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"]);
|
|
2150
2150
|
var _a = __read(usePatchReducer({
|
|
@@ -2232,8 +2232,8 @@ function SpsColumnChooser(props) {
|
|
|
2232
2232
|
provided.placeholder)); }))))));
|
|
2233
2233
|
}
|
|
2234
2234
|
Object.assign(SpsColumnChooser, {
|
|
2235
|
-
props: propsDoc$
|
|
2236
|
-
propTypes: propTypes$
|
|
2235
|
+
props: propsDoc$1k,
|
|
2236
|
+
propTypes: propTypes$1o,
|
|
2237
2237
|
displayName: 'SpsColumnChooser',
|
|
2238
2238
|
});
|
|
2239
2239
|
|
|
@@ -2243,45 +2243,45 @@ var SpsColumnChooserExamples = {
|
|
|
2243
2243
|
description: 'Column chooser component',
|
|
2244
2244
|
examples: {
|
|
2245
2245
|
basic: {
|
|
2246
|
-
react: code(templateObject_1$
|
|
2246
|
+
react: 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 "]))),
|
|
2247
2247
|
},
|
|
2248
2248
|
},
|
|
2249
2249
|
},
|
|
2250
2250
|
};
|
|
2251
|
-
var templateObject_1$
|
|
2251
|
+
var templateObject_1$N;
|
|
2252
2252
|
|
|
2253
|
-
var propsDoc$
|
|
2253
|
+
var propsDoc$1j = {
|
|
2254
2254
|
icon: { type: 'SpsIcon', required: true },
|
|
2255
2255
|
size: 'SpsIconSize',
|
|
2256
2256
|
};
|
|
2257
|
-
var propTypes$
|
|
2257
|
+
var propTypes$1n = __assign(__assign({}, spsGlobalPropTypes), { icon: enumValue(SpsIcon$1).isRequired, size: enumValue(SpsIconSize) });
|
|
2258
2258
|
function SpsIcon(props) {
|
|
2259
2259
|
var className = props.className, testId = props["data-testid"], icon = props.icon, _a = props.size, size = _a === void 0 ? SpsIconSize.MEDIUM : _a, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["className", 'data-testid', "icon", "size", "unsafelyReplaceClassName"]);
|
|
2260
2260
|
var classes = clsx(unsafelyReplaceClassName || 'sps-icon', "sps-icon-" + icon, "sps-icon--" + size, className);
|
|
2261
2261
|
return React.createElement("i", __assign({ className: classes, "aria-hidden": "true", "data-testid": testId }, rest));
|
|
2262
2262
|
}
|
|
2263
2263
|
Object.assign(SpsIcon, {
|
|
2264
|
-
props: propsDoc$
|
|
2265
|
-
propTypes: propTypes$
|
|
2264
|
+
props: propsDoc$1j,
|
|
2265
|
+
propTypes: propTypes$1n,
|
|
2266
2266
|
displayName: 'SpsI',
|
|
2267
2267
|
});
|
|
2268
2268
|
function SpsI(props) {
|
|
2269
2269
|
return React.createElement(SpsIcon, __assign({}, props));
|
|
2270
2270
|
}
|
|
2271
2271
|
Object.assign(SpsI, {
|
|
2272
|
-
props: propsDoc$
|
|
2273
|
-
propTypes: propTypes$
|
|
2272
|
+
props: propsDoc$1j,
|
|
2273
|
+
propTypes: propTypes$1n,
|
|
2274
2274
|
displayName: 'SpsI',
|
|
2275
2275
|
});
|
|
2276
2276
|
|
|
2277
|
-
var propsDoc$
|
|
2277
|
+
var propsDoc$1i = {
|
|
2278
2278
|
borderless: 'boolean',
|
|
2279
2279
|
lean: 'boolean',
|
|
2280
2280
|
leaner: { type: 'boolean', deprecated: true },
|
|
2281
2281
|
widthPx: 'number',
|
|
2282
2282
|
widthRem: 'number',
|
|
2283
2283
|
};
|
|
2284
|
-
var propTypes$
|
|
2284
|
+
var propTypes$1m = __assign(__assign({}, spsGlobalPropTypes), { borderless: bool, lean: bool, leaner: bool, widthPx: number, widthRem: number });
|
|
2285
2285
|
function SpsContentRowCol(props) {
|
|
2286
2286
|
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"]);
|
|
2287
2287
|
React.useEffect(function () {
|
|
@@ -2301,25 +2301,25 @@ function SpsContentRowCol(props) {
|
|
|
2301
2301
|
return (React.createElement("div", __assign({}, rest, { className: classes, style: inlineStyles }), children));
|
|
2302
2302
|
}
|
|
2303
2303
|
Object.assign(SpsContentRowCol, {
|
|
2304
|
-
props: propsDoc$
|
|
2305
|
-
propTypes: propTypes$
|
|
2304
|
+
props: propsDoc$1i,
|
|
2305
|
+
propTypes: propTypes$1m,
|
|
2306
2306
|
displayName: 'SpsContentRowCol',
|
|
2307
2307
|
});
|
|
2308
2308
|
|
|
2309
|
-
var propsDoc$
|
|
2310
|
-
var propTypes$
|
|
2309
|
+
var propsDoc$1h = {};
|
|
2310
|
+
var propTypes$1l = __assign({}, spsGlobalPropTypes);
|
|
2311
2311
|
function SpsContentRowExpansion(props) {
|
|
2312
2312
|
var children = props.children, className = props.className, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", 'data-testid', "unsafelyReplaceClassName"]);
|
|
2313
2313
|
var classes = clsx(unsafelyReplaceClassName || 'sps-content-row__expansion', className);
|
|
2314
2314
|
return (React.createElement("div", __assign({ className: classes }, rest, { "data-testid": testId + "__expansion" }), children));
|
|
2315
2315
|
}
|
|
2316
2316
|
Object.assign(SpsContentRowExpansion, {
|
|
2317
|
-
props: propsDoc$
|
|
2318
|
-
propTypes: propTypes$
|
|
2317
|
+
props: propsDoc$1h,
|
|
2318
|
+
propTypes: propTypes$1l,
|
|
2319
2319
|
displayName: 'SpsContentRowExpansion',
|
|
2320
2320
|
});
|
|
2321
2321
|
|
|
2322
|
-
var propsDoc$
|
|
2322
|
+
var propsDoc$1g = {
|
|
2323
2323
|
alternateLayout: 'boolean',
|
|
2324
2324
|
initiallyExpanded: 'boolean',
|
|
2325
2325
|
cardSpacing: 'boolean',
|
|
@@ -2331,7 +2331,7 @@ var propsDoc$1f = {
|
|
|
2331
2331
|
selectable: 'boolean',
|
|
2332
2332
|
selected: 'boolean',
|
|
2333
2333
|
};
|
|
2334
|
-
var propTypes$
|
|
2334
|
+
var propTypes$1k = __assign(__assign({}, spsGlobalPropTypes), { alternateLayout: bool, cardSpacing: bool, initiallyExpanded: bool, onBeforeCollapsed: fun(), onBeforeExpanded: fun(), onSelectionChange: fun(), onCollapsed: fun(), onExpanded: fun(), selectable: bool, selected: bool });
|
|
2335
2335
|
function SpsContentRow(props) {
|
|
2336
2336
|
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"]);
|
|
2337
2337
|
var t = React.useContext(I18nContext).t;
|
|
@@ -2374,8 +2374,8 @@ function SpsContentRow(props) {
|
|
|
2374
2374
|
expansion));
|
|
2375
2375
|
}
|
|
2376
2376
|
Object.assign(SpsContentRow, {
|
|
2377
|
-
props: propsDoc$
|
|
2378
|
-
propTypes: propTypes$
|
|
2377
|
+
props: propsDoc$1g,
|
|
2378
|
+
propTypes: propTypes$1k,
|
|
2379
2379
|
displayName: 'SpsContentRow',
|
|
2380
2380
|
});
|
|
2381
2381
|
|
|
@@ -2384,13 +2384,13 @@ var SpsContentRowExamples = {
|
|
|
2384
2384
|
label: 'Content rows',
|
|
2385
2385
|
examples: {
|
|
2386
2386
|
basic: {
|
|
2387
|
-
react: code(templateObject_1$
|
|
2387
|
+
react: 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 "]))),
|
|
2388
2388
|
},
|
|
2389
2389
|
withCheckbox: {
|
|
2390
|
-
react: code(templateObject_2$
|
|
2390
|
+
react: 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 "]))),
|
|
2391
2391
|
},
|
|
2392
2392
|
withCheckboxAndFavorite: {
|
|
2393
|
-
react: code(templateObject_3$
|
|
2393
|
+
react: 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 "]))),
|
|
2394
2394
|
},
|
|
2395
2395
|
},
|
|
2396
2396
|
},
|
|
@@ -2398,13 +2398,13 @@ var SpsContentRowExamples = {
|
|
|
2398
2398
|
label: 'Expandable content rows',
|
|
2399
2399
|
examples: {
|
|
2400
2400
|
basic: {
|
|
2401
|
-
react: code(templateObject_4$
|
|
2401
|
+
react: 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 "]))),
|
|
2402
2402
|
},
|
|
2403
2403
|
expandableWithCheckbox: {
|
|
2404
|
-
react: code(templateObject_5$
|
|
2404
|
+
react: 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 "]))),
|
|
2405
2405
|
},
|
|
2406
2406
|
expandableWithCheckboxAlternate: {
|
|
2407
|
-
react: code(templateObject_6$
|
|
2407
|
+
react: 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 "]))),
|
|
2408
2408
|
},
|
|
2409
2409
|
expandableWithCheckboxAndFavorite: {
|
|
2410
2410
|
react: 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 "]))),
|
|
@@ -2423,7 +2423,7 @@ var SpsContentRowExamples = {
|
|
|
2423
2423
|
},
|
|
2424
2424
|
},
|
|
2425
2425
|
};
|
|
2426
|
-
var templateObject_1$
|
|
2426
|
+
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;
|
|
2427
2427
|
|
|
2428
2428
|
var moment$5 = moment$6.default || moment$6;
|
|
2429
2429
|
function newWeekArray$1() {
|
|
@@ -2455,7 +2455,7 @@ function parse(value) {
|
|
|
2455
2455
|
function weekOfMonth$1(date) {
|
|
2456
2456
|
return Math.floor((date.clone().date(1).day() + date.date() - 1) / 7);
|
|
2457
2457
|
}
|
|
2458
|
-
var propsDoc$
|
|
2458
|
+
var propsDoc$1f = {
|
|
2459
2459
|
disabled: 'boolean',
|
|
2460
2460
|
format: 'string',
|
|
2461
2461
|
maxDate: 'string',
|
|
@@ -2465,7 +2465,7 @@ var propsDoc$1e = {
|
|
|
2465
2465
|
placeholder: 'string',
|
|
2466
2466
|
value: 'string',
|
|
2467
2467
|
};
|
|
2468
|
-
var propTypes$
|
|
2468
|
+
var propTypes$1j = __assign(__assign({}, spsGlobalPropTypes), { disabled: bool, format: string, maxDate: string, minDate: string, onChange: fun(), onClickOutside: fun(), placeholder: string, value: string });
|
|
2469
2469
|
function SpsDatepicker(props) {
|
|
2470
2470
|
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"]);
|
|
2471
2471
|
var calendarRef = React.useRef();
|
|
@@ -2800,8 +2800,8 @@ function SpsDatepicker(props) {
|
|
|
2800
2800
|
!disabled && (inputRef && inputRef.current && inputRef.current.value) && (React.createElement("i", { className: "sps-icon sps-icon-x-circle sps-form-control__clear-btn", onClick: handleClearClick }))))));
|
|
2801
2801
|
}
|
|
2802
2802
|
Object.assign(SpsDatepicker, {
|
|
2803
|
-
props: propsDoc$
|
|
2804
|
-
propTypes: propTypes$
|
|
2803
|
+
props: propsDoc$1f,
|
|
2804
|
+
propTypes: propTypes$1j,
|
|
2805
2805
|
displayName: 'SpsDatepicker',
|
|
2806
2806
|
});
|
|
2807
2807
|
|
|
@@ -2810,7 +2810,7 @@ var SpsDatepickerExamples = {
|
|
|
2810
2810
|
label: 'Basic',
|
|
2811
2811
|
examples: {
|
|
2812
2812
|
basic: {
|
|
2813
|
-
react: code(templateObject_1$
|
|
2813
|
+
react: 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 "]))),
|
|
2814
2814
|
},
|
|
2815
2815
|
},
|
|
2816
2816
|
},
|
|
@@ -2818,7 +2818,7 @@ var SpsDatepickerExamples = {
|
|
|
2818
2818
|
label: 'Constraints',
|
|
2819
2819
|
examples: {
|
|
2820
2820
|
basic: {
|
|
2821
|
-
react: code(templateObject_2$
|
|
2821
|
+
react: 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 "]))),
|
|
2822
2822
|
},
|
|
2823
2823
|
},
|
|
2824
2824
|
},
|
|
@@ -2826,14 +2826,14 @@ var SpsDatepickerExamples = {
|
|
|
2826
2826
|
label: 'Disabled',
|
|
2827
2827
|
examples: {
|
|
2828
2828
|
disabled: {
|
|
2829
|
-
react: code(templateObject_3$
|
|
2829
|
+
react: 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 "]))),
|
|
2830
2830
|
},
|
|
2831
2831
|
},
|
|
2832
2832
|
},
|
|
2833
2833
|
};
|
|
2834
|
-
var templateObject_1$
|
|
2834
|
+
var templateObject_1$L, templateObject_2$H, templateObject_3$z;
|
|
2835
2835
|
|
|
2836
|
-
var propsDoc$
|
|
2836
|
+
var propsDoc$1e = {
|
|
2837
2837
|
placeholder: 'string',
|
|
2838
2838
|
disabled: 'boolean',
|
|
2839
2839
|
format: 'string',
|
|
@@ -2844,7 +2844,7 @@ var propsDoc$1d = {
|
|
|
2844
2844
|
value: 'MomentRange',
|
|
2845
2845
|
preset: 'Duration',
|
|
2846
2846
|
};
|
|
2847
|
-
var propTypes$
|
|
2847
|
+
var propTypes$1i = __assign(__assign({}, spsGlobalPropTypes), { placeholder: string, disabled: bool, format: string, minDate: string, maxDate: string, availablePresets: array, onChange: fun(), value: impl(), preset: impl() });
|
|
2848
2848
|
function weekOfMonth(mmt) {
|
|
2849
2849
|
return Math.floor((mmt.clone().date(1).day() + mmt.date() - 1) / 7);
|
|
2850
2850
|
}
|
|
@@ -3418,8 +3418,8 @@ function SpsDateRangePicker(props) {
|
|
|
3418
3418
|
(currentValue && currentValue.start && currentValue.end && !disabled) ? (React.createElement("i", { className: "sps-icon sps-icon-x-circle sps-form-control__clear-btn", onClick: clear })) : ''))));
|
|
3419
3419
|
}
|
|
3420
3420
|
Object.assign(SpsDateRangePicker, {
|
|
3421
|
-
props: propsDoc$
|
|
3422
|
-
propTypes: propTypes$
|
|
3421
|
+
props: propsDoc$1e,
|
|
3422
|
+
propTypes: propTypes$1i,
|
|
3423
3423
|
displayName: 'SpsDateRangePicker',
|
|
3424
3424
|
});
|
|
3425
3425
|
|
|
@@ -3428,7 +3428,7 @@ var SpsDateRangePickerExamples = {
|
|
|
3428
3428
|
label: 'Basic',
|
|
3429
3429
|
examples: {
|
|
3430
3430
|
basic: {
|
|
3431
|
-
react: code(templateObject_1$
|
|
3431
|
+
react: 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 "]))),
|
|
3432
3432
|
},
|
|
3433
3433
|
},
|
|
3434
3434
|
},
|
|
@@ -3436,7 +3436,7 @@ var SpsDateRangePickerExamples = {
|
|
|
3436
3436
|
label: 'Constraints',
|
|
3437
3437
|
examples: {
|
|
3438
3438
|
basic: {
|
|
3439
|
-
react: code(templateObject_2$
|
|
3439
|
+
react: 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 "]))),
|
|
3440
3440
|
},
|
|
3441
3441
|
},
|
|
3442
3442
|
},
|
|
@@ -3444,7 +3444,7 @@ var SpsDateRangePickerExamples = {
|
|
|
3444
3444
|
label: 'Disabled',
|
|
3445
3445
|
examples: {
|
|
3446
3446
|
disabled: {
|
|
3447
|
-
react: code(templateObject_3$
|
|
3447
|
+
react: 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 "]))),
|
|
3448
3448
|
},
|
|
3449
3449
|
},
|
|
3450
3450
|
},
|
|
@@ -3453,12 +3453,12 @@ var SpsDateRangePickerExamples = {
|
|
|
3453
3453
|
description: 'The definition of a preset can be either an ISO 8601 duration string, or a function that returns a SimpleDateRange.',
|
|
3454
3454
|
examples: {
|
|
3455
3455
|
presets: {
|
|
3456
|
-
react: code(templateObject_4$
|
|
3456
|
+
react: 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 "]))),
|
|
3457
3457
|
},
|
|
3458
3458
|
},
|
|
3459
3459
|
},
|
|
3460
3460
|
};
|
|
3461
|
-
var templateObject_1$
|
|
3461
|
+
var templateObject_1$K, templateObject_2$G, templateObject_3$y, templateObject_4$q;
|
|
3462
3462
|
|
|
3463
3463
|
var currentLocale = moment__default.locale();
|
|
3464
3464
|
require('moment/locale/en-au');
|
|
@@ -3556,7 +3556,7 @@ var formatMaps = {
|
|
|
3556
3556
|
LONG_FULLDATETIME: 'LLLL',
|
|
3557
3557
|
LONG_FULLDATETIME_ZONE: 'LLLL z', // Monday February 29, 2016 3:03 PM CST
|
|
3558
3558
|
};
|
|
3559
|
-
var propsDoc$
|
|
3559
|
+
var propsDoc$1d = {
|
|
3560
3560
|
currentUser: 'any',
|
|
3561
3561
|
dateToFormat: 'string | Date',
|
|
3562
3562
|
format: 'string',
|
|
@@ -3565,7 +3565,7 @@ var propsDoc$1c = {
|
|
|
3565
3565
|
relativeHrs: 'number',
|
|
3566
3566
|
tz: 'string',
|
|
3567
3567
|
};
|
|
3568
|
-
var propTypes$
|
|
3568
|
+
var propTypes$1h = __assign(__assign({}, spsGlobalPropTypes), { currentUser: any, dateToFormat: oneOfType([
|
|
3569
3569
|
string,
|
|
3570
3570
|
instanceOf(Date),
|
|
3571
3571
|
]), format: string, locale: string, relative: bool, relativeHrs: number, tz: string });
|
|
@@ -3622,8 +3622,8 @@ function SpsDateTime(props) {
|
|
|
3622
3622
|
})));
|
|
3623
3623
|
}
|
|
3624
3624
|
Object.assign(SpsDateTime, {
|
|
3625
|
-
props: propsDoc$
|
|
3626
|
-
propTypes: propTypes$
|
|
3625
|
+
props: propsDoc$1d,
|
|
3626
|
+
propTypes: propTypes$1h,
|
|
3627
3627
|
displayName: 'SpsDateTime',
|
|
3628
3628
|
});
|
|
3629
3629
|
|
|
@@ -3633,22 +3633,22 @@ var SpsDatetimeExamples = {
|
|
|
3633
3633
|
description: '<p>Formats dates</p>',
|
|
3634
3634
|
examples: {
|
|
3635
3635
|
basicAttribute: {
|
|
3636
|
-
jsx: code(templateObject_1$
|
|
3636
|
+
jsx: 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 "]))),
|
|
3637
3637
|
},
|
|
3638
3638
|
basicChild: {
|
|
3639
|
-
jsx: code(templateObject_2$
|
|
3639
|
+
jsx: 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 "]))),
|
|
3640
3640
|
},
|
|
3641
3641
|
},
|
|
3642
3642
|
},
|
|
3643
3643
|
};
|
|
3644
|
-
var templateObject_1$
|
|
3644
|
+
var templateObject_1$J, templateObject_2$F;
|
|
3645
3645
|
|
|
3646
|
-
var propsDoc$
|
|
3646
|
+
var propsDoc$1c = {
|
|
3647
3647
|
compact: 'boolean',
|
|
3648
3648
|
wideTerms: 'boolean',
|
|
3649
3649
|
widerTerms: 'boolean',
|
|
3650
3650
|
};
|
|
3651
|
-
var propTypes$
|
|
3651
|
+
var propTypes$1g = __assign(__assign({}, spsGlobalPropTypes), { compact: bool, wideTerms: bool, widerTerms: bool });
|
|
3652
3652
|
function SpsDescriptionList(props) {
|
|
3653
3653
|
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"]);
|
|
3654
3654
|
/** holy shit this is awful. TODO: fix this garbage */
|
|
@@ -3670,37 +3670,37 @@ function SpsDescriptionList(props) {
|
|
|
3670
3670
|
return (React.createElement("dl", __assign({ className: classes, "data-testid": "" + testId }, rest), childrenWithProps));
|
|
3671
3671
|
}
|
|
3672
3672
|
Object.assign(SpsDescriptionList, {
|
|
3673
|
-
props: propsDoc$
|
|
3674
|
-
propTypes: propTypes$
|
|
3673
|
+
props: propsDoc$1c,
|
|
3674
|
+
propTypes: propTypes$1g,
|
|
3675
3675
|
displayName: 'SpsDescriptionList / SpsDl',
|
|
3676
3676
|
});
|
|
3677
3677
|
function SpsDl(p) {
|
|
3678
3678
|
return SpsDescriptionList(p);
|
|
3679
3679
|
}
|
|
3680
3680
|
Object.assign(SpsDl, {
|
|
3681
|
-
props: propsDoc$
|
|
3682
|
-
propTypes: propTypes$
|
|
3681
|
+
props: propsDoc$1c,
|
|
3682
|
+
propTypes: propTypes$1g,
|
|
3683
3683
|
displayName: 'SpsDescriptionList / SpsDl',
|
|
3684
3684
|
});
|
|
3685
3685
|
|
|
3686
|
-
var propsDoc$
|
|
3687
|
-
var propTypes$
|
|
3686
|
+
var propsDoc$1b = {};
|
|
3687
|
+
var propTypes$1f = __assign({}, spsGlobalPropTypes);
|
|
3688
3688
|
function SpsDescriptionListDefinition(props) {
|
|
3689
3689
|
var children = props.children, className = props.className, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", 'data-testid', "unsafelyReplaceClassName"]);
|
|
3690
3690
|
var classes = clsx(unsafelyReplaceClassName || 'sps-description-list__definition', className);
|
|
3691
3691
|
return (React.createElement("dd", __assign({ className: classes, "data-testid": "" + testId }, rest), children));
|
|
3692
3692
|
}
|
|
3693
3693
|
Object.assign(SpsDescriptionListDefinition, {
|
|
3694
|
-
props: propsDoc$
|
|
3695
|
-
propTypes: propTypes$
|
|
3694
|
+
props: propsDoc$1b,
|
|
3695
|
+
propTypes: propTypes$1f,
|
|
3696
3696
|
displayName: 'SpsDescriptionListDefinition / SpsDd',
|
|
3697
3697
|
});
|
|
3698
3698
|
function SpsDd(p) {
|
|
3699
3699
|
return SpsDescriptionListDefinition(p);
|
|
3700
3700
|
}
|
|
3701
3701
|
Object.assign(SpsDd, {
|
|
3702
|
-
props: propsDoc$
|
|
3703
|
-
propTypes: propTypes$
|
|
3702
|
+
props: propsDoc$1b,
|
|
3703
|
+
propTypes: propTypes$1f,
|
|
3704
3704
|
displayName: 'SpsDescriptionListDefinition / SpsDd',
|
|
3705
3705
|
});
|
|
3706
3706
|
|
|
@@ -3718,7 +3718,7 @@ function toggleTooltipState(state) {
|
|
|
3718
3718
|
}
|
|
3719
3719
|
var CARET_SPACING_PX = 13;
|
|
3720
3720
|
var openTips = new Map();
|
|
3721
|
-
var propsDoc$
|
|
3721
|
+
var propsDoc$1a = {
|
|
3722
3722
|
for: { type: 'React.MutableRefObject<any> | string', required: true },
|
|
3723
3723
|
hideDelay: 'number',
|
|
3724
3724
|
isShown: 'TooltipVisibility',
|
|
@@ -3730,7 +3730,7 @@ var propsDoc$19 = {
|
|
|
3730
3730
|
showOn: 'TooltipShowTrigger',
|
|
3731
3731
|
title: 'string',
|
|
3732
3732
|
};
|
|
3733
|
-
var propTypes$
|
|
3733
|
+
var propTypes$1e = __assign(__assign({}, spsGlobalPropTypes), { for: oneOfType([ref(), string]).isRequired, hideDelay: number, isShown: enumValue(TooltipVisibility), kind: enumValue(TooltipKind), offsets: arrayOf(number), onDeferred: fun(), position: enumValue(Position), altPosition: enumValue(Position), showOn: enumValue(TooltipShowTrigger), title: string });
|
|
3734
3734
|
function SpsTooltip(_a) {
|
|
3735
3735
|
var children = _a.children, className = _a.className, forProp = _a.for, testId = _a["data-testid"], _b = _a.hideDelay, hideDelay = _b === void 0 ? TOOLTIP_HIDE_DELAY_MS_DEFAULT : _b, isShown = _a.isShown, _c = _a.kind, kind = _c === void 0 ? TooltipKind.DEFAULT : _c, _d = _a.offsets, offsets = _d === void 0 ? [0, 0] : _d, onDeferred = _a.onDeferred, _e = _a.position, position = _e === void 0 ? Position.TOP_MIDDLE : _e, _f = _a.altPosition, altPosition = _f === void 0 ? flipPosition(position) : _f, _g = _a.showOn, showOn = _g === void 0 ? TooltipShowTrigger.MOUSEOVER : _g, style = _a.style, title = _a.title, unsafelyReplaceClassName = _a.unsafelyReplaceClassName;
|
|
3736
3736
|
var iref = React.useRef({
|
|
@@ -3888,19 +3888,19 @@ function SpsTooltip(_a) {
|
|
|
3888
3888
|
React.createElement("span", { className: "sps-tooltip__caret" })));
|
|
3889
3889
|
}
|
|
3890
3890
|
Object.assign(SpsTooltip, {
|
|
3891
|
-
props: propsDoc$
|
|
3892
|
-
propTypes: propTypes$
|
|
3891
|
+
props: propsDoc$1a,
|
|
3892
|
+
propTypes: propTypes$1e,
|
|
3893
3893
|
displayName: 'SpsTooltip',
|
|
3894
3894
|
});
|
|
3895
3895
|
|
|
3896
|
-
var propsDoc$
|
|
3896
|
+
var propsDoc$19 = {
|
|
3897
3897
|
error: 'boolean',
|
|
3898
3898
|
errors: 'ReactNodeOrRenderFn',
|
|
3899
3899
|
help: 'ReactNodeOrRenderFn',
|
|
3900
3900
|
labelFor: 'SpsFormFieldMeta<any>',
|
|
3901
3901
|
required: 'boolean',
|
|
3902
3902
|
};
|
|
3903
|
-
var propTypes$
|
|
3903
|
+
var propTypes$1d = __assign(__assign({}, spsGlobalPropTypes), { error: bool, errors: nodeOrRenderFn, help: nodeOrRenderFn, labelFor: oneOfType([
|
|
3904
3904
|
impl(),
|
|
3905
3905
|
impl(),
|
|
3906
3906
|
]), required: bool });
|
|
@@ -3929,16 +3929,16 @@ function SpsDescriptionListTerm(props) {
|
|
|
3929
3929
|
React.createElement(SpsTooltip, { kind: tipKind, for: dtElement, showOn: TooltipShowTrigger.MANUAL, isShown: showTip }, contentOf(tipKind === TooltipKind.ERROR ? errors : help))));
|
|
3930
3930
|
}
|
|
3931
3931
|
Object.assign(SpsDescriptionListTerm, {
|
|
3932
|
-
props: propsDoc$
|
|
3933
|
-
propTypes: propTypes$
|
|
3932
|
+
props: propsDoc$19,
|
|
3933
|
+
propTypes: propTypes$1d,
|
|
3934
3934
|
displayName: 'SpsDescriptionListTerm / SpsDt',
|
|
3935
3935
|
});
|
|
3936
3936
|
function SpsDt(p) {
|
|
3937
3937
|
return SpsDescriptionListTerm(p);
|
|
3938
3938
|
}
|
|
3939
3939
|
Object.assign(SpsDt, {
|
|
3940
|
-
props: propsDoc$
|
|
3941
|
-
propTypes: propTypes$
|
|
3940
|
+
props: propsDoc$19,
|
|
3941
|
+
propTypes: propTypes$1d,
|
|
3942
3942
|
displayName: 'SpsDescriptionListTerm / SpsDt',
|
|
3943
3943
|
});
|
|
3944
3944
|
|
|
@@ -3947,10 +3947,10 @@ var SpsDescriptionListExamples = {
|
|
|
3947
3947
|
label: 'Basic Description List',
|
|
3948
3948
|
examples: {
|
|
3949
3949
|
basic: {
|
|
3950
|
-
jsx: code(templateObject_1$
|
|
3950
|
+
jsx: 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 "]))),
|
|
3951
3951
|
},
|
|
3952
3952
|
dynamic: {
|
|
3953
|
-
react: code(templateObject_2$
|
|
3953
|
+
react: 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 "]))),
|
|
3954
3954
|
},
|
|
3955
3955
|
},
|
|
3956
3956
|
},
|
|
@@ -3958,7 +3958,7 @@ var SpsDescriptionListExamples = {
|
|
|
3958
3958
|
label: 'Advanced Description List',
|
|
3959
3959
|
examples: {
|
|
3960
3960
|
advanced: {
|
|
3961
|
-
react: code(templateObject_3$
|
|
3961
|
+
react: 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 "]))),
|
|
3962
3962
|
},
|
|
3963
3963
|
},
|
|
3964
3964
|
},
|
|
@@ -3966,7 +3966,7 @@ var SpsDescriptionListExamples = {
|
|
|
3966
3966
|
label: 'Compact Description List',
|
|
3967
3967
|
examples: {
|
|
3968
3968
|
compact: {
|
|
3969
|
-
jsx: code(templateObject_4$
|
|
3969
|
+
jsx: 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 "]))),
|
|
3970
3970
|
},
|
|
3971
3971
|
},
|
|
3972
3972
|
},
|
|
@@ -3974,15 +3974,15 @@ var SpsDescriptionListExamples = {
|
|
|
3974
3974
|
label: 'Alternate Column Widths',
|
|
3975
3975
|
examples: {
|
|
3976
3976
|
wideTerms: {
|
|
3977
|
-
jsx: code(templateObject_5$
|
|
3977
|
+
jsx: 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 "]))),
|
|
3978
3978
|
},
|
|
3979
3979
|
widerTerms: {
|
|
3980
|
-
jsx: code(templateObject_6$
|
|
3980
|
+
jsx: 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 "]))),
|
|
3981
3981
|
},
|
|
3982
3982
|
},
|
|
3983
3983
|
},
|
|
3984
3984
|
};
|
|
3985
|
-
var templateObject_1$
|
|
3985
|
+
var templateObject_1$I, templateObject_2$E, templateObject_3$x, templateObject_4$p, templateObject_5$i, templateObject_6$e;
|
|
3986
3986
|
|
|
3987
3987
|
var SpsDropdownExamples = {
|
|
3988
3988
|
labelled: {
|
|
@@ -3990,19 +3990,19 @@ var SpsDropdownExamples = {
|
|
|
3990
3990
|
examples: {
|
|
3991
3991
|
default: {
|
|
3992
3992
|
description: '<h3> Default Dropdown</h3>',
|
|
3993
|
-
react: code(templateObject_1$
|
|
3993
|
+
react: 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 "]))),
|
|
3994
3994
|
},
|
|
3995
3995
|
key: {
|
|
3996
3996
|
description: '<h3> Key Dropdown</h3>',
|
|
3997
|
-
react: code(templateObject_2$
|
|
3997
|
+
react: 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 "]))),
|
|
3998
3998
|
},
|
|
3999
3999
|
confirm: {
|
|
4000
4000
|
description: '<h3> Confirm Dropdown</h3>',
|
|
4001
|
-
react: code(templateObject_3$
|
|
4001
|
+
react: 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 "]))),
|
|
4002
4002
|
},
|
|
4003
4003
|
delete: {
|
|
4004
4004
|
description: '<h3> Delete Dropdown</h3>',
|
|
4005
|
-
react: code(templateObject_4$
|
|
4005
|
+
react: 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 "]))),
|
|
4006
4006
|
},
|
|
4007
4007
|
},
|
|
4008
4008
|
},
|
|
@@ -4011,11 +4011,11 @@ var SpsDropdownExamples = {
|
|
|
4011
4011
|
examples: {
|
|
4012
4012
|
default: {
|
|
4013
4013
|
description: '<h3> Default Dropdown With Icon</h3>',
|
|
4014
|
-
react: code(templateObject_5$
|
|
4014
|
+
react: 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 "]))),
|
|
4015
4015
|
},
|
|
4016
4016
|
key: {
|
|
4017
4017
|
description: '<h3>Key Dropdown With Icon</h3>',
|
|
4018
|
-
react: code(templateObject_6$
|
|
4018
|
+
react: 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 "]))),
|
|
4019
4019
|
},
|
|
4020
4020
|
confirm: {
|
|
4021
4021
|
description: '<h3> Confirm Dropdown With Icon</h3>',
|
|
@@ -4072,16 +4072,16 @@ var SpsDropdownExamples = {
|
|
|
4072
4072
|
},
|
|
4073
4073
|
},
|
|
4074
4074
|
};
|
|
4075
|
-
var templateObject_1$
|
|
4075
|
+
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;
|
|
4076
4076
|
|
|
4077
|
-
var propsDoc$
|
|
4077
|
+
var propsDoc$18 = {
|
|
4078
4078
|
checked: 'boolean',
|
|
4079
4079
|
onChange: 'ChangeEventHandler',
|
|
4080
4080
|
indeterminate: 'boolean',
|
|
4081
4081
|
disabled: 'boolean',
|
|
4082
4082
|
options: 'Array<SpsActionMethod | [SpsActionDescriptor, () => void]>',
|
|
4083
4083
|
};
|
|
4084
|
-
var propTypes$
|
|
4084
|
+
var propTypes$1c = __assign(__assign({}, spsGlobalPropTypes), { checked: bool, onChange: fun(), indeterminate: bool,
|
|
4085
4085
|
// the type arg to PropTypes.arrayOf<T>() here confuses eslint greatly
|
|
4086
4086
|
/* eslint-disable */
|
|
4087
4087
|
options: arrayOf(oneOfType([func, any])).isRequired,
|
|
@@ -4095,15 +4095,15 @@ function SpsCheckboxDropdown(props) {
|
|
|
4095
4095
|
React.createElement(SpsDropdown, { disabled: disabled, options: options, icon: SpsIcon$1.CHEVRON_DOWN })));
|
|
4096
4096
|
}
|
|
4097
4097
|
Object.assign(SpsCheckboxDropdown, {
|
|
4098
|
-
props: propsDoc$
|
|
4099
|
-
propTypes: propTypes$
|
|
4098
|
+
props: propsDoc$18,
|
|
4099
|
+
propTypes: propTypes$1c,
|
|
4100
4100
|
displayName: 'SpsCheckboxDropdown',
|
|
4101
4101
|
});
|
|
4102
4102
|
|
|
4103
|
-
var propsDoc$
|
|
4103
|
+
var propsDoc$17 = {
|
|
4104
4104
|
kind: 'FeedbackBlockKind',
|
|
4105
4105
|
};
|
|
4106
|
-
var propTypes$
|
|
4106
|
+
var propTypes$1b = __assign(__assign({}, spsGlobalPropTypes), { kind: enumValue(FeedbackBlockKind) });
|
|
4107
4107
|
function SpsFeedbackBlock(props) {
|
|
4108
4108
|
var children = props.children, className = props.className, _a = props.kind, kind = _a === void 0 ? FeedbackBlockKind.TIP : _a, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "kind", 'data-testid', "unsafelyReplaceClassName"]);
|
|
4109
4109
|
var classes = clsx(unsafelyReplaceClassName || 'sps-feedback-block', "sps-feedback-block--" + kind, className);
|
|
@@ -4112,8 +4112,8 @@ function SpsFeedbackBlock(props) {
|
|
|
4112
4112
|
React.createElement("span", { className: "sps-feedback-block__content", "data-testid": testId + "__text" }, children)));
|
|
4113
4113
|
}
|
|
4114
4114
|
Object.assign(SpsFeedbackBlock, {
|
|
4115
|
-
props: propsDoc$
|
|
4116
|
-
propTypes: propTypes$
|
|
4115
|
+
props: propsDoc$17,
|
|
4116
|
+
propTypes: propTypes$1b,
|
|
4117
4117
|
displayName: 'SpsFeedbackBlock',
|
|
4118
4118
|
});
|
|
4119
4119
|
|
|
@@ -4124,23 +4124,23 @@ var SpsFeedbackBlockExamples = {
|
|
|
4124
4124
|
examples: {
|
|
4125
4125
|
error: {
|
|
4126
4126
|
description: 'Error',
|
|
4127
|
-
jsx: code(templateObject_1$
|
|
4127
|
+
jsx: 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 "]))),
|
|
4128
4128
|
},
|
|
4129
4129
|
info: {
|
|
4130
4130
|
description: 'Information',
|
|
4131
|
-
jsx: code(templateObject_2$
|
|
4131
|
+
jsx: 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 "]))),
|
|
4132
4132
|
},
|
|
4133
4133
|
proTip: {
|
|
4134
4134
|
description: 'Pro Tip',
|
|
4135
|
-
jsx: code(templateObject_3$
|
|
4135
|
+
jsx: 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 "]))),
|
|
4136
4136
|
},
|
|
4137
4137
|
success: {
|
|
4138
4138
|
description: 'Success',
|
|
4139
|
-
jsx: code(templateObject_4$
|
|
4139
|
+
jsx: 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 "]))),
|
|
4140
4140
|
},
|
|
4141
4141
|
warning: {
|
|
4142
4142
|
description: 'Warning',
|
|
4143
|
-
jsx: code(templateObject_5$
|
|
4143
|
+
jsx: 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 "]))),
|
|
4144
4144
|
},
|
|
4145
4145
|
},
|
|
4146
4146
|
},
|
|
@@ -4150,7 +4150,7 @@ var SpsFeedbackBlockExamples = {
|
|
|
4150
4150
|
examples: {
|
|
4151
4151
|
error: {
|
|
4152
4152
|
description: 'Error',
|
|
4153
|
-
jsx: code(templateObject_6$
|
|
4153
|
+
jsx: 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 "]))),
|
|
4154
4154
|
},
|
|
4155
4155
|
info: {
|
|
4156
4156
|
description: 'Information',
|
|
@@ -4171,9 +4171,9 @@ var SpsFeedbackBlockExamples = {
|
|
|
4171
4171
|
},
|
|
4172
4172
|
},
|
|
4173
4173
|
};
|
|
4174
|
-
var templateObject_1$
|
|
4174
|
+
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;
|
|
4175
4175
|
|
|
4176
|
-
var propsDoc$
|
|
4176
|
+
var propsDoc$16 = {
|
|
4177
4177
|
errors: 'ReactNodeOrRenderFn',
|
|
4178
4178
|
formMeta: 'SpsFormSetMeta<any>',
|
|
4179
4179
|
legend: 'string',
|
|
@@ -4182,7 +4182,7 @@ var propsDoc$15 = {
|
|
|
4182
4182
|
onToggled: '(isEnabled: boolean) => void',
|
|
4183
4183
|
tooltip: 'string',
|
|
4184
4184
|
};
|
|
4185
|
-
var propTypes$
|
|
4185
|
+
var propTypes$1a = __assign(__assign({}, spsGlobalPropTypes), { errors: nodeOrRenderFn, formArray: impl(), formGroup: impl(), formMeta: impl(), legend: string, optional: bool, enabled: bool, onToggled: fun(), tooltip: string });
|
|
4186
4186
|
function SpsFieldset(_a) {
|
|
4187
4187
|
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;
|
|
4188
4188
|
var formControlSet = formGroup || formArray;
|
|
@@ -4232,8 +4232,8 @@ function SpsFieldset(_a) {
|
|
|
4232
4232
|
children)));
|
|
4233
4233
|
}
|
|
4234
4234
|
Object.assign(SpsFieldset, {
|
|
4235
|
-
props: propsDoc$
|
|
4236
|
-
propTypes: propTypes$
|
|
4235
|
+
props: propsDoc$16,
|
|
4236
|
+
propTypes: propTypes$1a,
|
|
4237
4237
|
displayName: 'SpsFieldset',
|
|
4238
4238
|
});
|
|
4239
4239
|
|
|
@@ -4243,7 +4243,7 @@ var SpsFieldsetExamples = {
|
|
|
4243
4243
|
description: 'info about basic fieldsets',
|
|
4244
4244
|
examples: {
|
|
4245
4245
|
basic: {
|
|
4246
|
-
react: code(templateObject_1$
|
|
4246
|
+
react: 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 "]))),
|
|
4247
4247
|
},
|
|
4248
4248
|
},
|
|
4249
4249
|
},
|
|
@@ -4252,7 +4252,7 @@ var SpsFieldsetExamples = {
|
|
|
4252
4252
|
description: 'info about nested fieldsets',
|
|
4253
4253
|
examples: {
|
|
4254
4254
|
nested: {
|
|
4255
|
-
react: code(templateObject_2$
|
|
4255
|
+
react: 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 "]))),
|
|
4256
4256
|
},
|
|
4257
4257
|
},
|
|
4258
4258
|
},
|
|
@@ -4261,7 +4261,7 @@ var SpsFieldsetExamples = {
|
|
|
4261
4261
|
description: 'info about optional fieldsets',
|
|
4262
4262
|
examples: {
|
|
4263
4263
|
optional: {
|
|
4264
|
-
react: code(templateObject_3$
|
|
4264
|
+
react: 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 "]))),
|
|
4265
4265
|
},
|
|
4266
4266
|
},
|
|
4267
4267
|
},
|
|
@@ -4270,7 +4270,7 @@ var SpsFieldsetExamples = {
|
|
|
4270
4270
|
description: 'info about validation on fields',
|
|
4271
4271
|
examples: {
|
|
4272
4272
|
validationOnField: {
|
|
4273
|
-
react: code(templateObject_4$
|
|
4273
|
+
react: 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 "]))),
|
|
4274
4274
|
},
|
|
4275
4275
|
},
|
|
4276
4276
|
},
|
|
@@ -4279,15 +4279,15 @@ var SpsFieldsetExamples = {
|
|
|
4279
4279
|
description: 'info about validation on fieldsets',
|
|
4280
4280
|
examples: {
|
|
4281
4281
|
validationOnFieldset: {
|
|
4282
|
-
react: 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 "]))),
|
|
4282
|
+
react: 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 "]))),
|
|
4283
4283
|
},
|
|
4284
4284
|
},
|
|
4285
4285
|
},
|
|
4286
4286
|
};
|
|
4287
|
-
var templateObject_1$
|
|
4287
|
+
var templateObject_1$F, templateObject_2$B, templateObject_3$u, templateObject_4$m, templateObject_5$f;
|
|
4288
4288
|
|
|
4289
|
-
var propsDoc$
|
|
4290
|
-
var propTypes$
|
|
4289
|
+
var propsDoc$15 = {};
|
|
4290
|
+
var propTypes$19 = __assign({}, spsGlobalPropTypes);
|
|
4291
4291
|
function SpsFocusedTaskActions(props) {
|
|
4292
4292
|
var children = props.children, className = props.className, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "unsafelyReplaceClassName"]);
|
|
4293
4293
|
var classes = clsx(unsafelyReplaceClassName || 'sps-list-action-bar-container', 'z-stratum-bar', className);
|
|
@@ -4296,17 +4296,17 @@ function SpsFocusedTaskActions(props) {
|
|
|
4296
4296
|
React.createElement("div", { className: "sps-list-action-bar__actions" }, children))));
|
|
4297
4297
|
}
|
|
4298
4298
|
Object.assign(SpsFocusedTaskActions, {
|
|
4299
|
-
props: propsDoc$
|
|
4300
|
-
propTypes: propTypes$
|
|
4299
|
+
props: propsDoc$15,
|
|
4300
|
+
propTypes: propTypes$19,
|
|
4301
4301
|
displayName: 'SpsFocusedTaskActions',
|
|
4302
4302
|
});
|
|
4303
4303
|
|
|
4304
|
-
var propsDoc$
|
|
4304
|
+
var propsDoc$14 = {
|
|
4305
4305
|
fullWidth: 'boolean',
|
|
4306
4306
|
isOpen: 'boolean',
|
|
4307
4307
|
onClose: '() => void',
|
|
4308
4308
|
};
|
|
4309
|
-
var propTypes$
|
|
4309
|
+
var propTypes$18 = __assign(__assign({}, spsGlobalPropTypes), { fullWidth: bool, isOpen: bool, onClose: fun() });
|
|
4310
4310
|
function SpsFocusedTask(props) {
|
|
4311
4311
|
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"]);
|
|
4312
4312
|
var rootRef = React.useRef();
|
|
@@ -4329,8 +4329,8 @@ function SpsFocusedTask(props) {
|
|
|
4329
4329
|
actions));
|
|
4330
4330
|
}
|
|
4331
4331
|
Object.assign(SpsFocusedTask, {
|
|
4332
|
-
props: propsDoc$
|
|
4333
|
-
propTypes: propTypes$
|
|
4332
|
+
props: propsDoc$14,
|
|
4333
|
+
propTypes: propTypes$18,
|
|
4334
4334
|
displayName: 'SpsFocusedTask',
|
|
4335
4335
|
});
|
|
4336
4336
|
|
|
@@ -4338,15 +4338,15 @@ var SpsFocusedTaskExamples = {
|
|
|
4338
4338
|
basic: {
|
|
4339
4339
|
examples: {
|
|
4340
4340
|
basic: {
|
|
4341
|
-
react: code(templateObject_1$
|
|
4341
|
+
react: 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 "]))),
|
|
4342
4342
|
},
|
|
4343
4343
|
fullWidth: {
|
|
4344
|
-
react: code(templateObject_2$
|
|
4344
|
+
react: 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 "]))),
|
|
4345
4345
|
},
|
|
4346
4346
|
},
|
|
4347
4347
|
},
|
|
4348
4348
|
};
|
|
4349
|
-
var templateObject_1$
|
|
4349
|
+
var templateObject_1$E, templateObject_2$A;
|
|
4350
4350
|
|
|
4351
4351
|
var OnBlurErrorKeys = new Set();
|
|
4352
4352
|
|
|
@@ -5662,7 +5662,7 @@ var SpsFormExamples = {
|
|
|
5662
5662
|
description: '',
|
|
5663
5663
|
examples: {
|
|
5664
5664
|
basic: {
|
|
5665
|
-
react: code(templateObject_1$
|
|
5665
|
+
react: 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 "]))),
|
|
5666
5666
|
},
|
|
5667
5667
|
},
|
|
5668
5668
|
},
|
|
@@ -5671,7 +5671,7 @@ var SpsFormExamples = {
|
|
|
5671
5671
|
description: '',
|
|
5672
5672
|
examples: {
|
|
5673
5673
|
array: {
|
|
5674
|
-
react: code(templateObject_2$
|
|
5674
|
+
react: 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 "]))),
|
|
5675
5675
|
},
|
|
5676
5676
|
},
|
|
5677
5677
|
},
|
|
@@ -5680,19 +5680,19 @@ var SpsFormExamples = {
|
|
|
5680
5680
|
description: '',
|
|
5681
5681
|
examples: {
|
|
5682
5682
|
basic: {
|
|
5683
|
-
react: 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 "]))),
|
|
5683
|
+
react: 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 "]))),
|
|
5684
5684
|
},
|
|
5685
5685
|
},
|
|
5686
5686
|
},
|
|
5687
5687
|
};
|
|
5688
|
-
var templateObject_1$
|
|
5688
|
+
var templateObject_1$D, templateObject_2$z, templateObject_3$t;
|
|
5689
5689
|
|
|
5690
5690
|
var SpsAddRemoveFormRowExamples = {
|
|
5691
5691
|
ideal: {
|
|
5692
5692
|
label: 'Ideal',
|
|
5693
5693
|
examples: {
|
|
5694
5694
|
ideal: {
|
|
5695
|
-
react: code(templateObject_1$
|
|
5695
|
+
react: 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 "]))),
|
|
5696
5696
|
},
|
|
5697
5697
|
},
|
|
5698
5698
|
},
|
|
@@ -5700,21 +5700,21 @@ var SpsAddRemoveFormRowExamples = {
|
|
|
5700
5700
|
label: 'Alternate',
|
|
5701
5701
|
examples: {
|
|
5702
5702
|
alternate: {
|
|
5703
|
-
react: code(templateObject_2$
|
|
5703
|
+
react: 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 "]))),
|
|
5704
5704
|
},
|
|
5705
5705
|
},
|
|
5706
5706
|
},
|
|
5707
5707
|
};
|
|
5708
|
-
var templateObject_1$
|
|
5708
|
+
var templateObject_1$C, templateObject_2$y;
|
|
5709
5709
|
|
|
5710
|
-
var propsDoc$
|
|
5710
|
+
var propsDoc$13 = {
|
|
5711
5711
|
imgSrc: 'string',
|
|
5712
5712
|
kind: 'GrowlerKind',
|
|
5713
5713
|
onClose: '() => void',
|
|
5714
5714
|
persist: 'boolean',
|
|
5715
5715
|
title: 'string',
|
|
5716
5716
|
};
|
|
5717
|
-
var propTypes$
|
|
5717
|
+
var propTypes$17 = __assign(__assign({}, spsGlobalPropTypes), { imgSrc: string, kind: enumValue(GrowlerKind), onClose: fun(), persist: bool, title: string });
|
|
5718
5718
|
function SpsGrowler(props) {
|
|
5719
5719
|
var children = props.children, className = props.className, imgSrc = props.imgSrc, _a = props.kind, kind = _a === void 0 ? 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"]);
|
|
5720
5720
|
var closeCallback = React.useRef(onClose);
|
|
@@ -5794,8 +5794,8 @@ function SpsGrowler(props) {
|
|
|
5794
5794
|
React.createElement("i", { className: "sps-icon sps-icon-x", title: t('design-system:growler.dismiss') })))));
|
|
5795
5795
|
}
|
|
5796
5796
|
Object.assign(SpsGrowler, {
|
|
5797
|
-
props: propsDoc$
|
|
5798
|
-
propTypes: propTypes$
|
|
5797
|
+
props: propsDoc$13,
|
|
5798
|
+
propTypes: propTypes$17,
|
|
5799
5799
|
displayName: 'SpsGrowler',
|
|
5800
5800
|
});
|
|
5801
5801
|
|
|
@@ -5827,11 +5827,11 @@ var SpsGrowlerExamples = {
|
|
|
5827
5827
|
examples: {
|
|
5828
5828
|
primary: {
|
|
5829
5829
|
description: 'Primary Message Only',
|
|
5830
|
-
react: code(templateObject_1$
|
|
5830
|
+
react: 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 "]))),
|
|
5831
5831
|
},
|
|
5832
5832
|
primaryAndSecondary: {
|
|
5833
5833
|
description: 'Primary and Secondary Messages',
|
|
5834
|
-
react: code(templateObject_2$
|
|
5834
|
+
react: 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 "]))),
|
|
5835
5835
|
},
|
|
5836
5836
|
},
|
|
5837
5837
|
},
|
|
@@ -5842,10 +5842,10 @@ var SpsGrowlerExamples = {
|
|
|
5842
5842
|
React.createElement("p", null, "Unacceptable message: No access tonight."))); },
|
|
5843
5843
|
examples: {
|
|
5844
5844
|
primary: {
|
|
5845
|
-
react: code(templateObject_3$
|
|
5845
|
+
react: 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 "]))),
|
|
5846
5846
|
},
|
|
5847
5847
|
primaryAndSecondary: {
|
|
5848
|
-
react: code(templateObject_4$
|
|
5848
|
+
react: 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 "]))),
|
|
5849
5849
|
},
|
|
5850
5850
|
},
|
|
5851
5851
|
},
|
|
@@ -5857,11 +5857,11 @@ var SpsGrowlerExamples = {
|
|
|
5857
5857
|
examples: {
|
|
5858
5858
|
primary: {
|
|
5859
5859
|
description: 'Primary Message Only',
|
|
5860
|
-
react: code(templateObject_5$
|
|
5860
|
+
react: 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 "]))),
|
|
5861
5861
|
},
|
|
5862
5862
|
primaryAndSecondary: {
|
|
5863
5863
|
description: 'Primary and Secondary Messages',
|
|
5864
|
-
react: code(templateObject_6$
|
|
5864
|
+
react: 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 "]))),
|
|
5865
5865
|
},
|
|
5866
5866
|
},
|
|
5867
5867
|
},
|
|
@@ -5911,16 +5911,16 @@ var SpsGrowlerExamples = {
|
|
|
5911
5911
|
},
|
|
5912
5912
|
},
|
|
5913
5913
|
};
|
|
5914
|
-
var templateObject_1$
|
|
5914
|
+
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;
|
|
5915
5915
|
|
|
5916
|
-
var propsDoc$
|
|
5916
|
+
var propsDoc$12 = {
|
|
5917
5917
|
disabled: 'boolean',
|
|
5918
5918
|
min: 'number',
|
|
5919
5919
|
max: 'number',
|
|
5920
5920
|
step: 'number',
|
|
5921
5921
|
onValueChange: '(newValue: number) => void',
|
|
5922
5922
|
};
|
|
5923
|
-
var propTypes$
|
|
5923
|
+
var propTypes$16 = __assign({ disabled: bool, min: number, max: number, step: number, onValueChange: fun() }, spsGlobalPropTypes);
|
|
5924
5924
|
function SpsIncrementor(props) {
|
|
5925
5925
|
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']);
|
|
5926
5926
|
var _b = __read(React.useState(min || 0), 2), value = _b[0], setValue = _b[1];
|
|
@@ -5980,8 +5980,8 @@ function SpsIncrementor(props) {
|
|
|
5980
5980
|
React.createElement("i", { className: "sps-icon sps-icon-plus-sign", "aria-hidden": "true" })))));
|
|
5981
5981
|
}
|
|
5982
5982
|
Object.assign(SpsIncrementor, {
|
|
5983
|
-
props: propsDoc$
|
|
5984
|
-
propTypes: propTypes$
|
|
5983
|
+
props: propsDoc$12,
|
|
5984
|
+
propTypes: propTypes$16,
|
|
5985
5985
|
displayName: 'SpsIncrementor',
|
|
5986
5986
|
});
|
|
5987
5987
|
|
|
@@ -5991,12 +5991,116 @@ var SpsIncrementorExamples = {
|
|
|
5991
5991
|
description: 'info about incrementor',
|
|
5992
5992
|
examples: {
|
|
5993
5993
|
stacked: {
|
|
5994
|
-
react: code(templateObject_1$
|
|
5994
|
+
react: 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 "]))),
|
|
5995
|
+
},
|
|
5996
|
+
},
|
|
5997
|
+
},
|
|
5998
|
+
};
|
|
5999
|
+
var templateObject_1$A;
|
|
6000
|
+
|
|
6001
|
+
__assign({}, spsGlobalPropTypes);
|
|
6002
|
+
function SpsInsights(props) {
|
|
6003
|
+
var children = props.children;
|
|
6004
|
+
return React.createElement("div", { className: "insight-tile-wrapper" }, children);
|
|
6005
|
+
}
|
|
6006
|
+
|
|
6007
|
+
var propsDoc$11 = {
|
|
6008
|
+
horizontal: 'boolean',
|
|
6009
|
+
icon: 'SpsIcon',
|
|
6010
|
+
kind: 'SpsInsightTileKind',
|
|
6011
|
+
title: 'string',
|
|
6012
|
+
metric: 'number',
|
|
6013
|
+
partnerCount: 'number',
|
|
6014
|
+
totalPartners: 'number',
|
|
6015
|
+
};
|
|
6016
|
+
var propTypes$15 = __assign(__assign({}, spsGlobalPropTypes), { horizontal: bool, icon: enumValue(SpsIcon$1), kind: enumValue(SpsInsightTileKind), title: string, metric: number, partnerCount: number, totalPartners: number });
|
|
6017
|
+
function SpsInsightTile(props) {
|
|
6018
|
+
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"]);
|
|
6019
|
+
var classes = clsx(unsafelyReplaceClassName || 'sps-insight-tile', "sps-insight-tile--" + kind, className, horizontal && 'sps-insight-tile--horizontal', children && 'sps-insight-tile--has-detail');
|
|
6020
|
+
var t = React.useContext(I18nContext).t;
|
|
6021
|
+
var _c = __read((partnerCount
|
|
6022
|
+
? t('design-system:insightTile.partnerCount', {
|
|
6023
|
+
count: partnerCount,
|
|
6024
|
+
total: totalPartners,
|
|
6025
|
+
})
|
|
6026
|
+
: '').split('|'), 3), count = _c[0], ofText = _c[1], total = _c[2];
|
|
6027
|
+
return (React.createElement(React.Fragment, null,
|
|
6028
|
+
React.createElement("div", __assign({ className: classes }, rest),
|
|
6029
|
+
React.createElement("div", { className: "sps-insight-tile__body" },
|
|
6030
|
+
icon ? (React.createElement("i", { className: "sps-icon sps-icon-" + icon })) : (React.createElement("i", { className: "sps-icon sps-icon-" + SpsInsightTileIcons[kind] })),
|
|
6031
|
+
metric && React.createElement("div", { className: "sps-insight-tile__metric-count" }, metric),
|
|
6032
|
+
title && (React.createElement("div", { className: "sps-insight-tile__description" },
|
|
6033
|
+
React.createElement("div", { className: "sps-insight-tile__title",
|
|
6034
|
+
// Both Chrome & FF ignore -webkit-box-orient
|
|
6035
|
+
// in the actual CSS for some reason
|
|
6036
|
+
// Also the TS types don't think -webkit-box-orient
|
|
6037
|
+
// is a real CSS property
|
|
6038
|
+
style: { '-webkit-box-orient': 'vertical' } }, title),
|
|
6039
|
+
React.createElement("div", { className: "sps-insight-tile__detail" }, children)))),
|
|
6040
|
+
partnerCount && (React.createElement("div", { className: "sps-insight-tile__partner-count" },
|
|
6041
|
+
partnerCount === totalPartners ? (React.createElement("div", null, t('design-system:insightTile.all'))) : (React.createElement(React.Fragment, null,
|
|
6042
|
+
React.createElement("div", null, count),
|
|
6043
|
+
React.createElement("div", null, ofText),
|
|
6044
|
+
React.createElement("div", null, total))),
|
|
6045
|
+
React.createElement("div", { className: "sps-insight-tile__partners-text" }, t('design-system:insightTile.partners')))))));
|
|
6046
|
+
}
|
|
6047
|
+
Object.assign(SpsInsightTile, {
|
|
6048
|
+
props: propsDoc$11,
|
|
6049
|
+
propTypes: propTypes$15,
|
|
6050
|
+
displayName: 'SpsInsightTile',
|
|
6051
|
+
});
|
|
6052
|
+
|
|
6053
|
+
var SpsInsightTileExamples = {
|
|
6054
|
+
basic: {
|
|
6055
|
+
label: 'Basic Insight Tiles',
|
|
6056
|
+
examples: {
|
|
6057
|
+
basic: {
|
|
6058
|
+
jsx: 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 "]))),
|
|
6059
|
+
},
|
|
6060
|
+
},
|
|
6061
|
+
},
|
|
6062
|
+
details: {
|
|
6063
|
+
label: 'With Details',
|
|
6064
|
+
examples: {
|
|
6065
|
+
details: {
|
|
6066
|
+
jsx: 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 "]))),
|
|
6067
|
+
},
|
|
6068
|
+
},
|
|
6069
|
+
},
|
|
6070
|
+
partnerCount: {
|
|
6071
|
+
label: 'Partner Count',
|
|
6072
|
+
examples: {
|
|
6073
|
+
partnerCount: {
|
|
6074
|
+
jsx: 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 "]))),
|
|
6075
|
+
},
|
|
6076
|
+
},
|
|
6077
|
+
},
|
|
6078
|
+
clickHandler: {
|
|
6079
|
+
label: 'Adding a click handler',
|
|
6080
|
+
examples: {
|
|
6081
|
+
clickHandler: {
|
|
6082
|
+
jsx: 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 "]))),
|
|
6083
|
+
},
|
|
6084
|
+
},
|
|
6085
|
+
},
|
|
6086
|
+
alternateIcons: {
|
|
6087
|
+
label: 'Using alternate icons',
|
|
6088
|
+
examples: {
|
|
6089
|
+
alternateIcons: {
|
|
6090
|
+
jsx: 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 "]))),
|
|
6091
|
+
},
|
|
6092
|
+
},
|
|
6093
|
+
},
|
|
6094
|
+
horizontal: {
|
|
6095
|
+
label: 'Horizontal',
|
|
6096
|
+
examples: {
|
|
6097
|
+
horizontal: {
|
|
6098
|
+
jsx: 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 "]))),
|
|
5995
6099
|
},
|
|
5996
6100
|
},
|
|
5997
6101
|
},
|
|
5998
6102
|
};
|
|
5999
|
-
var templateObject_1$z;
|
|
6103
|
+
var templateObject_1$z, templateObject_2$w, templateObject_3$r, templateObject_4$k, templateObject_5$d, templateObject_6$a;
|
|
6000
6104
|
|
|
6001
6105
|
var propsDoc$10 = {
|
|
6002
6106
|
inline: 'boolean',
|
|
@@ -10497,6 +10601,10 @@ var MANIFEST = {
|
|
|
10497
10601
|
components: [SpsIncrementor],
|
|
10498
10602
|
examples: SpsIncrementorExamples,
|
|
10499
10603
|
},
|
|
10604
|
+
'Insight Tiles': {
|
|
10605
|
+
components: [SpsInsights, SpsInsightTile],
|
|
10606
|
+
examples: SpsInsightTileExamples,
|
|
10607
|
+
},
|
|
10500
10608
|
'Key Value Lists': {
|
|
10501
10609
|
components: [SpsKeyValueList, SpsKeyValueListItem],
|
|
10502
10610
|
examples: SpsKeyValueListExamples,
|
|
@@ -14688,4 +14796,4 @@ Object.assign(SpsVr, {
|
|
|
14688
14796
|
displayName: 'SpsDescriptionListTerm / SpsDt',
|
|
14689
14797
|
});
|
|
14690
14798
|
|
|
14691
|
-
export { ContentOrderExample, FauxChangeEvent, I18nContext, MANIFEST, OnBlurErrorKeys, PortalContext, SimpleDateUtils, SpsAddRemoveFormRowExamples, SpsAdvancedSearch, SpsAdvancedSearchExamples, SpsAutocomplete, SpsAutocompleteExamples, SpsButton, SpsButtonExamples, SpsButtonGroup, SpsCard, SpsCardExamples, SpsCardTabbedPane, SpsCardV2, SpsCardV2Footer, SpsCardV2Header, SpsCardV2Title, SpsCheckbox, SpsCheckboxDropdown, SpsCheckboxExamples, SpsClickableTag, SpsClickableTagExamples, SpsColumnChooser, SpsColumnChooserColumn, SpsColumnChooserExamples, SpsContentRow, SpsContentRowCol, SpsContentRowExamples, SpsContentRowExpansion, SpsCurrencyInput, SpsCurrencyInputExamples, SpsDateRangePicker, SpsDateRangePickerExamples, SpsDateRangePickerV2, SpsDateTime, SpsDatepicker, SpsDatepickerExamples, SpsDatepickerV2, SpsDatetimeExamples, SpsDd, SpsDescriptionList, SpsDescriptionListDefinition, SpsDescriptionListExamples, SpsDescriptionListTerm, SpsDl, SpsDropdown, SpsDropdownExamples, SpsDt, SpsFeedbackBlock, SpsFeedbackBlockExamples, SpsFieldset, SpsFieldsetExamples, SpsFilterPanel, SpsFilterPanelCap, SpsFilterPanelExamples, SpsFilterPanelFilterBox, SpsFilterPanelSection, SpsFocusedTask, SpsFocusedTaskActions, SpsFocusedTaskExamples, SpsForm, SpsFormArrayMeta, SpsFormComponentWrapper, SpsFormExamples, SpsFormFieldMeta, SpsFormGroupMeta, SpsFormMetaBase, SpsFormSetMeta, SpsGrowler, SpsGrowlerExamples, SpsI, SpsIcon, SpsIconButtonPanel, SpsIncrementor, SpsIncrementorExamples, SpsInputGroup, SpsKeyValueList, SpsKeyValueListExamples, SpsKeyValueListItem, SpsKeyValueTag, SpsKeyValueTagExamples, SpsLabel, SpsLabelExamples, SpsListActionBar, SpsListActionBarExamples, SpsListToolbar, SpsListToolbarExamples, SpsListToolbarSearch, SpsMicroBlock, SpsMicroBlockExamples, SpsMicroZeroState, SpsModal, SpsModalAction, SpsModalBody, SpsModalExamples, SpsModalFooter, SpsModalHeader, SpsModalOverlay, SpsModalV2, SpsModalV2Footer, SpsMultiSelect, SpsMultiSelectExamples, SpsMultiSelectTag, SpsPageSelector, SpsPageSubtitle, SpsPageTitle, SpsPageTitleExamples, SpsPagination, SpsPaginationExamples, SpsProductBar, SpsProductBarExamples, SpsProductBarTab, SpsProgressBar, SpsProgressBarExamples, SpsProgressRing, SpsRadioButton, SpsRadioButtonExamples, SpsScrollableContainer, SpsScrollableContainerExamples, SpsSearchResultsBar, SpsSearchResultsBarExamples, SpsSelect, SpsSelectExamples, SpsSideNav, SpsSideNavExamples, SpsSlackLink, SpsSlackLinkExamples, SpsSortingHeader, SpsSortingHeaderCell, SpsSortingHeaderExamples, SpsSpinner, SpsSpinnerExamples, SpsSplitButton, SpsSplitButtonExamples, SpsSummaryListColumn, SpsSummaryListExamples, SpsSummaryListExpansion, SpsSummaryListRow, SpsTab, SpsTabPanel, SpsTable, SpsTableBody, SpsTableCell, SpsTableExamples, SpsTableHead, SpsTableHeader, SpsTableRow, SpsTabsV2, SpsTag, SpsTagExamples, SpsTaskQueue, SpsTaskQueueExamples, SpsTbody, SpsTd, SpsTextInput, SpsTextInputExamples, SpsTextarea, SpsTextareaExamples, SpsTh, SpsThead, SpsTile, SpsTileList, SpsTileListExamples, SpsToggle, SpsToggleExamples, SpsTooltip, SpsTooltipExamples, SpsTr, SpsValidators, SpsVerticalRule, SpsVr, SpsWf, SpsWfDoc, SpsWfDs, SpsWfStep, SpsWizardExamples, SpsWizardSidebar, SpsWizardSubstep, SpsWorkflow, SpsWorkflowDocument, SpsWorkflowDocumentStatus, SpsWorkflowExamples, SpsWorkflowStep, SpsZeroState, SpsZeroStateExamples, TooltipVisibility, contentOf, date, dateConstraint, dateRange, findParentBranches, flipPosition, formArray, formControl, formGroup, getMember, getPosition, selectChildren, toggleTooltipState, useCheckDeprecatedProps, useDidUpdateEffect, useDocumentEventListener, useElementId, useForm, useGrowlers, useInputPopup, usePatchReducer, usePortal, useServerSideValidation, useSpsAction, useSpsForm, validate, weekOfMonth };
|
|
14799
|
+
export { ContentOrderExample, FauxChangeEvent, I18nContext, MANIFEST, OnBlurErrorKeys, PortalContext, SimpleDateUtils, SpsAddRemoveFormRowExamples, SpsAdvancedSearch, SpsAdvancedSearchExamples, SpsAutocomplete, SpsAutocompleteExamples, SpsButton, SpsButtonExamples, SpsButtonGroup, SpsCard, SpsCardExamples, SpsCardTabbedPane, SpsCardV2, SpsCardV2Footer, SpsCardV2Header, SpsCardV2Title, SpsCheckbox, SpsCheckboxDropdown, SpsCheckboxExamples, SpsClickableTag, SpsClickableTagExamples, SpsColumnChooser, SpsColumnChooserColumn, SpsColumnChooserExamples, SpsContentRow, SpsContentRowCol, SpsContentRowExamples, SpsContentRowExpansion, SpsCurrencyInput, SpsCurrencyInputExamples, SpsDateRangePicker, SpsDateRangePickerExamples, SpsDateRangePickerV2, SpsDateTime, SpsDatepicker, SpsDatepickerExamples, SpsDatepickerV2, SpsDatetimeExamples, SpsDd, SpsDescriptionList, SpsDescriptionListDefinition, SpsDescriptionListExamples, SpsDescriptionListTerm, SpsDl, SpsDropdown, SpsDropdownExamples, SpsDt, SpsFeedbackBlock, SpsFeedbackBlockExamples, SpsFieldset, SpsFieldsetExamples, SpsFilterPanel, SpsFilterPanelCap, SpsFilterPanelExamples, SpsFilterPanelFilterBox, SpsFilterPanelSection, SpsFocusedTask, SpsFocusedTaskActions, SpsFocusedTaskExamples, SpsForm, SpsFormArrayMeta, SpsFormComponentWrapper, SpsFormExamples, SpsFormFieldMeta, SpsFormGroupMeta, SpsFormMetaBase, SpsFormSetMeta, SpsGrowler, SpsGrowlerExamples, SpsI, SpsIcon, SpsIconButtonPanel, SpsIncrementor, SpsIncrementorExamples, SpsInputGroup, SpsInsightTile, SpsInsights, SpsKeyValueList, SpsKeyValueListExamples, SpsKeyValueListItem, SpsKeyValueTag, SpsKeyValueTagExamples, SpsLabel, SpsLabelExamples, SpsListActionBar, SpsListActionBarExamples, SpsListToolbar, SpsListToolbarExamples, SpsListToolbarSearch, SpsMicroBlock, SpsMicroBlockExamples, SpsMicroZeroState, SpsModal, SpsModalAction, SpsModalBody, SpsModalExamples, SpsModalFooter, SpsModalHeader, SpsModalOverlay, SpsModalV2, SpsModalV2Footer, SpsMultiSelect, SpsMultiSelectExamples, SpsMultiSelectTag, SpsPageSelector, SpsPageSubtitle, SpsPageTitle, SpsPageTitleExamples, SpsPagination, SpsPaginationExamples, SpsProductBar, SpsProductBarExamples, SpsProductBarTab, SpsProgressBar, SpsProgressBarExamples, SpsProgressRing, SpsRadioButton, SpsRadioButtonExamples, SpsScrollableContainer, SpsScrollableContainerExamples, SpsSearchResultsBar, SpsSearchResultsBarExamples, SpsSelect, SpsSelectExamples, SpsSideNav, SpsSideNavExamples, SpsSlackLink, SpsSlackLinkExamples, SpsSortingHeader, SpsSortingHeaderCell, SpsSortingHeaderExamples, SpsSpinner, SpsSpinnerExamples, SpsSplitButton, SpsSplitButtonExamples, SpsSummaryListColumn, SpsSummaryListExamples, SpsSummaryListExpansion, SpsSummaryListRow, SpsTab, SpsTabPanel, SpsTable, SpsTableBody, SpsTableCell, SpsTableExamples, SpsTableHead, SpsTableHeader, SpsTableRow, SpsTabsV2, SpsTag, SpsTagExamples, SpsTaskQueue, SpsTaskQueueExamples, SpsTbody, SpsTd, SpsTextInput, SpsTextInputExamples, SpsTextarea, SpsTextareaExamples, SpsTh, SpsThead, SpsTile, SpsTileList, SpsTileListExamples, SpsToggle, SpsToggleExamples, SpsTooltip, SpsTooltipExamples, SpsTr, SpsValidators, SpsVerticalRule, SpsVr, SpsWf, SpsWfDoc, SpsWfDs, SpsWfStep, SpsWizardExamples, SpsWizardSidebar, SpsWizardSubstep, SpsWorkflow, SpsWorkflowDocument, SpsWorkflowDocumentStatus, SpsWorkflowExamples, SpsWorkflowStep, SpsZeroState, SpsZeroStateExamples, TooltipVisibility, contentOf, date, dateConstraint, dateRange, findParentBranches, flipPosition, formArray, formControl, formGroup, getMember, getPosition, selectChildren, toggleTooltipState, useCheckDeprecatedProps, useDidUpdateEffect, useDocumentEventListener, useElementId, useForm, useGrowlers, useInputPopup, usePatchReducer, usePortal, useServerSideValidation, useSpsAction, useSpsForm, validate, weekOfMonth };
|