@dxc-technology/halstack-react 0.0.0-ff6c8bf → 0.0.0-ff78514
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/README.md +1 -2
- package/dist/index.d.mts +6589 -0
- package/dist/index.d.ts +6589 -0
- package/dist/index.js +13660 -0
- package/dist/index.mjs +13602 -0
- package/package.json +64 -66
- package/BackgroundColorContext.d.ts +0 -1
- package/BackgroundColorContext.js +0 -30
- package/HalstackContext.d.ts +0 -1246
- package/HalstackContext.js +0 -310
- package/accordion/Accordion.accessibility.test.js +0 -71
- package/accordion/Accordion.d.ts +0 -4
- package/accordion/Accordion.js +0 -171
- package/accordion/Accordion.stories.tsx +0 -241
- package/accordion/Accordion.test.js +0 -56
- package/accordion/types.d.ts +0 -57
- package/accordion/types.js +0 -5
- package/accordion-group/AccordionGroup.accessibility.test.js +0 -88
- package/accordion-group/AccordionGroup.d.ts +0 -7
- package/accordion-group/AccordionGroup.js +0 -101
- package/accordion-group/AccordionGroup.stories.tsx +0 -252
- package/accordion-group/AccordionGroup.test.js +0 -98
- package/accordion-group/AccordionGroupAccordion.d.ts +0 -4
- package/accordion-group/AccordionGroupAccordion.js +0 -31
- package/accordion-group/AccordionGroupContext.d.ts +0 -3
- package/accordion-group/AccordionGroupContext.js +0 -8
- package/accordion-group/types.d.ts +0 -67
- package/accordion-group/types.js +0 -5
- package/action-icon/ActionIcon.accessibility.test.js +0 -63
- package/action-icon/ActionIcon.d.ts +0 -4
- package/action-icon/ActionIcon.js +0 -48
- package/action-icon/ActionIcon.stories.tsx +0 -41
- package/action-icon/ActionIcon.test.js +0 -64
- package/action-icon/types.d.ts +0 -26
- package/action-icon/types.js +0 -5
- package/alert/Alert.accessibility.test.js +0 -95
- package/alert/Alert.d.ts +0 -4
- package/alert/Alert.js +0 -203
- package/alert/Alert.stories.tsx +0 -198
- package/alert/Alert.test.js +0 -75
- package/alert/types.d.ts +0 -49
- package/alert/types.js +0 -5
- package/badge/Badge.accessibility.test.js +0 -129
- package/badge/Badge.d.ts +0 -4
- package/badge/Badge.js +0 -161
- package/badge/Badge.stories.tsx +0 -210
- package/badge/Badge.test.js +0 -30
- package/badge/types.d.ts +0 -54
- package/badge/types.js +0 -5
- package/bleed/Bleed.d.ts +0 -3
- package/bleed/Bleed.js +0 -43
- package/bleed/Bleed.stories.tsx +0 -342
- package/bleed/types.d.ts +0 -37
- package/bleed/types.js +0 -5
- package/box/Box.accessibility.test.js +0 -33
- package/box/Box.d.ts +0 -4
- package/box/Box.js +0 -75
- package/box/Box.stories.tsx +0 -119
- package/box/Box.test.js +0 -13
- package/box/types.d.ts +0 -32
- package/box/types.js +0 -5
- package/breadcrumbs/Breadcrumbs.accessibility.test.d.ts +0 -1
- package/breadcrumbs/Breadcrumbs.accessibility.test.js +0 -96
- package/breadcrumbs/Breadcrumbs.d.ts +0 -4
- package/breadcrumbs/Breadcrumbs.js +0 -79
- package/breadcrumbs/Breadcrumbs.stories.tsx +0 -194
- package/breadcrumbs/Breadcrumbs.test.d.ts +0 -1
- package/breadcrumbs/Breadcrumbs.test.js +0 -169
- package/breadcrumbs/Item.d.ts +0 -4
- package/breadcrumbs/Item.js +0 -52
- package/breadcrumbs/dropdownTheme.d.ts +0 -53
- package/breadcrumbs/dropdownTheme.js +0 -62
- package/breadcrumbs/types.d.ts +0 -16
- package/breadcrumbs/types.js +0 -5
- package/bulleted-list/BulletedList.accessibility.test.js +0 -119
- package/bulleted-list/BulletedList.d.ts +0 -7
- package/bulleted-list/BulletedList.js +0 -92
- package/bulleted-list/BulletedList.stories.tsx +0 -115
- package/bulleted-list/types.d.ts +0 -38
- package/bulleted-list/types.js +0 -5
- package/button/Button.accessibility.test.js +0 -127
- package/button/Button.d.ts +0 -4
- package/button/Button.js +0 -121
- package/button/Button.stories.tsx +0 -325
- package/button/Button.test.js +0 -38
- package/button/types.d.ts +0 -57
- package/button/types.js +0 -5
- package/card/Card.accessibility.test.js +0 -36
- package/card/Card.d.ts +0 -4
- package/card/Card.js +0 -121
- package/card/Card.stories.tsx +0 -171
- package/card/Card.test.js +0 -39
- package/card/types.d.ts +0 -62
- package/card/types.js +0 -5
- package/checkbox/Checkbox.accessibility.test.js +0 -87
- package/checkbox/Checkbox.d.ts +0 -4
- package/checkbox/Checkbox.js +0 -215
- package/checkbox/Checkbox.stories.tsx +0 -222
- package/checkbox/Checkbox.test.js +0 -199
- package/checkbox/types.d.ts +0 -72
- package/checkbox/types.js +0 -5
- package/chip/Chip.accessibility.test.js +0 -67
- package/chip/Chip.d.ts +0 -4
- package/chip/Chip.js +0 -126
- package/chip/Chip.stories.tsx +0 -199
- package/chip/Chip.test.js +0 -41
- package/chip/types.d.ts +0 -45
- package/chip/types.js +0 -5
- package/common/coreTokens.d.ts +0 -237
- package/common/coreTokens.js +0 -184
- package/common/utils.d.ts +0 -1
- package/common/utils.js +0 -16
- package/common/variables.d.ts +0 -1392
- package/common/variables.js +0 -1264
- package/container/Container.d.ts +0 -4
- package/container/Container.js +0 -194
- package/container/Container.stories.tsx +0 -214
- package/container/types.d.ts +0 -74
- package/container/types.js +0 -5
- package/contextual-menu/ContextualMenu.accessibility.test.js +0 -97
- package/contextual-menu/ContextualMenu.d.ts +0 -5
- package/contextual-menu/ContextualMenu.js +0 -88
- package/contextual-menu/ContextualMenu.stories.tsx +0 -232
- package/contextual-menu/ContextualMenu.test.js +0 -205
- package/contextual-menu/GroupItem.d.ts +0 -4
- package/contextual-menu/GroupItem.js +0 -67
- package/contextual-menu/ItemAction.d.ts +0 -4
- package/contextual-menu/ItemAction.js +0 -51
- package/contextual-menu/MenuItem.d.ts +0 -4
- package/contextual-menu/MenuItem.js +0 -29
- package/contextual-menu/SingleItem.d.ts +0 -4
- package/contextual-menu/SingleItem.js +0 -38
- package/contextual-menu/types.d.ts +0 -58
- package/contextual-menu/types.js +0 -5
- package/date-input/Calendar.d.ts +0 -4
- package/date-input/Calendar.js +0 -214
- package/date-input/DateInput.accessibility.test.js +0 -228
- package/date-input/DateInput.d.ts +0 -4
- package/date-input/DateInput.js +0 -222
- package/date-input/DateInput.stories.tsx +0 -292
- package/date-input/DateInput.test.js +0 -808
- package/date-input/DatePicker.d.ts +0 -4
- package/date-input/DatePicker.js +0 -121
- package/date-input/YearPicker.d.ts +0 -4
- package/date-input/YearPicker.js +0 -100
- package/date-input/types.d.ts +0 -164
- package/date-input/types.js +0 -5
- package/dialog/Dialog.accessibility.test.js +0 -69
- package/dialog/Dialog.d.ts +0 -4
- package/dialog/Dialog.js +0 -93
- package/dialog/Dialog.stories.tsx +0 -371
- package/dialog/Dialog.test.js +0 -307
- package/dialog/types.d.ts +0 -36
- package/dialog/types.js +0 -5
- package/divider/Divider.accessibility.test.js +0 -33
- package/divider/Divider.d.ts +0 -4
- package/divider/Divider.js +0 -36
- package/divider/Divider.stories.tsx +0 -223
- package/divider/Divider.test.js +0 -38
- package/divider/types.d.ts +0 -21
- package/divider/types.js +0 -5
- package/dropdown/Dropdown.accessibility.test.js +0 -180
- package/dropdown/Dropdown.d.ts +0 -4
- package/dropdown/Dropdown.js +0 -321
- package/dropdown/Dropdown.stories.tsx +0 -427
- package/dropdown/Dropdown.test.js +0 -599
- package/dropdown/DropdownMenu.d.ts +0 -4
- package/dropdown/DropdownMenu.js +0 -63
- package/dropdown/DropdownMenuItem.d.ts +0 -4
- package/dropdown/DropdownMenuItem.js +0 -71
- package/dropdown/types.d.ts +0 -96
- package/dropdown/types.js +0 -5
- package/file-input/FileInput.accessibility.test.js +0 -160
- package/file-input/FileInput.d.ts +0 -4
- package/file-input/FileInput.js +0 -443
- package/file-input/FileInput.stories.tsx +0 -618
- package/file-input/FileInput.test.js +0 -396
- package/file-input/FileItem.d.ts +0 -4
- package/file-input/FileItem.js +0 -125
- package/file-input/types.d.ts +0 -129
- package/file-input/types.js +0 -5
- package/flex/Flex.d.ts +0 -4
- package/flex/Flex.js +0 -57
- package/flex/Flex.stories.tsx +0 -112
- package/flex/types.d.ts +0 -97
- package/flex/types.js +0 -5
- package/footer/Footer.accessibility.test.js +0 -125
- package/footer/Footer.d.ts +0 -4
- package/footer/Footer.js +0 -140
- package/footer/Footer.stories.tsx +0 -208
- package/footer/Footer.test.js +0 -85
- package/footer/Icons.d.ts +0 -3
- package/footer/Icons.js +0 -108
- package/footer/types.d.ts +0 -64
- package/footer/types.js +0 -5
- package/grid/Grid.d.ts +0 -7
- package/grid/Grid.js +0 -76
- package/grid/Grid.stories.tsx +0 -219
- package/grid/types.d.ts +0 -115
- package/grid/types.js +0 -5
- package/header/Header.accessibility.test.js +0 -93
- package/header/Header.d.ts +0 -8
- package/header/Header.js +0 -210
- package/header/Header.stories.tsx +0 -267
- package/header/Header.test.js +0 -66
- package/header/Icons.d.ts +0 -2
- package/header/Icons.js +0 -24
- package/header/types.d.ts +0 -33
- package/header/types.js +0 -5
- package/heading/Heading.accessibility.test.js +0 -33
- package/heading/Heading.d.ts +0 -4
- package/heading/Heading.js +0 -137
- package/heading/Heading.stories.tsx +0 -54
- package/heading/Heading.test.js +0 -169
- package/heading/types.d.ts +0 -33
- package/heading/types.js +0 -5
- package/icon/Icon.accessibility.test.js +0 -30
- package/icon/Icon.d.ts +0 -4
- package/icon/Icon.js +0 -33
- package/icon/Icon.stories.tsx +0 -28
- package/icon/types.d.ts +0 -4
- package/icon/types.js +0 -5
- package/image/Image.accessibility.test.js +0 -56
- package/image/Image.d.ts +0 -4
- package/image/Image.js +0 -70
- package/image/Image.stories.tsx +0 -129
- package/image/types.d.ts +0 -72
- package/image/types.js +0 -5
- package/inset/Inset.d.ts +0 -3
- package/inset/Inset.js +0 -43
- package/inset/Inset.stories.tsx +0 -230
- package/inset/types.d.ts +0 -37
- package/inset/types.js +0 -5
- package/layout/ApplicationLayout.d.ts +0 -20
- package/layout/ApplicationLayout.js +0 -137
- package/layout/ApplicationLayout.stories.tsx +0 -162
- package/layout/Icons.d.ts +0 -7
- package/layout/Icons.js +0 -48
- package/layout/types.d.ts +0 -41
- package/layout/types.js +0 -5
- package/link/Link.accessibility.test.js +0 -108
- package/link/Link.d.ts +0 -4
- package/link/Link.js +0 -117
- package/link/Link.stories.tsx +0 -253
- package/link/Link.test.js +0 -63
- package/link/types.d.ts +0 -54
- package/link/types.js +0 -5
- package/main.d.ts +0 -50
- package/main.js +0 -364
- package/nav-tabs/NavTabs.accessibility.test.js +0 -44
- package/nav-tabs/NavTabs.d.ts +0 -7
- package/nav-tabs/NavTabs.js +0 -93
- package/nav-tabs/NavTabs.stories.tsx +0 -279
- package/nav-tabs/NavTabs.test.js +0 -77
- package/nav-tabs/NavTabsContext.d.ts +0 -3
- package/nav-tabs/NavTabsContext.js +0 -8
- package/nav-tabs/Tab.d.ts +0 -4
- package/nav-tabs/Tab.js +0 -117
- package/nav-tabs/types.d.ts +0 -52
- package/nav-tabs/types.js +0 -5
- package/number-input/NumberInput.accessibility.test.js +0 -228
- package/number-input/NumberInput.d.ts +0 -4
- package/number-input/NumberInput.js +0 -86
- package/number-input/NumberInput.stories.tsx +0 -131
- package/number-input/NumberInput.test.js +0 -989
- package/number-input/NumberInputContext.d.ts +0 -3
- package/number-input/NumberInputContext.js +0 -8
- package/number-input/types.d.ts +0 -136
- package/number-input/types.js +0 -5
- package/paginator/Paginator.accessibility.test.js +0 -79
- package/paginator/Paginator.d.ts +0 -4
- package/paginator/Paginator.js +0 -138
- package/paginator/Paginator.stories.tsx +0 -87
- package/paginator/Paginator.test.js +0 -335
- package/paginator/types.d.ts +0 -38
- package/paginator/types.js +0 -5
- package/paragraph/Paragraph.accessibility.test.js +0 -28
- package/paragraph/Paragraph.d.ts +0 -5
- package/paragraph/Paragraph.js +0 -22
- package/paragraph/Paragraph.stories.tsx +0 -27
- package/password-input/PasswordInput.accessibility.test.js +0 -153
- package/password-input/PasswordInput.d.ts +0 -4
- package/password-input/PasswordInput.js +0 -97
- package/password-input/PasswordInput.stories.tsx +0 -99
- package/password-input/PasswordInput.test.js +0 -198
- package/password-input/types.d.ts +0 -111
- package/password-input/types.js +0 -5
- package/progress-bar/ProgressBar.accessibility.test.js +0 -35
- package/progress-bar/ProgressBar.d.ts +0 -4
- package/progress-bar/ProgressBar.js +0 -146
- package/progress-bar/ProgressBar.stories.tsx +0 -93
- package/progress-bar/ProgressBar.test.js +0 -93
- package/progress-bar/types.d.ts +0 -37
- package/progress-bar/types.js +0 -5
- package/quick-nav/QuickNav.accessibility.test.js +0 -57
- package/quick-nav/QuickNav.d.ts +0 -4
- package/quick-nav/QuickNav.js +0 -94
- package/quick-nav/QuickNav.stories.tsx +0 -356
- package/quick-nav/types.d.ts +0 -21
- package/quick-nav/types.js +0 -5
- package/radio-group/Radio.d.ts +0 -4
- package/radio-group/Radio.js +0 -124
- package/radio-group/RadioGroup.accessibility.test.js +0 -97
- package/radio-group/RadioGroup.d.ts +0 -4
- package/radio-group/RadioGroup.js +0 -236
- package/radio-group/RadioGroup.stories.tsx +0 -214
- package/radio-group/RadioGroup.test.js +0 -756
- package/radio-group/types.d.ts +0 -114
- package/radio-group/types.js +0 -5
- package/resultset-table/Icons.d.ts +0 -7
- package/resultset-table/Icons.js +0 -47
- package/resultset-table/ResultsetTable.accessibility.test.js +0 -285
- package/resultset-table/ResultsetTable.d.ts +0 -7
- package/resultset-table/ResultsetTable.js +0 -171
- package/resultset-table/ResultsetTable.stories.tsx +0 -413
- package/resultset-table/ResultsetTable.test.js +0 -381
- package/resultset-table/types.d.ts +0 -100
- package/resultset-table/types.js +0 -5
- package/select/Listbox.d.ts +0 -4
- package/select/Listbox.js +0 -155
- package/select/Option.d.ts +0 -4
- package/select/Option.js +0 -89
- package/select/Select.accessibility.test.js +0 -228
- package/select/Select.d.ts +0 -4
- package/select/Select.js +0 -602
- package/select/Select.stories.tsx +0 -919
- package/select/Select.test.js +0 -2265
- package/select/types.d.ts +0 -209
- package/select/types.js +0 -5
- package/sidenav/Sidenav.accessibility.test.js +0 -59
- package/sidenav/Sidenav.d.ts +0 -10
- package/sidenav/Sidenav.js +0 -201
- package/sidenav/Sidenav.stories.tsx +0 -277
- package/sidenav/Sidenav.test.js +0 -37
- package/sidenav/SidenavContext.d.ts +0 -5
- package/sidenav/SidenavContext.js +0 -13
- package/sidenav/types.d.ts +0 -76
- package/sidenav/types.js +0 -5
- package/slider/Slider.accessibility.test.js +0 -104
- package/slider/Slider.d.ts +0 -4
- package/slider/Slider.js +0 -286
- package/slider/Slider.stories.tsx +0 -180
- package/slider/Slider.test.js +0 -254
- package/slider/types.d.ts +0 -86
- package/slider/types.js +0 -5
- package/spinner/Spinner.accessibility.test.js +0 -96
- package/spinner/Spinner.d.ts +0 -4
- package/spinner/Spinner.js +0 -210
- package/spinner/Spinner.stories.tsx +0 -129
- package/spinner/Spinner.test.js +0 -55
- package/spinner/types.d.ts +0 -32
- package/spinner/types.js +0 -5
- package/status-light/StatusLight.accessibility.test.js +0 -157
- package/status-light/StatusLight.d.ts +0 -4
- package/status-light/StatusLight.js +0 -51
- package/status-light/StatusLight.stories.tsx +0 -74
- package/status-light/StatusLight.test.js +0 -25
- package/status-light/types.d.ts +0 -17
- package/status-light/types.js +0 -5
- package/switch/Switch.accessibility.test.js +0 -98
- package/switch/Switch.d.ts +0 -4
- package/switch/Switch.js +0 -214
- package/switch/Switch.stories.tsx +0 -149
- package/switch/Switch.test.js +0 -180
- package/switch/types.d.ts +0 -66
- package/switch/types.js +0 -5
- package/table/DropdownTheme.js +0 -62
- package/table/Table.accessibility.test.js +0 -93
- package/table/Table.d.ts +0 -8
- package/table/Table.js +0 -161
- package/table/Table.stories.tsx +0 -663
- package/table/Table.test.js +0 -113
- package/table/types.d.ts +0 -49
- package/table/types.js +0 -5
- package/tabs/Tab.d.ts +0 -4
- package/tabs/Tab.js +0 -117
- package/tabs/Tabs.accessibility.test.js +0 -56
- package/tabs/Tabs.d.ts +0 -4
- package/tabs/Tabs.js +0 -373
- package/tabs/Tabs.stories.tsx +0 -230
- package/tabs/Tabs.test.js +0 -276
- package/tabs/types.d.ts +0 -92
- package/tabs/types.js +0 -5
- package/tag/Tag.accessibility.test.js +0 -69
- package/tag/Tag.d.ts +0 -4
- package/tag/Tag.js +0 -151
- package/tag/Tag.stories.tsx +0 -152
- package/tag/Tag.test.js +0 -41
- package/tag/types.d.ts +0 -69
- package/tag/types.js +0 -5
- package/text-input/Suggestion.d.ts +0 -4
- package/text-input/Suggestion.js +0 -67
- package/text-input/Suggestions.d.ts +0 -4
- package/text-input/Suggestions.js +0 -94
- package/text-input/TextInput.accessibility.test.js +0 -321
- package/text-input/TextInput.d.ts +0 -4
- package/text-input/TextInput.js +0 -571
- package/text-input/TextInput.stories.tsx +0 -474
- package/text-input/TextInput.test.js +0 -1756
- package/text-input/types.d.ts +0 -205
- package/text-input/types.js +0 -5
- package/textarea/Textarea.accessibility.test.js +0 -155
- package/textarea/Textarea.d.ts +0 -4
- package/textarea/Textarea.js +0 -235
- package/textarea/Textarea.stories.tsx +0 -174
- package/textarea/Textarea.test.js +0 -406
- package/textarea/types.d.ts +0 -141
- package/textarea/types.js +0 -5
- package/toggle-group/ToggleGroup.accessibility.test.js +0 -107
- package/toggle-group/ToggleGroup.d.ts +0 -4
- package/toggle-group/ToggleGroup.js +0 -202
- package/toggle-group/ToggleGroup.stories.tsx +0 -218
- package/toggle-group/ToggleGroup.test.js +0 -137
- package/toggle-group/types.d.ts +0 -114
- package/toggle-group/types.js +0 -5
- package/typography/Typography.accessibility.test.js +0 -339
- package/typography/Typography.d.ts +0 -4
- package/typography/Typography.js +0 -23
- package/typography/Typography.stories.tsx +0 -198
- package/typography/types.d.ts +0 -18
- package/typography/types.js +0 -5
- package/useTheme.d.ts +0 -1145
- package/useTheme.js +0 -15
- package/useTranslatedLabels.d.ts +0 -85
- package/useTranslatedLabels.js +0 -14
- package/utils/BaseTypography.d.ts +0 -21
- package/utils/BaseTypography.js +0 -94
- package/utils/FocusLock.d.ts +0 -13
- package/utils/FocusLock.js +0 -124
- package/wizard/Wizard.accessibility.test.js +0 -55
- package/wizard/Wizard.d.ts +0 -4
- package/wizard/Wizard.js +0 -239
- package/wizard/Wizard.stories.tsx +0 -272
- package/wizard/Wizard.test.js +0 -114
- package/wizard/types.d.ts +0 -64
- package/wizard/types.js +0 -5
package/radio-group/types.d.ts
DELETED
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
export type Option = {
|
|
2
|
-
/**
|
|
3
|
-
* Label of the option placed next to the radio input.
|
|
4
|
-
*/
|
|
5
|
-
value: string;
|
|
6
|
-
/**
|
|
7
|
-
* Value of the option. It should be unique and
|
|
8
|
-
* not an empty string, which is reserved to the optional item added
|
|
9
|
-
* by 'optional' prop.
|
|
10
|
-
*/
|
|
11
|
-
label: string;
|
|
12
|
-
/**
|
|
13
|
-
* If true, disables the option.
|
|
14
|
-
*/
|
|
15
|
-
disabled?: boolean;
|
|
16
|
-
};
|
|
17
|
-
type RadioGroupProps = {
|
|
18
|
-
/**
|
|
19
|
-
* Text to be placed above the radio group.
|
|
20
|
-
*/
|
|
21
|
-
label?: string;
|
|
22
|
-
/**
|
|
23
|
-
* Name attribute of the input element. This attribute will allow users
|
|
24
|
-
* to find the component's value during the submit event.
|
|
25
|
-
*/
|
|
26
|
-
name?: string;
|
|
27
|
-
/**
|
|
28
|
-
* Helper text to be placed above the radio group.
|
|
29
|
-
*/
|
|
30
|
-
helperText?: string;
|
|
31
|
-
/**
|
|
32
|
-
* An array of objects representing the selectable options.
|
|
33
|
-
*/
|
|
34
|
-
options: Option[];
|
|
35
|
-
/**
|
|
36
|
-
* If true, the component will be disabled.
|
|
37
|
-
*/
|
|
38
|
-
disabled?: boolean;
|
|
39
|
-
/**
|
|
40
|
-
* If true, the radio group will be optional, showing
|
|
41
|
-
* (Optional) next to the label and adding a default last
|
|
42
|
-
* option with an empty string as value. Otherwise, the field will be
|
|
43
|
-
* considered required and an error will be passed as a parameter to the
|
|
44
|
-
* OnBlur functions if an option wasn't selected.
|
|
45
|
-
*/
|
|
46
|
-
optional?: boolean;
|
|
47
|
-
/**
|
|
48
|
-
* Label of the optional radio input.
|
|
49
|
-
*/
|
|
50
|
-
optionalItemLabel?: string;
|
|
51
|
-
/**
|
|
52
|
-
* If true, the component will not be mutable, meaning the user can not edit the control.
|
|
53
|
-
*/
|
|
54
|
-
readOnly?: boolean;
|
|
55
|
-
/**
|
|
56
|
-
* Sets the orientation of the options within the radio group.
|
|
57
|
-
*/
|
|
58
|
-
stacking?: "row" | "column";
|
|
59
|
-
/**
|
|
60
|
-
* Initial value of the radio group, only when it is uncontrolled.
|
|
61
|
-
*/
|
|
62
|
-
defaultValue?: string;
|
|
63
|
-
/**
|
|
64
|
-
* Value of the radio group. If undefined, the component will be
|
|
65
|
-
* uncontrolled and the value will be managed internally by the
|
|
66
|
-
* component.
|
|
67
|
-
*/
|
|
68
|
-
value?: string;
|
|
69
|
-
/**
|
|
70
|
-
* This function will be called when the user chooses an option. The new
|
|
71
|
-
* value will be passed to this function.
|
|
72
|
-
*/
|
|
73
|
-
onChange?: (value: string) => void;
|
|
74
|
-
/**
|
|
75
|
-
* This function will be called when the radio group loses the focus. An
|
|
76
|
-
* object including the value and the error will be passed to this
|
|
77
|
-
* function. If there is no error, error will not be defined.
|
|
78
|
-
*/
|
|
79
|
-
onBlur?: (val: {
|
|
80
|
-
value?: string;
|
|
81
|
-
error?: string;
|
|
82
|
-
}) => void;
|
|
83
|
-
/**
|
|
84
|
-
* If it is a defined value and also a truthy string, the component will
|
|
85
|
-
* change its appearance, showing the error below the radio group. If the
|
|
86
|
-
* defined value is an empty string, it will reserve a space below the
|
|
87
|
-
* component for a future error, but it would not change its look. In
|
|
88
|
-
* case of being undefined or null, both the appearance and the space for
|
|
89
|
-
* the error message would not be modified.
|
|
90
|
-
*/
|
|
91
|
-
error?: string;
|
|
92
|
-
/**
|
|
93
|
-
* Value of the tabindex attribute.
|
|
94
|
-
*/
|
|
95
|
-
tabIndex?: number;
|
|
96
|
-
};
|
|
97
|
-
/**
|
|
98
|
-
* Reference to the component.
|
|
99
|
-
*/
|
|
100
|
-
export type RefType = HTMLDivElement;
|
|
101
|
-
/**
|
|
102
|
-
* Single radio prop types.
|
|
103
|
-
*/
|
|
104
|
-
export type RadioProps = {
|
|
105
|
-
label: string;
|
|
106
|
-
checked: boolean;
|
|
107
|
-
onClick: () => void;
|
|
108
|
-
error?: string;
|
|
109
|
-
disabled: boolean;
|
|
110
|
-
focused: boolean;
|
|
111
|
-
readOnly: boolean;
|
|
112
|
-
tabIndex: number;
|
|
113
|
-
};
|
|
114
|
-
export default RadioGroupProps;
|
package/radio-group/types.js
DELETED
package/resultset-table/Icons.js
DELETED
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports["default"] = void 0;
|
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
var icons = {
|
|
10
|
-
arrowUp: /*#__PURE__*/_react["default"].createElement("svg", {
|
|
11
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
12
|
-
height: "24",
|
|
13
|
-
viewBox: "0 0 24 24",
|
|
14
|
-
width: "24",
|
|
15
|
-
fill: "currentColor"
|
|
16
|
-
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
17
|
-
d: "M0 0h24v24H0V0z",
|
|
18
|
-
fill: "none"
|
|
19
|
-
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
20
|
-
d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"
|
|
21
|
-
})),
|
|
22
|
-
arrowDown: /*#__PURE__*/_react["default"].createElement("svg", {
|
|
23
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
24
|
-
height: "24",
|
|
25
|
-
viewBox: "0 0 24 24",
|
|
26
|
-
width: "24",
|
|
27
|
-
fill: "currentColor"
|
|
28
|
-
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
29
|
-
d: "M0 0h24v24H0V0z",
|
|
30
|
-
fill: "none"
|
|
31
|
-
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
32
|
-
d: "M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
|
|
33
|
-
})),
|
|
34
|
-
bothArrows: /*#__PURE__*/_react["default"].createElement("svg", {
|
|
35
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
36
|
-
height: "24",
|
|
37
|
-
viewBox: "0 0 24 24",
|
|
38
|
-
width: "24",
|
|
39
|
-
fill: "currentColor"
|
|
40
|
-
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
41
|
-
d: "M0 0h24v24H0z",
|
|
42
|
-
fill: "none"
|
|
43
|
-
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
44
|
-
d: "M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z"
|
|
45
|
-
}))
|
|
46
|
-
};
|
|
47
|
-
var _default = exports["default"] = icons;
|
|
@@ -1,285 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
5
|
-
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
6
|
-
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
7
|
-
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
var _react2 = require("@testing-library/react");
|
|
10
|
-
var _axeHelper = require("../../test/accessibility/axe-helper.js");
|
|
11
|
-
var _ResultsetTable = _interopRequireDefault(require("./ResultsetTable.tsx"));
|
|
12
|
-
var _disabledRules = require("../../test/accessibility/rules/specific/resultset-table/disabledRules.js");
|
|
13
|
-
// TODO: REMOVE
|
|
14
|
-
|
|
15
|
-
var disabledRules = {
|
|
16
|
-
rules: _disabledRules.disabledRules.reduce(function (rulesObj, rule) {
|
|
17
|
-
rulesObj[rule] = {
|
|
18
|
-
enabled: false
|
|
19
|
-
};
|
|
20
|
-
return rulesObj;
|
|
21
|
-
}, {})
|
|
22
|
-
};
|
|
23
|
-
var deleteIcon = /*#__PURE__*/_react["default"].createElement("svg", {
|
|
24
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
25
|
-
height: "24",
|
|
26
|
-
viewBox: "0 0 24 24",
|
|
27
|
-
width: "24"
|
|
28
|
-
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
29
|
-
fill: "currentColor",
|
|
30
|
-
d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
|
|
31
|
-
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
32
|
-
d: "M0 0h24v24H0z",
|
|
33
|
-
fill: "none"
|
|
34
|
-
}));
|
|
35
|
-
|
|
36
|
-
// Mocking DOMRect for Radix Primitive Popover
|
|
37
|
-
global.globalThis = global;
|
|
38
|
-
global.DOMRect = {
|
|
39
|
-
fromRect: function fromRect() {
|
|
40
|
-
return {
|
|
41
|
-
top: 0,
|
|
42
|
-
left: 0,
|
|
43
|
-
bottom: 0,
|
|
44
|
-
right: 0,
|
|
45
|
-
width: 0,
|
|
46
|
-
height: 0
|
|
47
|
-
};
|
|
48
|
-
}
|
|
49
|
-
};
|
|
50
|
-
global.ResizeObserver = /*#__PURE__*/function () {
|
|
51
|
-
function ResizeObserver() {
|
|
52
|
-
(0, _classCallCheck2["default"])(this, ResizeObserver);
|
|
53
|
-
}
|
|
54
|
-
(0, _createClass2["default"])(ResizeObserver, [{
|
|
55
|
-
key: "observe",
|
|
56
|
-
value: function observe() {}
|
|
57
|
-
}, {
|
|
58
|
-
key: "unobserve",
|
|
59
|
-
value: function unobserve() {}
|
|
60
|
-
}, {
|
|
61
|
-
key: "disconnect",
|
|
62
|
-
value: function disconnect() {}
|
|
63
|
-
}]);
|
|
64
|
-
return ResizeObserver;
|
|
65
|
-
}();
|
|
66
|
-
var actions = [{
|
|
67
|
-
title: "icon",
|
|
68
|
-
onClick: function onClick() {},
|
|
69
|
-
options: [{
|
|
70
|
-
value: "1",
|
|
71
|
-
label: "Amazon with a very long text"
|
|
72
|
-
}, {
|
|
73
|
-
value: "2",
|
|
74
|
-
label: "Ebay"
|
|
75
|
-
}, {
|
|
76
|
-
value: "3",
|
|
77
|
-
label: "Apple"
|
|
78
|
-
}]
|
|
79
|
-
}, {
|
|
80
|
-
icon: "https://www.freepnglogos.com/uploads/facebook-logo-design-1.png",
|
|
81
|
-
title: "icon",
|
|
82
|
-
onClick: function onClick() {}
|
|
83
|
-
}, {
|
|
84
|
-
icon: deleteIcon,
|
|
85
|
-
title: "icon",
|
|
86
|
-
onClick: function onClick() {},
|
|
87
|
-
disabled: true
|
|
88
|
-
}, {
|
|
89
|
-
icon: deleteIcon,
|
|
90
|
-
title: "icon",
|
|
91
|
-
onClick: function onClick() {}
|
|
92
|
-
}];
|
|
93
|
-
var columns = [{
|
|
94
|
-
displayValue: "Id",
|
|
95
|
-
isSortable: false
|
|
96
|
-
}, {
|
|
97
|
-
displayValue: "Name",
|
|
98
|
-
isSortable: true
|
|
99
|
-
}, {
|
|
100
|
-
displayValue: "City",
|
|
101
|
-
isSortable: false
|
|
102
|
-
}];
|
|
103
|
-
var rows = [[{
|
|
104
|
-
displayValue: "001",
|
|
105
|
-
sortValue: "001"
|
|
106
|
-
}, {
|
|
107
|
-
displayValue: "Peter",
|
|
108
|
-
sortValue: "Peter"
|
|
109
|
-
}, {
|
|
110
|
-
displayValue: "Oviedo",
|
|
111
|
-
sortValue: "Oviedo"
|
|
112
|
-
}, {
|
|
113
|
-
displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
|
|
114
|
-
actions: actions
|
|
115
|
-
})
|
|
116
|
-
}], [{
|
|
117
|
-
displayValue: "002",
|
|
118
|
-
sortValue: "002"
|
|
119
|
-
}, {
|
|
120
|
-
displayValue: "Louis",
|
|
121
|
-
sortValue: "Louis"
|
|
122
|
-
}, {
|
|
123
|
-
displayValue: "Oviedo",
|
|
124
|
-
sortValue: "Oviedo"
|
|
125
|
-
}, {
|
|
126
|
-
displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
|
|
127
|
-
actions: actions
|
|
128
|
-
})
|
|
129
|
-
}], [{
|
|
130
|
-
displayValue: "003",
|
|
131
|
-
sortValue: "003"
|
|
132
|
-
}, {
|
|
133
|
-
displayValue: "Lana",
|
|
134
|
-
sortValue: "Lana"
|
|
135
|
-
}, {
|
|
136
|
-
displayValue: "Albacete",
|
|
137
|
-
sortValue: "Albacete"
|
|
138
|
-
}, {
|
|
139
|
-
displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
|
|
140
|
-
actions: actions
|
|
141
|
-
})
|
|
142
|
-
}], [{
|
|
143
|
-
displayValue: "004",
|
|
144
|
-
sortValue: "004"
|
|
145
|
-
}, {
|
|
146
|
-
displayValue: "Rick",
|
|
147
|
-
sortValue: "Rick"
|
|
148
|
-
}, {
|
|
149
|
-
displayValue: "Albacete",
|
|
150
|
-
sortValue: "Albacete"
|
|
151
|
-
}, {
|
|
152
|
-
displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
|
|
153
|
-
actions: actions
|
|
154
|
-
})
|
|
155
|
-
}], [{
|
|
156
|
-
displayValue: "005",
|
|
157
|
-
sortValue: "005"
|
|
158
|
-
}, {
|
|
159
|
-
displayValue: "Mark",
|
|
160
|
-
sortValue: "Mark"
|
|
161
|
-
}, {
|
|
162
|
-
displayValue: "Madrid",
|
|
163
|
-
sortValue: "Madrid"
|
|
164
|
-
}, {
|
|
165
|
-
displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
|
|
166
|
-
actions: actions
|
|
167
|
-
})
|
|
168
|
-
}], [{
|
|
169
|
-
displayValue: "006",
|
|
170
|
-
sortValue: "006"
|
|
171
|
-
}, {
|
|
172
|
-
displayValue: "Cris",
|
|
173
|
-
sortValue: "Cris"
|
|
174
|
-
}, {
|
|
175
|
-
displayValue: "Barcelona",
|
|
176
|
-
sortValue: "Barcelona"
|
|
177
|
-
}, {
|
|
178
|
-
displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
|
|
179
|
-
actions: actions
|
|
180
|
-
})
|
|
181
|
-
}], [{
|
|
182
|
-
displayValue: "007",
|
|
183
|
-
sortValue: "007"
|
|
184
|
-
}, {
|
|
185
|
-
displayValue: "Susan",
|
|
186
|
-
sortValue: "Susan"
|
|
187
|
-
}, {
|
|
188
|
-
displayValue: "Madrid",
|
|
189
|
-
sortValue: "Madrid"
|
|
190
|
-
}, {
|
|
191
|
-
displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
|
|
192
|
-
actions: actions
|
|
193
|
-
})
|
|
194
|
-
}], [{
|
|
195
|
-
displayValue: "008",
|
|
196
|
-
sortValue: "008"
|
|
197
|
-
}, {
|
|
198
|
-
displayValue: "Tina",
|
|
199
|
-
sortValue: "Tina"
|
|
200
|
-
}, {
|
|
201
|
-
displayValue: "Barcelona",
|
|
202
|
-
sortValue: "Barcelona"
|
|
203
|
-
}, {
|
|
204
|
-
displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
|
|
205
|
-
actions: actions
|
|
206
|
-
})
|
|
207
|
-
}], [{
|
|
208
|
-
displayValue: "009",
|
|
209
|
-
sortValue: "009"
|
|
210
|
-
}, {
|
|
211
|
-
displayValue: "Kevin",
|
|
212
|
-
sortValue: "Kevin"
|
|
213
|
-
}, {
|
|
214
|
-
displayValue: "Oviedo",
|
|
215
|
-
sortValue: "Oviedo"
|
|
216
|
-
}, {
|
|
217
|
-
displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
|
|
218
|
-
actions: actions
|
|
219
|
-
})
|
|
220
|
-
}], [{
|
|
221
|
-
displayValue: "010",
|
|
222
|
-
sortValue: "010"
|
|
223
|
-
}, {
|
|
224
|
-
displayValue: "Cosmin",
|
|
225
|
-
sortValue: "Cosmin"
|
|
226
|
-
}, {
|
|
227
|
-
displayValue: "Barcelona",
|
|
228
|
-
sortValue: "Barcelona"
|
|
229
|
-
}, {
|
|
230
|
-
displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
|
|
231
|
-
actions: actions
|
|
232
|
-
})
|
|
233
|
-
}]];
|
|
234
|
-
describe("Resultset Table input component accessibility tests", function () {
|
|
235
|
-
it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
|
|
236
|
-
var _render, container, results;
|
|
237
|
-
return _regenerator["default"].wrap(function _callee$(_context) {
|
|
238
|
-
while (1) switch (_context.prev = _context.next) {
|
|
239
|
-
case 0:
|
|
240
|
-
_render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
|
|
241
|
-
columns: columns,
|
|
242
|
-
rows: rows,
|
|
243
|
-
itemsPerPage: 2,
|
|
244
|
-
margin: "medium",
|
|
245
|
-
mode: "default",
|
|
246
|
-
itemsPerPageOptions: [2, 3],
|
|
247
|
-
showGoToPage: true
|
|
248
|
-
})), container = _render.container;
|
|
249
|
-
_context.next = 3;
|
|
250
|
-
return (0, _axeHelper.axe)(container, disabledRules);
|
|
251
|
-
case 3:
|
|
252
|
-
results = _context.sent;
|
|
253
|
-
expect(results).toHaveNoViolations();
|
|
254
|
-
case 5:
|
|
255
|
-
case "end":
|
|
256
|
-
return _context.stop();
|
|
257
|
-
}
|
|
258
|
-
}, _callee);
|
|
259
|
-
})));
|
|
260
|
-
it("Should not have basic accessibility issues for reduced mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
|
|
261
|
-
var _render2, container, results;
|
|
262
|
-
return _regenerator["default"].wrap(function _callee2$(_context2) {
|
|
263
|
-
while (1) switch (_context2.prev = _context2.next) {
|
|
264
|
-
case 0:
|
|
265
|
-
_render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
|
|
266
|
-
columns: columns,
|
|
267
|
-
rows: rows,
|
|
268
|
-
itemsPerPage: 2,
|
|
269
|
-
margin: "medium",
|
|
270
|
-
mode: "reduced",
|
|
271
|
-
itemsPerPageOptions: [2, 3],
|
|
272
|
-
showGoToPage: true
|
|
273
|
-
})), container = _render2.container;
|
|
274
|
-
_context2.next = 3;
|
|
275
|
-
return (0, _axeHelper.axe)(container, disabledRules);
|
|
276
|
-
case 3:
|
|
277
|
-
results = _context2.sent;
|
|
278
|
-
expect(results).toHaveNoViolations();
|
|
279
|
-
case 5:
|
|
280
|
-
case "end":
|
|
281
|
-
return _context2.stop();
|
|
282
|
-
}
|
|
283
|
-
}, _callee2);
|
|
284
|
-
})));
|
|
285
|
-
});
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import ResultsetTablePropsType from "./types";
|
|
3
|
-
declare const DxcResultsetTable: {
|
|
4
|
-
({ columns, rows, hidePaginator, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, margin, tabIndex, mode, }: ResultsetTablePropsType): JSX.Element;
|
|
5
|
-
ActionsCell: ({ actions }: import("../table/types").ActionCellsPropsType) => JSX.Element;
|
|
6
|
-
};
|
|
7
|
-
export default DxcResultsetTable;
|
|
@@ -1,171 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
var _typeof3 = require("@babel/runtime/helpers/typeof");
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports["default"] = void 0;
|
|
9
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
10
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
11
|
-
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
12
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
-
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
14
|
-
var _variables = require("../common/variables");
|
|
15
|
-
var _Paginator = _interopRequireDefault(require("../paginator/Paginator"));
|
|
16
|
-
var _Table = _interopRequireWildcard(require("../table/Table"));
|
|
17
|
-
var _useTheme = _interopRequireDefault(require("../useTheme"));
|
|
18
|
-
var _Icons = _interopRequireDefault(require("./Icons"));
|
|
19
|
-
var _utils = require("../common/utils");
|
|
20
|
-
var _coreTokens = _interopRequireDefault(require("../common/coreTokens"));
|
|
21
|
-
var _templateObject, _templateObject2, _templateObject3;
|
|
22
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
23
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
24
|
-
var normalizeSortValue = function normalizeSortValue(sortValue) {
|
|
25
|
-
return typeof sortValue === "string" ? sortValue.toUpperCase() : sortValue;
|
|
26
|
-
};
|
|
27
|
-
var sortArray = function sortArray(index, order, resultset) {
|
|
28
|
-
return resultset.slice().sort(function (element1, element2) {
|
|
29
|
-
var sortValueA = normalizeSortValue(element1[index].sortValue || element1[index].displayValue);
|
|
30
|
-
var sortValueB = normalizeSortValue(element2[index].sortValue || element2[index].displayValue);
|
|
31
|
-
var comparison = 0;
|
|
32
|
-
if ((0, _typeof2["default"])(sortValueA) === "object") {
|
|
33
|
-
comparison = -1;
|
|
34
|
-
} else if ((0, _typeof2["default"])(sortValueB) === "object") {
|
|
35
|
-
comparison = 1;
|
|
36
|
-
} else if (sortValueA > sortValueB) {
|
|
37
|
-
comparison = 1;
|
|
38
|
-
} else if (sortValueA < sortValueB) {
|
|
39
|
-
comparison = -1;
|
|
40
|
-
}
|
|
41
|
-
return order === "descending" ? comparison * -1 : comparison;
|
|
42
|
-
});
|
|
43
|
-
};
|
|
44
|
-
var getMinItemsPerPageIndex = function getMinItemsPerPageIndex(currentPageInternal, itemsPerPage, page) {
|
|
45
|
-
return currentPageInternal === 1 ? 0 : itemsPerPage * (page - 1);
|
|
46
|
-
};
|
|
47
|
-
var getMaxItemsPerPageIndex = function getMaxItemsPerPageIndex(minItemsPerPageIndex, itemsPerPage, resultset, page) {
|
|
48
|
-
return minItemsPerPageIndex + itemsPerPage > resultset.length ? resultset.length : itemsPerPage * page - 1;
|
|
49
|
-
};
|
|
50
|
-
var DxcResultsetTable = function DxcResultsetTable(_ref) {
|
|
51
|
-
var columns = _ref.columns,
|
|
52
|
-
rows = _ref.rows,
|
|
53
|
-
_ref$hidePaginator = _ref.hidePaginator,
|
|
54
|
-
hidePaginator = _ref$hidePaginator === void 0 ? false : _ref$hidePaginator,
|
|
55
|
-
_ref$showGoToPage = _ref.showGoToPage,
|
|
56
|
-
showGoToPage = _ref$showGoToPage === void 0 ? true : _ref$showGoToPage,
|
|
57
|
-
_ref$itemsPerPage = _ref.itemsPerPage,
|
|
58
|
-
itemsPerPage = _ref$itemsPerPage === void 0 ? 5 : _ref$itemsPerPage,
|
|
59
|
-
itemsPerPageOptions = _ref.itemsPerPageOptions,
|
|
60
|
-
itemsPerPageFunction = _ref.itemsPerPageFunction,
|
|
61
|
-
margin = _ref.margin,
|
|
62
|
-
_ref$tabIndex = _ref.tabIndex,
|
|
63
|
-
tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
|
|
64
|
-
_ref$mode = _ref.mode,
|
|
65
|
-
mode = _ref$mode === void 0 ? "default" : _ref$mode;
|
|
66
|
-
var colorsTheme = (0, _useTheme["default"])();
|
|
67
|
-
var _useState = (0, _react.useState)(1),
|
|
68
|
-
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
69
|
-
page = _useState2[0],
|
|
70
|
-
changePage = _useState2[1];
|
|
71
|
-
var _useState3 = (0, _react.useState)(-1),
|
|
72
|
-
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
73
|
-
sortColumnIndex = _useState4[0],
|
|
74
|
-
changeSortColumnIndex = _useState4[1];
|
|
75
|
-
var _useState5 = (0, _react.useState)("ascending"),
|
|
76
|
-
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
|
|
77
|
-
sortOrder = _useState6[0],
|
|
78
|
-
changeSortOrder = _useState6[1];
|
|
79
|
-
var minItemsPerPageIndex = (0, _react.useMemo)(function () {
|
|
80
|
-
return getMinItemsPerPageIndex(page, itemsPerPage, page);
|
|
81
|
-
}, [itemsPerPage, page]);
|
|
82
|
-
var maxItemsPerPageIndex = (0, _react.useMemo)(function () {
|
|
83
|
-
return getMaxItemsPerPageIndex(minItemsPerPageIndex, itemsPerPage, rows, page);
|
|
84
|
-
}, [itemsPerPage, minItemsPerPageIndex, page, rows]);
|
|
85
|
-
var sortedResultset = (0, _react.useMemo)(function () {
|
|
86
|
-
return sortColumnIndex !== -1 ? sortArray(sortColumnIndex, sortOrder, rows) : rows;
|
|
87
|
-
}, [sortColumnIndex, sortOrder, rows]);
|
|
88
|
-
var filteredResultset = (0, _react.useMemo)(function () {
|
|
89
|
-
return sortedResultset && sortedResultset.slice(minItemsPerPageIndex, maxItemsPerPageIndex + 1);
|
|
90
|
-
}, [sortedResultset, minItemsPerPageIndex, maxItemsPerPageIndex]);
|
|
91
|
-
var goToPage = function goToPage(newPage) {
|
|
92
|
-
changePage(newPage);
|
|
93
|
-
};
|
|
94
|
-
var changeSorting = function changeSorting(columnIndex) {
|
|
95
|
-
changePage(1);
|
|
96
|
-
changeSortColumnIndex(columnIndex);
|
|
97
|
-
changeSortOrder(sortColumnIndex === -1 || sortColumnIndex !== columnIndex ? "ascending" : sortOrder === "ascending" ? "descending" : "ascending");
|
|
98
|
-
};
|
|
99
|
-
(0, _react.useEffect)(function () {
|
|
100
|
-
if (!hidePaginator) {
|
|
101
|
-
rows.length > 0 ? changePage(1) : changePage(0);
|
|
102
|
-
}
|
|
103
|
-
}, [rows]);
|
|
104
|
-
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
105
|
-
theme: colorsTheme.table
|
|
106
|
-
}, /*#__PURE__*/_react["default"].createElement(DxcResultsetTableContainer, {
|
|
107
|
-
margin: margin
|
|
108
|
-
}, /*#__PURE__*/_react["default"].createElement(_Table["default"], {
|
|
109
|
-
mode: mode
|
|
110
|
-
}, /*#__PURE__*/_react["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement("tr", null, columns.map(function (column, index) {
|
|
111
|
-
return /*#__PURE__*/_react["default"].createElement("th", {
|
|
112
|
-
key: "tableHeader_".concat(index),
|
|
113
|
-
"aria-sort": column.isSortable ? sortColumnIndex === index ? sortOrder : "none" : undefined
|
|
114
|
-
}, /*#__PURE__*/_react["default"].createElement(HeaderContainer, {
|
|
115
|
-
role: column.isSortable ? "button" : undefined,
|
|
116
|
-
key: "headerContainer_".concat(index),
|
|
117
|
-
onClick: function onClick() {
|
|
118
|
-
column.isSortable && changeSorting(index);
|
|
119
|
-
},
|
|
120
|
-
tabIndex: column.isSortable ? tabIndex : -1,
|
|
121
|
-
isSortable: column.isSortable,
|
|
122
|
-
mode: mode,
|
|
123
|
-
"aria-label": column.isSortable ? "Sort column" : undefined
|
|
124
|
-
}, /*#__PURE__*/_react["default"].createElement("span", null, column.displayValue), column.isSortable && /*#__PURE__*/_react["default"].createElement(SortIcon, null, sortColumnIndex === index ? sortOrder === "ascending" ? _Icons["default"].arrowUp : _Icons["default"].arrowDown : _Icons["default"].bothArrows)));
|
|
125
|
-
}))), /*#__PURE__*/_react["default"].createElement("tbody", null, filteredResultset.map(function (cells, rowIndex) {
|
|
126
|
-
return /*#__PURE__*/_react["default"].createElement("tr", {
|
|
127
|
-
key: "resultSetTableCell_".concat(page, "_").concat(rowIndex)
|
|
128
|
-
}, cells.map(function (cellContent, cellIndex) {
|
|
129
|
-
return /*#__PURE__*/_react["default"].createElement("td", {
|
|
130
|
-
key: "resultSetTableCellContent_".concat(cellIndex)
|
|
131
|
-
}, cellContent.displayValue);
|
|
132
|
-
}));
|
|
133
|
-
}))), !hidePaginator && /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
|
|
134
|
-
totalItems: rows.length,
|
|
135
|
-
itemsPerPage: itemsPerPage,
|
|
136
|
-
itemsPerPageOptions: itemsPerPageOptions,
|
|
137
|
-
itemsPerPageFunction: itemsPerPageFunction,
|
|
138
|
-
currentPage: page,
|
|
139
|
-
showGoToPage: showGoToPage,
|
|
140
|
-
onPageChange: goToPage,
|
|
141
|
-
tabIndex: tabIndex
|
|
142
|
-
})));
|
|
143
|
-
};
|
|
144
|
-
var calculateWidth = function calculateWidth(margin) {
|
|
145
|
-
return "calc(100% - ".concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
|
|
146
|
-
};
|
|
147
|
-
var DxcResultsetTableContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (props) {
|
|
148
|
-
return calculateWidth(props.margin);
|
|
149
|
-
}, function (props) {
|
|
150
|
-
return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
|
|
151
|
-
}, function (props) {
|
|
152
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
|
|
153
|
-
}, function (props) {
|
|
154
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
|
|
155
|
-
}, function (props) {
|
|
156
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
|
|
157
|
-
}, function (props) {
|
|
158
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
|
|
159
|
-
});
|
|
160
|
-
var HeaderContainer = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n gap: ", ";\n width: fit-content;\n border: 1px solid transparent;\n border-radius: 2px;\n cursor: ", ";\n\n ", "\n"])), function (props) {
|
|
161
|
-
return props.theme.headerTextAlign === "center" ? "center" : props.theme.headerTextAlign === "right" ? "flex-end" : "flex-start";
|
|
162
|
-
}, _coreTokens["default"].spacing_8, function (props) {
|
|
163
|
-
return props.isSortable ? "pointer" : "default";
|
|
164
|
-
}, function (props) {
|
|
165
|
-
return props.isSortable && "&:focus {\n outline: #0095ff solid 2px;\n }";
|
|
166
|
-
});
|
|
167
|
-
var SortIcon = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n height: 14px;\n width: 14px;\n color: ", ";\n\n svg {\n height: 100%;\n width: 100%;\n }\n"])), function (props) {
|
|
168
|
-
return props.theme.sortIconColor;
|
|
169
|
-
});
|
|
170
|
-
DxcResultsetTable.ActionsCell = _Table.DxcActionsCell;
|
|
171
|
-
var _default = exports["default"] = DxcResultsetTable;
|