@servicetitan/design-system 11.3.1 → 11.4.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/dist/components/ActionMenu/ActionMenu.css +9 -9
- package/dist/components/ActionMenu/ActionMenu.css.map +1 -1
- package/dist/components/ActionMenu/index.css +9 -9
- package/dist/components/ActionMenu/index.css.map +1 -1
- package/dist/components/Announcement/Announcement.css +1 -1
- package/dist/components/Announcement/Announcement.css.map +1 -1
- package/dist/components/Announcement/index.css +1 -1
- package/dist/components/Announcement/index.css.map +1 -1
- package/dist/components/AnvilSelect/AnvilSelect.css +1 -1
- package/dist/components/AnvilSelect/AnvilSelect.css.map +1 -1
- package/dist/components/AnvilSelect/AnvilSelect.d.ts +7 -3
- package/dist/components/AnvilSelect/AnvilSelect.js +25 -8
- package/dist/components/AnvilSelect/AnvilSelect.js.map +1 -1
- package/dist/components/AnvilSelect/components/DrillIn.css +3 -3
- package/dist/components/AnvilSelect/components/DrillIn.css.map +1 -1
- package/dist/components/AnvilSelect/components/Trigger.css +32 -31
- package/dist/components/AnvilSelect/components/Trigger.css.map +1 -1
- package/dist/components/AnvilSelect/index.css +35 -34
- package/dist/components/AnvilSelect/index.css.map +1 -1
- package/dist/components/Avatar/Avatar.css +2 -2
- package/dist/components/Avatar/Avatar.css.map +1 -1
- package/dist/components/Avatar/index.css +2 -2
- package/dist/components/Avatar/index.css.map +1 -1
- package/dist/components/BackLink/BackLink.css +2 -2
- package/dist/components/BackLink/BackLink.css.map +1 -1
- package/dist/components/BackLink/index.css +2 -2
- package/dist/components/BackLink/index.css.map +1 -1
- package/dist/components/Backdrop/Backdrop.css +2 -2
- package/dist/components/Backdrop/Backdrop.css.map +1 -1
- package/dist/components/Backdrop/Backdrop.js +1 -1
- package/dist/components/Backdrop/Backdrop.js.map +1 -1
- package/dist/components/Backdrop/index.css +2 -2
- package/dist/components/Backdrop/index.css.map +1 -1
- package/dist/components/Banner/Banner.css +1 -1
- package/dist/components/Banner/Banner.css.map +1 -1
- package/dist/components/Banner/index.css +1 -1
- package/dist/components/Banner/index.css.map +1 -1
- package/dist/components/BodyText/BodyText.css +1 -1
- package/dist/components/BodyText/BodyText.css.map +1 -1
- package/dist/components/BodyText/index.css +1 -1
- package/dist/components/BodyText/index.css.map +1 -1
- package/dist/components/Breadcrumb/Breadcrumb.css +5 -5
- package/dist/components/Breadcrumb/Breadcrumb.css.map +1 -1
- package/dist/components/Breadcrumb/index.css +5 -5
- package/dist/components/Breadcrumb/index.css.map +1 -1
- package/dist/components/Button/Button.css +9 -9
- package/dist/components/Button/Button.css.map +1 -1
- package/dist/components/Button/index.css +9 -9
- package/dist/components/Button/index.css.map +1 -1
- package/dist/components/ButtonGroup/ButtonGroup.css.map +1 -1
- package/dist/components/ButtonGroup/index.css.map +1 -1
- package/dist/components/ButtonToggle/ButtonToggle.css +18 -18
- package/dist/components/ButtonToggle/ButtonToggle.css.map +1 -1
- package/dist/components/ButtonToggle/index.css +18 -18
- package/dist/components/ButtonToggle/index.css.map +1 -1
- package/dist/components/Card/Card.css +5 -5
- package/dist/components/Card/Card.css.map +1 -1
- package/dist/components/Card/CardSection.css +11 -11
- package/dist/components/Card/CardSection.css.map +1 -1
- package/dist/components/Card/index.css +16 -16
- package/dist/components/Card/index.css.map +1 -1
- package/dist/components/Checkbox/Checkbox.css +1 -1
- package/dist/components/Checkbox/Checkbox.css.map +1 -1
- package/dist/components/Checkbox/index.css +1 -1
- package/dist/components/Checkbox/index.css.map +1 -1
- package/dist/components/Collapsible/Collapsible.css +1 -1
- package/dist/components/Collapsible/Collapsible.css.map +1 -1
- package/dist/components/Collapsible/index.css +1 -1
- package/dist/components/Collapsible/index.css.map +1 -1
- package/dist/components/ColorPicker/ColorPicker.css +6 -6
- package/dist/components/ColorPicker/ColorPicker.css.map +1 -1
- package/dist/components/ColorPicker/index.css +6 -6
- package/dist/components/ColorPicker/index.css.map +1 -1
- package/dist/components/Container/Container.css +1 -1
- package/dist/components/Container/Container.css.map +1 -1
- package/dist/components/Container/index.css +1 -1
- package/dist/components/Container/index.css.map +1 -1
- package/dist/components/DataList/DataList.css +5 -5
- package/dist/components/DataList/DataList.css.map +1 -1
- package/dist/components/DataList/index.css +5 -5
- package/dist/components/DataList/index.css.map +1 -1
- package/dist/components/DatePicker/DatePicker.css +48 -11
- package/dist/components/DatePicker/DatePicker.css.map +1 -1
- package/dist/components/DatePicker/index.css +48 -11
- package/dist/components/DatePicker/index.css.map +1 -1
- package/dist/components/DateRangePicker/DateRangePicker.css +1 -1
- package/dist/components/DateRangePicker/DateRangePicker.css.map +1 -1
- package/dist/components/DateRangePicker/DateRangePicker.test.js +0 -1
- package/dist/components/DateRangePicker/DateRangePicker.test.js.map +1 -1
- package/dist/components/DateRangePicker/index.css +1 -1
- package/dist/components/DateRangePicker/index.css.map +1 -1
- package/dist/components/Dialog/Dialog.css.map +1 -1
- package/dist/components/Dialog/index.css.map +1 -1
- package/dist/components/Divider/Divider.css +3 -3
- package/dist/components/Divider/Divider.css.map +1 -1
- package/dist/components/Divider/index.css +3 -3
- package/dist/components/Divider/index.css.map +1 -1
- package/dist/components/Drawer/Drawer.css +6 -6
- package/dist/components/Drawer/Drawer.css.map +1 -1
- package/dist/components/Drawer/index.css +6 -6
- package/dist/components/Drawer/index.css.map +1 -1
- package/dist/components/Eyebrow/Eyebrow.css +2 -2
- package/dist/components/Eyebrow/Eyebrow.css.map +1 -1
- package/dist/components/Eyebrow/index.css +2 -2
- package/dist/components/Eyebrow/index.css.map +1 -1
- package/dist/components/FilePicker/FilePicker.css +5 -5
- package/dist/components/FilePicker/FilePicker.css.map +1 -1
- package/dist/components/FilePicker/index.css +5 -5
- package/dist/components/FilePicker/index.css.map +1 -1
- package/dist/components/FilterButton/FilterButton.css +2 -2
- package/dist/components/FilterButton/FilterButton.css.map +1 -1
- package/dist/components/FilterButton/index.css +2 -2
- package/dist/components/FilterButton/index.css.map +1 -1
- package/dist/components/FlowCard/FlowCardStep.css +31 -14
- package/dist/components/FlowCard/FlowCardStep.css.map +1 -1
- package/dist/components/FlowCard/FlowCardStep.js +5 -5
- package/dist/components/FlowCard/FlowCardStep.js.map +1 -1
- package/dist/components/FlowCard/index.css +31 -14
- package/dist/components/FlowCard/index.css.map +1 -1
- package/dist/components/Form/Form.css.map +1 -1
- package/dist/components/Form/index.css.map +1 -1
- package/dist/components/FormField/FormField.css +1 -1
- package/dist/components/FormField/FormField.css.map +1 -1
- package/dist/components/FormField/FormField.test.d.ts +1 -0
- package/dist/components/FormField/FormField.test.js +53 -0
- package/dist/components/FormField/FormField.test.js.map +1 -0
- package/dist/components/FormField/index.css +1 -1
- package/dist/components/FormField/index.css.map +1 -1
- package/dist/components/FormGroup/FormGroup.css +1 -1
- package/dist/components/FormGroup/FormGroup.css.map +1 -1
- package/dist/components/FormGroup/index.css +1 -1
- package/dist/components/FormGroup/index.css.map +1 -1
- package/dist/components/Frame/Frame.css +1 -1
- package/dist/components/Frame/Frame.css.map +1 -1
- package/dist/components/Frame/index.css +1 -1
- package/dist/components/Frame/index.css.map +1 -1
- package/dist/components/Grid/Grid.css +7 -7
- package/dist/components/Grid/Grid.css.map +1 -1
- package/dist/components/Grid/GridBreakpoints.css +10 -10
- package/dist/components/Grid/GridBreakpoints.css.map +1 -1
- package/dist/components/Grid/index.css +17 -17
- package/dist/components/Grid/index.css.map +1 -1
- package/dist/components/Headline/Headline.css +1 -1
- package/dist/components/Headline/Headline.css.map +1 -1
- package/dist/components/Headline/index.css +1 -1
- package/dist/components/Headline/index.css.map +1 -1
- package/dist/components/InlineEdit/InlineEdit.css +1 -1
- package/dist/components/InlineEdit/InlineEdit.css.map +1 -1
- package/dist/components/InlineEdit/index.css +1 -1
- package/dist/components/InlineEdit/index.css.map +1 -1
- package/dist/components/Input/Input.css +8 -8
- package/dist/components/Input/Input.css.map +1 -1
- package/dist/components/Input/index.css +8 -8
- package/dist/components/Input/index.css.map +1 -1
- package/dist/components/Label/Label.css +6 -6
- package/dist/components/Label/Label.css.map +1 -1
- package/dist/components/Label/index.css +6 -6
- package/dist/components/Label/index.css.map +1 -1
- package/dist/components/Link/Link.css +4 -4
- package/dist/components/Link/Link.css.map +1 -1
- package/dist/components/Link/index.css +4 -4
- package/dist/components/Link/index.css.map +1 -1
- package/dist/components/Mask/Mask.css +8 -1
- package/dist/components/Mask/Mask.css.map +1 -1
- package/dist/components/Mask/Mask.js +3 -1
- package/dist/components/Mask/Mask.js.map +1 -1
- package/dist/components/Mask/index.css +8 -1
- package/dist/components/Mask/index.css.map +1 -1
- package/dist/components/Modal/Modal.css +5 -5
- package/dist/components/Modal/Modal.css.map +1 -1
- package/dist/components/Modal/index.css +5 -5
- package/dist/components/Modal/index.css.map +1 -1
- package/dist/components/MoreDetails/MoreDetails.css +2 -2
- package/dist/components/MoreDetails/MoreDetails.css.map +1 -1
- package/dist/components/MoreDetails/index.css +2 -2
- package/dist/components/MoreDetails/index.css.map +1 -1
- package/dist/components/OptionList/Option.d.ts +14 -0
- package/dist/components/OptionList/Option.js +25 -5
- package/dist/components/OptionList/Option.js.map +1 -1
- package/dist/components/OptionList/OptionList.css +9 -7
- package/dist/components/OptionList/OptionList.css.map +1 -1
- package/dist/components/OptionList/OptionList.d.ts +4 -1
- package/dist/components/OptionList/OptionList.js +72 -3
- package/dist/components/OptionList/OptionList.js.map +1 -1
- package/dist/components/OptionList/index.css +9 -7
- package/dist/components/OptionList/index.css.map +1 -1
- package/dist/components/OptionList/index.d.ts +1 -0
- package/dist/components/OptionList/index.js +1 -0
- package/dist/components/OptionList/index.js.map +1 -1
- package/dist/components/Page/Page.css +9 -8
- package/dist/components/Page/Page.css.map +1 -1
- package/dist/components/Page/Page.d.ts +1 -1
- package/dist/components/Page/Page.js +3 -2
- package/dist/components/Page/Page.js.map +1 -1
- package/dist/components/Page/index.css +9 -8
- package/dist/components/Page/index.css.map +1 -1
- package/dist/components/Popover/Popover.css +6 -6
- package/dist/components/Popover/Popover.css.map +1 -1
- package/dist/components/Popover/Popover.js +1 -1
- package/dist/components/Popover/Popover.js.map +1 -1
- package/dist/components/Popover/Popover.test.d.ts +1 -0
- package/dist/components/Popover/Popover.test.js +73 -0
- package/dist/components/Popover/Popover.test.js.map +1 -0
- package/dist/components/Popover/index.css +6 -6
- package/dist/components/Popover/index.css.map +1 -1
- package/dist/components/ProgressBar/ProgressBar.css +19 -19
- package/dist/components/ProgressBar/ProgressBar.css.map +1 -1
- package/dist/components/ProgressBar/index.css +19 -19
- package/dist/components/ProgressBar/index.css.map +1 -1
- package/dist/components/ProgressCircle/ProgressCircle.css +5 -5
- package/dist/components/ProgressCircle/ProgressCircle.css.map +1 -1
- package/dist/components/ProgressCircle/index.css +5 -5
- package/dist/components/ProgressCircle/index.css.map +1 -1
- package/dist/components/ProgressTracker/ProgressTracker.css +2 -2
- package/dist/components/ProgressTracker/ProgressTracker.css.map +1 -1
- package/dist/components/ProgressTracker/ProgressTrackerStep.css +8 -12
- package/dist/components/ProgressTracker/ProgressTrackerStep.css.map +1 -1
- package/dist/components/ProgressTracker/index.css +10 -14
- package/dist/components/ProgressTracker/index.css.map +1 -1
- package/dist/components/Radio/Radio.css +2 -2
- package/dist/components/Radio/Radio.css.map +1 -1
- package/dist/components/Radio/index.css +2 -2
- package/dist/components/Radio/index.css.map +1 -1
- package/dist/components/Scroll/Scroll.css +1 -1
- package/dist/components/Scroll/Scroll.css.map +1 -1
- package/dist/components/Scroll/index.css +1 -1
- package/dist/components/Scroll/index.css.map +1 -1
- package/dist/components/Select/Select.css +51 -7
- package/dist/components/Select/Select.css.map +1 -1
- package/dist/components/Select/index.css +51 -7
- package/dist/components/Select/index.css.map +1 -1
- package/dist/components/SideNav/SideNav.css +4 -3
- package/dist/components/SideNav/SideNav.css.map +1 -1
- package/dist/components/SideNav/SideNav.js +1 -1
- package/dist/components/SideNav/SideNav.js.map +1 -1
- package/dist/components/SideNav/SideNavGroup.css.map +1 -1
- package/dist/components/SideNav/SideNavItem.css +37 -4
- package/dist/components/SideNav/SideNavItem.css.map +1 -1
- package/dist/components/SideNav/index.css +8 -7
- package/dist/components/SideNav/index.css.map +1 -1
- package/dist/components/Sidebar/Sidebar.css +18 -8
- package/dist/components/Sidebar/Sidebar.css.map +1 -1
- package/dist/components/Sidebar/Sidebar.js +53 -109
- package/dist/components/Sidebar/Sidebar.js.map +1 -1
- package/dist/components/Sidebar/SidebarSection.css +120 -1
- package/dist/components/Sidebar/SidebarSection.css.map +1 -1
- package/dist/components/Sidebar/index.css +19 -9
- package/dist/components/Sidebar/index.css.map +1 -1
- package/dist/components/Snackbar/Snackbar.css +7 -7
- package/dist/components/Snackbar/Snackbar.css.map +1 -1
- package/dist/components/Snackbar/index.css +7 -7
- package/dist/components/Snackbar/index.css.map +1 -1
- package/dist/components/Spinner/Spinner.css.map +1 -1
- package/dist/components/Spinner/index.css.map +1 -1
- package/dist/components/Stack/Stack.css +9 -0
- package/dist/components/Stack/Stack.css.map +1 -1
- package/dist/components/Stack/Stack.d.ts +1 -1
- package/dist/components/Stack/Stack.js +1 -1
- package/dist/components/Stack/Stack.js.map +1 -1
- package/dist/components/{StackItem → Stack}/StackItem.d.ts +0 -0
- package/dist/components/{StackItem → Stack}/StackItem.js +0 -0
- package/dist/components/Stack/StackItem.js.map +1 -0
- package/dist/components/Stack/index.css +9 -0
- package/dist/components/Stack/index.css.map +1 -1
- package/dist/components/Stack/index.d.ts +1 -0
- package/dist/components/Stack/index.js +1 -0
- package/dist/components/Stack/index.js.map +1 -1
- package/dist/components/StatusLight/StatusLight.css +7 -7
- package/dist/components/StatusLight/StatusLight.css.map +1 -1
- package/dist/components/StatusLight/index.css +7 -7
- package/dist/components/StatusLight/index.css.map +1 -1
- package/dist/components/Tab/Tab.css +19 -18
- package/dist/components/Tab/Tab.css.map +1 -1
- package/dist/components/Tab/index.css +19 -18
- package/dist/components/Tab/index.css.map +1 -1
- package/dist/components/TabGroup/TabGroup.css +4 -4
- package/dist/components/TabGroup/TabGroup.css.map +1 -1
- package/dist/components/TabGroup/index.css +4 -4
- package/dist/components/TabGroup/index.css.map +1 -1
- package/dist/components/Table/Table.css +11 -11
- package/dist/components/Table/Table.css.map +1 -1
- package/dist/components/Table/index.css +11 -11
- package/dist/components/Table/index.css.map +1 -1
- package/dist/components/Tag/Tag.css +4 -4
- package/dist/components/Tag/Tag.css.map +1 -1
- package/dist/components/Tag/index.css +4 -4
- package/dist/components/Tag/index.css.map +1 -1
- package/dist/components/Takeover/Takeover.css +2 -2
- package/dist/components/Takeover/Takeover.css.map +1 -1
- package/dist/components/Takeover/TakeoverFooter.css +4 -4
- package/dist/components/Takeover/TakeoverFooter.css.map +1 -1
- package/dist/components/Takeover/TakeoverHeader.css +5 -5
- package/dist/components/Takeover/TakeoverHeader.css.map +1 -1
- package/dist/components/Takeover/TakeoverSection.css +4 -4
- package/dist/components/Takeover/TakeoverSection.css.map +1 -1
- package/dist/components/Takeover/index.css +11 -11
- package/dist/components/Takeover/index.css.map +1 -1
- package/dist/components/Text/Text.css +1 -1
- package/dist/components/Text/Text.css.map +1 -1
- package/dist/components/Text/index.css +1 -1
- package/dist/components/Text/index.css.map +1 -1
- package/dist/components/TextArea/TextArea.css +6 -6
- package/dist/components/TextArea/TextArea.css.map +1 -1
- package/dist/components/TextArea/index.css +6 -6
- package/dist/components/TextArea/index.css.map +1 -1
- package/dist/components/Thumbnail/Thumbnail.css +1 -1
- package/dist/components/Thumbnail/Thumbnail.css.map +1 -1
- package/dist/components/Thumbnail/index.css +1 -1
- package/dist/components/Thumbnail/index.css.map +1 -1
- package/dist/components/TimePicker/TimePicker.css +10 -8
- package/dist/components/TimePicker/TimePicker.css.map +1 -1
- package/dist/components/TimePicker/index.css +10 -8
- package/dist/components/TimePicker/index.css.map +1 -1
- package/dist/components/Toast/Toast.css +12 -12
- package/dist/components/Toast/Toast.css.map +1 -1
- package/dist/components/Toast/ToastGroup.css +13 -13
- package/dist/components/Toast/ToastGroup.css.map +1 -1
- package/dist/components/Toast/index.css +13 -13
- package/dist/components/Toast/index.css.map +1 -1
- package/dist/components/ToggleSwitch/ToggleSwitch.css +2 -2
- package/dist/components/ToggleSwitch/ToggleSwitch.css.map +1 -1
- package/dist/components/ToggleSwitch/index.css +2 -2
- package/dist/components/ToggleSwitch/index.css.map +1 -1
- package/dist/components/Togglebox/Togglebox.css +1 -1
- package/dist/components/Togglebox/Togglebox.css.map +1 -1
- package/dist/components/Togglebox/index.css +1 -1
- package/dist/components/Togglebox/index.css.map +1 -1
- package/dist/components/Tooltip/Tooltip.css +4 -4
- package/dist/components/Tooltip/Tooltip.css.map +1 -1
- package/dist/components/Tooltip/index.css +4 -4
- package/dist/components/Tooltip/index.css.map +1 -1
- package/dist/components/index.css +488 -371
- package/dist/components/index.css.map +1 -1
- package/dist/components/index.d.ts +0 -1
- package/dist/components/index.js +0 -1
- package/dist/components/index.js.map +1 -1
- package/dist/global/index.css +1 -1
- package/dist/global/version.css +1 -1
- package/dist/internal/Overlay/Overlay.css.map +1 -1
- package/dist/internal/Overlay/index.css.map +1 -1
- package/dist/internal/Popper/Popper.css +4 -4
- package/dist/internal/Popper/Popper.css.map +1 -1
- package/dist/internal/Popper/Popper.js +11 -3
- package/dist/internal/Popper/Popper.js.map +1 -1
- package/dist/internal/Popper/index.css +4 -4
- package/dist/internal/Popper/index.css.map +1 -1
- package/dist/internal/Portal/Portal.js +3 -2
- package/dist/internal/Portal/Portal.js.map +1 -1
- package/dist/internal/index.css +4 -4
- package/dist/internal/index.css.map +1 -1
- package/dist/system-light.css +25 -9
- package/dist/system-light.css.map +1 -1
- package/dist/system-light.min.css +1 -1
- package/dist/system.css +527 -394
- package/dist/system.css.map +1 -1
- package/dist/system.min.css +2 -2
- package/dist/themes/index.css +17 -17
- package/dist/themes/index.css.map +1 -1
- package/dist/themes/kendo/index.css +16 -16
- package/dist/themes/kendo/index.css.map +1 -1
- package/dist/themes/semantic/index.css +1 -1
- package/dist/themes/semantic/index.css.map +1 -1
- package/dist/utilities/ThemeProvider.d.ts +1 -0
- package/dist/utilities/ThemeProvider.js +13 -9
- package/dist/utilities/ThemeProvider.js.map +1 -1
- package/dist/utilities/usePrefersColorScheme.js +11 -9
- package/dist/utilities/usePrefersColorScheme.js.map +1 -1
- package/package.json +9 -8
- package/dist/components/Sidebar/ToggleButton.d.ts +0 -18
- package/dist/components/Sidebar/ToggleButton.js +0 -33
- package/dist/components/Sidebar/ToggleButton.js.map +0 -1
- package/dist/components/StackItem/StackItem.css +0 -10
- package/dist/components/StackItem/StackItem.css.map +0 -1
- package/dist/components/StackItem/StackItem.js.map +0 -1
- package/dist/components/StackItem/index.css +0 -10
- package/dist/components/StackItem/index.css.map +0 -1
- package/dist/components/StackItem/index.d.ts +0 -1
- package/dist/components/StackItem/index.js +0 -2
- package/dist/components/StackItem/index.js.map +0 -1
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
/** @define Modal */
|
|
3
3
|
.Modal {
|
|
4
4
|
/* Set color on root of component. It can be overridden after the @include */
|
|
5
|
-
color: #
|
|
5
|
+
color: var(--colorsTextDefault, #040404);
|
|
6
6
|
/* Make sure font-family goes across entire component */
|
|
7
7
|
font-family: "Nunito Sans", sans-serif;
|
|
8
8
|
display: flex;
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
max-height: 90vh;
|
|
12
12
|
margin: 5vh auto;
|
|
13
13
|
box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
|
|
14
|
-
background: #ffffff;
|
|
14
|
+
background: var(--colorsSurfaceDefault, #ffffff);
|
|
15
15
|
border-radius: 6px;
|
|
16
16
|
}
|
|
17
17
|
.Modal:focus {
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
.Modal__header,
|
|
41
41
|
.Modal__content,
|
|
42
42
|
.Modal__footer {
|
|
43
|
-
background: #ffffff;
|
|
43
|
+
background: var(--colorsSurfaceDefault, #ffffff);
|
|
44
44
|
padding: 24px 32px;
|
|
45
45
|
}
|
|
46
46
|
|
|
@@ -71,13 +71,13 @@
|
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
.Modal__header {
|
|
74
|
-
border-bottom: 1px solid #dfe0e1;
|
|
74
|
+
border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
|
|
75
75
|
border-top-left-radius: 6px;
|
|
76
76
|
border-top-right-radius: 6px;
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
.Modal__footer {
|
|
80
|
-
border-top: 1px solid #dfe0e1;
|
|
80
|
+
border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
|
|
81
81
|
border-bottom-left-radius: 6px;
|
|
82
82
|
border-bottom-right-radius: 6px;
|
|
83
83
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Modal/Modal.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;AAWA;ACbC;EACA
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Modal/Modal.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;AAWA;ACbC;EACA;AAEA;EACA;EDYA;EACA;EACA;EACA;EACA;EACA,YAfc;EAgBd,YAnBkB;EAoBlB,eEfiB;;AFkBjB;EAAU;;AAGV;EAAkB;;;AAGnB;EAAa,WAxBQ;;;AAyBrB;EAAY,WAxBQ;;;AAyBpB;EAAY,WAxBQ;;;AAyBpB;EAAY,WAxBQ;;;AA0BpB;AAAA;AAAA;EAGC,YArCkB;EAsClB,SApCe;;;AAuChB;EACC,wBErCiB;EFsCjB,yBEtCiB;;;AFyClB;EACC,4BE1CiB;EF2CjB,2BE3CiB;;;AF8ClB;AAAA;EAEC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EAA8B;;;AAE9B;EACC;EACA,wBE9DiB;EF+DjB,yBE/DiB;;;AFkElB;EACC;EACA,2BEpEiB;EFqEjB,4BErEiB;;;AFwElB;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA,SEsBkB;;AFpBlB;EACC;;;AAIF;EAAyB;;;AACzB;EAAuB;;;AACvB;EAAwB;;;AACxB;EAAgC","file":"Modal.css"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
/** @define Modal */
|
|
3
3
|
.Modal {
|
|
4
4
|
/* Set color on root of component. It can be overridden after the @include */
|
|
5
|
-
color: #
|
|
5
|
+
color: var(--colorsTextDefault, #040404);
|
|
6
6
|
/* Make sure font-family goes across entire component */
|
|
7
7
|
font-family: "Nunito Sans", sans-serif;
|
|
8
8
|
display: flex;
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
max-height: 90vh;
|
|
12
12
|
margin: 5vh auto;
|
|
13
13
|
box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
|
|
14
|
-
background: #ffffff;
|
|
14
|
+
background: var(--colorsSurfaceDefault, #ffffff);
|
|
15
15
|
border-radius: 6px;
|
|
16
16
|
}
|
|
17
17
|
.Modal:focus {
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
.Modal__header,
|
|
41
41
|
.Modal__content,
|
|
42
42
|
.Modal__footer {
|
|
43
|
-
background: #ffffff;
|
|
43
|
+
background: var(--colorsSurfaceDefault, #ffffff);
|
|
44
44
|
padding: 24px 32px;
|
|
45
45
|
}
|
|
46
46
|
|
|
@@ -71,13 +71,13 @@
|
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
.Modal__header {
|
|
74
|
-
border-bottom: 1px solid #dfe0e1;
|
|
74
|
+
border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
|
|
75
75
|
border-top-left-radius: 6px;
|
|
76
76
|
border-top-right-radius: 6px;
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
.Modal__footer {
|
|
80
|
-
border-top: 1px solid #dfe0e1;
|
|
80
|
+
border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
|
|
81
81
|
border-bottom-left-radius: 6px;
|
|
82
82
|
border-bottom-right-radius: 6px;
|
|
83
83
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Modal/Modal.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;AAWA;ACbC;EACA
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Modal/Modal.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;AAWA;ACbC;EACA;AAEA;EACA;EDYA;EACA;EACA;EACA;EACA;EACA,YAfc;EAgBd,YAnBkB;EAoBlB,eEfiB;;AFkBjB;EAAU;;AAGV;EAAkB;;;AAGnB;EAAa,WAxBQ;;;AAyBrB;EAAY,WAxBQ;;;AAyBpB;EAAY,WAxBQ;;;AAyBpB;EAAY,WAxBQ;;;AA0BpB;AAAA;AAAA;EAGC,YArCkB;EAsClB,SApCe;;;AAuChB;EACC,wBErCiB;EFsCjB,yBEtCiB;;;AFyClB;EACC,4BE1CiB;EF2CjB,2BE3CiB;;;AF8ClB;AAAA;EAEC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EAA8B;;;AAE9B;EACC;EACA,wBE9DiB;EF+DjB,yBE/DiB;;;AFkElB;EACC;EACA,2BEpEiB;EFqEjB,4BErEiB;;;AFwElB;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA,SEsBkB;;AFpBlB;EACC;;;AAIF;EAAyB;;;AACzB;EAAuB;;;AACvB;EAAwB;;;AACxB;EAAgC","file":"index.css"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
.MoreDetailsIcon {
|
|
2
2
|
display: inline-flex;
|
|
3
|
-
background-color: #eeeeee;
|
|
3
|
+
background-color: var(--colorsSurfaceGrey, #eeeeee);
|
|
4
4
|
border-radius: 50%;
|
|
5
|
-
color: #737475;
|
|
5
|
+
color: var(--colorsTextSubdued, #737475);
|
|
6
6
|
margin-left: 4px;
|
|
7
7
|
font-family: "Nunito Sans", sans-serif;
|
|
8
8
|
line-height: 1.5;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../src/components/MoreDetails/MoreDetails.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../src/components/MoreDetails/MoreDetails.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAKA;EACC;EACA,kBALoB;EAMpB;EACA,OANc;EAOd,aCyHc;EDxHd,aCmIkB;EDlIlB,aCiIkB;EDhIlB,WC0Ha;;ADxHb;EACC,WCwHY;;ADrHb;EACC,WCmHY;;ADhHb;EACC,WC8GY;;AD3Gb;EACC,WCyGY","file":"MoreDetails.css"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
.MoreDetailsIcon {
|
|
2
2
|
display: inline-flex;
|
|
3
|
-
background-color: #eeeeee;
|
|
3
|
+
background-color: var(--colorsSurfaceGrey, #eeeeee);
|
|
4
4
|
border-radius: 50%;
|
|
5
|
-
color: #737475;
|
|
5
|
+
color: var(--colorsTextSubdued, #737475);
|
|
6
6
|
margin-left: 4px;
|
|
7
7
|
font-family: "Nunito Sans", sans-serif;
|
|
8
8
|
line-height: 1.5;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../src/components/MoreDetails/MoreDetails.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../src/components/MoreDetails/MoreDetails.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAKA;EACC;EACA,kBALoB;EAMpB;EACA,OANc;EAOd,aCyHc;EDxHd,aCmIkB;EDlIlB,aCiIkB;EDhIlB,WC0Ha;;ADxHb;EACC,WCwHY;;ADrHb;EACC,WCmHY;;ADhHb;EACC,WC8GY;;AD3Gb;EACC,WCyGY","file":"index.css"}
|
|
@@ -10,8 +10,12 @@ export interface SingleOptionPropStrict {
|
|
|
10
10
|
content?: React.ReactNode | string;
|
|
11
11
|
/** Indicates whether the option is disabled or not. It makes the option unselectable */
|
|
12
12
|
disabled?: boolean;
|
|
13
|
+
/** Function to allow OptionList to set focus */
|
|
14
|
+
getFocus?: (value: any) => boolean;
|
|
13
15
|
/** Indeterminate visual for a checkbox */
|
|
14
16
|
indeterminate?: boolean;
|
|
17
|
+
/** Function to allow OptionList to set indeterminate */
|
|
18
|
+
getIndeterminate?: (value: any) => boolean;
|
|
15
19
|
/** Provides tree-type styling to option, and ARIA label. Can be automatically calculated. */
|
|
16
20
|
level?: number;
|
|
17
21
|
/** Visual that an option is loading. Used when child options need to be brought in on expand */
|
|
@@ -26,8 +30,12 @@ export interface SingleOptionPropStrict {
|
|
|
26
30
|
secondaryAction?: React.ReactNode;
|
|
27
31
|
/** Whether or not the option is selected */
|
|
28
32
|
selected?: boolean;
|
|
33
|
+
/** Function to allow OptionList to set selected */
|
|
34
|
+
getSelected?: (value: any) => boolean;
|
|
29
35
|
/** Prevents a user from selecting the option, without giving it the disabled styling/state */
|
|
30
36
|
readOnly?: boolean;
|
|
37
|
+
/** Function to pass option data (value, DOM element) to OptionList */
|
|
38
|
+
registerOption?: (optionData: RegisterOptionData) => void;
|
|
31
39
|
/** The default string of an option in the trigger of the Select */
|
|
32
40
|
text?: string;
|
|
33
41
|
/** Value of the option, passed into Anvil's Checkbox value */
|
|
@@ -37,4 +45,10 @@ export interface SingleOptionProps extends SingleOptionPropStrict {
|
|
|
37
45
|
/** Unstrict Props */
|
|
38
46
|
[propName: string]: any;
|
|
39
47
|
}
|
|
48
|
+
export interface RegisterOptionData {
|
|
49
|
+
text?: SingleOptionProps['string'];
|
|
50
|
+
value?: SingleOptionProps['value'];
|
|
51
|
+
disabled?: SingleOptionProps['disabled'];
|
|
52
|
+
element?: HTMLDivElement | null;
|
|
53
|
+
}
|
|
40
54
|
export declare const Option: FC<SingleOptionProps>;
|
|
@@ -9,13 +9,25 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import React from 'react';
|
|
12
|
+
import React, { useLayoutEffect, useRef } from 'react';
|
|
13
13
|
import { Checkbox } from '../Checkbox';
|
|
14
14
|
import { Spinner } from '../Spinner';
|
|
15
15
|
import { Button } from '../Button';
|
|
16
16
|
import classnames from 'classnames';
|
|
17
17
|
export const Option = (_a) => {
|
|
18
|
-
var { className, collapseControl, collapsed, content, disabled, focus, indeterminate, label, level, loading, onChange, onExpand, onKeyDown, options, readOnly, secondaryAction, selected, selfObject, text, value } = _a, props = __rest(_a, ["className", "collapseControl", "collapsed", "content", "disabled", "focus", "indeterminate", "label", "level", "loading", "onChange", "onExpand", "onKeyDown", "options", "readOnly", "secondaryAction", "selected", "selfObject", "text", "value"]);
|
|
18
|
+
var { className, collapseControl, collapsed, content, disabled, focus, getFocus, indeterminate, getIndeterminate, label, level, loading, onChange, onExpand, onKeyDown, options, readOnly, registerOption, secondaryAction, selected, getSelected, selfObject, text, value } = _a, props = __rest(_a, ["className", "collapseControl", "collapsed", "content", "disabled", "focus", "getFocus", "indeterminate", "getIndeterminate", "label", "level", "loading", "onChange", "onExpand", "onKeyDown", "options", "readOnly", "registerOption", "secondaryAction", "selected", "getSelected", "selfObject", "text", "value"]);
|
|
19
|
+
// after the component has rendered, pass the option data to registerOption
|
|
20
|
+
const checkboxRef = useRef(null);
|
|
21
|
+
useLayoutEffect(() => {
|
|
22
|
+
if (registerOption) {
|
|
23
|
+
registerOption({
|
|
24
|
+
text,
|
|
25
|
+
value,
|
|
26
|
+
disabled,
|
|
27
|
+
element: checkboxRef.current,
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
});
|
|
19
31
|
const OptionClasses = classnames('OptionList__option', className, {
|
|
20
32
|
'OptionList__option--selected': selected,
|
|
21
33
|
'OptionList__option--disabled': disabled,
|
|
@@ -53,10 +65,10 @@ export const Option = (_a) => {
|
|
|
53
65
|
const handleOnClick = () => {
|
|
54
66
|
return onExpand(value);
|
|
55
67
|
};
|
|
56
|
-
const handleOnChange = () => {
|
|
68
|
+
const handleOnChange = (value, checked) => {
|
|
57
69
|
if (readOnly || onChange === undefined)
|
|
58
70
|
return;
|
|
59
|
-
return onChange(value,
|
|
71
|
+
return onChange(value, checked, options, selfObject);
|
|
60
72
|
};
|
|
61
73
|
const handleOnKeyDown = (e) => {
|
|
62
74
|
if (onKeyDown === undefined)
|
|
@@ -65,7 +77,15 @@ export const Option = (_a) => {
|
|
|
65
77
|
};
|
|
66
78
|
return (React.createElement("div", Object.assign({ className: OptionClasses, "aria-level": level }, props),
|
|
67
79
|
getLoading() || getCollapseButton(),
|
|
68
|
-
React.createElement(Checkbox, {
|
|
80
|
+
React.createElement(Checkbox, { ref: checkboxRef, checked: selected != null
|
|
81
|
+
? selected
|
|
82
|
+
: getSelected
|
|
83
|
+
? getSelected(value)
|
|
84
|
+
: null, disabled: disabled, focus: focus != null ? focus : getFocus ? getFocus(value) : null, indeterminate: indeterminate != null
|
|
85
|
+
? indeterminate
|
|
86
|
+
: getIndeterminate
|
|
87
|
+
? getIndeterminate(value)
|
|
88
|
+
: null, label: getLabel(), onChange: handleOnChange, onKeyDown: handleOnKeyDown, value: value }),
|
|
69
89
|
getSecondaryAction()));
|
|
70
90
|
};
|
|
71
91
|
//# sourceMappingURL=Option.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Option.js","sourceRoot":"","sources":["../../../src/components/OptionList/Option.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Option.js","sourceRoot":"","sources":["../../../src/components/OptionList/Option.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,12 +6,12 @@
|
|
|
6
6
|
right: 0;
|
|
7
7
|
top: 0;
|
|
8
8
|
bottom: 0;
|
|
9
|
-
background-color:
|
|
9
|
+
background-color: var(--colorsSurfaceGrey, #eeeeee);
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
.OptionList {
|
|
13
13
|
/* Set color on root of component. It can be overridden after the @include */
|
|
14
|
-
color: #
|
|
14
|
+
color: var(--colorsTextDefault, #040404);
|
|
15
15
|
/* Make sure font-family goes across entire component */
|
|
16
16
|
font-family: "Nunito Sans", sans-serif;
|
|
17
17
|
}
|
|
@@ -50,11 +50,13 @@
|
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
.OptionList--single-select .OptionList__option--selected {
|
|
53
|
-
color: #
|
|
54
|
-
|
|
53
|
+
background-color: var(--colorsHoverPrimary, #ecf4fd);
|
|
54
|
+
}
|
|
55
|
+
.OptionList--single-select .OptionList__option--selected .Checkbox__label {
|
|
56
|
+
color: var(--colorsTextPrimary, #2270ee);
|
|
55
57
|
}
|
|
56
58
|
.OptionList--single-select .OptionList__option--selected:hover::before, .OptionList--single-select .OptionList__option--selected:focus-within::before {
|
|
57
|
-
background-color: #ecf4fd;
|
|
59
|
+
background-color: var(--colorsHoverPrimary, #ecf4fd);
|
|
58
60
|
}
|
|
59
61
|
|
|
60
62
|
/* Produces padding equal to the depth of the option. 8 is an arbitrary stopping point */
|
|
@@ -131,14 +133,14 @@
|
|
|
131
133
|
align-items: center;
|
|
132
134
|
padding-left: 24px;
|
|
133
135
|
z-index: 2;
|
|
134
|
-
background: linear-gradient(to left, #eeeeee 70%, #eeeeee 71%,
|
|
136
|
+
background: linear-gradient(to left, var(--colorsSurfaceGrey, #eeeeee) 70%, var(--colorsSurfaceGrey, #eeeeee) 71%, transparent 100%);
|
|
135
137
|
/* Match the background color of the single selected option */
|
|
136
138
|
}
|
|
137
139
|
.OptionList__option:hover .OptionList__option--secondary-action {
|
|
138
140
|
opacity: 1;
|
|
139
141
|
}
|
|
140
142
|
.OptionList--single-select .Checkbox--checked + .OptionList__option--secondary-action {
|
|
141
|
-
background: linear-gradient(to left, #ecf4fd 70%, #ecf4fd 71%,
|
|
143
|
+
background: linear-gradient(to left, var(--colorsHoverPrimary, #ecf4fd) 70%, var(--colorsHoverPrimary, #ecf4fd) 71%, transparent 100%);
|
|
142
144
|
}
|
|
143
145
|
|
|
144
146
|
/*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/OptionList/OptionList.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/OptionList/OptionList.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACQC;EACC;EACA;EACA;EACA;EACA;EACA;EACA,kBAXwB;;;AAe1B;AClBC;EACA;AAEA;EACA;;;ADkBD;AAEC;EACC;;;AAIF;AACA;EACC,eExBiB;EFyBjB;EACA;AAgBA;;AATA;EACC,WE4FY;EF3FZ,aE+DoB;EF9DpB;EACA;;AAGD;EAAc;;AAGd;EAAwB;;AACxB;EAAiB;;;AAGlB;EACC,gBEmEW;EFlEX,cEmEW;;;AF/DX;EAKC,kBA/DyB;;AA2DzB;EACC,OA1DkB;;AAiElB;EAAY,kBAnEY;;;AAwE3B;AACA;EAAsC,cEgD1B;;;AF5CV;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AAKH;AACA;EACC;EACA;EACA;EACA,cEwCc;;;AFrCf;AACA;EACC;EACA;EACA;;;AAGD;AAEC;EAAwB;;AACxB;EAAiB;;;AAGlB;AACA;EACC;EACA;EACA,cEoBc;EFnBd;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cEMW;EFLX;EACA,YACC;AAWD;;AAJA;EACC;;AAKA;EACC,YACC;;;AAUJ;AAAA;AAAA;AAAA;AAKC;AAAA;EAGC;;AAEA;AAAA;EACC;;AAIF;EAAwB;;;AAGzB;AAAA;AAAA;AAAA;AAKC;EAAwB","file":"OptionList.css"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import React, { FC } from 'react';
|
|
1
|
+
import React, { FC, ReactNode } from 'react';
|
|
2
2
|
import { SingleOptionProps } from './Option';
|
|
3
3
|
export interface OptionListProps extends FlatGroupProps {
|
|
4
|
+
children?(optionProps: SingleOptionProps): ReactNode;
|
|
4
5
|
/** Adds one or more classnames for an element */
|
|
5
6
|
className?: string;
|
|
6
7
|
/** Holds values of options that are expanded or collapsed */
|
|
@@ -27,6 +28,8 @@ export interface OptionListProps extends FlatGroupProps {
|
|
|
27
28
|
options?: SingleOptionProps[];
|
|
28
29
|
/** Value of selected options within the List */
|
|
29
30
|
value?: any;
|
|
31
|
+
/** Callback to pass a list of options up to AnvilSelect */
|
|
32
|
+
getOptionsData?: (data: SingleOptionProps[]) => void;
|
|
30
33
|
}
|
|
31
34
|
interface FlatGroupProps {
|
|
32
35
|
onGroupSelectAll?: (data: SingleOptionProps[]) => void;
|
|
@@ -18,7 +18,7 @@ import { Divider } from '../Divider';
|
|
|
18
18
|
import { Stack } from '../Stack';
|
|
19
19
|
import { Link } from '../Link';
|
|
20
20
|
export const OptionList = (_a) => {
|
|
21
|
-
var { className, collapseValue, flatGroup, focusValue, groupClassName, indeterminateValue, multiple, onChange, onExpand, onGroupSelectAll, onGroupSelectNone, optionClassName, optionOnKeyDown, options, value } = _a, props = __rest(_a, ["className", "collapseValue", "flatGroup", "focusValue", "groupClassName", "indeterminateValue", "multiple", "onChange", "onExpand", "onGroupSelectAll", "onGroupSelectNone", "optionClassName", "optionOnKeyDown", "options", "value"]);
|
|
21
|
+
var { children, className, collapseValue, flatGroup, focusValue, groupClassName, indeterminateValue, multiple, onChange, onExpand, onGroupSelectAll, onGroupSelectNone, optionClassName, optionOnKeyDown, options, value, getOptionsData } = _a, props = __rest(_a, ["children", "className", "collapseValue", "flatGroup", "focusValue", "groupClassName", "indeterminateValue", "multiple", "onChange", "onExpand", "onGroupSelectAll", "onGroupSelectNone", "optionClassName", "optionOnKeyDown", "options", "value", "getOptionsData"]);
|
|
22
22
|
const OptionsClasses = classnames('OptionList', className, {
|
|
23
23
|
'OptionList--single-select': !multiple,
|
|
24
24
|
'OptionList--multi-select': multiple,
|
|
@@ -111,12 +111,81 @@ export const OptionList = (_a) => {
|
|
|
111
111
|
return;
|
|
112
112
|
return onExpand;
|
|
113
113
|
};
|
|
114
|
+
/*
|
|
115
|
+
** NOTE: The following functions (setSelected, setFocus, registerOption, etc)
|
|
116
|
+
** are all plumbing to support the use case where <Option> components are
|
|
117
|
+
** rendered in user-land via function children.
|
|
118
|
+
*/
|
|
119
|
+
const setSelectedFromOptionList = (optionValue) => {
|
|
120
|
+
if (value == null || optionValue == null) {
|
|
121
|
+
return false;
|
|
122
|
+
}
|
|
123
|
+
if (value.length) {
|
|
124
|
+
return value.some((item) => {
|
|
125
|
+
if (item === optionValue) {
|
|
126
|
+
return true;
|
|
127
|
+
}
|
|
128
|
+
if (item.value === optionValue) {
|
|
129
|
+
return true;
|
|
130
|
+
}
|
|
131
|
+
return false;
|
|
132
|
+
});
|
|
133
|
+
}
|
|
134
|
+
if (value === optionValue) {
|
|
135
|
+
return true;
|
|
136
|
+
}
|
|
137
|
+
if (value.value === optionValue) {
|
|
138
|
+
return true;
|
|
139
|
+
}
|
|
140
|
+
return false;
|
|
141
|
+
};
|
|
142
|
+
const setFocusFromOptionList = (optionValue) => {
|
|
143
|
+
return focusValue && focusValue.value === optionValue;
|
|
144
|
+
};
|
|
145
|
+
const setIndeterminateFromOptionList = (optionValue) => {
|
|
146
|
+
return indeterminateValue === null || indeterminateValue === void 0 ? void 0 : indeterminateValue.includes(optionValue);
|
|
147
|
+
};
|
|
148
|
+
/*
|
|
149
|
+
** The <Option> components call back with registerOption once they've rendered
|
|
150
|
+
**
|
|
151
|
+
*/
|
|
152
|
+
const optionsData = [];
|
|
153
|
+
const registerOption = (optionData) => {
|
|
154
|
+
optionsData.push(optionData);
|
|
155
|
+
};
|
|
156
|
+
React.useLayoutEffect(() => {
|
|
157
|
+
optionsData.sort((a, b) => {
|
|
158
|
+
if (a.element != null &&
|
|
159
|
+
b.element != null &&
|
|
160
|
+
a.element.compareDocumentPosition(b.element) &
|
|
161
|
+
Node.DOCUMENT_POSITION_PRECEDING) {
|
|
162
|
+
return 1;
|
|
163
|
+
}
|
|
164
|
+
return -1;
|
|
165
|
+
});
|
|
166
|
+
getOptionsData === null || getOptionsData === void 0 ? void 0 : getOptionsData(optionsData);
|
|
167
|
+
});
|
|
114
168
|
/* Generates the individual option in the Option List */
|
|
115
169
|
const getOption = (option, originalOption, level, collapseControl = false, collapseBoolean = false, localOptions = []) => {
|
|
116
170
|
const _a = Object(option), { className } = _a, options = __rest(_a, ["className"]);
|
|
117
171
|
const OptionClasses = classnames(className, optionClassName);
|
|
118
|
-
return (React.createElement(Option, Object.assign({}, options, { className: OptionClasses, collapseControl: collapseControl, collapsed: collapseBoolean, focus:
|
|
172
|
+
return (React.createElement(Option, Object.assign({}, options, { className: OptionClasses, collapseControl: collapseControl, collapsed: collapseBoolean, focus: setFocusFromOptionList(Object(option).value), indeterminate: setIndeterminateFromOptionList(Object(option).value), key: `${Object(option).value}${Object(option).text}${level}`, level: level, onChange: handleOnChange(), onExpand: handleOnExpand(), onKeyDown: optionOnKeyDown, options: localOptions, selfObject: originalOption })));
|
|
173
|
+
};
|
|
174
|
+
const optionProps = {
|
|
175
|
+
className: optionClassName,
|
|
176
|
+
collapseControl: false,
|
|
177
|
+
collapsed: false,
|
|
178
|
+
getSelected: setSelectedFromOptionList,
|
|
179
|
+
getFocus: setFocusFromOptionList,
|
|
180
|
+
getIndeterminate: setIndeterminateFromOptionList,
|
|
181
|
+
level: 0,
|
|
182
|
+
onChange: handleOnChange(),
|
|
183
|
+
onExpand: handleOnExpand(),
|
|
184
|
+
onKeyDown: optionOnKeyDown,
|
|
185
|
+
registerOption,
|
|
119
186
|
};
|
|
120
|
-
return (React.createElement("div", Object.assign({ className: OptionsClasses, "data-anvil-component": "OptionList" }, props),
|
|
187
|
+
return (React.createElement("div", Object.assign({ className: OptionsClasses, "data-anvil-component": "OptionList" }, props), typeof children === 'function'
|
|
188
|
+
? children(optionProps)
|
|
189
|
+
: getOptions(options, setInitialLevel())));
|
|
121
190
|
};
|
|
122
191
|
//# sourceMappingURL=OptionList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OptionList.js","sourceRoot":"","sources":["../../../src/components/OptionList/OptionList.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"OptionList.js","sourceRoot":"","sources":["../../../src/components/OptionList/OptionList.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,12 +6,12 @@
|
|
|
6
6
|
right: 0;
|
|
7
7
|
top: 0;
|
|
8
8
|
bottom: 0;
|
|
9
|
-
background-color:
|
|
9
|
+
background-color: var(--colorsSurfaceGrey, #eeeeee);
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
.OptionList {
|
|
13
13
|
/* Set color on root of component. It can be overridden after the @include */
|
|
14
|
-
color: #
|
|
14
|
+
color: var(--colorsTextDefault, #040404);
|
|
15
15
|
/* Make sure font-family goes across entire component */
|
|
16
16
|
font-family: "Nunito Sans", sans-serif;
|
|
17
17
|
}
|
|
@@ -50,11 +50,13 @@
|
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
.OptionList--single-select .OptionList__option--selected {
|
|
53
|
-
color: #
|
|
54
|
-
|
|
53
|
+
background-color: var(--colorsHoverPrimary, #ecf4fd);
|
|
54
|
+
}
|
|
55
|
+
.OptionList--single-select .OptionList__option--selected .Checkbox__label {
|
|
56
|
+
color: var(--colorsTextPrimary, #2270ee);
|
|
55
57
|
}
|
|
56
58
|
.OptionList--single-select .OptionList__option--selected:hover::before, .OptionList--single-select .OptionList__option--selected:focus-within::before {
|
|
57
|
-
background-color: #ecf4fd;
|
|
59
|
+
background-color: var(--colorsHoverPrimary, #ecf4fd);
|
|
58
60
|
}
|
|
59
61
|
|
|
60
62
|
/* Produces padding equal to the depth of the option. 8 is an arbitrary stopping point */
|
|
@@ -131,14 +133,14 @@
|
|
|
131
133
|
align-items: center;
|
|
132
134
|
padding-left: 24px;
|
|
133
135
|
z-index: 2;
|
|
134
|
-
background: linear-gradient(to left, #eeeeee 70%, #eeeeee 71%,
|
|
136
|
+
background: linear-gradient(to left, var(--colorsSurfaceGrey, #eeeeee) 70%, var(--colorsSurfaceGrey, #eeeeee) 71%, transparent 100%);
|
|
135
137
|
/* Match the background color of the single selected option */
|
|
136
138
|
}
|
|
137
139
|
.OptionList__option:hover .OptionList__option--secondary-action {
|
|
138
140
|
opacity: 1;
|
|
139
141
|
}
|
|
140
142
|
.OptionList--single-select .Checkbox--checked + .OptionList__option--secondary-action {
|
|
141
|
-
background: linear-gradient(to left, #ecf4fd 70%, #ecf4fd 71%,
|
|
143
|
+
background: linear-gradient(to left, var(--colorsHoverPrimary, #ecf4fd) 70%, var(--colorsHoverPrimary, #ecf4fd) 71%, transparent 100%);
|
|
142
144
|
}
|
|
143
145
|
|
|
144
146
|
/*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/OptionList/OptionList.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/OptionList/OptionList.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACQC;EACC;EACA;EACA;EACA;EACA;EACA;EACA,kBAXwB;;;AAe1B;AClBC;EACA;AAEA;EACA;;;ADkBD;AAEC;EACC;;;AAIF;AACA;EACC,eExBiB;EFyBjB;EACA;AAgBA;;AATA;EACC,WE4FY;EF3FZ,aE+DoB;EF9DpB;EACA;;AAGD;EAAc;;AAGd;EAAwB;;AACxB;EAAiB;;;AAGlB;EACC,gBEmEW;EFlEX,cEmEW;;;AF/DX;EAKC,kBA/DyB;;AA2DzB;EACC,OA1DkB;;AAiElB;EAAY,kBAnEY;;;AAwE3B;AACA;EAAsC,cEgD1B;;;AF5CV;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AAKH;AACA;EACC;EACA;EACA;EACA,cEwCc;;;AFrCf;AACA;EACC;EACA;EACA;;;AAGD;AAEC;EAAwB;;AACxB;EAAiB;;;AAGlB;AACA;EACC;EACA;EACA,cEoBc;EFnBd;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cEMW;EFLX;EACA,YACC;AAWD;;AAJA;EACC;;AAKA;EACC,YACC;;;AAUJ;AAAA;AAAA;AAAA;AAKC;AAAA;EAGC;;AAEA;AAAA;EACC;;AAIF;EAAwB;;;AAGzB;AAAA;AAAA;AAAA;AAKC;EAAwB","file":"index.css"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/OptionList/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/OptionList/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
/* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
|
|
2
2
|
.Page {
|
|
3
3
|
/* Set color on root of component. It can be overridden after the @include */
|
|
4
|
-
color: #
|
|
4
|
+
color: var(--colorsTextDefault, #040404);
|
|
5
5
|
/* Make sure font-family goes across entire component */
|
|
6
6
|
font-family: "Nunito Sans", sans-serif;
|
|
7
|
+
background-color: var(--colorsAppBackground, #fcfcfc);
|
|
7
8
|
display: flex;
|
|
8
9
|
flex-grow: 1;
|
|
9
10
|
position: relative;
|
|
@@ -98,8 +99,8 @@
|
|
|
98
99
|
.Page__actionToolbar {
|
|
99
100
|
min-height: 56px;
|
|
100
101
|
padding: 12px 24px;
|
|
101
|
-
background-color: #ffffff;
|
|
102
|
-
border-bottom: 1px solid #dfe0e1;
|
|
102
|
+
background-color: var(--colorsSurfaceDefault, #ffffff);
|
|
103
|
+
border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
|
|
103
104
|
width: 100%;
|
|
104
105
|
box-sizing: border-box;
|
|
105
106
|
align-items: center;
|
|
@@ -117,9 +118,9 @@
|
|
|
117
118
|
}
|
|
118
119
|
|
|
119
120
|
.Panel {
|
|
120
|
-
background-color: #ffffff;
|
|
121
|
+
background-color: var(--colorsSurfaceDefault, #ffffff);
|
|
121
122
|
width: 0;
|
|
122
|
-
border-left: 1px solid #dfe0e1;
|
|
123
|
+
border-left: 1px solid var(--colorsBorderGrey, #dfe0e1);
|
|
123
124
|
box-sizing: border-box;
|
|
124
125
|
display: flex;
|
|
125
126
|
flex-shrink: 0;
|
|
@@ -132,7 +133,7 @@
|
|
|
132
133
|
opacity: 1;
|
|
133
134
|
}
|
|
134
135
|
.Panel--left {
|
|
135
|
-
border-right: 1px solid #dfe0e1;
|
|
136
|
+
border-right: 1px solid var(--colorsBorderGrey, #dfe0e1);
|
|
136
137
|
border-left: none;
|
|
137
138
|
}
|
|
138
139
|
.Panel .Panel__content {
|
|
@@ -154,8 +155,8 @@
|
|
|
154
155
|
.Page__footer {
|
|
155
156
|
min-height: 56px;
|
|
156
157
|
padding: 16px 24px;
|
|
157
|
-
background-color: #ffffff;
|
|
158
|
-
border-top: 1px solid #dfe0e1;
|
|
158
|
+
background-color: var(--colorsSurfaceDefault, #ffffff);
|
|
159
|
+
border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
|
|
159
160
|
width: 100%;
|
|
160
161
|
box-sizing: border-box;
|
|
161
162
|
align-items: center;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Page/Page.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Page/Page.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACYA;ACXC;EACA;AAEA;EACA;EDUA,kBANoB;EAOpB;EACA;EACA;EACA;EACA;;;AAGD;AAAA;EAEC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC,SEgEW;;AF9DX;EAHD;IAIE;;EAEA;IAAgB,eE6DN;;;AF1DX;EATD;IAUE;;;;AAIF;AAAA;EAEC,WAtEgB;;AAwEhB;AAAA;EACC;;AAGD;AAAA;EACC,WA5EsB;;AA+EvB;AAAA;EACC;EACA;;AAGD;AAAA;EACC,WAtFe;EAuFf;;AAGD;AAAA;EACC,WA1FsB;;;AA8FxB;EAAgB,eEwBJ;;;AFtBZ;EACC;EACA;EACA,kBA/F0B;EAgG1B;EACA;EACA;EACA;EACA;EACA;;AAEA;EAXD;IAYE;;;AAGD;EACC;EACA;;;AAIF;EACC,kBAlH0B;EAmH1B;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGC;EACC;EACA;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA,SExBU;EFyBV;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAKH;EACC;EACA;EACA,kBA7J0B;EA8J1B;EACA;EACA;EACA;EACA;EACA;EACA,SE1BoB;EF2BpB;;AAEA;EAbD;IAcE","file":"Page.css"}
|
|
@@ -3,7 +3,7 @@ import { ActionToolbarProps, PanelProps } from './components';
|
|
|
3
3
|
export interface PagePropsStrict {
|
|
4
4
|
/** Aligns the content within the page */
|
|
5
5
|
align?: 'left' | 'center';
|
|
6
|
-
backgroundColor?: 'white' | 'neutral-0' | 'neutral-10';
|
|
6
|
+
backgroundColor?: 'default' | 'white' | 'neutral-0' | 'neutral-10';
|
|
7
7
|
/** Adds one or more classnames for an element */
|
|
8
8
|
className?: string;
|
|
9
9
|
/** Header for the page */
|
|
@@ -15,8 +15,9 @@ import { ConditionalWrapper } from '../../utilities/ConditionalWrapper';
|
|
|
15
15
|
import { ActionToolbar, Panel, } from './components';
|
|
16
16
|
export const Page = (_a) => {
|
|
17
17
|
var _b;
|
|
18
|
-
var { align = 'center', backgroundColor = '
|
|
19
|
-
const PageClasses = classnames('Page', className,
|
|
18
|
+
var { align = 'center', backgroundColor = 'default', children, className, header, headerAlign, footer, maxWidth = 'default', minWidth, sidebar, spacing = 'relaxed', actionToolbar, panel } = _a, props = __rest(_a, ["align", "backgroundColor", "children", "className", "header", "headerAlign", "footer", "maxWidth", "minWidth", "sidebar", "spacing", "actionToolbar", "panel"]);
|
|
19
|
+
const PageClasses = classnames('Page', className, {
|
|
20
|
+
[`bg-${backgroundColor}`]: backgroundColor !== 'default',
|
|
20
21
|
'Page--align-center': align === 'center',
|
|
21
22
|
'Page--no-padding': spacing === 'none',
|
|
22
23
|
'Page--relaxed': spacing === 'relaxed',
|