@hitachivantara/uikit-react-core 5.58.2 → 5.59.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Accordion/Accordion.cjs.map +1 -1
- package/dist/cjs/Avatar/Avatar.cjs.map +1 -1
- package/dist/cjs/Badge/Badge.styles.cjs.map +1 -1
- package/dist/cjs/BaseCheckBox/BaseCheckBox.cjs.map +1 -1
- package/dist/cjs/BaseDropdown/BaseDropdown.cjs +1 -2
- package/dist/cjs/BaseDropdown/BaseDropdown.cjs.map +1 -1
- package/dist/cjs/BaseInput/BaseInput.styles.cjs.map +1 -1
- package/dist/cjs/BaseInput/validations.cjs.map +1 -1
- package/dist/cjs/BaseRadio/BaseRadio.cjs.map +1 -1
- package/dist/cjs/BaseSwitch/BaseSwitch.cjs.map +1 -1
- package/dist/cjs/BreadCrumb/BreadCrumb.cjs.map +1 -1
- package/dist/cjs/BreadCrumb/Page/Page.cjs.map +1 -1
- package/dist/cjs/BreadCrumb/utils.cjs.map +1 -1
- package/dist/cjs/BulkActions/BulkActions.styles.cjs +13 -1
- package/dist/cjs/BulkActions/BulkActions.styles.cjs.map +1 -1
- package/dist/cjs/Button/Button.styles.cjs.map +1 -1
- package/dist/cjs/Calendar/Calendar.cjs.map +1 -1
- package/dist/cjs/Calendar/SingleCalendar/CalendarCell.cjs.map +1 -1
- package/dist/cjs/Card/Media/Media.cjs.map +1 -1
- package/dist/cjs/Carousel/Carousel.cjs.map +1 -1
- package/dist/cjs/Carousel/CarouselControls.cjs.map +1 -1
- package/dist/cjs/Carousel/CarouselSlide/CarouselSlide.cjs.map +1 -1
- package/dist/cjs/Carousel/CarouselThumbnails.cjs.map +1 -1
- package/dist/cjs/Controls/Controls.cjs.map +1 -1
- package/dist/cjs/DropDownMenu/DropDownMenu.cjs +12 -20
- package/dist/cjs/DropDownMenu/DropDownMenu.cjs.map +1 -1
- package/dist/cjs/DropDownMenu/DropDownMenu.styles.cjs +4 -34
- package/dist/cjs/DropDownMenu/DropDownMenu.styles.cjs.map +1 -1
- package/dist/cjs/Dropdown/List/List.cjs.map +1 -1
- package/dist/cjs/DropdownButton/DropdownButton.cjs +57 -0
- package/dist/cjs/DropdownButton/DropdownButton.cjs.map +1 -0
- package/dist/cjs/DropdownButton/DropdownButton.styles.cjs +65 -0
- package/dist/cjs/DropdownButton/DropdownButton.styles.cjs.map +1 -0
- package/dist/cjs/FileUploader/DropZone/DropZone.cjs.map +1 -1
- package/dist/cjs/FileUploader/DropZone/DropZone.styles.cjs.map +1 -1
- package/dist/cjs/Focus/Focus.cjs +1 -3
- package/dist/cjs/Focus/Focus.cjs.map +1 -1
- package/dist/cjs/Forms/Adornment/Adornment.cjs.map +1 -1
- package/dist/cjs/Forms/Suggestions/Suggestions.cjs.map +1 -1
- package/dist/cjs/Header/Navigation/MenuBar/MenuBar.cjs.map +1 -1
- package/dist/cjs/Header/Navigation/MenuItem/MenuItem.cjs.map +1 -1
- package/dist/cjs/Header/Navigation/Navigation.cjs.map +1 -1
- package/dist/cjs/Header/Navigation/utils/FocusContext.cjs.map +1 -1
- package/dist/cjs/IconButton/IconButton.cjs +2 -1
- package/dist/cjs/IconButton/IconButton.cjs.map +1 -1
- package/dist/cjs/InlineEditor/InlineEditor.cjs.map +1 -1
- package/dist/cjs/Input/Input.cjs +1 -3
- package/dist/cjs/Input/Input.cjs.map +1 -1
- package/dist/cjs/ListContainer/ListContainer.cjs +3 -5
- package/dist/cjs/ListContainer/ListContainer.cjs.map +1 -1
- package/dist/cjs/ListContainer/ListItem/ListItem.cjs +4 -6
- package/dist/cjs/ListContainer/ListItem/ListItem.cjs.map +1 -1
- package/dist/cjs/MultiButton/MultiButton.cjs +24 -11
- package/dist/cjs/MultiButton/MultiButton.cjs.map +1 -1
- package/dist/cjs/MultiButton/MultiButton.styles.cjs +56 -326
- package/dist/cjs/MultiButton/MultiButton.styles.cjs.map +1 -1
- package/dist/cjs/Pagination/Pagination.cjs.map +1 -1
- package/dist/cjs/Pagination/Pagination.styles.cjs.map +1 -1
- package/dist/cjs/Pagination/Select.cjs.map +1 -1
- package/dist/cjs/Radio/Radio.cjs.map +1 -1
- package/dist/cjs/Select/Select.cjs +6 -2
- package/dist/cjs/Select/Select.cjs.map +1 -1
- package/dist/cjs/SelectionList/SelectionList.cjs +4 -6
- package/dist/cjs/SelectionList/SelectionList.cjs.map +1 -1
- package/dist/cjs/Slider/Slider.cjs.map +1 -1
- package/dist/cjs/Slider/Slider.styles.cjs.map +1 -1
- package/dist/cjs/Slider/utils.cjs.map +1 -1
- package/dist/cjs/Snackbar/Snackbar.cjs.map +1 -1
- package/dist/cjs/Snackbar/SnackbarContent/SnackbarContent.styles.cjs +0 -3
- package/dist/cjs/Snackbar/SnackbarContent/SnackbarContent.styles.cjs.map +1 -1
- package/dist/cjs/SnackbarProvider/SnackbarProvider.cjs.map +1 -1
- package/dist/cjs/Stack/Stack.cjs +2 -3
- package/dist/cjs/Stack/Stack.cjs.map +1 -1
- package/dist/cjs/Switch/Switch.cjs.map +1 -1
- package/dist/cjs/Tab/Tab.styles.cjs.map +1 -1
- package/dist/cjs/Table/Table.cjs.map +1 -1
- package/dist/cjs/Table/TableBody/TableBody.cjs.map +1 -1
- package/dist/cjs/Table/TableCell/TableCell.cjs.map +1 -1
- package/dist/cjs/Table/TableCell/TableCell.styles.cjs.map +1 -1
- package/dist/cjs/Table/TableHeader/TableHeader.cjs.map +1 -1
- package/dist/cjs/Table/hooks/useHeaderGroups.cjs.map +1 -1
- package/dist/cjs/Table/hooks/useResizeColumns.cjs.map +1 -1
- package/dist/cjs/Table/hooks/useRowExpand.cjs.map +1 -1
- package/dist/cjs/Table/hooks/useRowSelection.cjs.map +1 -1
- package/dist/cjs/Table/hooks/useSticky.cjs.map +1 -1
- package/dist/cjs/Table/hooks/useTableStyles.cjs.map +1 -1
- package/dist/cjs/Tag/Tag.cjs.map +1 -1
- package/dist/cjs/Tag/Tag.styles.cjs.map +1 -1
- package/dist/cjs/TagsInput/TagsInput.cjs.map +1 -1
- package/dist/cjs/Tooltip/Tooltip.cjs.map +1 -1
- package/dist/cjs/TreeView/TreeItem/DefaultContent.cjs.map +1 -1
- package/dist/cjs/TreeView/TreeItem/TreeItem.cjs.map +1 -1
- package/dist/cjs/VerticalNavigation/Actions/Action.cjs.map +1 -1
- package/dist/cjs/VerticalNavigation/Header/Header.cjs.map +1 -1
- package/dist/cjs/VerticalNavigation/VerticalNavigationContext.cjs.map +1 -1
- package/dist/cjs/hooks/useClickOutside.cjs.map +1 -1
- package/dist/cjs/providers/Provider.cjs.map +1 -1
- package/dist/esm/Accordion/Accordion.js.map +1 -1
- package/dist/esm/Avatar/Avatar.js.map +1 -1
- package/dist/esm/Badge/Badge.styles.js.map +1 -1
- package/dist/esm/BaseCheckBox/BaseCheckBox.js.map +1 -1
- package/dist/esm/BaseDropdown/BaseDropdown.js +2 -2
- package/dist/esm/BaseDropdown/BaseDropdown.js.map +1 -1
- package/dist/esm/BaseInput/BaseInput.styles.js.map +1 -1
- package/dist/esm/BaseInput/validations.js.map +1 -1
- package/dist/esm/BaseRadio/BaseRadio.js.map +1 -1
- package/dist/esm/BaseSwitch/BaseSwitch.js.map +1 -1
- package/dist/esm/BreadCrumb/BreadCrumb.js.map +1 -1
- package/dist/esm/BreadCrumb/Page/Page.js.map +1 -1
- package/dist/esm/BreadCrumb/utils.js.map +1 -1
- package/dist/esm/BulkActions/BulkActions.styles.js +13 -1
- package/dist/esm/BulkActions/BulkActions.styles.js.map +1 -1
- package/dist/esm/Button/Button.styles.js.map +1 -1
- package/dist/esm/Calendar/Calendar.js.map +1 -1
- package/dist/esm/Calendar/SingleCalendar/CalendarCell.js.map +1 -1
- package/dist/esm/Card/Media/Media.js.map +1 -1
- package/dist/esm/Carousel/Carousel.js.map +1 -1
- package/dist/esm/Carousel/CarouselControls.js.map +1 -1
- package/dist/esm/Carousel/CarouselSlide/CarouselSlide.js.map +1 -1
- package/dist/esm/Carousel/CarouselThumbnails.js.map +1 -1
- package/dist/esm/Controls/Controls.js.map +1 -1
- package/dist/esm/DropDownMenu/DropDownMenu.js +12 -20
- package/dist/esm/DropDownMenu/DropDownMenu.js.map +1 -1
- package/dist/esm/DropDownMenu/DropDownMenu.styles.js +4 -34
- package/dist/esm/DropDownMenu/DropDownMenu.styles.js.map +1 -1
- package/dist/esm/Dropdown/List/List.js.map +1 -1
- package/dist/esm/DropdownButton/DropdownButton.js +58 -0
- package/dist/esm/DropdownButton/DropdownButton.js.map +1 -0
- package/dist/esm/DropdownButton/DropdownButton.styles.js +65 -0
- package/dist/esm/DropdownButton/DropdownButton.styles.js.map +1 -0
- package/dist/esm/FileUploader/DropZone/DropZone.js.map +1 -1
- package/dist/esm/FileUploader/DropZone/DropZone.styles.js.map +1 -1
- package/dist/esm/Focus/Focus.js +2 -2
- package/dist/esm/Focus/Focus.js.map +1 -1
- package/dist/esm/Forms/Adornment/Adornment.js.map +1 -1
- package/dist/esm/Forms/Suggestions/Suggestions.js.map +1 -1
- package/dist/esm/Header/Navigation/MenuBar/MenuBar.js.map +1 -1
- package/dist/esm/Header/Navigation/MenuItem/MenuItem.js.map +1 -1
- package/dist/esm/Header/Navigation/Navigation.js.map +1 -1
- package/dist/esm/Header/Navigation/utils/FocusContext.js.map +1 -1
- package/dist/esm/IconButton/IconButton.js +2 -1
- package/dist/esm/IconButton/IconButton.js.map +1 -1
- package/dist/esm/InlineEditor/InlineEditor.js.map +1 -1
- package/dist/esm/Input/Input.js +2 -2
- package/dist/esm/Input/Input.js.map +1 -1
- package/dist/esm/ListContainer/ListContainer.js +4 -4
- package/dist/esm/ListContainer/ListContainer.js.map +1 -1
- package/dist/esm/ListContainer/ListItem/ListItem.js +5 -5
- package/dist/esm/ListContainer/ListItem/ListItem.js.map +1 -1
- package/dist/esm/MultiButton/MultiButton.js +26 -11
- package/dist/esm/MultiButton/MultiButton.js.map +1 -1
- package/dist/esm/MultiButton/MultiButton.styles.js +56 -326
- package/dist/esm/MultiButton/MultiButton.styles.js.map +1 -1
- package/dist/esm/Pagination/Pagination.js.map +1 -1
- package/dist/esm/Pagination/Pagination.styles.js.map +1 -1
- package/dist/esm/Pagination/Select.js.map +1 -1
- package/dist/esm/Radio/Radio.js.map +1 -1
- package/dist/esm/Select/Select.js +6 -2
- package/dist/esm/Select/Select.js.map +1 -1
- package/dist/esm/SelectionList/SelectionList.js +5 -5
- package/dist/esm/SelectionList/SelectionList.js.map +1 -1
- package/dist/esm/Slider/Slider.js.map +1 -1
- package/dist/esm/Slider/Slider.styles.js.map +1 -1
- package/dist/esm/Slider/utils.js.map +1 -1
- package/dist/esm/Snackbar/Snackbar.js.map +1 -1
- package/dist/esm/Snackbar/SnackbarContent/SnackbarContent.styles.js +0 -3
- package/dist/esm/Snackbar/SnackbarContent/SnackbarContent.styles.js.map +1 -1
- package/dist/esm/SnackbarProvider/SnackbarProvider.js.map +1 -1
- package/dist/esm/Stack/Stack.js +3 -3
- package/dist/esm/Stack/Stack.js.map +1 -1
- package/dist/esm/Switch/Switch.js.map +1 -1
- package/dist/esm/Tab/Tab.styles.js.map +1 -1
- package/dist/esm/Table/Table.js.map +1 -1
- package/dist/esm/Table/TableBody/TableBody.js.map +1 -1
- package/dist/esm/Table/TableCell/TableCell.js.map +1 -1
- package/dist/esm/Table/TableCell/TableCell.styles.js.map +1 -1
- package/dist/esm/Table/TableHeader/TableHeader.js.map +1 -1
- package/dist/esm/Table/hooks/useHeaderGroups.js.map +1 -1
- package/dist/esm/Table/hooks/useResizeColumns.js.map +1 -1
- package/dist/esm/Table/hooks/useRowExpand.js.map +1 -1
- package/dist/esm/Table/hooks/useRowSelection.js.map +1 -1
- package/dist/esm/Table/hooks/useSticky.js.map +1 -1
- package/dist/esm/Table/hooks/useTableStyles.js.map +1 -1
- package/dist/esm/Tag/Tag.js.map +1 -1
- package/dist/esm/Tag/Tag.styles.js.map +1 -1
- package/dist/esm/TagsInput/TagsInput.js.map +1 -1
- package/dist/esm/Tooltip/Tooltip.js.map +1 -1
- package/dist/esm/TreeView/TreeItem/DefaultContent.js.map +1 -1
- package/dist/esm/TreeView/TreeItem/TreeItem.js.map +1 -1
- package/dist/esm/VerticalNavigation/Actions/Action.js.map +1 -1
- package/dist/esm/VerticalNavigation/Header/Header.js.map +1 -1
- package/dist/esm/VerticalNavigation/VerticalNavigationContext.js.map +1 -1
- package/dist/esm/hooks/useClickOutside.js.map +1 -1
- package/dist/esm/providers/Provider.js.map +1 -1
- package/dist/types/index.d.ts +247 -258
- package/package.json +5 -5
- package/dist/cjs/Select/SelectButton.cjs +0 -92
- package/dist/cjs/Select/SelectButton.cjs.map +0 -1
- package/dist/esm/Select/SelectButton.js +0 -92
- package/dist/esm/Select/SelectButton.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseRadio.js","sources":["../../../src/BaseRadio/BaseRadio.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"BaseRadio.js","sources":["../../../src/BaseRadio/BaseRadio.tsx"],"sourcesContent":["import { useState, useCallback, forwardRef } from \"react\";\n\nimport MuiRadio, { RadioProps as MuiRadioProps } from \"@mui/material/Radio\";\n\nimport {\n RadioButtonUnselected,\n RadioButtonSelected,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./BaseRadio.styles\";\n\nexport { staticClasses as baseRadioClasses };\n\nexport type HvBaseRadioClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseRadioProps\n extends Omit<MuiRadioProps, \"onChange\" | \"classes\"> {\n /**\n * Class names to be applied.\n */\n className?: string;\n /**\n * A Jss Object used to override or extend the styles applied to the radio button.\n */\n classes?: HvBaseRadioClasses;\n /**\n * Id to be applied to the root node.\n */\n id?: string;\n /**\n * The input name.\n */\n name?: string;\n /**\n * The value of the input.\n *\n * The default value is \"on\".\n */\n value?: any;\n /**\n * Indicates that user input is required.\n */\n required?: boolean;\n /**\n * Indicates that the input is not editable.\n */\n readOnly?: boolean;\n /**\n * Indicates that the input is disabled.\n */\n disabled?: boolean;\n /**\n * If `true` the radio button is selected, if set to `false` the radio button is not selected.\n *\n * When defined the radio button state becomes controlled.\n */\n checked?: boolean;\n /**\n * When uncontrolled, defines the initial checked state.\n */\n defaultChecked?: boolean;\n /**\n * The callback fired when the radio button is pressed.\n */\n onChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n checked: boolean,\n value: any\n ) => void;\n /**\n * Whether the selector should use semantic colors.\n */\n semantic?: boolean;\n /**\n * Properties passed on to the input element.\n */\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /**\n * Callback fired when the component is focused with a keyboard.\n * We trigger a `onFocus` callback too.\n */\n onFocusVisible?: (event: React.FocusEvent<any>) => void;\n /**\n * @ignore\n */\n onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\nexport const getSelectorIcons = (\n options: { disabled: boolean; semantic: boolean },\n classes: HvBaseRadioClasses\n) => {\n const { disabled, semantic } = options;\n const color =\n (disabled && [\"atmo3\", \"secondary_60\"]) ||\n (semantic && [\"base_light\", \"base_dark\"]) ||\n undefined;\n const checkedColor =\n (disabled && [\"atmo3\", \"secondary_60\"]) ||\n (semantic && [\"base_dark\", \"base_light\"]) ||\n undefined;\n\n return {\n radio: <RadioButtonUnselected color={color} className={classes.icon} />,\n radioChecked: (\n <RadioButtonSelected color={checkedColor} className={classes.icon} />\n ),\n };\n};\n\n/**\n * A Radio Button is a mechanism that allows user to select one or more options.\n *\n * The Base Radio Button is a building block of the Radio Button form element. Don't\n * use unless implementing a custom use case not covered by the Radio Button form element.\n */\nexport const HvBaseRadio = forwardRef<HTMLButtonElement, HvBaseRadioProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n id,\n name,\n value = \"on\",\n required = false,\n readOnly = false,\n disabled = false,\n checked,\n defaultChecked,\n onChange,\n semantic = false,\n inputProps,\n onFocusVisible,\n onBlur,\n ...others\n } = useDefaultProps(\"HvBaseRadio\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [focusVisible, setFocusVisible] = useState(false);\n\n const onFocusVisibleCallback = useCallback(\n (evt: React.FocusEvent<any>) => {\n setFocusVisible(true);\n onFocusVisible?.(evt);\n },\n [onFocusVisible]\n );\n\n const onBlurCallback = useCallback(\n (evt: React.FocusEvent<any>) => {\n setFocusVisible(false);\n onBlur?.(evt);\n },\n [onBlur]\n );\n\n const icons = getSelectorIcons({ disabled, semantic }, classes);\n\n const onLocalChange = useCallback(\n (evt: React.ChangeEvent<HTMLInputElement>) => {\n if (readOnly) {\n return;\n }\n\n onChange?.(evt, evt.target.checked, value);\n },\n [onChange, readOnly, value]\n );\n\n return (\n <MuiRadio\n ref={ref}\n id={id}\n name={name}\n className={cx(\n classes.root,\n {\n [classes.disabled]: disabled,\n [classes.focusVisible]: focusVisible,\n },\n className\n )}\n icon={icons.radio}\n checkedIcon={icons.radioChecked}\n color=\"default\"\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n disableRipple\n onChange={onLocalChange}\n value={value}\n checked={checked}\n defaultChecked={defaultChecked}\n inputProps={inputProps}\n onFocusVisible={onFocusVisibleCallback}\n onBlur={onBlurCallback}\n {...others}\n />\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;AA2Fa,MAAA,mBAAmB,CAC9B,SACA,YACG;AACG,QAAA,EAAE,UAAU,SAAa,IAAA;AACzB,QAAA,QACH,YAAY,CAAC,SAAS,cAAc,KACpC,YAAY,CAAC,cAAc,WAAW,KACvC;AACI,QAAA,eACH,YAAY,CAAC,SAAS,cAAc,KACpC,YAAY,CAAC,aAAa,YAAY,KACvC;AAEK,SAAA;AAAA,IACL,OAAQ,oBAAA,uBAAA,EAAsB,OAAc,WAAW,QAAQ,MAAM;AAAA,IACrE,cACG,oBAAA,qBAAA,EAAoB,OAAO,cAAc,WAAW,QAAQ,MAAM;AAAA,EAAA;AAGzE;AAQO,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,eAAe,KAAK;AAExC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,UAAM,yBAAyB;AAAA,MAC7B,CAAC,QAA+B;AAC9B,wBAAgB,IAAI;AACpB,yBAAiB,GAAG;AAAA,MACtB;AAAA,MACA,CAAC,cAAc;AAAA,IAAA;AAGjB,UAAM,iBAAiB;AAAA,MACrB,CAAC,QAA+B;AAC9B,wBAAgB,KAAK;AACrB,iBAAS,GAAG;AAAA,MACd;AAAA,MACA,CAAC,MAAM;AAAA,IAAA;AAGT,UAAM,QAAQ,iBAAiB,EAAE,UAAU,SAAA,GAAY,OAAO;AAE9D,UAAM,gBAAgB;AAAA,MACpB,CAAC,QAA6C;AAC5C,YAAI,UAAU;AACZ;AAAA,QACF;AAEA,mBAAW,KAAK,IAAI,OAAO,SAAS,KAAK;AAAA,MAC3C;AAAA,MACA,CAAC,UAAU,UAAU,KAAK;AAAA,IAAA;AAI1B,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR;AAAA,YACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,YAAY,GAAG;AAAA,UAC1B;AAAA,UACA;AAAA,QACF;AAAA,QACA,MAAM,MAAM;AAAA,QACZ,aAAa,MAAM;AAAA,QACnB,OAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa;AAAA,QACb,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseSwitch.js","sources":["../../../src/BaseSwitch/BaseSwitch.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"BaseSwitch.js","sources":["../../../src/BaseSwitch/BaseSwitch.tsx"],"sourcesContent":["import { useState, useCallback, forwardRef } from \"react\";\n\nimport MuiSwitch, { SwitchProps as MuiSwitchProps } from \"@mui/material/Switch\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useClasses, staticClasses } from \"./BaseSwitch.styles\";\n\nexport { staticClasses as baseSwitchClasses };\n\nexport type HvBaseSwitchClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseSwitchProps\n extends Omit<MuiSwitchProps, \"onChange\" | \"classes\"> {\n /**\n * Class names to be applied.\n */\n className?: string;\n /**\n * A Jss Object used to override or extend the styles applied to the switch.\n */\n classes?: HvBaseSwitchClasses;\n /**\n * Id to be applied to the root node.\n */\n id?: string;\n /**\n * The input name.\n */\n name?: string;\n /**\n * The value of the input.\n *\n * Is up to the application's logic when to consider the submission of this value.\n * Generally it should be used only when the switch is neither unchecked nor indeterminate.\n *\n * The default value is \"on\".\n */\n value?: any;\n /**\n * Indicates that user input is required.\n */\n required?: boolean;\n /**\n * Indicates that the input is not editable.\n */\n readOnly?: boolean;\n /**\n * Indicates that the input is disabled.\n */\n disabled?: boolean;\n /**\n * If `true` the switch is selected, if set to `false` the switch is not selected.\n *\n * When defined the switch state becomes controlled.\n */\n checked?: boolean;\n /**\n * When uncontrolled, defines the initial checked state.\n */\n defaultChecked?: boolean;\n /**\n * The callback fired when the switch is pressed.\n */\n onChange?: (event: React.ChangeEvent, checked: boolean, value: any) => void;\n /**\n * Properties passed on to the input element.\n */\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /**\n * Callback fired when the component is focused with a keyboard.\n * We trigger a `onFocus` callback too.\n */\n onFocusVisible?: (event: React.FocusEvent<any>) => void;\n /**\n * @ignore\n */\n onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\n/**\n * A Switch is <b>binary</b> and work as a digital on/off button.\n *\n * The Base Switch is a building block of the Switch form element. Don't use unless\n * implementing a custom use case not covered by the Switch form element.\n */\nexport const HvBaseSwitch = forwardRef<HTMLButtonElement, HvBaseSwitchProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n\n id,\n name,\n value = \"on\",\n\n required = false,\n readOnly = false,\n disabled = false,\n\n checked,\n defaultChecked,\n\n onChange,\n\n inputProps,\n\n onFocusVisible,\n onBlur,\n\n ...others\n } = useDefaultProps(\"HvBaseSwitch\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [focusVisible, setFocusVisible] = useState(false);\n\n const onFocusVisibleCallback = useCallback(\n (evt: React.FocusEvent<any, Element>) => {\n setFocusVisible(true);\n onFocusVisible?.(evt);\n },\n [onFocusVisible]\n );\n\n const onBlurCallback = useCallback(\n (evt: React.FocusEvent<any, Element>) => {\n setFocusVisible(false);\n onBlur?.(evt);\n },\n [onBlur]\n );\n\n const onLocalChange = useCallback(\n (evt: React.ChangeEvent<HTMLInputElement>) => {\n if (readOnly) {\n return;\n }\n\n onChange?.(evt, evt.target.checked, value);\n },\n [onChange, readOnly, value]\n );\n\n return (\n <MuiSwitch\n ref={ref}\n id={id}\n name={name}\n className={cx(\n classes.root,\n {\n [classes.disabled]: disabled,\n [classes.readOnly]: readOnly,\n [classes.focusVisible]: focusVisible,\n },\n className\n )}\n color=\"default\"\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n disableRipple\n onChange={onLocalChange}\n value={value}\n checked={checked}\n defaultChecked={defaultChecked}\n classes={{\n root: classes.switch,\n switchBase: classes.switchBase,\n checked: classes.checked,\n track: classes.track,\n thumb: classes.thumb,\n disabled: classes.disabled,\n }}\n inputProps={inputProps}\n onFocusVisible={onFocusVisibleCallback}\n onBlur={onBlurCallback}\n {...others}\n />\n );\n }\n);\n"],"names":[],"mappings":";;;;;;AAuFO,MAAM,eAAe;AAAA,EAC1B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MAEA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MAER,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MAEX;AAAA,MACA;AAAA,MAEA;AAAA,MAEA;AAAA,MAEA;AAAA,MACA;AAAA,MAEA,GAAG;AAAA,IAAA,IACD,gBAAgB,gBAAgB,KAAK;AAEzC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,UAAM,yBAAyB;AAAA,MAC7B,CAAC,QAAwC;AACvC,wBAAgB,IAAI;AACpB,yBAAiB,GAAG;AAAA,MACtB;AAAA,MACA,CAAC,cAAc;AAAA,IAAA;AAGjB,UAAM,iBAAiB;AAAA,MACrB,CAAC,QAAwC;AACvC,wBAAgB,KAAK;AACrB,iBAAS,GAAG;AAAA,MACd;AAAA,MACA,CAAC,MAAM;AAAA,IAAA;AAGT,UAAM,gBAAgB;AAAA,MACpB,CAAC,QAA6C;AAC5C,YAAI,UAAU;AACZ;AAAA,QACF;AAEA,mBAAW,KAAK,IAAI,OAAO,SAAS,KAAK;AAAA,MAC3C;AAAA,MACA,CAAC,UAAU,UAAU,KAAK;AAAA,IAAA;AAI1B,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR;AAAA,YACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,YAAY,GAAG;AAAA,UAC1B;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa;AAAA,QACb,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,UACd,YAAY,QAAQ;AAAA,UACpB,SAAS,QAAQ;AAAA,UACjB,OAAO,QAAQ;AAAA,UACf,OAAO,QAAQ;AAAA,UACf,UAAU,QAAQ;AAAA,QACpB;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BreadCrumb.js","sources":["../../../src/BreadCrumb/BreadCrumb.tsx"],"sourcesContent":["import { isValidElement
|
|
1
|
+
{"version":3,"file":"BreadCrumb.js","sources":["../../../src/BreadCrumb/BreadCrumb.tsx"],"sourcesContent":["import { isValidElement } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvDropDownMenuProps } from \"../DropDownMenu\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvTypography } from \"../Typography\";\n\nimport { HvPathElement } from \"./PathElement\";\nimport { HvBreadCrumbPage } from \"./Page\";\nimport { staticClasses, useClasses } from \"./BreadCrumb.styles\";\nimport { pathWithSubMenu, removeExtension } from \"./utils\";\nimport { HvBreadCrumbPathElement } from \"./types\";\n\nexport { staticClasses as breadCrumbClasses };\n\nexport type HvBreadCrumbClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBreadCrumbProps\n extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n /** List of breadcrumb. */\n listRoute?: HvBreadCrumbPathElement[];\n /** URL to build the breadcrumb. */\n url?: string;\n /** Number of pages visible. */\n maxVisible?: number;\n /** The component used for the link node. Either a string to use a DOM element or a component. */\n component?: React.ElementType;\n /** Function passed to the component. If defined the component prop is used as the link node. */\n onClick?: (event: React.MouseEvent<HTMLElement>, data: any) => void;\n /** Props passed down to the DropDownMenu sub-menu component. */\n dropDownMenuProps?: Partial<HvDropDownMenuProps>;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvBreadCrumbClasses;\n}\n\n/**\n * A breadcrumb is a graphical control element frequently used as a navigational aid.\n */\nexport const HvBreadCrumb = (props: HvBreadCrumbProps) => {\n const {\n classes: classesProp,\n className,\n id,\n listRoute = [],\n maxVisible,\n url,\n onClick,\n component,\n dropDownMenuProps,\n ...others\n } = useDefaultProps(\"HvBreadCrumb\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const maxVisibleElem = maxVisible && maxVisible < 2 ? 2 : maxVisible;\n let listPath = listRoute.slice();\n\n // build the listPath object list\n if (url != null) {\n listPath = [];\n\n // get the domain\n const baseUrl = url.match(/^.*\\/\\/[^/]+/);\n\n // get url without domain\n const urlWithoutDomain = url.replace(/^.*\\/\\/[^/]+/, \"\");\n\n const pathNames = urlWithoutDomain.split(\"/\").filter((x) => x);\n\n pathNames.map((elem, index) =>\n listPath.push({\n label: decodeURI(elem),\n path: `${baseUrl}/${pathNames.slice(0, index + 1).join(\"/\")}`,\n })\n );\n }\n\n const breadcrumbPath =\n maxVisibleElem && listPath.length > maxVisibleElem\n ? pathWithSubMenu(\n id,\n listPath,\n maxVisibleElem,\n onClick,\n dropDownMenuProps\n )\n : listPath;\n\n return (\n <nav id={id} className={cx(classes.root, className)} {...others}>\n <ol className={classes.orderedList}>\n {listPath.map((elem, index) => {\n const key = `key_${index}`;\n const isLast = index === breadcrumbPath.length - 1;\n\n return (\n <HvPathElement\n classes={{\n centerContainer: classes.centerContainer,\n separatorContainer: classes.separatorContainer,\n }}\n key={key}\n last={isLast}\n >\n {(isValidElement(elem) && elem) ||\n (isLast && (\n <HvTypography className={classes.currentPage} variant=\"body\">\n {removeExtension(elem.label)}\n </HvTypography>\n )) || (\n <HvBreadCrumbPage\n elem={elem}\n classes={{\n a: classes.a,\n link: classes.link,\n }}\n component={component}\n onClick={onClick}\n />\n )}\n </HvPathElement>\n );\n })}\n </ol>\n </nav>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAuCa,MAAA,eAAe,CAAC,UAA6B;AAClD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,YAAY,CAAC;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,gBAAgB,KAAK;AAEzC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,iBAAiB,cAAc,aAAa,IAAI,IAAI;AACtD,MAAA,WAAW,UAAU;AAGzB,MAAI,OAAO,MAAM;AACf,eAAW,CAAA;AAGL,UAAA,UAAU,IAAI,MAAM,cAAc;AAGxC,UAAM,mBAAmB,IAAI,QAAQ,gBAAgB,EAAE;AAEjD,UAAA,YAAY,iBAAiB,MAAM,GAAG,EAAE,OAAO,CAAC,MAAM,CAAC;AAEnD,cAAA;AAAA,MAAI,CAAC,MAAM,UACnB,SAAS,KAAK;AAAA,QACZ,OAAO,UAAU,IAAI;AAAA,QACrB,MAAM,GAAG,OAAO,IAAI,UAAU,MAAM,GAAG,QAAQ,CAAC,EAAE,KAAK,GAAG,CAAC;AAAA,MAAA,CAC5D;AAAA,IAAA;AAAA,EAEL;AAEA,QAAM,iBACJ,kBAAkB,SAAS,SAAS,iBAChC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAEF,IAAA;AAGJ,SAAA,oBAAC,SAAI,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACvD,UAAC,oBAAA,MAAA,EAAG,WAAW,QAAQ,aACpB,mBAAS,IAAI,CAAC,MAAM,UAAU;AACvB,UAAA,MAAM,OAAO,KAAK;AAClB,UAAA,SAAS,UAAU,eAAe,SAAS;AAG/C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,UACP,iBAAiB,QAAQ;AAAA,UACzB,oBAAoB,QAAQ;AAAA,QAC9B;AAAA,QAEA,MAAM;AAAA,QAEJ,yBAAe,IAAI,KAAK,QACvB,8BACE,cAAa,EAAA,WAAW,QAAQ,aAAa,SAAQ,QACnD,UAAA,gBAAgB,KAAK,KAAK,EAC7B,CAAA,KAEA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,SAAS;AAAA,cACP,GAAG,QAAQ;AAAA,cACX,MAAM,QAAQ;AAAA,YAChB;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,MAjBC;AAAA,IAAA;AAAA,EAmBP,CAEH,GACH,EACF,CAAA;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Page.js","sources":["../../../../src/BreadCrumb/Page/Page.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Page.js","sources":["../../../../src/BreadCrumb/Page/Page.tsx"],"sourcesContent":["import { HvTypography } from \"../../Typography\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { HvBreadCrumbPathElement } from \"../types\";\nimport { staticClasses, useClasses } from \"./Page.styles\";\n\nexport { staticClasses as breadCrumbPageClasses };\n\nexport type HvBreadCrumbPageClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBreadCrumbPageProps {\n component?: React.ElementType;\n onClick?: (event: React.MouseEvent<HTMLElement>, data: any) => void;\n elem: HvBreadCrumbPathElement;\n classes?: HvBreadCrumbPageClasses;\n}\n\nexport const HvBreadCrumbPage = (props: HvBreadCrumbPageProps) => {\n const {\n component,\n onClick,\n elem,\n classes: classesProp,\n } = useDefaultProps(\"HvBreadCrumbPage\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const { label, path, ...others } = elem;\n\n const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n event.preventDefault();\n onClick?.(event, elem);\n };\n\n return (\n <HvTypography\n noWrap\n variant=\"label\"\n component={component || \"a\"}\n href={elem.path}\n onClick={onClick && handleClick}\n className={cx(classes.link, classes.label, classes.a)}\n {...others}\n >\n <HvOverflowTooltip data={elem.label} />\n </HvTypography>\n );\n};\n"],"names":[],"mappings":";;;;;;AAmBa,MAAA,mBAAmB,CAAC,UAAiC;AAC1D,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,EAAE,OAAO,MAAM,GAAG,WAAW;AAE7B,QAAA,cAAc,CAAC,UAAyC;AAC5D,UAAM,eAAe;AACrB,cAAU,OAAO,IAAI;AAAA,EAAA;AAIrB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,QAAM;AAAA,MACN,SAAQ;AAAA,MACR,WAAW,aAAa;AAAA,MACxB,MAAM,KAAK;AAAA,MACX,SAAS,WAAW;AAAA,MACpB,WAAW,GAAG,QAAQ,MAAM,QAAQ,OAAO,QAAQ,CAAC;AAAA,MACnD,GAAG;AAAA,MAEJ,UAAC,oBAAA,mBAAA,EAAkB,MAAM,KAAK,OAAO;AAAA,IAAA;AAAA,EAAA;AAG3C;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../../src/BreadCrumb/utils.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../src/BreadCrumb/utils.tsx"],"sourcesContent":["import { MoreOptionsHorizontal } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvDropDownMenu, HvDropDownMenuProps } from \"../DropDownMenu\";\nimport { setId } from \"../utils/setId\";\n\nexport const removeExtension = (label: string) =>\n label.includes(\".\") ? label.substring(0, label.lastIndexOf(\".\")) : label;\n\nexport const pathWithSubMenu = (\n id: string | undefined,\n listRoute: any,\n maxVisible: number,\n onClick?: (event: React.MouseEvent<HTMLElement>, data: any) => void,\n dropDownMenuProps?: Partial<HvDropDownMenuProps>\n) => {\n const nbrElemToSubMenu = listRoute.length - maxVisible;\n const subMenuList = listRoute.slice(1, nbrElemToSubMenu + 1);\n\n const handleClick = (event: any, data: any) => {\n event.preventDefault();\n\n onClick?.(event, data);\n };\n\n listRoute.splice(\n 1,\n nbrElemToSubMenu,\n <HvDropDownMenu\n id={setId(id, \"submenu\")}\n icon={<MoreOptionsHorizontal iconSize=\"S\" color=\"secondary\" />}\n dataList={subMenuList}\n {...dropDownMenuProps}\n onClick={onClick != null ? handleClick : undefined}\n />\n );\n\n return listRoute;\n};\n"],"names":[],"mappings":";;;;AAKO,MAAM,kBAAkB,CAAC,UAC9B,MAAM,SAAS,GAAG,IAAI,MAAM,UAAU,GAAG,MAAM,YAAY,GAAG,CAAC,IAAI;AAE9D,MAAM,kBAAkB,CAC7B,IACA,WACA,YACA,SACA,sBACG;AACG,QAAA,mBAAmB,UAAU,SAAS;AAC5C,QAAM,cAAc,UAAU,MAAM,GAAG,mBAAmB,CAAC;AAErD,QAAA,cAAc,CAAC,OAAY,SAAc;AAC7C,UAAM,eAAe;AAErB,cAAU,OAAO,IAAI;AAAA,EAAA;AAGb,YAAA;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,SAAS;AAAA,QACvB,MAAO,oBAAA,uBAAA,EAAsB,UAAS,KAAI,OAAM,aAAY;AAAA,QAC5D,UAAU;AAAA,QACT,GAAG;AAAA,QACJ,SAAS,WAAW,OAAO,cAAc;AAAA,MAAA;AAAA,IAC3C;AAAA,EAAA;AAGK,SAAA;AACT;"}
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import { theme } from "@hitachivantara/uikit-styles";
|
|
2
2
|
import { createClasses } from "../utils/classes.js";
|
|
3
|
+
import { staticClasses as staticClasses$1 } from "../ActionsGeneric/ActionsGeneric.styles.js";
|
|
4
|
+
import "@emotion/react/jsx-runtime";
|
|
5
|
+
import "react";
|
|
6
|
+
import "@hitachivantara/uikit-react-icons";
|
|
3
7
|
const { staticClasses, useClasses } = createClasses("HvBulkActions", {
|
|
4
8
|
root: {
|
|
5
9
|
display: "flex",
|
|
@@ -25,7 +29,15 @@ const { staticClasses, useClasses } = createClasses("HvBulkActions", {
|
|
|
25
29
|
backgroundColor: theme.alpha("base_light", 0.3)
|
|
26
30
|
}
|
|
27
31
|
},
|
|
28
|
-
actions: {
|
|
32
|
+
actions: {
|
|
33
|
+
display: "inline-flex",
|
|
34
|
+
marginLeft: "auto",
|
|
35
|
+
[`& .${staticClasses$1.dropDownMenuButton}:disabled`]: {
|
|
36
|
+
backgroundColor: "transparent",
|
|
37
|
+
borderColor: "transparent",
|
|
38
|
+
"&:hover": { backgroundColor: "transparent", borderColor: "transparent" }
|
|
39
|
+
}
|
|
40
|
+
},
|
|
29
41
|
selectAllContainer: { display: "flex", alignItems: "center" },
|
|
30
42
|
selectAll: {},
|
|
31
43
|
selectAllPages: {},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BulkActions.styles.js","sources":["../../../src/BulkActions/BulkActions.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBulkActions\", {\n root: {\n display: \"flex\",\n alignItems: \"center\",\n border: `1px solid ${theme.colors.atmo4}`,\n backgroundColor: theme.colors.atmo2,\n padding: theme.spacing(\"xs\", \"md\"),\n marginBottom: theme.space.xs,\n },\n semantic: {\n backgroundColor: theme.colors.containerBackgroundHover,\n \"& $selectAll div\": {\n color: \"inherit\",\n\n \"&:hover:not(:disabled)\": {\n backgroundColor: theme.alpha(\"base_light\", 0.3),\n },\n\n \"& *\": {\n color: \"inherit\",\n backgroundColor: \"transparent\",\n },\n },\n\n \"& $selectAll:focus-within div\": {\n backgroundColor: theme.alpha(\"base_light\", 0.3),\n },\n },\n actions: {
|
|
1
|
+
{"version":3,"file":"BulkActions.styles.js","sources":["../../../src/BulkActions/BulkActions.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\nimport { actionsGenericClasses } from \"../ActionsGeneric\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBulkActions\", {\n root: {\n display: \"flex\",\n alignItems: \"center\",\n border: `1px solid ${theme.colors.atmo4}`,\n backgroundColor: theme.colors.atmo2,\n padding: theme.spacing(\"xs\", \"md\"),\n marginBottom: theme.space.xs,\n },\n semantic: {\n backgroundColor: theme.colors.containerBackgroundHover,\n \"& $selectAll div\": {\n color: \"inherit\",\n\n \"&:hover:not(:disabled)\": {\n backgroundColor: theme.alpha(\"base_light\", 0.3),\n },\n\n \"& *\": {\n color: \"inherit\",\n backgroundColor: \"transparent\",\n },\n },\n\n \"& $selectAll:focus-within div\": {\n backgroundColor: theme.alpha(\"base_light\", 0.3),\n },\n },\n actions: {\n display: \"inline-flex\",\n marginLeft: \"auto\",\n [`& .${actionsGenericClasses.dropDownMenuButton}:disabled`]: {\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n \"&:hover\": { backgroundColor: \"transparent\", borderColor: \"transparent\" },\n },\n },\n selectAllContainer: { display: \"flex\", alignItems: \"center\" },\n selectAll: {},\n selectAllPages: {},\n divider: {\n display: \"flex\",\n backgroundColor: theme.colors.atmo4,\n width: \"1px\",\n height: \"32px\",\n marginLeft: theme.space.sm,\n },\n});\n"],"names":["actionsGenericClasses"],"mappings":";;;;;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ,aAAa,MAAM,OAAO,KAAK;AAAA,IACvC,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS,MAAM,QAAQ,MAAM,IAAI;AAAA,IACjC,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,oBAAoB;AAAA,MAClB,OAAO;AAAA,MAEP,0BAA0B;AAAA,QACxB,iBAAiB,MAAM,MAAM,cAAc,GAAG;AAAA,MAChD;AAAA,MAEA,OAAO;AAAA,QACL,OAAO;AAAA,QACP,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IAEA,iCAAiC;AAAA,MAC/B,iBAAiB,MAAM,MAAM,cAAc,GAAG;AAAA,IAChD;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,CAAC,MAAMA,gBAAsB,kBAAkB,WAAW,GAAG;AAAA,MAC3D,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,WAAW,EAAE,iBAAiB,eAAe,aAAa,cAAc;AAAA,IAC1E;AAAA,EACF;AAAA,EACA,oBAAoB,EAAE,SAAS,QAAQ,YAAY,SAAS;AAAA,EAC5D,WAAW,CAAC;AAAA,EACZ,gBAAgB,CAAC;AAAA,EACjB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY,MAAM,MAAM;AAAA,EAC1B;AACF,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.styles.js","sources":["../../../src/Button/Button.styles.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Button.styles.js","sources":["../../../src/Button/Button.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\nimport { HvButtonRadius, HvButtonSize } from \"./types\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButton\", {\n root: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n textTransform: \"none\",\n cursor: \"pointer\",\n whiteSpace: \"nowrap\",\n\n // Background color common for almost all variants\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n \"&:focus-visible\": {\n ...outlineStyles,\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n\n // Default button - no size specified\n fontFamily: theme.fontFamily.body,\n ...theme.typography.label,\n height: \"32px\",\n border: \"1px solid currentcolor\",\n borderRadius: theme.radii.base,\n padding: theme.spacing(0, \"sm\"),\n },\n startIcon: {\n marginLeft: `calc(-1 * ${theme.space.xs})`,\n },\n endIcon: {\n marginRight: `calc(-1 * ${theme.space.xs})`,\n },\n focusVisible: {},\n disabled: {\n cursor: \"not-allowed\",\n color: theme.colors.secondary_60,\n borderColor: theme.colors.atmo3,\n backgroundColor: theme.colors.atmo3,\n \"&:hover, &:focus-visible\": {\n backgroundColor: theme.colors.atmo3,\n borderColor: theme.colors.atmo3,\n },\n },\n icon: {\n margin: 0,\n padding: 0,\n height: \"fit-content\",\n \"& > *\": {\n margin: -1,\n },\n },\n subtle: {\n backgroundColor: \"transparent\",\n \"&$disabled\": {\n backgroundColor: \"transparent\",\n \"&:hover, &:focus-visible\": {\n backgroundColor: \"transparent\",\n },\n },\n },\n ghost: {\n borderColor: \"transparent\",\n backgroundColor: \"transparent\",\n \"&$disabled\": {\n borderColor: \"transparent\",\n backgroundColor: \"transparent\",\n \"&:hover, &:focus-visible\": {\n borderColor: \"transparent\",\n backgroundColor: \"transparent\",\n },\n },\n },\n semantic: {\n color: theme.colors.base_dark,\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n \"&:hover, &:focus-visible\": {\n backgroundColor: \"rgba(251, 252, 252, 0.3)\",\n },\n \"&$disabled\": {\n backgroundColor: \"rgba(251, 252, 252, 0.1)\",\n },\n },\n\n // TODO - remove in v6\n primary: {},\n primarySubtle: {},\n primaryGhost: {},\n secondarySubtle: {},\n secondaryGhost: {},\n\n // Deprecated (DS3)\n secondary: {},\n});\n\nexport const getColoringStyle = (color: string, type?: string) => {\n if (type)\n return {\n color: theme.colors[color !== \"warning\" ? color : `${color}_140`],\n };\n\n const bg = theme.colors[color !== \"warning\" ? color : `${color}_120`];\n const hoverBg =\n theme.colors[color !== \"warning\" ? `${color}_80` : `${color}_140`];\n return {\n color: theme.colors.atmo1,\n backgroundColor: bg,\n borderColor: bg,\n \"&:hover, &:focus-visible\": {\n backgroundColor: hoverBg,\n borderColor: hoverBg,\n },\n };\n};\n\nexport const getRadiusStyles = (radius: HvButtonRadius) => ({\n borderRadius: theme.radii[radius],\n});\n\n// TODO - remove xs and xl in v6 since they are not DS spec\nconst sizes = {\n xs: { height: \"24px\", space: \"sm\", typography: \"captionLabel\" },\n sm: { height: \"24px\", space: \"sm\", typography: \"captionLabel\" },\n md: { height: \"32px\", space: \"sm\", typography: \"label\" },\n lg: { height: \"48px\", space: \"md\", typography: \"label\" },\n xl: { height: \"48px\", space: \"md\", typography: \"label\" },\n};\n\nexport const getSizeStyles = (size: HvButtonSize) => {\n const { height, space, typography } = sizes[size];\n const { color, ...typoProps } = theme.typography[typography];\n return {\n height,\n padding: theme.spacing(0, space),\n ...typoProps,\n };\n};\n\nexport const getIconSizeStyles = (size: HvButtonSize) => {\n const { height } = sizes[size];\n return {\n height,\n width: height,\n };\n};\n\nexport const getOverrideColors = () => ({\n \"& svg .color0\": {\n fill: \"currentcolor\",\n },\n});\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.js","sources":["../../../src/Calendar/Calendar.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"Calendar.js","sources":["../../../src/Calendar/Calendar.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { setId } from \"../utils/setId\";\nimport { HvFormElementContext, HvFormElementValueContext } from \"../Forms\";\n\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { isRange } from \"./utils\";\nimport { HvSingleCalendar } from \"./SingleCalendar\";\nimport { DateRangeProp, VisibilitySelectorActions } from \"./types\";\n\nimport { staticClasses, useClasses } from \"./Calendar.styles\";\n\nexport { staticClasses as calendarClasses };\n\nexport type HvCalendarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCalendarProps {\n /**\n * Styles applied from the theme.\n */\n classes?: HvCalendarClasses;\n /**\n * Identifier.\n */\n id?: string;\n /**\n * The calendar locale. If undefined, it defaults to en-US\n *\n */\n locale?: string;\n /**\n * Date that the calendar would show.\n * if using the object format the calendar enter in range mode showing two calendars\n */\n value?: DateRangeProp | Date;\n /**\n * Controls the visible month of the Calendar\n */\n visibleMonth?: number;\n /**\n * Controls the visible year of the Calendar\n */\n visibleYear?: number;\n /**\n * Controls the visible month of the Calendar on the right side of the datepicker\n */\n rightVisibleMonth?: number;\n /**\n * Controls the visible year of the Calendar on the right side of the datepicker\n */\n rightVisibleYear?: number;\n /**\n * Callback function to be triggered when the selected date has changed.\n */\n onChange?: (\n event:\n | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n | undefined,\n value: Date | DateRangeProp\n ) => void;\n /**\n * Callback function to be triggered when the selected date input has changed.\n */\n onInputChange?: (\n event:\n | React.ChangeEvent<\n HTMLTextAreaElement | HTMLInputElement | HTMLButtonElement\n >\n | undefined,\n value: Date | DateRangeProp,\n position: \"left\" | \"right\"\n ) => void;\n /**\n * Callback function to be triggered when the user clicks on the month or year selector.\n * it receives the action that was pressed:\n * previous_month, next_month, previous_year, next_year,month\n */\n onVisibleDateChange?: (\n event:\n | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n | undefined,\n action: VisibilitySelectorActions,\n value?: Date | DateRangeProp | number,\n position?: \"left\" | \"right\"\n ) => void;\n /**\n * The maximum selectable date after this all values are disabled.\n */\n maximumDate?: Date;\n /**\n * The minimum selectable date before this all values are disabled.\n */\n minimumDate?: Date;\n /**\n * An element placed before the Calendar\n */\n startAdornment?: React.ReactNode;\n /**\n * Indicates if header should display the day of week.\n */\n showDayOfWeek?: boolean;\n /**\n * Label shown when date is invalid.\n */\n invalidDateLabel?: string;\n}\n\nexport const HvCalendar = (props: HvCalendarProps) => {\n const {\n classes: classesProp,\n id,\n locale = \"en-US\",\n value,\n visibleMonth,\n visibleYear,\n rightVisibleMonth,\n rightVisibleYear,\n minimumDate,\n maximumDate,\n startAdornment,\n onChange,\n onInputChange,\n onVisibleDateChange,\n invalidDateLabel,\n ...others\n } = useDefaultProps(\"HvCalendar\", props);\n const { classes } = useClasses(classesProp);\n\n const { elementId } = useContext(HvFormElementContext);\n const elementValue = useContext(HvFormElementValueContext);\n const localValue = value ?? elementValue;\n const localId = id ?? setId(elementId, \"single-calendar\");\n const rangeMode = isRange(localValue);\n const rightCalendarId = setId(localId, \"single-calendar-right\");\n const clampedMonth =\n visibleMonth && visibleMonth % 13 > 0 ? visibleMonth % 13 : 1;\n\n const singleCalendar = (\n <HvSingleCalendar\n id={localId}\n locale={locale}\n value={localValue}\n visibleMonth={clampedMonth}\n visibleYear={visibleYear}\n minimumDate={minimumDate}\n maximumDate={maximumDate}\n onChange={onChange}\n onInputChange={(evt, date) =>\n onInputChange && onInputChange(evt, date, \"left\")\n }\n onVisibleDateChange={onVisibleDateChange}\n invalidDateLabel={invalidDateLabel}\n {...others}\n />\n );\n\n const rangeCalendar = (\n <div className={classes.rangeCalendarContainer}>\n <HvSingleCalendar\n className={classes.singleCalendar}\n id={localId}\n locale={locale}\n value={localValue}\n visibleMonth={clampedMonth}\n visibleYear={visibleYear}\n minimumDate={minimumDate}\n maximumDate={maximumDate}\n onChange={onChange}\n onInputChange={(evt, date) =>\n onInputChange && onInputChange(evt, date, \"left\")\n }\n onVisibleDateChange={(event, action, index) =>\n onVisibleDateChange?.(event, action, index, \"left\")\n }\n invalidDateLabel={invalidDateLabel}\n {...others}\n />\n\n <HvSingleCalendar\n className={classes.singleCalendar}\n id={rightCalendarId}\n locale={locale}\n value={localValue}\n visibleMonth={rightVisibleMonth}\n visibleYear={rightVisibleYear}\n minimumDate={minimumDate}\n maximumDate={maximumDate}\n onChange={onChange}\n onInputChange={(evt, date) =>\n onInputChange && onInputChange(evt, date, \"right\")\n }\n onVisibleDateChange={(event, action, index) => {\n onVisibleDateChange?.(event, action, index, \"right\");\n }}\n showEndDate\n invalidDateLabel={invalidDateLabel}\n {...others}\n />\n </div>\n );\n\n return (\n <div className={classes.root}>\n {startAdornment}\n {rangeMode ? rangeCalendar : singleCalendar}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA8Ga,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,EAAE,UAAA,IAAc,WAAW,oBAAoB;AAC/C,QAAA,eAAe,WAAW,yBAAyB;AACzD,QAAM,aAAa,SAAS;AAC5B,QAAM,UAAU,MAAM,MAAM,WAAW,iBAAiB;AAClD,QAAA,YAAY,QAAQ,UAAU;AAC9B,QAAA,kBAAkB,MAAM,SAAS,uBAAuB;AAC9D,QAAM,eACJ,gBAAgB,eAAe,KAAK,IAAI,eAAe,KAAK;AAE9D,QAAM,iBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACP,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe,CAAC,KAAK,SACnB,iBAAiB,cAAc,KAAK,MAAM,MAAM;AAAA,MAElD;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAIR,QAAM,gBACJ,qBAAC,OAAI,EAAA,WAAW,QAAQ,wBACtB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,IAAI;AAAA,QACJ;AAAA,QACA,OAAO;AAAA,QACP,cAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,CAAC,KAAK,SACnB,iBAAiB,cAAc,KAAK,MAAM,MAAM;AAAA,QAElD,qBAAqB,CAAC,OAAO,QAAQ,UACnC,sBAAsB,OAAO,QAAQ,OAAO,MAAM;AAAA,QAEpD;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,IAAI;AAAA,QACJ;AAAA,QACA,OAAO;AAAA,QACP,cAAc;AAAA,QACd,aAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,CAAC,KAAK,SACnB,iBAAiB,cAAc,KAAK,MAAM,OAAO;AAAA,QAEnD,qBAAqB,CAAC,OAAO,QAAQ,UAAU;AACvB,gCAAA,OAAO,QAAQ,OAAO,OAAO;AAAA,QACrD;AAAA,QACA,aAAW;AAAA,QACX;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,EACF,EAAA,CAAA;AAGF,SACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,MACrB,UAAA;AAAA,IAAA;AAAA,IACA,YAAY,gBAAgB;AAAA,EAC/B,EAAA,CAAA;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarCell.js","sources":["../../../../src/Calendar/SingleCalendar/CalendarCell.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"CalendarCell.js","sources":["../../../../src/Calendar/SingleCalendar/CalendarCell.tsx"],"sourcesContent":["import { useRef } from \"react\";\n\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport {\n isSameDay,\n isSameMonth,\n dateInProvidedValueRange,\n checkIfDateIsDisabled,\n isDateRangeProp,\n} from \"../utils\";\nimport { DateRangeProp } from \"../types\";\nimport CalendarModel from \"../model\";\n\nimport { staticClasses, useClasses } from \"./CalendarCell.styles\";\n\nexport { staticClasses as calendarCellClasses };\n\nexport type HvCalendarCellClasses = ExtractNames<typeof useClasses>;\n\nexport const HvCalendarCell = (props: HvCalendarCellProps) => {\n const {\n classes: classesProp,\n onChange,\n onKeyDown,\n calendarValue,\n firstDayOfCurrentMonth,\n value,\n isDateSelectionMode,\n today,\n locale,\n minimumDate,\n maximumDate,\n rangeMode = false,\n ...others\n } = useDefaultProps(\"HvCalendarCell\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const buttonEl = useRef<HTMLButtonElement>(null);\n\n const startDate = isDateRangeProp(calendarValue)\n ? calendarValue.startDate\n : undefined;\n const endDate = isDateRangeProp(calendarValue)\n ? calendarValue.endDate\n : undefined;\n const isCellToday = isSameDay(value, today);\n const isCellSelected = isSameDay(calendarValue, value);\n const inMonth = isSameMonth(value, firstDayOfCurrentMonth);\n const isCellAfterStartingDate =\n rangeMode && value && startDate ? value >= startDate : false;\n const isCellStartingDate = rangeMode ? isSameDay(value, startDate) : false;\n const isDateInSelectionRange =\n calendarValue && rangeMode\n ? dateInProvidedValueRange(value, calendarValue)\n : false;\n const isDateDisabled = checkIfDateIsDisabled(value, minimumDate, maximumDate);\n const startBookend = isSameDay(startDate, value);\n const endBookend = isSameDay(endDate, value);\n const isSelecting = isDateSelectionMode && isCellAfterStartingDate;\n\n const handleClick = (event: React.SyntheticEvent) => {\n if (value) {\n onChange?.(event, value);\n if (buttonEl.current) setTimeout(() => buttonEl?.current?.focus());\n }\n };\n\n const handleKeyDown = (event: any) => {\n onKeyDown?.(event);\n };\n\n const renderDate = () => (\n <button\n ref={buttonEl}\n type=\"button\"\n className={cx(classes.cellContainer, {\n [classes.focusSelection]: inMonth,\n })}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n disabled={isDateDisabled || !inMonth}\n data-in-month={inMonth}\n {...others}\n >\n <HvTypography\n variant={isCellToday ? \"label\" : \"body\"}\n className={cx(classes.calendarDate, {\n [classes.calendarDateSelected]: inMonth && isCellSelected,\n [classes.calendarDateNotInMonth]: !inMonth,\n [classes.calendarDateInSelectionRange]:\n inMonth && rangeMode && isDateInSelectionRange,\n [classes.calendarDateDisabled]: isDateDisabled,\n [classes.startBookend]:\n inMonth &&\n ((startBookend && rangeMode) ||\n (isCellStartingDate && isDateSelectionMode)),\n [classes.endBookend]: inMonth && endBookend && rangeMode,\n })}\n >\n {value && value.getDate()}\n </HvTypography>\n </button>\n );\n\n return (\n <div\n className={cx(classes.dateWrapper, {\n [classes.cellsInRange]: inMonth && rangeMode && isSelecting,\n [classes.cellsOutsideRange]: rangeMode && !isSelecting,\n })}\n data-calendar-cell=\"calendarCell\"\n >\n {renderDate()}\n </div>\n );\n};\n\nexport interface HvCalendarCellProps {\n /**\n * A Jss Object used to override or extend the component styles.\n */\n classes?: HvCalendarCellClasses;\n /**\n * Identifier.\n */\n id?: string;\n /**\n * The text to be shown on the main part of the header.\n */\n calendarValue?: string | Date | DateRangeProp;\n /**\n * The text to be shown on the main part of the header.\n */\n value?: Date;\n /**\n * Locale to be used by the calendar.\n */\n locale?: string;\n /**\n * Callback to define the input date.\n */\n onChange?: (event: React.SyntheticEvent, value: Date | DateRangeProp) => void;\n /**\n * Callback to handle input onFocus.\n */\n onFocus?: React.FocusEventHandler<any>;\n\n calendarModel?: CalendarModel;\n onKeyDown?: (event: KeyboardEvent) => void;\n\n today?: Date;\n minimumDate?: Date;\n maximumDate?: Date;\n firstDayOfCurrentMonth?: Date;\n isDateSelectionMode?: boolean;\n rangeMode?: boolean;\n tabIndex?: number;\n}\n\nexport default HvCalendarCell;\n"],"names":[],"mappings":";;;;;;;AAsBa,MAAA,iBAAiB,CAAC,UAA+B;AACtD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,WAAW,OAA0B,IAAI;AAE/C,QAAM,YAAY,gBAAgB,aAAa,IAC3C,cAAc,YACd;AACJ,QAAM,UAAU,gBAAgB,aAAa,IACzC,cAAc,UACd;AACE,QAAA,cAAc,UAAU,OAAO,KAAK;AACpC,QAAA,iBAAiB,UAAU,eAAe,KAAK;AAC/C,QAAA,UAAU,YAAY,OAAO,sBAAsB;AACzD,QAAM,0BACJ,aAAa,SAAS,YAAY,SAAS,YAAY;AACzD,QAAM,qBAAqB,YAAY,UAAU,OAAO,SAAS,IAAI;AACrE,QAAM,yBACJ,iBAAiB,YACb,yBAAyB,OAAO,aAAa,IAC7C;AACN,QAAM,iBAAiB,sBAAsB,OAAO,aAAa,WAAW;AACtE,QAAA,eAAe,UAAU,WAAW,KAAK;AACzC,QAAA,aAAa,UAAU,SAAS,KAAK;AAC3C,QAAM,cAAc,uBAAuB;AAErC,QAAA,cAAc,CAAC,UAAgC;AACnD,QAAI,OAAO;AACT,iBAAW,OAAO,KAAK;AACvB,UAAI,SAAS;AAAS,mBAAW,MAAM,UAAU,SAAS,MAAO,CAAA;AAAA,IACnE;AAAA,EAAA;AAGI,QAAA,gBAAgB,CAAC,UAAe;AACpC,gBAAY,KAAK;AAAA,EAAA;AAGnB,QAAM,aAAa,MACjB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAK;AAAA,MACL,WAAW,GAAG,QAAQ,eAAe;AAAA,QACnC,CAAC,QAAQ,cAAc,GAAG;AAAA,MAAA,CAC3B;AAAA,MACD,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU,kBAAkB,CAAC;AAAA,MAC7B,iBAAe;AAAA,MACd,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS,cAAc,UAAU;AAAA,UACjC,WAAW,GAAG,QAAQ,cAAc;AAAA,YAClC,CAAC,QAAQ,oBAAoB,GAAG,WAAW;AAAA,YAC3C,CAAC,QAAQ,sBAAsB,GAAG,CAAC;AAAA,YACnC,CAAC,QAAQ,4BAA4B,GACnC,WAAW,aAAa;AAAA,YAC1B,CAAC,QAAQ,oBAAoB,GAAG;AAAA,YAChC,CAAC,QAAQ,YAAY,GACnB,YACE,gBAAgB,aACf,sBAAsB;AAAA,YAC3B,CAAC,QAAQ,UAAU,GAAG,WAAW,cAAc;AAAA,UAAA,CAChD;AAAA,UAEA,UAAA,SAAS,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC1B;AAAA,IAAA;AAAA,EAAA;AAKF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,aAAa;AAAA,QACjC,CAAC,QAAQ,YAAY,GAAG,WAAW,aAAa;AAAA,QAChD,CAAC,QAAQ,iBAAiB,GAAG,aAAa,CAAC;AAAA,MAAA,CAC5C;AAAA,MACD,sBAAmB;AAAA,MAElB,UAAW,WAAA;AAAA,IAAA;AAAA,EAAA;AAGlB;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Media.js","sources":["../../../../src/Card/Media/Media.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"Media.js","sources":["../../../../src/Card/Media/Media.tsx"],"sourcesContent":["import MuiCardMedia, {\n CardMediaProps as MuiCardMediaProps,\n} from \"@mui/material/CardMedia\";\n\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Media.styles\";\n\nexport { staticClasses as cardMediaClasses };\n\nexport type HvCardMediaClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardMediaProps\n extends Omit<MuiCardMediaProps, \"classes\">,\n React.ImgHTMLAttributes<HTMLDivElement> {\n /** Id to be applied to the root node. */\n id?: string;\n /** The title of the media. */\n title?: string;\n /** The function that will be executed when this section is clicked. */\n onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;\n /** The component used for the root node. Either a string to use a HTML element or a component. */\n component?: React.ElementType;\n /** The image to display. */\n image?: string;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvCardMediaClasses;\n}\n\nexport const HvCardMedia = ({\n id,\n classes: classesProp,\n className,\n children,\n title,\n onClick,\n ...others\n}: HvCardMediaProps) => {\n const { classes } = useClasses(classesProp);\n return (\n <MuiCardMedia\n id={id}\n classes={{\n root: classes.root,\n media: classes.media,\n }}\n className={className}\n role=\"img\"\n title={title}\n onClick={onClick}\n {...others}\n >\n {children}\n </MuiCardMedia>\n );\n};\n"],"names":[],"mappings":";;;;AA6BO,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAwB;AACtB,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAExC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,OAAO,QAAQ;AAAA,MACjB;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.js","sources":["../../../src/Carousel/Carousel.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n Children,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport useCarousel from \"embla-carousel-react\";\nimport {\n Backwards,\n Forwards,\n Close,\n Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvButton } from \"../Button\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { HvTypography } from \"../Typography\";\nimport { HvContainer } from \"../Container\";\nimport { clamp } from \"../utils/helpers\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvCarouselControls } from \"./CarouselControls\";\nimport { HvCarouselThumbnails } from \"./CarouselThumbnails\";\nimport { staticClasses, useClasses } from \"./Carousel.styles\";\nimport { HvIconButton } from \"../IconButton\";\n\nexport { staticClasses as carouselClasses };\n\nexport type HvCarouselClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCarouselProps\n extends HvBaseProps<HTMLDivElement, \"title\" | \"onChange\"> {\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvCarouselClasses;\n /** Height of the Slider container. If `undefined`, images will keep a 16/9 aspect-ratio */\n height?: CSSProperties[\"height\"];\n /** Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio */\n thumbnailWidth?: CSSProperties[\"width\"];\n /** Title of the carousel */\n title?: React.ReactNode;\n /** Content slides to be displayed. @see `<HvCarouselSlide />` */\n children?: React.ReactNode;\n /** Custom content to render in the actions area */\n actions?: React.ReactNode;\n /** Whether Carousel is in \"xs mode\" - to use in embedded contexts */\n xs?: boolean;\n /** Whether to show dots instead of arrow pagination. Defaults to true under 5 elements */\n showDots?: boolean;\n /** Whether to show the counter on the top-right corner of the active slide */\n showCounter?: boolean;\n /** Whether to show the back/forwards buttons over the active slide */\n showSlideControls?: boolean;\n /** Whether to enable the fullscreen toggle button */\n showFullscreen?: boolean;\n /** Whether to hide the thumbnails. Hidden by default in \"xs\" mode */\n hideThumbnails?: boolean;\n /** Controls position. */\n controlsPosition?: \"top\" | \"bottom\";\n /** Thumbnails position. */\n thumbnailsPosition?: \"top\" | \"bottom\";\n /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */\n carouselOptions?: Parameters<typeof useCarousel>[0];\n /** Function that renders the thumbnail. */\n renderThumbnail?: (index: number) => React.ReactNode;\n /** The callback fired when the active slide changes. */\n onChange?: (index: number) => void;\n}\n\n/**\n * A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts.\n * It allows you to focus on a particular content while having a notion of how many you have to explore.\n */\nexport const HvCarousel = (props: HvCarouselProps) => {\n const {\n className,\n classes: classesProp,\n height: heightProp = \"auto\",\n thumbnailWidth = 90,\n title,\n children,\n actions: actionsProp,\n xs,\n showDots: showDotsProp,\n showCounter: showCounterProp,\n showSlideControls,\n showFullscreen: showFullscreenProp,\n hideThumbnails: hideThumbnailsProp,\n controlsPosition: controlsPositionProp,\n thumbnailsPosition: thumbnailsPositionProp,\n carouselOptions,\n renderThumbnail,\n onChange,\n ...others\n } = useDefaultProps(\"HvCarousel\", props);\n const { activeTheme } = useTheme();\n const { classes, css, cx } = useClasses(classesProp);\n const thumbnailsRef = useRef<HTMLDivElement>(null);\n const [isFullscreen, setIsFullscreen] = useState(false);\n\n const isDs3 = activeTheme?.name === \"ds3\";\n const actionsPosition = isDs3 ? \"header\" : \"controls\";\n const controlsPosition = controlsPositionProp ?? (isDs3 ? \"bottom\" : \"top\");\n const thumbnailsPosition = thumbnailsPositionProp ?? \"bottom\";\n\n const [containerRef, controller] = useCarousel({\n align: \"start\",\n loop: true,\n ...carouselOptions,\n });\n\n const [selectedIndex, setSelectedIndex] = useState(\n carouselOptions?.startIndex ?? 0\n );\n\n const numSlides = Children.count(children);\n\n const handlePrevious = useCallback(() => {\n controller?.scrollPrev();\n }, [controller]);\n\n const handleNext = useCallback(() => {\n controller?.scrollNext();\n }, [controller]);\n\n const handleScroll = (index: number) => {\n controller?.scrollTo(index);\n };\n\n const handleSelect = useCallback(() => {\n if (!controller) return;\n\n const slideIndex = controller.selectedScrollSnap();\n setSelectedIndex(slideIndex);\n\n // scroll to thumbnail button\n thumbnailsRef.current\n ?.querySelectorAll(\"button\")\n ?.[slideIndex]?.scrollIntoView({\n behavior: \"smooth\",\n block: \"nearest\",\n });\n\n onChange?.(slideIndex);\n }, [controller, onChange]);\n\n useEffect(() => {\n if (!controller) return;\n\n controller.on(\"select\", handleSelect);\n\n return () => {\n controller.off(\"select\", handleSelect);\n };\n }, [controller, handleSelect]);\n\n useEffect(() => {\n if (!controller) return;\n\n controller.reInit();\n setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides));\n }, [numSlides, controller]);\n\n const canPrev = controller?.canScrollPrev() ?? false;\n const canNext = controller?.canScrollNext() ?? false;\n const showTitle = !!title && (!xs || isFullscreen);\n const showFullscreen = showFullscreenProp ?? xs;\n const height = isFullscreen ? \"100%\" : heightProp ?? \"auto\";\n const showCounter = xs;\n const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);\n const showThumbnails = !hideThumbnails && !!renderThumbnail;\n const showDots = showDotsProp ?? numSlides <= 5;\n\n const actions = (\n <div\n className={cx(\n classes.actions,\n actionsPosition === \"header\"\n ? css({ position: \"relative\", top: -40, height: 0 })\n : css({ position: \"absolute\" })\n )}\n >\n {actionsProp}\n {showFullscreen && (\n <HvIconButton\n title={isFullscreen ? \"Close\" : \"Fullscreen\"}\n onClick={() => setIsFullscreen((curr) => !curr)}\n className={classes.closeButton}\n >\n {isFullscreen ? <Close /> : <Fullscreen />}\n </HvIconButton>\n )}\n </div>\n );\n\n const controls = (\n <HvCarouselControls\n classes={classes}\n showDots={showDots}\n page={selectedIndex}\n pages={numSlides}\n canPrevious={canPrev}\n canNext={canNext}\n onPreviousClick={handlePrevious}\n onNextClick={handleNext}\n actions={actionsPosition === \"controls\" && actions}\n />\n );\n\n const thumbnails = showThumbnails && (\n <HvCarouselThumbnails\n classes={classes}\n ref={thumbnailsRef}\n page={selectedIndex}\n pages={numSlides}\n width={thumbnailWidth}\n onThumbnailClick={(evt, i) => handleScroll(i)}\n renderThumbnail={renderThumbnail}\n />\n );\n\n return (\n <HvContainer\n className={cx(classes.root, className, {\n [classes.xs]: xs,\n [classes.fullscreen]: isFullscreen,\n })}\n {...others}\n >\n {showTitle && (\n <HvTypography variant=\"title2\" className={classes.title}>\n {title}\n </HvTypography>\n )}\n\n {actionsPosition === \"header\" && actions}\n {thumbnailsPosition === \"top\" && thumbnails}\n {controlsPosition === \"top\" && controls}\n <div\n className={cx(classes.main, {\n [classes.mainXs]: xs,\n [classes.mainFullscreen]: isFullscreen,\n })}\n >\n {showCounter && (\n <div className={classes.counterContainer}>\n <span className={classes.counter}>\n {`${selectedIndex + 1}/${numSlides}`}\n </span>\n </div>\n )}\n\n {showSlideControls && (\n <div className={classes.slideControls}>\n <HvButton\n icon\n disabled={!canPrev}\n variant=\"secondarySubtle\"\n aria-label=\"Backwards\"\n onClick={handlePrevious}\n >\n <Backwards iconSize=\"XS\" />\n </HvButton>\n <HvButton\n icon\n disabled={!canNext}\n variant=\"secondarySubtle\"\n aria-label=\"Forwards\"\n onClick={handleNext}\n >\n <Forwards iconSize=\"XS\" />\n </HvButton>\n </div>\n )}\n\n <div\n ref={containerRef}\n style={{ height }}\n className={classes.slidesViewport}\n >\n <div className={classes.slidesContainer}>{children}</div>\n </div>\n </div>\n {controlsPosition === \"bottom\" && controls}\n {thumbnailsPosition === \"bottom\" && thumbnails}\n </HvContainer>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Carousel.js","sources":["../../../src/Carousel/Carousel.tsx"],"sourcesContent":["import { Children, useCallback, useEffect, useRef, useState } from \"react\";\nimport useCarousel from \"embla-carousel-react\";\nimport {\n Backwards,\n Forwards,\n Close,\n Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvButton } from \"../Button\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { HvTypography } from \"../Typography\";\nimport { HvContainer } from \"../Container\";\nimport { clamp } from \"../utils/helpers\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvCarouselControls } from \"./CarouselControls\";\nimport { HvCarouselThumbnails } from \"./CarouselThumbnails\";\nimport { staticClasses, useClasses } from \"./Carousel.styles\";\nimport { HvIconButton } from \"../IconButton\";\n\nexport { staticClasses as carouselClasses };\n\nexport type HvCarouselClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCarouselProps\n extends HvBaseProps<HTMLDivElement, \"title\" | \"onChange\"> {\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvCarouselClasses;\n /** Height of the Slider container. If `undefined`, images will keep a 16/9 aspect-ratio */\n height?: React.CSSProperties[\"height\"];\n /** Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio */\n thumbnailWidth?: React.CSSProperties[\"width\"];\n /** Title of the carousel */\n title?: React.ReactNode;\n /** Content slides to be displayed. @see `<HvCarouselSlide />` */\n children?: React.ReactNode;\n /** Custom content to render in the actions area */\n actions?: React.ReactNode;\n /** Whether Carousel is in \"xs mode\" - to use in embedded contexts */\n xs?: boolean;\n /** Whether to show dots instead of arrow pagination. Defaults to true under 5 elements */\n showDots?: boolean;\n /** Whether to show the counter on the top-right corner of the active slide */\n showCounter?: boolean;\n /** Whether to show the back/forwards buttons over the active slide */\n showSlideControls?: boolean;\n /** Whether to enable the fullscreen toggle button */\n showFullscreen?: boolean;\n /** Whether to hide the thumbnails. Hidden by default in \"xs\" mode */\n hideThumbnails?: boolean;\n /** Controls position. */\n controlsPosition?: \"top\" | \"bottom\";\n /** Thumbnails position. */\n thumbnailsPosition?: \"top\" | \"bottom\";\n /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */\n carouselOptions?: Parameters<typeof useCarousel>[0];\n /** Function that renders the thumbnail. */\n renderThumbnail?: (index: number) => React.ReactNode;\n /** The callback fired when the active slide changes. */\n onChange?: (index: number) => void;\n}\n\n/**\n * A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts.\n * It allows you to focus on a particular content while having a notion of how many you have to explore.\n */\nexport const HvCarousel = (props: HvCarouselProps) => {\n const {\n className,\n classes: classesProp,\n height: heightProp = \"auto\",\n thumbnailWidth = 90,\n title,\n children,\n actions: actionsProp,\n xs,\n showDots: showDotsProp,\n showCounter: showCounterProp,\n showSlideControls,\n showFullscreen: showFullscreenProp,\n hideThumbnails: hideThumbnailsProp,\n controlsPosition: controlsPositionProp,\n thumbnailsPosition: thumbnailsPositionProp,\n carouselOptions,\n renderThumbnail,\n onChange,\n ...others\n } = useDefaultProps(\"HvCarousel\", props);\n const { activeTheme } = useTheme();\n const { classes, css, cx } = useClasses(classesProp);\n const thumbnailsRef = useRef<HTMLDivElement>(null);\n const [isFullscreen, setIsFullscreen] = useState(false);\n\n const isDs3 = activeTheme?.name === \"ds3\";\n const actionsPosition = isDs3 ? \"header\" : \"controls\";\n const controlsPosition = controlsPositionProp ?? (isDs3 ? \"bottom\" : \"top\");\n const thumbnailsPosition = thumbnailsPositionProp ?? \"bottom\";\n\n const [containerRef, controller] = useCarousel({\n align: \"start\",\n loop: true,\n ...carouselOptions,\n });\n\n const [selectedIndex, setSelectedIndex] = useState(\n carouselOptions?.startIndex ?? 0\n );\n\n const numSlides = Children.count(children);\n\n const handlePrevious = useCallback(() => {\n controller?.scrollPrev();\n }, [controller]);\n\n const handleNext = useCallback(() => {\n controller?.scrollNext();\n }, [controller]);\n\n const handleScroll = (index: number) => {\n controller?.scrollTo(index);\n };\n\n const handleSelect = useCallback(() => {\n if (!controller) return;\n\n const slideIndex = controller.selectedScrollSnap();\n setSelectedIndex(slideIndex);\n\n // scroll to thumbnail button\n thumbnailsRef.current\n ?.querySelectorAll(\"button\")\n ?.[slideIndex]?.scrollIntoView({\n behavior: \"smooth\",\n block: \"nearest\",\n });\n\n onChange?.(slideIndex);\n }, [controller, onChange]);\n\n useEffect(() => {\n if (!controller) return;\n\n controller.on(\"select\", handleSelect);\n\n return () => {\n controller.off(\"select\", handleSelect);\n };\n }, [controller, handleSelect]);\n\n useEffect(() => {\n if (!controller) return;\n\n controller.reInit();\n setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides));\n }, [numSlides, controller]);\n\n const canPrev = controller?.canScrollPrev() ?? false;\n const canNext = controller?.canScrollNext() ?? false;\n const showTitle = !!title && (!xs || isFullscreen);\n const showFullscreen = showFullscreenProp ?? xs;\n const height = isFullscreen ? \"100%\" : heightProp ?? \"auto\";\n const showCounter = xs;\n const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);\n const showThumbnails = !hideThumbnails && !!renderThumbnail;\n const showDots = showDotsProp ?? numSlides <= 5;\n\n const actions = (\n <div\n className={cx(\n classes.actions,\n actionsPosition === \"header\"\n ? css({ position: \"relative\", top: -40, height: 0 })\n : css({ position: \"absolute\" })\n )}\n >\n {actionsProp}\n {showFullscreen && (\n <HvIconButton\n title={isFullscreen ? \"Close\" : \"Fullscreen\"}\n onClick={() => setIsFullscreen((curr) => !curr)}\n className={classes.closeButton}\n >\n {isFullscreen ? <Close /> : <Fullscreen />}\n </HvIconButton>\n )}\n </div>\n );\n\n const controls = (\n <HvCarouselControls\n classes={classes}\n showDots={showDots}\n page={selectedIndex}\n pages={numSlides}\n canPrevious={canPrev}\n canNext={canNext}\n onPreviousClick={handlePrevious}\n onNextClick={handleNext}\n actions={actionsPosition === \"controls\" && actions}\n />\n );\n\n const thumbnails = showThumbnails && (\n <HvCarouselThumbnails\n classes={classes}\n ref={thumbnailsRef}\n page={selectedIndex}\n pages={numSlides}\n width={thumbnailWidth}\n onThumbnailClick={(evt, i) => handleScroll(i)}\n renderThumbnail={renderThumbnail}\n />\n );\n\n return (\n <HvContainer\n className={cx(classes.root, className, {\n [classes.xs]: xs,\n [classes.fullscreen]: isFullscreen,\n })}\n {...others}\n >\n {showTitle && (\n <HvTypography variant=\"title2\" className={classes.title}>\n {title}\n </HvTypography>\n )}\n\n {actionsPosition === \"header\" && actions}\n {thumbnailsPosition === \"top\" && thumbnails}\n {controlsPosition === \"top\" && controls}\n <div\n className={cx(classes.main, {\n [classes.mainXs]: xs,\n [classes.mainFullscreen]: isFullscreen,\n })}\n >\n {showCounter && (\n <div className={classes.counterContainer}>\n <span className={classes.counter}>\n {`${selectedIndex + 1}/${numSlides}`}\n </span>\n </div>\n )}\n\n {showSlideControls && (\n <div className={classes.slideControls}>\n <HvButton\n icon\n disabled={!canPrev}\n variant=\"secondarySubtle\"\n aria-label=\"Backwards\"\n onClick={handlePrevious}\n >\n <Backwards iconSize=\"XS\" />\n </HvButton>\n <HvButton\n icon\n disabled={!canNext}\n variant=\"secondarySubtle\"\n aria-label=\"Forwards\"\n onClick={handleNext}\n >\n <Forwards iconSize=\"XS\" />\n </HvButton>\n </div>\n )}\n\n <div\n ref={containerRef}\n style={{ height }}\n className={classes.slidesViewport}\n >\n <div className={classes.slidesContainer}>{children}</div>\n </div>\n </div>\n {controlsPosition === \"bottom\" && controls}\n {thumbnailsPosition === \"bottom\" && thumbnails}\n </HvContainer>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselControls.js","sources":["../../../src/Carousel/CarouselControls.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"CarouselControls.js","sources":["../../../src/Carousel/CarouselControls.tsx"],"sourcesContent":["import { Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvButton } from \"../Button\";\nimport { HvPaginationProps } from \"../Pagination\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useClasses } from \"./Carousel.styles\";\n\ninterface HvCarouselControlsProps\n extends HvBaseProps<HTMLDivElement>,\n Pick<HvPaginationProps, \"page\" | \"pages\" | \"canPrevious\" | \"canNext\"> {\n showDots?: boolean;\n classes?: ExtractNames<typeof useClasses>;\n actions?: React.ReactNode;\n onPreviousClick?: React.MouseEventHandler<HTMLButtonElement>;\n onNextClick?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const HvCarouselControls = (props: HvCarouselControlsProps) => {\n const {\n classes: classesProp,\n className,\n showDots,\n page,\n pages,\n canPrevious,\n canNext,\n actions,\n onPreviousClick,\n onNextClick,\n } = useDefaultProps(\"HvCarouselControls\", props);\n const { classes, cx } = useClasses(classesProp, false);\n\n const selectedIndex = page || 0;\n const numSlides = pages;\n\n return (\n <div className={cx(classes.controls, className)}>\n {showDots ? (\n <div className={classes.dots}>\n {Array.from(Array(numSlides)).map((el, index) => (\n <span\n key={`circle-${index}`}\n className={cx(classes.dot, {\n [classes.dotSelected]: index === selectedIndex,\n })}\n />\n ))}\n </div>\n ) : (\n <>\n <HvButton\n icon\n disabled={!canPrevious}\n aria-label=\"Backwards\"\n onClick={onPreviousClick}\n >\n <Backwards iconSize=\"XS\" />\n </HvButton>\n <div className={classes.pageCounter}>\n {`${selectedIndex + 1} / ${numSlides}`}\n </div>\n <HvButton\n icon\n disabled={!canNext}\n aria-label=\"Forwards\"\n onClick={onNextClick}\n >\n <Forwards iconSize=\"XS\" />\n </HvButton>\n </>\n )}\n {actions}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;AAoBa,MAAA,qBAAqB,CAAC,UAAmC;AAC9D,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,gBAAgB,sBAAsB,KAAK;AAC/C,QAAM,EAAE,SAAS,GAAA,IAAO,WAAW,aAAa,KAAK;AAErD,QAAM,gBAAgB,QAAQ;AAC9B,QAAM,YAAY;AAElB,8BACG,OAAI,EAAA,WAAW,GAAG,QAAQ,UAAU,SAAS,GAC3C,UAAA;AAAA,IAAA,WACE,oBAAA,OAAA,EAAI,WAAW,QAAQ,MACrB,UAAM,MAAA,KAAK,MAAM,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,UACrC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW,GAAG,QAAQ,KAAK;AAAA,UACzB,CAAC,QAAQ,WAAW,GAAG,UAAU;AAAA,QAAA,CAClC;AAAA,MAAA;AAAA,MAHI,UAAU,KAAK;AAAA,IAKvB,CAAA,EACH,CAAA,IAGE,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAI;AAAA,UACJ,UAAU,CAAC;AAAA,UACX,cAAW;AAAA,UACX,SAAS;AAAA,UAET,UAAA,oBAAC,WAAU,EAAA,UAAS,KAAK,CAAA;AAAA,QAAA;AAAA,MAC3B;AAAA,MACA,oBAAC,OAAI,EAAA,WAAW,QAAQ,aACrB,aAAG,gBAAgB,CAAC,MAAM,SAAS,GACtC,CAAA;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAI;AAAA,UACJ,UAAU,CAAC;AAAA,UACX,cAAW;AAAA,UACX,SAAS;AAAA,UAET,UAAA,oBAAC,UAAS,EAAA,UAAS,KAAK,CAAA;AAAA,QAAA;AAAA,MAC1B;AAAA,IAAA,GACF;AAAA,IAED;AAAA,EACH,EAAA,CAAA;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselSlide.js","sources":["../../../../src/Carousel/CarouselSlide/CarouselSlide.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"CarouselSlide.js","sources":["../../../../src/Carousel/CarouselSlide/CarouselSlide.tsx"],"sourcesContent":["import { ExtractNames } from \"../../utils/classes\";\n\nimport { useClasses } from \"./CarouselSlide.styles\";\n\nexport type HvCarouselSlideClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCarouselSlideProps\n extends React.ImgHTMLAttributes<HTMLImageElement> {\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvCarouselSlideClasses;\n /** The width of the Slide. Defaults to `100%` */\n size?: string;\n /** Content of a slide to be displayed */\n children?: React.ReactNode;\n}\n\n/**\n * A container to use as `children` of `HvCarousel`.\n * Pass `img` props directly to it, or `children` for any custom content\n */\nexport const HvCarouselSlide = ({\n classes: classesProp,\n className,\n children,\n size: flexBasis = \"100%\",\n src,\n alt,\n ...props\n}: HvCarouselSlideProps) => {\n const { classes, css, cx } = useClasses(classesProp);\n return (\n <div\n className={cx(\n css({ flex: `0 0 ${flexBasis}` }),\n classes.slide,\n className\n )}\n >\n {children ?? (\n <img className={classes.image} src={src} alt={alt} {...props} />\n )}\n </div>\n );\n};\n"],"names":[],"mappings":";;AAoBO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,MAAM,YAAY;AAAA,EAClB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4B;AAC1B,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAEjD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,IAAI,EAAE,MAAM,OAAO,SAAS,IAAI;AAAA,QAChC,QAAQ;AAAA,QACR;AAAA,MACF;AAAA,MAEC,UAAA,gCACE,OAAI,EAAA,WAAW,QAAQ,OAAO,KAAU,KAAW,GAAG,MAAO,CAAA;AAAA,IAAA;AAAA,EAAA;AAItE;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselThumbnails.js","sources":["../../../src/Carousel/CarouselThumbnails.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"CarouselThumbnails.js","sources":["../../../src/Carousel/CarouselThumbnails.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvPaginationProps } from \"../Pagination\";\nimport { HvStack } from \"../Stack\";\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useClasses } from \"./Carousel.styles\";\n\ninterface HvCarouselThumbnailsProps\n extends HvBaseProps<HTMLDivElement, \"children\">,\n Pick<HvPaginationProps, \"page\" | \"pages\" | \"canPrevious\" | \"canNext\"> {\n width?: React.CSSProperties[\"width\"];\n classes?: ExtractNames<typeof useClasses>;\n onThumbnailClick?: (\n event: React.MouseEvent<HTMLButtonElement>,\n index: number\n ) => void;\n thumbnailProps?: Partial<HvButtonProps>;\n showDots?: boolean;\n renderThumbnail?: (index: number) => React.ReactNode;\n}\n\nexport const HvCarouselThumbnails = forwardRef<\n HTMLDivElement,\n HvCarouselThumbnailsProps\n>((props, ref) => {\n const {\n classes: classesProp,\n className,\n page,\n pages,\n width,\n renderThumbnail,\n onThumbnailClick,\n thumbnailProps,\n ...others\n } = props;\n const { classes, cx } = useClasses(classesProp);\n\n const selectedIndex = page || 0;\n const numSlides = pages;\n\n return (\n <div ref={ref} className={cx(classes.panel, className)} {...others}>\n <HvStack direction=\"row\" spacing=\"xs\">\n {Array.from(Array(numSlides)).map((doc, i) => (\n <HvButton\n icon\n key={`thumbnail-${i}`}\n style={{ width }}\n variant=\"secondaryGhost\"\n className={cx(classes.thumbnail, {\n [classes.thumbnailSelected]: i === selectedIndex,\n })}\n onClick={(event) => onThumbnailClick?.(event, i)}\n {...thumbnailProps}\n >\n {renderThumbnail?.(i)}\n </HvButton>\n ))}\n </HvStack>\n </div>\n );\n});\n"],"names":[],"mappings":";;;;;AAwBO,MAAM,uBAAuB,WAGlC,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AACJ,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,gBAAgB,QAAQ;AAC9B,QAAM,YAAY;AAGhB,SAAA,oBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,OAAO,SAAS,GAAI,GAAG,QAC1D,UAAC,oBAAA,SAAA,EAAQ,WAAU,OAAM,SAAQ,MAC9B,UAAA,MAAM,KAAK,MAAM,SAAS,CAAC,EAAE,IAAI,CAAC,KAAK,MACtC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAI;AAAA,MAEJ,OAAO,EAAE,MAAM;AAAA,MACf,SAAQ;AAAA,MACR,WAAW,GAAG,QAAQ,WAAW;AAAA,QAC/B,CAAC,QAAQ,iBAAiB,GAAG,MAAM;AAAA,MAAA,CACpC;AAAA,MACD,SAAS,CAAC,UAAU,mBAAmB,OAAO,CAAC;AAAA,MAC9C,GAAG;AAAA,MAEH,4BAAkB,CAAC;AAAA,IAAA;AAAA,IATf,aAAa,CAAC;AAAA,EAAA,CAWtB,GACH,EACF,CAAA;AAEJ,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Controls.js","sources":["../../../src/Controls/Controls.tsx"],"sourcesContent":["import { Children
|
|
1
|
+
{"version":3,"file":"Controls.js","sources":["../../../src/Controls/Controls.tsx"],"sourcesContent":["import { Children } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps, HvExtraProps } from \"../types/generic\";\nimport { HvButton } from \"../Button\";\nimport { HvMultiButton } from \"../MultiButton\";\nimport { setId } from \"../utils/setId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvTableInstance } from \"../Table/hooks/useTable\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { HvControlsContextProvider } from \"./context/ControlsContext\";\nimport { staticClasses, useClasses } from \"./Controls.styles\";\n\nexport { staticClasses as controlsClasses };\n\nexport type HvControlsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvControlsViewConfiguration extends HvExtraProps {\n id?: string;\n label?: string;\n icon?: React.ReactNode;\n}\n\nexport interface HvControlsProps extends HvBaseProps {\n /**\n * An instance of useHvTable or useTable used to manage the data\n * if this is not provided data sorting and search must be handled externally\n */\n callbacks?: {\n setSortBy?: HvTableInstance[\"setSortBy\"];\n setGlobalFilter?: HvTableInstance[\"setGlobalFilter\"];\n };\n /**\n * Views configuration required for the view buttons\n */\n views?: HvControlsViewConfiguration[];\n /**\n * What view is selected by default\n */\n defaultView?: string;\n /**\n * Sets the selected view to be the one specified\n * if specified the component is in a controlled state and it won't change it state\n * unless specified externally\n */\n selectedView?: string;\n /**\n * Callback called when the view switcher button is pressed\n */\n onViewChange?: (\n event: React.MouseEvent<HTMLButtonElement>,\n id: string\n ) => void;\n /**\n * if `true` the button to switch views is not rendered\n */\n hideViewSwitcher?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvControlsClasses;\n}\n\nexport const HvControls = (props: HvControlsProps) => {\n const {\n id,\n className,\n classes: classesProp,\n views,\n callbacks,\n selectedView,\n defaultView,\n children,\n hideViewSwitcher = false,\n onViewChange,\n } = useDefaultProps(\"HvControls\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [currentView, setCurrentView] = useControlled(\n selectedView,\n defaultView\n );\n\n const onViewChangeHandler = (\n evt: React.MouseEvent<HTMLButtonElement>,\n btnId: any\n ) => {\n setCurrentView(btnId);\n onViewChange?.(evt, btnId);\n };\n\n const onSearchHandler = (value: any) => callbacks?.setGlobalFilter?.(value);\n const onSortHandler = (value: any) =>\n callbacks?.setSortBy?.([\n {\n id: value?.accessor,\n desc: value?.desc,\n },\n ]);\n\n const childrenCount = Children.count(children);\n const childrenArray = Children.toArray(children);\n\n const childrenIndexCut =\n childrenCount > 0 ? Math.round(childrenCount * 0.5) : 0;\n const leftChildren = childrenArray.slice(0, childrenIndexCut);\n const rightChildren = childrenArray.slice(\n childrenIndexCut,\n childrenCount || 0\n );\n\n return (\n <div id={id} className={cx(classes.root, className)}>\n <HvControlsContextProvider\n value={{\n onSearch: onSearchHandler,\n onSort: onSortHandler,\n }}\n >\n <div className={cx(classes.section, classes.leftSection)}>\n {leftChildren}\n </div>\n <div className={cx(classes.section, classes.rightSection)}>\n {rightChildren}\n {views && !hideViewSwitcher && views?.length > 0 && (\n <HvMultiButton id={setId(id, \"view-multi-button\")}>\n {views.map(({ id: btnId, icon, ...others }) => (\n <HvButton\n id={btnId}\n key={btnId}\n icon\n selected={currentView === btnId}\n onClick={(evt) => onViewChangeHandler(evt, btnId)}\n {...others}\n >\n {icon}\n </HvButton>\n ))}\n </HvMultiButton>\n )}\n </div>\n </HvControlsContextProvider>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA8Da,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,EAAA,IACE,gBAAgB,cAAc,KAAK;AAEvC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC;AAAA,IACA;AAAA,EAAA;AAGI,QAAA,sBAAsB,CAC1B,KACA,UACG;AACH,mBAAe,KAAK;AACpB,mBAAe,KAAK,KAAK;AAAA,EAAA;AAG3B,QAAM,kBAAkB,CAAC,UAAe,WAAW,kBAAkB,KAAK;AAC1E,QAAM,gBAAgB,CAAC,UACrB,WAAW,YAAY;AAAA,IACrB;AAAA,MACE,IAAI,OAAO;AAAA,MACX,MAAM,OAAO;AAAA,IACf;AAAA,EAAA,CACD;AAEG,QAAA,gBAAgB,SAAS,MAAM,QAAQ;AACvC,QAAA,gBAAgB,SAAS,QAAQ,QAAQ;AAE/C,QAAM,mBACJ,gBAAgB,IAAI,KAAK,MAAM,gBAAgB,GAAG,IAAI;AACxD,QAAM,eAAe,cAAc,MAAM,GAAG,gBAAgB;AAC5D,QAAM,gBAAgB,cAAc;AAAA,IAClC;AAAA,IACA,iBAAiB;AAAA,EAAA;AAIjB,SAAA,oBAAC,SAAI,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAChD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,UAAU;AAAA,QACV,QAAQ;AAAA,MACV;AAAA,MAEA,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,WAAW,GAAG,QAAQ,SAAS,QAAQ,WAAW,GACpD,UACH,aAAA,CAAA;AAAA,QACA,qBAAC,SAAI,WAAW,GAAG,QAAQ,SAAS,QAAQ,YAAY,GACrD,UAAA;AAAA,UAAA;AAAA,UACA,SAAS,CAAC,oBAAoB,OAAO,SAAS,KAC7C,oBAAC,eAAc,EAAA,IAAI,MAAM,IAAI,mBAAmB,GAC7C,UAAA,MAAM,IAAI,CAAC,EAAE,IAAI,OAAO,MAAM,GAAG,OAAA,MAChC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cAEJ,MAAI;AAAA,cACJ,UAAU,gBAAgB;AAAA,cAC1B,SAAS,CAAC,QAAQ,oBAAoB,KAAK,KAAK;AAAA,cAC/C,GAAG;AAAA,cAEH,UAAA;AAAA,YAAA;AAAA,YANI;AAAA,UAQR,CAAA,GACH;AAAA,QAAA,GAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
|
|
@@ -9,10 +9,9 @@ import { setId } from "../utils/setId.js";
|
|
|
9
9
|
import { getPrevNextFocus } from "../utils/focusableElementFinder.js";
|
|
10
10
|
import { useClasses } from "./DropDownMenu.styles.js";
|
|
11
11
|
import { staticClasses } from "./DropDownMenu.styles.js";
|
|
12
|
-
import { getIconSizeStyles } from "../Button/Button.styles.js";
|
|
13
12
|
import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
|
|
14
|
-
import { HvButton } from "../Button/Button.js";
|
|
15
13
|
import { HvList } from "../List/List.js";
|
|
14
|
+
import { HvDropdownButton } from "../DropdownButton/DropdownButton.js";
|
|
16
15
|
import { HvPanel } from "../Panel/Panel.js";
|
|
17
16
|
const HvDropDownMenu = (props) => {
|
|
18
17
|
const {
|
|
@@ -32,10 +31,10 @@ const HvDropDownMenu = (props) => {
|
|
|
32
31
|
category = "secondaryGhost",
|
|
33
32
|
// TODO - remove and update variant default in v6
|
|
34
33
|
variant,
|
|
35
|
-
size,
|
|
34
|
+
size = "md",
|
|
36
35
|
...others
|
|
37
36
|
} = useDefaultProps("HvDropDownMenu", props);
|
|
38
|
-
const { classes, cx
|
|
37
|
+
const { classes, cx } = useClasses(classesProp);
|
|
39
38
|
const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));
|
|
40
39
|
const id = useUniqueId(idProp);
|
|
41
40
|
const focusNodes = getPrevNextFocus(setId(id, "icon-button"));
|
|
@@ -68,28 +67,21 @@ const HvDropDownMenu = (props) => {
|
|
|
68
67
|
},
|
|
69
68
|
expanded: open && !disabled,
|
|
70
69
|
component: /* @__PURE__ */ jsx(
|
|
71
|
-
|
|
70
|
+
HvDropdownButton,
|
|
72
71
|
{
|
|
73
|
-
icon: true,
|
|
74
|
-
variant: variant ?? category,
|
|
75
72
|
id: setId(id, "icon-button"),
|
|
76
|
-
className: cx(
|
|
77
|
-
classes.icon,
|
|
78
|
-
{ [classes.iconSelected]: open },
|
|
79
|
-
size && icon && css(getIconSizeStyles(size))
|
|
80
|
-
),
|
|
81
|
-
"aria-expanded": open,
|
|
82
73
|
disabled,
|
|
74
|
+
className: cx(classes.icon, {
|
|
75
|
+
[classes.iconSelected]: open
|
|
76
|
+
}),
|
|
83
77
|
size,
|
|
78
|
+
variant: variant ?? category,
|
|
79
|
+
open,
|
|
80
|
+
"aria-expanded": open,
|
|
84
81
|
"aria-label": "Dropdown menu",
|
|
85
82
|
"aria-haspopup": "menu",
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
{
|
|
89
|
-
"aria-hidden": true,
|
|
90
|
-
color: disabled ? "secondary_60" : void 0
|
|
91
|
-
}
|
|
92
|
-
)
|
|
83
|
+
icon: true,
|
|
84
|
+
children: icon || /* @__PURE__ */ jsx(MoreOptionsVertical, { role: "presentation" })
|
|
93
85
|
}
|
|
94
86
|
),
|
|
95
87
|
placement,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropDownMenu.js","sources":["../../../src/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { getPrevNextFocus } from \"../utils/focusableElementFinder\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport {
|
|
1
|
+
{"version":3,"file":"DropDownMenu.js","sources":["../../../src/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { getPrevNextFocus } from \"../utils/focusableElementFinder\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvButtonSize, HvButtonVariant } from \"../Button\";\nimport { HvList, HvListProps, HvListValue } from \"../List\";\nimport { HvPanel } from \"../Panel\";\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\nimport { HvDropdownButton } from \"../DropdownButton\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropDownMenuProps\n extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n /** Icon. */\n icon?: React.ReactElement;\n /**\n * A list containing the elements to be rendered.\n *\n * - label: The label of the element to be rendered.\n * - selected: The selection state of the element.\n * - disabled: The disabled state of the element.\n * - icon: The icon node to be rendered on the left.\n * - showNavIcon: If true renders the navigation icon on the right.\n */\n dataList: HvListValue[];\n /** Placement of the dropdown. */\n placement?: \"left\" | \"right\";\n /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n disablePortal?: boolean;\n /** Function executed on toggle of the dropdown. Should receive the open status. */\n onToggle?: (event: Event, open: boolean) => void;\n /** Function executed in each onClick. Should received the clicked element. */\n onClick?: (\n event: React.ChangeEvent<HTMLLIElement>,\n value: HvListValue\n ) => void;\n /** Keep the Dropdown Menu opened after clicking one option */\n keepOpened?: boolean;\n /** Defines if the component is disabled. */\n disabled?: boolean;\n /** If true it should be displayed open. */\n expanded?: boolean;\n /** When uncontrolled, defines the initial expanded state. */\n defaultExpanded?: boolean;\n /**\n * The variant to be used in the header.\n * @deprecated Use `variant` instead\n */\n category?: HvButtonVariant;\n /** The variant to be used in the header. */\n variant?: HvButtonVariant;\n /** Button size. */\n size?: HvButtonSize;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDropDownMenuClasses;\n}\n\n/**\n * A dropdown menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = (props: HvDropDownMenuProps) => {\n const {\n id: idProp,\n classes: classesProp,\n className,\n icon,\n placement = \"right\",\n dataList,\n disablePortal = false,\n onToggle,\n onClick,\n keepOpened = true,\n disabled = false,\n expanded,\n defaultExpanded = false,\n category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n variant,\n size = \"md\",\n ...others\n } = useDefaultProps(\"HvDropDownMenu\", props);\n\n const { classes, cx } = useClasses(classesProp);\n const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n const id = useUniqueId(idProp);\n const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n const listId = setId(id, \"list\");\n\n const handleClose = (event: ChangeEvent) => {\n // this will only run if uncontrolled\n setOpen(false);\n onToggle?.(event as any, false);\n };\n\n // If the ESCAPE key is pressed inside the list, the close handler must be called.\n const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n if (isKey(event, \"Tab\")) {\n const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n if (node) setTimeout(() => node.focus(), 0);\n handleClose(event as any);\n }\n event.preventDefault();\n };\n\n const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n containerRef\n ) => {\n containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n };\n\n const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n\n return (\n <HvBaseDropdown\n id={id}\n className={cx(classes.container, className)}\n classes={{\n root: classes.root,\n container: classes.baseContainer,\n }}\n expanded={open && !disabled}\n component={\n <HvDropdownButton\n id={setId(id, \"icon-button\")}\n disabled={disabled}\n className={cx(classes.icon, {\n [classes.iconSelected]: open,\n })}\n size={size}\n variant={variant ?? category}\n open={open}\n aria-expanded={open}\n aria-label=\"Dropdown menu\" // TODO - translate\n aria-haspopup=\"menu\"\n icon\n >\n {icon || <MoreOptionsVertical role=\"presentation\" />}\n </HvDropdownButton>\n }\n placement={placement}\n variableWidth\n disablePortal={disablePortal}\n onToggle={(e, s) => {\n // this will only run if uncontrolled\n setOpen(s);\n onToggle?.(e, s);\n }}\n disabled={disabled}\n onContainerCreation={setFocusToContent}\n {...others}\n >\n <HvPanel className={classes.menuListRoot}>\n <HvList\n id={listId}\n values={dataList}\n selectable={false}\n condensed={condensed}\n onClick={(event, item) => {\n if (!keepOpened) handleClose(event);\n onClick?.(event, item);\n }}\n onKeyDown={handleKeyDown}\n classes={{\n root: classes.menuList,\n }}\n />\n </HvPanel>\n </HvBaseDropdown>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuEa,MAAA,iBAAiB,CAAC,UAA+B;AACtD,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX;AAAA,IACA,kBAAkB;AAAA,IAClB,WAAW;AAAA;AAAA,IACX;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,QAAA,CAAC,MAAM,OAAO,IAAI,cAAc,UAAU,QAAQ,eAAe,CAAC;AAClE,QAAA,KAAK,YAAY,MAAM;AAC7B,QAAM,aAAa,iBAAiB,MAAM,IAAI,aAAa,CAAC;AAEtD,QAAA,SAAS,MAAM,IAAI,MAAM;AAEzB,QAAA,cAAc,CAAC,UAAuB;AAE1C,YAAQ,KAAK;AACb,eAAW,OAAc,KAAK;AAAA,EAAA;AAI1B,QAAA,gBAA0C,CAAC,UAAU;AACrD,QAAA,MAAM,OAAO,KAAK,GAAG;AACvB,YAAM,OAAO,MAAM,WAAW,WAAW,YAAY,WAAW;AAC5D,UAAA;AAAM,mBAAW,MAAM,KAAK,MAAM,GAAG,CAAC;AAC1C,kBAAY,KAAY;AAAA,IAC1B;AACA,UAAM,eAAe;AAAA,EAAA;AAGjB,QAAA,oBAAgE,CACpE,iBACG;AACH,kBAAc,qBAAqB,IAAI,EAAE,CAAC,GAAG,MAAM;AAAA,EAAA;AAGrD,QAAM,YAAY,QAAQ,MAAM,SAAS,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC;AAG1E,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,QAAQ,WAAW,SAAS;AAAA,MAC1C,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,WAAW,QAAQ;AAAA,MACrB;AAAA,MACA,UAAU,QAAQ,CAAC;AAAA,MACnB,WACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,aAAa;AAAA,UAC3B;AAAA,UACA,WAAW,GAAG,QAAQ,MAAM;AAAA,YAC1B,CAAC,QAAQ,YAAY,GAAG;AAAA,UAAA,CACzB;AAAA,UACD;AAAA,UACA,SAAS,WAAW;AAAA,UACpB;AAAA,UACA,iBAAe;AAAA,UACf,cAAW;AAAA,UACX,iBAAc;AAAA,UACd,MAAI;AAAA,UAEH,UAAQ,QAAA,oBAAC,qBAAoB,EAAA,MAAK,gBAAe;AAAA,QAAA;AAAA,MACpD;AAAA,MAEF;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA,UAAU,CAAC,GAAG,MAAM;AAElB,gBAAQ,CAAC;AACT,mBAAW,GAAG,CAAC;AAAA,MACjB;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MACpB,GAAG;AAAA,MAEJ,UAAC,oBAAA,SAAA,EAAQ,WAAW,QAAQ,cAC1B,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ;AAAA,UACA,SAAS,CAAC,OAAO,SAAS;AACxB,gBAAI,CAAC;AAAY,0BAAY,KAAK;AAClC,sBAAU,OAAO,IAAI;AAAA,UACvB;AAAA,UACA,WAAW;AAAA,UACX,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,UAChB;AAAA,QAAA;AAAA,MAAA,GAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|