@hitachivantara/uikit-react-core 5.27.1 → 5.27.3
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/cjs/components/Accordion/Accordion.cjs.map +1 -1
- package/dist/cjs/components/AppSwitcher/Action/Action.styles.cjs.map +1 -1
- package/dist/cjs/components/AppSwitcher/AppSwitcher.cjs.map +1 -1
- package/dist/cjs/components/AppSwitcher/AppSwitcher.styles.cjs.map +1 -1
- package/dist/cjs/components/Avatar/Avatar.cjs.map +1 -1
- package/dist/cjs/components/Badge/Badge.cjs.map +1 -1
- package/dist/cjs/components/Banner/Banner.styles.cjs.map +1 -1
- package/dist/cjs/components/BaseDropdown/BaseDropdown.cjs.map +1 -1
- package/dist/cjs/components/BaseDropdown/BaseDropdown.styles.cjs.map +1 -1
- package/dist/cjs/components/BaseInput/BaseInput.cjs.map +1 -1
- package/dist/cjs/components/BaseInput/BaseInput.styles.cjs.map +1 -1
- package/dist/cjs/components/BreadCrumb/BreadCrumb.cjs.map +1 -1
- package/dist/cjs/components/BreadCrumb/BreadCrumb.styles.cjs.map +1 -1
- package/dist/cjs/components/BreadCrumb/Page/Page.styles.cjs.map +1 -1
- package/dist/cjs/components/BulkActions/BulkActions.cjs.map +1 -1
- package/dist/cjs/components/Button/Button.cjs.map +1 -1
- package/dist/cjs/components/Button/Button.styles.cjs.map +1 -1
- package/dist/cjs/components/Calendar/CalendarHeader/CalendarHeader.styles.cjs.map +1 -1
- package/dist/cjs/components/Calendar/CalendarWeekLabels/CalendarWeekLabels.cjs.map +1 -1
- package/dist/cjs/components/Calendar/SingleCalendar/CalendarCell.styles.cjs.map +1 -1
- package/dist/cjs/components/Calendar/SingleCalendar/SingleCalendar.styles.cjs.map +1 -1
- package/dist/cjs/components/Calendar/utils.cjs.map +1 -1
- package/dist/cjs/components/Card/Card.styles.cjs.map +1 -1
- package/dist/cjs/components/Card/Content/Content.styles.cjs.map +1 -1
- package/dist/cjs/components/Card/Header/Header.styles.cjs.map +1 -1
- package/dist/cjs/components/Carousel/Carousel.cjs.map +1 -1
- package/dist/cjs/components/Carousel/CarouselControls.cjs.map +1 -1
- package/dist/cjs/components/Carousel/CarouselSlide/CarouselSlide.cjs.map +1 -1
- package/dist/cjs/components/Carousel/CarouselThumbnails.cjs.map +1 -1
- package/dist/cjs/components/CheckBox/CheckBox.styles.cjs.map +1 -1
- package/dist/cjs/components/CheckBoxGroup/CheckBoxGroup.cjs.map +1 -1
- package/dist/cjs/components/CheckBoxGroup/CheckBoxGroup.styles.cjs.map +1 -1
- package/dist/cjs/components/ColorPicker/Fields/Fields.cjs.map +1 -1
- package/dist/cjs/components/ColorPicker/PresetColors/PresetColors.cjs.map +1 -1
- package/dist/cjs/components/ColorPicker/SavedColors/SavedColors.cjs.map +1 -1
- package/dist/cjs/components/Container/Container.cjs.map +1 -1
- package/dist/cjs/components/DatePicker/DatePicker.styles.cjs.map +1 -1
- package/dist/cjs/components/DatePicker/utils.cjs.map +1 -1
- package/dist/cjs/components/Dialog/Actions/Actions.styles.cjs.map +1 -1
- package/dist/cjs/components/Dialog/Content/Content.styles.cjs.map +1 -1
- package/dist/cjs/components/Dialog/Title/Title.styles.cjs.map +1 -1
- package/dist/cjs/components/DropDownMenu/DropDownMenu.styles.cjs.map +1 -1
- package/dist/cjs/components/Dropdown/Dropdown.cjs.map +1 -1
- package/dist/cjs/components/Dropdown/List/List.cjs.map +1 -1
- package/dist/cjs/components/FileUploader/DropZone/DropZone.cjs.map +1 -1
- package/dist/cjs/components/FileUploader/DropZone/DropZone.styles.cjs.map +1 -1
- package/dist/cjs/components/FileUploader/File/File.cjs.map +1 -1
- package/dist/cjs/components/FileUploader/File/File.styles.cjs.map +1 -1
- package/dist/cjs/components/FileUploader/FileList/FileList.styles.cjs.map +1 -1
- package/dist/cjs/components/FilterGroup/Counter/Counter.cjs.map +1 -1
- package/dist/cjs/components/FilterGroup/FilterContent/FilterContent.styles.cjs.map +1 -1
- package/dist/cjs/components/FilterGroup/RightPanel/RightPanel.cjs.map +1 -1
- package/dist/cjs/components/Footer/Footer.cjs.map +1 -1
- package/dist/cjs/components/Footer/Footer.styles.cjs.map +1 -1
- package/dist/cjs/components/Forms/CharCounter/CharCounter.cjs.map +1 -1
- package/dist/cjs/components/Forms/InfoMessage/InfoMessage.styles.cjs.map +1 -1
- package/dist/cjs/components/Forms/WarningText/WarningText.styles.cjs.map +1 -1
- package/dist/cjs/components/GlobalActions/GlobalActions.cjs.map +1 -1
- package/dist/cjs/components/GlobalActions/GlobalActions.styles.cjs.map +1 -1
- package/dist/cjs/components/Header/Actions/Actions.styles.cjs.map +1 -1
- package/dist/cjs/components/Header/Header.styles.cjs.map +1 -1
- package/dist/cjs/components/Header/Navigation/MenuBar/Bar.styles.cjs.map +1 -1
- package/dist/cjs/components/Header/Navigation/MenuItem/MenuItem.styles.cjs.map +1 -1
- package/dist/cjs/components/InlineEditor/InlineEditor.styles.cjs.map +1 -1
- package/dist/cjs/components/Input/Input.styles.cjs.map +1 -1
- package/dist/cjs/components/List/List.cjs.map +1 -1
- package/dist/cjs/components/ListContainer/ListItem/ListItem.styles.cjs.map +1 -1
- package/dist/cjs/components/Loading/Loading.cjs.map +1 -1
- package/dist/cjs/components/Loading/Loading.styles.cjs.map +1 -1
- package/dist/cjs/components/Login/Login.cjs.map +1 -1
- package/dist/cjs/components/MultiButton/MultiButton.styles.cjs.map +1 -1
- package/dist/cjs/components/Pagination/Pagination.cjs.map +1 -1
- package/dist/cjs/components/Pagination/Pagination.styles.cjs.map +1 -1
- package/dist/cjs/components/ProgressBar/ProgressBar.cjs.map +1 -1
- package/dist/cjs/components/QueryBuilder/QueryBuilder.styles.cjs.map +1 -1
- package/dist/cjs/components/QueryBuilder/Rule/Rule.styles.cjs.map +1 -1
- package/dist/cjs/components/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.cjs.map +1 -1
- package/dist/cjs/components/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.styles.cjs.map +1 -1
- package/dist/cjs/components/QueryBuilder/Rule/Value/DateTimeValue/utils.cjs.map +1 -1
- package/dist/cjs/components/QueryBuilder/Rule/Value/NumericValue/Numeric.styles.cjs.map +1 -1
- package/dist/cjs/components/QueryBuilder/Rule/Value/NumericValue/NumericValue.cjs.map +1 -1
- package/dist/cjs/components/QueryBuilder/RuleGroup/RuleGroup.cjs.map +1 -1
- package/dist/cjs/components/Radio/Radio.styles.cjs.map +1 -1
- package/dist/cjs/components/RadioGroup/RadioGroup.styles.cjs.map +1 -1
- package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.cjs.map +1 -1
- package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.cjs.map +1 -1
- package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.cjs.map +1 -1
- package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.styles.cjs.map +1 -1
- package/dist/cjs/components/ScrollTo/useScrollTo.cjs.map +1 -1
- package/dist/cjs/components/SelectionList/SelectionList.styles.cjs.map +1 -1
- package/dist/cjs/components/SimpleGrid/SimpleGrid.styles.cjs.map +1 -1
- package/dist/cjs/components/Slider/Slider.cjs.map +1 -1
- package/dist/cjs/components/Slider/Slider.styles.cjs.map +1 -1
- package/dist/cjs/components/Slider/SliderInput/SliderInput.cjs.map +1 -1
- package/dist/cjs/components/Slider/utils.cjs.map +1 -1
- package/dist/cjs/components/Snackbar/Snackbar.cjs.map +1 -1
- package/dist/cjs/components/Snackbar/Snackbar.styles.cjs.map +1 -1
- package/dist/cjs/components/Snackbar/SnackbarContent/SnackbarContent.styles.cjs.map +1 -1
- package/dist/cjs/components/Switch/Switch.styles.cjs.map +1 -1
- package/dist/cjs/components/Table/Table.styles.cjs.map +1 -1
- package/dist/cjs/components/Table/TableBody/TableBody.cjs.map +1 -1
- package/dist/cjs/components/Table/TableCell/TableCell.cjs.map +1 -1
- package/dist/cjs/components/Table/TableCell/TableCell.styles.cjs.map +1 -1
- package/dist/cjs/components/Table/TableHeader/TableHeader.cjs.map +1 -1
- package/dist/cjs/components/Table/TableHeader/TableHeader.styles.cjs.map +1 -1
- package/dist/cjs/components/Table/hooks/useHeaderGroups.cjs.map +1 -1
- package/dist/cjs/components/Table/hooks/useSticky.cjs.map +1 -1
- package/dist/cjs/components/Table/utils/utils.cjs.map +1 -1
- package/dist/cjs/components/Tabs/Tabs.cjs.map +1 -1
- package/dist/cjs/components/Tabs/Tabs.styles.cjs.map +1 -1
- package/dist/cjs/components/Tag/Tag.cjs.map +1 -1
- package/dist/cjs/components/TagsInput/TagsInput.cjs.map +1 -1
- package/dist/cjs/components/TagsInput/TagsInput.styles.cjs.map +1 -1
- package/dist/cjs/components/TimeAgo/formatUtils.cjs.map +1 -1
- package/dist/cjs/components/TimePicker/TimePicker.styles.cjs.map +1 -1
- package/dist/cjs/components/Tooltip/Tooltip.styles.cjs.map +1 -1
- package/dist/cjs/components/Typography/utils.cjs.map +1 -1
- package/dist/cjs/components/VerticalNavigation/TreeView/TreeViewItem.cjs.map +1 -1
- package/dist/cjs/components/VerticalNavigation/VerticalNavigation.styles.cjs.map +1 -1
- package/dist/cjs/hooks/useControlled.cjs.map +1 -1
- package/dist/cjs/hooks/useCss.cjs.map +1 -1
- package/dist/cjs/utils/classes.cjs.map +1 -1
- package/dist/esm/components/Accordion/Accordion.js.map +1 -1
- package/dist/esm/components/AppSwitcher/Action/Action.styles.js.map +1 -1
- package/dist/esm/components/AppSwitcher/AppSwitcher.js.map +1 -1
- package/dist/esm/components/AppSwitcher/AppSwitcher.styles.js.map +1 -1
- package/dist/esm/components/Avatar/Avatar.js.map +1 -1
- package/dist/esm/components/Badge/Badge.js.map +1 -1
- package/dist/esm/components/Banner/Banner.styles.js.map +1 -1
- package/dist/esm/components/BaseDropdown/BaseDropdown.js.map +1 -1
- package/dist/esm/components/BaseDropdown/BaseDropdown.styles.js.map +1 -1
- package/dist/esm/components/BaseInput/BaseInput.js.map +1 -1
- package/dist/esm/components/BaseInput/BaseInput.styles.js.map +1 -1
- package/dist/esm/components/BreadCrumb/BreadCrumb.js.map +1 -1
- package/dist/esm/components/BreadCrumb/BreadCrumb.styles.js.map +1 -1
- package/dist/esm/components/BreadCrumb/Page/Page.styles.js.map +1 -1
- package/dist/esm/components/BulkActions/BulkActions.js.map +1 -1
- package/dist/esm/components/Button/Button.js.map +1 -1
- package/dist/esm/components/Button/Button.styles.js.map +1 -1
- package/dist/esm/components/Calendar/CalendarHeader/CalendarHeader.styles.js.map +1 -1
- package/dist/esm/components/Calendar/CalendarWeekLabels/CalendarWeekLabels.js.map +1 -1
- package/dist/esm/components/Calendar/SingleCalendar/CalendarCell.styles.js.map +1 -1
- package/dist/esm/components/Calendar/SingleCalendar/SingleCalendar.styles.js.map +1 -1
- package/dist/esm/components/Calendar/utils.js.map +1 -1
- package/dist/esm/components/Card/Card.styles.js.map +1 -1
- package/dist/esm/components/Card/Content/Content.styles.js.map +1 -1
- package/dist/esm/components/Card/Header/Header.styles.js.map +1 -1
- package/dist/esm/components/Carousel/Carousel.js.map +1 -1
- package/dist/esm/components/Carousel/CarouselControls.js.map +1 -1
- package/dist/esm/components/Carousel/CarouselSlide/CarouselSlide.js.map +1 -1
- package/dist/esm/components/Carousel/CarouselThumbnails.js.map +1 -1
- package/dist/esm/components/CheckBox/CheckBox.styles.js.map +1 -1
- package/dist/esm/components/CheckBoxGroup/CheckBoxGroup.js.map +1 -1
- package/dist/esm/components/CheckBoxGroup/CheckBoxGroup.styles.js.map +1 -1
- package/dist/esm/components/ColorPicker/Fields/Fields.js.map +1 -1
- package/dist/esm/components/ColorPicker/PresetColors/PresetColors.js.map +1 -1
- package/dist/esm/components/ColorPicker/SavedColors/SavedColors.js.map +1 -1
- package/dist/esm/components/Container/Container.js.map +1 -1
- package/dist/esm/components/DatePicker/DatePicker.styles.js.map +1 -1
- package/dist/esm/components/DatePicker/utils.js.map +1 -1
- package/dist/esm/components/Dialog/Actions/Actions.styles.js.map +1 -1
- package/dist/esm/components/Dialog/Content/Content.styles.js.map +1 -1
- package/dist/esm/components/Dialog/Title/Title.styles.js.map +1 -1
- package/dist/esm/components/DropDownMenu/DropDownMenu.styles.js.map +1 -1
- package/dist/esm/components/Dropdown/Dropdown.js.map +1 -1
- package/dist/esm/components/Dropdown/List/List.js.map +1 -1
- package/dist/esm/components/FileUploader/DropZone/DropZone.js.map +1 -1
- package/dist/esm/components/FileUploader/DropZone/DropZone.styles.js.map +1 -1
- package/dist/esm/components/FileUploader/File/File.js.map +1 -1
- package/dist/esm/components/FileUploader/File/File.styles.js.map +1 -1
- package/dist/esm/components/FileUploader/FileList/FileList.styles.js.map +1 -1
- package/dist/esm/components/FilterGroup/Counter/Counter.js.map +1 -1
- package/dist/esm/components/FilterGroup/FilterContent/FilterContent.styles.js.map +1 -1
- package/dist/esm/components/FilterGroup/RightPanel/RightPanel.js.map +1 -1
- package/dist/esm/components/Footer/Footer.js.map +1 -1
- package/dist/esm/components/Footer/Footer.styles.js.map +1 -1
- package/dist/esm/components/Forms/CharCounter/CharCounter.js.map +1 -1
- package/dist/esm/components/Forms/InfoMessage/InfoMessage.styles.js.map +1 -1
- package/dist/esm/components/Forms/WarningText/WarningText.styles.js.map +1 -1
- package/dist/esm/components/GlobalActions/GlobalActions.js.map +1 -1
- package/dist/esm/components/GlobalActions/GlobalActions.styles.js.map +1 -1
- package/dist/esm/components/Header/Actions/Actions.styles.js.map +1 -1
- package/dist/esm/components/Header/Header.styles.js.map +1 -1
- package/dist/esm/components/Header/Navigation/MenuBar/Bar.styles.js.map +1 -1
- package/dist/esm/components/Header/Navigation/MenuItem/MenuItem.styles.js.map +1 -1
- package/dist/esm/components/InlineEditor/InlineEditor.styles.js.map +1 -1
- package/dist/esm/components/Input/Input.styles.js.map +1 -1
- package/dist/esm/components/List/List.js.map +1 -1
- package/dist/esm/components/ListContainer/ListItem/ListItem.styles.js.map +1 -1
- package/dist/esm/components/Loading/Loading.js.map +1 -1
- package/dist/esm/components/Loading/Loading.styles.js.map +1 -1
- package/dist/esm/components/Login/Login.js.map +1 -1
- package/dist/esm/components/MultiButton/MultiButton.styles.js.map +1 -1
- package/dist/esm/components/Pagination/Pagination.js.map +1 -1
- package/dist/esm/components/Pagination/Pagination.styles.js.map +1 -1
- package/dist/esm/components/ProgressBar/ProgressBar.js.map +1 -1
- package/dist/esm/components/QueryBuilder/QueryBuilder.styles.js.map +1 -1
- package/dist/esm/components/QueryBuilder/Rule/Rule.styles.js.map +1 -1
- package/dist/esm/components/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.js.map +1 -1
- package/dist/esm/components/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.styles.js.map +1 -1
- package/dist/esm/components/QueryBuilder/Rule/Value/DateTimeValue/utils.js.map +1 -1
- package/dist/esm/components/QueryBuilder/Rule/Value/NumericValue/Numeric.styles.js.map +1 -1
- package/dist/esm/components/QueryBuilder/Rule/Value/NumericValue/NumericValue.js.map +1 -1
- package/dist/esm/components/QueryBuilder/RuleGroup/RuleGroup.js.map +1 -1
- package/dist/esm/components/Radio/Radio.styles.js.map +1 -1
- package/dist/esm/components/RadioGroup/RadioGroup.styles.js.map +1 -1
- package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.js.map +1 -1
- package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.js.map +1 -1
- package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.js.map +1 -1
- package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.styles.js.map +1 -1
- package/dist/esm/components/ScrollTo/useScrollTo.js.map +1 -1
- package/dist/esm/components/SelectionList/SelectionList.styles.js.map +1 -1
- package/dist/esm/components/SimpleGrid/SimpleGrid.styles.js.map +1 -1
- package/dist/esm/components/Slider/Slider.js.map +1 -1
- package/dist/esm/components/Slider/Slider.styles.js.map +1 -1
- package/dist/esm/components/Slider/SliderInput/SliderInput.js.map +1 -1
- package/dist/esm/components/Slider/utils.js.map +1 -1
- package/dist/esm/components/Snackbar/Snackbar.js.map +1 -1
- package/dist/esm/components/Snackbar/Snackbar.styles.js.map +1 -1
- package/dist/esm/components/Snackbar/SnackbarContent/SnackbarContent.styles.js.map +1 -1
- package/dist/esm/components/Switch/Switch.styles.js.map +1 -1
- package/dist/esm/components/Table/Table.styles.js.map +1 -1
- package/dist/esm/components/Table/TableBody/TableBody.js.map +1 -1
- package/dist/esm/components/Table/TableCell/TableCell.js.map +1 -1
- package/dist/esm/components/Table/TableCell/TableCell.styles.js.map +1 -1
- package/dist/esm/components/Table/TableHeader/TableHeader.js.map +1 -1
- package/dist/esm/components/Table/TableHeader/TableHeader.styles.js.map +1 -1
- package/dist/esm/components/Table/hooks/useHeaderGroups.js.map +1 -1
- package/dist/esm/components/Table/hooks/useSticky.js.map +1 -1
- package/dist/esm/components/Table/utils/utils.js.map +1 -1
- package/dist/esm/components/Tabs/Tabs.js.map +1 -1
- package/dist/esm/components/Tabs/Tabs.styles.js.map +1 -1
- package/dist/esm/components/Tag/Tag.js.map +1 -1
- package/dist/esm/components/TagsInput/TagsInput.js.map +1 -1
- package/dist/esm/components/TagsInput/TagsInput.styles.js.map +1 -1
- package/dist/esm/components/TimeAgo/formatUtils.js.map +1 -1
- package/dist/esm/components/TimePicker/TimePicker.styles.js.map +1 -1
- package/dist/esm/components/Tooltip/Tooltip.styles.js.map +1 -1
- package/dist/esm/components/Typography/utils.js.map +1 -1
- package/dist/esm/components/VerticalNavigation/TreeView/TreeViewItem.js.map +1 -1
- package/dist/esm/components/VerticalNavigation/VerticalNavigation.styles.js.map +1 -1
- package/dist/esm/hooks/useControlled.js.map +1 -1
- package/dist/esm/hooks/useCss.js.map +1 -1
- package/dist/esm/utils/classes.js.map +1 -1
- package/dist/types/index.d.ts +1 -1
- package/package.json +5 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.styles.js","sources":["../../../../src/components/RadioGroup/RadioGroup.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvRadioGroup\", {\n root: {\n display: \"inline-block\",\n padding: 0,\n margin: 0,\n overflow: \"hidden\",\n verticalAlign: \"top\",\n },\n label: { marginBottom: theme.space.xs },\n group: { display: \"flex\" },\n vertical: {\n flexDirection: \"column\",\n\n // Prevent the focus ring to be hidden by sibling hover background\n \"&>*\": {\n zIndex: 0,\n },\n \"&>*:focus-within\": {\n zIndex: 1,\n },\n },\n horizontal: {\n flexDirection: \"row\",\n flexWrap: \"wrap\",\n \"&>*:not(:first-of-type)\": {\n marginLeft: theme.space.sm,\n },\n width: `calc(100% + ${theme.space.sm})`, // Compensate the negative margin left which increases the width\n },\n invalid: {\n paddingBottom: theme.space.xs,\n borderBottom: `1px solid ${theme.colors.negative}`,\n },\n error: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","padding","margin","overflow","verticalAlign","label","marginBottom","theme","space","xs","group","vertical","flexDirection","zIndex","horizontal","flexWrap","marginLeft","sm","width","invalid","paddingBottom","borderBottom","colors","negative","error"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,gBAAgB;AAAA,EACzEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,UAAU;AAAA,IACVC,eAAe;AAAA,EACjB;AAAA,EACAC,OAAO;AAAA,IAAEC,cAAcC,MAAMC,MAAMC;AAAAA,EAAG;AAAA,EACtCC,OAAO;AAAA,IAAEV,SAAS;AAAA,EAAO;AAAA,EACzBW,UAAU;AAAA,IACRC,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACLC,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClBA,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,YAAY;AAAA,IACVF,eAAe;AAAA,IACfG,UAAU;AAAA,IACV,2BAA2B;AAAA,MACzBC,YAAYT,MAAMC,MAAMS;AAAAA,IAC1B;AAAA,IACAC,OAAQ,eAAcX,MAAMC,MAAMS;
|
|
1
|
+
{"version":3,"file":"RadioGroup.styles.js","sources":["../../../../src/components/RadioGroup/RadioGroup.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvRadioGroup\", {\n root: {\n display: \"inline-block\",\n padding: 0,\n margin: 0,\n overflow: \"hidden\",\n verticalAlign: \"top\",\n },\n label: { marginBottom: theme.space.xs },\n group: { display: \"flex\" },\n vertical: {\n flexDirection: \"column\",\n\n // Prevent the focus ring to be hidden by sibling hover background\n \"&>*\": {\n zIndex: 0,\n },\n \"&>*:focus-within\": {\n zIndex: 1,\n },\n },\n horizontal: {\n flexDirection: \"row\",\n flexWrap: \"wrap\",\n \"&>*:not(:first-of-type)\": {\n marginLeft: theme.space.sm,\n },\n width: `calc(100% + ${theme.space.sm})`, // Compensate the negative margin left which increases the width\n },\n invalid: {\n paddingBottom: theme.space.xs,\n borderBottom: `1px solid ${theme.colors.negative}`,\n },\n error: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","padding","margin","overflow","verticalAlign","label","marginBottom","theme","space","xs","group","vertical","flexDirection","zIndex","horizontal","flexWrap","marginLeft","sm","width","invalid","paddingBottom","borderBottom","colors","negative","error"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,gBAAgB;AAAA,EACzEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,UAAU;AAAA,IACVC,eAAe;AAAA,EACjB;AAAA,EACAC,OAAO;AAAA,IAAEC,cAAcC,MAAMC,MAAMC;AAAAA,EAAG;AAAA,EACtCC,OAAO;AAAA,IAAEV,SAAS;AAAA,EAAO;AAAA,EACzBW,UAAU;AAAA,IACRC,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACLC,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClBA,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,YAAY;AAAA,IACVF,eAAe;AAAA,IACfG,UAAU;AAAA,IACV,2BAA2B;AAAA,MACzBC,YAAYT,MAAMC,MAAMS;AAAAA,IAC1B;AAAA,IACAC,OAAQ,eAAcX,MAAMC,MAAMS,EAAG;AAAA;AAAA,EACvC;AAAA,EACAE,SAAS;AAAA,IACPC,eAAeb,MAAMC,MAAMC;AAAAA,IAC3BY,cAAe,aAAYd,MAAMe,OAAOC,QAAS;AAAA,EACnD;AAAA,EACAC,OAAO,CAAC;AACV,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollToHorizontal.js","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport { useMediaQuery } from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { HvScrollToTooltipPositions } from \"../types\";\nimport { withTooltip } from \"../withTooltip\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { staticClasses, useClasses } from \"./ScrollToHorizontal.styles\";\n\nexport { staticClasses as scrollToHorizontalClasses };\n\nexport type HvScrollToHorizontalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToHorizontalOption {\n key?: string;\n label: string;\n value: string;\n offset?: number;\n}\n\nexport type HvScrollToHorizontalPositions = \"sticky\" | \"fixed\" | \"relative\";\n\nexport interface HvScrollToHorizontalProps\n extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n options: HvScrollToHorizontalOption[];\n /** True if the href location link should be applied. It will create an a element around every list item */\n href?: boolean;\n /** Default selected index passed from the parent. */\n defaultSelectedIndex?: number;\n /**\n * The Id of the scrollable container containing displayed elements.\n *\n * Defaults to `window` if unspecified.\n */\n scrollElementId?: string;\n /**\n * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n * or to put more breathing room between the targeted element and the edges of the container.\n *\n * Each element can also have a specific offset via the options property.\n */\n offset?: number;\n /** Position of the Horizontal scroll to. */\n position?: HvScrollToHorizontalPositions;\n /** Position of tooltip identifying the current item. */\n tooltipPosition?: HvScrollToTooltipPositions;\n /** A function called each time the selected index changes. */\n onChange?: (\n event:\n | Event\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n index: number\n ) => void;\n /** A function called each time an user clicks on a tab element. */\n onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n /** A function called each time an user press enter on a tab element. */\n onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvScrollToHorizontalClasses;\n}\n\n/**\n * The horizontal scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToHorizontal = (props: HvScrollToHorizontalProps) => {\n const {\n id,\n defaultSelectedIndex = 0,\n scrollElementId,\n href = true,\n onChange,\n onClick,\n onEnter,\n className,\n classes: classesProp,\n options,\n offset = 0,\n position = \"relative\",\n tooltipPosition = \"top\",\n ...others\n } = useDefaultProps(\"HvScrollToHorizontal\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n const muiTheme = useMuiTheme();\n\n const downSm = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n const { activeTheme, colors } = useTheme();\n\n const elementId = useUniqueId(id, \"hvHorizontalScrollto\");\n\n const [selectedIndex, setScrollTo] = useScrollTo(\n defaultSelectedIndex,\n scrollElementId,\n href,\n offset,\n options,\n onChange\n );\n\n const handleSelection = (\n event:\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n value: string,\n index: number\n ) => {\n event.preventDefault();\n\n const wrappedOnChange = () => {\n onChange?.(event, index);\n };\n\n setScrollTo(event, value, index, wrappedOnChange);\n };\n\n const tooltipWrappers = useMemo(() => {\n return options.map((option) => {\n return withTooltip(option.label, \"div\", tooltipPosition);\n });\n }, [options, tooltipPosition]);\n\n const NotSelected = useCallback(() => {\n return (\n <div className={classes.notSelectedRoot}>\n <div className={classes.notSelected} />\n </div>\n );\n }, [classes.notSelectedRoot, classes.notSelected]);\n\n const Selected = useCallback(() => {\n return (\n <CurrentStep\n height={activeTheme?.scrollTo.dotSelectedSize}\n width={activeTheme?.scrollTo.dotSelectedSize}\n className={classes.selected}\n />\n );\n }, [classes.selected, activeTheme?.scrollTo.dotSelectedSize]);\n\n const tabs = options.map((option, index) => {\n const selected = selectedIndex === index;\n const tooltipWrapper = tooltipWrappers[index];\n\n return (\n <HvHorizontalScrollListItem\n id={setId(elementId, `item-${index}`)}\n onClick={(event) => {\n handleSelection(event, option.value, index);\n onClick?.(event, index);\n }}\n onKeyDown={(event) => {\n if (isKey(event, \"Enter\") === true) {\n handleSelection(event, option.value, index);\n onEnter?.(event, index);\n }\n }}\n tooltipWrapper={tooltipWrapper}\n selected={selected}\n key={option.key || option.label}\n >\n <p>{option.label}</p>\n {selected ? <Selected /> : <NotSelected />}\n </HvHorizontalScrollListItem>\n );\n });\n\n return (\n <ol\n className={cx(\n css({\n width:\n position === \"fixed\" && (upMd || downSm)\n ? `calc(100% - 2*${theme.spacing(upMd ? 4 : 2)})`\n : \"100%\",\n marginTop: 0,\n marginBottom: 0,\n marginRight:\n position === \"fixed\" && (upMd || downSm)\n ? theme.spacing(upMd ? 4 : 2)\n : 0,\n marginLeft:\n position === \"fixed\" && (upMd || downSm)\n ? theme.spacing(upMd ? 4 : 2)\n : 0,\n backgroundColor: hexToRgbA(\n colors?.atmo2,\n activeTheme?.scrollTo.backgroundColorOpacity\n ),\n }),\n classes.root,\n {\n [classes.positionSticky]: position === \"sticky\",\n [classes.positionFixed]: position === \"fixed\",\n },\n className\n )}\n id={elementId}\n {...others}\n >\n {tabs}\n </ol>\n );\n};\n"],"names":["HvScrollToHorizontal","props","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","others","useDefaultProps","css","cx","useClasses","muiTheme","useMuiTheme","downSm","useMediaQuery","breakpoints","down","upMd","up","activeTheme","colors","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","NotSelected","useCallback","notSelectedRoot","children","notSelected","Selected","CurrentStep","height","scrollTo","dotSelectedSize","width","selected","tabs","tooltipWrapper","HvHorizontalScrollListItem","setId","onKeyDown","isKey","_jsx","key","theme","spacing","marginTop","marginBottom","marginRight","marginLeft","backgroundColor","hexToRgbA","atmo2","backgroundColorOpacity","root","positionSticky","positionFixed"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ScrollToHorizontal.js","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport { useMediaQuery } from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { HvScrollToTooltipPositions } from \"../types\";\nimport { withTooltip } from \"../withTooltip\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { staticClasses, useClasses } from \"./ScrollToHorizontal.styles\";\n\nexport { staticClasses as scrollToHorizontalClasses };\n\nexport type HvScrollToHorizontalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToHorizontalOption {\n key?: string;\n label: string;\n value: string;\n offset?: number;\n}\n\nexport type HvScrollToHorizontalPositions = \"sticky\" | \"fixed\" | \"relative\";\n\nexport interface HvScrollToHorizontalProps\n extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n options: HvScrollToHorizontalOption[];\n /** True if the href location link should be applied. It will create an a element around every list item */\n href?: boolean;\n /** Default selected index passed from the parent. */\n defaultSelectedIndex?: number;\n /**\n * The Id of the scrollable container containing displayed elements.\n *\n * Defaults to `window` if unspecified.\n */\n scrollElementId?: string;\n /**\n * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n * or to put more breathing room between the targeted element and the edges of the container.\n *\n * Each element can also have a specific offset via the options property.\n */\n offset?: number;\n /** Position of the Horizontal scroll to. */\n position?: HvScrollToHorizontalPositions;\n /** Position of tooltip identifying the current item. */\n tooltipPosition?: HvScrollToTooltipPositions;\n /** A function called each time the selected index changes. */\n onChange?: (\n event:\n | Event\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n index: number\n ) => void;\n /** A function called each time an user clicks on a tab element. */\n onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n /** A function called each time an user press enter on a tab element. */\n onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvScrollToHorizontalClasses;\n}\n\n/**\n * The horizontal scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToHorizontal = (props: HvScrollToHorizontalProps) => {\n const {\n id,\n defaultSelectedIndex = 0,\n scrollElementId,\n href = true,\n onChange,\n onClick,\n onEnter,\n className,\n classes: classesProp,\n options,\n offset = 0,\n position = \"relative\",\n tooltipPosition = \"top\",\n ...others\n } = useDefaultProps(\"HvScrollToHorizontal\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n const muiTheme = useMuiTheme();\n\n const downSm = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n const { activeTheme, colors } = useTheme();\n\n const elementId = useUniqueId(id, \"hvHorizontalScrollto\");\n\n const [selectedIndex, setScrollTo] = useScrollTo(\n defaultSelectedIndex,\n scrollElementId,\n href,\n offset,\n options,\n onChange\n );\n\n const handleSelection = (\n event:\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n value: string,\n index: number\n ) => {\n event.preventDefault();\n\n const wrappedOnChange = () => {\n onChange?.(event, index);\n };\n\n setScrollTo(event, value, index, wrappedOnChange);\n };\n\n const tooltipWrappers = useMemo(() => {\n return options.map((option) => {\n return withTooltip(option.label, \"div\", tooltipPosition);\n });\n }, [options, tooltipPosition]);\n\n const NotSelected = useCallback(() => {\n return (\n <div className={classes.notSelectedRoot}>\n <div className={classes.notSelected} />\n </div>\n );\n }, [classes.notSelectedRoot, classes.notSelected]);\n\n const Selected = useCallback(() => {\n return (\n <CurrentStep\n height={activeTheme?.scrollTo.dotSelectedSize}\n width={activeTheme?.scrollTo.dotSelectedSize}\n className={classes.selected}\n />\n );\n }, [classes.selected, activeTheme?.scrollTo.dotSelectedSize]);\n\n const tabs = options.map((option, index) => {\n const selected = selectedIndex === index;\n const tooltipWrapper = tooltipWrappers[index];\n\n return (\n <HvHorizontalScrollListItem\n id={setId(elementId, `item-${index}`)}\n onClick={(event) => {\n handleSelection(event, option.value, index);\n onClick?.(event, index);\n }}\n onKeyDown={(event) => {\n if (isKey(event, \"Enter\") === true) {\n handleSelection(event, option.value, index);\n onEnter?.(event, index);\n }\n }}\n tooltipWrapper={tooltipWrapper}\n selected={selected}\n key={option.key || option.label}\n >\n <p>{option.label}</p>\n {selected ? <Selected /> : <NotSelected />}\n </HvHorizontalScrollListItem>\n );\n });\n\n return (\n <ol\n className={cx(\n css({\n width:\n position === \"fixed\" && (upMd || downSm)\n ? `calc(100% - 2*${theme.spacing(upMd ? 4 : 2)})`\n : \"100%\",\n marginTop: 0,\n marginBottom: 0,\n marginRight:\n position === \"fixed\" && (upMd || downSm)\n ? theme.spacing(upMd ? 4 : 2)\n : 0,\n marginLeft:\n position === \"fixed\" && (upMd || downSm)\n ? theme.spacing(upMd ? 4 : 2)\n : 0,\n backgroundColor: hexToRgbA(\n colors?.atmo2,\n activeTheme?.scrollTo.backgroundColorOpacity\n ),\n }),\n classes.root,\n {\n [classes.positionSticky]: position === \"sticky\",\n [classes.positionFixed]: position === \"fixed\",\n },\n className\n )}\n id={elementId}\n {...others}\n >\n {tabs}\n </ol>\n );\n};\n"],"names":["HvScrollToHorizontal","props","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","others","useDefaultProps","css","cx","useClasses","muiTheme","useMuiTheme","downSm","useMediaQuery","breakpoints","down","upMd","up","activeTheme","colors","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","NotSelected","useCallback","notSelectedRoot","children","notSelected","Selected","CurrentStep","height","scrollTo","dotSelectedSize","width","selected","tabs","tooltipWrapper","HvHorizontalScrollListItem","setId","onKeyDown","isKey","_jsx","key","theme","spacing","marginTop","marginBottom","marginRight","marginLeft","backgroundColor","hexToRgbA","atmo2","backgroundColorOpacity","root","positionSticky","positionFixed"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollToHorizontal.styles.js","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvScrollToHorizontal\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n root: {\n display: \"flex\",\n padding: \"0 30px\",\n listStyleType: \"none\",\n flexWrap: \"wrap\",\n backdropFilter: `blur(${theme.scrollTo.backgroundColorBlur})`,\n },\n positionSticky: {\n position: \"sticky\",\n zIndex: `calc(${theme.zIndices.banner} - 2)`,\n top: 0,\n left: 0,\n },\n positionFixed: {\n position: \"fixed\",\n zIndex: `calc(${theme.zIndices.banner} - 2)`,\n top: 0,\n left: 0,\n },\n notSelectedRoot: {\n display: theme.scrollTo.horizontal.dotDisplay,\n justifyContent: \"center\",\n alignItems: \"center\",\n height: theme.scrollTo.dotRootSize,\n width: theme.scrollTo.dotRootSize,\n borderRadius: theme.scrollTo.dotRootRadius,\n },\n notSelected: {\n height: theme.scrollTo.dotNotSelectedSize,\n width: theme.scrollTo.dotNotSelectedSize,\n borderRadius: \"50%\",\n display: \"inline-block\",\n backgroundColor: theme.scrollTo.dotNotSelectedColor,\n },\n selected: {\n display: theme.scrollTo.horizontal.dotDisplay,\n height: theme.scrollTo.dotRootSize,\n width: theme.scrollTo.dotRootSize,\n },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","root","display","padding","listStyleType","flexWrap","backdropFilter","theme","scrollTo","backgroundColorBlur","positionSticky","position","zIndex","zIndices","banner","top","left","positionFixed","notSelectedRoot","horizontal","dotDisplay","justifyContent","alignItems","height","dotRootSize","width","borderRadius","dotRootRadius","notSelected","dotNotSelectedSize","backgroundColor","dotNotSelectedColor","selected"],"mappings":";;AAIA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAcH,MAAM;AAAA,EAC/DI,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,gBAAiB,QAAOC,MAAMC,SAASC;
|
|
1
|
+
{"version":3,"file":"ScrollToHorizontal.styles.js","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvScrollToHorizontal\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n root: {\n display: \"flex\",\n padding: \"0 30px\",\n listStyleType: \"none\",\n flexWrap: \"wrap\",\n backdropFilter: `blur(${theme.scrollTo.backgroundColorBlur})`,\n },\n positionSticky: {\n position: \"sticky\",\n zIndex: `calc(${theme.zIndices.banner} - 2)`,\n top: 0,\n left: 0,\n },\n positionFixed: {\n position: \"fixed\",\n zIndex: `calc(${theme.zIndices.banner} - 2)`,\n top: 0,\n left: 0,\n },\n notSelectedRoot: {\n display: theme.scrollTo.horizontal.dotDisplay,\n justifyContent: \"center\",\n alignItems: \"center\",\n height: theme.scrollTo.dotRootSize,\n width: theme.scrollTo.dotRootSize,\n borderRadius: theme.scrollTo.dotRootRadius,\n },\n notSelected: {\n height: theme.scrollTo.dotNotSelectedSize,\n width: theme.scrollTo.dotNotSelectedSize,\n borderRadius: \"50%\",\n display: \"inline-block\",\n backgroundColor: theme.scrollTo.dotNotSelectedColor,\n },\n selected: {\n display: theme.scrollTo.horizontal.dotDisplay,\n height: theme.scrollTo.dotRootSize,\n width: theme.scrollTo.dotRootSize,\n },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","root","display","padding","listStyleType","flexWrap","backdropFilter","theme","scrollTo","backgroundColorBlur","positionSticky","position","zIndex","zIndices","banner","top","left","positionFixed","notSelectedRoot","horizontal","dotDisplay","justifyContent","alignItems","height","dotRootSize","width","borderRadius","dotRootRadius","notSelected","dotNotSelectedSize","backgroundColor","dotNotSelectedColor","selected"],"mappings":";;AAIA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAcH,MAAM;AAAA,EAC/DI,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,gBAAiB,QAAOC,MAAMC,SAASC,mBAAoB;AAAA,EAC7D;AAAA,EACAC,gBAAgB;AAAA,IACdC,UAAU;AAAA,IACVC,QAAS,QAAOL,MAAMM,SAASC,MAAO;AAAA,IACtCC,KAAK;AAAA,IACLC,MAAM;AAAA,EACR;AAAA,EACAC,eAAe;AAAA,IACbN,UAAU;AAAA,IACVC,QAAS,QAAOL,MAAMM,SAASC,MAAO;AAAA,IACtCC,KAAK;AAAA,IACLC,MAAM;AAAA,EACR;AAAA,EACAE,iBAAiB;AAAA,IACfhB,SAASK,MAAMC,SAASW,WAAWC;AAAAA,IACnCC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,QAAQhB,MAAMC,SAASgB;AAAAA,IACvBC,OAAOlB,MAAMC,SAASgB;AAAAA,IACtBE,cAAcnB,MAAMC,SAASmB;AAAAA,EAC/B;AAAA,EACAC,aAAa;AAAA,IACXL,QAAQhB,MAAMC,SAASqB;AAAAA,IACvBJ,OAAOlB,MAAMC,SAASqB;AAAAA,IACtBH,cAAc;AAAA,IACdxB,SAAS;AAAA,IACT4B,iBAAiBvB,MAAMC,SAASuB;AAAAA,EAClC;AAAA,EACAC,UAAU;AAAA,IACR9B,SAASK,MAAMC,SAASW,WAAWC;AAAAA,IACnCG,QAAQhB,MAAMC,SAASgB;AAAAA,IACvBC,OAAOlB,MAAMC,SAASgB;AAAAA,EACxB;AACF,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollToVertical.js","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport {\n staticClasses,\n useClasses,\n calculateOffset,\n} from \"./ScrollToVertical.styles\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { withTooltip } from \"../withTooltip\";\nimport {\n HvScrollToTooltipPositions,\n HvScrollToVerticalOption,\n HvScrollToVerticalPositions,\n} from \"../types\";\n\nexport { staticClasses as scrollToVerticalClasses };\n\nexport type HvScrollToVerticalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToVerticalProps\n extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n options: HvScrollToVerticalOption[];\n /** True if the href location link should be applied. It will create an a element around every list item */\n href?: boolean;\n /** Default selected index passed from the parent. */\n defaultSelectedIndex?: number;\n /**\n * The Id of the scrollable container containing displayed elements.\n *\n * Defaults to `window` if unspecified.\n */\n scrollElementId?: string;\n /**\n * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n * or to put more breathing room between the targeted element and the edges of the container.\n *\n * Each element can also have a specific offset via the options property.\n */\n offset?: number;\n /** Position of the Vertical scroll to. */\n position?: HvScrollToVerticalPositions;\n /** Position of tooltip identifying the current item. */\n tooltipPosition?: HvScrollToTooltipPositions;\n /** A function called each time the selected index changes. */\n onChange?: (\n event:\n | Event\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n index: number\n ) => void;\n /** A function called each time an user clicks on a tab element. */\n onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n /** A function called each time an user press enter on a tab element. */\n onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvScrollToVerticalClasses;\n}\n\n/**\n * The vertical scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToVertical = (props: HvScrollToVerticalProps) => {\n const {\n id,\n defaultSelectedIndex = 0,\n scrollElementId,\n href = true,\n onChange,\n onClick,\n onEnter,\n className,\n classes: classesProp,\n options,\n offset = 0,\n position = \"relative\",\n tooltipPosition = \"left\",\n style,\n ...others\n } = useDefaultProps(\"HvScrollToVertical\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n const { activeTheme, colors } = useTheme();\n\n const elementId = useUniqueId(id, \"hvVerticalScrollto\");\n\n const [selectedIndex, setScrollTo] = useScrollTo(\n defaultSelectedIndex,\n scrollElementId,\n href,\n offset,\n options,\n onChange\n );\n\n const handleSelection = (\n event:\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n value: string,\n index: number\n ) => {\n event.preventDefault();\n\n const wrappedOnChange = () => {\n onChange?.(event, index);\n };\n\n setScrollTo(event, value, index, wrappedOnChange);\n };\n\n const tooltipWrappers = useMemo(() => {\n return options.map((option) => {\n return withTooltip(option.label, \"div\", tooltipPosition, false);\n });\n }, [options, tooltipPosition]);\n\n const tabs = options.map((option, index) => {\n const selected = selectedIndex === index;\n const tooltipWrapper = tooltipWrappers[index];\n\n return (\n <HvVerticalScrollListItem\n id={setId(elementId, `item-${index}`)}\n onClick={(event) => {\n handleSelection(event, option.value, index);\n onClick?.(event, index);\n }}\n onKeyDown={(event) => {\n if (isKey(event, \"Enter\") === true) {\n handleSelection(event, option.value, index);\n onEnter?.(event, index);\n }\n }}\n tooltipWrapper={tooltipWrapper}\n selected={selected}\n key={option.key || option.label}\n aria-label={option.label}\n />\n );\n });\n\n const positionOffset = calculateOffset(options.length);\n const backgroundColor = hexToRgbA(\n colors?.atmo2,\n activeTheme?.scrollTo.backgroundColorOpacity\n );\n\n return (\n <ol\n className={cx(\n css({ backgroundColor }),\n classes.root,\n {\n [classes.positionFixed]: position === \"fixed\",\n [classes.positionAbsolute]: position === \"absolute\",\n },\n className\n )}\n style={{ top: `calc(50% - ${positionOffset}px)`, ...style }}\n id={elementId}\n {...others}\n >\n {tabs}\n </ol>\n );\n};\n"],"names":["HvScrollToVertical","props","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","style","others","useDefaultProps","css","cx","useClasses","activeTheme","colors","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","tabs","selected","tooltipWrapper","HvVerticalScrollListItem","setId","onKeyDown","isKey","key","positionOffset","calculateOffset","length","backgroundColor","hexToRgbA","atmo2","scrollTo","backgroundColorOpacity","root","positionFixed","positionAbsolute","top","children"],"mappings":";;;;;;;;;;;;;AA0EaA,MAAAA,qBAAqBA,CAACC,UAAmC;AAC9D,QAAA;AAAA,IACJC;AAAAA,IACAC,uBAAuB;AAAA,IACvBC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,SAAS;AAAA,IACTC,WAAW;AAAA,IACXC,kBAAkB;AAAA,IAClBC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,sBAAsBjB,KAAK;AAEzC,QAAA;AAAA,IAAES;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAC7C,QAAA;AAAA,IAAEW;AAAAA,IAAaC;AAAAA,MAAWC,SAAS;AAEnCC,QAAAA,YAAYC,YAAYxB,IAAI,oBAAoB;AAEhD,QAAA,CAACyB,eAAeC,WAAW,IAAIC,YACnC1B,sBACAC,iBACAC,MACAQ,QACAD,SACAN,QACF;AAEA,QAAMwB,kBAAkBA,CACtBC,OAGAC,OACAC,UACG;AACHF,UAAMG,eAAe;AAErB,UAAMC,kBAAkBA,MAAM;AAC5B7B,2CAAWyB,OAAOE;AAAAA,IAAK;AAGbF,gBAAAA,OAAOC,OAAOC,OAAOE,eAAe;AAAA,EAAA;AAG5CC,QAAAA,kBAAkBC,QAAQ,MAAM;AAC7BzB,WAAAA,QAAQ0B,IAAKC,CAAW,WAAA;AAC7B,aAAOC,YAAYD,OAAOE,OAAO,OAAO1B,iBAAiB,KAAK;AAAA,IAAA,CAC/D;AAAA,EAAA,GACA,CAACH,SAASG,eAAe,CAAC;AAE7B,QAAM2B,OAAO9B,QAAQ0B,IAAI,CAACC,QAAQN,UAAU;AAC1C,UAAMU,WAAWhB,kBAAkBM;AAC7BW,UAAAA,iBAAiBR,gBAAgBH,KAAK;AAE5C,+BACGY,0BAAwB;AAAA,MACvB3C,IAAI4C,MAAMrB,WAAY,QAAOQ,
|
|
1
|
+
{"version":3,"file":"ScrollToVertical.js","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport {\n staticClasses,\n useClasses,\n calculateOffset,\n} from \"./ScrollToVertical.styles\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { withTooltip } from \"../withTooltip\";\nimport {\n HvScrollToTooltipPositions,\n HvScrollToVerticalOption,\n HvScrollToVerticalPositions,\n} from \"../types\";\n\nexport { staticClasses as scrollToVerticalClasses };\n\nexport type HvScrollToVerticalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToVerticalProps\n extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n options: HvScrollToVerticalOption[];\n /** True if the href location link should be applied. It will create an a element around every list item */\n href?: boolean;\n /** Default selected index passed from the parent. */\n defaultSelectedIndex?: number;\n /**\n * The Id of the scrollable container containing displayed elements.\n *\n * Defaults to `window` if unspecified.\n */\n scrollElementId?: string;\n /**\n * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n * or to put more breathing room between the targeted element and the edges of the container.\n *\n * Each element can also have a specific offset via the options property.\n */\n offset?: number;\n /** Position of the Vertical scroll to. */\n position?: HvScrollToVerticalPositions;\n /** Position of tooltip identifying the current item. */\n tooltipPosition?: HvScrollToTooltipPositions;\n /** A function called each time the selected index changes. */\n onChange?: (\n event:\n | Event\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n index: number\n ) => void;\n /** A function called each time an user clicks on a tab element. */\n onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n /** A function called each time an user press enter on a tab element. */\n onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvScrollToVerticalClasses;\n}\n\n/**\n * The vertical scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToVertical = (props: HvScrollToVerticalProps) => {\n const {\n id,\n defaultSelectedIndex = 0,\n scrollElementId,\n href = true,\n onChange,\n onClick,\n onEnter,\n className,\n classes: classesProp,\n options,\n offset = 0,\n position = \"relative\",\n tooltipPosition = \"left\",\n style,\n ...others\n } = useDefaultProps(\"HvScrollToVertical\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n const { activeTheme, colors } = useTheme();\n\n const elementId = useUniqueId(id, \"hvVerticalScrollto\");\n\n const [selectedIndex, setScrollTo] = useScrollTo(\n defaultSelectedIndex,\n scrollElementId,\n href,\n offset,\n options,\n onChange\n );\n\n const handleSelection = (\n event:\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n value: string,\n index: number\n ) => {\n event.preventDefault();\n\n const wrappedOnChange = () => {\n onChange?.(event, index);\n };\n\n setScrollTo(event, value, index, wrappedOnChange);\n };\n\n const tooltipWrappers = useMemo(() => {\n return options.map((option) => {\n return withTooltip(option.label, \"div\", tooltipPosition, false);\n });\n }, [options, tooltipPosition]);\n\n const tabs = options.map((option, index) => {\n const selected = selectedIndex === index;\n const tooltipWrapper = tooltipWrappers[index];\n\n return (\n <HvVerticalScrollListItem\n id={setId(elementId, `item-${index}`)}\n onClick={(event) => {\n handleSelection(event, option.value, index);\n onClick?.(event, index);\n }}\n onKeyDown={(event) => {\n if (isKey(event, \"Enter\") === true) {\n handleSelection(event, option.value, index);\n onEnter?.(event, index);\n }\n }}\n tooltipWrapper={tooltipWrapper}\n selected={selected}\n key={option.key || option.label}\n aria-label={option.label}\n />\n );\n });\n\n const positionOffset = calculateOffset(options.length);\n const backgroundColor = hexToRgbA(\n colors?.atmo2,\n activeTheme?.scrollTo.backgroundColorOpacity\n );\n\n return (\n <ol\n className={cx(\n css({ backgroundColor }),\n classes.root,\n {\n [classes.positionFixed]: position === \"fixed\",\n [classes.positionAbsolute]: position === \"absolute\",\n },\n className\n )}\n style={{ top: `calc(50% - ${positionOffset}px)`, ...style }}\n id={elementId}\n {...others}\n >\n {tabs}\n </ol>\n );\n};\n"],"names":["HvScrollToVertical","props","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","style","others","useDefaultProps","css","cx","useClasses","activeTheme","colors","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","tabs","selected","tooltipWrapper","HvVerticalScrollListItem","setId","onKeyDown","isKey","key","positionOffset","calculateOffset","length","backgroundColor","hexToRgbA","atmo2","scrollTo","backgroundColorOpacity","root","positionFixed","positionAbsolute","top","children"],"mappings":";;;;;;;;;;;;;AA0EaA,MAAAA,qBAAqBA,CAACC,UAAmC;AAC9D,QAAA;AAAA,IACJC;AAAAA,IACAC,uBAAuB;AAAA,IACvBC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,SAAS;AAAA,IACTC,WAAW;AAAA,IACXC,kBAAkB;AAAA,IAClBC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,sBAAsBjB,KAAK;AAEzC,QAAA;AAAA,IAAES;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAC7C,QAAA;AAAA,IAAEW;AAAAA,IAAaC;AAAAA,MAAWC,SAAS;AAEnCC,QAAAA,YAAYC,YAAYxB,IAAI,oBAAoB;AAEhD,QAAA,CAACyB,eAAeC,WAAW,IAAIC,YACnC1B,sBACAC,iBACAC,MACAQ,QACAD,SACAN,QACF;AAEA,QAAMwB,kBAAkBA,CACtBC,OAGAC,OACAC,UACG;AACHF,UAAMG,eAAe;AAErB,UAAMC,kBAAkBA,MAAM;AAC5B7B,2CAAWyB,OAAOE;AAAAA,IAAK;AAGbF,gBAAAA,OAAOC,OAAOC,OAAOE,eAAe;AAAA,EAAA;AAG5CC,QAAAA,kBAAkBC,QAAQ,MAAM;AAC7BzB,WAAAA,QAAQ0B,IAAKC,CAAW,WAAA;AAC7B,aAAOC,YAAYD,OAAOE,OAAO,OAAO1B,iBAAiB,KAAK;AAAA,IAAA,CAC/D;AAAA,EAAA,GACA,CAACH,SAASG,eAAe,CAAC;AAE7B,QAAM2B,OAAO9B,QAAQ0B,IAAI,CAACC,QAAQN,UAAU;AAC1C,UAAMU,WAAWhB,kBAAkBM;AAC7BW,UAAAA,iBAAiBR,gBAAgBH,KAAK;AAE5C,+BACGY,0BAAwB;AAAA,MACvB3C,IAAI4C,MAAMrB,WAAY,QAAOQ,KAAM,EAAC;AAAA,MACpC1B,SAAUwB,CAAU,UAAA;AACFA,wBAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1C1B,2CAAUwB,OAAOE;AAAAA,MACnB;AAAA,MACAc,WAAYhB,CAAU,UAAA;AACpB,YAAIiB,MAAMjB,OAAO,OAAO,MAAM,MAAM;AAClBA,0BAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CzB,6CAAUuB,OAAOE;AAAAA,QACnB;AAAA,MACF;AAAA,MACAW;AAAAA,MACAD;AAAAA,MAEA,cAAYJ,OAAOE;AAAAA,IADdF,GAAAA,OAAOU,OAAOV,OAAOE,KAE3B;AAAA,EAAA,CAEJ;AAEKS,QAAAA,iBAAiBC,gBAAgBvC,QAAQwC,MAAM;AACrD,QAAMC,kBAAkBC,UACtB/B,iCAAQgC,OACRjC,2CAAakC,SAASC,sBACxB;AAEA,6BACE,MAAA;AAAA,IACEhD,WAAWW,GACTD,IAAI;AAAA,MAAEkC;AAAAA,IAAAA,CAAiB,GACvB3C,QAAQgD,MACR;AAAA,MACE,CAAChD,QAAQiD,aAAa,GAAG7C,aAAa;AAAA,MACtC,CAACJ,QAAQkD,gBAAgB,GAAG9C,aAAa;AAAA,OAE3CL,SACF;AAAA,IACAO,OAAO;AAAA,MAAE6C,KAAM,cAAaX,cAAe;AAAA,MAAM,GAAGlC;AAAAA,IAAM;AAAA,IAC1Dd,IAAIuB;AAAAA,IAAU,GACVR;AAAAA,IAAM6C,UAETpB;AAAAA,EAAAA,CACC;AAER;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollToVertical.styles.js","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvScrollToVertical\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n root: {\n display: \"flex\",\n width: \"32px\",\n padding: \"0\",\n margin: 0,\n listStyleType: \"none\",\n flexWrap: \"wrap\",\n flexDirection: \"column\",\n backdropFilter: `blur(${theme.scrollTo.backgroundColorBlur})`,\n },\n positionAbsolute: {\n width: \"32px\",\n position: \"absolute\",\n zIndex: `calc(${theme.zIndices.banner} - 2)`,\n right: \"0\",\n },\n positionFixed: {\n width: \"32px\",\n position: \"fixed\",\n zIndex: `calc(${theme.zIndices.banner} - 2)`,\n right: \"0\",\n },\n});\n\nexport const calculateOffset = (quantityOfOptions: number) => {\n const itemSize = 32;\n const halfOptions = Math.round(quantityOfOptions * 0.5);\n\n return halfOptions * itemSize;\n};\n"],"names":["name","staticClasses","useClasses","createClasses","root","display","width","padding","margin","listStyleType","flexWrap","flexDirection","backdropFilter","theme","scrollTo","backgroundColorBlur","positionAbsolute","position","zIndex","zIndices","banner","right","positionFixed","calculateOffset","quantityOfOptions","itemSize","halfOptions","Math","round"],"mappings":";;AAIA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAcH,MAAM;AAAA,EAC/DI,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,eAAe;AAAA,IACfC,gBAAiB,QAAOC,MAAMC,SAASC;
|
|
1
|
+
{"version":3,"file":"ScrollToVertical.styles.js","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvScrollToVertical\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n root: {\n display: \"flex\",\n width: \"32px\",\n padding: \"0\",\n margin: 0,\n listStyleType: \"none\",\n flexWrap: \"wrap\",\n flexDirection: \"column\",\n backdropFilter: `blur(${theme.scrollTo.backgroundColorBlur})`,\n },\n positionAbsolute: {\n width: \"32px\",\n position: \"absolute\",\n zIndex: `calc(${theme.zIndices.banner} - 2)`,\n right: \"0\",\n },\n positionFixed: {\n width: \"32px\",\n position: \"fixed\",\n zIndex: `calc(${theme.zIndices.banner} - 2)`,\n right: \"0\",\n },\n});\n\nexport const calculateOffset = (quantityOfOptions: number) => {\n const itemSize = 32;\n const halfOptions = Math.round(quantityOfOptions * 0.5);\n\n return halfOptions * itemSize;\n};\n"],"names":["name","staticClasses","useClasses","createClasses","root","display","width","padding","margin","listStyleType","flexWrap","flexDirection","backdropFilter","theme","scrollTo","backgroundColorBlur","positionAbsolute","position","zIndex","zIndices","banner","right","positionFixed","calculateOffset","quantityOfOptions","itemSize","halfOptions","Math","round"],"mappings":";;AAIA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAcH,MAAM;AAAA,EAC/DI,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,eAAe;AAAA,IACfC,gBAAiB,QAAOC,MAAMC,SAASC,mBAAoB;AAAA,EAC7D;AAAA,EACAC,kBAAkB;AAAA,IAChBV,OAAO;AAAA,IACPW,UAAU;AAAA,IACVC,QAAS,QAAOL,MAAMM,SAASC,MAAO;AAAA,IACtCC,OAAO;AAAA,EACT;AAAA,EACAC,eAAe;AAAA,IACbhB,OAAO;AAAA,IACPW,UAAU;AAAA,IACVC,QAAS,QAAOL,MAAMM,SAASC,MAAO;AAAA,IACtCC,OAAO;AAAA,EACT;AACF,CAAC;AAEYE,MAAAA,kBAAkBA,CAACC,sBAA8B;AAC5D,QAAMC,WAAW;AACjB,QAAMC,cAAcC,KAAKC,MAAMJ,oBAAoB,GAAG;AAEtD,SAAOE,cAAcD;AACvB;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useScrollTo.js","sources":["../../../../src/components/ScrollTo/useScrollTo.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport {\n findFirstVisibleElement,\n getScrollTop,\n isScrolledToTheBottom,\n scrollElement,\n verticalScrollOffset,\n} from \"./utils\";\nimport { HvScrollToVerticalOption } from \"./types\";\n\nexport const useScrollTo = (\n selectedIndexProp: number = 0,\n scrollElementId: string | undefined = undefined,\n href: boolean = false,\n offset: number = 0,\n options: HvScrollToVerticalOption[] = [],\n onChange:\n | ((\n event:\n | Event\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n index: number\n ) => void)\n | undefined = undefined,\n direction: \"column\" | \"row\" = \"column\"\n): [\n number,\n (\n event:\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n id: string,\n index: number,\n wrappedOnChange?: (index: number) => void\n ) => void\n] => {\n const RETRY_MAX: number = 5;\n const [selectedIndex, setSelectedIndex] = useState<number>(selectedIndexProp);\n\n const scrollEle = useRef<HTMLElement | (Window & typeof globalThis)>(window);\n const requestedAnimationFrame = useRef(0);\n const lastContainerScrollTop = useRef<number>(0);\n\n // Ref to use a often-changing value in useCallback, as recommended in\n // https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback\n const selectedIndexRef = useRef(selectedIndex);\n\n useEffect(() => {\n selectedIndexRef.current = selectedIndex;\n }, [selectedIndex]);\n\n useEffect(() => {\n scrollEle.current =\n (scrollElementId && document.getElementById(scrollElementId)) || window;\n\n lastContainerScrollTop.current = verticalScrollOffset(scrollEle.current);\n }, [scrollElementId]);\n\n const checkScroll = useCallback(\n (\n event:\n | Event\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>\n ) => {\n if (\n requestedAnimationFrame.current === 0 &&\n window?.requestAnimationFrame\n ) {\n requestedAnimationFrame.current = window.requestAnimationFrame(() => {\n requestedAnimationFrame.current = 0;\n\n const firstVisibleElementIndex = findFirstVisibleElement(\n scrollEle.current,\n options,\n offset\n );\n\n let newSelectedIndex = firstVisibleElementIndex;\n\n // select the first element when all elements are bellow the container's top\n if (firstVisibleElementIndex < 0) {\n newSelectedIndex = 0;\n }\n\n // if the user has reached the bottom of the container, select the first nav item still visible\n // (usually this selects the last nav item, when it can't reach the top the container)\n // in theory only needed when scrolling down, but no... because of the Safari bouncing behaviour\n if (\n newSelectedIndex < options.length - 1 &&\n isScrolledToTheBottom(scrollEle.current)\n ) {\n newSelectedIndex += 1;\n }\n\n const containerScrollTop = getScrollTop(scrollEle.current);\n const isScrollingDown =\n containerScrollTop > lastContainerScrollTop.current;\n lastContainerScrollTop.current = containerScrollTop;\n\n // only update the selected item if the scroll direction is moving away from it\n if (isScrollingDown) {\n if (newSelectedIndex < selectedIndexRef.current) {\n newSelectedIndex = selectedIndexRef.current;\n }\n } else if (newSelectedIndex > selectedIndexRef.current) {\n newSelectedIndex = selectedIndexRef.current;\n }\n\n setSelectedIndex(newSelectedIndex);\n onChange?.(event, newSelectedIndex);\n });\n }\n },\n [offset, options, onChange]\n );\n\n // Registers and unregisters the scroll listener\n useEffect(() => {\n if (scrollEle.current) {\n scrollEle.current.addEventListener(\"scroll\", checkScroll, false);\n }\n\n return () => {\n if (scrollEle.current) {\n scrollEle.current.removeEventListener(\"scroll\", checkScroll);\n }\n\n if (requestedAnimationFrame.current !== 0) {\n window.cancelAnimationFrame(requestedAnimationFrame.current);\n requestedAnimationFrame.current = 0;\n }\n };\n }, [checkScroll]);\n\n // Waits for the elements to be rendered and scrolls to the one referenced in the URL hash, if any\n useEffect(() => {\n let checkRenderedInterval;\n\n if (href) {\n const hashValue = document.location.hash.split(\"#\")[1] || \"\";\n\n const option = options.find((o) => o.value === hashValue);\n\n if (option) {\n let retry = 0;\n checkRenderedInterval = setInterval(() => {\n const ele = document.getElementById(option.value);\n\n if (ele) {\n scrollElement(ele, scrollEle.current, option.offset || offset);\n clearInterval(checkRenderedInterval);\n } else {\n retry += 1;\n if (retry === RETRY_MAX) {\n clearInterval(checkRenderedInterval);\n }\n }\n }, 1000);\n }\n }\n\n return () => {\n clearInterval(checkRenderedInterval);\n };\n\n // We really want to run this just in the first load\n // in fact this doesn't even belong here, the logic should be external\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const setScrollTo = (\n event:\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n id: string,\n index: number,\n wrappedOnChange?: (index: number) => void\n ) => {\n const option = options.find((o) => o.value === id);\n\n if (option) {\n const ele = document.getElementById(id);\n if (ele) {\n scrollElement(\n ele,\n scrollEle.current,\n option.offset || offset,\n direction\n );\n }\n\n if (href) {\n window.history.pushState({}, \"\", `#${options[index].value}`);\n }\n\n setSelectedIndex(index);\n wrappedOnChange?.(index);\n\n // Safari scrolls immediately (no smooth scroll support),\n // so this ref value must be updated asap\n selectedIndexRef.current = index;\n }\n };\n\n return [selectedIndex, setScrollTo];\n};\n"],"names":["useScrollTo","selectedIndexProp","scrollElementId","undefined","href","offset","options","onChange","direction","RETRY_MAX","selectedIndex","setSelectedIndex","useState","scrollEle","useRef","window","requestedAnimationFrame","lastContainerScrollTop","selectedIndexRef","useEffect","current","document","getElementById","verticalScrollOffset","checkScroll","useCallback","event","requestAnimationFrame","firstVisibleElementIndex","findFirstVisibleElement","newSelectedIndex","length","isScrolledToTheBottom","containerScrollTop","getScrollTop","isScrollingDown","addEventListener","removeEventListener","cancelAnimationFrame","checkRenderedInterval","hashValue","location","hash","split","option","find","o","value","retry","setInterval","ele","scrollElement","clearInterval","setScrollTo","id","index","wrappedOnChange","history","pushState"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useScrollTo.js","sources":["../../../../src/components/ScrollTo/useScrollTo.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport {\n findFirstVisibleElement,\n getScrollTop,\n isScrolledToTheBottom,\n scrollElement,\n verticalScrollOffset,\n} from \"./utils\";\nimport { HvScrollToVerticalOption } from \"./types\";\n\nexport const useScrollTo = (\n selectedIndexProp: number = 0,\n scrollElementId: string | undefined = undefined,\n href: boolean = false,\n offset: number = 0,\n options: HvScrollToVerticalOption[] = [],\n onChange:\n | ((\n event:\n | Event\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n index: number\n ) => void)\n | undefined = undefined,\n direction: \"column\" | \"row\" = \"column\"\n): [\n number,\n (\n event:\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n id: string,\n index: number,\n wrappedOnChange?: (index: number) => void\n ) => void\n] => {\n const RETRY_MAX: number = 5;\n const [selectedIndex, setSelectedIndex] = useState<number>(selectedIndexProp);\n\n const scrollEle = useRef<HTMLElement | (Window & typeof globalThis)>(window);\n const requestedAnimationFrame = useRef(0);\n const lastContainerScrollTop = useRef<number>(0);\n\n // Ref to use a often-changing value in useCallback, as recommended in\n // https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback\n const selectedIndexRef = useRef(selectedIndex);\n\n useEffect(() => {\n selectedIndexRef.current = selectedIndex;\n }, [selectedIndex]);\n\n useEffect(() => {\n scrollEle.current =\n (scrollElementId && document.getElementById(scrollElementId)) || window;\n\n lastContainerScrollTop.current = verticalScrollOffset(scrollEle.current);\n }, [scrollElementId]);\n\n const checkScroll = useCallback(\n (\n event:\n | Event\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>\n ) => {\n if (\n requestedAnimationFrame.current === 0 &&\n window?.requestAnimationFrame\n ) {\n requestedAnimationFrame.current = window.requestAnimationFrame(() => {\n requestedAnimationFrame.current = 0;\n\n const firstVisibleElementIndex = findFirstVisibleElement(\n scrollEle.current,\n options,\n offset\n );\n\n let newSelectedIndex = firstVisibleElementIndex;\n\n // select the first element when all elements are bellow the container's top\n if (firstVisibleElementIndex < 0) {\n newSelectedIndex = 0;\n }\n\n // if the user has reached the bottom of the container, select the first nav item still visible\n // (usually this selects the last nav item, when it can't reach the top the container)\n // in theory only needed when scrolling down, but no... because of the Safari bouncing behaviour\n if (\n newSelectedIndex < options.length - 1 &&\n isScrolledToTheBottom(scrollEle.current)\n ) {\n newSelectedIndex += 1;\n }\n\n const containerScrollTop = getScrollTop(scrollEle.current);\n const isScrollingDown =\n containerScrollTop > lastContainerScrollTop.current;\n lastContainerScrollTop.current = containerScrollTop;\n\n // only update the selected item if the scroll direction is moving away from it\n if (isScrollingDown) {\n if (newSelectedIndex < selectedIndexRef.current) {\n newSelectedIndex = selectedIndexRef.current;\n }\n } else if (newSelectedIndex > selectedIndexRef.current) {\n newSelectedIndex = selectedIndexRef.current;\n }\n\n setSelectedIndex(newSelectedIndex);\n onChange?.(event, newSelectedIndex);\n });\n }\n },\n [offset, options, onChange]\n );\n\n // Registers and unregisters the scroll listener\n useEffect(() => {\n if (scrollEle.current) {\n scrollEle.current.addEventListener(\"scroll\", checkScroll, false);\n }\n\n return () => {\n if (scrollEle.current) {\n scrollEle.current.removeEventListener(\"scroll\", checkScroll);\n }\n\n if (requestedAnimationFrame.current !== 0) {\n window.cancelAnimationFrame(requestedAnimationFrame.current);\n requestedAnimationFrame.current = 0;\n }\n };\n }, [checkScroll]);\n\n // Waits for the elements to be rendered and scrolls to the one referenced in the URL hash, if any\n useEffect(() => {\n let checkRenderedInterval;\n\n if (href) {\n const hashValue = document.location.hash.split(\"#\")[1] || \"\";\n\n const option = options.find((o) => o.value === hashValue);\n\n if (option) {\n let retry = 0;\n checkRenderedInterval = setInterval(() => {\n const ele = document.getElementById(option.value);\n\n if (ele) {\n scrollElement(ele, scrollEle.current, option.offset || offset);\n clearInterval(checkRenderedInterval);\n } else {\n retry += 1;\n if (retry === RETRY_MAX) {\n clearInterval(checkRenderedInterval);\n }\n }\n }, 1000);\n }\n }\n\n return () => {\n clearInterval(checkRenderedInterval);\n };\n\n // We really want to run this just in the first load\n // in fact this doesn't even belong here, the logic should be external\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const setScrollTo = (\n event:\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n id: string,\n index: number,\n wrappedOnChange?: (index: number) => void\n ) => {\n const option = options.find((o) => o.value === id);\n\n if (option) {\n const ele = document.getElementById(id);\n if (ele) {\n scrollElement(\n ele,\n scrollEle.current,\n option.offset || offset,\n direction\n );\n }\n\n if (href) {\n window.history.pushState({}, \"\", `#${options[index].value}`);\n }\n\n setSelectedIndex(index);\n wrappedOnChange?.(index);\n\n // Safari scrolls immediately (no smooth scroll support),\n // so this ref value must be updated asap\n selectedIndexRef.current = index;\n }\n };\n\n return [selectedIndex, setScrollTo];\n};\n"],"names":["useScrollTo","selectedIndexProp","scrollElementId","undefined","href","offset","options","onChange","direction","RETRY_MAX","selectedIndex","setSelectedIndex","useState","scrollEle","useRef","window","requestedAnimationFrame","lastContainerScrollTop","selectedIndexRef","useEffect","current","document","getElementById","verticalScrollOffset","checkScroll","useCallback","event","requestAnimationFrame","firstVisibleElementIndex","findFirstVisibleElement","newSelectedIndex","length","isScrolledToTheBottom","containerScrollTop","getScrollTop","isScrollingDown","addEventListener","removeEventListener","cancelAnimationFrame","checkRenderedInterval","hashValue","location","hash","split","option","find","o","value","retry","setInterval","ele","scrollElement","clearInterval","setScrollTo","id","index","wrappedOnChange","history","pushState"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectionList.styles.js","sources":["../../../../src/components/SelectionList/SelectionList.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSelectionList\", {\n root: { display: \"inline-block\", padding: 0, margin: 0 },\n error: { width: \"100%\", float: \"left\", clear: \"both\" },\n listbox: {\n display: \"flex\",\n float: \"left\",\n clear: \"both\",\n width: \"100%\",\n paddingBottom: theme.space.xs,\n },\n label: { marginBottom: theme.space.xs, float: \"left\" },\n description: { float: \"left\" },\n horizontal: {\n flexDirection: \"row\",\n flexWrap: \"wrap\",\n marginLeft: -theme.space.sm,\n \"&>*\": {\n marginLeft: theme.space.sm,\n },\n },\n vertical: {\n flexDirection: \"column\",\n\n // Prevent the focus ring to be hidden by sibling hover background\n \"&>*\": {\n zIndex: 0,\n },\n \"&>*:focus-within\": {\n zIndex: 1,\n },\n },\n invalid: { borderBottom: `1px solid ${theme.colors.negative}` },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","padding","margin","error","width","float","clear","listbox","paddingBottom","theme","space","xs","label","marginBottom","description","horizontal","flexDirection","flexWrap","marginLeft","sm","vertical","zIndex","invalid","borderBottom","colors","negative"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,mBAAmB;AAAA,EAC5EC,MAAM;AAAA,IAAEC,SAAS;AAAA,IAAgBC,SAAS;AAAA,IAAGC,QAAQ;AAAA,EAAE;AAAA,EACvDC,OAAO;AAAA,IAAEC,OAAO;AAAA,IAAQC,OAAO;AAAA,IAAQC,OAAO;AAAA,EAAO;AAAA,EACrDC,SAAS;AAAA,IACPP,SAAS;AAAA,IACTK,OAAO;AAAA,IACPC,OAAO;AAAA,IACPF,OAAO;AAAA,IACPI,eAAeC,MAAMC,MAAMC;AAAAA,EAC7B;AAAA,EACAC,OAAO;AAAA,IAAEC,cAAcJ,MAAMC,MAAMC;AAAAA,IAAIN,OAAO;AAAA,EAAO;AAAA,EACrDS,aAAa;AAAA,IAAET,OAAO;AAAA,EAAO;AAAA,EAC7BU,YAAY;AAAA,IACVC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,YAAY,CAACT,MAAMC,MAAMS;AAAAA,IACzB,OAAO;AAAA,MACLD,YAAYT,MAAMC,MAAMS;AAAAA,IAC1B;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACRJ,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACLK,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClBA,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,SAAS;AAAA,IAAEC,cAAe,aAAYd,MAAMe,OAAOC;
|
|
1
|
+
{"version":3,"file":"SelectionList.styles.js","sources":["../../../../src/components/SelectionList/SelectionList.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSelectionList\", {\n root: { display: \"inline-block\", padding: 0, margin: 0 },\n error: { width: \"100%\", float: \"left\", clear: \"both\" },\n listbox: {\n display: \"flex\",\n float: \"left\",\n clear: \"both\",\n width: \"100%\",\n paddingBottom: theme.space.xs,\n },\n label: { marginBottom: theme.space.xs, float: \"left\" },\n description: { float: \"left\" },\n horizontal: {\n flexDirection: \"row\",\n flexWrap: \"wrap\",\n marginLeft: -theme.space.sm,\n \"&>*\": {\n marginLeft: theme.space.sm,\n },\n },\n vertical: {\n flexDirection: \"column\",\n\n // Prevent the focus ring to be hidden by sibling hover background\n \"&>*\": {\n zIndex: 0,\n },\n \"&>*:focus-within\": {\n zIndex: 1,\n },\n },\n invalid: { borderBottom: `1px solid ${theme.colors.negative}` },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","padding","margin","error","width","float","clear","listbox","paddingBottom","theme","space","xs","label","marginBottom","description","horizontal","flexDirection","flexWrap","marginLeft","sm","vertical","zIndex","invalid","borderBottom","colors","negative"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,mBAAmB;AAAA,EAC5EC,MAAM;AAAA,IAAEC,SAAS;AAAA,IAAgBC,SAAS;AAAA,IAAGC,QAAQ;AAAA,EAAE;AAAA,EACvDC,OAAO;AAAA,IAAEC,OAAO;AAAA,IAAQC,OAAO;AAAA,IAAQC,OAAO;AAAA,EAAO;AAAA,EACrDC,SAAS;AAAA,IACPP,SAAS;AAAA,IACTK,OAAO;AAAA,IACPC,OAAO;AAAA,IACPF,OAAO;AAAA,IACPI,eAAeC,MAAMC,MAAMC;AAAAA,EAC7B;AAAA,EACAC,OAAO;AAAA,IAAEC,cAAcJ,MAAMC,MAAMC;AAAAA,IAAIN,OAAO;AAAA,EAAO;AAAA,EACrDS,aAAa;AAAA,IAAET,OAAO;AAAA,EAAO;AAAA,EAC7BU,YAAY;AAAA,IACVC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,YAAY,CAACT,MAAMC,MAAMS;AAAAA,IACzB,OAAO;AAAA,MACLD,YAAYT,MAAMC,MAAMS;AAAAA,IAC1B;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACRJ,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACLK,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClBA,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,SAAS;AAAA,IAAEC,cAAe,aAAYd,MAAMe,OAAOC,QAAS;AAAA,EAAE;AAChE,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SimpleGrid.styles.js","sources":["../../../../src/components/SimpleGrid/SimpleGrid.styles.tsx"],"sourcesContent":["import { CSSObject } from \"@emotion/serialize\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nimport { Spacing, Breakpoint } from \"./types\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSimpleGrid\", {\n root: {},\n});\n\nfunction size(props: { size: any; sizes: any }) {\n if (typeof props.size === \"number\") {\n return props.size;\n }\n\n return props.sizes[props.size] || props.size || props.sizes.md;\n}\n\nfunction getSortedBreakpoints(breakpoints: Breakpoint[]) {\n if (breakpoints.length === 0) {\n return breakpoints;\n }\n\n const property = \"maxWidth\" in breakpoints[0] ? \"maxWidth\" : \"minWidth\";\n const sorted = [...breakpoints].sort(\n (a, b) =>\n size({ size: b[property], sizes: theme.breakpoints }) -\n size({ size: a[property], sizes: theme.breakpoints })\n );\n\n return property === \"minWidth\" ? sorted.reverse() : sorted;\n}\n\nexport const getContainerStyle = ({\n breakpoints,\n spacing,\n cols,\n}: {\n breakpoints?: Breakpoint[];\n spacing: Spacing;\n cols?: number;\n}): CSSObject => {\n return {\n boxSizing: \"border-box\",\n display: \"grid\",\n gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,\n gap: theme.space[spacing],\n ...(breakpoints &&\n getSortedBreakpoints(breakpoints).reduce((acc, breakpoint) => {\n const property = \"maxWidth\" in breakpoint ? \"max-width\" : \"min-width\";\n const breakpointSize = size({\n size:\n property === \"max-width\"\n ? breakpoint.maxWidth\n : breakpoint.minWidth,\n sizes: theme.breakpoints,\n });\n\n acc[\n `@media (${property}: ${\n breakpointSize + (property === \"max-width\" ? 0 : 1)\n }px)`\n ] = {\n gridTemplateColumns: `repeat(${breakpoint.cols}, minmax(0, 1fr))`,\n gap: theme.space[spacing],\n };\n\n return acc;\n }, {})),\n };\n};\n"],"names":["staticClasses","useClasses","createClasses","root","size","props","sizes","md","getSortedBreakpoints","breakpoints","length","property","sorted","sort","a","b","theme","reverse","getContainerStyle","spacing","cols","boxSizing","display","gridTemplateColumns","gap","space","reduce","acc","breakpoint","breakpointSize","maxWidth","minWidth"],"mappings":";;AAQa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,gBAAgB;AAAA,EACzEC,MAAM,CAAC;AACT,CAAC;AAED,SAASC,KAAKC,OAAkC;AAC1C,MAAA,OAAOA,MAAMD,SAAS,UAAU;AAClC,WAAOC,MAAMD;AAAAA,EACf;AAEOC,SAAAA,MAAMC,MAAMD,MAAMD,IAAI,KAAKC,MAAMD,QAAQC,MAAMC,MAAMC;AAC9D;AAEA,SAASC,qBAAqBC,aAA2B;AACnDA,MAAAA,YAAYC,WAAW,GAAG;AACrBD,WAAAA;AAAAA,EACT;AAEA,QAAME,WAAW,cAAcF,YAAY,CAAC,IAAI,aAAa;AACvDG,QAAAA,SAAS,CAAC,GAAGH,WAAW,EAAEI,KAC9B,CAACC,GAAGC,MACFX,KAAK;AAAA,IAAEA,MAAMW,EAAEJ,QAAQ;AAAA,IAAGL,OAAOU,MAAMP;AAAAA,EAAa,CAAA,IACpDL,KAAK;AAAA,IAAEA,MAAMU,EAAEH,QAAQ;AAAA,IAAGL,OAAOU,MAAMP;AAAAA,EAAa,CAAA,CACxD;AAEA,SAAOE,aAAa,aAAaC,OAAOK,QAAAA,IAAYL;AACtD;AAEO,MAAMM,oBAAoBA,CAAC;AAAA,EAChCT;AAAAA,EACAU;AAAAA,EACAC;AAKF,MAAiB;AACR,SAAA;AAAA,IACLC,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,qBAAsB,UAASH;
|
|
1
|
+
{"version":3,"file":"SimpleGrid.styles.js","sources":["../../../../src/components/SimpleGrid/SimpleGrid.styles.tsx"],"sourcesContent":["import { CSSObject } from \"@emotion/serialize\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nimport { Spacing, Breakpoint } from \"./types\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSimpleGrid\", {\n root: {},\n});\n\nfunction size(props: { size: any; sizes: any }) {\n if (typeof props.size === \"number\") {\n return props.size;\n }\n\n return props.sizes[props.size] || props.size || props.sizes.md;\n}\n\nfunction getSortedBreakpoints(breakpoints: Breakpoint[]) {\n if (breakpoints.length === 0) {\n return breakpoints;\n }\n\n const property = \"maxWidth\" in breakpoints[0] ? \"maxWidth\" : \"minWidth\";\n const sorted = [...breakpoints].sort(\n (a, b) =>\n size({ size: b[property], sizes: theme.breakpoints }) -\n size({ size: a[property], sizes: theme.breakpoints })\n );\n\n return property === \"minWidth\" ? sorted.reverse() : sorted;\n}\n\nexport const getContainerStyle = ({\n breakpoints,\n spacing,\n cols,\n}: {\n breakpoints?: Breakpoint[];\n spacing: Spacing;\n cols?: number;\n}): CSSObject => {\n return {\n boxSizing: \"border-box\",\n display: \"grid\",\n gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,\n gap: theme.space[spacing],\n ...(breakpoints &&\n getSortedBreakpoints(breakpoints).reduce((acc, breakpoint) => {\n const property = \"maxWidth\" in breakpoint ? \"max-width\" : \"min-width\";\n const breakpointSize = size({\n size:\n property === \"max-width\"\n ? breakpoint.maxWidth\n : breakpoint.minWidth,\n sizes: theme.breakpoints,\n });\n\n acc[\n `@media (${property}: ${\n breakpointSize + (property === \"max-width\" ? 0 : 1)\n }px)`\n ] = {\n gridTemplateColumns: `repeat(${breakpoint.cols}, minmax(0, 1fr))`,\n gap: theme.space[spacing],\n };\n\n return acc;\n }, {})),\n };\n};\n"],"names":["staticClasses","useClasses","createClasses","root","size","props","sizes","md","getSortedBreakpoints","breakpoints","length","property","sorted","sort","a","b","theme","reverse","getContainerStyle","spacing","cols","boxSizing","display","gridTemplateColumns","gap","space","reduce","acc","breakpoint","breakpointSize","maxWidth","minWidth"],"mappings":";;AAQa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,gBAAgB;AAAA,EACzEC,MAAM,CAAC;AACT,CAAC;AAED,SAASC,KAAKC,OAAkC;AAC1C,MAAA,OAAOA,MAAMD,SAAS,UAAU;AAClC,WAAOC,MAAMD;AAAAA,EACf;AAEOC,SAAAA,MAAMC,MAAMD,MAAMD,IAAI,KAAKC,MAAMD,QAAQC,MAAMC,MAAMC;AAC9D;AAEA,SAASC,qBAAqBC,aAA2B;AACnDA,MAAAA,YAAYC,WAAW,GAAG;AACrBD,WAAAA;AAAAA,EACT;AAEA,QAAME,WAAW,cAAcF,YAAY,CAAC,IAAI,aAAa;AACvDG,QAAAA,SAAS,CAAC,GAAGH,WAAW,EAAEI,KAC9B,CAACC,GAAGC,MACFX,KAAK;AAAA,IAAEA,MAAMW,EAAEJ,QAAQ;AAAA,IAAGL,OAAOU,MAAMP;AAAAA,EAAa,CAAA,IACpDL,KAAK;AAAA,IAAEA,MAAMU,EAAEH,QAAQ;AAAA,IAAGL,OAAOU,MAAMP;AAAAA,EAAa,CAAA,CACxD;AAEA,SAAOE,aAAa,aAAaC,OAAOK,QAAAA,IAAYL;AACtD;AAEO,MAAMM,oBAAoBA,CAAC;AAAA,EAChCT;AAAAA,EACAU;AAAAA,EACAC;AAKF,MAAiB;AACR,SAAA;AAAA,IACLC,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,qBAAsB,UAASH,IAAK;AAAA,IACpCI,KAAKR,MAAMS,MAAMN,OAAO;AAAA,IACxB,GAAIV,eACFD,qBAAqBC,WAAW,EAAEiB,OAAO,CAACC,KAAKC,eAAe;AACtDjB,YAAAA,WAAW,cAAciB,aAAa,cAAc;AAC1D,YAAMC,iBAAiBzB,KAAK;AAAA,QAC1BA,MACEO,aAAa,cACTiB,WAAWE,WACXF,WAAWG;AAAAA,QACjBzB,OAAOU,MAAMP;AAAAA,MAAAA,CACd;AAGE,UAAA,WAAUE,QAAS,KAClBkB,kBAAkBlB,aAAa,cAAc,IAAI,EAClD,KAAI,IACH;AAAA,QACFY,qBAAsB,UAASK,WAAWR,IAAK;AAAA,QAC/CI,KAAKR,MAAMS,MAAMN,OAAO;AAAA,MAAA;AAGnBQ,aAAAA;AAAAA,IACT,GAAG,EAAE;AAAA,EAAA;AAEX;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import Slider, { SliderProps } from \"rc-slider\";\n\nimport React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport Tooltip from \"rc-tooltip\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport validationStates from \"@core/components/Forms/FormElement/validationStates\";\nimport { HvInputProps } from \"@core/components/Input\";\nimport {\n HvFormElement,\n HvFormStatus,\n HvLabel,\n HvWarningText,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { sliderStyles, staticClasses, useClasses } from \"./Slider.styles\";\nimport {\n calculateStepValue,\n convertStatusToArray,\n createKnobStyles,\n createMark,\n createTrackStyles,\n ensureValuesConsistency,\n generateDefaultKnobProperties,\n isSingleSlider,\n knobsPositionsToKnobsValues,\n knobsPositionToScaledValue,\n knobsValuesToKnobsPositions,\n scaledValueToKnobsPositionValue,\n statusArrayToFormStatus,\n} from \"./utils\";\nimport { HvSliderInput } from \"./SliderInput/SliderInput\";\nimport { HvKnobProperty, HvMarkProperty } from \"./types\";\n\nexport { staticClasses as sliderClasses };\n\nexport type HvSliderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSliderProps\n extends HvBaseProps<HTMLDivElement, \"onChange\" | \"onBlur\"> {\n /**\n * The slider name.\n */\n name?: string;\n /**\n * The label of the slider.\n *\n * If not provided, an aria-label or aria-labelledby must be inputted via sliderProps.\n */\n label?: React.ReactNode;\n /**\n * Indicates that the slider is disabled.\n */\n disabled?: boolean;\n /**\n * Indicates that the slider is not editable.\n */\n readOnly?: boolean;\n /**\n * Indicates that user slider is required on the form element.\n */\n required?: boolean;\n /**\n * What message to render when the value is required.\n */\n requiredMessage?: string;\n /**\n * If `true` the input that controls the slider is hidden.\n */\n hideInput?: boolean;\n /**\n * Attributes applied to the slider element.\n */\n sliderProps?: SliderProps;\n /**\n * The status of the slider element.\n *\n * Valid is correct, invalid is incorrect and standBy means no validations have run.\n *\n * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to the state.\n */\n status?: HvFormStatus | HvFormStatus[];\n /**\n * The error message to show when `status` is \"invalid\".\n */\n statusMessage?: React.ReactNode;\n /**\n * The values array to apply to the component\n */\n values?: number[];\n /**\n * The default values array to apply to the component\n */\n defaultValues?: (number | undefined)[];\n /**\n * The object used to set the knob properties,\n * for every item in the array a new knob will be created.\n */\n knobProperties?: HvKnobProperty[];\n /**\n * The object used to set the mark properties individually.\n */\n markProperties?: HvMarkProperty[];\n /**\n * The function executed before a change will occur in the slider.\n */\n onBeforeChange?: (value: number[]) => void;\n /**\n * The function executed while a change is occurring in the slider.\n */\n onChange?: (value: number[]) => void;\n /**\n * The function executed after a change ocurred in the slider.\n */\n onAfterChange?: (value: number[]) => void;\n /**\n * The function executed after a blur ocurred in the slider.\n */\n onBlur?: (\n event: React.FocusEvent,\n knobsValues: number[],\n status?: HvFormStatus | HvFormStatus[]\n ) => void;\n /**\n * The separation in points between marks.\n * example: if 10 divisions and a markstep of 2 there will be 5 marks.\n */\n markStep?: number;\n /**\n * How many subdivisions there are in the slider.\n */\n divisionQuantity?: number;\n /**\n * The value of the first point in the slider from left to right.\n */\n minPointValue?: number;\n /**\n * The value of the last point in the slider from left to right.\n */\n maxPointValue?: number;\n /**\n * The nax number of decimals if no format function is applied\n */\n markDigits?: number;\n /**\n * A formatting function used to add format to the marks in the track,\n * the function receives the mark text\n */\n formatMark?: (label: React.ReactNode) => React.ReactNode;\n /**\n * A formatting function used to add format to the tooltip in the track,\n * the function receives the mark text\n */\n formatTooltip?: (label: React.ReactNode) => React.ReactNode;\n /**\n * If `true` the knobs can't have the same value, if `false` knobs can have the same value.\n */\n noOverlap?: boolean;\n /**\n * Attributes applied to the input element.\n */\n inputProps?: HvInputProps[];\n /**\n * Attributes applied to the knob element.\n */\n knobProps?: React.HTMLAttributes<HTMLDivElement>[];\n /**\n * The classes object to be applied into the root object.\n */\n classes?: HvSliderClasses;\n}\n\n/**\n * Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.\n */\nexport const HvSlider = (props: HvSliderProps) => {\n const {\n id,\n className,\n name,\n label,\n status,\n statusMessage,\n disabled,\n classes: classesProp,\n sliderProps,\n knobProps,\n inputProps,\n requiredMessage = \"The value is required\",\n noOverlap = true,\n hideInput = false,\n required = false,\n readOnly = false,\n markProperties = [],\n defaultValues = [undefined],\n values: valuesProp = [],\n knobProperties: knobPropertiesProp,\n \"aria-errormessage\": ariaErrorMessage,\n maxPointValue = 100,\n minPointValue = 0,\n divisionQuantity = 100,\n markStep = 20,\n markDigits = 0,\n formatMark,\n onChange,\n onBlur,\n onBeforeChange,\n onAfterChange,\n formatTooltip,\n ...others\n } = useDefaultProps(\"HvSlider\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n // Miscellaneous state\n const hasLabel = label != null;\n\n // Signals that the user has manually edited the input value\n const isDirty = useRef(false);\n\n const elementId = useUniqueId(id, \"hvSlider\");\n\n const sliderInputId = setId(elementId, \"input\");\n\n const stepValue: number = useMemo(\n () => calculateStepValue(maxPointValue, minPointValue, divisionQuantity),\n [divisionQuantity, maxPointValue, minPointValue]\n );\n\n const inverseStepValue: number = 1 / stepValue;\n\n const marks = useMemo(\n () =>\n createMark(\n markProperties,\n markStep,\n divisionQuantity,\n minPointValue,\n stepValue,\n markDigits,\n !!disabled,\n sliderStyles,\n formatMark\n ),\n [\n disabled,\n divisionQuantity,\n formatMark,\n markDigits,\n markProperties,\n markStep,\n minPointValue,\n stepValue,\n ]\n );\n\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) ||\n (status === undefined && required));\n\n const isSingle: boolean = useMemo(\n () => isSingleSlider(valuesProp, defaultValues),\n [defaultValues, valuesProp]\n );\n\n const value: number[] | undefined = useMemo(\n () =>\n valuesProp?.length > 0\n ? knobsValuesToKnobsPositions(\n valuesProp,\n inverseStepValue,\n minPointValue\n )\n : undefined,\n [inverseStepValue, minPointValue, valuesProp]\n );\n\n const defaultKnobsPositions: number[] = useMemo(\n () =>\n knobsValuesToKnobsPositions(\n defaultValues,\n inverseStepValue,\n minPointValue\n ),\n [defaultValues, inverseStepValue, minPointValue]\n );\n\n const [knobsPositions, setKnobsPositions] = useControlled(\n value,\n defaultKnobsPositions\n );\n\n // Validation related state\n const { arrayStatus, arrayDefaultStatus } = useMemo(\n () => convertStatusToArray(knobsPositions.length, status),\n [knobsPositions.length, status]\n );\n\n const [validationStatus, setValidationState] = useControlled(\n arrayStatus,\n arrayDefaultStatus\n );\n\n const [validationMessage, setValidationMessage] = useControlled(\n statusMessage,\n \"\"\n );\n\n const [isDraggingTrack, setIsDraggingTrack] = useState<boolean>(false);\n\n const knobProperties: HvKnobProperty[] = generateDefaultKnobProperties(\n knobsPositions.length,\n disabled,\n knobPropertiesProp\n );\n\n const rangesCount = knobProperties.length - 1;\n\n const trackStyles = createTrackStyles(knobProperties, sliderStyles);\n\n const knobStyles = createKnobStyles(knobProperties, sliderStyles);\n\n const performValidation = useCallback(() => {\n let invalid: boolean = false;\n\n const newValidationState = knobsPositions.map((position) => {\n if (position == null || Number.isNaN(position)) {\n invalid = true;\n return validationStates.invalid;\n }\n return validationStates.valid;\n });\n\n setValidationState([...newValidationState]);\n\n if (invalid) {\n setValidationMessage(requiredMessage);\n return;\n }\n\n setValidationMessage(\"\");\n }, [\n knobsPositions,\n requiredMessage,\n setValidationMessage,\n setValidationState,\n ]);\n\n useEffect(() => {\n const stepVl = calculateStepValue(\n maxPointValue,\n minPointValue,\n divisionQuantity\n );\n\n const inverseStepVl = 1 / stepVl;\n\n if (valuesProp?.length > 0) {\n setKnobsPositions(\n knobsValuesToKnobsPositions(\n valuesProp.length > 0 ? valuesProp : defaultValues,\n inverseStepVl,\n minPointValue\n )\n );\n }\n }, [\n defaultValues,\n divisionQuantity,\n maxPointValue,\n minPointValue,\n setKnobsPositions,\n valuesProp,\n ]);\n\n useEffect(() => {\n if (!isDirty.current) {\n // Skip validation if currently focused or if empty and\n // the user never manually edited the input value\n return;\n }\n\n performValidation();\n }, [knobsPositions, requiredMessage, performValidation]);\n\n const onMouseDownHandler = (event: React.MouseEvent<HTMLDivElement>) => {\n if ((event.target as HTMLDivElement).className.includes(\"track\")) {\n setIsDraggingTrack(true);\n }\n };\n\n const onMouseUpHandler = () => {\n setIsDraggingTrack(false);\n };\n\n /**\n * Generates an object which posses the current value and position of the knobs.\n *\n * @param {Array} knobsCurrentPosition - An array containing the current positions of the knobs.\n * @returns {Object} - An object with the positions and values of the knobs.\n * @memberof HvSlider\n */\n const generateKnobsPositionAndValues = (\n knobsCurrentPosition: number[]\n ): { knobsPosition: number[]; knobsValues: number[] } => {\n const newKnobsPosition: number[] = knobsCurrentPosition.slice();\n const knobsValues: number[] = [];\n\n let duplicatedValue: number | null = null;\n\n const findDuplicated: number[] = newKnobsPosition.filter(\n (item, index) => newKnobsPosition.indexOf(item) !== index\n );\n\n if (noOverlap && findDuplicated.length > 0) {\n [duplicatedValue] = findDuplicated;\n }\n\n newKnobsPosition.forEach((position, index, array) => {\n const newArray: number[] = array;\n let newPosition: number = position;\n\n if (noOverlap && newPosition === duplicatedValue) {\n const previousValue = knobsPositions[index];\n if (previousValue !== newPosition) {\n newPosition += newPosition > previousValue ? -1 : 1;\n newArray[index] = newPosition;\n }\n }\n\n knobsValues[index] = knobsPositionToScaledValue(\n newPosition,\n minPointValue,\n stepValue\n );\n }, this);\n\n return {\n knobsPosition: newKnobsPosition,\n knobsValues,\n };\n };\n\n const onBlurHandler = (event: React.FocusEvent) => {\n const knobs = generateKnobsPositionAndValues(knobsPositions);\n\n performValidation();\n\n onBlur?.(event, knobs.knobsValues, status);\n };\n\n /**\n * Function executed while the knobs changes.\n *\n * executes the callback provided by the user with the values and position of the knobs,\n * also lock the value of the knob in case one is fixed.\n *\n * @param {Array} knobsPosition - An array containing the current positions of the knobs.\n * @memberof HvSlider\n */\n const onChangeHandler = (knobsPosition: number[]) => {\n isDirty.current = true;\n\n const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n knobProperties.forEach((knobProperty, index) => {\n if (knobProperty.fixed) {\n knobs.knobsPosition[index] = scaledValueToKnobsPositionValue(\n defaultValues[index],\n minPointValue,\n inverseStepValue\n );\n }\n });\n\n if (disabled || readOnly) return;\n\n onChange?.(knobs.knobsValues);\n\n setKnobsPositions(knobs.knobsPosition);\n };\n\n const onInputChangeHandler = (inputValues: number[], index: number) => {\n let newKnobPositions = knobsValuesToKnobsPositions(\n inputValues,\n inverseStepValue,\n minPointValue\n );\n\n newKnobPositions = ensureValuesConsistency(newKnobPositions, index);\n\n onChangeHandler(newKnobPositions);\n };\n\n /**\n * Function executed before a change.\n *\n * executes the callback provided by the user with the values and position of the knobs\n *\n * @param {Array} knobsPosition - An array containing the current positions of the knobs.\n * @memberof HvSlider\n */\n const onBeforeChangeHandler = (knobsPosition: number[]) => {\n const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n onBeforeChange?.(knobs.knobsValues);\n };\n\n /**\n * Function executed after a change.\n *\n * executes the callback provided by the user with the values and position of the knobs\n *\n * @param {Array} knobsPosition - An array containing the current positions of the knobs.\n * @memberof HvSlider\n */\n const onAfterChangeHandler = (knobsPosition: number[]) => {\n const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n onAfterChange?.(knobs.knobsValues);\n };\n\n /**\n * Function used to create a custom knob for the slider.\n *\n * TODO: This should be isolated because is creating a sub component,\n * but there were some problems regarding the underlying component losing\n * references of the handlers disabling the focus.\n *\n * @param {Object} props - An object containing the properties of the knobs.\n * @memberof HvSlider\n */\n const createKnob = (knobNode, params) => {\n const { value: knobValue, dragging, index } = params;\n const { className: knobClassName, style, ...restProps } = knobNode.props;\n const scaledKnobValue = knobsPositionToScaledValue(\n knobValue,\n minPointValue,\n stepValue\n ).toFixed(markDigits);\n if (dragging) {\n style.backgroundColor = knobProperties[index]?.dragColor;\n } else {\n style.backgroundColor = knobProperties[index]?.color;\n }\n\n const isEmpty =\n Number.isNaN(knobsPositions[index]) || knobsPositions[index] == null;\n const handleId = setId(elementId, \"knob\");\n const indexedHandleId = setId(handleId, index);\n\n return (\n <div\n key={index}\n className={cx({\n [classes.handleContainer]: !!(!disabled && !isEmpty),\n [classes.handleContainerDisabled]: !!(disabled && !isEmpty),\n [classes.handleHiddenContainer]: isEmpty || readOnly,\n })}\n >\n <Tooltip\n prefixCls=\"rc-slider-tooltip\"\n overlay={formatTooltip?.(scaledKnobValue) || scaledKnobValue}\n visible={dragging}\n placement=\"top\"\n overlayClassName={classes.sliderTooltip}\n getTooltipContainer={() =>\n document.getElementById(indexedHandleId || \"\") as HTMLElement\n }\n >\n <div\n id={indexedHandleId}\n style={style}\n className={cx(knobClassName, classes.handle)}\n {...restProps}\n aria-label={`${label}-knob-${index}`}\n aria-valuenow={knobsPositionToScaledValue(\n knobValue,\n minPointValue,\n stepValue\n )}\n aria-valuemin={minPointValue}\n aria-valuemax={maxPointValue}\n {...knobProps?.[index]}\n />\n </Tooltip>\n </div>\n );\n };\n\n return (\n <HvFormElement\n className={cx(\n classes.root,\n {\n [classes.trackStandBy]:\n !readOnly && !disabled && !isSingle && !isDraggingTrack,\n [classes.trackDragging]:\n !readOnly && !disabled && !isSingle && isDraggingTrack,\n [classes.rootDisabled]: !!disabled,\n },\n className\n )}\n id={id}\n name={name}\n status={statusArrayToFormStatus(validationStatus)}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n onMouseDown={onMouseDownHandler}\n onMouseUp={onMouseUpHandler}\n onBlur={onBlurHandler}\n {...others}\n >\n {(hasLabel || !hideInput) && (\n <div\n className={cx(classes.labelContainer, {\n [classes.labelIncluded]: hasLabel,\n [classes.onlyInput]: !hasLabel,\n })}\n >\n {hasLabel && (\n <HvLabel\n id={setId(elementId, \"label\")}\n className={classes.label}\n htmlFor={setId(elementId, \"slider\")}\n label={label}\n />\n )}\n\n {!hideInput && (\n <HvSliderInput\n id={sliderInputId}\n label={label}\n values={knobsPositionsToKnobsValues(\n knobsPositions,\n stepValue,\n minPointValue\n )}\n onChange={onInputChangeHandler}\n status={validationStatus}\n disabled={disabled}\n readOnly={readOnly}\n markDigits={markDigits}\n inputProps={inputProps}\n />\n )}\n </div>\n )}\n\n <div className={cx(classes.sliderBase, classes.sliderContainer)}>\n {isSingle && (\n <Slider\n handleRender={createKnob}\n className={classes.sliderRoot}\n min={0}\n max={divisionQuantity}\n step={1}\n marks={marks}\n dotStyle={disabled ? sliderStyles.dotDisabled : sliderStyles.dot}\n onChange={(singleValue) =>\n onChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n onBeforeChange={(singleValue) =>\n onBeforeChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n onAfterChange={(singleValue) =>\n onAfterChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n value={knobsPositions.length > 0 ? knobsPositions[0] : undefined}\n allowCross={false}\n disabled={disabled}\n count={rangesCount}\n railStyle={sliderStyles.rail}\n handleStyle={knobStyles.knobInner}\n trackStyle={trackStyles}\n {...sliderProps}\n />\n )}\n {!isSingle && (\n <Slider\n range\n handleRender={createKnob}\n className={cx(classes.sliderRoot, {\n [classes.rootRange]: !isSingle,\n })}\n min={0}\n max={divisionQuantity}\n step={1}\n marks={marks}\n disabled={disabled}\n dotStyle={disabled ? sliderStyles.dotDisabled : sliderStyles.dot}\n onChange={(singleValue) =>\n onChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n onBeforeChange={(singleValue) =>\n onBeforeChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n onAfterChange={(singleValue) =>\n onAfterChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n value={knobsPositions.length > 0 ? [...knobsPositions] : undefined}\n allowCross={false}\n count={rangesCount}\n railStyle={sliderStyles.rail}\n handleStyle={knobStyles.knobInner}\n trackStyle={trackStyles}\n draggableTrack={!readOnly && !isSingle}\n {...sliderProps}\n />\n )}\n </div>\n\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n className={classes.error}\n disableBorder\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n};\n"],"names":["HvSlider","props","id","className","name","label","status","statusMessage","disabled","classes","classesProp","sliderProps","knobProps","inputProps","requiredMessage","noOverlap","hideInput","required","readOnly","markProperties","defaultValues","undefined","values","valuesProp","knobProperties","knobPropertiesProp","ariaErrorMessage","maxPointValue","minPointValue","divisionQuantity","markStep","markDigits","formatMark","onChange","onBlur","onBeforeChange","onAfterChange","formatTooltip","others","useDefaultProps","cx","useClasses","hasLabel","isDirty","useRef","elementId","useUniqueId","sliderInputId","setId","stepValue","useMemo","calculateStepValue","inverseStepValue","marks","createMark","sliderStyles","canShowError","isSingle","isSingleSlider","value","length","knobsValuesToKnobsPositions","defaultKnobsPositions","knobsPositions","setKnobsPositions","useControlled","arrayStatus","arrayDefaultStatus","convertStatusToArray","validationStatus","setValidationState","validationMessage","setValidationMessage","isDraggingTrack","setIsDraggingTrack","useState","generateDefaultKnobProperties","rangesCount","trackStyles","createTrackStyles","knobStyles","createKnobStyles","performValidation","useCallback","invalid","newValidationState","map","position","Number","isNaN","validationStates","valid","useEffect","stepVl","inverseStepVl","current","onMouseDownHandler","event","target","includes","onMouseUpHandler","generateKnobsPositionAndValues","knobsCurrentPosition","newKnobsPosition","slice","knobsValues","duplicatedValue","findDuplicated","filter","item","index","indexOf","forEach","array","newArray","newPosition","previousValue","knobsPositionToScaledValue","knobsPosition","onBlurHandler","knobs","onChangeHandler","knobProperty","fixed","scaledValueToKnobsPositionValue","onInputChangeHandler","inputValues","newKnobPositions","ensureValuesConsistency","onBeforeChangeHandler","onAfterChangeHandler","createKnob","knobNode","params","knobValue","dragging","knobClassName","style","restProps","scaledKnobValue","toFixed","backgroundColor","dragColor","color","isEmpty","handleId","indexedHandleId","handleContainer","handleContainerDisabled","handleHiddenContainer","children","Tooltip","prefixCls","overlay","visible","placement","overlayClassName","sliderTooltip","getTooltipContainer","document","getElementById","handle","HvFormElement","root","trackStandBy","trackDragging","rootDisabled","statusArrayToFormStatus","onMouseDown","onMouseUp","labelContainer","labelIncluded","onlyInput","_jsx","HvLabel","htmlFor","HvSliderInput","knobsPositionsToKnobsValues","_jsxs","sliderBase","sliderContainer","Slider","handleRender","sliderRoot","min","max","step","dotStyle","dotDisabled","dot","singleValue","Array","isArray","allowCross","count","railStyle","rail","handleStyle","knobInner","trackStyle","range","rootRange","draggableTrack","HvWarningText","error","disableBorder"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Slider.js","sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import Slider, { SliderProps } from \"rc-slider\";\n\nimport React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport Tooltip from \"rc-tooltip\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport validationStates from \"@core/components/Forms/FormElement/validationStates\";\nimport { HvInputProps } from \"@core/components/Input\";\nimport {\n HvFormElement,\n HvFormStatus,\n HvLabel,\n HvWarningText,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { sliderStyles, staticClasses, useClasses } from \"./Slider.styles\";\nimport {\n calculateStepValue,\n convertStatusToArray,\n createKnobStyles,\n createMark,\n createTrackStyles,\n ensureValuesConsistency,\n generateDefaultKnobProperties,\n isSingleSlider,\n knobsPositionsToKnobsValues,\n knobsPositionToScaledValue,\n knobsValuesToKnobsPositions,\n scaledValueToKnobsPositionValue,\n statusArrayToFormStatus,\n} from \"./utils\";\nimport { HvSliderInput } from \"./SliderInput/SliderInput\";\nimport { HvKnobProperty, HvMarkProperty } from \"./types\";\n\nexport { staticClasses as sliderClasses };\n\nexport type HvSliderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSliderProps\n extends HvBaseProps<HTMLDivElement, \"onChange\" | \"onBlur\"> {\n /**\n * The slider name.\n */\n name?: string;\n /**\n * The label of the slider.\n *\n * If not provided, an aria-label or aria-labelledby must be inputted via sliderProps.\n */\n label?: React.ReactNode;\n /**\n * Indicates that the slider is disabled.\n */\n disabled?: boolean;\n /**\n * Indicates that the slider is not editable.\n */\n readOnly?: boolean;\n /**\n * Indicates that user slider is required on the form element.\n */\n required?: boolean;\n /**\n * What message to render when the value is required.\n */\n requiredMessage?: string;\n /**\n * If `true` the input that controls the slider is hidden.\n */\n hideInput?: boolean;\n /**\n * Attributes applied to the slider element.\n */\n sliderProps?: SliderProps;\n /**\n * The status of the slider element.\n *\n * Valid is correct, invalid is incorrect and standBy means no validations have run.\n *\n * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to the state.\n */\n status?: HvFormStatus | HvFormStatus[];\n /**\n * The error message to show when `status` is \"invalid\".\n */\n statusMessage?: React.ReactNode;\n /**\n * The values array to apply to the component\n */\n values?: number[];\n /**\n * The default values array to apply to the component\n */\n defaultValues?: (number | undefined)[];\n /**\n * The object used to set the knob properties,\n * for every item in the array a new knob will be created.\n */\n knobProperties?: HvKnobProperty[];\n /**\n * The object used to set the mark properties individually.\n */\n markProperties?: HvMarkProperty[];\n /**\n * The function executed before a change will occur in the slider.\n */\n onBeforeChange?: (value: number[]) => void;\n /**\n * The function executed while a change is occurring in the slider.\n */\n onChange?: (value: number[]) => void;\n /**\n * The function executed after a change ocurred in the slider.\n */\n onAfterChange?: (value: number[]) => void;\n /**\n * The function executed after a blur ocurred in the slider.\n */\n onBlur?: (\n event: React.FocusEvent,\n knobsValues: number[],\n status?: HvFormStatus | HvFormStatus[]\n ) => void;\n /**\n * The separation in points between marks.\n * example: if 10 divisions and a markstep of 2 there will be 5 marks.\n */\n markStep?: number;\n /**\n * How many subdivisions there are in the slider.\n */\n divisionQuantity?: number;\n /**\n * The value of the first point in the slider from left to right.\n */\n minPointValue?: number;\n /**\n * The value of the last point in the slider from left to right.\n */\n maxPointValue?: number;\n /**\n * The nax number of decimals if no format function is applied\n */\n markDigits?: number;\n /**\n * A formatting function used to add format to the marks in the track,\n * the function receives the mark text\n */\n formatMark?: (label: React.ReactNode) => React.ReactNode;\n /**\n * A formatting function used to add format to the tooltip in the track,\n * the function receives the mark text\n */\n formatTooltip?: (label: React.ReactNode) => React.ReactNode;\n /**\n * If `true` the knobs can't have the same value, if `false` knobs can have the same value.\n */\n noOverlap?: boolean;\n /**\n * Attributes applied to the input element.\n */\n inputProps?: HvInputProps[];\n /**\n * Attributes applied to the knob element.\n */\n knobProps?: React.HTMLAttributes<HTMLDivElement>[];\n /**\n * The classes object to be applied into the root object.\n */\n classes?: HvSliderClasses;\n}\n\n/**\n * Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.\n */\nexport const HvSlider = (props: HvSliderProps) => {\n const {\n id,\n className,\n name,\n label,\n status,\n statusMessage,\n disabled,\n classes: classesProp,\n sliderProps,\n knobProps,\n inputProps,\n requiredMessage = \"The value is required\",\n noOverlap = true,\n hideInput = false,\n required = false,\n readOnly = false,\n markProperties = [],\n defaultValues = [undefined],\n values: valuesProp = [],\n knobProperties: knobPropertiesProp,\n \"aria-errormessage\": ariaErrorMessage,\n maxPointValue = 100,\n minPointValue = 0,\n divisionQuantity = 100,\n markStep = 20,\n markDigits = 0,\n formatMark,\n onChange,\n onBlur,\n onBeforeChange,\n onAfterChange,\n formatTooltip,\n ...others\n } = useDefaultProps(\"HvSlider\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n // Miscellaneous state\n const hasLabel = label != null;\n\n // Signals that the user has manually edited the input value\n const isDirty = useRef(false);\n\n const elementId = useUniqueId(id, \"hvSlider\");\n\n const sliderInputId = setId(elementId, \"input\");\n\n const stepValue: number = useMemo(\n () => calculateStepValue(maxPointValue, minPointValue, divisionQuantity),\n [divisionQuantity, maxPointValue, minPointValue]\n );\n\n const inverseStepValue: number = 1 / stepValue;\n\n const marks = useMemo(\n () =>\n createMark(\n markProperties,\n markStep,\n divisionQuantity,\n minPointValue,\n stepValue,\n markDigits,\n !!disabled,\n sliderStyles,\n formatMark\n ),\n [\n disabled,\n divisionQuantity,\n formatMark,\n markDigits,\n markProperties,\n markStep,\n minPointValue,\n stepValue,\n ]\n );\n\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) ||\n (status === undefined && required));\n\n const isSingle: boolean = useMemo(\n () => isSingleSlider(valuesProp, defaultValues),\n [defaultValues, valuesProp]\n );\n\n const value: number[] | undefined = useMemo(\n () =>\n valuesProp?.length > 0\n ? knobsValuesToKnobsPositions(\n valuesProp,\n inverseStepValue,\n minPointValue\n )\n : undefined,\n [inverseStepValue, minPointValue, valuesProp]\n );\n\n const defaultKnobsPositions: number[] = useMemo(\n () =>\n knobsValuesToKnobsPositions(\n defaultValues,\n inverseStepValue,\n minPointValue\n ),\n [defaultValues, inverseStepValue, minPointValue]\n );\n\n const [knobsPositions, setKnobsPositions] = useControlled(\n value,\n defaultKnobsPositions\n );\n\n // Validation related state\n const { arrayStatus, arrayDefaultStatus } = useMemo(\n () => convertStatusToArray(knobsPositions.length, status),\n [knobsPositions.length, status]\n );\n\n const [validationStatus, setValidationState] = useControlled(\n arrayStatus,\n arrayDefaultStatus\n );\n\n const [validationMessage, setValidationMessage] = useControlled(\n statusMessage,\n \"\"\n );\n\n const [isDraggingTrack, setIsDraggingTrack] = useState<boolean>(false);\n\n const knobProperties: HvKnobProperty[] = generateDefaultKnobProperties(\n knobsPositions.length,\n disabled,\n knobPropertiesProp\n );\n\n const rangesCount = knobProperties.length - 1;\n\n const trackStyles = createTrackStyles(knobProperties, sliderStyles);\n\n const knobStyles = createKnobStyles(knobProperties, sliderStyles);\n\n const performValidation = useCallback(() => {\n let invalid: boolean = false;\n\n const newValidationState = knobsPositions.map((position) => {\n if (position == null || Number.isNaN(position)) {\n invalid = true;\n return validationStates.invalid;\n }\n return validationStates.valid;\n });\n\n setValidationState([...newValidationState]);\n\n if (invalid) {\n setValidationMessage(requiredMessage);\n return;\n }\n\n setValidationMessage(\"\");\n }, [\n knobsPositions,\n requiredMessage,\n setValidationMessage,\n setValidationState,\n ]);\n\n useEffect(() => {\n const stepVl = calculateStepValue(\n maxPointValue,\n minPointValue,\n divisionQuantity\n );\n\n const inverseStepVl = 1 / stepVl;\n\n if (valuesProp?.length > 0) {\n setKnobsPositions(\n knobsValuesToKnobsPositions(\n valuesProp.length > 0 ? valuesProp : defaultValues,\n inverseStepVl,\n minPointValue\n )\n );\n }\n }, [\n defaultValues,\n divisionQuantity,\n maxPointValue,\n minPointValue,\n setKnobsPositions,\n valuesProp,\n ]);\n\n useEffect(() => {\n if (!isDirty.current) {\n // Skip validation if currently focused or if empty and\n // the user never manually edited the input value\n return;\n }\n\n performValidation();\n }, [knobsPositions, requiredMessage, performValidation]);\n\n const onMouseDownHandler = (event: React.MouseEvent<HTMLDivElement>) => {\n if ((event.target as HTMLDivElement).className.includes(\"track\")) {\n setIsDraggingTrack(true);\n }\n };\n\n const onMouseUpHandler = () => {\n setIsDraggingTrack(false);\n };\n\n /**\n * Generates an object which posses the current value and position of the knobs.\n *\n * @param {Array} knobsCurrentPosition - An array containing the current positions of the knobs.\n * @returns {Object} - An object with the positions and values of the knobs.\n * @memberof HvSlider\n */\n const generateKnobsPositionAndValues = (\n knobsCurrentPosition: number[]\n ): { knobsPosition: number[]; knobsValues: number[] } => {\n const newKnobsPosition: number[] = knobsCurrentPosition.slice();\n const knobsValues: number[] = [];\n\n let duplicatedValue: number | null = null;\n\n const findDuplicated: number[] = newKnobsPosition.filter(\n (item, index) => newKnobsPosition.indexOf(item) !== index\n );\n\n if (noOverlap && findDuplicated.length > 0) {\n [duplicatedValue] = findDuplicated;\n }\n\n newKnobsPosition.forEach((position, index, array) => {\n const newArray: number[] = array;\n let newPosition: number = position;\n\n if (noOverlap && newPosition === duplicatedValue) {\n const previousValue = knobsPositions[index];\n if (previousValue !== newPosition) {\n newPosition += newPosition > previousValue ? -1 : 1;\n newArray[index] = newPosition;\n }\n }\n\n knobsValues[index] = knobsPositionToScaledValue(\n newPosition,\n minPointValue,\n stepValue\n );\n }, this);\n\n return {\n knobsPosition: newKnobsPosition,\n knobsValues,\n };\n };\n\n const onBlurHandler = (event: React.FocusEvent) => {\n const knobs = generateKnobsPositionAndValues(knobsPositions);\n\n performValidation();\n\n onBlur?.(event, knobs.knobsValues, status);\n };\n\n /**\n * Function executed while the knobs changes.\n *\n * executes the callback provided by the user with the values and position of the knobs,\n * also lock the value of the knob in case one is fixed.\n *\n * @param {Array} knobsPosition - An array containing the current positions of the knobs.\n * @memberof HvSlider\n */\n const onChangeHandler = (knobsPosition: number[]) => {\n isDirty.current = true;\n\n const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n knobProperties.forEach((knobProperty, index) => {\n if (knobProperty.fixed) {\n knobs.knobsPosition[index] = scaledValueToKnobsPositionValue(\n defaultValues[index],\n minPointValue,\n inverseStepValue\n );\n }\n });\n\n if (disabled || readOnly) return;\n\n onChange?.(knobs.knobsValues);\n\n setKnobsPositions(knobs.knobsPosition);\n };\n\n const onInputChangeHandler = (inputValues: number[], index: number) => {\n let newKnobPositions = knobsValuesToKnobsPositions(\n inputValues,\n inverseStepValue,\n minPointValue\n );\n\n newKnobPositions = ensureValuesConsistency(newKnobPositions, index);\n\n onChangeHandler(newKnobPositions);\n };\n\n /**\n * Function executed before a change.\n *\n * executes the callback provided by the user with the values and position of the knobs\n *\n * @param {Array} knobsPosition - An array containing the current positions of the knobs.\n * @memberof HvSlider\n */\n const onBeforeChangeHandler = (knobsPosition: number[]) => {\n const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n onBeforeChange?.(knobs.knobsValues);\n };\n\n /**\n * Function executed after a change.\n *\n * executes the callback provided by the user with the values and position of the knobs\n *\n * @param {Array} knobsPosition - An array containing the current positions of the knobs.\n * @memberof HvSlider\n */\n const onAfterChangeHandler = (knobsPosition: number[]) => {\n const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n onAfterChange?.(knobs.knobsValues);\n };\n\n /**\n * Function used to create a custom knob for the slider.\n *\n * TODO: This should be isolated because is creating a sub component,\n * but there were some problems regarding the underlying component losing\n * references of the handlers disabling the focus.\n *\n * @param {Object} props - An object containing the properties of the knobs.\n * @memberof HvSlider\n */\n const createKnob = (knobNode, params) => {\n const { value: knobValue, dragging, index } = params;\n const { className: knobClassName, style, ...restProps } = knobNode.props;\n const scaledKnobValue = knobsPositionToScaledValue(\n knobValue,\n minPointValue,\n stepValue\n ).toFixed(markDigits);\n if (dragging) {\n style.backgroundColor = knobProperties[index]?.dragColor;\n } else {\n style.backgroundColor = knobProperties[index]?.color;\n }\n\n const isEmpty =\n Number.isNaN(knobsPositions[index]) || knobsPositions[index] == null;\n const handleId = setId(elementId, \"knob\");\n const indexedHandleId = setId(handleId, index);\n\n return (\n <div\n key={index}\n className={cx({\n [classes.handleContainer]: !!(!disabled && !isEmpty),\n [classes.handleContainerDisabled]: !!(disabled && !isEmpty),\n [classes.handleHiddenContainer]: isEmpty || readOnly,\n })}\n >\n <Tooltip\n prefixCls=\"rc-slider-tooltip\"\n overlay={formatTooltip?.(scaledKnobValue) || scaledKnobValue}\n visible={dragging}\n placement=\"top\"\n overlayClassName={classes.sliderTooltip}\n getTooltipContainer={() =>\n document.getElementById(indexedHandleId || \"\") as HTMLElement\n }\n >\n <div\n id={indexedHandleId}\n style={style}\n className={cx(knobClassName, classes.handle)}\n {...restProps}\n aria-label={`${label}-knob-${index}`}\n aria-valuenow={knobsPositionToScaledValue(\n knobValue,\n minPointValue,\n stepValue\n )}\n aria-valuemin={minPointValue}\n aria-valuemax={maxPointValue}\n {...knobProps?.[index]}\n />\n </Tooltip>\n </div>\n );\n };\n\n return (\n <HvFormElement\n className={cx(\n classes.root,\n {\n [classes.trackStandBy]:\n !readOnly && !disabled && !isSingle && !isDraggingTrack,\n [classes.trackDragging]:\n !readOnly && !disabled && !isSingle && isDraggingTrack,\n [classes.rootDisabled]: !!disabled,\n },\n className\n )}\n id={id}\n name={name}\n status={statusArrayToFormStatus(validationStatus)}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n onMouseDown={onMouseDownHandler}\n onMouseUp={onMouseUpHandler}\n onBlur={onBlurHandler}\n {...others}\n >\n {(hasLabel || !hideInput) && (\n <div\n className={cx(classes.labelContainer, {\n [classes.labelIncluded]: hasLabel,\n [classes.onlyInput]: !hasLabel,\n })}\n >\n {hasLabel && (\n <HvLabel\n id={setId(elementId, \"label\")}\n className={classes.label}\n htmlFor={setId(elementId, \"slider\")}\n label={label}\n />\n )}\n\n {!hideInput && (\n <HvSliderInput\n id={sliderInputId}\n label={label}\n values={knobsPositionsToKnobsValues(\n knobsPositions,\n stepValue,\n minPointValue\n )}\n onChange={onInputChangeHandler}\n status={validationStatus}\n disabled={disabled}\n readOnly={readOnly}\n markDigits={markDigits}\n inputProps={inputProps}\n />\n )}\n </div>\n )}\n\n <div className={cx(classes.sliderBase, classes.sliderContainer)}>\n {isSingle && (\n <Slider\n handleRender={createKnob}\n className={classes.sliderRoot}\n min={0}\n max={divisionQuantity}\n step={1}\n marks={marks}\n dotStyle={disabled ? sliderStyles.dotDisabled : sliderStyles.dot}\n onChange={(singleValue) =>\n onChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n onBeforeChange={(singleValue) =>\n onBeforeChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n onAfterChange={(singleValue) =>\n onAfterChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n value={knobsPositions.length > 0 ? knobsPositions[0] : undefined}\n allowCross={false}\n disabled={disabled}\n count={rangesCount}\n railStyle={sliderStyles.rail}\n handleStyle={knobStyles.knobInner}\n trackStyle={trackStyles}\n {...sliderProps}\n />\n )}\n {!isSingle && (\n <Slider\n range\n handleRender={createKnob}\n className={cx(classes.sliderRoot, {\n [classes.rootRange]: !isSingle,\n })}\n min={0}\n max={divisionQuantity}\n step={1}\n marks={marks}\n disabled={disabled}\n dotStyle={disabled ? sliderStyles.dotDisabled : sliderStyles.dot}\n onChange={(singleValue) =>\n onChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n onBeforeChange={(singleValue) =>\n onBeforeChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n onAfterChange={(singleValue) =>\n onAfterChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n value={knobsPositions.length > 0 ? [...knobsPositions] : undefined}\n allowCross={false}\n count={rangesCount}\n railStyle={sliderStyles.rail}\n handleStyle={knobStyles.knobInner}\n trackStyle={trackStyles}\n draggableTrack={!readOnly && !isSingle}\n {...sliderProps}\n />\n )}\n </div>\n\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n className={classes.error}\n disableBorder\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n};\n"],"names":["HvSlider","props","id","className","name","label","status","statusMessage","disabled","classes","classesProp","sliderProps","knobProps","inputProps","requiredMessage","noOverlap","hideInput","required","readOnly","markProperties","defaultValues","undefined","values","valuesProp","knobProperties","knobPropertiesProp","ariaErrorMessage","maxPointValue","minPointValue","divisionQuantity","markStep","markDigits","formatMark","onChange","onBlur","onBeforeChange","onAfterChange","formatTooltip","others","useDefaultProps","cx","useClasses","hasLabel","isDirty","useRef","elementId","useUniqueId","sliderInputId","setId","stepValue","useMemo","calculateStepValue","inverseStepValue","marks","createMark","sliderStyles","canShowError","isSingle","isSingleSlider","value","length","knobsValuesToKnobsPositions","defaultKnobsPositions","knobsPositions","setKnobsPositions","useControlled","arrayStatus","arrayDefaultStatus","convertStatusToArray","validationStatus","setValidationState","validationMessage","setValidationMessage","isDraggingTrack","setIsDraggingTrack","useState","generateDefaultKnobProperties","rangesCount","trackStyles","createTrackStyles","knobStyles","createKnobStyles","performValidation","useCallback","invalid","newValidationState","map","position","Number","isNaN","validationStates","valid","useEffect","stepVl","inverseStepVl","current","onMouseDownHandler","event","target","includes","onMouseUpHandler","generateKnobsPositionAndValues","knobsCurrentPosition","newKnobsPosition","slice","knobsValues","duplicatedValue","findDuplicated","filter","item","index","indexOf","forEach","array","newArray","newPosition","previousValue","knobsPositionToScaledValue","knobsPosition","onBlurHandler","knobs","onChangeHandler","knobProperty","fixed","scaledValueToKnobsPositionValue","onInputChangeHandler","inputValues","newKnobPositions","ensureValuesConsistency","onBeforeChangeHandler","onAfterChangeHandler","createKnob","knobNode","params","knobValue","dragging","knobClassName","style","restProps","scaledKnobValue","toFixed","backgroundColor","dragColor","color","isEmpty","handleId","indexedHandleId","handleContainer","handleContainerDisabled","handleHiddenContainer","children","Tooltip","prefixCls","overlay","visible","placement","overlayClassName","sliderTooltip","getTooltipContainer","document","getElementById","handle","HvFormElement","root","trackStandBy","trackDragging","rootDisabled","statusArrayToFormStatus","onMouseDown","onMouseUp","labelContainer","labelIncluded","onlyInput","_jsx","HvLabel","htmlFor","HvSliderInput","knobsPositionsToKnobsValues","_jsxs","sliderBase","sliderContainer","Slider","handleRender","sliderRoot","min","max","step","dotStyle","dotDisabled","dot","singleValue","Array","isArray","allowCross","count","railStyle","rail","handleStyle","knobInner","trackStyle","range","rootRange","draggableTrack","HvWarningText","error","disableBorder"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.styles.js","sources":["../../../../src/components/Slider/Slider.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { CSSProperties } from \"react\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nimport base from \"./base\";\n\nconst dot: CSSProperties = {\n position: \"absolute\",\n bottom: \"-1px\",\n marginLeft: \"0px\",\n width: \"1px\",\n height: \"4px\",\n border: \"none\",\n borderRadius: \"0%\",\n backgroundColor: theme.colors.atmo4,\n cursor: \"pointer\",\n verticalAlign: \"middle\",\n zIndex: \"-3\",\n};\n\nconst dragSquare: CSSProperties = {\n cursor: \"grab\",\n width: \"calc(100% - 40px)\",\n left: \"20px\",\n height: \"27px\",\n position: \"absolute\",\n top: \"-12px\",\n content: \"''\",\n background: \"transparent\",\n borderTop: `12px solid ${theme.slider.dragBarColor}`,\n borderBottom: `12px solid ${theme.slider.dragBarColor}`,\n zIndex: \"-2\",\n};\n\nconst ring: CSSProperties = {\n width: \"32px\",\n height: \"32px\",\n borderRadius: \"50%\",\n border: `9px solid ${theme.slider.ringColor}`,\n opacity: theme.slider.ringOpacity,\n content: \"''\",\n position: \"absolute\",\n top: \"-10px\",\n left: \"-10px\",\n};\n\nconst border: CSSProperties = {\n width: \"20px\",\n height: \"20px\",\n borderRadius: \"50%\",\n border: `2px solid ${theme.colors.atmo1}`,\n content: \"''\",\n position: \"absolute\",\n top: \"-4px\",\n left: \"-4px\",\n};\n\nexport interface SliderStyles {\n disabledMark: CSSProperties;\n mark: CSSProperties;\n dotDisabled: CSSProperties;\n dot: CSSProperties;\n knobInner: CSSProperties;\n knobOuter: CSSProperties;\n knobHidden: CSSProperties;\n knobHiddenLast: CSSProperties;\n track: CSSProperties;\n rail: CSSProperties;\n}\n\nexport const sliderStyles: SliderStyles = {\n mark: {\n ...(theme.typography.caption1 as CSSProperties),\n fontFamily: theme.fontFamily.body,\n top: \"-2px\",\n zIndex: -1,\n },\n disabledMark: {\n ...(theme.typography.caption1 as CSSProperties),\n fontFamily: theme.fontFamily.body,\n color: `${theme.colors.secondary_60}`,\n cursor: \"not-allowed\",\n top: \"-2px\",\n },\n dot: {\n ...dot,\n },\n dotDisabled: {\n ...dot,\n cursor: \"not-allowed\",\n },\n knobHidden: { display: \"none\" },\n knobHiddenLast: {\n borderColor: \"transparent\",\n height: \"3px\",\n width: \"2px\",\n marginLeft: \"-1px\",\n border: \"none\",\n borderRadius: \"0\",\n marginTop: \"0px\",\n left: \"100%\",\n touchAction: \"none\",\n cursor: \"default\",\n },\n knobInner: {\n borderColor: \"transparent\",\n boxShadow: \"none\",\n backgroundColor: theme.colors.secondary,\n width: \"16px\",\n height: \"16px\",\n },\n knobOuter: {\n position: \"relative\",\n borderColor: \"transparent\",\n borderRadius: \"50%\",\n boxShadow: \"none\",\n backgroundColor: theme.colors.atmo4,\n width: \"32px\",\n height: \"32px\",\n top: \"-80%\",\n left: \"-80%\",\n zIndex: \"-1\",\n },\n track: {\n backgroundColor: theme.colors.secondary,\n height: \"3px\",\n zIndex: \"-1\",\n marginTop: \"-1px\",\n },\n rail: { backgroundColor: theme.colors.atmo4, height: \"1px\", zIndex: \"-3\" },\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSlider\", {\n sliderBase: { ...(base as CSSProperties) },\n rootDisabled: {\n cursor: \"not-allowed\",\n \"&& .rc-slider-disabled\": {\n background: \"transparent\",\n },\n },\n sliderContainer: { marginBottom: \"18px\", padding: \"0 23px\" },\n error: { padding: \"0 8px\" },\n trackDragging: {\n cursor: \"grabbing\",\n\n \"&& .rc-slider-track\": {\n \"&::before\": {\n ...dragSquare,\n cursor: \"grabbing\",\n },\n },\n },\n trackStandBy: {\n \"&& .rc-slider-track\": {\n \"&:hover\": {\n \"&::before\": {\n ...dragSquare,\n },\n },\n },\n },\n sliderRoot: { zIndex: 0 },\n rootRange: {},\n handleContainer: {\n \"&& .rc-slider-handle\": {\n cursor: \"pointer\",\n marginTop: \"-8px\",\n opacity: 1,\n \"&:active\": {\n cursor: \"grab\",\n \"&::before\": {\n ...ring,\n },\n \"&::after\": {\n ...border,\n },\n },\n \"&:hover\": {\n \"&::before\": {\n ...ring,\n },\n \"&::after\": {\n ...border,\n },\n },\n\n // Note about the usage of `!important below`: the way the rc-slider allows us to\n // style the knobs is through inline styles. This means that the `box-shadow`, which\n // is an inline style and is set to `none` to prevent the default rc-slider style to\n // show, can't be overridden for the focus scenario unless we use the `!important` flag.\n \"&:focus-visible\": {\n ...outlineStyles,\n boxShadow: \"0 0 0 3px #52A8EC, 0 0 0 7px rgba(29,155,209,.3)!important\",\n \"&::after\": {\n ...border,\n },\n },\n },\n },\n handle: {},\n handleContainerDisabled: {\n \"&& .rc-slider-handle\": {\n cursor: \"not-allowed\",\n marginTop: \"-8px\",\n opacity: 1,\n \"&:active\": {\n cursor: \"not-allowed\",\n },\n \"&:hover\": {\n cursor: \"not-allowed\",\n },\n },\n },\n handleHiddenContainer: { display: \"none\" },\n labelContainer: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n marginBottom: \"12px\",\n marginLeft: \"20px\",\n marginRight: \"20px\",\n },\n labelIncluded: { justifyContent: \"space-between\" },\n onlyInput: { justifyContent: \"flex-end\" },\n label: {},\n root: {},\n sliderTooltip: {\n \"&& .rc-slider-tooltip-inner\": {\n background: theme.colors.atmo1,\n borderRadius: 0,\n maxWidth: \"532px\",\n height: \"100%\",\n padding: theme.space.sm,\n ...theme.typography.body,\n fontFamily: theme.fontFamily.body,\n boxShadow: \"none\",\n },\n\n \"&& .rc-slider-tooltip-arrow\": {\n visibility: \"hidden\",\n },\n },\n});\n"],"names":["dot","position","bottom","marginLeft","width","height","border","borderRadius","backgroundColor","theme","colors","atmo4","cursor","verticalAlign","zIndex","dragSquare","left","top","content","background","borderTop","slider","dragBarColor","borderBottom","ring","ringColor","opacity","ringOpacity","atmo1","sliderStyles","mark","typography","caption1","fontFamily","body","disabledMark","color","secondary_60","dotDisabled","knobHidden","display","knobHiddenLast","borderColor","marginTop","touchAction","knobInner","boxShadow","secondary","knobOuter","track","rail","staticClasses","useClasses","createClasses","sliderBase","base","rootDisabled","sliderContainer","marginBottom","padding","error","trackDragging","trackStandBy","sliderRoot","rootRange","handleContainer","outlineStyles","handle","handleContainerDisabled","handleHiddenContainer","labelContainer","alignItems","justifyContent","marginRight","labelIncluded","onlyInput","label","root","sliderTooltip","maxWidth","space","sm","visibility"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Slider.styles.js","sources":["../../../../src/components/Slider/Slider.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { CSSProperties } from \"react\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nimport base from \"./base\";\n\nconst dot: CSSProperties = {\n position: \"absolute\",\n bottom: \"-1px\",\n marginLeft: \"0px\",\n width: \"1px\",\n height: \"4px\",\n border: \"none\",\n borderRadius: \"0%\",\n backgroundColor: theme.colors.atmo4,\n cursor: \"pointer\",\n verticalAlign: \"middle\",\n zIndex: \"-3\",\n};\n\nconst dragSquare: CSSProperties = {\n cursor: \"grab\",\n width: \"calc(100% - 40px)\",\n left: \"20px\",\n height: \"27px\",\n position: \"absolute\",\n top: \"-12px\",\n content: \"''\",\n background: \"transparent\",\n borderTop: `12px solid ${theme.slider.dragBarColor}`,\n borderBottom: `12px solid ${theme.slider.dragBarColor}`,\n zIndex: \"-2\",\n};\n\nconst ring: CSSProperties = {\n width: \"32px\",\n height: \"32px\",\n borderRadius: \"50%\",\n border: `9px solid ${theme.slider.ringColor}`,\n opacity: theme.slider.ringOpacity,\n content: \"''\",\n position: \"absolute\",\n top: \"-10px\",\n left: \"-10px\",\n};\n\nconst border: CSSProperties = {\n width: \"20px\",\n height: \"20px\",\n borderRadius: \"50%\",\n border: `2px solid ${theme.colors.atmo1}`,\n content: \"''\",\n position: \"absolute\",\n top: \"-4px\",\n left: \"-4px\",\n};\n\nexport interface SliderStyles {\n disabledMark: CSSProperties;\n mark: CSSProperties;\n dotDisabled: CSSProperties;\n dot: CSSProperties;\n knobInner: CSSProperties;\n knobOuter: CSSProperties;\n knobHidden: CSSProperties;\n knobHiddenLast: CSSProperties;\n track: CSSProperties;\n rail: CSSProperties;\n}\n\nexport const sliderStyles: SliderStyles = {\n mark: {\n ...(theme.typography.caption1 as CSSProperties),\n fontFamily: theme.fontFamily.body,\n top: \"-2px\",\n zIndex: -1,\n },\n disabledMark: {\n ...(theme.typography.caption1 as CSSProperties),\n fontFamily: theme.fontFamily.body,\n color: `${theme.colors.secondary_60}`,\n cursor: \"not-allowed\",\n top: \"-2px\",\n },\n dot: {\n ...dot,\n },\n dotDisabled: {\n ...dot,\n cursor: \"not-allowed\",\n },\n knobHidden: { display: \"none\" },\n knobHiddenLast: {\n borderColor: \"transparent\",\n height: \"3px\",\n width: \"2px\",\n marginLeft: \"-1px\",\n border: \"none\",\n borderRadius: \"0\",\n marginTop: \"0px\",\n left: \"100%\",\n touchAction: \"none\",\n cursor: \"default\",\n },\n knobInner: {\n borderColor: \"transparent\",\n boxShadow: \"none\",\n backgroundColor: theme.colors.secondary,\n width: \"16px\",\n height: \"16px\",\n },\n knobOuter: {\n position: \"relative\",\n borderColor: \"transparent\",\n borderRadius: \"50%\",\n boxShadow: \"none\",\n backgroundColor: theme.colors.atmo4,\n width: \"32px\",\n height: \"32px\",\n top: \"-80%\",\n left: \"-80%\",\n zIndex: \"-1\",\n },\n track: {\n backgroundColor: theme.colors.secondary,\n height: \"3px\",\n zIndex: \"-1\",\n marginTop: \"-1px\",\n },\n rail: { backgroundColor: theme.colors.atmo4, height: \"1px\", zIndex: \"-3\" },\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSlider\", {\n sliderBase: { ...(base as CSSProperties) },\n rootDisabled: {\n cursor: \"not-allowed\",\n \"&& .rc-slider-disabled\": {\n background: \"transparent\",\n },\n },\n sliderContainer: { marginBottom: \"18px\", padding: \"0 23px\" },\n error: { padding: \"0 8px\" },\n trackDragging: {\n cursor: \"grabbing\",\n\n \"&& .rc-slider-track\": {\n \"&::before\": {\n ...dragSquare,\n cursor: \"grabbing\",\n },\n },\n },\n trackStandBy: {\n \"&& .rc-slider-track\": {\n \"&:hover\": {\n \"&::before\": {\n ...dragSquare,\n },\n },\n },\n },\n sliderRoot: { zIndex: 0 },\n rootRange: {},\n handleContainer: {\n \"&& .rc-slider-handle\": {\n cursor: \"pointer\",\n marginTop: \"-8px\",\n opacity: 1,\n \"&:active\": {\n cursor: \"grab\",\n \"&::before\": {\n ...ring,\n },\n \"&::after\": {\n ...border,\n },\n },\n \"&:hover\": {\n \"&::before\": {\n ...ring,\n },\n \"&::after\": {\n ...border,\n },\n },\n\n // Note about the usage of `!important below`: the way the rc-slider allows us to\n // style the knobs is through inline styles. This means that the `box-shadow`, which\n // is an inline style and is set to `none` to prevent the default rc-slider style to\n // show, can't be overridden for the focus scenario unless we use the `!important` flag.\n \"&:focus-visible\": {\n ...outlineStyles,\n boxShadow: \"0 0 0 3px #52A8EC, 0 0 0 7px rgba(29,155,209,.3)!important\",\n \"&::after\": {\n ...border,\n },\n },\n },\n },\n handle: {},\n handleContainerDisabled: {\n \"&& .rc-slider-handle\": {\n cursor: \"not-allowed\",\n marginTop: \"-8px\",\n opacity: 1,\n \"&:active\": {\n cursor: \"not-allowed\",\n },\n \"&:hover\": {\n cursor: \"not-allowed\",\n },\n },\n },\n handleHiddenContainer: { display: \"none\" },\n labelContainer: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n marginBottom: \"12px\",\n marginLeft: \"20px\",\n marginRight: \"20px\",\n },\n labelIncluded: { justifyContent: \"space-between\" },\n onlyInput: { justifyContent: \"flex-end\" },\n label: {},\n root: {},\n sliderTooltip: {\n \"&& .rc-slider-tooltip-inner\": {\n background: theme.colors.atmo1,\n borderRadius: 0,\n maxWidth: \"532px\",\n height: \"100%\",\n padding: theme.space.sm,\n ...theme.typography.body,\n fontFamily: theme.fontFamily.body,\n boxShadow: \"none\",\n },\n\n \"&& .rc-slider-tooltip-arrow\": {\n visibility: \"hidden\",\n },\n },\n});\n"],"names":["dot","position","bottom","marginLeft","width","height","border","borderRadius","backgroundColor","theme","colors","atmo4","cursor","verticalAlign","zIndex","dragSquare","left","top","content","background","borderTop","slider","dragBarColor","borderBottom","ring","ringColor","opacity","ringOpacity","atmo1","sliderStyles","mark","typography","caption1","fontFamily","body","disabledMark","color","secondary_60","dotDisabled","knobHidden","display","knobHiddenLast","borderColor","marginTop","touchAction","knobInner","boxShadow","secondary","knobOuter","track","rail","staticClasses","useClasses","createClasses","sliderBase","base","rootDisabled","sliderContainer","marginBottom","padding","error","trackDragging","trackStandBy","sliderRoot","rootRange","handleContainer","outlineStyles","handle","handleContainerDisabled","handleHiddenContainer","labelContainer","alignItems","justifyContent","marginRight","labelIncluded","onlyInput","label","root","sliderTooltip","maxWidth","space","sm","visibility"],"mappings":";;;;AASA,MAAMA,MAAqB;AAAA,EACzBC,UAAU;AAAA,EACVC,QAAQ;AAAA,EACRC,YAAY;AAAA,EACZC,OAAO;AAAA,EACPC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,cAAc;AAAA,EACdC,iBAAiBC,MAAMC,OAAOC;AAAAA,EAC9BC,QAAQ;AAAA,EACRC,eAAe;AAAA,EACfC,QAAQ;AACV;AAEA,MAAMC,aAA4B;AAAA,EAChCH,QAAQ;AAAA,EACRR,OAAO;AAAA,EACPY,MAAM;AAAA,EACNX,QAAQ;AAAA,EACRJ,UAAU;AAAA,EACVgB,KAAK;AAAA,EACLC,SAAS;AAAA,EACTC,YAAY;AAAA,EACZC,WAAY,cAAaX,MAAMY,OAAOC,YAAa;AAAA,EACnDC,cAAe,cAAad,MAAMY,OAAOC,YAAa;AAAA,EACtDR,QAAQ;AACV;AAEA,MAAMU,OAAsB;AAAA,EAC1BpB,OAAO;AAAA,EACPC,QAAQ;AAAA,EACRE,cAAc;AAAA,EACdD,QAAS,aAAYG,MAAMY,OAAOI,SAAU;AAAA,EAC5CC,SAASjB,MAAMY,OAAOM;AAAAA,EACtBT,SAAS;AAAA,EACTjB,UAAU;AAAA,EACVgB,KAAK;AAAA,EACLD,MAAM;AACR;AAEA,MAAMV,SAAwB;AAAA,EAC5BF,OAAO;AAAA,EACPC,QAAQ;AAAA,EACRE,cAAc;AAAA,EACdD,QAAS,aAAYG,MAAMC,OAAOkB,KAAM;AAAA,EACxCV,SAAS;AAAA,EACTjB,UAAU;AAAA,EACVgB,KAAK;AAAA,EACLD,MAAM;AACR;AAeO,MAAMa,eAA6B;AAAA,EACxCC,MAAM;AAAA,IACJ,GAAIrB,MAAMsB,WAAWC;AAAAA,IACrBC,YAAYxB,MAAMwB,WAAWC;AAAAA,IAC7BjB,KAAK;AAAA,IACLH,QAAQ;AAAA,EACV;AAAA,EACAqB,cAAc;AAAA,IACZ,GAAI1B,MAAMsB,WAAWC;AAAAA,IACrBC,YAAYxB,MAAMwB,WAAWC;AAAAA,IAC7BE,OAAQ,GAAE3B,MAAMC,OAAO2B,YAAa;AAAA,IACpCzB,QAAQ;AAAA,IACRK,KAAK;AAAA,EACP;AAAA,EACAjB,KAAK;AAAA,IACH,GAAGA;AAAAA,EACL;AAAA,EACAsC,aAAa;AAAA,IACX,GAAGtC;AAAAA,IACHY,QAAQ;AAAA,EACV;AAAA,EACA2B,YAAY;AAAA,IAAEC,SAAS;AAAA,EAAO;AAAA,EAC9BC,gBAAgB;AAAA,IACdC,aAAa;AAAA,IACbrC,QAAQ;AAAA,IACRD,OAAO;AAAA,IACPD,YAAY;AAAA,IACZG,QAAQ;AAAA,IACRC,cAAc;AAAA,IACdoC,WAAW;AAAA,IACX3B,MAAM;AAAA,IACN4B,aAAa;AAAA,IACbhC,QAAQ;AAAA,EACV;AAAA,EACAiC,WAAW;AAAA,IACTH,aAAa;AAAA,IACbI,WAAW;AAAA,IACXtC,iBAAiBC,MAAMC,OAAOqC;AAAAA,IAC9B3C,OAAO;AAAA,IACPC,QAAQ;AAAA,EACV;AAAA,EACA2C,WAAW;AAAA,IACT/C,UAAU;AAAA,IACVyC,aAAa;AAAA,IACbnC,cAAc;AAAA,IACduC,WAAW;AAAA,IACXtC,iBAAiBC,MAAMC,OAAOC;AAAAA,IAC9BP,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRY,KAAK;AAAA,IACLD,MAAM;AAAA,IACNF,QAAQ;AAAA,EACV;AAAA,EACAmC,OAAO;AAAA,IACLzC,iBAAiBC,MAAMC,OAAOqC;AAAAA,IAC9B1C,QAAQ;AAAA,IACRS,QAAQ;AAAA,IACR6B,WAAW;AAAA,EACb;AAAA,EACAO,MAAM;AAAA,IAAE1C,iBAAiBC,MAAMC,OAAOC;AAAAA,IAAON,QAAQ;AAAA,IAAOS,QAAQ;AAAA,EAAK;AAC3E;AAEa,MAAA;AAAA,EAAEqC;AAAAA,EAAeC;AAAW,IAAIC,cAAc,YAAY;AAAA,EACrEC,YAAY;AAAA,IAAE,GAAIC;AAAAA,EAAuB;AAAA,EACzCC,cAAc;AAAA,IACZ5C,QAAQ;AAAA,IACR,0BAA0B;AAAA,MACxBO,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAsC,iBAAiB;AAAA,IAAEC,cAAc;AAAA,IAAQC,SAAS;AAAA,EAAS;AAAA,EAC3DC,OAAO;AAAA,IAAED,SAAS;AAAA,EAAQ;AAAA,EAC1BE,eAAe;AAAA,IACbjD,QAAQ;AAAA,IAER,uBAAuB;AAAA,MACrB,aAAa;AAAA,QACX,GAAGG;AAAAA,QACHH,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,EACF;AAAA,EACAkD,cAAc;AAAA,IACZ,uBAAuB;AAAA,MACrB,WAAW;AAAA,QACT,aAAa;AAAA,UACX,GAAG/C;AAAAA,QACL;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACAgD,YAAY;AAAA,IAAEjD,QAAQ;AAAA,EAAE;AAAA,EACxBkD,WAAW,CAAC;AAAA,EACZC,iBAAiB;AAAA,IACf,wBAAwB;AAAA,MACtBrD,QAAQ;AAAA,MACR+B,WAAW;AAAA,MACXjB,SAAS;AAAA,MACT,YAAY;AAAA,QACVd,QAAQ;AAAA,QACR,aAAa;AAAA,UACX,GAAGY;AAAAA,QACL;AAAA,QACA,YAAY;AAAA,UACV,GAAGlB;AAAAA,QACL;AAAA,MACF;AAAA,MACA,WAAW;AAAA,QACT,aAAa;AAAA,UACX,GAAGkB;AAAAA,QACL;AAAA,QACA,YAAY;AAAA,UACV,GAAGlB;AAAAA,QACL;AAAA,MACF;AAAA;AAAA;AAAA;AAAA;AAAA,MAMA,mBAAmB;AAAA,QACjB,GAAG4D;AAAAA,QACHpB,WAAW;AAAA,QACX,YAAY;AAAA,UACV,GAAGxC;AAAAA,QACL;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACA6D,QAAQ,CAAC;AAAA,EACTC,yBAAyB;AAAA,IACvB,wBAAwB;AAAA,MACtBxD,QAAQ;AAAA,MACR+B,WAAW;AAAA,MACXjB,SAAS;AAAA,MACT,YAAY;AAAA,QACVd,QAAQ;AAAA,MACV;AAAA,MACA,WAAW;AAAA,QACTA,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,EACF;AAAA,EACAyD,uBAAuB;AAAA,IAAE7B,SAAS;AAAA,EAAO;AAAA,EACzC8B,gBAAgB;AAAA,IACd9B,SAAS;AAAA,IACT+B,YAAY;AAAA,IACZC,gBAAgB;AAAA,IAChBd,cAAc;AAAA,IACdvD,YAAY;AAAA,IACZsE,aAAa;AAAA,EACf;AAAA,EACAC,eAAe;AAAA,IAAEF,gBAAgB;AAAA,EAAgB;AAAA,EACjDG,WAAW;AAAA,IAAEH,gBAAgB;AAAA,EAAW;AAAA,EACxCI,OAAO,CAAC;AAAA,EACRC,MAAM,CAAC;AAAA,EACPC,eAAe;AAAA,IACb,+BAA+B;AAAA,MAC7B3D,YAAYV,MAAMC,OAAOkB;AAAAA,MACzBrB,cAAc;AAAA,MACdwE,UAAU;AAAA,MACV1E,QAAQ;AAAA,MACRsD,SAASlD,MAAMuE,MAAMC;AAAAA,MACrB,GAAGxE,MAAMsB,WAAWG;AAAAA,MACpBD,YAAYxB,MAAMwB,WAAWC;AAAAA,MAC7BY,WAAW;AAAA,IACb;AAAA,IAEA,+BAA+B;AAAA,MAC7BoC,YAAY;AAAA,IACd;AAAA,EACF;AACF,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliderInput.js","sources":["../../../../../src/components/Slider/SliderInput/SliderInput.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport { Remove } from \"@hitachivantara/uikit-react-icons\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { HvFormStatus } from \"@core/components/Forms\";\nimport { HvInput, HvInputProps } from \"@core/components/Input\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { knobsValuesToString, stringValuesToKnobs } from \"../utils\";\nimport { staticClasses, useClasses } from \"./SliderInput.styles\";\n\nexport { staticClasses as sliderInputClasses };\n\nexport type HvSliderInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSliderInputProps\n extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n /**\n * Used to generate the aria-label for the inputs.\n */\n label?: React.ReactNode;\n /**\n * Input status.\n */\n status?: HvFormStatus[];\n /**\n * The values array to apply to the component\n */\n values?: number[];\n /**\n * Callback function to be triggered when the selected date has changed.\n */\n onChange?: (values: number[], index: number) => void;\n /**\n * Attributes applied to the input element.\n */\n inputProps?: HvInputProps[];\n /**\n * Indicates that the form element is disabled.\n */\n disabled?: boolean;\n /**\n * Indicates that the form element is read only.\n */\n readOnly?: boolean;\n /**\n * Indicates how many decimals to use.\n */\n markDigits?: number;\n /**\n * Styles applied from the theme.\n */\n classes?: HvSliderInputClasses;\n}\n\nexport const HvSliderInput = ({\n classes: classesProp,\n className,\n id,\n label,\n status,\n values: valuesProp = [],\n inputProps = [],\n readOnly = false,\n disabled = false,\n markDigits = 0,\n onChange,\n ...others\n}: HvSliderInputProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const [inputValues, setInputValues] = useState<string[]>(\n knobsValuesToString(valuesProp, markDigits)\n );\n\n const handleChange = (index: number) => {\n if (disabled) return;\n\n onChange?.(stringValuesToKnobs(inputValues), index);\n };\n\n useEffect(() => {\n setInputValues(knobsValuesToString(valuesProp, markDigits));\n }, [markDigits, valuesProp]);\n\n return (\n <div className={cx(classes.inputRoot, className)} {...others}>\n {inputValues.map((value, index) => (\n <div key={setId(id, index)} className={classes.inputContainer}>\n {index !== 0 && <Remove color={disabled ? [\"atmo4\"] : undefined} />}\n <HvInput\n id={setId(id, index)}\n aria-label={`${label}-${index}`}\n className={classes.input}\n disabled={disabled}\n type=\"number\"\n value={Number.isNaN(value) || value == null ? \"\" : value.toString()}\n onEnter={() => handleChange(index)}\n onBlur={() => handleChange(index)}\n onChange={(_, inputValue) => {\n const newValues = [...inputValues];\n newValues[index] = inputValue;\n setInputValues(newValues);\n }}\n status={status?.[index] || \"standBy\"}\n readOnly={readOnly}\n disableClear\n {...inputProps[index]}\n />\n </div>\n ))}\n </div>\n );\n};\n"],"names":["HvSliderInput","classes","classesProp","className","id","label","status","values","valuesProp","inputProps","readOnly","disabled","markDigits","onChange","others","cx","useClasses","inputValues","setInputValues","useState","knobsValuesToString","handleChange","index","stringValuesToKnobs","useEffect","inputRoot","children","map","value","inputContainer","Remove","color","undefined","_jsx","HvInput","setId","input","type","Number","isNaN","toString","onEnter","onBlur","_","inputValue","newValues","disableClear"],"mappings":";;;;;;;;AAyDO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,QAAQC,aAAa,CAAE;AAAA,EACvBC,aAAa,CAAE;AAAA,EACfC,WAAW;AAAA,EACXC,WAAW;AAAA,EACXC,aAAa;AAAA,EACbC;AAAAA,EACA,GAAGC;AACe,MAAM;AAClB,QAAA;AAAA,IAAEb;AAAAA,IAASc;AAAAA,EAAAA,IAAOC,WAAWd,WAAW;AAExC,QAAA,CAACe,aAAaC,cAAc,IAAIC,SACpCC,oBAAoBZ,YAAYI,UAAU,CAC5C;AAEMS,QAAAA,eAAeA,CAACC,UAAkB;AAClCX,QAAAA;AAAU;AAEHY,yCAAAA,oBAAoBN,WAAW,GAAGK;AAAAA,EAAK;AAGpDE,YAAU,MAAM;AACCJ,mBAAAA,oBAAoBZ,YAAYI,UAAU,CAAC;AAAA,EAAA,GACzD,CAACA,YAAYJ,UAAU,CAAC;AAE3B,6BACE,OAAA;AAAA,IAAKL,WAAWY,GAAGd,QAAQwB,WAAWtB,SAAS;AAAA,IAAE,GAAKW;AAAAA,IAAMY,UACzDT,YAAYU,IAAI,CAACC,OAAON,+BACvB,OAAA;AAAA,MAA4BnB,WAAWF,QAAQ4B;AAAAA,MAAeH,WAC3DJ,UAAU,yBAAMQ,QAAM;AAAA,QAACC,OAAOpB,WAAW,CAAC,OAAO,IAAIqB;AAAAA,MAAAA,CAAY,GAClEC,oBAACC,SAAO;AAAA,QACN9B,IAAI+B,MAAM/B,IAAIkB,KAAK;AAAA,QACnB,cAAa,GAAEjB,
|
|
1
|
+
{"version":3,"file":"SliderInput.js","sources":["../../../../../src/components/Slider/SliderInput/SliderInput.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport { Remove } from \"@hitachivantara/uikit-react-icons\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { HvFormStatus } from \"@core/components/Forms\";\nimport { HvInput, HvInputProps } from \"@core/components/Input\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { knobsValuesToString, stringValuesToKnobs } from \"../utils\";\nimport { staticClasses, useClasses } from \"./SliderInput.styles\";\n\nexport { staticClasses as sliderInputClasses };\n\nexport type HvSliderInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSliderInputProps\n extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n /**\n * Used to generate the aria-label for the inputs.\n */\n label?: React.ReactNode;\n /**\n * Input status.\n */\n status?: HvFormStatus[];\n /**\n * The values array to apply to the component\n */\n values?: number[];\n /**\n * Callback function to be triggered when the selected date has changed.\n */\n onChange?: (values: number[], index: number) => void;\n /**\n * Attributes applied to the input element.\n */\n inputProps?: HvInputProps[];\n /**\n * Indicates that the form element is disabled.\n */\n disabled?: boolean;\n /**\n * Indicates that the form element is read only.\n */\n readOnly?: boolean;\n /**\n * Indicates how many decimals to use.\n */\n markDigits?: number;\n /**\n * Styles applied from the theme.\n */\n classes?: HvSliderInputClasses;\n}\n\nexport const HvSliderInput = ({\n classes: classesProp,\n className,\n id,\n label,\n status,\n values: valuesProp = [],\n inputProps = [],\n readOnly = false,\n disabled = false,\n markDigits = 0,\n onChange,\n ...others\n}: HvSliderInputProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const [inputValues, setInputValues] = useState<string[]>(\n knobsValuesToString(valuesProp, markDigits)\n );\n\n const handleChange = (index: number) => {\n if (disabled) return;\n\n onChange?.(stringValuesToKnobs(inputValues), index);\n };\n\n useEffect(() => {\n setInputValues(knobsValuesToString(valuesProp, markDigits));\n }, [markDigits, valuesProp]);\n\n return (\n <div className={cx(classes.inputRoot, className)} {...others}>\n {inputValues.map((value, index) => (\n <div key={setId(id, index)} className={classes.inputContainer}>\n {index !== 0 && <Remove color={disabled ? [\"atmo4\"] : undefined} />}\n <HvInput\n id={setId(id, index)}\n aria-label={`${label}-${index}`}\n className={classes.input}\n disabled={disabled}\n type=\"number\"\n value={Number.isNaN(value) || value == null ? \"\" : value.toString()}\n onEnter={() => handleChange(index)}\n onBlur={() => handleChange(index)}\n onChange={(_, inputValue) => {\n const newValues = [...inputValues];\n newValues[index] = inputValue;\n setInputValues(newValues);\n }}\n status={status?.[index] || \"standBy\"}\n readOnly={readOnly}\n disableClear\n {...inputProps[index]}\n />\n </div>\n ))}\n </div>\n );\n};\n"],"names":["HvSliderInput","classes","classesProp","className","id","label","status","values","valuesProp","inputProps","readOnly","disabled","markDigits","onChange","others","cx","useClasses","inputValues","setInputValues","useState","knobsValuesToString","handleChange","index","stringValuesToKnobs","useEffect","inputRoot","children","map","value","inputContainer","Remove","color","undefined","_jsx","HvInput","setId","input","type","Number","isNaN","toString","onEnter","onBlur","_","inputValue","newValues","disableClear"],"mappings":";;;;;;;;AAyDO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,QAAQC,aAAa,CAAE;AAAA,EACvBC,aAAa,CAAE;AAAA,EACfC,WAAW;AAAA,EACXC,WAAW;AAAA,EACXC,aAAa;AAAA,EACbC;AAAAA,EACA,GAAGC;AACe,MAAM;AAClB,QAAA;AAAA,IAAEb;AAAAA,IAASc;AAAAA,EAAAA,IAAOC,WAAWd,WAAW;AAExC,QAAA,CAACe,aAAaC,cAAc,IAAIC,SACpCC,oBAAoBZ,YAAYI,UAAU,CAC5C;AAEMS,QAAAA,eAAeA,CAACC,UAAkB;AAClCX,QAAAA;AAAU;AAEHY,yCAAAA,oBAAoBN,WAAW,GAAGK;AAAAA,EAAK;AAGpDE,YAAU,MAAM;AACCJ,mBAAAA,oBAAoBZ,YAAYI,UAAU,CAAC;AAAA,EAAA,GACzD,CAACA,YAAYJ,UAAU,CAAC;AAE3B,6BACE,OAAA;AAAA,IAAKL,WAAWY,GAAGd,QAAQwB,WAAWtB,SAAS;AAAA,IAAE,GAAKW;AAAAA,IAAMY,UACzDT,YAAYU,IAAI,CAACC,OAAON,+BACvB,OAAA;AAAA,MAA4BnB,WAAWF,QAAQ4B;AAAAA,MAAeH,WAC3DJ,UAAU,yBAAMQ,QAAM;AAAA,QAACC,OAAOpB,WAAW,CAAC,OAAO,IAAIqB;AAAAA,MAAAA,CAAY,GAClEC,oBAACC,SAAO;AAAA,QACN9B,IAAI+B,MAAM/B,IAAIkB,KAAK;AAAA,QACnB,cAAa,GAAEjB,KAAM,IAAGiB,KAAM;AAAA,QAC9BnB,WAAWF,QAAQmC;AAAAA,QACnBzB;AAAAA,QACA0B,MAAK;AAAA,QACLT,OAAOU,OAAOC,MAAMX,KAAK,KAAKA,SAAS,OAAO,KAAKA,MAAMY,SAAS;AAAA,QAClEC,SAASA,MAAMpB,aAAaC,KAAK;AAAA,QACjCoB,QAAQA,MAAMrB,aAAaC,KAAK;AAAA,QAChCT,UAAUA,CAAC8B,GAAGC,eAAe;AACrBC,gBAAAA,YAAY,CAAC,GAAG5B,WAAW;AACjC4B,oBAAUvB,KAAK,IAAIsB;AACnB1B,yBAAe2B,SAAS;AAAA,QAC1B;AAAA,QACAvC,SAAQA,iCAASgB,WAAU;AAAA,QAC3BZ;AAAAA,QACAoC,cAAY;AAAA,QAAA,GACRrC,WAAWa,KAAK;AAAA,MAAA,CACrB,CAAC;AAAA,IApBMa,GAAAA,MAAM/B,IAAIkB,KAAK,CAqBpB,CACN;AAAA,EAAA,CACE;AAET;"}
|