@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":"CheckBoxGroup.cjs","sources":["../../../../src/components/CheckBoxGroup/CheckBoxGroup.tsx"],"sourcesContent":["import { Children, cloneElement, useCallback, useMemo, useRef } from \"react\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { setId } from \"@core/utils/setId\";\nimport { multiSelectionEventHandler } from \"@core/utils/multiSelectionEventHandler\";\nimport { HvCheckBox } from \"@core/components/CheckBox\";\nimport {\n HvFormElement,\n HvFormStatus,\n HvInfoMessage,\n HvLabel,\n HvWarningText,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./CheckBoxGroup.styles\";\n\nconst computeSelectAllState = (selected: number, total: number) => {\n if (selected === 0) {\n return \"none\";\n }\n\n if (selected === total) {\n return \"all\";\n }\n\n return \"some\";\n};\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n const selectedValues = Children.toArray(children)\n .map((child: any) => {\n const childIsControlled = child?.props?.checked !== undefined;\n const childIsSelected = childIsControlled\n ? child?.props?.checked\n : child?.props?.defaultChecked;\n\n return childIsSelected ? child?.props?.value : undefined;\n })\n .filter((v) => v !== undefined);\n\n return selectedValues;\n};\n\nexport { staticClasses as checkBoxGroupClasses };\n\nexport type HvCheckBoxGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCheckBoxGroupProps\n extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n /**\n * The form element name.\n *\n * It is propagated to the children checkboxes, unless they already have one.\n */\n name?: string;\n /**\n * The value of the form element. An array of values represented in the child checkboxes.\n *\n * When defined the checkbox group state becomes controlled.\n */\n value?: any[];\n /**\n * When uncontrolled, defines the initial value.\n */\n defaultValue?: any[];\n /**\n * The label of the form element.\n *\n * The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be provided instead.\n */\n label?: React.ReactNode;\n /**\n * Provide additional descriptive text for the form element.\n */\n description?: React.ReactNode;\n /**\n * Indicates that the form element is disabled.\n * If `true` the state is propagated to the children checkboxes.\n */\n disabled?: boolean;\n /**\n * Indicates that the form element is not editable.\n * If `true` the state is propagated to the children checkboxes.\n */\n readOnly?: boolean;\n /**\n * Indicates that user input is required on the form element.\n */\n required?: boolean;\n /**\n * The status of the form 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;\n /**\n * The error message to show when the validation status is \"invalid\".\n *\n * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n */\n statusMessage?: React.ReactNode;\n /**\n * The callback fired when the value changes.\n */\n onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any[]) => void;\n /**\n * Indicates whether the checkbox group's orientation is horizontal or vertical.\n *\n * Defaults to vertical.\n */\n orientation?: \"vertical\" | \"horizontal\";\n /**\n * Indicates if an additional select all checkbox should be shown.\n */\n showSelectAll?: boolean;\n /**\n * The label of the select all checkbox. Defaults to \"All\".\n */\n selectAllLabel?: string;\n /**\n * Custom label for select all checkbox conjunction\n */\n selectAllConjunctionLabel?: string;\n /**\n * A Jss Object used to override or extend the component styles applied.\n */\n classes?: HvCheckBoxGroupClasses;\n}\n\n/**\n * A checkbox group is a type of selection list that allows the user to select multiple options through the use of checkboxes.\n */\nexport const HvCheckBoxGroup = (props: HvCheckBoxGroupProps) => {\n const {\n id,\n classes: classesProp,\n className,\n children,\n name,\n label,\n description,\n status,\n statusMessage,\n defaultValue,\n value: valueProp,\n required = false,\n readOnly = false,\n disabled = false,\n showSelectAll = false,\n orientation = \"vertical\",\n selectAllLabel = \"All\",\n selectAllConjunctionLabel = \"/\",\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-errormessage\": ariaErrorMessage,\n onChange,\n ...others\n } = useDefaultProps(\"HvCheckBoxGroup\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [value, setValue] = useControlled(\n valueProp,\n defaultValue !== undefined\n ? defaultValue\n : // When uncontrolled and no default value is given,\n // extract the initial selected values from the children own state\n () => getValueFromSelectedChildren(children)\n );\n\n const [validationState, setValidationState] = useControlled(\n status,\n \"standBy\"\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const elementId = useUniqueId(id, \"hvcheckboxgroup\");\n\n const selectionAnchor = useRef(undefined);\n\n const [allValues, selectedState, selectedCount] = useMemo(() => {\n const childValues: any[] = [];\n const childSelectedState: boolean[] = [];\n let childSelectedCounter = 0;\n\n Children.toArray(children).forEach((child: any, i: number) => {\n const childValue = child?.props?.value;\n const childIsSelected = value.indexOf(childValue) !== -1;\n\n childValues[i] = childValue;\n childSelectedState[i] = childIsSelected;\n\n if (childIsSelected) {\n childSelectedCounter += 1;\n }\n });\n\n return [childValues, childSelectedState, childSelectedCounter];\n }, [children, value]);\n\n const selectAllState = computeSelectAllState(\n value.length,\n selectedState.length\n );\n\n const onChildChangeInterceptor = useCallback(\n (\n index: number,\n childOnChange: (\n event: React.ChangeEvent<HTMLInputElement>,\n isChecked: boolean\n ) => void,\n event: React.ChangeEvent<HTMLInputElement>,\n isChecked: boolean\n ) => {\n const newValue = multiSelectionEventHandler(\n event,\n index,\n selectionAnchor,\n allValues,\n selectedState,\n isChecked\n );\n\n childOnChange?.(event, isChecked);\n\n onChange?.(event, newValue);\n\n setValue(() => {\n // This will only run if uncontrolled\n\n if (required && newValue.length === 0) {\n setValidationState(\"invalid\");\n } else {\n setValidationState(\"valid\");\n }\n\n return newValue;\n });\n },\n [allValues, onChange, required, selectedState, setValidationState, setValue]\n );\n\n const modifiedChildren = useMemo(() => {\n return Children.map(children, (child: any, i: number) => {\n const childIsSelected = selectedState[i];\n\n return cloneElement(child, {\n checked: childIsSelected,\n name: child?.props?.name || name,\n onChange: (\n event: React.ChangeEvent<HTMLInputElement>,\n isChecked: boolean\n ) =>\n onChildChangeInterceptor(i, child?.props?.onChange, event, isChecked),\n disabled: disabled || child?.props?.disabled,\n readOnly: readOnly || child?.props?.readOnly,\n });\n });\n }, [\n children,\n disabled,\n name,\n onChildChangeInterceptor,\n readOnly,\n selectedState,\n ]);\n\n const handleSelectAll = (\n event: React.ChangeEvent<HTMLInputElement>,\n selectAllChecked: boolean\n ) => {\n let newValue: any[];\n if (selectAllChecked) {\n newValue = [...allValues];\n } else {\n newValue = [];\n }\n\n onChange?.(event, newValue);\n\n setValue(() => {\n // This will only run if uncontrolled\n if (required && newValue.length === 0) {\n setValidationState(\"invalid\");\n } else {\n setValidationState(\"valid\");\n }\n\n return newValue;\n });\n };\n\n const selectAllLabelComponent =\n selectedCount === 0 ? (\n <>\n <b>{selectAllLabel}</b>\n {` (${Children.toArray(children).length})`}\n </>\n ) : (\n <>\n <b>{selectedCount}</b>\n {` ${selectAllConjunctionLabel} ${Children.toArray(children).length}`}\n </>\n );\n\n // The error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) ||\n (status === undefined && required));\n\n const errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={validationState}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n className={cx(classes.root, className)}\n >\n {label && (\n <HvLabel\n id={setId(elementId, \"label\")}\n label={label}\n className={classes.label}\n />\n )}\n\n {description && (\n <HvInfoMessage id={setId(elementId, \"description\")}>\n {description}\n </HvInfoMessage>\n )}\n\n <div\n role=\"group\"\n aria-label={ariaLabel}\n aria-labelledby={\n ariaLabelledBy || (label && setId(elementId, \"label\")) || undefined\n }\n aria-disabled={disabled ? true : undefined}\n aria-invalid={validationState === \"invalid\" ? true : undefined}\n aria-errormessage={\n validationState === \"invalid\" ? errorMessageId : undefined\n }\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() || undefined\n }\n className={cx(classes.group, {\n [classes.vertical]: orientation === \"vertical\",\n [classes.horizontal]: orientation === \"horizontal\",\n [classes.invalid]: validationState === \"invalid\",\n })}\n {...others}\n >\n {showSelectAll && (\n <HvCheckBox\n checked={selectAllState === \"all\"}\n indeterminate={selectAllState === \"some\"}\n label={selectAllLabelComponent}\n disabled={disabled}\n readOnly={readOnly}\n className={classes.selectAll}\n onChange={handleSelectAll}\n />\n )}\n {modifiedChildren}\n </div>\n\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableBorder\n className={classes.error}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n};\n"],"names":["computeSelectAllState","selected","total","getValueFromSelectedChildren","children","selectedValues","Children","toArray","map","child","childIsControlled","props","checked","undefined","childIsSelected","defaultChecked","value","filter","v","HvCheckBoxGroup","id","classes","classesProp","className","name","label","description","status","statusMessage","defaultValue","valueProp","required","readOnly","disabled","showSelectAll","orientation","selectAllLabel","selectAllConjunctionLabel","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaErrorMessage","onChange","others","useDefaultProps","cx","useClasses","setValue","useControlled","validationState","setValidationState","validationMessage","elementId","useUniqueId","selectionAnchor","useRef","allValues","selectedState","selectedCount","useMemo","childValues","childSelectedState","childSelectedCounter","forEach","i","childValue","indexOf","selectAllState","length","onChildChangeInterceptor","useCallback","index","childOnChange","event","isChecked","newValue","multiSelectionEventHandler","modifiedChildren","cloneElement","handleSelectAll","selectAllChecked","selectAllLabelComponent","_jsxs","_Fragment","_jsx","canShowError","errorMessageId","setId","HvFormElement","root","HvLabel","HvInfoMessage","role","join","trim","group","vertical","horizontal","invalid","HvCheckBox","indeterminate","selectAll","HvWarningText","disableBorder","error"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CheckBoxGroup.cjs","sources":["../../../../src/components/CheckBoxGroup/CheckBoxGroup.tsx"],"sourcesContent":["import { Children, cloneElement, useCallback, useMemo, useRef } from \"react\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { setId } from \"@core/utils/setId\";\nimport { multiSelectionEventHandler } from \"@core/utils/multiSelectionEventHandler\";\nimport { HvCheckBox } from \"@core/components/CheckBox\";\nimport {\n HvFormElement,\n HvFormStatus,\n HvInfoMessage,\n HvLabel,\n HvWarningText,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./CheckBoxGroup.styles\";\n\nconst computeSelectAllState = (selected: number, total: number) => {\n if (selected === 0) {\n return \"none\";\n }\n\n if (selected === total) {\n return \"all\";\n }\n\n return \"some\";\n};\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n const selectedValues = Children.toArray(children)\n .map((child: any) => {\n const childIsControlled = child?.props?.checked !== undefined;\n const childIsSelected = childIsControlled\n ? child?.props?.checked\n : child?.props?.defaultChecked;\n\n return childIsSelected ? child?.props?.value : undefined;\n })\n .filter((v) => v !== undefined);\n\n return selectedValues;\n};\n\nexport { staticClasses as checkBoxGroupClasses };\n\nexport type HvCheckBoxGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCheckBoxGroupProps\n extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n /**\n * The form element name.\n *\n * It is propagated to the children checkboxes, unless they already have one.\n */\n name?: string;\n /**\n * The value of the form element. An array of values represented in the child checkboxes.\n *\n * When defined the checkbox group state becomes controlled.\n */\n value?: any[];\n /**\n * When uncontrolled, defines the initial value.\n */\n defaultValue?: any[];\n /**\n * The label of the form element.\n *\n * The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be provided instead.\n */\n label?: React.ReactNode;\n /**\n * Provide additional descriptive text for the form element.\n */\n description?: React.ReactNode;\n /**\n * Indicates that the form element is disabled.\n * If `true` the state is propagated to the children checkboxes.\n */\n disabled?: boolean;\n /**\n * Indicates that the form element is not editable.\n * If `true` the state is propagated to the children checkboxes.\n */\n readOnly?: boolean;\n /**\n * Indicates that user input is required on the form element.\n */\n required?: boolean;\n /**\n * The status of the form 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;\n /**\n * The error message to show when the validation status is \"invalid\".\n *\n * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n */\n statusMessage?: React.ReactNode;\n /**\n * The callback fired when the value changes.\n */\n onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any[]) => void;\n /**\n * Indicates whether the checkbox group's orientation is horizontal or vertical.\n *\n * Defaults to vertical.\n */\n orientation?: \"vertical\" | \"horizontal\";\n /**\n * Indicates if an additional select all checkbox should be shown.\n */\n showSelectAll?: boolean;\n /**\n * The label of the select all checkbox. Defaults to \"All\".\n */\n selectAllLabel?: string;\n /**\n * Custom label for select all checkbox conjunction\n */\n selectAllConjunctionLabel?: string;\n /**\n * A Jss Object used to override or extend the component styles applied.\n */\n classes?: HvCheckBoxGroupClasses;\n}\n\n/**\n * A checkbox group is a type of selection list that allows the user to select multiple options through the use of checkboxes.\n */\nexport const HvCheckBoxGroup = (props: HvCheckBoxGroupProps) => {\n const {\n id,\n classes: classesProp,\n className,\n children,\n name,\n label,\n description,\n status,\n statusMessage,\n defaultValue,\n value: valueProp,\n required = false,\n readOnly = false,\n disabled = false,\n showSelectAll = false,\n orientation = \"vertical\",\n selectAllLabel = \"All\",\n selectAllConjunctionLabel = \"/\",\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-errormessage\": ariaErrorMessage,\n onChange,\n ...others\n } = useDefaultProps(\"HvCheckBoxGroup\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [value, setValue] = useControlled(\n valueProp,\n defaultValue !== undefined\n ? defaultValue\n : // When uncontrolled and no default value is given,\n // extract the initial selected values from the children own state\n () => getValueFromSelectedChildren(children)\n );\n\n const [validationState, setValidationState] = useControlled(\n status,\n \"standBy\"\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const elementId = useUniqueId(id, \"hvcheckboxgroup\");\n\n const selectionAnchor = useRef(undefined);\n\n const [allValues, selectedState, selectedCount] = useMemo(() => {\n const childValues: any[] = [];\n const childSelectedState: boolean[] = [];\n let childSelectedCounter = 0;\n\n Children.toArray(children).forEach((child: any, i: number) => {\n const childValue = child?.props?.value;\n const childIsSelected = value.indexOf(childValue) !== -1;\n\n childValues[i] = childValue;\n childSelectedState[i] = childIsSelected;\n\n if (childIsSelected) {\n childSelectedCounter += 1;\n }\n });\n\n return [childValues, childSelectedState, childSelectedCounter];\n }, [children, value]);\n\n const selectAllState = computeSelectAllState(\n value.length,\n selectedState.length\n );\n\n const onChildChangeInterceptor = useCallback(\n (\n index: number,\n childOnChange: (\n event: React.ChangeEvent<HTMLInputElement>,\n isChecked: boolean\n ) => void,\n event: React.ChangeEvent<HTMLInputElement>,\n isChecked: boolean\n ) => {\n const newValue = multiSelectionEventHandler(\n event,\n index,\n selectionAnchor,\n allValues,\n selectedState,\n isChecked\n );\n\n childOnChange?.(event, isChecked);\n\n onChange?.(event, newValue);\n\n setValue(() => {\n // This will only run if uncontrolled\n\n if (required && newValue.length === 0) {\n setValidationState(\"invalid\");\n } else {\n setValidationState(\"valid\");\n }\n\n return newValue;\n });\n },\n [allValues, onChange, required, selectedState, setValidationState, setValue]\n );\n\n const modifiedChildren = useMemo(() => {\n return Children.map(children, (child: any, i: number) => {\n const childIsSelected = selectedState[i];\n\n return cloneElement(child, {\n checked: childIsSelected,\n name: child?.props?.name || name,\n onChange: (\n event: React.ChangeEvent<HTMLInputElement>,\n isChecked: boolean\n ) =>\n onChildChangeInterceptor(i, child?.props?.onChange, event, isChecked),\n disabled: disabled || child?.props?.disabled,\n readOnly: readOnly || child?.props?.readOnly,\n });\n });\n }, [\n children,\n disabled,\n name,\n onChildChangeInterceptor,\n readOnly,\n selectedState,\n ]);\n\n const handleSelectAll = (\n event: React.ChangeEvent<HTMLInputElement>,\n selectAllChecked: boolean\n ) => {\n let newValue: any[];\n if (selectAllChecked) {\n newValue = [...allValues];\n } else {\n newValue = [];\n }\n\n onChange?.(event, newValue);\n\n setValue(() => {\n // This will only run if uncontrolled\n if (required && newValue.length === 0) {\n setValidationState(\"invalid\");\n } else {\n setValidationState(\"valid\");\n }\n\n return newValue;\n });\n };\n\n const selectAllLabelComponent =\n selectedCount === 0 ? (\n <>\n <b>{selectAllLabel}</b>\n {` (${Children.toArray(children).length})`}\n </>\n ) : (\n <>\n <b>{selectedCount}</b>\n {` ${selectAllConjunctionLabel} ${Children.toArray(children).length}`}\n </>\n );\n\n // The error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) ||\n (status === undefined && required));\n\n const errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={validationState}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n className={cx(classes.root, className)}\n >\n {label && (\n <HvLabel\n id={setId(elementId, \"label\")}\n label={label}\n className={classes.label}\n />\n )}\n\n {description && (\n <HvInfoMessage id={setId(elementId, \"description\")}>\n {description}\n </HvInfoMessage>\n )}\n\n <div\n role=\"group\"\n aria-label={ariaLabel}\n aria-labelledby={\n ariaLabelledBy || (label && setId(elementId, \"label\")) || undefined\n }\n aria-disabled={disabled ? true : undefined}\n aria-invalid={validationState === \"invalid\" ? true : undefined}\n aria-errormessage={\n validationState === \"invalid\" ? errorMessageId : undefined\n }\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() || undefined\n }\n className={cx(classes.group, {\n [classes.vertical]: orientation === \"vertical\",\n [classes.horizontal]: orientation === \"horizontal\",\n [classes.invalid]: validationState === \"invalid\",\n })}\n {...others}\n >\n {showSelectAll && (\n <HvCheckBox\n checked={selectAllState === \"all\"}\n indeterminate={selectAllState === \"some\"}\n label={selectAllLabelComponent}\n disabled={disabled}\n readOnly={readOnly}\n className={classes.selectAll}\n onChange={handleSelectAll}\n />\n )}\n {modifiedChildren}\n </div>\n\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableBorder\n className={classes.error}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n};\n"],"names":["computeSelectAllState","selected","total","getValueFromSelectedChildren","children","selectedValues","Children","toArray","map","child","childIsControlled","props","checked","undefined","childIsSelected","defaultChecked","value","filter","v","HvCheckBoxGroup","id","classes","classesProp","className","name","label","description","status","statusMessage","defaultValue","valueProp","required","readOnly","disabled","showSelectAll","orientation","selectAllLabel","selectAllConjunctionLabel","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaErrorMessage","onChange","others","useDefaultProps","cx","useClasses","setValue","useControlled","validationState","setValidationState","validationMessage","elementId","useUniqueId","selectionAnchor","useRef","allValues","selectedState","selectedCount","useMemo","childValues","childSelectedState","childSelectedCounter","forEach","i","childValue","indexOf","selectAllState","length","onChildChangeInterceptor","useCallback","index","childOnChange","event","isChecked","newValue","multiSelectionEventHandler","modifiedChildren","cloneElement","handleSelectAll","selectAllChecked","selectAllLabelComponent","_jsxs","_Fragment","_jsx","canShowError","errorMessageId","setId","HvFormElement","root","HvLabel","HvInfoMessage","role","join","trim","group","vertical","horizontal","invalid","HvCheckBox","indeterminate","selectAll","HvWarningText","disableBorder","error"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckBoxGroup.styles.cjs","sources":["../../../../src/components/CheckBoxGroup/CheckBoxGroup.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCheckBoxGroup\", {\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\n \"&>*:not(:first-of-type)\": {\n marginLeft: theme.space.sm,\n },\n },\n invalid: {\n paddingBottom: theme.space.xs,\n borderBottom: `1px solid ${theme.colors.negative}`,\n },\n selectAll: {},\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","invalid","paddingBottom","borderBottom","colors","negative","selectAll","error"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,mBAAmB;AAAA,EAC5EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,UAAU;AAAA,IACVC,eAAe;AAAA,EACjB;AAAA,EACAC,OAAO;AAAA,IAAEC,cAAcC,YAAAA,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,IAEV,2BAA2B;AAAA,MACzBC,YAAYT,YAAAA,MAAMC,MAAMS;AAAAA,IAC1B;AAAA,EACF;AAAA,EACAC,SAAS;AAAA,IACPC,eAAeZ,YAAAA,MAAMC,MAAMC;AAAAA,IAC3BW,cAAe,aAAYb,
|
|
1
|
+
{"version":3,"file":"CheckBoxGroup.styles.cjs","sources":["../../../../src/components/CheckBoxGroup/CheckBoxGroup.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCheckBoxGroup\", {\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\n \"&>*:not(:first-of-type)\": {\n marginLeft: theme.space.sm,\n },\n },\n invalid: {\n paddingBottom: theme.space.xs,\n borderBottom: `1px solid ${theme.colors.negative}`,\n },\n selectAll: {},\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","invalid","paddingBottom","borderBottom","colors","negative","selectAll","error"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,mBAAmB;AAAA,EAC5EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,UAAU;AAAA,IACVC,eAAe;AAAA,EACjB;AAAA,EACAC,OAAO;AAAA,IAAEC,cAAcC,YAAAA,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,IAEV,2BAA2B;AAAA,MACzBC,YAAYT,YAAAA,MAAMC,MAAMS;AAAAA,IAC1B;AAAA,EACF;AAAA,EACAC,SAAS;AAAA,IACPC,eAAeZ,YAAAA,MAAMC,MAAMC;AAAAA,IAC3BW,cAAe,aAAYb,YAAMc,MAAAA,OAAOC,QAAS;AAAA,EACnD;AAAA,EACAC,WAAW,CAAC;AAAA,EACZC,OAAO,CAAC;AACV,CAAC;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Fields.cjs","sources":["../../../../../src/components/ColorPicker/Fields/Fields.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { HSLColor, HSVColor, RGBColor } from \"react-color\";\n\nimport * as color from \"react-color/lib/helpers/color\";\n\nimport { HvInput } from \"@core/components/Input\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Fields.styles\";\n\nexport { staticClasses as colorPickerFieldsClasses };\n\nexport type HvColorPickerFieldsClasses = ExtractNames<typeof useClasses>;\n\ninterface FieldsProps {\n className?: string;\n rgb?: RGBColor;\n hex?: string;\n onChange: (\n data:\n | HSLColor\n | HSVColor\n | RGBColor\n | {\n source?: string;\n hex?: string;\n },\n event: React.ChangeEvent<HTMLInputElement>\n ) => void;\n classes?: HvColorPickerFieldsClasses;\n}\n\nexport const Fields = ({\n className,\n onChange,\n rgb,\n hex,\n classes: classesProp,\n}: FieldsProps) => {\n const { classes, cx } = useClasses(classesProp);\n const [internalHex, setInternalHex] = useState(hex);\n const [internalRed, setInternalRed] = useState(rgb?.r);\n const [internalGreen, setInternalGreen] = useState(rgb?.g);\n const [internalBlue, setInternalBlue] = useState(rgb?.b);\n\n const hexInputRef = useRef<HTMLInputElement>(null);\n const redInputRef = useRef<HTMLInputElement>(null);\n const greenInputRef = useRef<HTMLInputElement>(null);\n const blueInputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (document.activeElement !== hexInputRef.current) {\n setInternalHex(hex);\n }\n }, [hex]);\n\n useEffect(() => {\n if (document.activeElement !== redInputRef.current) {\n setInternalRed(rgb?.r);\n }\n\n if (document.activeElement !== greenInputRef.current) {\n setInternalGreen(rgb?.g);\n }\n\n if (document.activeElement !== blueInputRef.current) {\n setInternalBlue(rgb?.b);\n }\n }, [rgb]);\n\n const handleChange = (\n data: {\n hex?: string;\n r?: number;\n g?: number;\n b?: number;\n },\n event: React.ChangeEvent<HTMLInputElement>\n ) => {\n if (data.hex && color.isValidHex(data.hex)) {\n onChange(\n {\n hex: data.hex,\n source: \"hex\",\n },\n event\n );\n } else if (data.r || data.g || data.b) {\n onChange(\n {\n r: data.r || rgb?.r,\n g: data.g || rgb?.g,\n b: data.b || rgb?.b,\n source: \"rgb\",\n },\n event\n );\n }\n };\n\n const onChangeHex = (event: React.ChangeEvent<any>, value: string) => {\n setInternalHex(value);\n handleChange({ hex: value }, event);\n };\n\n const onChangeRbg = (\n event: React.ChangeEvent<any>,\n value: string,\n colorPart: \"r\" | \"g\" | \"b\"\n ) => {\n if (colorPart === \"r\") setInternalRed(Number(value));\n if (colorPart === \"g\") setInternalGreen(Number(value));\n if (colorPart === \"b\") setInternalBlue(Number(value));\n\n handleChange(\n {\n r: colorPart === \"r\" ? Number(value) : rgb?.r,\n g: colorPart === \"g\" ? Number(value) : rgb?.g,\n b: colorPart === \"b\" ? Number(value) : rgb?.b,\n },\n event\n );\n };\n\n return (\n <div className={cx(classes.fields, className)}>\n <HvInput\n ref={hexInputRef}\n className={classes.double}\n label=\"HEX\"\n value={internalHex?.replace(\"#\", \"\")}\n onChange={onChangeHex}\n onBlur={() => setInternalHex(hex)}\n disableClear\n />\n <HvInput\n ref={redInputRef}\n className={classes.single}\n label=\"R\"\n value={`${internalRed}`}\n onChange={(event, value) => onChangeRbg(event, value, \"r\")}\n onBlur={() => setInternalRed(rgb?.r)}\n disableClear\n />\n <HvInput\n ref={greenInputRef}\n className={classes.single}\n label=\"G\"\n value={`${internalGreen}`}\n onChange={(event, value) => onChangeRbg(event, value, \"g\")}\n onBlur={() => setInternalGreen(rgb?.g)}\n disableClear\n />\n <HvInput\n ref={blueInputRef}\n className={classes.single}\n label=\"B\"\n value={`${internalBlue}`}\n onChange={(event, value) => onChangeRbg(event, value, \"b\")}\n onBlur={() => setInternalBlue(rgb?.b)}\n disableClear\n />\n </div>\n );\n};\n"],"names":["Fields","className","onChange","rgb","hex","classes","classesProp","cx","useClasses","internalHex","setInternalHex","useState","internalRed","setInternalRed","r","internalGreen","setInternalGreen","g","internalBlue","setInternalBlue","b","hexInputRef","useRef","redInputRef","greenInputRef","blueInputRef","useEffect","document","activeElement","current","handleChange","data","event","color","isValidHex","source","onChangeHex","value","onChangeRbg","colorPart","Number","fields","children","_jsx","HvInput","ref","double","label","replace","onBlur","disableClear","single"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Fields.cjs","sources":["../../../../../src/components/ColorPicker/Fields/Fields.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { HSLColor, HSVColor, RGBColor } from \"react-color\";\n\nimport * as color from \"react-color/lib/helpers/color\";\n\nimport { HvInput } from \"@core/components/Input\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Fields.styles\";\n\nexport { staticClasses as colorPickerFieldsClasses };\n\nexport type HvColorPickerFieldsClasses = ExtractNames<typeof useClasses>;\n\ninterface FieldsProps {\n className?: string;\n rgb?: RGBColor;\n hex?: string;\n onChange: (\n data:\n | HSLColor\n | HSVColor\n | RGBColor\n | {\n source?: string;\n hex?: string;\n },\n event: React.ChangeEvent<HTMLInputElement>\n ) => void;\n classes?: HvColorPickerFieldsClasses;\n}\n\nexport const Fields = ({\n className,\n onChange,\n rgb,\n hex,\n classes: classesProp,\n}: FieldsProps) => {\n const { classes, cx } = useClasses(classesProp);\n const [internalHex, setInternalHex] = useState(hex);\n const [internalRed, setInternalRed] = useState(rgb?.r);\n const [internalGreen, setInternalGreen] = useState(rgb?.g);\n const [internalBlue, setInternalBlue] = useState(rgb?.b);\n\n const hexInputRef = useRef<HTMLInputElement>(null);\n const redInputRef = useRef<HTMLInputElement>(null);\n const greenInputRef = useRef<HTMLInputElement>(null);\n const blueInputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (document.activeElement !== hexInputRef.current) {\n setInternalHex(hex);\n }\n }, [hex]);\n\n useEffect(() => {\n if (document.activeElement !== redInputRef.current) {\n setInternalRed(rgb?.r);\n }\n\n if (document.activeElement !== greenInputRef.current) {\n setInternalGreen(rgb?.g);\n }\n\n if (document.activeElement !== blueInputRef.current) {\n setInternalBlue(rgb?.b);\n }\n }, [rgb]);\n\n const handleChange = (\n data: {\n hex?: string;\n r?: number;\n g?: number;\n b?: number;\n },\n event: React.ChangeEvent<HTMLInputElement>\n ) => {\n if (data.hex && color.isValidHex(data.hex)) {\n onChange(\n {\n hex: data.hex,\n source: \"hex\",\n },\n event\n );\n } else if (data.r || data.g || data.b) {\n onChange(\n {\n r: data.r || rgb?.r,\n g: data.g || rgb?.g,\n b: data.b || rgb?.b,\n source: \"rgb\",\n },\n event\n );\n }\n };\n\n const onChangeHex = (event: React.ChangeEvent<any>, value: string) => {\n setInternalHex(value);\n handleChange({ hex: value }, event);\n };\n\n const onChangeRbg = (\n event: React.ChangeEvent<any>,\n value: string,\n colorPart: \"r\" | \"g\" | \"b\"\n ) => {\n if (colorPart === \"r\") setInternalRed(Number(value));\n if (colorPart === \"g\") setInternalGreen(Number(value));\n if (colorPart === \"b\") setInternalBlue(Number(value));\n\n handleChange(\n {\n r: colorPart === \"r\" ? Number(value) : rgb?.r,\n g: colorPart === \"g\" ? Number(value) : rgb?.g,\n b: colorPart === \"b\" ? Number(value) : rgb?.b,\n },\n event\n );\n };\n\n return (\n <div className={cx(classes.fields, className)}>\n <HvInput\n ref={hexInputRef}\n className={classes.double}\n label=\"HEX\"\n value={internalHex?.replace(\"#\", \"\")}\n onChange={onChangeHex}\n onBlur={() => setInternalHex(hex)}\n disableClear\n />\n <HvInput\n ref={redInputRef}\n className={classes.single}\n label=\"R\"\n value={`${internalRed}`}\n onChange={(event, value) => onChangeRbg(event, value, \"r\")}\n onBlur={() => setInternalRed(rgb?.r)}\n disableClear\n />\n <HvInput\n ref={greenInputRef}\n className={classes.single}\n label=\"G\"\n value={`${internalGreen}`}\n onChange={(event, value) => onChangeRbg(event, value, \"g\")}\n onBlur={() => setInternalGreen(rgb?.g)}\n disableClear\n />\n <HvInput\n ref={blueInputRef}\n className={classes.single}\n label=\"B\"\n value={`${internalBlue}`}\n onChange={(event, value) => onChangeRbg(event, value, \"b\")}\n onBlur={() => setInternalBlue(rgb?.b)}\n disableClear\n />\n </div>\n );\n};\n"],"names":["Fields","className","onChange","rgb","hex","classes","classesProp","cx","useClasses","internalHex","setInternalHex","useState","internalRed","setInternalRed","r","internalGreen","setInternalGreen","g","internalBlue","setInternalBlue","b","hexInputRef","useRef","redInputRef","greenInputRef","blueInputRef","useEffect","document","activeElement","current","handleChange","data","event","color","isValidHex","source","onChangeHex","value","onChangeRbg","colorPart","Number","fields","children","_jsx","HvInput","ref","double","label","replace","onBlur","disableClear","single"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PresetColors.cjs","sources":["../../../../../src/components/ColorPicker/PresetColors/PresetColors.tsx"],"sourcesContent":["// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./PresetColors.styles\";\n\nexport { staticClasses as colorPickerPresetColorsClasses };\n\nexport type HvColorPickerPresetColorsClasses = ExtractNames<typeof useClasses>;\n\ninterface PresetColorsProps {\n colors: string[];\n onClick: (color: { hex: string; source: string }) => void;\n title?: string;\n className?: string;\n classes?: HvColorPickerPresetColorsClasses;\n}\n\nexport const PresetColors = ({\n onClick,\n colors,\n title,\n className,\n classes: classesProp,\n}: PresetColorsProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const handleClick = (hex: string) => {\n onClick({\n hex,\n source: \"hex\",\n });\n };\n\n return (\n <div className={cx(classes.root, className)}>\n {title && (\n <HvTypography className={classes.title} variant=\"caption1\">\n {title}\n </HvTypography>\n )}\n <div className={classes.colors}>\n {colors.map((color, index) => (\n <div\n key={`recommended-color-${color}-${index}`}\n className={classes.swatchWrap}\n >\n <Swatch\n color={color}\n onClick={handleClick}\n focusStyle={{\n boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n }}\n />\n </div>\n ))}\n </div>\n </div>\n );\n};\n"],"names":["PresetColors","onClick","colors","title","className","classes","classesProp","cx","useClasses","handleClick","hex","source","root","children","_jsx","HvTypography","variant","map","color","index","swatchWrap","Swatch","focusStyle","boxShadow"],"mappings":";;;;;;AAqBO,MAAMA,eAAeA,CAAC;AAAA,EAC3BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AACQ,MAAM;AACjB,QAAA;AAAA,IAAED;AAAAA,IAASE;AAAAA,EAAAA,IAAOC,oBAAAA,WAAWF,WAAW;AAExCG,QAAAA,cAAcA,CAACC,QAAgB;AAC3B,YAAA;AAAA,MACNA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,yCACE,OAAA;AAAA,IAAKP,WAAWG,GAAGF,QAAQO,MAAMR,SAAS;AAAA,IAAES,UACzCV,CAAAA,SACCW,2BAAAA,IAACC,yBAAY;AAAA,MAACX,WAAWC,QAAQF;AAAAA,MAAOa,SAAQ;AAAA,MAAUH,UACvDV;AAAAA,IAAAA,CACW,GAEhBW,2BAAAA,IAAA,OAAA;AAAA,MAAKV,WAAWC,QAAQH;AAAAA,MAAOW,UAC5BX,OAAOe,IAAI,CAACC,OAAOC,yCAClB,OAAA;AAAA,QAEEf,WAAWC,QAAQe;AAAAA,QAAWP,yCAE7BQ,eAAM;AAAA,UACLH;AAAAA,UACAjB,SAASQ;AAAAA,UACTa,YAAY;AAAA,YACVC,WAAY,4CAA2CL;
|
|
1
|
+
{"version":3,"file":"PresetColors.cjs","sources":["../../../../../src/components/ColorPicker/PresetColors/PresetColors.tsx"],"sourcesContent":["// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./PresetColors.styles\";\n\nexport { staticClasses as colorPickerPresetColorsClasses };\n\nexport type HvColorPickerPresetColorsClasses = ExtractNames<typeof useClasses>;\n\ninterface PresetColorsProps {\n colors: string[];\n onClick: (color: { hex: string; source: string }) => void;\n title?: string;\n className?: string;\n classes?: HvColorPickerPresetColorsClasses;\n}\n\nexport const PresetColors = ({\n onClick,\n colors,\n title,\n className,\n classes: classesProp,\n}: PresetColorsProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const handleClick = (hex: string) => {\n onClick({\n hex,\n source: \"hex\",\n });\n };\n\n return (\n <div className={cx(classes.root, className)}>\n {title && (\n <HvTypography className={classes.title} variant=\"caption1\">\n {title}\n </HvTypography>\n )}\n <div className={classes.colors}>\n {colors.map((color, index) => (\n <div\n key={`recommended-color-${color}-${index}`}\n className={classes.swatchWrap}\n >\n <Swatch\n color={color}\n onClick={handleClick}\n focusStyle={{\n boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n }}\n />\n </div>\n ))}\n </div>\n </div>\n );\n};\n"],"names":["PresetColors","onClick","colors","title","className","classes","classesProp","cx","useClasses","handleClick","hex","source","root","children","_jsx","HvTypography","variant","map","color","index","swatchWrap","Swatch","focusStyle","boxShadow"],"mappings":";;;;;;AAqBO,MAAMA,eAAeA,CAAC;AAAA,EAC3BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AACQ,MAAM;AACjB,QAAA;AAAA,IAAED;AAAAA,IAASE;AAAAA,EAAAA,IAAOC,oBAAAA,WAAWF,WAAW;AAExCG,QAAAA,cAAcA,CAACC,QAAgB;AAC3B,YAAA;AAAA,MACNA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,yCACE,OAAA;AAAA,IAAKP,WAAWG,GAAGF,QAAQO,MAAMR,SAAS;AAAA,IAAES,UACzCV,CAAAA,SACCW,2BAAAA,IAACC,yBAAY;AAAA,MAACX,WAAWC,QAAQF;AAAAA,MAAOa,SAAQ;AAAA,MAAUH,UACvDV;AAAAA,IAAAA,CACW,GAEhBW,2BAAAA,IAAA,OAAA;AAAA,MAAKV,WAAWC,QAAQH;AAAAA,MAAOW,UAC5BX,OAAOe,IAAI,CAACC,OAAOC,yCAClB,OAAA;AAAA,QAEEf,WAAWC,QAAQe;AAAAA,QAAWP,yCAE7BQ,eAAM;AAAA,UACLH;AAAAA,UACAjB,SAASQ;AAAAA,UACTa,YAAY;AAAA,YACVC,WAAY,4CAA2CL,KAAM;AAAA,UAC/D;AAAA,QAAA,CACD;AAAA,MAAA,GATK,qBAAoBA,KAAM,IAAGC,KAAM,EAUtC,CACN;AAAA,IAAA,CACE,CAAC;AAAA,EAAA,CACH;AAET;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SavedColors.cjs","sources":["../../../../../src/components/ColorPicker/SavedColors/SavedColors.tsx"],"sourcesContent":["import { CloseXS, Add } from \"@hitachivantara/uikit-react-icons\";\n\n// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./SavedColors.styles\";\n\nexport { staticClasses as colorPickerSavedColorsClasses };\n\nexport type HvColorPickerSavedColorsClasses = ExtractNames<typeof useClasses>;\n\ninterface SavedColorsProps {\n colors: string[];\n onClickColor: (color: { hex: string; source: string }) => void;\n onAddColor: () => void;\n onRemoveColor: (color: string, index: number) => void;\n deleteButtonAriaLabel?: string;\n addButtonAriaLabel?: string;\n classes?: HvColorPickerSavedColorsClasses;\n}\n\nexport const SavedColors = ({\n colors,\n onClickColor,\n onAddColor,\n onRemoveColor,\n deleteButtonAriaLabel,\n addButtonAriaLabel,\n classes: classesProp,\n}: SavedColorsProps) => {\n const { classes } = useClasses(classesProp);\n\n const handleClick = (hex: string) => {\n onClickColor({\n hex,\n source: \"hex\",\n });\n };\n\n return (\n <div className={classes.root}>\n <HvButton\n className={classes.addButton}\n variant=\"secondarySubtle\"\n icon\n onClick={onAddColor}\n aria-label={addButtonAriaLabel}\n >\n <Add aria-hidden />\n </HvButton>\n {colors.map((color, index) => (\n <div\n key={`saved-color-${color}-${index}`}\n className={classes.swatchRoot}\n >\n <div className={classes.swatchWrap}>\n <Swatch\n color={color}\n onClick={handleClick}\n focusStyle={{\n boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n }}\n />\n </div>\n <div className={classes.removeButtonRoot}>\n <HvButton\n className={classes.removeButton}\n variant=\"secondarySubtle\"\n onClick={() => onRemoveColor(color, index)}\n tabIndex={0}\n aria-label={deleteButtonAriaLabel}\n >\n <CloseXS aria-hidden iconSize=\"XS\" />\n </HvButton>\n </div>\n </div>\n ))}\n </div>\n );\n};\n"],"names":["SavedColors","colors","onClickColor","onAddColor","onRemoveColor","deleteButtonAriaLabel","addButtonAriaLabel","classes","classesProp","useClasses","handleClick","hex","source","className","root","children","_jsx","HvButton","addButton","variant","icon","onClick","Add","map","color","index","swatchRoot","swatchWrap","Swatch","focusStyle","boxShadow","removeButtonRoot","removeButton","tabIndex","CloseXS","iconSize"],"mappings":";;;;;;;AAyBO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AACO,MAAM;AAChB,QAAA;AAAA,IAAED;AAAAA,EAAAA,IAAYE,mBAAAA,WAAWD,WAAW;AAEpCE,QAAAA,cAAcA,CAACC,QAAgB;AACtB,iBAAA;AAAA,MACXA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,yCACE,OAAA;AAAA,IAAKC,WAAWN,QAAQO;AAAAA,IAAKC,UAAA,CAC3BC,2BAAAA,IAACC,iBAAQ;AAAA,MACPJ,WAAWN,QAAQW;AAAAA,MACnBC,SAAQ;AAAA,MACRC,MAAI;AAAA,MACJC,SAASlB;AAAAA,MACT,cAAYG;AAAAA,MAAmBS,yCAE9BO,qBAAG;AAAA,QAAC,eAAA;AAAA,MAAA,CAAa;AAAA,IAAA,CACV,GACTrB,OAAOsB,IAAI,CAACC,OAAOC,0CAClB,OAAA;AAAA,MAEEZ,WAAWN,QAAQmB;AAAAA,MAAWX,WAE9BC,2BAAAA,IAAA,OAAA;AAAA,QAAKH,WAAWN,QAAQoB;AAAAA,QAAWZ,yCAChCa,eAAM;AAAA,UACLJ;AAAAA,UACAH,SAASX;AAAAA,UACTmB,YAAY;AAAA,YACVC,WAAY,4CAA2CN;
|
|
1
|
+
{"version":3,"file":"SavedColors.cjs","sources":["../../../../../src/components/ColorPicker/SavedColors/SavedColors.tsx"],"sourcesContent":["import { CloseXS, Add } from \"@hitachivantara/uikit-react-icons\";\n\n// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./SavedColors.styles\";\n\nexport { staticClasses as colorPickerSavedColorsClasses };\n\nexport type HvColorPickerSavedColorsClasses = ExtractNames<typeof useClasses>;\n\ninterface SavedColorsProps {\n colors: string[];\n onClickColor: (color: { hex: string; source: string }) => void;\n onAddColor: () => void;\n onRemoveColor: (color: string, index: number) => void;\n deleteButtonAriaLabel?: string;\n addButtonAriaLabel?: string;\n classes?: HvColorPickerSavedColorsClasses;\n}\n\nexport const SavedColors = ({\n colors,\n onClickColor,\n onAddColor,\n onRemoveColor,\n deleteButtonAriaLabel,\n addButtonAriaLabel,\n classes: classesProp,\n}: SavedColorsProps) => {\n const { classes } = useClasses(classesProp);\n\n const handleClick = (hex: string) => {\n onClickColor({\n hex,\n source: \"hex\",\n });\n };\n\n return (\n <div className={classes.root}>\n <HvButton\n className={classes.addButton}\n variant=\"secondarySubtle\"\n icon\n onClick={onAddColor}\n aria-label={addButtonAriaLabel}\n >\n <Add aria-hidden />\n </HvButton>\n {colors.map((color, index) => (\n <div\n key={`saved-color-${color}-${index}`}\n className={classes.swatchRoot}\n >\n <div className={classes.swatchWrap}>\n <Swatch\n color={color}\n onClick={handleClick}\n focusStyle={{\n boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n }}\n />\n </div>\n <div className={classes.removeButtonRoot}>\n <HvButton\n className={classes.removeButton}\n variant=\"secondarySubtle\"\n onClick={() => onRemoveColor(color, index)}\n tabIndex={0}\n aria-label={deleteButtonAriaLabel}\n >\n <CloseXS aria-hidden iconSize=\"XS\" />\n </HvButton>\n </div>\n </div>\n ))}\n </div>\n );\n};\n"],"names":["SavedColors","colors","onClickColor","onAddColor","onRemoveColor","deleteButtonAriaLabel","addButtonAriaLabel","classes","classesProp","useClasses","handleClick","hex","source","className","root","children","_jsx","HvButton","addButton","variant","icon","onClick","Add","map","color","index","swatchRoot","swatchWrap","Swatch","focusStyle","boxShadow","removeButtonRoot","removeButton","tabIndex","CloseXS","iconSize"],"mappings":";;;;;;;AAyBO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AACO,MAAM;AAChB,QAAA;AAAA,IAAED;AAAAA,EAAAA,IAAYE,mBAAAA,WAAWD,WAAW;AAEpCE,QAAAA,cAAcA,CAACC,QAAgB;AACtB,iBAAA;AAAA,MACXA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,yCACE,OAAA;AAAA,IAAKC,WAAWN,QAAQO;AAAAA,IAAKC,UAAA,CAC3BC,2BAAAA,IAACC,iBAAQ;AAAA,MACPJ,WAAWN,QAAQW;AAAAA,MACnBC,SAAQ;AAAA,MACRC,MAAI;AAAA,MACJC,SAASlB;AAAAA,MACT,cAAYG;AAAAA,MAAmBS,yCAE9BO,qBAAG;AAAA,QAAC,eAAA;AAAA,MAAA,CAAa;AAAA,IAAA,CACV,GACTrB,OAAOsB,IAAI,CAACC,OAAOC,0CAClB,OAAA;AAAA,MAEEZ,WAAWN,QAAQmB;AAAAA,MAAWX,WAE9BC,2BAAAA,IAAA,OAAA;AAAA,QAAKH,WAAWN,QAAQoB;AAAAA,QAAWZ,yCAChCa,eAAM;AAAA,UACLJ;AAAAA,UACAH,SAASX;AAAAA,UACTmB,YAAY;AAAA,YACVC,WAAY,4CAA2CN,KAAM;AAAA,UAC/D;AAAA,QAAA,CACD;AAAA,MAAA,CACE,GACLR,2BAAAA,IAAA,OAAA;AAAA,QAAKH,WAAWN,QAAQwB;AAAAA,QAAiBhB,yCACtCE,iBAAQ;AAAA,UACPJ,WAAWN,QAAQyB;AAAAA,UACnBb,SAAQ;AAAA,UACRE,SAASA,MAAMjB,cAAcoB,OAAOC,KAAK;AAAA,UACzCQ,UAAU;AAAA,UACV,cAAY5B;AAAAA,UAAsBU,yCAEjCmB,yBAAO;AAAA,YAAC,eAAW;AAAA,YAACC,UAAS;AAAA,UAAA,CAAM;AAAA,QAAA,CAC5B;AAAA,MAAA,CACP,CAAC;AAAA,IAAA,GAtBA,eAAcX,KAAM,IAAGC,KAAM,EAuBhC,CACN,CAAC;AAAA,EAAA,CACC;AAET;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Container.cjs","sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport MuiContainer, {\n ContainerProps as MuiContainerProps,\n} from \"@mui/material/Container\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Container.styles\";\n\nexport { staticClasses as containerClasses };\n\nexport type HvContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvContainerProps\n extends Omit<MuiContainerProps, \"classes\">,\n HvBaseProps {\n /**\n * The component used for the root node.\n * Either a string to use a DOM element or a component.\n */\n component?: React.ElementType;\n /**\n * Determine the max-width of the container.\n * The container width grows with the size of the screen.\n * Set to `false` to disable `maxWidth`.\n */\n maxWidth?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | false;\n /** If `true`, the left and right padding is removed. */\n disableGutters?: boolean;\n /**\n * Set the max-width to match the min-width of the current breakpoint.\n * This is useful if you'd prefer to design for a fixed set of sizes\n * instead of trying to accommodate a fully fluid viewport.\n * It's fluid by default.\n */\n fixed?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvContainerClasses;\n}\n\n/** The container enables you to center your content horizontally and bound it to a specific breakpoint. */\nexport const HvContainer = forwardRef<HTMLDivElement, HvContainerProps>(\n (props, ref) => {\n const {\n maxWidth = false,\n classes: classesProp,\n className,\n fixed,\n disableGutters,\n ...others\n } = useDefaultProps(\"HvContainer\", props);\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const muiTheme = useTheme();\n\n const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n const gutters = upMd\n ? {\n // Increases specificity\n [`&.${staticClasses.root}`]: {\n paddingLeft: theme.spacing(4),\n paddingRight: theme.spacing(4),\n },\n }\n : {\n // Increases specificity\n [`&.${staticClasses.root}`]: {\n paddingLeft: theme.space.sm,\n paddingRight: theme.space.sm,\n },\n };\n\n return (\n <MuiContainer\n className={cx({ [css(gutters)]: !disableGutters }, className)}\n classes={{\n root: classes.root,\n disableGutters: classes.disableGutters,\n fixed: classes.fixed,\n maxWidthXs: classes.maxWidthXs,\n maxWidthSm: classes.maxWidthSm,\n maxWidthMd: classes.maxWidthMd,\n maxWidthLg: classes.maxWidthLg,\n maxWidthXl: classes.maxWidthXl,\n }}\n ref={ref}\n maxWidth={maxWidth}\n fixed={fixed}\n disableGutters={disableGutters}\n {...others}\n />\n );\n }\n);\n"],"names":["HvContainer","forwardRef","props","ref","maxWidth","classes","classesProp","className","fixed","disableGutters","others","useDefaultProps","cx","css","useClasses","muiTheme","useTheme","upMd","useMediaQuery","breakpoints","up","gutters","staticClasses","root","paddingLeft","theme","spacing","paddingRight","space","sm","MuiContainer","maxWidthXs","maxWidthSm","maxWidthMd","maxWidthLg","maxWidthXl"],"mappings":";;;;;;;;;;;;;AAgDO,MAAMA,cAAcC,MAAAA,WACzB,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC,WAAW;AAAA,IACXC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,eAAeT,KAAK;AAElC,QAAA;AAAA,IAAEG;AAAAA,IAASO;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,iBAAAA,WAAWR,WAAW;AAEnD,QAAMS,WAAWC,OAAAA;AAEjB,QAAMC,OAAOC,uBAAAA,QAAcH,SAASI,YAAYC,GAAG,IAAI,CAAC;AAExD,QAAMC,UAAUJ,OACZ;AAAA;AAAA,IAEE,CAAE,KAAIK,+BAAcC,
|
|
1
|
+
{"version":3,"file":"Container.cjs","sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport MuiContainer, {\n ContainerProps as MuiContainerProps,\n} from \"@mui/material/Container\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Container.styles\";\n\nexport { staticClasses as containerClasses };\n\nexport type HvContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvContainerProps\n extends Omit<MuiContainerProps, \"classes\">,\n HvBaseProps {\n /**\n * The component used for the root node.\n * Either a string to use a DOM element or a component.\n */\n component?: React.ElementType;\n /**\n * Determine the max-width of the container.\n * The container width grows with the size of the screen.\n * Set to `false` to disable `maxWidth`.\n */\n maxWidth?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | false;\n /** If `true`, the left and right padding is removed. */\n disableGutters?: boolean;\n /**\n * Set the max-width to match the min-width of the current breakpoint.\n * This is useful if you'd prefer to design for a fixed set of sizes\n * instead of trying to accommodate a fully fluid viewport.\n * It's fluid by default.\n */\n fixed?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvContainerClasses;\n}\n\n/** The container enables you to center your content horizontally and bound it to a specific breakpoint. */\nexport const HvContainer = forwardRef<HTMLDivElement, HvContainerProps>(\n (props, ref) => {\n const {\n maxWidth = false,\n classes: classesProp,\n className,\n fixed,\n disableGutters,\n ...others\n } = useDefaultProps(\"HvContainer\", props);\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const muiTheme = useTheme();\n\n const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n const gutters = upMd\n ? {\n // Increases specificity\n [`&.${staticClasses.root}`]: {\n paddingLeft: theme.spacing(4),\n paddingRight: theme.spacing(4),\n },\n }\n : {\n // Increases specificity\n [`&.${staticClasses.root}`]: {\n paddingLeft: theme.space.sm,\n paddingRight: theme.space.sm,\n },\n };\n\n return (\n <MuiContainer\n className={cx({ [css(gutters)]: !disableGutters }, className)}\n classes={{\n root: classes.root,\n disableGutters: classes.disableGutters,\n fixed: classes.fixed,\n maxWidthXs: classes.maxWidthXs,\n maxWidthSm: classes.maxWidthSm,\n maxWidthMd: classes.maxWidthMd,\n maxWidthLg: classes.maxWidthLg,\n maxWidthXl: classes.maxWidthXl,\n }}\n ref={ref}\n maxWidth={maxWidth}\n fixed={fixed}\n disableGutters={disableGutters}\n {...others}\n />\n );\n }\n);\n"],"names":["HvContainer","forwardRef","props","ref","maxWidth","classes","classesProp","className","fixed","disableGutters","others","useDefaultProps","cx","css","useClasses","muiTheme","useTheme","upMd","useMediaQuery","breakpoints","up","gutters","staticClasses","root","paddingLeft","theme","spacing","paddingRight","space","sm","MuiContainer","maxWidthXs","maxWidthSm","maxWidthMd","maxWidthLg","maxWidthXl"],"mappings":";;;;;;;;;;;;;AAgDO,MAAMA,cAAcC,MAAAA,WACzB,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC,WAAW;AAAA,IACXC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,eAAeT,KAAK;AAElC,QAAA;AAAA,IAAEG;AAAAA,IAASO;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,iBAAAA,WAAWR,WAAW;AAEnD,QAAMS,WAAWC,OAAAA;AAEjB,QAAMC,OAAOC,uBAAAA,QAAcH,SAASI,YAAYC,GAAG,IAAI,CAAC;AAExD,QAAMC,UAAUJ,OACZ;AAAA;AAAA,IAEE,CAAE,KAAIK,+BAAcC,IAAK,EAAC,GAAG;AAAA,MAC3BC,aAAaC,YAAAA,MAAMC,QAAQ,CAAC;AAAA,MAC5BC,cAAcF,YAAAA,MAAMC,QAAQ,CAAC;AAAA,IAC/B;AAAA,EAAA,IAEF;AAAA;AAAA,IAEE,CAAE,KAAIJ,+BAAcC,IAAK,EAAC,GAAG;AAAA,MAC3BC,aAAaC,YAAAA,MAAMG,MAAMC;AAAAA,MACzBF,cAAcF,YAAAA,MAAMG,MAAMC;AAAAA,IAC5B;AAAA,EAAA;AAGN,wCACGC,sBAAAA,SAAY;AAAA,IACXvB,WAAWK,GAAG;AAAA,MAAE,CAACC,IAAIQ,OAAO,CAAC,GAAG,CAACZ;AAAAA,OAAkBF,SAAS;AAAA,IAC5DF,SAAS;AAAA,MACPkB,MAAMlB,QAAQkB;AAAAA,MACdd,gBAAgBJ,QAAQI;AAAAA,MACxBD,OAAOH,QAAQG;AAAAA,MACfuB,YAAY1B,QAAQ0B;AAAAA,MACpBC,YAAY3B,QAAQ2B;AAAAA,MACpBC,YAAY5B,QAAQ4B;AAAAA,MACpBC,YAAY7B,QAAQ6B;AAAAA,MACpBC,YAAY9B,QAAQ8B;AAAAA,IACtB;AAAA,IACAhC;AAAAA,IACAC;AAAAA,IACAI;AAAAA,IACAC;AAAAA,IAA+B,GAC3BC;AAAAA,EAAAA,CACL;AAEL,CACF;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.styles.cjs","sources":["../../../../src/components/DatePicker/DatePicker.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDatePicker\", {\n root: {\n position: \"relative\",\n },\n actionContainer: {\n justifyContent: \"space-between\",\n },\n leftContainer: {},\n rightContainer: {},\n\n labelContainer: {\n display: \"flex\",\n alignItems: \"flex-start\",\n },\n label: {\n paddingBottom: \"6px\",\n display: \"block\",\n },\n description: {},\n error: {},\n\n dropdown: {\n display: \"block\",\n },\n panel: {},\n\n dropdownHeaderInvalid: {\n border: `1px solid ${theme.colors.negative}`,\n \"&:hover\": {\n border: `1px solid ${theme.colors.negative}`,\n },\n },\n dropdownHeaderOpen: {},\n icon: {},\n action: {\n \"&:first-of-type\": {\n marginRight: theme.space.xs,\n },\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","position","actionContainer","justifyContent","leftContainer","rightContainer","labelContainer","display","alignItems","label","paddingBottom","description","error","dropdown","panel","dropdownHeaderInvalid","border","theme","colors","negative","dropdownHeaderOpen","icon","action","marginRight","space","xs"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,gBAAgB;AAAA,EACzEC,MAAM;AAAA,IACJC,UAAU;AAAA,EACZ;AAAA,EACAC,iBAAiB;AAAA,IACfC,gBAAgB;AAAA,EAClB;AAAA,EACAC,eAAe,CAAC;AAAA,EAChBC,gBAAgB,CAAC;AAAA,EAEjBC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IACTC,YAAY;AAAA,EACd;AAAA,EACAC,OAAO;AAAA,IACLC,eAAe;AAAA,IACfH,SAAS;AAAA,EACX;AAAA,EACAI,aAAa,CAAC;AAAA,EACdC,OAAO,CAAC;AAAA,EAERC,UAAU;AAAA,IACRN,SAAS;AAAA,EACX;AAAA,EACAO,OAAO,CAAC;AAAA,EAERC,uBAAuB;AAAA,IACrBC,QAAS,aAAYC,
|
|
1
|
+
{"version":3,"file":"DatePicker.styles.cjs","sources":["../../../../src/components/DatePicker/DatePicker.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDatePicker\", {\n root: {\n position: \"relative\",\n },\n actionContainer: {\n justifyContent: \"space-between\",\n },\n leftContainer: {},\n rightContainer: {},\n\n labelContainer: {\n display: \"flex\",\n alignItems: \"flex-start\",\n },\n label: {\n paddingBottom: \"6px\",\n display: \"block\",\n },\n description: {},\n error: {},\n\n dropdown: {\n display: \"block\",\n },\n panel: {},\n\n dropdownHeaderInvalid: {\n border: `1px solid ${theme.colors.negative}`,\n \"&:hover\": {\n border: `1px solid ${theme.colors.negative}`,\n },\n },\n dropdownHeaderOpen: {},\n icon: {},\n action: {\n \"&:first-of-type\": {\n marginRight: theme.space.xs,\n },\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","position","actionContainer","justifyContent","leftContainer","rightContainer","labelContainer","display","alignItems","label","paddingBottom","description","error","dropdown","panel","dropdownHeaderInvalid","border","theme","colors","negative","dropdownHeaderOpen","icon","action","marginRight","space","xs"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,gBAAgB;AAAA,EACzEC,MAAM;AAAA,IACJC,UAAU;AAAA,EACZ;AAAA,EACAC,iBAAiB;AAAA,IACfC,gBAAgB;AAAA,EAClB;AAAA,EACAC,eAAe,CAAC;AAAA,EAChBC,gBAAgB,CAAC;AAAA,EAEjBC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IACTC,YAAY;AAAA,EACd;AAAA,EACAC,OAAO;AAAA,IACLC,eAAe;AAAA,IACfH,SAAS;AAAA,EACX;AAAA,EACAI,aAAa,CAAC;AAAA,EACdC,OAAO,CAAC;AAAA,EAERC,UAAU;AAAA,IACRN,SAAS;AAAA,EACX;AAAA,EACAO,OAAO,CAAC;AAAA,EAERC,uBAAuB;AAAA,IACrBC,QAAS,aAAYC,YAAMC,MAAAA,OAAOC,QAAS;AAAA,IAC3C,WAAW;AAAA,MACTH,QAAS,aAAYC,YAAMC,MAAAA,OAAOC,QAAS;AAAA,IAC7C;AAAA,EACF;AAAA,EACAC,oBAAoB,CAAC;AAAA,EACrBC,MAAM,CAAC;AAAA,EACPC,QAAQ;AAAA,IACN,mBAAmB;AAAA,MACjBC,aAAaN,YAAAA,MAAMO,MAAMC;AAAAA,IAC3B;AAAA,EACF;AACF,CAAC;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.cjs","sources":["../../../../src/components/DatePicker/utils.tsx"],"sourcesContent":["import { DateRangeProp } from \"@core/components/Calendar\";\nimport {\n getFormattedDate,\n getMonthName,\n isDate,\n isSameMonth,\n} from \"@core/components/Calendar/utils\";\n\nexport const validateDate = (date: any) => (isDate(date) && date) || new Date();\n\nexport const getFormattedDateRange = (\n date: DateRangeProp,\n locale: string,\n rep: Intl.DateTimeFormatOptions[\"month\"] = \"short\"\n) => {\n const { startDate, endDate } = date;\n const monthYear = `${getMonthName(\n startDate,\n locale,\n rep\n )} ${startDate.getFullYear()}`;\n return `${startDate.getDate()} - ${endDate?.getDate()} ${monthYear}`;\n};\n\nexport const getSingleDateLabel = (date: any, locale?: string) =>\n isDate(date) ? getFormattedDate(date, locale) : \"\";\n\nexport const getRangeDateLabel = (\n { startDate, endDate }: any,\n locale: string\n) => {\n if (!(isDate(startDate) && isDate(endDate)))\n return getSingleDateLabel(startDate);\n\n return isSameMonth(startDate, endDate)\n ? getFormattedDateRange({ startDate, endDate }, locale)\n : `${getFormattedDate(startDate, locale)} - ${getFormattedDate(\n endDate,\n locale\n )}`;\n};\n\nexport const getDateLabel = (\n date: Date | Partial<DateRangeProp> | undefined,\n rangeMode: boolean,\n locale: string\n) =>\n rangeMode\n ? getRangeDateLabel(date as Required<DateRangeProp>, locale)\n : getSingleDateLabel(date, locale);\n"],"names":["validateDate","date","isDate","Date","getFormattedDateRange","locale","rep","startDate","endDate","monthYear","getMonthName","getFullYear","getDate","getSingleDateLabel","getFormattedDate","getRangeDateLabel","isSameMonth","getDateLabel","rangeMode"],"mappings":";;;AAQaA,MAAAA,eAAeA,CAACC,SAAeC,MAAAA,OAAOD,IAAI,KAAKA,4BAAaE,KAAK;AAEvE,MAAMC,wBAAwBA,CACnCH,MACAI,QACAC,MAA2C,YACxC;AACG,QAAA;AAAA,IAAEC;AAAAA,IAAWC;AAAAA,EAAYP,IAAAA;AACzBQ,QAAAA,YAAa,GAAEC,
|
|
1
|
+
{"version":3,"file":"utils.cjs","sources":["../../../../src/components/DatePicker/utils.tsx"],"sourcesContent":["import { DateRangeProp } from \"@core/components/Calendar\";\nimport {\n getFormattedDate,\n getMonthName,\n isDate,\n isSameMonth,\n} from \"@core/components/Calendar/utils\";\n\nexport const validateDate = (date: any) => (isDate(date) && date) || new Date();\n\nexport const getFormattedDateRange = (\n date: DateRangeProp,\n locale: string,\n rep: Intl.DateTimeFormatOptions[\"month\"] = \"short\"\n) => {\n const { startDate, endDate } = date;\n const monthYear = `${getMonthName(\n startDate,\n locale,\n rep\n )} ${startDate.getFullYear()}`;\n return `${startDate.getDate()} - ${endDate?.getDate()} ${monthYear}`;\n};\n\nexport const getSingleDateLabel = (date: any, locale?: string) =>\n isDate(date) ? getFormattedDate(date, locale) : \"\";\n\nexport const getRangeDateLabel = (\n { startDate, endDate }: any,\n locale: string\n) => {\n if (!(isDate(startDate) && isDate(endDate)))\n return getSingleDateLabel(startDate);\n\n return isSameMonth(startDate, endDate)\n ? getFormattedDateRange({ startDate, endDate }, locale)\n : `${getFormattedDate(startDate, locale)} - ${getFormattedDate(\n endDate,\n locale\n )}`;\n};\n\nexport const getDateLabel = (\n date: Date | Partial<DateRangeProp> | undefined,\n rangeMode: boolean,\n locale: string\n) =>\n rangeMode\n ? getRangeDateLabel(date as Required<DateRangeProp>, locale)\n : getSingleDateLabel(date, locale);\n"],"names":["validateDate","date","isDate","Date","getFormattedDateRange","locale","rep","startDate","endDate","monthYear","getMonthName","getFullYear","getDate","getSingleDateLabel","getFormattedDate","getRangeDateLabel","isSameMonth","getDateLabel","rangeMode"],"mappings":";;;AAQaA,MAAAA,eAAeA,CAACC,SAAeC,MAAAA,OAAOD,IAAI,KAAKA,4BAAaE,KAAK;AAEvE,MAAMC,wBAAwBA,CACnCH,MACAI,QACAC,MAA2C,YACxC;AACG,QAAA;AAAA,IAAEC;AAAAA,IAAWC;AAAAA,EAAYP,IAAAA;AACzBQ,QAAAA,YAAa,GAAEC,MAAAA,aACnBH,WACAF,QACAC,GACF,CAAE,IAAGC,UAAUI,YAAAA,CAAc;AACrB,SAAA,GAAEJ,UAAUK,QAAQ,CAAE,MAAKJ,mCAASI,SAAU,IAAGH,SAAU;AACrE;AAEaI,MAAAA,qBAAqBA,CAACZ,MAAWI,WAC5CH,MAAAA,OAAOD,IAAI,IAAIa,uBAAiBb,MAAMI,MAAM,IAAI;AAE3C,MAAMU,oBAAoBA,CAC/B;AAAA,EAAER;AAAAA,EAAWC;AAAa,GAC1BH,WACG;AACH,MAAI,EAAEH,MAAAA,OAAOK,SAAS,KAAKL,aAAOM,OAAO;AACvC,WAAOK,mBAAmBN,SAAS;AAErC,SAAOS,kBAAYT,WAAWC,OAAO,IACjCJ,sBAAsB;AAAA,IAAEG;AAAAA,IAAWC;AAAAA,EAAWH,GAAAA,MAAM,IACnD,GAAES,MAAAA,iBAAiBP,WAAWF,MAAM,CAAE,MAAKS,MAAAA,iBAC1CN,SACAH,MACF,CAAE;AACR;AAEO,MAAMY,eAAeA,CAC1BhB,MACAiB,WACAb,WAEAa,YACIH,kBAAkBd,MAAiCI,MAAM,IACzDQ,mBAAmBZ,MAAMI,MAAM;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Actions.styles.cjs","sources":["../../../../../src/components/Dialog/Actions/Actions.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog-Action\", {\n root: {\n margin: \"0\",\n padding: theme.space.sm,\n borderTop: `3px solid ${theme.colors.atmo2}`,\n height: 65,\n maxHeight: 65,\n flex: 1,\n },\n fullscreen: { position: \"fixed\", width: \"100%\", bottom: 0, left: 0 },\n spacing: {\n \"& > :not(:first-of-type)\": {\n marginLeft: theme.space.xs,\n },\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","margin","padding","theme","space","sm","borderTop","colors","atmo2","height","maxHeight","flex","fullscreen","position","width","bottom","left","spacing","marginLeft","xs"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,mBAAmB;AAAA,EAC5EC,MAAM;AAAA,IACJC,QAAQ;AAAA,IACRC,SAASC,YAAAA,MAAMC,MAAMC;AAAAA,IACrBC,WAAY,aAAYH,
|
|
1
|
+
{"version":3,"file":"Actions.styles.cjs","sources":["../../../../../src/components/Dialog/Actions/Actions.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog-Action\", {\n root: {\n margin: \"0\",\n padding: theme.space.sm,\n borderTop: `3px solid ${theme.colors.atmo2}`,\n height: 65,\n maxHeight: 65,\n flex: 1,\n },\n fullscreen: { position: \"fixed\", width: \"100%\", bottom: 0, left: 0 },\n spacing: {\n \"& > :not(:first-of-type)\": {\n marginLeft: theme.space.xs,\n },\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","margin","padding","theme","space","sm","borderTop","colors","atmo2","height","maxHeight","flex","fullscreen","position","width","bottom","left","spacing","marginLeft","xs"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,mBAAmB;AAAA,EAC5EC,MAAM;AAAA,IACJC,QAAQ;AAAA,IACRC,SAASC,YAAAA,MAAMC,MAAMC;AAAAA,IACrBC,WAAY,aAAYH,YAAMI,MAAAA,OAAOC,KAAM;AAAA,IAC3CC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,MAAM;AAAA,EACR;AAAA,EACAC,YAAY;AAAA,IAAEC,UAAU;AAAA,IAASC,OAAO;AAAA,IAAQC,QAAQ;AAAA,IAAGC,MAAM;AAAA,EAAE;AAAA,EACnEC,SAAS;AAAA,IACP,4BAA4B;AAAA,MAC1BC,YAAYf,YAAAA,MAAMC,MAAMe;AAAAA,IAC1B;AAAA,EACF;AACF,CAAC;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Content.styles.cjs","sources":["../../../../../src/components/Dialog/Content/Content.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog-Content\", {\n root: {\n padding: `0 ${theme.space.sm} ${theme.space.sm} ${theme.space.sm}`,\n flex: \"none\",\n },\n textContent: {\n marginLeft: \"42px\",\n paddingRight: \"62px\",\n flex: 1,\n overflowY: \"auto\",\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","padding","theme","space","sm","flex","textContent","marginLeft","paddingRight","overflowY"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,oBAAoB;AAAA,EAC7EC,MAAM;AAAA,IACJC,SAAU,KAAIC,YAAMC,MAAAA,MAAMC,
|
|
1
|
+
{"version":3,"file":"Content.styles.cjs","sources":["../../../../../src/components/Dialog/Content/Content.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog-Content\", {\n root: {\n padding: `0 ${theme.space.sm} ${theme.space.sm} ${theme.space.sm}`,\n flex: \"none\",\n },\n textContent: {\n marginLeft: \"42px\",\n paddingRight: \"62px\",\n flex: 1,\n overflowY: \"auto\",\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","padding","theme","space","sm","flex","textContent","marginLeft","paddingRight","overflowY"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,oBAAoB;AAAA,EAC7EC,MAAM;AAAA,IACJC,SAAU,KAAIC,YAAMC,MAAAA,MAAMC,EAAG,IAAGF,YAAMC,MAAAA,MAAMC,EAAG,IAAGF,YAAMC,MAAAA,MAAMC,EAAG;AAAA,IACjEC,MAAM;AAAA,EACR;AAAA,EACAC,aAAa;AAAA,IACXC,YAAY;AAAA,IACZC,cAAc;AAAA,IACdH,MAAM;AAAA,IACNI,WAAW;AAAA,EACb;AACF,CAAC;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Title.styles.cjs","sources":["../../../../../src/components/Dialog/Title/Title.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog-Title\", {\n root: { padding: theme.space.sm, margin: 0 },\n fullscreen: {},\n messageContainer: { display: \"flex\", alignItems: \"center\" },\n textWithIcon: {\n marginLeft: theme.space.xs,\n // 32px is the icon width\n marginRight: `calc(32px + ${theme.space.xs})`,\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","padding","theme","space","sm","margin","fullscreen","messageContainer","display","alignItems","textWithIcon","marginLeft","xs","marginRight"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,kBAAkB;AAAA,EAC3EC,MAAM;AAAA,IAAEC,SAASC,YAAAA,MAAMC,MAAMC;AAAAA,IAAIC,QAAQ;AAAA,EAAE;AAAA,EAC3CC,YAAY,CAAC;AAAA,EACbC,kBAAkB;AAAA,IAAEC,SAAS;AAAA,IAAQC,YAAY;AAAA,EAAS;AAAA,EAC1DC,cAAc;AAAA,IACZC,YAAYT,YAAAA,MAAMC,MAAMS;AAAAA;AAAAA,IAExBC,aAAc,eAAcX,YAAAA,MAAMC,MAAMS;
|
|
1
|
+
{"version":3,"file":"Title.styles.cjs","sources":["../../../../../src/components/Dialog/Title/Title.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog-Title\", {\n root: { padding: theme.space.sm, margin: 0 },\n fullscreen: {},\n messageContainer: { display: \"flex\", alignItems: \"center\" },\n textWithIcon: {\n marginLeft: theme.space.xs,\n // 32px is the icon width\n marginRight: `calc(32px + ${theme.space.xs})`,\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","padding","theme","space","sm","margin","fullscreen","messageContainer","display","alignItems","textWithIcon","marginLeft","xs","marginRight"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,kBAAkB;AAAA,EAC3EC,MAAM;AAAA,IAAEC,SAASC,YAAAA,MAAMC,MAAMC;AAAAA,IAAIC,QAAQ;AAAA,EAAE;AAAA,EAC3CC,YAAY,CAAC;AAAA,EACbC,kBAAkB;AAAA,IAAEC,SAAS;AAAA,IAAQC,YAAY;AAAA,EAAS;AAAA,EAC1DC,cAAc;AAAA,IACZC,YAAYT,YAAAA,MAAMC,MAAMS;AAAAA;AAAAA,IAExBC,aAAc,eAAcX,YAAAA,MAAMC,MAAMS,EAAG;AAAA,EAC7C;AACF,CAAC;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropDownMenu.styles.cjs","sources":["../../../../src/components/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropDownMenu\", {\n /** Styles applied to the container. */\n container: {\n width: 32,\n },\n /** Styles applied to the BaseDropdown container. */\n baseContainer: {},\n /** Styles applied to the root. */\n root: {\n display: \"inline-block\",\n width: \"auto\",\n \"&:focus-visible $icon\": {\n ...outlineStyles,\n },\n },\n /** Styles applied to the icon. */\n icon: {\n position: \"relative\",\n width: 32,\n height: 32,\n boxSizing: \"border-box\",\n padding: 0,\n borderRadius: theme.dropDownMenu.borderRadius,\n border: theme.dropDownMenu.borderClosed,\n },\n /** Styles applied to the icon when selected. */\n iconSelected: {\n backgroundColor: theme.colors.atmo1,\n boxShadow: theme.colors.shadow,\n\n \"&:hover\": {\n backgroundColor: theme.colors.atmo1,\n },\n\n \"& svg .color0\": {\n fill: theme.colors.secondary,\n },\n\n borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n border: theme.dropDownMenu.borderOpened,\n },\n /** Styles applied to the list root. */\n menuListRoot: {},\n /** Styles applied to the list. */\n menuList: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","container","width","baseContainer","root","display","outlineStyles","icon","position","height","boxSizing","padding","borderRadius","theme","dropDownMenu","border","borderClosed","iconSelected","backgroundColor","colors","atmo1","boxShadow","shadow","fill","secondary","radii","base","borderOpened","menuListRoot","menuList"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,kBAAkB;AAAA;AAAA,EAE3EC,WAAW;AAAA,IACTC,OAAO;AAAA,EACT;AAAA;AAAA,EAEAC,eAAe,CAAC;AAAA;AAAA,EAEhBC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTH,OAAO;AAAA,IACP,yBAAyB;AAAA,MACvB,GAAGI,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA;AAAA,EAEAC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVN,OAAO;AAAA,IACPO,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,cAAcC,YAAAA,MAAMC,aAAaF;AAAAA,IACjCG,QAAQF,YAAAA,MAAMC,aAAaE;AAAAA,EAC7B;AAAA;AAAA,EAEAC,cAAc;AAAA,IACZC,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,IAC9BC,WAAWR,YAAAA,MAAMM,OAAOG;AAAAA,IAExB,WAAW;AAAA,MACTJ,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,IAChC;AAAA,IAEA,iBAAiB;AAAA,MACfG,MAAMV,YAAAA,MAAMM,OAAOK;AAAAA,IACrB;AAAA,IAEAZ,cAAe,GAAEC,
|
|
1
|
+
{"version":3,"file":"DropDownMenu.styles.cjs","sources":["../../../../src/components/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropDownMenu\", {\n /** Styles applied to the container. */\n container: {\n width: 32,\n },\n /** Styles applied to the BaseDropdown container. */\n baseContainer: {},\n /** Styles applied to the root. */\n root: {\n display: \"inline-block\",\n width: \"auto\",\n \"&:focus-visible $icon\": {\n ...outlineStyles,\n },\n },\n /** Styles applied to the icon. */\n icon: {\n position: \"relative\",\n width: 32,\n height: 32,\n boxSizing: \"border-box\",\n padding: 0,\n borderRadius: theme.dropDownMenu.borderRadius,\n border: theme.dropDownMenu.borderClosed,\n },\n /** Styles applied to the icon when selected. */\n iconSelected: {\n backgroundColor: theme.colors.atmo1,\n boxShadow: theme.colors.shadow,\n\n \"&:hover\": {\n backgroundColor: theme.colors.atmo1,\n },\n\n \"& svg .color0\": {\n fill: theme.colors.secondary,\n },\n\n borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n border: theme.dropDownMenu.borderOpened,\n },\n /** Styles applied to the list root. */\n menuListRoot: {},\n /** Styles applied to the list. */\n menuList: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","container","width","baseContainer","root","display","outlineStyles","icon","position","height","boxSizing","padding","borderRadius","theme","dropDownMenu","border","borderClosed","iconSelected","backgroundColor","colors","atmo1","boxShadow","shadow","fill","secondary","radii","base","borderOpened","menuListRoot","menuList"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,kBAAkB;AAAA;AAAA,EAE3EC,WAAW;AAAA,IACTC,OAAO;AAAA,EACT;AAAA;AAAA,EAEAC,eAAe,CAAC;AAAA;AAAA,EAEhBC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTH,OAAO;AAAA,IACP,yBAAyB;AAAA,MACvB,GAAGI,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA;AAAA,EAEAC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVN,OAAO;AAAA,IACPO,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,cAAcC,YAAAA,MAAMC,aAAaF;AAAAA,IACjCG,QAAQF,YAAAA,MAAMC,aAAaE;AAAAA,EAC7B;AAAA;AAAA,EAEAC,cAAc;AAAA,IACZC,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,IAC9BC,WAAWR,YAAAA,MAAMM,OAAOG;AAAAA,IAExB,WAAW;AAAA,MACTJ,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,IAChC;AAAA,IAEA,iBAAiB;AAAA,MACfG,MAAMV,YAAAA,MAAMM,OAAOK;AAAAA,IACrB;AAAA,IAEAZ,cAAe,GAAEC,YAAMY,MAAAA,MAAMC,IAAK,IAAGb,kBAAMY,MAAMC,IAAK;AAAA,IACtDX,QAAQF,YAAAA,MAAMC,aAAaa;AAAAA,EAC7B;AAAA;AAAA,EAEAC,cAAc,CAAC;AAAA;AAAA,EAEfC,UAAU,CAAC;AACb,CAAC;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.cjs","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { PopperProps } from \"@mui/material\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { setId } from \"@core/utils/setId\";\nimport { useLabels, useUniqueId, useControlled } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport {\n HvBaseDropdown,\n HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvListValue } from \"@core/components/List\";\nimport {\n isInvalid,\n HvInfoMessage,\n HvWarningText,\n HvFormElement,\n HvLabel,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { getSelected, getSelectionLabel } from \"./utils\";\nimport { HvDropdownList, HvDropdownListProps } from \"./List\";\nimport { staticClasses, useClasses } from \"./Dropdown.styles\";\nimport { HvDropdownLabelsProps, HvDropdownStatus } from \"./types\";\n\nexport { staticClasses as dropdownClasses };\n\nexport type HvDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownProps\n extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n /**\n * Class names to be applied.\n */\n className?: string;\n /**\n * A Jss Object used to override or extend the component styles applied.\n */\n classes?: HvDropdownClasses;\n /**\n * Id to be applied to the form element root node.\n */\n id?: string;\n /**\n * The form element name.\n */\n name?: string;\n /**\n * The label of the form element.\n *\n * The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be provided instead.\n */\n label?: any;\n /**\n * @ignore\n */\n \"aria-label\"?: string;\n /**\n * @ignore\n */\n \"aria-labelledby\"?: string;\n /**\n * Provide additional descriptive text for the form element.\n */\n description?: any;\n /**\n * @ignore\n */\n \"aria-describedby\"?: string;\n /**\n * The placeholder value when nothing is selected.\n */\n placeholder?: string;\n\n /**\n * Indicates that the form element is disabled.\n */\n disabled?: boolean;\n /**\n * Indicates that the form element is in read only mode.\n */\n readOnly?: boolean;\n /**\n * Indicates that user input is required on the form element.\n */\n required?: boolean;\n /**\n * The status of the form 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?: HvDropdownStatus;\n /**\n * The error message to show when the validation status is \"invalid\".\n *\n * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n */\n statusMessage?: any;\n /**\n * Identifies the element that provides an error message for the dropdown.\n *\n * Will only be used when the validation status is invalid.\n */\n \"aria-errormessage\"?: string;\n\n /**\n * The callback fired when the value changes.\n */\n onChange?: (selected: HvListValue | HvListValue[] | undefined) => void;\n\n /**\n * The list to be rendered by the dropdown.\n */\n values?: HvListValue[];\n /**\n * If `true` the dropdown is multiSelect, if `false` the dropdown is single select.\n */\n multiSelect?: boolean;\n /**\n * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.\n */\n showSearch?: boolean;\n /**\n * If `true` the dropdown starts opened if `false` it starts closed.\n */\n expanded?: boolean;\n /**\n * When uncontrolled, defines the initial expanded state.\n */\n defaultExpanded?: boolean;\n /**\n * If 'true' the dropdown will notify on the first render.\n */\n notifyChangesOnFirstRender?: boolean;\n /**\n * An object containing all the labels for the dropdown.\n */\n labels?: HvDropdownLabelsProps;\n /**\n * If `true` the dropdown will show tooltips when user mouseenter text in list\n */\n hasTooltips?: boolean;\n /**\n * Disable the portal behavior.\n * The children stay within it's parent DOM hierarchy.\n */\n disablePortal?: boolean;\n /**\n * If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n * Defaults to `false`.\n */\n variableWidth?: boolean;\n /**\n * If `true`, selection can be toggled when single selection.\n */\n singleSelectionToggle?: boolean;\n /**\n * Placement of the dropdown.\n */\n placement?: \"left\" | \"right\";\n /**\n * An object containing props to be wired to the popper component.\n */\n popperProps?: Partial<PopperProps>;\n\n /**\n * Callback called when the user cancels the changes.\n *\n * Called when the cancel button is used and when the user clicks outside the open container.\n *\n * @param {object} event The event source of the callback.\n */\n onCancel?: (event: Event) => void;\n /**\n * Callback called when dropdown changes the expanded state.\n *\n * @param {object} event The event source of the callback.\n * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).\n */\n onToggle?: (event: Event, open: boolean) => void;\n /**\n * Callback called when the user clicks outside the open container.\n *\n * @param {object} event The event source of the callback.\n */\n onClickOutside?: (event: Event) => void;\n /**\n * @ignore\n */\n onFocus?: React.FocusEventHandler<any>;\n /**\n * @ignore\n */\n onBlur?: React.FocusEventHandler<any>;\n /**\n * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n */\n height?: number;\n /**\n * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n */\n maxHeight?: number;\n /**\n * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n */\n virtualized?: boolean;\n /**\n * Extra props passed to the dropdown.\n */\n baseDropdownProps?: HvBaseDropdownProps;\n /**\n * Extra props passed to the list.\n */\n listProps?: HvDropdownListProps;\n}\n\nconst DEFAULT_LABELS: HvDropdownLabelsProps = {\n select: undefined,\n selectAll: \"All\",\n cancelLabel: \"Cancel\",\n applyLabel: \"Apply\",\n searchPlaceholder: \"Search\",\n multiSelectionConjunction: \"/\",\n};\n\n/**\n * A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list.\n */\nexport const HvDropdown = (props: HvDropdownProps) => {\n const {\n classes: classesProp,\n className,\n\n id,\n name,\n\n required = false,\n disabled = false,\n readOnly = false,\n\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n\n placeholder = \"Select...\",\n\n onChange,\n\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n\n onCancel,\n onToggle,\n onClickOutside,\n\n onFocus,\n onBlur,\n\n values,\n multiSelect = false,\n showSearch = false,\n expanded,\n defaultExpanded = false,\n notifyChangesOnFirstRender = false,\n labels: labelsProp,\n hasTooltips = false,\n disablePortal = false,\n singleSelectionToggle = true,\n placement,\n variableWidth = false,\n popperProps = {},\n height,\n maxHeight,\n virtualized = false,\n baseDropdownProps = {},\n listProps = {},\n ...others\n } = useDefaultProps(\"HvDropdown\", props);\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const elementId = useUniqueId(id, \"hvdropdown\");\n\n const [validationState, setValidationState] = useControlled(\n status,\n \"standBy\"\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n const [selectionLabel, setSelectionLabel] = useState(\n getSelectionLabel(labels, placeholder, multiSelect, values)\n );\n const [internalValues, setInternalValues] = useState(values);\n\n useEffect(() => {\n setInternalValues(values);\n }, [values]);\n\n useEffect(() => {\n setSelectionLabel(\n getSelectionLabel(labels, placeholder, multiSelect, values)\n );\n }, [labels, multiSelect, placeholder, values]);\n\n if (virtualized && !height && process.env.NODE_ENV !== \"production\") {\n // eslint-disable-next-line no-console\n console.error(\n \"Dropdown/List in virtualized mode requires a height. Please define it.\"\n );\n }\n\n const dropdownHeaderRef = useRef<HTMLDivElement>();\n\n const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (event, open) => {\n onToggle?.(event, open);\n\n setIsOpen(open);\n\n if (!open) {\n // also run built-in validation when closing without changes\n // as the user \"touched\" the input\n setValidationState(() => {\n // this will only run if status is uncontrolled\n if (required) {\n const hasSelection = getSelected(internalValues).length > 0;\n\n if (!hasSelection) {\n return \"invalid\";\n }\n }\n\n return \"valid\";\n });\n }\n };\n\n /** Applies the selected values to the state */\n const handleSelection: HvDropdownListProps[\"onChange\"] = (\n listValues,\n commitChanges,\n toggle,\n notifyChanges = true\n ) => {\n const selected = getSelected(listValues);\n\n if (commitChanges) {\n setInternalValues(listValues);\n setSelectionLabel(\n getSelectionLabel(labels, placeholder, multiSelect, listValues)\n );\n\n setValidationState(() => {\n // this will only run if status is uncontrolled\n if (required && selected.length === 0) {\n return \"invalid\";\n }\n\n return \"valid\";\n });\n }\n if (notifyChanges) onChange?.(multiSelect ? selected : selected[0]);\n if (toggle) {\n handleToggle(undefined as any, false);\n\n // focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n dropdownHeaderRef.current?.focus({ preventScroll: true });\n }\n };\n\n /**\n * Handles the `Cancel` action. Both single and ranged modes are handled here.\n */\n const handleCancel: HvDropdownListProps[\"onCancel\"] = (evt) => {\n onCancel?.(evt as any);\n\n handleToggle(evt as any, false);\n\n // focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n dropdownHeaderRef.current?.focus({ preventScroll: true });\n };\n\n const handleClickOutside: HvBaseDropdownProps[\"onClickOutside\"] = (evt) => {\n onClickOutside?.(evt);\n onCancel?.(evt);\n };\n\n const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n containerRef\n ) => {\n const inputs = containerRef?.getElementsByTagName(\"input\");\n if (inputs && inputs.length > 0) {\n inputs[0].focus();\n return;\n }\n const listItems =\n containerRef != null ? [...containerRef.getElementsByTagName(\"li\")] : [];\n listItems.every((listItem) => {\n if (listItem.tabIndex >= 0) {\n listItem.focus();\n return false;\n }\n return true;\n });\n };\n\n const buildHeaderLabel = () => {\n const hasSelection = getSelected(internalValues).length > 0;\n return labels?.select || !multiSelect ? (\n <HvTypography\n component=\"div\"\n variant=\"body\"\n className={cx(\n classes.placeholder,\n {\n [classes.selectionDisabled]: disabled,\n },\n !(isOpen || hasSelection) &&\n css({ color: theme.dropdown.placeholderColor })\n )}\n >\n {selectionLabel.selected}\n </HvTypography>\n ) : (\n <HvTypography\n component=\"div\"\n className={cx(classes.placeholder, {\n [classes.selectionDisabled]: disabled,\n })}\n variant=\"body\"\n >\n <b>{selectionLabel.selected}</b>\n {` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`}\n </HvTypography>\n );\n };\n\n const hasLabel = label != null;\n const hasDescription = description != null;\n\n // the error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) ||\n (status === undefined && required));\n\n const isStateInvalid = isInvalid(validationState);\n\n let errorMessageId;\n if (isStateInvalid) {\n errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n }\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={validationState}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n className={cx(\n classes.root,\n disabled && css({ color: theme.dropdown.disabledColor }),\n className\n )}\n {...others}\n >\n {(hasLabel || hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n id={setId(elementId, \"label\")}\n label={label}\n className={classes.label}\n />\n )}\n\n {hasDescription && (\n <HvInfoMessage\n id={setId(elementId, \"description\")}\n className={classes.description}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n <HvBaseDropdown\n id={setId(id, \"dropdown\")}\n classes={{\n root: cx(\n classes.dropdown,\n readOnly &&\n css({\n [`& .${staticClasses.dropdownHeader}`]: {\n border: theme.dropdown.readOnlyBorder,\n backgroundColor: theme.dropdown.readOnlyBackgroundColor,\n },\n })\n ),\n arrow: classes.arrow,\n header: cx(classes.dropdownHeader, {\n [classes.dropdownHeaderInvalid]: isStateInvalid,\n }),\n headerOpen: classes.dropdownHeaderOpen,\n }}\n expanded={isOpen}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n disablePortal={disablePortal}\n placement={placement}\n popperProps={popperProps}\n placeholder={buildHeaderLabel()}\n onToggle={handleToggle}\n onClickOutside={handleClickOutside}\n onContainerCreation={setFocusToContent}\n role=\"combobox\"\n variableWidth={variableWidth}\n aria-label={ariaLabel}\n aria-labelledby={\n [label && setId(elementId, \"label\"), ariaLabelledBy]\n .join(\" \")\n .trim() || undefined\n }\n aria-invalid={isStateInvalid ? true : undefined}\n aria-errormessage={errorMessageId}\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() || undefined\n }\n onFocus={onFocus}\n onBlur={onBlur}\n dropdownHeaderRef={dropdownHeaderRef}\n {...baseDropdownProps}\n >\n <HvDropdownList\n id={setId(elementId, \"values\")}\n classes={{\n rootList: classes.rootList,\n dropdownListContainer: classes.dropdownListContainer,\n }}\n values={internalValues}\n multiSelect={multiSelect}\n showSearch={showSearch}\n onChange={handleSelection}\n onCancel={handleCancel}\n labels={labels}\n notifyChangesOnFirstRender={notifyChangesOnFirstRender}\n hasTooltips={hasTooltips}\n singleSelectionToggle={singleSelectionToggle}\n aria-label={ariaLabel}\n aria-labelledby={hasLabel ? setId(elementId, \"label\") : undefined}\n height={height}\n maxHeight={maxHeight}\n virtualized={virtualized}\n {...listProps}\n />\n </HvBaseDropdown>\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableBorder\n className={classes.error}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n};\n"],"names":["DEFAULT_LABELS","select","undefined","selectAll","cancelLabel","applyLabel","searchPlaceholder","multiSelectionConjunction","HvDropdown","props","classes","classesProp","className","id","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","placeholder","onChange","status","statusMessage","ariaErrorMessage","onCancel","onToggle","onClickOutside","onFocus","onBlur","values","multiSelect","showSearch","expanded","defaultExpanded","notifyChangesOnFirstRender","labels","labelsProp","hasTooltips","disablePortal","singleSelectionToggle","placement","variableWidth","popperProps","height","maxHeight","virtualized","baseDropdownProps","listProps","others","useDefaultProps","cx","css","useClasses","useLabels","elementId","useUniqueId","validationState","setValidationState","useControlled","validationMessage","isOpen","setIsOpen","Boolean","selectionLabel","setSelectionLabel","useState","getSelectionLabel","internalValues","setInternalValues","useEffect","process","env","NODE_ENV","console","error","dropdownHeaderRef","useRef","handleToggle","event","open","hasSelection","getSelected","length","handleSelection","listValues","commitChanges","toggle","notifyChanges","selected","current","focus","preventScroll","handleCancel","evt","handleClickOutside","setFocusToContent","containerRef","inputs","getElementsByTagName","listItems","every","listItem","tabIndex","buildHeaderLabel","HvTypography","component","variant","selectionDisabled","color","theme","dropdown","placeholderColor","children","_jsxs","_jsx","total","hasLabel","hasDescription","canShowError","isStateInvalid","isInvalid","errorMessageId","setId","HvFormElement","root","disabledColor","labelContainer","HvLabel","HvInfoMessage","HvBaseDropdown","staticClasses","dropdownHeader","border","readOnlyBorder","backgroundColor","readOnlyBackgroundColor","arrow","header","dropdownHeaderInvalid","headerOpen","dropdownHeaderOpen","onContainerCreation","role","join","trim","HvDropdownList","rootList","dropdownListContainer","HvWarningText","disableBorder"],"mappings":";;;;;;;;;;;;;;;;;;;;AAiOA,MAAMA,iBAAwC;AAAA,EAC5CC,QAAQC;AAAAA,EACRC,WAAW;AAAA,EACXC,aAAa;AAAA,EACbC,YAAY;AAAA,EACZC,mBAAmB;AAAA,EACnBC,2BAA2B;AAC7B;AAKaC,MAAAA,aAAaA,CAACC,UAA2B;AAC9C,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IAEAC;AAAAA,IACAC;AAAAA,IAEAC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,WAAW;AAAA,IAEXC;AAAAA,IACA,cAAcC;AAAAA,IACd,mBAAmBC;AAAAA,IACnBC;AAAAA,IACA,oBAAoBC;AAAAA,IAEpBC,cAAc;AAAA,IAEdC;AAAAA,IAEAC;AAAAA,IACAC;AAAAA,IACA,qBAAqBC;AAAAA,IAErBC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IAEAC;AAAAA,IACAC;AAAAA,IAEAC;AAAAA,IACAC,cAAc;AAAA,IACdC,aAAa;AAAA,IACbC;AAAAA,IACAC,kBAAkB;AAAA,IAClBC,6BAA6B;AAAA,IAC7BC,QAAQC;AAAAA,IACRC,cAAc;AAAA,IACdC,gBAAgB;AAAA,IAChBC,wBAAwB;AAAA,IACxBC;AAAAA,IACAC,gBAAgB;AAAA,IAChBC,cAAc,CAAC;AAAA,IACfC;AAAAA,IACAC;AAAAA,IACAC,cAAc;AAAA,IACdC,oBAAoB,CAAC;AAAA,IACrBC,YAAY,CAAC;AAAA,IACb,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,cAAc5C,KAAK;AAEjC,QAAA;AAAA,IAAEC;AAAAA,IAAS4C;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,gBAAAA,WAAW7C,WAAW;AAE7C4B,QAAAA,SAASkB,UAAAA,UAAUzD,gBAAgBwC,UAAU;AAE7CkB,QAAAA,YAAYC,YAAAA,YAAY9C,IAAI,YAAY;AAE9C,QAAM,CAAC+C,iBAAiBC,kBAAkB,IAAIC,cAAAA,cAC5CrC,QACA,SACF;AAEA,QAAM,CAACsC,iBAAiB,IAAID,cAAAA,cAAcpC,eAAe,UAAU;AAE7D,QAAA,CAACsC,QAAQC,SAAS,IAAIH,cAAAA,cAAc1B,UAAU8B,QAAQ7B,eAAe,CAAC;AACtE,QAAA,CAAC8B,gBAAgBC,iBAAiB,IAAIC,eAC1CC,MAAAA,kBAAkB/B,QAAQhB,aAAaW,aAAaD,MAAM,CAC5D;AACA,QAAM,CAACsC,gBAAgBC,iBAAiB,IAAIH,eAASpC,MAAM;AAE3DwC,QAAAA,UAAU,MAAM;AACdD,sBAAkBvC,MAAM;AAAA,EAAA,GACvB,CAACA,MAAM,CAAC;AAEXwC,QAAAA,UAAU,MAAM;AACdL,sBACEE,MAAkB/B,kBAAAA,QAAQhB,aAAaW,aAAaD,MAAM,CAC5D;AAAA,KACC,CAACM,QAAQL,aAAaX,aAAaU,MAAM,CAAC;AAE7C,MAAIgB,eAAe,CAACF,UAAU2B,QAAQC,IAAIC,aAAa,cAAc;AAEnEC,YAAQC,MACN,wEACF;AAAA,EACF;AAEA,QAAMC,oBAAoBC,MAAAA;AAEpBC,QAAAA,eAAgDA,CAACC,OAAOC,SAAS;AACrEtD,yCAAWqD,OAAOC;AAElBlB,cAAUkB,IAAI;AAEd,QAAI,CAACA,MAAM;AAGTtB,yBAAmB,MAAM;AAEvB,YAAI9C,UAAU;AACZ,gBAAMqE,eAAeC,MAAAA,YAAYd,cAAc,EAAEe,SAAS;AAE1D,cAAI,CAACF,cAAc;AACV,mBAAA;AAAA,UACT;AAAA,QACF;AAEO,eAAA;AAAA,MAAA,CACR;AAAA,IACH;AAAA,EAAA;AAIF,QAAMG,kBAAmDA,CACvDC,YACAC,eACAC,QACAC,gBAAgB,SACb;;AACGC,UAAAA,WAAWP,kBAAYG,UAAU;AAEvC,QAAIC,eAAe;AACjBjB,wBAAkBgB,UAAU;AAC5BpB,wBACEE,MAAkB/B,kBAAAA,QAAQhB,aAAaW,aAAasD,UAAU,CAChE;AAEA3B,yBAAmB,MAAM;AAEnB9C,YAAAA,YAAY6E,SAASN,WAAW,GAAG;AAC9B,iBAAA;AAAA,QACT;AAEO,eAAA;AAAA,MAAA,CACR;AAAA,IACH;AACIK,QAAAA;AAAenE,2CAAWU,cAAc0D,WAAWA,SAAS,CAAC;AACjE,QAAIF,QAAQ;AACVT,mBAAa/E,QAAkB,KAAK;AAIpC6E,8BAAkBc,YAAlBd,mBAA2Be,MAAM;AAAA,QAAEC,eAAe;AAAA,MAAA;AAAA,IACpD;AAAA,EAAA;AAMF,QAAMC,eAAiDC,CAAQ,QAAA;;AAC7DrE,yCAAWqE;AAEXhB,iBAAagB,KAAY,KAAK;AAI9BlB,4BAAkBc,YAAlBd,mBAA2Be,MAAM;AAAA,MAAEC,eAAe;AAAA,IAAA;AAAA,EAAM;AAG1D,QAAMG,qBAA6DD,CAAQ,QAAA;AACzEnE,qDAAiBmE;AACjBrE,yCAAWqE;AAAAA,EAAG;AAGhB,QAAME,oBACJC,CACG,iBAAA;AACGC,UAAAA,SAASD,6CAAcE,qBAAqB;AAC9CD,QAAAA,UAAUA,OAAOf,SAAS,GAAG;AACxB,aAAA,CAAC,EAAEQ;AACV;AAAA,IACF;AACMS,UAAAA,YACJH,gBAAgB,OAAO,CAAC,GAAGA,aAAaE,qBAAqB,IAAI,CAAC,IAAI;AACxEC,cAAUC,MAAOC,CAAa,aAAA;AACxBA,UAAAA,SAASC,YAAY,GAAG;AAC1BD,iBAASX,MAAM;AACR,eAAA;AAAA,MACT;AACO,aAAA;AAAA,IAAA,CACR;AAAA,EAAA;AAGH,QAAMa,mBAAmBA,MAAM;AAC7B,UAAMvB,eAAeC,MAAAA,YAAYd,cAAc,EAAEe,SAAS;AAC1D,YAAO/C,iCAAQtC,WAAU,CAACiC,6CACvB0E,WAAAA,cAAY;AAAA,MACXC,WAAU;AAAA,MACVC,SAAQ;AAAA,MACRlG,WAAW0C,GACT5C,QAAQa,aACR;AAAA,QACE,CAACb,QAAQqG,iBAAiB,GAAG/F;AAAAA,MAE/B,GAAA,EAAEgD,UAAUoB,iBACV7B,IAAI;AAAA,QAAEyD,OAAOC,YAAAA,MAAMC,SAASC;AAAAA,MAAAA,CAAkB,CAClD;AAAA,MAAEC,UAEDjD,eAAeyB;AAAAA,IAAAA,CACJ,IAEdyB,2BAAAA,KAACT,yBAAY;AAAA,MACXC,WAAU;AAAA,MACVjG,WAAW0C,GAAG5C,QAAQa,aAAa;AAAA,QACjC,CAACb,QAAQqG,iBAAiB,GAAG/F;AAAAA,MAAAA,CAC9B;AAAA,MACD8F,SAAQ;AAAA,MAAMM,WAEdE,2BAAAA,IAAA,KAAA;AAAA,QAAAF,UAAIjD,eAAeyB;AAAAA,MAAAA,CAAY,GAC7B,IAAGrD,iCAAQhC,6BAA6B4D,eAAeoD,OAAO;AAAA,IAAA,CACpD;AAAA,EAAA;AAIlB,QAAMC,WAAWtG,SAAS;AAC1B,QAAMuG,iBAAiBpG,eAAe;AAMhCqG,QAAAA,eACJ/F,oBAAoB,SAClBF,WAAWvB,UAAawB,kBAAkBxB,UACzCuB,WAAWvB,UAAaa;AAEvB4G,QAAAA,iBAAiBC,2BAAUhE,eAAe;AAE5CiE,MAAAA;AACJ,MAAIF,gBAAgB;AAClBE,qBAAiBH,eACbI,MAAAA,MAAMpE,WAAW,OAAO,IACxB/B;AAAAA,EACN;AAEA,yCACGoG,YAAAA,eAAa;AAAA,IACZlH;AAAAA,IACAC;AAAAA,IACAW,QAAQmC;AAAAA,IACR5C;AAAAA,IACAC;AAAAA,IACAF;AAAAA,IACAH,WAAW0C,GACT5C,QAAQsH,MACRhH,YAAYuC,IAAI;AAAA,MAAEyD,OAAOC,YAAAA,MAAMC,SAASe;AAAAA,IAAe,CAAA,GACvDrH,SACF;AAAA,IAAE,GACEwC;AAAAA,IAAMgE,YAERI,YAAYC,mDACZ,OAAA;AAAA,MAAK7G,WAAWF,QAAQwH;AAAAA,MAAed,UACpCI,CAAAA,YACCF,2BAAAA,IAACa,eAAO;AAAA,QACNtH,IAAIiH,MAAAA,MAAMpE,WAAW,OAAO;AAAA,QAC5BxC;AAAAA,QACAN,WAAWF,QAAQQ;AAAAA,MAAAA,CACpB,GAGFuG,kBACCH,2BAAAA,IAACc,2BAAa;AAAA,QACZvH,IAAIiH,MAAAA,MAAMpE,WAAW,aAAa;AAAA,QAClC9C,WAAWF,QAAQW;AAAAA,QAAY+F,UAE9B/F;AAAAA,MAAAA,CACY,CAChB;AAAA,IAAA,CACE,GAEPiG,2BAAAA,IAACe,6BAAc;AAAA,MACbxH,IAAIiH,MAAAA,MAAMjH,IAAI,UAAU;AAAA,MACxBH,SAAS;AAAA,QACPsH,MAAM1E,GACJ5C,QAAQwG,UACRjG,YACEsC,IAAI;AAAA,UACF,CAAE,MAAK+E,8BAAcC,gBAAgB,GAAG;AAAA,YACtCC,QAAQvB,YAAAA,MAAMC,SAASuB;AAAAA,YACvBC,iBAAiBzB,YAAAA,MAAMC,SAASyB;AAAAA,UAClC;AAAA,QAAA,CACD,CACL;AAAA,QACAC,OAAOlI,QAAQkI;AAAAA,QACfC,QAAQvF,GAAG5C,QAAQ6H,gBAAgB;AAAA,UACjC,CAAC7H,QAAQoI,qBAAqB,GAAGnB;AAAAA,QAAAA,CAClC;AAAA,QACDoB,YAAYrI,QAAQsI;AAAAA,MACtB;AAAA,MACA5G,UAAU4B;AAAAA,MACVhD;AAAAA,MACAC;AAAAA,MACAF;AAAAA,MACA2B;AAAAA,MACAE;AAAAA,MACAE;AAAAA,MACAvB,aAAaoF,iBAAiB;AAAA,MAC9B9E,UAAUoD;AAAAA,MACVnD,gBAAgBoE;AAAAA,MAChB+C,qBAAqB9C;AAAAA,MACrB+C,MAAK;AAAA,MACLrG;AAAAA,MACA,cAAY1B;AAAAA,MACZ,mBACE,CAACD,SAAS4G,YAAMpE,WAAW,OAAO,GAAGtC,cAAc,EAChD+H,KAAK,GAAG,EACRC,UAAUlJ;AAAAA,MAEf,gBAAcyH,iBAAiB,OAAOzH;AAAAA,MACtC,qBAAmB2H;AAAAA,MACnB,oBACE,CAACxG,eAAeyG,YAAMpE,WAAW,aAAa,GAAGpC,eAAe,EAC7D6H,KAAK,GAAG,EACRC,UAAUlJ;AAAAA,MAEf6B;AAAAA,MACAC;AAAAA,MACA+C;AAAAA,MAAqC,GACjC7B;AAAAA,MAAiBkE,yCAEpBiC,qBAAc;AAAA,QACbxI,IAAIiH,MAAAA,MAAMpE,WAAW,QAAQ;AAAA,QAC7BhD,SAAS;AAAA,UACP4I,UAAU5I,QAAQ4I;AAAAA,UAClBC,uBAAuB7I,QAAQ6I;AAAAA,QACjC;AAAA,QACAtH,QAAQsC;AAAAA,QACRrC;AAAAA,QACAC;AAAAA,QACAX,UAAU+D;AAAAA,QACV3D,UAAUoE;AAAAA,QACVzD;AAAAA,QACAD;AAAAA,QACAG;AAAAA,QACAE;AAAAA,QACA,cAAYxB;AAAAA,QACZ,mBAAiBqG,WAAWM,MAAMpE,MAAAA,WAAW,OAAO,IAAIxD;AAAAA,QACxD6C;AAAAA,QACAC;AAAAA,QACAC;AAAAA,QAAyB,GACrBE;AAAAA,MAAAA,CACL;AAAA,IAAA,CACa,GACfuE,gBACCJ,2BAAAA,IAACkC,2BAAa;AAAA,MACZ3I,IAAIiH,MAAAA,MAAMpE,WAAW,OAAO;AAAA,MAC5B+F,eAAa;AAAA,MACb7I,WAAWF,QAAQoE;AAAAA,MAAMsC,UAExBrD;AAAAA,IAAAA,CACY,CAChB;AAAA,EAAA,CACY;AAEnB;;;"}
|
|
1
|
+
{"version":3,"file":"Dropdown.cjs","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { PopperProps } from \"@mui/material\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { setId } from \"@core/utils/setId\";\nimport { useLabels, useUniqueId, useControlled } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport {\n HvBaseDropdown,\n HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvListValue } from \"@core/components/List\";\nimport {\n isInvalid,\n HvInfoMessage,\n HvWarningText,\n HvFormElement,\n HvLabel,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { getSelected, getSelectionLabel } from \"./utils\";\nimport { HvDropdownList, HvDropdownListProps } from \"./List\";\nimport { staticClasses, useClasses } from \"./Dropdown.styles\";\nimport { HvDropdownLabelsProps, HvDropdownStatus } from \"./types\";\n\nexport { staticClasses as dropdownClasses };\n\nexport type HvDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownProps\n extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n /**\n * Class names to be applied.\n */\n className?: string;\n /**\n * A Jss Object used to override or extend the component styles applied.\n */\n classes?: HvDropdownClasses;\n /**\n * Id to be applied to the form element root node.\n */\n id?: string;\n /**\n * The form element name.\n */\n name?: string;\n /**\n * The label of the form element.\n *\n * The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be provided instead.\n */\n label?: any;\n /**\n * @ignore\n */\n \"aria-label\"?: string;\n /**\n * @ignore\n */\n \"aria-labelledby\"?: string;\n /**\n * Provide additional descriptive text for the form element.\n */\n description?: any;\n /**\n * @ignore\n */\n \"aria-describedby\"?: string;\n /**\n * The placeholder value when nothing is selected.\n */\n placeholder?: string;\n\n /**\n * Indicates that the form element is disabled.\n */\n disabled?: boolean;\n /**\n * Indicates that the form element is in read only mode.\n */\n readOnly?: boolean;\n /**\n * Indicates that user input is required on the form element.\n */\n required?: boolean;\n /**\n * The status of the form 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?: HvDropdownStatus;\n /**\n * The error message to show when the validation status is \"invalid\".\n *\n * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n */\n statusMessage?: any;\n /**\n * Identifies the element that provides an error message for the dropdown.\n *\n * Will only be used when the validation status is invalid.\n */\n \"aria-errormessage\"?: string;\n\n /**\n * The callback fired when the value changes.\n */\n onChange?: (selected: HvListValue | HvListValue[] | undefined) => void;\n\n /**\n * The list to be rendered by the dropdown.\n */\n values?: HvListValue[];\n /**\n * If `true` the dropdown is multiSelect, if `false` the dropdown is single select.\n */\n multiSelect?: boolean;\n /**\n * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.\n */\n showSearch?: boolean;\n /**\n * If `true` the dropdown starts opened if `false` it starts closed.\n */\n expanded?: boolean;\n /**\n * When uncontrolled, defines the initial expanded state.\n */\n defaultExpanded?: boolean;\n /**\n * If 'true' the dropdown will notify on the first render.\n */\n notifyChangesOnFirstRender?: boolean;\n /**\n * An object containing all the labels for the dropdown.\n */\n labels?: HvDropdownLabelsProps;\n /**\n * If `true` the dropdown will show tooltips when user mouseenter text in list\n */\n hasTooltips?: boolean;\n /**\n * Disable the portal behavior.\n * The children stay within it's parent DOM hierarchy.\n */\n disablePortal?: boolean;\n /**\n * If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n * Defaults to `false`.\n */\n variableWidth?: boolean;\n /**\n * If `true`, selection can be toggled when single selection.\n */\n singleSelectionToggle?: boolean;\n /**\n * Placement of the dropdown.\n */\n placement?: \"left\" | \"right\";\n /**\n * An object containing props to be wired to the popper component.\n */\n popperProps?: Partial<PopperProps>;\n\n /**\n * Callback called when the user cancels the changes.\n *\n * Called when the cancel button is used and when the user clicks outside the open container.\n *\n * @param {object} event The event source of the callback.\n */\n onCancel?: (event: Event) => void;\n /**\n * Callback called when dropdown changes the expanded state.\n *\n * @param {object} event The event source of the callback.\n * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).\n */\n onToggle?: (event: Event, open: boolean) => void;\n /**\n * Callback called when the user clicks outside the open container.\n *\n * @param {object} event The event source of the callback.\n */\n onClickOutside?: (event: Event) => void;\n /**\n * @ignore\n */\n onFocus?: React.FocusEventHandler<any>;\n /**\n * @ignore\n */\n onBlur?: React.FocusEventHandler<any>;\n /**\n * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n */\n height?: number;\n /**\n * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n */\n maxHeight?: number;\n /**\n * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n */\n virtualized?: boolean;\n /**\n * Extra props passed to the dropdown.\n */\n baseDropdownProps?: HvBaseDropdownProps;\n /**\n * Extra props passed to the list.\n */\n listProps?: HvDropdownListProps;\n}\n\nconst DEFAULT_LABELS: HvDropdownLabelsProps = {\n select: undefined,\n selectAll: \"All\",\n cancelLabel: \"Cancel\",\n applyLabel: \"Apply\",\n searchPlaceholder: \"Search\",\n multiSelectionConjunction: \"/\",\n};\n\n/**\n * A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list.\n */\nexport const HvDropdown = (props: HvDropdownProps) => {\n const {\n classes: classesProp,\n className,\n\n id,\n name,\n\n required = false,\n disabled = false,\n readOnly = false,\n\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n\n placeholder = \"Select...\",\n\n onChange,\n\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n\n onCancel,\n onToggle,\n onClickOutside,\n\n onFocus,\n onBlur,\n\n values,\n multiSelect = false,\n showSearch = false,\n expanded,\n defaultExpanded = false,\n notifyChangesOnFirstRender = false,\n labels: labelsProp,\n hasTooltips = false,\n disablePortal = false,\n singleSelectionToggle = true,\n placement,\n variableWidth = false,\n popperProps = {},\n height,\n maxHeight,\n virtualized = false,\n baseDropdownProps = {},\n listProps = {},\n ...others\n } = useDefaultProps(\"HvDropdown\", props);\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const elementId = useUniqueId(id, \"hvdropdown\");\n\n const [validationState, setValidationState] = useControlled(\n status,\n \"standBy\"\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n const [selectionLabel, setSelectionLabel] = useState(\n getSelectionLabel(labels, placeholder, multiSelect, values)\n );\n const [internalValues, setInternalValues] = useState(values);\n\n useEffect(() => {\n setInternalValues(values);\n }, [values]);\n\n useEffect(() => {\n setSelectionLabel(\n getSelectionLabel(labels, placeholder, multiSelect, values)\n );\n }, [labels, multiSelect, placeholder, values]);\n\n if (virtualized && !height && process.env.NODE_ENV !== \"production\") {\n // eslint-disable-next-line no-console\n console.error(\n \"Dropdown/List in virtualized mode requires a height. Please define it.\"\n );\n }\n\n const dropdownHeaderRef = useRef<HTMLDivElement>();\n\n const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (event, open) => {\n onToggle?.(event, open);\n\n setIsOpen(open);\n\n if (!open) {\n // also run built-in validation when closing without changes\n // as the user \"touched\" the input\n setValidationState(() => {\n // this will only run if status is uncontrolled\n if (required) {\n const hasSelection = getSelected(internalValues).length > 0;\n\n if (!hasSelection) {\n return \"invalid\";\n }\n }\n\n return \"valid\";\n });\n }\n };\n\n /** Applies the selected values to the state */\n const handleSelection: HvDropdownListProps[\"onChange\"] = (\n listValues,\n commitChanges,\n toggle,\n notifyChanges = true\n ) => {\n const selected = getSelected(listValues);\n\n if (commitChanges) {\n setInternalValues(listValues);\n setSelectionLabel(\n getSelectionLabel(labels, placeholder, multiSelect, listValues)\n );\n\n setValidationState(() => {\n // this will only run if status is uncontrolled\n if (required && selected.length === 0) {\n return \"invalid\";\n }\n\n return \"valid\";\n });\n }\n if (notifyChanges) onChange?.(multiSelect ? selected : selected[0]);\n if (toggle) {\n handleToggle(undefined as any, false);\n\n // focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n dropdownHeaderRef.current?.focus({ preventScroll: true });\n }\n };\n\n /**\n * Handles the `Cancel` action. Both single and ranged modes are handled here.\n */\n const handleCancel: HvDropdownListProps[\"onCancel\"] = (evt) => {\n onCancel?.(evt as any);\n\n handleToggle(evt as any, false);\n\n // focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n dropdownHeaderRef.current?.focus({ preventScroll: true });\n };\n\n const handleClickOutside: HvBaseDropdownProps[\"onClickOutside\"] = (evt) => {\n onClickOutside?.(evt);\n onCancel?.(evt);\n };\n\n const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n containerRef\n ) => {\n const inputs = containerRef?.getElementsByTagName(\"input\");\n if (inputs && inputs.length > 0) {\n inputs[0].focus();\n return;\n }\n const listItems =\n containerRef != null ? [...containerRef.getElementsByTagName(\"li\")] : [];\n listItems.every((listItem) => {\n if (listItem.tabIndex >= 0) {\n listItem.focus();\n return false;\n }\n return true;\n });\n };\n\n const buildHeaderLabel = () => {\n const hasSelection = getSelected(internalValues).length > 0;\n return labels?.select || !multiSelect ? (\n <HvTypography\n component=\"div\"\n variant=\"body\"\n className={cx(\n classes.placeholder,\n {\n [classes.selectionDisabled]: disabled,\n },\n !(isOpen || hasSelection) &&\n css({ color: theme.dropdown.placeholderColor })\n )}\n >\n {selectionLabel.selected}\n </HvTypography>\n ) : (\n <HvTypography\n component=\"div\"\n className={cx(classes.placeholder, {\n [classes.selectionDisabled]: disabled,\n })}\n variant=\"body\"\n >\n <b>{selectionLabel.selected}</b>\n {` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`}\n </HvTypography>\n );\n };\n\n const hasLabel = label != null;\n const hasDescription = description != null;\n\n // the error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) ||\n (status === undefined && required));\n\n const isStateInvalid = isInvalid(validationState);\n\n let errorMessageId;\n if (isStateInvalid) {\n errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n }\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={validationState}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n className={cx(\n classes.root,\n disabled && css({ color: theme.dropdown.disabledColor }),\n className\n )}\n {...others}\n >\n {(hasLabel || hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n id={setId(elementId, \"label\")}\n label={label}\n className={classes.label}\n />\n )}\n\n {hasDescription && (\n <HvInfoMessage\n id={setId(elementId, \"description\")}\n className={classes.description}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n <HvBaseDropdown\n id={setId(id, \"dropdown\")}\n classes={{\n root: cx(\n classes.dropdown,\n readOnly &&\n css({\n [`& .${staticClasses.dropdownHeader}`]: {\n border: theme.dropdown.readOnlyBorder,\n backgroundColor: theme.dropdown.readOnlyBackgroundColor,\n },\n })\n ),\n arrow: classes.arrow,\n header: cx(classes.dropdownHeader, {\n [classes.dropdownHeaderInvalid]: isStateInvalid,\n }),\n headerOpen: classes.dropdownHeaderOpen,\n }}\n expanded={isOpen}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n disablePortal={disablePortal}\n placement={placement}\n popperProps={popperProps}\n placeholder={buildHeaderLabel()}\n onToggle={handleToggle}\n onClickOutside={handleClickOutside}\n onContainerCreation={setFocusToContent}\n role=\"combobox\"\n variableWidth={variableWidth}\n aria-label={ariaLabel}\n aria-labelledby={\n [label && setId(elementId, \"label\"), ariaLabelledBy]\n .join(\" \")\n .trim() || undefined\n }\n aria-invalid={isStateInvalid ? true : undefined}\n aria-errormessage={errorMessageId}\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() || undefined\n }\n onFocus={onFocus}\n onBlur={onBlur}\n dropdownHeaderRef={dropdownHeaderRef}\n {...baseDropdownProps}\n >\n <HvDropdownList\n id={setId(elementId, \"values\")}\n classes={{\n rootList: classes.rootList,\n dropdownListContainer: classes.dropdownListContainer,\n }}\n values={internalValues}\n multiSelect={multiSelect}\n showSearch={showSearch}\n onChange={handleSelection}\n onCancel={handleCancel}\n labels={labels}\n notifyChangesOnFirstRender={notifyChangesOnFirstRender}\n hasTooltips={hasTooltips}\n singleSelectionToggle={singleSelectionToggle}\n aria-label={ariaLabel}\n aria-labelledby={hasLabel ? setId(elementId, \"label\") : undefined}\n height={height}\n maxHeight={maxHeight}\n virtualized={virtualized}\n {...listProps}\n />\n </HvBaseDropdown>\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableBorder\n className={classes.error}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n};\n"],"names":["DEFAULT_LABELS","select","undefined","selectAll","cancelLabel","applyLabel","searchPlaceholder","multiSelectionConjunction","HvDropdown","props","classes","classesProp","className","id","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","placeholder","onChange","status","statusMessage","ariaErrorMessage","onCancel","onToggle","onClickOutside","onFocus","onBlur","values","multiSelect","showSearch","expanded","defaultExpanded","notifyChangesOnFirstRender","labels","labelsProp","hasTooltips","disablePortal","singleSelectionToggle","placement","variableWidth","popperProps","height","maxHeight","virtualized","baseDropdownProps","listProps","others","useDefaultProps","cx","css","useClasses","useLabels","elementId","useUniqueId","validationState","setValidationState","useControlled","validationMessage","isOpen","setIsOpen","Boolean","selectionLabel","setSelectionLabel","useState","getSelectionLabel","internalValues","setInternalValues","useEffect","process","env","NODE_ENV","console","error","dropdownHeaderRef","useRef","handleToggle","event","open","hasSelection","getSelected","length","handleSelection","listValues","commitChanges","toggle","notifyChanges","selected","current","focus","preventScroll","handleCancel","evt","handleClickOutside","setFocusToContent","containerRef","inputs","getElementsByTagName","listItems","every","listItem","tabIndex","buildHeaderLabel","HvTypography","component","variant","selectionDisabled","color","theme","dropdown","placeholderColor","children","_jsxs","_jsx","total","hasLabel","hasDescription","canShowError","isStateInvalid","isInvalid","errorMessageId","setId","HvFormElement","root","disabledColor","labelContainer","HvLabel","HvInfoMessage","HvBaseDropdown","staticClasses","dropdownHeader","border","readOnlyBorder","backgroundColor","readOnlyBackgroundColor","arrow","header","dropdownHeaderInvalid","headerOpen","dropdownHeaderOpen","onContainerCreation","role","join","trim","HvDropdownList","rootList","dropdownListContainer","HvWarningText","disableBorder"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.cjs","sources":["../../../../../src/components/Dropdown/List/List.tsx"],"sourcesContent":["import { MouseEvent, useContext, useEffect, useState } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvCheckBox } from \"@core/components/CheckBox\";\nimport { HvInput } from \"@core/components/Input\";\nimport { HvList, HvListProps, HvListValue } from \"@core/components/List\";\nimport { HvActionBar } from \"@core/components/ActionBar\";\nimport BaseDropdownContext from \"@core/components/BaseDropdown/BaseDropdownContext\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./List.styles\";\nimport { getSelected } from \"../utils\";\nimport { HvDropdownLabelsProps } from \"../types\";\n\nexport { staticClasses as dropdownListClasses };\n\nexport type HvDropdownListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownListProps {\n /**\n * Id to be applied to the root node.\n */\n id?: string;\n /**\n * A Jss Object used to override or extend the component styles.\n */\n classes?: HvDropdownListClasses;\n /**\n * The list to be rendered.\n */\n values?: HvListValue[];\n /**\n * If true renders a multi select list.\n */\n multiSelect?: boolean;\n /**\n * If true renders the search component.\n */\n showSearch?: boolean;\n /**\n * A function to be executed whenever a item is selected in the list\n * or the Apply button is activated (when `multiSelect` is `true`).\n */\n onChange: (\n /** An array containing the selected values */\n listValues: HvListValue[],\n /** If `true` the selection if finally committed the dropdown header text should reflect the new selection */\n commitChanges: boolean,\n /** If `true` the dropdown should toggle it's current state */\n toggle: boolean,\n /** If `true` the dropdown will call onChange */\n notifyChanges: boolean\n ) => void;\n /**\n * A function to be executed whenever the Cancel button is activated.\n */\n onCancel: (event: MouseEvent) => void;\n /**\n * An object containing all the labels for the dropdown.\n */\n labels?: HvDropdownLabelsProps;\n /**\n * If 'true' the dropdown will notify on the first render.\n */\n notifyChangesOnFirstRender?: boolean;\n /**\n * If `true` the dropdown will show tooltips when user mouseenter text in list\n */\n hasTooltips?: boolean;\n /**\n * If `true`, selection can be toggled when single selection.\n */\n singleSelectionToggle?: boolean;\n /**\n * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n */\n height?: number;\n /**\n * Experimental. Max height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class.\n */\n maxHeight?: number;\n /**\n * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n */\n virtualized?: boolean;\n}\n\n/**\n * The values property was being deeply cloned. That created a significant performance\n * hit when the values contained complex properties' values, like React Nodes.\n *\n * For minimizing the impact of removing the clone, a shallow clone of the array and its\n * objects is performed instead. That should have the same effect in the majority of the\n * cases, where the properties' values are primitive.\n */\nconst clone = (values: HvListValue[]) => values.map((value) => ({ ...value }));\n\n/**\n * Set all hidden's to false.\n */\nconst cleanHidden = (lst: HvListValue[]) =>\n lst.map((item) => ({ ...item, isHidden: false }));\n\nconst valuesExist = (values: HvListValue[]) =>\n !isNil(values) && values?.length > 0;\n\nexport const HvDropdownList = ({\n id,\n classes: classesProp,\n values = [],\n multiSelect = false,\n showSearch = false,\n onChange,\n onCancel,\n labels,\n notifyChangesOnFirstRender = false,\n hasTooltips = false,\n singleSelectionToggle,\n height: dropdownHeight,\n maxHeight,\n virtualized = false,\n ...others\n}: HvDropdownListProps) => {\n const { classes, cx, css } = useClasses(classesProp);\n\n const [searchStr, setSearchStr] = useState<string>(\"\");\n const [list, setList] = useState<HvListValue[]>(clone(values));\n const [allSelected, setAllSelected] = useState<boolean>(false);\n const [anySelected, setAnySelected] = useState<boolean>(false);\n const { width, height } = useContext(BaseDropdownContext);\n\n const newLabels = {\n selectAll: labels?.selectAll,\n selectionConjunction: labels?.multiSelectionConjunction,\n };\n\n /**\n * Update states associated with select all.\n */\n const updateSelectAll = (listValues: HvListValue[]) => {\n if (!listValues) return;\n const nbrSelected = getSelected(listValues).length;\n const hasSelection = nbrSelected > 0;\n const allSelect = nbrSelected === listValues.length;\n\n setAnySelected(hasSelection);\n setAllSelected(hasSelection && allSelect);\n };\n\n /**\n * After the first render, call onChange if notifyChangesOnFirstRender.\n */\n useEffect(() => {\n if (!valuesExist(values)) return;\n setList(clone(values));\n updateSelectAll(values);\n if (notifyChangesOnFirstRender) {\n onChange?.(values, false, false, true);\n }\n }, [values, notifyChangesOnFirstRender, onChange]);\n\n /**\n * Sets the filtered values to the state.\n *\n * @param {String} str - The value that is being looked.\n */\n const handleSearch = (str: string) => {\n const results = list\n ? list.filter(\n ({\n searchValue,\n label,\n value,\n }: {\n searchValue?: any;\n label?: any;\n value?: any;\n }) => {\n let stringValue = \"\";\n if (\n typeof searchValue === \"string\" ||\n searchValue instanceof String\n ) {\n stringValue = searchValue.toLowerCase();\n } else if (typeof label === \"string\" || label instanceof String) {\n stringValue = label.toLowerCase();\n } else if (typeof value === \"string\" || value instanceof String) {\n stringValue = value.toLowerCase();\n }\n\n return stringValue.indexOf(str.toLowerCase()) >= 0;\n }\n )\n : null;\n\n if (!isNil(results)) {\n const newList = list.map((elem) => {\n const isResult = results.find((result) => result.label === elem.label);\n return { ...elem, isHidden: !isResult };\n });\n\n setList(newList);\n setSearchStr(str);\n }\n return str;\n };\n\n /**\n * Create search element.\n *\n * @returns {*}\n */\n const renderSearch = () => (\n <div className={classes.searchContainer}>\n <HvInput\n id={setId(id, \"search\")}\n type=\"search\"\n value={searchStr}\n placeholder={labels?.searchPlaceholder}\n aria-label={labels?.searchPlaceholder}\n onChange={(event, str) => handleSearch(str)}\n />\n </div>\n );\n\n /**\n * Select all the values inside the dropdown.\n *\n */\n const handleSelectAll = () => {\n const newList = list.map((elem) => ({ ...elem, selected: !anySelected }));\n setList(newList);\n updateSelectAll(newList);\n };\n\n /**\n * Create selecteAll component.\n *\n * @returns {*}\n */\n const renderSelectAll = () => {\n const selectAll = labels?.selectAll;\n const multiSelectionConjunction = labels?.multiSelectionConjunction;\n const nbrSelected = getSelected(list).length;\n\n const defaultLabel = (\n <HvTypography component=\"span\">\n {nbrSelected > 0 ? (\n <>\n <b>{nbrSelected}</b>\n {` ${multiSelectionConjunction} ${list.length}`}\n </>\n ) : (\n <>\n <b>{selectAll}</b>\n {` (${list.length})`}\n </>\n )}\n </HvTypography>\n );\n\n return (\n <div className={classes.selectAllContainer}>\n <HvCheckBox\n id={setId(id, \"select-all\")}\n label={defaultLabel}\n onChange={() => handleSelectAll()}\n classes={{\n container: classes.selection,\n }}\n className={classes.selectAll}\n indeterminate={anySelected && !allSelected}\n checked={allSelected}\n />\n </div>\n );\n };\n\n /**\n * When selecting the state list is updated with the corresponding selection.\n *\n * @param listValues - elements selected.\n */\n const onSelection: HvListProps[\"onChange\"] = (listValues) => {\n if (!multiSelect) {\n onChange(cleanHidden(listValues), true, true, true);\n } else {\n updateSelectAll(listValues);\n setList(clone(listValues));\n }\n };\n\n /**\n * Render action buttons.\n */\n const renderActions = () => {\n const applyLabel = labels?.applyLabel;\n const cancelLabel = labels?.cancelLabel;\n return (\n <HvActionBar id={setId(id, \"actions\")}>\n <HvButton\n id={setId(id, \"actions-apply\")}\n onClick={() => onChange(cleanHidden(list), true, true, true)}\n variant=\"primaryGhost\"\n >\n {applyLabel}\n </HvButton>\n <HvButton\n id={setId(id, \"actions-cancel\")}\n onClick={onCancel}\n variant=\"primaryGhost\"\n >\n {cancelLabel}\n </HvButton>\n </HvActionBar>\n );\n };\n\n const showList = valuesExist(values);\n\n return (\n <div className={classes.rootList}>\n <div className={classes.listBorderDown} />\n <div className={classes.listContainer}>\n {showSearch && renderSearch()}\n {showList && multiSelect && renderSelectAll()}\n {showList && (\n <HvList\n id={setId(id, \"list\")}\n classes={{\n root: cx(\n classes.dropdownListContainer,\n css({\n maxWidth: width,\n maxHeight:\n maxHeight ??\n `calc(${height}px - 32px - ${theme.space.xs} - ${theme.space.sm})`,\n overflow: \"auto\",\n padding: 5,\n }),\n dropdownHeight &&\n css({\n height: dropdownHeight,\n }),\n virtualized &&\n css({\n maxWidth: \"inherit\",\n maxHeight: \"inherit\",\n overflow: \"inherit\",\n padding: 0,\n })\n ),\n }}\n values={list}\n multiSelect={multiSelect}\n useSelector={multiSelect}\n showSelectAll={false}\n onChange={onSelection}\n labels={newLabels}\n hasTooltips={hasTooltips}\n selectable\n condensed\n singleSelectionToggle={singleSelectionToggle}\n height={dropdownHeight}\n virtualized={virtualized}\n {...others}\n />\n )}\n </div>\n {showList && multiSelect ? renderActions() : null}\n </div>\n );\n};\n"],"names":["clone","values","map","value","cleanHidden","lst","item","isHidden","valuesExist","isNil","length","HvDropdownList","id","classes","classesProp","multiSelect","showSearch","onChange","onCancel","labels","notifyChangesOnFirstRender","hasTooltips","singleSelectionToggle","height","dropdownHeight","maxHeight","virtualized","others","cx","css","useClasses","searchStr","setSearchStr","useState","list","setList","allSelected","setAllSelected","anySelected","setAnySelected","width","useContext","BaseDropdownContext","newLabels","selectAll","selectionConjunction","multiSelectionConjunction","updateSelectAll","listValues","nbrSelected","getSelected","hasSelection","allSelect","useEffect","handleSearch","str","results","filter","searchValue","label","stringValue","String","toLowerCase","indexOf","newList","elem","isResult","find","result","renderSearch","_jsx","className","searchContainer","children","HvInput","setId","type","placeholder","searchPlaceholder","event","handleSelectAll","selected","renderSelectAll","defaultLabel","HvTypography","component","_jsxs","_Fragment","selectAllContainer","HvCheckBox","container","selection","indeterminate","checked","onSelection","renderActions","applyLabel","cancelLabel","HvActionBar","HvButton","onClick","variant","showList","rootList","listBorderDown","listContainer","HvList","root","dropdownListContainer","maxWidth","theme","space","xs","sm","overflow","padding","useSelector","showSelectAll","selectable","condensed"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"List.cjs","sources":["../../../../../src/components/Dropdown/List/List.tsx"],"sourcesContent":["import { MouseEvent, useContext, useEffect, useState } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvCheckBox } from \"@core/components/CheckBox\";\nimport { HvInput } from \"@core/components/Input\";\nimport { HvList, HvListProps, HvListValue } from \"@core/components/List\";\nimport { HvActionBar } from \"@core/components/ActionBar\";\nimport BaseDropdownContext from \"@core/components/BaseDropdown/BaseDropdownContext\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./List.styles\";\nimport { getSelected } from \"../utils\";\nimport { HvDropdownLabelsProps } from \"../types\";\n\nexport { staticClasses as dropdownListClasses };\n\nexport type HvDropdownListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownListProps {\n /**\n * Id to be applied to the root node.\n */\n id?: string;\n /**\n * A Jss Object used to override or extend the component styles.\n */\n classes?: HvDropdownListClasses;\n /**\n * The list to be rendered.\n */\n values?: HvListValue[];\n /**\n * If true renders a multi select list.\n */\n multiSelect?: boolean;\n /**\n * If true renders the search component.\n */\n showSearch?: boolean;\n /**\n * A function to be executed whenever a item is selected in the list\n * or the Apply button is activated (when `multiSelect` is `true`).\n */\n onChange: (\n /** An array containing the selected values */\n listValues: HvListValue[],\n /** If `true` the selection if finally committed the dropdown header text should reflect the new selection */\n commitChanges: boolean,\n /** If `true` the dropdown should toggle it's current state */\n toggle: boolean,\n /** If `true` the dropdown will call onChange */\n notifyChanges: boolean\n ) => void;\n /**\n * A function to be executed whenever the Cancel button is activated.\n */\n onCancel: (event: MouseEvent) => void;\n /**\n * An object containing all the labels for the dropdown.\n */\n labels?: HvDropdownLabelsProps;\n /**\n * If 'true' the dropdown will notify on the first render.\n */\n notifyChangesOnFirstRender?: boolean;\n /**\n * If `true` the dropdown will show tooltips when user mouseenter text in list\n */\n hasTooltips?: boolean;\n /**\n * If `true`, selection can be toggled when single selection.\n */\n singleSelectionToggle?: boolean;\n /**\n * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n */\n height?: number;\n /**\n * Experimental. Max height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class.\n */\n maxHeight?: number;\n /**\n * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n */\n virtualized?: boolean;\n}\n\n/**\n * The values property was being deeply cloned. That created a significant performance\n * hit when the values contained complex properties' values, like React Nodes.\n *\n * For minimizing the impact of removing the clone, a shallow clone of the array and its\n * objects is performed instead. That should have the same effect in the majority of the\n * cases, where the properties' values are primitive.\n */\nconst clone = (values: HvListValue[]) => values.map((value) => ({ ...value }));\n\n/**\n * Set all hidden's to false.\n */\nconst cleanHidden = (lst: HvListValue[]) =>\n lst.map((item) => ({ ...item, isHidden: false }));\n\nconst valuesExist = (values: HvListValue[]) =>\n !isNil(values) && values?.length > 0;\n\nexport const HvDropdownList = ({\n id,\n classes: classesProp,\n values = [],\n multiSelect = false,\n showSearch = false,\n onChange,\n onCancel,\n labels,\n notifyChangesOnFirstRender = false,\n hasTooltips = false,\n singleSelectionToggle,\n height: dropdownHeight,\n maxHeight,\n virtualized = false,\n ...others\n}: HvDropdownListProps) => {\n const { classes, cx, css } = useClasses(classesProp);\n\n const [searchStr, setSearchStr] = useState<string>(\"\");\n const [list, setList] = useState<HvListValue[]>(clone(values));\n const [allSelected, setAllSelected] = useState<boolean>(false);\n const [anySelected, setAnySelected] = useState<boolean>(false);\n const { width, height } = useContext(BaseDropdownContext);\n\n const newLabels = {\n selectAll: labels?.selectAll,\n selectionConjunction: labels?.multiSelectionConjunction,\n };\n\n /**\n * Update states associated with select all.\n */\n const updateSelectAll = (listValues: HvListValue[]) => {\n if (!listValues) return;\n const nbrSelected = getSelected(listValues).length;\n const hasSelection = nbrSelected > 0;\n const allSelect = nbrSelected === listValues.length;\n\n setAnySelected(hasSelection);\n setAllSelected(hasSelection && allSelect);\n };\n\n /**\n * After the first render, call onChange if notifyChangesOnFirstRender.\n */\n useEffect(() => {\n if (!valuesExist(values)) return;\n setList(clone(values));\n updateSelectAll(values);\n if (notifyChangesOnFirstRender) {\n onChange?.(values, false, false, true);\n }\n }, [values, notifyChangesOnFirstRender, onChange]);\n\n /**\n * Sets the filtered values to the state.\n *\n * @param {String} str - The value that is being looked.\n */\n const handleSearch = (str: string) => {\n const results = list\n ? list.filter(\n ({\n searchValue,\n label,\n value,\n }: {\n searchValue?: any;\n label?: any;\n value?: any;\n }) => {\n let stringValue = \"\";\n if (\n typeof searchValue === \"string\" ||\n searchValue instanceof String\n ) {\n stringValue = searchValue.toLowerCase();\n } else if (typeof label === \"string\" || label instanceof String) {\n stringValue = label.toLowerCase();\n } else if (typeof value === \"string\" || value instanceof String) {\n stringValue = value.toLowerCase();\n }\n\n return stringValue.indexOf(str.toLowerCase()) >= 0;\n }\n )\n : null;\n\n if (!isNil(results)) {\n const newList = list.map((elem) => {\n const isResult = results.find((result) => result.label === elem.label);\n return { ...elem, isHidden: !isResult };\n });\n\n setList(newList);\n setSearchStr(str);\n }\n return str;\n };\n\n /**\n * Create search element.\n *\n * @returns {*}\n */\n const renderSearch = () => (\n <div className={classes.searchContainer}>\n <HvInput\n id={setId(id, \"search\")}\n type=\"search\"\n value={searchStr}\n placeholder={labels?.searchPlaceholder}\n aria-label={labels?.searchPlaceholder}\n onChange={(event, str) => handleSearch(str)}\n />\n </div>\n );\n\n /**\n * Select all the values inside the dropdown.\n *\n */\n const handleSelectAll = () => {\n const newList = list.map((elem) => ({ ...elem, selected: !anySelected }));\n setList(newList);\n updateSelectAll(newList);\n };\n\n /**\n * Create selecteAll component.\n *\n * @returns {*}\n */\n const renderSelectAll = () => {\n const selectAll = labels?.selectAll;\n const multiSelectionConjunction = labels?.multiSelectionConjunction;\n const nbrSelected = getSelected(list).length;\n\n const defaultLabel = (\n <HvTypography component=\"span\">\n {nbrSelected > 0 ? (\n <>\n <b>{nbrSelected}</b>\n {` ${multiSelectionConjunction} ${list.length}`}\n </>\n ) : (\n <>\n <b>{selectAll}</b>\n {` (${list.length})`}\n </>\n )}\n </HvTypography>\n );\n\n return (\n <div className={classes.selectAllContainer}>\n <HvCheckBox\n id={setId(id, \"select-all\")}\n label={defaultLabel}\n onChange={() => handleSelectAll()}\n classes={{\n container: classes.selection,\n }}\n className={classes.selectAll}\n indeterminate={anySelected && !allSelected}\n checked={allSelected}\n />\n </div>\n );\n };\n\n /**\n * When selecting the state list is updated with the corresponding selection.\n *\n * @param listValues - elements selected.\n */\n const onSelection: HvListProps[\"onChange\"] = (listValues) => {\n if (!multiSelect) {\n onChange(cleanHidden(listValues), true, true, true);\n } else {\n updateSelectAll(listValues);\n setList(clone(listValues));\n }\n };\n\n /**\n * Render action buttons.\n */\n const renderActions = () => {\n const applyLabel = labels?.applyLabel;\n const cancelLabel = labels?.cancelLabel;\n return (\n <HvActionBar id={setId(id, \"actions\")}>\n <HvButton\n id={setId(id, \"actions-apply\")}\n onClick={() => onChange(cleanHidden(list), true, true, true)}\n variant=\"primaryGhost\"\n >\n {applyLabel}\n </HvButton>\n <HvButton\n id={setId(id, \"actions-cancel\")}\n onClick={onCancel}\n variant=\"primaryGhost\"\n >\n {cancelLabel}\n </HvButton>\n </HvActionBar>\n );\n };\n\n const showList = valuesExist(values);\n\n return (\n <div className={classes.rootList}>\n <div className={classes.listBorderDown} />\n <div className={classes.listContainer}>\n {showSearch && renderSearch()}\n {showList && multiSelect && renderSelectAll()}\n {showList && (\n <HvList\n id={setId(id, \"list\")}\n classes={{\n root: cx(\n classes.dropdownListContainer,\n css({\n maxWidth: width,\n maxHeight:\n maxHeight ??\n `calc(${height}px - 32px - ${theme.space.xs} - ${theme.space.sm})`,\n overflow: \"auto\",\n padding: 5,\n }),\n dropdownHeight &&\n css({\n height: dropdownHeight,\n }),\n virtualized &&\n css({\n maxWidth: \"inherit\",\n maxHeight: \"inherit\",\n overflow: \"inherit\",\n padding: 0,\n })\n ),\n }}\n values={list}\n multiSelect={multiSelect}\n useSelector={multiSelect}\n showSelectAll={false}\n onChange={onSelection}\n labels={newLabels}\n hasTooltips={hasTooltips}\n selectable\n condensed\n singleSelectionToggle={singleSelectionToggle}\n height={dropdownHeight}\n virtualized={virtualized}\n {...others}\n />\n )}\n </div>\n {showList && multiSelect ? renderActions() : null}\n </div>\n );\n};\n"],"names":["clone","values","map","value","cleanHidden","lst","item","isHidden","valuesExist","isNil","length","HvDropdownList","id","classes","classesProp","multiSelect","showSearch","onChange","onCancel","labels","notifyChangesOnFirstRender","hasTooltips","singleSelectionToggle","height","dropdownHeight","maxHeight","virtualized","others","cx","css","useClasses","searchStr","setSearchStr","useState","list","setList","allSelected","setAllSelected","anySelected","setAnySelected","width","useContext","BaseDropdownContext","newLabels","selectAll","selectionConjunction","multiSelectionConjunction","updateSelectAll","listValues","nbrSelected","getSelected","hasSelection","allSelect","useEffect","handleSearch","str","results","filter","searchValue","label","stringValue","String","toLowerCase","indexOf","newList","elem","isResult","find","result","renderSearch","_jsx","className","searchContainer","children","HvInput","setId","type","placeholder","searchPlaceholder","event","handleSelectAll","selected","renderSelectAll","defaultLabel","HvTypography","component","_jsxs","_Fragment","selectAllContainer","HvCheckBox","container","selection","indeterminate","checked","onSelection","renderActions","applyLabel","cancelLabel","HvActionBar","HvButton","onClick","variant","showList","rootList","listBorderDown","listContainer","HvList","root","dropdownListContainer","maxWidth","theme","space","xs","sm","overflow","padding","useSelector","showSelectAll","selectable","condensed"],"mappings":"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"}
|