@veeqo/ui 9.4.1 → 9.5.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/README.md +1 -1
- package/dist/components/Accordion/Accordion.js +21 -21
- package/dist/components/Accordion/Accordion.js.map +1 -1
- package/dist/components/ActionMenu/ActionMenu.js +4 -4
- package/dist/components/ActionMenu/ActionMenu.js.map +1 -1
- package/dist/components/Alerts/Alert/Alert.js +11 -11
- package/dist/components/Alerts/Alert/Alert.js.map +1 -1
- package/dist/components/Alerts/MiniAlert/MiniAlert.js +4 -4
- package/dist/components/Alerts/MiniAlert/MiniAlert.js.map +1 -1
- package/dist/components/Anchor/Anchor.js +2 -2
- package/dist/components/Anchor/Anchor.js.map +1 -1
- package/dist/components/AnimatedDropdown/AnimatedDropdown.js +5 -5
- package/dist/components/AnimatedDropdown/AnimatedDropdown.js.map +1 -1
- package/dist/components/AnimatedDropdown/components/BasicDropdown.js +2 -2
- package/dist/components/AnimatedDropdown/components/BasicDropdown.js.map +1 -1
- package/dist/components/Avatar/Avatar.js +2 -2
- package/dist/components/Avatar/Avatar.js.map +1 -1
- package/dist/components/Badge/Badge.js +4 -4
- package/dist/components/Badge/Badge.js.map +1 -1
- package/dist/components/Banner/Banner.js +7 -7
- package/dist/components/Banner/Banner.js.map +1 -1
- package/dist/components/Breadcrumbs/Breadcrumbs.js +5 -5
- package/dist/components/Breadcrumbs/Breadcrumbs.js.map +1 -1
- package/dist/components/Breadcrumbs/components/Breadcrumb.js +4 -4
- package/dist/components/Breadcrumbs/components/Breadcrumb.js.map +1 -1
- package/dist/components/Button/Button.js +7 -7
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Calendars/components/Calendar/Calendar.js +4 -4
- package/dist/components/Calendars/components/Calendar/Calendar.js.map +1 -1
- package/dist/components/Calendars/components/RangeCalendar/RangeCalendar.js +4 -4
- package/dist/components/Calendars/components/RangeCalendar/RangeCalendar.js.map +1 -1
- package/dist/components/Calendars/components/subcomponents/CalendarGrid/CalendarGrid.js +4 -4
- package/dist/components/Calendars/components/subcomponents/CalendarGrid/CalendarGrid.js.map +1 -1
- package/dist/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/DodecadeCalendar.js +2 -2
- package/dist/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/DodecadeCalendar.js.map +1 -1
- package/dist/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/MonthCalendar.js +4 -4
- package/dist/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/MonthCalendar.js.map +1 -1
- package/dist/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/YearCalendar.js +2 -2
- package/dist/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/YearCalendar.js.map +1 -1
- package/dist/components/Calendars/components/subcomponents/CalendarHeader.js +9 -9
- package/dist/components/Calendars/components/subcomponents/CalendarHeader.js.map +1 -1
- package/dist/components/Calendars/components/subcomponents/CalendarHeading.js +2 -2
- package/dist/components/Calendars/components/subcomponents/CalendarHeading.js.map +1 -1
- package/dist/components/Card/Card.js +6 -6
- package/dist/components/Card/Card.js.map +1 -1
- package/dist/components/CardHeader/CardHeader.js +8 -8
- package/dist/components/CardHeader/CardHeader.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.js +3 -3
- package/dist/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/components/Choice/Choice.js +14 -14
- package/dist/components/Choice/Choice.js.map +1 -1
- package/dist/components/ChoiceList/ChoiceList.js +4 -4
- package/dist/components/ChoiceList/ChoiceList.js.map +1 -1
- package/dist/components/CopyToClipboard/CopyToClipboard.js +4 -4
- package/dist/components/CopyToClipboard/CopyToClipboard.js.map +1 -1
- package/dist/components/DataTable/DataTable.js +34 -34
- package/dist/components/DataTable/DataTable.js.map +1 -1
- package/dist/components/DataTable/components/ActionBar.js +3 -3
- package/dist/components/DataTable/components/ActionBar.js.map +1 -1
- package/dist/components/DataTable/components/ColumnDivider.js +2 -2
- package/dist/components/DataTable/components/ColumnDivider.js.map +1 -1
- package/dist/components/DataTable/components/ColumnMenu.cjs +1 -1
- package/dist/components/DataTable/components/ColumnMenu.cjs.map +1 -1
- package/dist/components/DataTable/components/ColumnMenu.js +11 -11
- package/dist/components/DataTable/components/ColumnMenu.js.map +1 -1
- package/dist/components/DataTable/components/SelectionCell.js +5 -5
- package/dist/components/DataTable/components/SelectionCell.js.map +1 -1
- package/dist/components/DataTable/components/SelectionHeader.js +4 -4
- package/dist/components/DataTable/components/SelectionHeader.js.map +1 -1
- package/dist/components/DataTable/components/StickyHead.js +4 -4
- package/dist/components/DataTable/components/StickyHead.js.map +1 -1
- package/dist/components/DataTable/hooks/useSelection.js +3 -3
- package/dist/components/DataTable/hooks/useSelection.js.map +1 -1
- package/dist/components/DataTable/renderers/renderFooter.js +2 -2
- package/dist/components/DataTable/renderers/renderFooter.js.map +1 -1
- package/dist/components/DataTable/renderers/renderHeader.js +8 -8
- package/dist/components/DataTable/renderers/renderHeader.js.map +1 -1
- package/dist/components/DataTable/renderers/renderLoadingCell.js +3 -3
- package/dist/components/DataTable/renderers/renderLoadingCell.js.map +1 -1
- package/dist/components/DataTable/renderers/renderNestedCell.js +2 -2
- package/dist/components/DataTable/renderers/renderNestedCell.js.map +1 -1
- package/dist/components/DataTable/utils/GetSortIcon.cjs +2 -2
- package/dist/components/DataTable/utils/GetSortIcon.cjs.map +1 -1
- package/dist/components/DataTable/utils/GetSortIcon.js +5 -5
- package/dist/components/DataTable/utils/GetSortIcon.js.map +1 -1
- package/dist/components/DateInputField/DateInputField.js +11 -11
- package/dist/components/DateInputField/DateInputField.js.map +1 -1
- package/dist/components/DatePicker/DatePicker.js +9 -9
- package/dist/components/DatePicker/DatePicker.js.map +1 -1
- package/dist/components/DateRangePicker/DateRangePicker.js +12 -12
- package/dist/components/DateRangePicker/DateRangePicker.js.map +1 -1
- package/dist/components/DateRangePicker/components/ComparePreviousPeriod.js +5 -5
- package/dist/components/DateRangePicker/components/ComparePreviousPeriod.js.map +1 -1
- package/dist/components/DescriptionList/DescriptionList.js +9 -9
- package/dist/components/DescriptionList/DescriptionList.js.map +1 -1
- package/dist/components/DetailPage/DetailPage.js +4 -4
- package/dist/components/DetailPage/DetailPage.js.map +1 -1
- package/dist/components/DimensionsInput/DimensionsInput.js +10 -10
- package/dist/components/DimensionsInput/DimensionsInput.js.map +1 -1
- package/dist/components/Dropdown/Dropdown.js +4 -4
- package/dist/components/Dropdown/Dropdown.js.map +1 -1
- package/dist/components/Dropdown/DropdownPopover.js +4 -4
- package/dist/components/Dropdown/DropdownPopover.js.map +1 -1
- package/dist/components/FilterTag/FilterTag.js +12 -12
- package/dist/components/FilterTag/FilterTag.js.map +1 -1
- package/dist/components/Image/Image.js +8 -8
- package/dist/components/Image/Image.js.map +1 -1
- package/dist/components/Image/components/PlaceholderImage.js +3 -3
- package/dist/components/Image/components/PlaceholderImage.js.map +1 -1
- package/dist/components/Indicator/Indicator.js +2 -2
- package/dist/components/Indicator/Indicator.js.map +1 -1
- package/dist/components/InputGroup/components/InputGroupLabel/InputGroupLabel.js +3 -3
- package/dist/components/InputGroup/components/InputGroupLabel/InputGroupLabel.js.map +1 -1
- package/dist/components/LegacyDataTable/LegacyDataTable.cjs +2 -2
- package/dist/components/LegacyDataTable/LegacyDataTable.cjs.map +1 -1
- package/dist/components/LegacyDataTable/LegacyDataTable.js +40 -40
- package/dist/components/LegacyDataTable/LegacyDataTable.js.map +1 -1
- package/dist/components/LegacyDataTable/SkeletonContent/SkeletonContent.js +3 -3
- package/dist/components/LegacyDataTable/SkeletonContent/SkeletonContent.js.map +1 -1
- package/dist/components/LegacyDataTable/SpecificState/SpecificState.js +5 -5
- package/dist/components/LegacyDataTable/SpecificState/SpecificState.js.map +1 -1
- package/dist/components/LegacyDataTable/StickyHeader.js +3 -3
- package/dist/components/LegacyDataTable/StickyHeader.js.map +1 -1
- package/dist/components/LegacyDataTable/cells/ClickableCell.js +3 -3
- package/dist/components/LegacyDataTable/cells/ClickableCell.js.map +1 -1
- package/dist/components/LegacyDataTable/cells/EditableCell.js +4 -4
- package/dist/components/LegacyDataTable/cells/EditableCell.js.map +1 -1
- package/dist/components/LegacyDataTable/cells/SkeletonCell.js +3 -3
- package/dist/components/LegacyDataTable/cells/SkeletonCell.js.map +1 -1
- package/dist/components/LegacyDataTable/cells/SkeletonHeaderCell.js +3 -3
- package/dist/components/LegacyDataTable/cells/SkeletonHeaderCell.js.map +1 -1
- package/dist/components/LegacyDataTable/utils/constants.js +3 -3
- package/dist/components/LegacyDataTable/utils/constants.js.map +1 -1
- package/dist/components/Loader/Grid.js +20 -20
- package/dist/components/Loader/Grid.js.map +1 -1
- package/dist/components/Loader/Loader.js +4 -4
- package/dist/components/Loader/Loader.js.map +1 -1
- package/dist/components/Loader/TailSpin.js +13 -13
- package/dist/components/Loader/TailSpin.js.map +1 -1
- package/dist/components/Loader/ThreeDots.js +11 -11
- package/dist/components/Loader/ThreeDots.js.map +1 -1
- package/dist/components/LoginWithAmazonButton/LoginWithAmazonButton.js +3 -3
- package/dist/components/LoginWithAmazonButton/LoginWithAmazonButton.js.map +1 -1
- package/dist/components/Modal/Modal.js +11 -11
- package/dist/components/Modal/Modal.js.map +1 -1
- package/dist/components/Modal/components/Dialog/Dialog.js +2 -2
- package/dist/components/Modal/components/Dialog/Dialog.js.map +1 -1
- package/dist/components/Pagination/Pagination.js +9 -9
- package/dist/components/Pagination/Pagination.js.map +1 -1
- package/dist/components/Pagination/components.js +6 -6
- package/dist/components/Pagination/components.js.map +1 -1
- package/dist/components/Popover/Popover.js +4 -4
- package/dist/components/Popover/Popover.js.map +1 -1
- package/dist/components/PriceInput/PriceInput.js +6 -6
- package/dist/components/PriceInput/PriceInput.js.map +1 -1
- package/dist/components/Radio/Radio.js +3 -3
- package/dist/components/Radio/Radio.js.map +1 -1
- package/dist/components/ScreenReaderOnly/ScreenReaderOnly.js +2 -2
- package/dist/components/ScreenReaderOnly/ScreenReaderOnly.js.map +1 -1
- package/dist/components/Search/Search.js +9 -9
- package/dist/components/Search/Search.js.map +1 -1
- package/dist/components/SegmentedControl/SegmentedControl.js +2 -2
- package/dist/components/SegmentedControl/SegmentedControl.js.map +1 -1
- package/dist/components/Select/Select.js +3 -3
- package/dist/components/Select/Select.js.map +1 -1
- package/dist/components/ShortcutKeys/ShortcutKeys.js +6 -6
- package/dist/components/ShortcutKeys/ShortcutKeys.js.map +1 -1
- package/dist/components/SimpleTable/SimpleTable.js +2 -2
- package/dist/components/SimpleTable/SimpleTable.js.map +1 -1
- package/dist/components/Slider/Slider.js +6 -6
- package/dist/components/Slider/Slider.js.map +1 -1
- package/dist/components/Stepper/Stepper.js +6 -6
- package/dist/components/Stepper/Stepper.js.map +1 -1
- package/dist/components/TextField/TextField.js +3 -3
- package/dist/components/TextField/TextField.js.map +1 -1
- package/dist/components/ToastsLayout/ToastsLayout.js +4 -4
- package/dist/components/ToastsLayout/ToastsLayout.js.map +1 -1
- package/dist/components/ToastsLayout/components/Toast.js +10 -10
- package/dist/components/ToastsLayout/components/Toast.js.map +1 -1
- package/dist/components/Toggle/Toggle.js +6 -6
- package/dist/components/Toggle/Toggle.js.map +1 -1
- package/dist/components/ToggleButton/ToggleButton.js +2 -2
- package/dist/components/ToggleButton/ToggleButton.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.js +5 -5
- package/dist/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/components/Tooltip/components/TooltipPopover.js +4 -4
- package/dist/components/Tooltip/components/TooltipPopover.js.map +1 -1
- package/dist/components/UploadFile/UploadFile.js +13 -13
- package/dist/components/UploadFile/UploadFile.js.map +1 -1
- package/dist/components/UploadFile/UploadGraphic.js +4 -4
- package/dist/components/UploadFile/UploadGraphic.js.map +1 -1
- package/dist/components/UploadFile/components/UploadCopy/UploadCopy.js +4 -4
- package/dist/components/UploadFile/components/UploadCopy/UploadCopy.js.map +1 -1
- package/dist/components/UploadFile/components/UploadFileErrors/UploadFileErrors.js +4 -4
- package/dist/components/UploadFile/components/UploadFileErrors/UploadFileErrors.js.map +1 -1
- package/dist/components/UploadFile/components/UploadedFile/UploadedFile.js +4 -4
- package/dist/components/UploadFile/components/UploadedFile/UploadedFile.js.map +1 -1
- package/dist/components/VideoModal/VideoModal.js +6 -6
- package/dist/components/VideoModal/VideoModal.js.map +1 -1
- package/dist/components/VideoModal/components/Popup.js +7 -7
- package/dist/components/VideoModal/components/Popup.js.map +1 -1
- package/dist/components/View/View.js +9 -9
- package/dist/components/View/View.js.map +1 -1
- package/dist/components/ViewTab/ViewTab.js +10 -10
- package/dist/components/ViewTab/ViewTab.js.map +1 -1
- package/dist/components/ViewsContainer/ViewsContainer.js +9 -9
- package/dist/components/ViewsContainer/ViewsContainer.js.map +1 -1
- package/dist/components/WeightInput/WeightInput.js +13 -13
- package/dist/components/WeightInput/WeightInput.js.map +1 -1
- package/dist/hoc/withDeprecated.js +2 -2
- package/dist/hoc/withDeprecated.js.map +1 -1
- package/dist/hoc/withLabels/withLabels.js +13 -13
- package/dist/hoc/withLabels/withLabels.js.map +1 -1
- package/dist/hooks/useFocusVisible.js +8 -8
- package/dist/hooks/useFocusVisible.js.map +1 -1
- package/dist/index.cjs +74 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +37 -0
- package/dist/index.js.map +1 -1
- package/dist/tempIcons/ActiveCheckboxIcon.cjs +14 -0
- package/dist/tempIcons/ActiveCheckboxIcon.cjs.map +1 -0
- package/dist/tempIcons/ActiveCheckboxIcon.js +8 -0
- package/dist/tempIcons/ActiveCheckboxIcon.js.map +1 -0
- package/dist/tempIcons/ActiveRadioIcon.cjs +14 -0
- package/dist/tempIcons/ActiveRadioIcon.cjs.map +1 -0
- package/dist/tempIcons/ActiveRadioIcon.js +8 -0
- package/dist/tempIcons/ActiveRadioIcon.js.map +1 -0
- package/dist/tempIcons/ArrowDownIcon.js +3 -3
- package/dist/tempIcons/ArrowDownIcon.js.map +1 -1
- package/dist/tempIcons/ArrowUpIcon.js +3 -3
- package/dist/tempIcons/ArrowUpIcon.js.map +1 -1
- package/dist/tempIcons/AttentionIcon.js +3 -3
- package/dist/tempIcons/AttentionIcon.js.map +1 -1
- package/dist/tempIcons/CalendarIcon.js +3 -3
- package/dist/tempIcons/CalendarIcon.js.map +1 -1
- package/dist/tempIcons/ClipboardIcon.js +3 -3
- package/dist/tempIcons/ClipboardIcon.js.map +1 -1
- package/dist/tempIcons/CrossIcon.js +3 -3
- package/dist/tempIcons/CrossIcon.js.map +1 -1
- package/dist/tempIcons/DashboardIcon.cjs +13 -0
- package/dist/tempIcons/DashboardIcon.cjs.map +1 -0
- package/dist/tempIcons/DashboardIcon.d.ts +2 -0
- package/dist/tempIcons/DashboardIcon.js +7 -0
- package/dist/tempIcons/DashboardIcon.js.map +1 -0
- package/dist/tempIcons/DestructiveIcon.cjs +30 -0
- package/dist/tempIcons/DestructiveIcon.cjs.map +1 -0
- package/dist/tempIcons/DestructiveIcon.js +8 -0
- package/dist/tempIcons/DestructiveIcon.js.map +1 -0
- package/dist/tempIcons/DoubleArrowAscIcon.js +4 -4
- package/dist/tempIcons/DoubleArrowAscIcon.js.map +1 -1
- package/dist/tempIcons/DoubleArrowDescIcon.js +4 -4
- package/dist/tempIcons/DoubleArrowDescIcon.js.map +1 -1
- package/dist/tempIcons/{DoubleArrowIconIcon.cjs → DoubleArrowIcon.cjs} +1 -1
- package/dist/tempIcons/DoubleArrowIcon.cjs.map +1 -0
- package/dist/tempIcons/DoubleArrowIcon.js +8 -0
- package/dist/tempIcons/DoubleArrowIcon.js.map +1 -0
- package/dist/tempIcons/DownArrowIcon.js +3 -3
- package/dist/tempIcons/DownArrowIcon.js.map +1 -1
- package/dist/tempIcons/DragIndicatorIcon.cjs +13 -0
- package/dist/tempIcons/DragIndicatorIcon.cjs.map +1 -0
- package/dist/tempIcons/DragIndicatorIcon.js +7 -0
- package/dist/tempIcons/DragIndicatorIcon.js.map +1 -0
- package/dist/tempIcons/DropdownIcon.js +3 -3
- package/dist/tempIcons/DropdownIcon.js.map +1 -1
- package/dist/tempIcons/EditIcon.js +3 -3
- package/dist/tempIcons/EditIcon.js.map +1 -1
- package/dist/tempIcons/EndArrowIcon.js +4 -4
- package/dist/tempIcons/EndArrowIcon.js.map +1 -1
- package/dist/tempIcons/FailIcon.js +3 -3
- package/dist/tempIcons/FailIcon.js.map +1 -1
- package/dist/tempIcons/HelpIcon.js +3 -3
- package/dist/tempIcons/HelpIcon.js.map +1 -1
- package/dist/tempIcons/InactiveCheckboxIcon.cjs +14 -0
- package/dist/tempIcons/InactiveCheckboxIcon.cjs.map +1 -0
- package/dist/tempIcons/InactiveCheckboxIcon.js +8 -0
- package/dist/tempIcons/InactiveCheckboxIcon.js.map +1 -0
- package/dist/tempIcons/InactiveRadioIcon.cjs +14 -0
- package/dist/tempIcons/InactiveRadioIcon.cjs.map +1 -0
- package/dist/tempIcons/InactiveRadioIcon.js +8 -0
- package/dist/tempIcons/InactiveRadioIcon.js.map +1 -0
- package/dist/tempIcons/InfoIcon.js +5 -5
- package/dist/tempIcons/InfoIcon.js.map +1 -1
- package/dist/tempIcons/LeftArrowIcon.js +3 -3
- package/dist/tempIcons/LeftArrowIcon.js.map +1 -1
- package/dist/tempIcons/MergeIcon.js +3 -3
- package/dist/tempIcons/MergeIcon.js.map +1 -1
- package/dist/tempIcons/PlusIcon.cjs +30 -0
- package/dist/tempIcons/PlusIcon.cjs.map +1 -0
- package/dist/tempIcons/PlusIcon.js +8 -0
- package/dist/tempIcons/PlusIcon.js.map +1 -0
- package/dist/tempIcons/RecommendIcon.js +5 -5
- package/dist/tempIcons/RecommendIcon.js.map +1 -1
- package/dist/tempIcons/ReorderIcon.js +3 -3
- package/dist/tempIcons/ReorderIcon.js.map +1 -1
- package/dist/tempIcons/RightArrowIcon.js +3 -3
- package/dist/tempIcons/RightArrowIcon.js.map +1 -1
- package/dist/tempIcons/SearchIcon.js +3 -3
- package/dist/tempIcons/SearchIcon.js.map +1 -1
- package/dist/tempIcons/StartArrowIcon.js +4 -4
- package/dist/tempIcons/StartArrowIcon.js.map +1 -1
- package/dist/tempIcons/SuccessIcon.js +3 -3
- package/dist/tempIcons/SuccessIcon.js.map +1 -1
- package/dist/tempIcons/ThreeDotsIcon.js +3 -3
- package/dist/tempIcons/ThreeDotsIcon.js.map +1 -1
- package/dist/tempIcons/UpArrowIcon.js +3 -3
- package/dist/tempIcons/UpArrowIcon.js.map +1 -1
- package/dist/tempIcons/VisibilityIcon.cjs +2 -2
- package/dist/tempIcons/VisibilityIcon.cjs.map +1 -1
- package/dist/tempIcons/VisibilityIcon.d.ts +1 -1
- package/dist/tempIcons/VisibilityIcon.js +4 -4
- package/dist/tempIcons/VisibilityIcon.js.map +1 -1
- package/dist/tempIcons/VisibilityOffIcon.cjs +2 -2
- package/dist/tempIcons/VisibilityOffIcon.cjs.map +1 -1
- package/dist/tempIcons/VisibilityOffIcon.d.ts +1 -1
- package/dist/tempIcons/VisibilityOffIcon.js +4 -4
- package/dist/tempIcons/VisibilityOffIcon.js.map +1 -1
- package/dist/tempIcons/WarningIcon.js +4 -4
- package/dist/tempIcons/WarningIcon.js.map +1 -1
- package/dist/tempIcons/index.d.ts +37 -0
- package/package.json +1 -1
- package/dist/tempIcons/DoubleArrowIconIcon.cjs.map +0 -1
- package/dist/tempIcons/DoubleArrowIconIcon.d.ts +0 -2
- package/dist/tempIcons/DoubleArrowIconIcon.js +0 -8
- package/dist/tempIcons/DoubleArrowIconIcon.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import React from 'react';\nimport { PaginationProps } from './types';\n\nimport { Stack } from '../Stack';\nimport { PageInput, PaginationButton } from './styled';\nimport { PageCount } from './components';\nimport { usePagination } from './hooks/usePagination';\n\nimport { RightArrowIcon } from '../../tempIcons/RightArrowIcon';\nimport { StartArrowIcon } from '../../tempIcons/StartArrowIcon';\nimport { LeftArrowIcon } from '../../tempIcons/LeftArrowIcon';\nimport { EndArrowIcon } from '../../tempIcons/EndArrowIcon';\n\nimport { ComponentSize } from '../types';\n\nexport const Pagination = ({\n testId,\n e2eClassName,\n currentPage,\n totalPagesCount,\n handleChangePage,\n}: PaginationProps) => {\n const {\n pageInputValue,\n handleIncrement,\n handleDecrement,\n handleFormSubmit,\n handleInputChange,\n handleSubmit,\n } = usePagination({\n currentPage,\n totalPagesCount,\n handleChangePage,\n });\n\n /**\n * A function to go back to the first page, provided we aren't already there.\n */\n const handleSkipBack = () => {\n if (currentPage !== 1) handleChangePage(1);\n };\n\n /**\n * A function to go to the last page, provided we aren't already there.\n */\n const handleSkipToEnd = () => {\n if (currentPage !== totalPagesCount) handleChangePage(totalPagesCount);\n };\n\n return (\n <Stack\n direction=\"horizontal\"\n alignY=\"center\"\n spacing=\"xs\"\n data-testid={testId}\n className={e2eClassName}\n >\n <PaginationButton\n onClick={handleSkipBack}\n iconSlot={<StartArrowIcon />}\n size=\"sm\"\n aria-label=\"go to first page\"\n />\n <PaginationButton\n onClick={handleDecrement}\n iconSlot={<LeftArrowIcon />}\n size=\"sm\"\n aria-label=\"go to previous page\"\n aria-disabled={currentPage <= 1}\n />\n\n <form onSubmit={handleFormSubmit}>\n <PageInput\n aria-live=\"polite\"\n aria-label={`page ${currentPage} of ${totalPagesCount}`}\n size={ComponentSize.sm}\n type=\"number\"\n value={pageInputValue}\n min=\"1\"\n max={`${totalPagesCount}`}\n onChange={handleInputChange}\n onBlur={handleSubmit}\n />\n </form>\n\n <PageCount count={totalPagesCount} />\n\n <PaginationButton\n onClick={handleIncrement}\n iconSlot={<RightArrowIcon />}\n size=\"sm\"\n aria-label=\"go to next page\"\n aria-disabled={currentPage >= totalPagesCount}\n />\n\n <PaginationButton\n onClick={handleSkipToEnd}\n iconSlot={<EndArrowIcon />}\n size=\"sm\"\n aria-label=\"go to last page\"\n aria-disabled={currentPage >= totalPagesCount}\n />\n </Stack>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAea,MAAA,UAAU,GAAG,CAAC,EACzB,MAAM,EACN,YAAY,EACZ,WAAW,EACX,eAAe,EACf,gBAAgB,GACA,KAAI;AACpB,IAAA,MAAM,EACJ,cAAc,EACd,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,GACb,GAAG,aAAa,CAAC;QAChB,WAAW;QACX,eAAe;QACf,gBAAgB;AACjB,KAAA,CAAC;AAEF;;AAEG;IACH,MAAM,cAAc,GAAG,MAAK;QAC1B,IAAI,WAAW,KAAK,CAAC;YAAE,gBAAgB,CAAC,CAAC,CAAC;AAC5C,KAAC;AAED;;AAEG;IACH,MAAM,eAAe,GAAG,MAAK;QAC3B,IAAI,WAAW,KAAK,eAAe;YAAE,gBAAgB,CAAC,eAAe,CAAC;AACxE,KAAC;IAED,
|
|
1
|
+
{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import React from 'react';\nimport { PaginationProps } from './types';\n\nimport { Stack } from '../Stack';\nimport { PageInput, PaginationButton } from './styled';\nimport { PageCount } from './components';\nimport { usePagination } from './hooks/usePagination';\n\nimport { RightArrowIcon } from '../../tempIcons/RightArrowIcon';\nimport { StartArrowIcon } from '../../tempIcons/StartArrowIcon';\nimport { LeftArrowIcon } from '../../tempIcons/LeftArrowIcon';\nimport { EndArrowIcon } from '../../tempIcons/EndArrowIcon';\n\nimport { ComponentSize } from '../types';\n\nexport const Pagination = ({\n testId,\n e2eClassName,\n currentPage,\n totalPagesCount,\n handleChangePage,\n}: PaginationProps) => {\n const {\n pageInputValue,\n handleIncrement,\n handleDecrement,\n handleFormSubmit,\n handleInputChange,\n handleSubmit,\n } = usePagination({\n currentPage,\n totalPagesCount,\n handleChangePage,\n });\n\n /**\n * A function to go back to the first page, provided we aren't already there.\n */\n const handleSkipBack = () => {\n if (currentPage !== 1) handleChangePage(1);\n };\n\n /**\n * A function to go to the last page, provided we aren't already there.\n */\n const handleSkipToEnd = () => {\n if (currentPage !== totalPagesCount) handleChangePage(totalPagesCount);\n };\n\n return (\n <Stack\n direction=\"horizontal\"\n alignY=\"center\"\n spacing=\"xs\"\n data-testid={testId}\n className={e2eClassName}\n >\n <PaginationButton\n onClick={handleSkipBack}\n iconSlot={<StartArrowIcon />}\n size=\"sm\"\n aria-label=\"go to first page\"\n />\n <PaginationButton\n onClick={handleDecrement}\n iconSlot={<LeftArrowIcon />}\n size=\"sm\"\n aria-label=\"go to previous page\"\n aria-disabled={currentPage <= 1}\n />\n\n <form onSubmit={handleFormSubmit}>\n <PageInput\n aria-live=\"polite\"\n aria-label={`page ${currentPage} of ${totalPagesCount}`}\n size={ComponentSize.sm}\n type=\"number\"\n value={pageInputValue}\n min=\"1\"\n max={`${totalPagesCount}`}\n onChange={handleInputChange}\n onBlur={handleSubmit}\n />\n </form>\n\n <PageCount count={totalPagesCount} />\n\n <PaginationButton\n onClick={handleIncrement}\n iconSlot={<RightArrowIcon />}\n size=\"sm\"\n aria-label=\"go to next page\"\n aria-disabled={currentPage >= totalPagesCount}\n />\n\n <PaginationButton\n onClick={handleSkipToEnd}\n iconSlot={<EndArrowIcon />}\n size=\"sm\"\n aria-label=\"go to last page\"\n aria-disabled={currentPage >= totalPagesCount}\n />\n </Stack>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;AAea,MAAA,UAAU,GAAG,CAAC,EACzB,MAAM,EACN,YAAY,EACZ,WAAW,EACX,eAAe,EACf,gBAAgB,GACA,KAAI;AACpB,IAAA,MAAM,EACJ,cAAc,EACd,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,GACb,GAAG,aAAa,CAAC;QAChB,WAAW;QACX,eAAe;QACf,gBAAgB;AACjB,KAAA,CAAC;AAEF;;AAEG;IACH,MAAM,cAAc,GAAG,MAAK;QAC1B,IAAI,WAAW,KAAK,CAAC;YAAE,gBAAgB,CAAC,CAAC,CAAC;AAC5C,KAAC;AAED;;AAEG;IACH,MAAM,eAAe,GAAG,MAAK;QAC3B,IAAI,WAAW,KAAK,eAAe;YAAE,gBAAgB,CAAC,eAAe,CAAC;AACxE,KAAC;IAED,QACEA,6BAAC,KAAK,EAAA,EACJ,SAAS,EAAC,YAAY,EACtB,MAAM,EAAC,QAAQ,EACf,OAAO,EAAC,IAAI,EAAA,aAAA,EACC,MAAM,EACnB,SAAS,EAAE,YAAY,EAAA;AAEvB,QAAAA,cAAA,CAAA,aAAA,CAAC,gBAAgB,EACf,EAAA,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,cAAc,OAAG,EAC5B,IAAI,EAAC,IAAI,EAAA,YAAA,EACE,kBAAkB,EAC7B,CAAA;QACFA,cAAC,CAAA,aAAA,CAAA,gBAAgB,IACf,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,aAAa,OAAG,EAC3B,IAAI,EAAC,IAAI,EAAA,YAAA,EACE,qBAAqB,EACjB,eAAA,EAAA,WAAW,IAAI,CAAC,EAC/B,CAAA;QAEFA,cAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,QAAQ,EAAE,gBAAgB,EAAA;AAC9B,YAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EACE,EAAA,WAAA,EAAA,QAAQ,gBACN,CAAQ,KAAA,EAAA,WAAW,OAAO,eAAe,CAAA,CAAE,EACvD,IAAI,EAAE,aAAa,CAAC,EAAE,EACtB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,cAAc,EACrB,GAAG,EAAC,GAAG,EACP,GAAG,EAAE,CAAG,EAAA,eAAe,EAAE,EACzB,QAAQ,EAAE,iBAAiB,EAC3B,MAAM,EAAE,YAAY,GACpB,CACG;AAEP,QAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAE,eAAe,EAAI,CAAA;QAErCA,cAAC,CAAA,aAAA,CAAA,gBAAgB,IACf,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,cAAc,OAAG,EAC5B,IAAI,EAAC,IAAI,EAAA,YAAA,EACE,iBAAiB,EACb,eAAA,EAAA,WAAW,IAAI,eAAe,EAC7C,CAAA;QAEFA,cAAC,CAAA,aAAA,CAAA,gBAAgB,EACf,EAAA,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,YAAY,EAAG,IAAA,CAAA,EAC1B,IAAI,EAAC,IAAI,EACE,YAAA,EAAA,iBAAiB,EACb,eAAA,EAAA,WAAW,IAAI,eAAe,EAAA,CAC7C,CACI;AAEZ;;;;"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default from 'react';
|
|
2
2
|
import { Text } from '../Text/Text.js';
|
|
3
3
|
import { PageLimitContainer } from './styled.js';
|
|
4
4
|
|
|
5
|
-
const PageCount = ({ count }) => (
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
5
|
+
const PageCount = ({ count }) => (React__default.createElement(React__default.Fragment, null,
|
|
6
|
+
React__default.createElement("div", null,
|
|
7
|
+
React__default.createElement(Text, { variant: "bodySmall", "aria-hidden": true }, "/")),
|
|
8
|
+
React__default.createElement(PageLimitContainer, { alignX: "center", alignY: "center", "aria-hidden": true },
|
|
9
|
+
React__default.createElement(Text, { variant: "bodySmall" }, count))));
|
|
10
10
|
|
|
11
11
|
export { PageCount };
|
|
12
12
|
//# sourceMappingURL=components.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components.js","sources":["../../../src/components/Pagination/components.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '../Text';\nimport { PageLimitContainer } from './styled';\n\nexport const PageCount = ({ count }: { count: number }) => (\n <>\n <div>\n <Text variant=\"bodySmall\" aria-hidden>\n /\n </Text>\n </div>\n <PageLimitContainer alignX=\"center\" alignY=\"center\" aria-hidden>\n <Text variant=\"bodySmall\">{count}</Text>\n </PageLimitContainer>\n </>\n);\n"],"names":[],"mappings":";;;;AAIa,MAAA,SAAS,GAAG,CAAC,EAAE,KAAK,EAAqB,
|
|
1
|
+
{"version":3,"file":"components.js","sources":["../../../src/components/Pagination/components.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '../Text';\nimport { PageLimitContainer } from './styled';\n\nexport const PageCount = ({ count }: { count: number }) => (\n <>\n <div>\n <Text variant=\"bodySmall\" aria-hidden>\n /\n </Text>\n </div>\n <PageLimitContainer alignX=\"center\" alignY=\"center\" aria-hidden>\n <Text variant=\"bodySmall\">{count}</Text>\n </PageLimitContainer>\n </>\n);\n"],"names":["React"],"mappings":";;;;AAIa,MAAA,SAAS,GAAG,CAAC,EAAE,KAAK,EAAqB,MACpDA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;AACE,IAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;AACE,QAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAC,WAAW,6BAElB,CACH;IACNA,cAAC,CAAA,aAAA,CAAA,kBAAkB,IAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,QAAQ,EAAA,aAAA,EAAA,IAAA,EAAA;QACjDA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,OAAO,EAAC,WAAW,EAAE,EAAA,KAAK,CAAQ,CACrB,CACpB;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default, { useState, useMemo, useEffect } from 'react';
|
|
2
2
|
import { usePopper } from 'react-popper';
|
|
3
3
|
import ResizeObserver from 'resize-observer-polyfill';
|
|
4
4
|
import { Portal } from '../Portal/Portal.js';
|
|
@@ -49,9 +49,9 @@ const Popover = ({ id: passedId, children, zIndex = theme.layers.popup, placemen
|
|
|
49
49
|
window.removeEventListener('resize', update);
|
|
50
50
|
};
|
|
51
51
|
}, [update]);
|
|
52
|
-
return (
|
|
53
|
-
!removeBackdrop && (
|
|
54
|
-
|
|
52
|
+
return (React__default.createElement(Portal, { rootElementRef: rootElementRef },
|
|
53
|
+
!removeBackdrop && (React__default.createElement(Backdrop, { onClick: onClose, zIndex: zIndex, "data-testid": "popover-backdrop" })),
|
|
54
|
+
React__default.createElement(PopoverDialog, { open: true, id: id, zIndex: zIndex, ref: setPopperElement, style: {
|
|
55
55
|
...styles.popper,
|
|
56
56
|
...style,
|
|
57
57
|
...(useAnchorWidth ? { minWidth: anchorElement === null || anchorElement === undefined ? undefined : anchorElement.clientWidth } : {}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useState, useEffect, useMemo } from 'react';\nimport { usePopper } from 'react-popper';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport { Portal } from '../Portal';\nimport { theme } from '../../theme';\nimport { PopoverDialog, Backdrop } from './styled';\nimport { generateId } from '../../utils';\nimport { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor';\nimport { PopoverProps } from './types';\nimport { useHandleFocus } from './hooks/useHandleFocus';\n\nexport const Popover = ({\n id: passedId,\n children,\n zIndex = theme.layers.popup,\n placement = 'bottom',\n anchorElement,\n rootElementRef,\n onShouldClose,\n style,\n disableFocusLock,\n removeBackdrop = false,\n useAnchorWidth,\n ignoreAriaWarnings,\n ...dialogProps\n}: PopoverProps) => {\n // Set up PopperJS\n const [popperElement, setPopperElement] = useState<HTMLDialogElement | null>(null);\n const { styles, attributes, update } = usePopper(anchorElement, popperElement, { placement });\n\n // Setup popover id to use passed, or generate its' own.\n const id = useMemo(() => passedId || generateId('popover'), [passedId]);\n\n // Check and update aria for anchor, only works once this has rendered for the first time though.\n useUpdateAriaAnchor({ anchorElement, popoverId: id, ignoreAriaWarnings });\n\n const onClose = () => {\n anchorElement?.focus();\n onShouldClose?.();\n };\n\n const { handleKeyDown } = useHandleFocus({\n popperElement,\n anchorElement,\n onClose,\n disableFocusLock,\n });\n\n /**\n * When content size is changed, force popper update\n */\n useEffect(() => {\n if (!update || !popperElement) return undefined;\n const resizeObserver = new ResizeObserver(update);\n resizeObserver.observe(popperElement);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [update, popperElement]);\n\n /**\n * When window is resized, force popper update\n */\n useEffect(() => {\n if (!update) return undefined;\n window.addEventListener('resize', update);\n\n return () => {\n window.removeEventListener('resize', update);\n };\n }, [update]);\n\n return (\n <Portal rootElementRef={rootElementRef}>\n {!removeBackdrop && (\n <Backdrop onClick={onClose} zIndex={zIndex} data-testid=\"popover-backdrop\" />\n )}\n <PopoverDialog\n open\n id={id}\n zIndex={zIndex}\n ref={setPopperElement}\n style={{\n ...styles.popper,\n ...style,\n ...(useAnchorWidth ? { minWidth: anchorElement?.clientWidth } : {}),\n }}\n onKeyDown={handleKeyDown}\n {...attributes.popper}\n {...dialogProps}\n >\n {children}\n </PopoverDialog>\n </Portal>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;MAYa,OAAO,GAAG,CAAC,EACtB,EAAE,EAAE,QAAQ,EACZ,QAAQ,EACR,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,EAC3B,SAAS,GAAG,QAAQ,EACpB,aAAa,EACb,cAAc,EACd,aAAa,EACb,KAAK,EACL,gBAAgB,EAChB,cAAc,GAAG,KAAK,EACtB,cAAc,EACd,kBAAkB,EAClB,GAAG,WAAW,EACD,KAAI;;IAEjB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAA2B,IAAI,CAAC;AAClF,IAAA,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC,aAAa,EAAE,aAAa,EAAE,EAAE,SAAS,EAAE,CAAC;;AAG7F,IAAA,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,QAAQ,IAAI,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;;IAGvE,mBAAmB,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,EAAE,kBAAkB,EAAE,CAAC;IAEzE,MAAM,OAAO,GAAG,MAAK;AACnB,QAAA,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,KAAK,EAAE;AACtB,QAAA,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,EAAI;AACnB,KAAC;AAED,IAAA,MAAM,EAAE,aAAa,EAAE,GAAG,cAAc,CAAC;QACvC,aAAa;QACb,aAAa;QACb,OAAO;QACP,gBAAgB;AACjB,KAAA,CAAC;AAEF;;AAEG;IACH,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,MAAM,IAAI,CAAC,aAAa;AAAE,YAAA,OAAO,SAAS;AAC/C,QAAA,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,MAAM,CAAC;AACjD,QAAA,cAAc,CAAC,OAAO,CAAC,aAAa,CAAC;AAErC,QAAA,OAAO,MAAK;YACV,cAAc,CAAC,UAAU,EAAE;AAC7B,SAAC;AACH,KAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAE3B;;AAEG;IACH,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,MAAM;AAAE,YAAA,OAAO,SAAS;AAC7B,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC;AAEzC,QAAA,OAAO,MAAK;AACV,YAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC;AAC9C,SAAC;AACH,KAAC,EAAE,CAAC,MAAM,CAAC,CAAC;AAEZ,IAAA,
|
|
1
|
+
{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useState, useEffect, useMemo } from 'react';\nimport { usePopper } from 'react-popper';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport { Portal } from '../Portal';\nimport { theme } from '../../theme';\nimport { PopoverDialog, Backdrop } from './styled';\nimport { generateId } from '../../utils';\nimport { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor';\nimport { PopoverProps } from './types';\nimport { useHandleFocus } from './hooks/useHandleFocus';\n\nexport const Popover = ({\n id: passedId,\n children,\n zIndex = theme.layers.popup,\n placement = 'bottom',\n anchorElement,\n rootElementRef,\n onShouldClose,\n style,\n disableFocusLock,\n removeBackdrop = false,\n useAnchorWidth,\n ignoreAriaWarnings,\n ...dialogProps\n}: PopoverProps) => {\n // Set up PopperJS\n const [popperElement, setPopperElement] = useState<HTMLDialogElement | null>(null);\n const { styles, attributes, update } = usePopper(anchorElement, popperElement, { placement });\n\n // Setup popover id to use passed, or generate its' own.\n const id = useMemo(() => passedId || generateId('popover'), [passedId]);\n\n // Check and update aria for anchor, only works once this has rendered for the first time though.\n useUpdateAriaAnchor({ anchorElement, popoverId: id, ignoreAriaWarnings });\n\n const onClose = () => {\n anchorElement?.focus();\n onShouldClose?.();\n };\n\n const { handleKeyDown } = useHandleFocus({\n popperElement,\n anchorElement,\n onClose,\n disableFocusLock,\n });\n\n /**\n * When content size is changed, force popper update\n */\n useEffect(() => {\n if (!update || !popperElement) return undefined;\n const resizeObserver = new ResizeObserver(update);\n resizeObserver.observe(popperElement);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [update, popperElement]);\n\n /**\n * When window is resized, force popper update\n */\n useEffect(() => {\n if (!update) return undefined;\n window.addEventListener('resize', update);\n\n return () => {\n window.removeEventListener('resize', update);\n };\n }, [update]);\n\n return (\n <Portal rootElementRef={rootElementRef}>\n {!removeBackdrop && (\n <Backdrop onClick={onClose} zIndex={zIndex} data-testid=\"popover-backdrop\" />\n )}\n <PopoverDialog\n open\n id={id}\n zIndex={zIndex}\n ref={setPopperElement}\n style={{\n ...styles.popper,\n ...style,\n ...(useAnchorWidth ? { minWidth: anchorElement?.clientWidth } : {}),\n }}\n onKeyDown={handleKeyDown}\n {...attributes.popper}\n {...dialogProps}\n >\n {children}\n </PopoverDialog>\n </Portal>\n );\n};\n"],"names":["React"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default from 'react';
|
|
2
2
|
import { ComponentSize } from '../types.js';
|
|
3
3
|
import { Stepper } from '../Stepper/Stepper.js';
|
|
4
4
|
import { PriceInputGroup, PrefixContainer, PrefixText, StyledTextField } from './styled.js';
|
|
@@ -44,11 +44,11 @@ const PriceInput = withLabels(({ className = '', hasError, currency, disabled =
|
|
|
44
44
|
if (key === 'ArrowDown')
|
|
45
45
|
handleDecrement(onChange);
|
|
46
46
|
};
|
|
47
|
-
return (
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
47
|
+
return (React__default.createElement(PriceInputGroup, { className: className, hasError: hasError },
|
|
48
|
+
React__default.createElement(PrefixContainer, { disabled: disabled, size: size },
|
|
49
|
+
React__default.createElement(PrefixText, { variant: "hintText" }, currency)),
|
|
50
|
+
React__default.createElement(StyledTextField, { placeholder: "0.00", type: "currency", value: priceValue, step: step, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, disabled: disabled, size: size, ...otherProps }),
|
|
51
|
+
React__default.createElement(Stepper, { onIncrement: () => handleIncrement(), onDecrement: () => handleDecrement(), disabled: disabled, size: size })));
|
|
52
52
|
});
|
|
53
53
|
PriceInput.displayName = 'PriceInput';
|
|
54
54
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PriceInput.js","sources":["../../../src/components/PriceInput/PriceInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { ComponentSize } from '../types';\nimport { Stepper } from '../Stepper';\nimport type { TextFieldProps } from '../TextField/types';\n\nimport { PriceInputGroup, StyledTextField, PrefixContainer, PrefixText } from './styled';\n\nimport { CurrencyProps } from './types';\nimport { withLabels } from '../../hoc';\n\nconst fractionDigits = 2;\n\nfunction stringToFixed(price: string) {\n const floatPrice = parseFloat(price.replace(',', '.'));\n return floatPrice.toFixed(fractionDigits);\n}\n\nexport const PriceInput = withLabels(\n ({\n className = '',\n hasError,\n currency,\n disabled = false,\n onChange,\n onPriceChange,\n priceValue,\n step = '0.1',\n size = ComponentSize.base,\n ...otherProps\n }: CurrencyProps) => {\n const handleChange = (value: string) =>\n onChange(value.replace(/[a-zA-Z]/g, '').replace(',', '.'));\n\n const handleBlur: TextFieldProps['onBlur'] = (e) => {\n const target = e.target as HTMLInputElement;\n const { value } = target;\n\n if (!value) {\n onPriceChange('');\n\n return;\n }\n\n const roundedValue = stringToFixed(value);\n\n onPriceChange(roundedValue);\n };\n\n const handleIncrement = (callback = onPriceChange) => {\n const currentPrice = parseFloat(priceValue) || 0;\n const currentStep = parseFloat(step);\n\n callback((currentPrice + currentStep).toFixed(fractionDigits));\n };\n const handleDecrement = (callback = onPriceChange) => {\n const currentPrice = parseFloat(priceValue) || 0;\n const currentStep = parseFloat(step);\n\n callback((currentPrice - currentStep).toFixed(fractionDigits));\n };\n\n const handleKeyDown: TextFieldProps['onKeyDown'] = (e) => {\n const { key } = e;\n const target = e.target as HTMLInputElement;\n const isInForm = target.form;\n\n if (!isInForm) {\n if (key === 'Enter') target.blur();\n }\n if (key === 'ArrowUp') handleIncrement(onChange);\n if (key === 'ArrowDown') handleDecrement(onChange);\n };\n\n return (\n <PriceInputGroup className={className} hasError={hasError}>\n <PrefixContainer disabled={disabled} size={size}>\n <PrefixText variant=\"hintText\">{currency}</PrefixText>\n </PrefixContainer>\n <StyledTextField\n placeholder=\"0.00\"\n type=\"currency\"\n value={priceValue}\n step={step}\n onChange={handleChange}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n disabled={disabled}\n size={size}\n {...otherProps}\n />\n <Stepper\n onIncrement={() => handleIncrement()}\n onDecrement={() => handleDecrement()}\n disabled={disabled}\n size={size}\n />\n </PriceInputGroup>\n );\n },\n);\n\nPriceInput.displayName = 'PriceInput';\n"],"names":[],"mappings":";;;;;;AAWA,MAAM,cAAc,GAAG,CAAC;AAExB,SAAS,aAAa,CAAC,KAAa,EAAA;AAClC,IAAA,MAAM,UAAU,GAAG,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AACtD,IAAA,OAAO,UAAU,CAAC,OAAO,CAAC,cAAc,CAAC;AAC3C;AAEa,MAAA,UAAU,GAAG,UAAU,CAClC,CAAC,EACC,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,aAAa,EACb,UAAU,EACV,IAAI,GAAG,KAAK,EACZ,IAAI,GAAG,aAAa,CAAC,IAAI,EACzB,GAAG,UAAU,EACC,KAAI;IAClB,MAAM,YAAY,GAAG,CAAC,KAAa,KACjC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAE5D,IAAA,MAAM,UAAU,GAA6B,CAAC,CAAC,KAAI;AACjD,QAAA,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B;AAC3C,QAAA,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM;QAExB,IAAI,CAAC,KAAK,EAAE;YACV,aAAa,CAAC,EAAE,CAAC;YAEjB;AACD;AAED,QAAA,MAAM,YAAY,GAAG,aAAa,CAAC,KAAK,CAAC;QAEzC,aAAa,CAAC,YAAY,CAAC;AAC7B,KAAC;AAED,IAAA,MAAM,eAAe,GAAG,CAAC,QAAQ,GAAG,aAAa,KAAI;QACnD,MAAM,YAAY,GAAG,UAAU,CAAC,UAAU,CAAC,IAAI,CAAC;AAChD,QAAA,MAAM,WAAW,GAAG,UAAU,CAAC,IAAI,CAAC;AAEpC,QAAA,QAAQ,CAAC,CAAC,YAAY,GAAG,WAAW,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;AAChE,KAAC;AACD,IAAA,MAAM,eAAe,GAAG,CAAC,QAAQ,GAAG,aAAa,KAAI;QACnD,MAAM,YAAY,GAAG,UAAU,CAAC,UAAU,CAAC,IAAI,CAAC;AAChD,QAAA,MAAM,WAAW,GAAG,UAAU,CAAC,IAAI,CAAC;AAEpC,QAAA,QAAQ,CAAC,CAAC,YAAY,GAAG,WAAW,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;AAChE,KAAC;AAED,IAAA,MAAM,aAAa,GAAgC,CAAC,CAAC,KAAI;AACvD,QAAA,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC;AACjB,QAAA,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B;AAC3C,QAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI;QAE5B,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,GAAG,KAAK,OAAO;gBAAE,MAAM,CAAC,IAAI,EAAE;AACnC;QACD,IAAI,GAAG,KAAK,SAAS;YAAE,eAAe,CAAC,QAAQ,CAAC;QAChD,IAAI,GAAG,KAAK,WAAW;YAAE,eAAe,CAAC,QAAQ,CAAC;AACpD,KAAC;IAED,
|
|
1
|
+
{"version":3,"file":"PriceInput.js","sources":["../../../src/components/PriceInput/PriceInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { ComponentSize } from '../types';\nimport { Stepper } from '../Stepper';\nimport type { TextFieldProps } from '../TextField/types';\n\nimport { PriceInputGroup, StyledTextField, PrefixContainer, PrefixText } from './styled';\n\nimport { CurrencyProps } from './types';\nimport { withLabels } from '../../hoc';\n\nconst fractionDigits = 2;\n\nfunction stringToFixed(price: string) {\n const floatPrice = parseFloat(price.replace(',', '.'));\n return floatPrice.toFixed(fractionDigits);\n}\n\nexport const PriceInput = withLabels(\n ({\n className = '',\n hasError,\n currency,\n disabled = false,\n onChange,\n onPriceChange,\n priceValue,\n step = '0.1',\n size = ComponentSize.base,\n ...otherProps\n }: CurrencyProps) => {\n const handleChange = (value: string) =>\n onChange(value.replace(/[a-zA-Z]/g, '').replace(',', '.'));\n\n const handleBlur: TextFieldProps['onBlur'] = (e) => {\n const target = e.target as HTMLInputElement;\n const { value } = target;\n\n if (!value) {\n onPriceChange('');\n\n return;\n }\n\n const roundedValue = stringToFixed(value);\n\n onPriceChange(roundedValue);\n };\n\n const handleIncrement = (callback = onPriceChange) => {\n const currentPrice = parseFloat(priceValue) || 0;\n const currentStep = parseFloat(step);\n\n callback((currentPrice + currentStep).toFixed(fractionDigits));\n };\n const handleDecrement = (callback = onPriceChange) => {\n const currentPrice = parseFloat(priceValue) || 0;\n const currentStep = parseFloat(step);\n\n callback((currentPrice - currentStep).toFixed(fractionDigits));\n };\n\n const handleKeyDown: TextFieldProps['onKeyDown'] = (e) => {\n const { key } = e;\n const target = e.target as HTMLInputElement;\n const isInForm = target.form;\n\n if (!isInForm) {\n if (key === 'Enter') target.blur();\n }\n if (key === 'ArrowUp') handleIncrement(onChange);\n if (key === 'ArrowDown') handleDecrement(onChange);\n };\n\n return (\n <PriceInputGroup className={className} hasError={hasError}>\n <PrefixContainer disabled={disabled} size={size}>\n <PrefixText variant=\"hintText\">{currency}</PrefixText>\n </PrefixContainer>\n <StyledTextField\n placeholder=\"0.00\"\n type=\"currency\"\n value={priceValue}\n step={step}\n onChange={handleChange}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n disabled={disabled}\n size={size}\n {...otherProps}\n />\n <Stepper\n onIncrement={() => handleIncrement()}\n onDecrement={() => handleDecrement()}\n disabled={disabled}\n size={size}\n />\n </PriceInputGroup>\n );\n },\n);\n\nPriceInput.displayName = 'PriceInput';\n"],"names":["React"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default, { forwardRef, useCallback } from 'react';
|
|
2
2
|
import { Choice } from '../Choice/Choice.js';
|
|
3
3
|
import { Input } from './styled.js';
|
|
4
4
|
import { generateId } from '../../utils/generateId.js';
|
|
@@ -8,8 +8,8 @@ const Radio = forwardRef(({ checked, value, name, disabled, onChange, id, childr
|
|
|
8
8
|
onChange(e.currentTarget.checked, value);
|
|
9
9
|
}, [onChange, value]);
|
|
10
10
|
const componentId = id !== null && id !== undefined ? id : generateId('radio');
|
|
11
|
-
return (
|
|
12
|
-
|
|
11
|
+
return (React__default.createElement(Choice, { id: componentId, disabled: disabled, ...otherProps },
|
|
12
|
+
React__default.createElement(Input, { id: componentId, type: "radio", checked: checked, value: value, name: name, disabled: disabled, onChange: handleChange, ref: ref }),
|
|
13
13
|
children));
|
|
14
14
|
});
|
|
15
15
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { ReactNode, forwardRef, useCallback } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\ntype RadioValue = string | number;\n\nexport interface RadioProps extends ForwardedChoiceProps {\n id?: string;\n className?: string;\n checked: boolean;\n value?: RadioValue;\n disabled?: boolean;\n name?: string;\n onChange: (checked: boolean, value?: RadioValue) => void;\n children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n ({ checked, value, name, disabled, onChange, id, children, ...otherProps }: RadioProps, ref) => {\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange(e.currentTarget.checked, value);\n },\n [onChange, value],\n );\n\n const componentId = id ?? generateId('radio');\n\n return (\n <Choice id={componentId} disabled={disabled} {...otherProps}>\n <Input\n id={componentId}\n type=\"radio\"\n checked={checked}\n value={value}\n name={name}\n disabled={disabled}\n onChange={handleChange}\n ref={ref}\n />\n {children}\n </Choice>\n );\n },\n);\n"],"names":[],"mappings":";;;;;AAkBO,MAAM,KAAK,GAAG,UAAU,CAC7B,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAc,EAAE,GAAG,KAAI;AAC7F,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;AAED,IAAA,MAAM,WAAW,GAAG,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAI,UAAU,CAAC,OAAO,CAAC;AAE7C,IAAA,
|
|
1
|
+
{"version":3,"file":"Radio.js","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { ReactNode, forwardRef, useCallback } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\ntype RadioValue = string | number;\n\nexport interface RadioProps extends ForwardedChoiceProps {\n id?: string;\n className?: string;\n checked: boolean;\n value?: RadioValue;\n disabled?: boolean;\n name?: string;\n onChange: (checked: boolean, value?: RadioValue) => void;\n children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n ({ checked, value, name, disabled, onChange, id, children, ...otherProps }: RadioProps, ref) => {\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange(e.currentTarget.checked, value);\n },\n [onChange, value],\n );\n\n const componentId = id ?? generateId('radio');\n\n return (\n <Choice id={componentId} disabled={disabled} {...otherProps}>\n <Input\n id={componentId}\n type=\"radio\"\n checked={checked}\n value={value}\n name={name}\n disabled={disabled}\n onChange={handleChange}\n ref={ref}\n />\n {children}\n </Choice>\n );\n },\n);\n"],"names":["React"],"mappings":";;;;;AAkBO,MAAM,KAAK,GAAG,UAAU,CAC7B,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAc,EAAE,GAAG,KAAI;AAC7F,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;AAED,IAAA,MAAM,WAAW,GAAG,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAI,UAAU,CAAC,OAAO,CAAC;AAE7C,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAA,GAAM,UAAU,EAAA;AACzD,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EACJ,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,GAAG,EACR,CAAA;QACD,QAAQ,CACF;AAEb,CAAC;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default from 'react';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
|
|
4
4
|
const ScreenReaderOnlyElement = styled.span.withConfig({ displayName: "vui--ScreenReaderOnlyElement", componentId: "vui--ejkp56" }) `position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;`;
|
|
@@ -17,7 +17,7 @@ const ScreenReaderOnlyElement = styled.span.withConfig({ displayName: "vui--Scre
|
|
|
17
17
|
* - Breadcrumb navigation, making it clear with a "you are here" screen reader text
|
|
18
18
|
*/
|
|
19
19
|
const ScreenReaderOnly = ({ children }) => {
|
|
20
|
-
return
|
|
20
|
+
return React__default.createElement(ScreenReaderOnlyElement, null, children);
|
|
21
21
|
};
|
|
22
22
|
|
|
23
23
|
export { ScreenReaderOnly };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScreenReaderOnly.js","sources":["../../../src/components/ScreenReaderOnly/ScreenReaderOnly.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport styled from 'styled-components';\n\ntype ScreenReaderOnlyProps = {\n children: ReactNode;\n};\n\nconst ScreenReaderOnlyElement = styled.span`\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n`;\n/**\n * The `ScreenReaderOnly` component is used to render content that is only visible to screen readers and assistive technologies. This component can be useful for providing additional context or information to users who rely on screen readers, while keeping the content visually hidden from sighted users.\n * * **This is not a replacement for `aria-label`.**\n *\n * Note: aria-label is intended for interactive elements or for elements made interactive via other ARIA declarations when there's no visible text in the DOM to serve as a label.\n *\n * In general, screen reader-only content should be reserved for information that is apparent visually but not apparent to blind screen reader users.\n *\n * **Example use cases:**\n * - Adding instructional cues and indicators\n * - Search input that is clearly a search bar to sighted users (search icon, etc.). A hidden, associated `<label>` element with \"Search orders\"\n * - Skip to links to take the user to the main content (still need to be visibile when focused)\n * - Breadcrumb navigation, making it clear with a \"you are here\" screen reader text\n */\nexport const ScreenReaderOnly = ({ children }: ScreenReaderOnlyProps) => {\n return <ScreenReaderOnlyElement>{children}</ScreenReaderOnlyElement>;\n};\n"],"names":[],"mappings":";;;AAOA,MAAM,uBAAuB,GAAG,MAAM,CAAC,IAAI,0NAU1C;AACD;;;;;;;;;;;;;AAaG;MACU,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAyB,KAAI;AACtE,IAAA,
|
|
1
|
+
{"version":3,"file":"ScreenReaderOnly.js","sources":["../../../src/components/ScreenReaderOnly/ScreenReaderOnly.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport styled from 'styled-components';\n\ntype ScreenReaderOnlyProps = {\n children: ReactNode;\n};\n\nconst ScreenReaderOnlyElement = styled.span`\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n`;\n/**\n * The `ScreenReaderOnly` component is used to render content that is only visible to screen readers and assistive technologies. This component can be useful for providing additional context or information to users who rely on screen readers, while keeping the content visually hidden from sighted users.\n * * **This is not a replacement for `aria-label`.**\n *\n * Note: aria-label is intended for interactive elements or for elements made interactive via other ARIA declarations when there's no visible text in the DOM to serve as a label.\n *\n * In general, screen reader-only content should be reserved for information that is apparent visually but not apparent to blind screen reader users.\n *\n * **Example use cases:**\n * - Adding instructional cues and indicators\n * - Search input that is clearly a search bar to sighted users (search icon, etc.). A hidden, associated `<label>` element with \"Search orders\"\n * - Skip to links to take the user to the main content (still need to be visibile when focused)\n * - Breadcrumb navigation, making it clear with a \"you are here\" screen reader text\n */\nexport const ScreenReaderOnly = ({ children }: ScreenReaderOnlyProps) => {\n return <ScreenReaderOnlyElement>{children}</ScreenReaderOnlyElement>;\n};\n"],"names":["React"],"mappings":";;;AAOA,MAAM,uBAAuB,GAAG,MAAM,CAAC,IAAI,0NAU1C;AACD;;;;;;;;;;;;;AAaG;MACU,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAyB,KAAI;AACtE,IAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,uBAAuB,EAAE,IAAA,EAAA,QAAQ,CAA2B;AACtE;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default from 'react';
|
|
2
2
|
import { Button } from '../Button/Button.js';
|
|
3
3
|
import { theme } from '../../theme/index.js';
|
|
4
4
|
import { Container, Input, IconContainer } from './styled.js';
|
|
@@ -11,18 +11,18 @@ const Search = ({ type = 'text', disabled = false, onClearClick, onChange, onBlu
|
|
|
11
11
|
const shouldShowClear = value && value.length > 0;
|
|
12
12
|
const renderIcon = () => {
|
|
13
13
|
if (isLoading) {
|
|
14
|
-
return
|
|
14
|
+
return React__default.createElement(Loader, { height: 24, color: fill || theme.colors.secondary.blue.base });
|
|
15
15
|
}
|
|
16
16
|
if (shouldShowClear && onClearClick) {
|
|
17
|
-
return (
|
|
18
|
-
|
|
17
|
+
return (React__default.createElement(Button, { variant: "unstyled", onClick: onClearClick, style: { display: 'flex' }, "aria-label": "Clear text", type: "button" },
|
|
18
|
+
React__default.createElement(CrossIcon, { color: fill || theme.colors.neutral.ink.dark })));
|
|
19
19
|
}
|
|
20
|
-
return (
|
|
21
|
-
|
|
20
|
+
return (React__default.createElement(Button, { variant: "unstyled", onClick: () => onChange(value), style: { display: 'flex' }, "aria-label": "Search", type: "button" },
|
|
21
|
+
React__default.createElement(SearchIcon, { color: fill || theme.colors.neutral.ink.dark, height: sizes.md, width: sizes.md })));
|
|
22
22
|
};
|
|
23
|
-
return (
|
|
24
|
-
|
|
25
|
-
|
|
23
|
+
return (React__default.createElement(Container, { className: className, iconPosition: reversed ? 'left' : 'right' },
|
|
24
|
+
React__default.createElement(Input, { size: size, type: type, value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, onKeyUp: onKeyUp, onKeyDown: onKeyDown, onKeyPress: onKeyPress, placeholder: placeholder, name: name, disabled: disabled, error: error, autoComplete: autoComplete }),
|
|
25
|
+
React__default.createElement(IconContainer, null, renderIcon())));
|
|
26
26
|
};
|
|
27
27
|
|
|
28
28
|
export { Search };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Search.js","sources":["../../../src/components/Search/Search.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Button } from '../Button';\n\nimport { theme } from '../../theme';\n\nimport { Container, Input, IconContainer, Loader } from './styled';\nimport { SearchProps } from './types';\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\nimport { SearchIcon } from '../../tempIcons/SearchIcon';\nimport { sizes } from '../../theme/modules/sizes';\n\nexport const Search = ({\n type = 'text',\n disabled = false,\n onClearClick,\n onChange,\n onBlur,\n onFocus,\n onKeyUp,\n onKeyDown,\n onKeyPress,\n value = '',\n error,\n placeholder = '',\n className = '',\n name,\n isLoading = false,\n fill,\n reversed = false,\n autoComplete = 'on',\n size = 'base',\n}: SearchProps) => {\n const shouldShowClear = value && value.length > 0;\n\n const renderIcon = () => {\n if (isLoading) {\n return <Loader height={24} color={fill || theme.colors.secondary.blue.base} />;\n }\n if (shouldShowClear && onClearClick) {\n return (\n <Button\n variant=\"unstyled\"\n onClick={onClearClick}\n style={{ display: 'flex' }}\n aria-label=\"Clear text\"\n type=\"button\"\n >\n <CrossIcon color={fill || theme.colors.neutral.ink.dark} />\n </Button>\n );\n }\n return (\n <Button\n variant=\"unstyled\"\n onClick={() => onChange(value)}\n style={{ display: 'flex' }}\n aria-label=\"Search\"\n type=\"button\"\n >\n <SearchIcon\n color={fill || theme.colors.neutral.ink.dark}\n height={sizes.md}\n width={sizes.md}\n />\n </Button>\n );\n };\n\n return (\n <Container className={className} iconPosition={reversed ? 'left' : 'right'}>\n <Input\n size={size}\n type={type}\n value={value}\n onChange={onChange}\n onBlur={onBlur}\n onFocus={onFocus}\n onKeyUp={onKeyUp}\n onKeyDown={onKeyDown}\n onKeyPress={onKeyPress}\n placeholder={placeholder}\n name={name}\n disabled={disabled}\n error={error}\n autoComplete={autoComplete}\n />\n <IconContainer>{renderIcon()}</IconContainer>\n </Container>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAYO,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,OAAO,EACP,OAAO,EACP,SAAS,EACT,UAAU,EACV,KAAK,GAAG,EAAE,EACV,KAAK,EACL,WAAW,GAAG,EAAE,EAChB,SAAS,GAAG,EAAE,EACd,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,YAAY,GAAG,IAAI,EACnB,IAAI,GAAG,MAAM,GACD,KAAI;IAChB,MAAM,eAAe,GAAG,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;IAEjD,MAAM,UAAU,GAAG,MAAK;AACtB,QAAA,IAAI,SAAS,EAAE;YACb,
|
|
1
|
+
{"version":3,"file":"Search.js","sources":["../../../src/components/Search/Search.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Button } from '../Button';\n\nimport { theme } from '../../theme';\n\nimport { Container, Input, IconContainer, Loader } from './styled';\nimport { SearchProps } from './types';\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\nimport { SearchIcon } from '../../tempIcons/SearchIcon';\nimport { sizes } from '../../theme/modules/sizes';\n\nexport const Search = ({\n type = 'text',\n disabled = false,\n onClearClick,\n onChange,\n onBlur,\n onFocus,\n onKeyUp,\n onKeyDown,\n onKeyPress,\n value = '',\n error,\n placeholder = '',\n className = '',\n name,\n isLoading = false,\n fill,\n reversed = false,\n autoComplete = 'on',\n size = 'base',\n}: SearchProps) => {\n const shouldShowClear = value && value.length > 0;\n\n const renderIcon = () => {\n if (isLoading) {\n return <Loader height={24} color={fill || theme.colors.secondary.blue.base} />;\n }\n if (shouldShowClear && onClearClick) {\n return (\n <Button\n variant=\"unstyled\"\n onClick={onClearClick}\n style={{ display: 'flex' }}\n aria-label=\"Clear text\"\n type=\"button\"\n >\n <CrossIcon color={fill || theme.colors.neutral.ink.dark} />\n </Button>\n );\n }\n return (\n <Button\n variant=\"unstyled\"\n onClick={() => onChange(value)}\n style={{ display: 'flex' }}\n aria-label=\"Search\"\n type=\"button\"\n >\n <SearchIcon\n color={fill || theme.colors.neutral.ink.dark}\n height={sizes.md}\n width={sizes.md}\n />\n </Button>\n );\n };\n\n return (\n <Container className={className} iconPosition={reversed ? 'left' : 'right'}>\n <Input\n size={size}\n type={type}\n value={value}\n onChange={onChange}\n onBlur={onBlur}\n onFocus={onFocus}\n onKeyUp={onKeyUp}\n onKeyDown={onKeyDown}\n onKeyPress={onKeyPress}\n placeholder={placeholder}\n name={name}\n disabled={disabled}\n error={error}\n autoComplete={autoComplete}\n />\n <IconContainer>{renderIcon()}</IconContainer>\n </Container>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;AAYO,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,OAAO,EACP,OAAO,EACP,SAAS,EACT,UAAU,EACV,KAAK,GAAG,EAAE,EACV,KAAK,EACL,WAAW,GAAG,EAAE,EAChB,SAAS,GAAG,EAAE,EACd,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,YAAY,GAAG,IAAI,EACnB,IAAI,GAAG,MAAM,GACD,KAAI;IAChB,MAAM,eAAe,GAAG,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;IAEjD,MAAM,UAAU,GAAG,MAAK;AACtB,QAAA,IAAI,SAAS,EAAE;YACb,OAAOA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAC,EAAA,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,IAAI,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAA,CAAI;AAC/E;QACD,IAAI,eAAe,IAAI,YAAY,EAAE;YACnC,QACEA,cAAC,CAAA,aAAA,CAAA,MAAM,EACL,EAAA,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,YAAY,EACrB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,gBACf,YAAY,EACvB,IAAI,EAAC,QAAQ,EAAA;AAEb,gBAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAC,EAAA,KAAK,EAAE,IAAI,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAI,CAAA,CACpD;AAEZ;AACD,QAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,MAAM,QAAQ,CAAC,KAAK,CAAC,EAC9B,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EACf,YAAA,EAAA,QAAQ,EACnB,IAAI,EAAC,QAAQ,EAAA;AAEb,YAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,KAAK,EAAE,IAAI,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAC5C,MAAM,EAAE,KAAK,CAAC,EAAE,EAChB,KAAK,EAAE,KAAK,CAAC,EAAE,EACf,CAAA,CACK;AAEb,KAAC;AAED,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,SAAS,IAAC,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA;QACxEA,cAAC,CAAA,aAAA,CAAA,KAAK,EACJ,EAAA,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,CAAA;AACF,QAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAE,IAAA,EAAA,UAAU,EAAE,CAAiB,CACnC;AAEhB;;;;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default from 'react';
|
|
2
2
|
import { Button } from '../Button/Button.js';
|
|
3
3
|
import { SegmentedControlContainer } from './styled.js';
|
|
4
4
|
|
|
5
|
-
const SegmentedControl = ({ options, selected, className, onChange, }) => (
|
|
5
|
+
const SegmentedControl = ({ options, selected, className, onChange, }) => (React__default.createElement(SegmentedControlContainer, { className: className ? `${className}-container` : undefined }, options.map((option) => (React__default.createElement(Button, { type: "button", "aria-pressed": option.value === selected, variant: option.value === selected ? 'primary' : 'default', key: option.key, onClick: () => onChange(option.value), disabled: option.disabled, className: option.value === selected ? 'veeqo-components-active-button' : '' }, option.label)))));
|
|
6
6
|
|
|
7
7
|
export { SegmentedControl };
|
|
8
8
|
//# sourceMappingURL=SegmentedControl.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControl.js","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Button } from '../Button';\nimport { SegmentedControlContainer } from './styled';\n\nimport { SegmentedControlProps } from './types';\n\nexport const SegmentedControl = ({\n options,\n selected,\n className,\n onChange,\n}: SegmentedControlProps) => (\n <SegmentedControlContainer className={className ? `${className}-container` : undefined}>\n {options.map((option) => (\n <Button\n type=\"button\"\n aria-pressed={option.value === selected}\n variant={option.value === selected ? 'primary' : 'default'}\n key={option.key}\n onClick={() => onChange(option.value)}\n disabled={option.disabled}\n className={option.value === selected ? 'veeqo-components-active-button' : ''}\n >\n {option.label}\n </Button>\n ))}\n </SegmentedControlContainer>\n);\n"],"names":[],"mappings":";;;;AAOa,MAAA,gBAAgB,GAAG,CAAC,EAC/B,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,GACc,
|
|
1
|
+
{"version":3,"file":"SegmentedControl.js","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Button } from '../Button';\nimport { SegmentedControlContainer } from './styled';\n\nimport { SegmentedControlProps } from './types';\n\nexport const SegmentedControl = ({\n options,\n selected,\n className,\n onChange,\n}: SegmentedControlProps) => (\n <SegmentedControlContainer className={className ? `${className}-container` : undefined}>\n {options.map((option) => (\n <Button\n type=\"button\"\n aria-pressed={option.value === selected}\n variant={option.value === selected ? 'primary' : 'default'}\n key={option.key}\n onClick={() => onChange(option.value)}\n disabled={option.disabled}\n className={option.value === selected ? 'veeqo-components-active-button' : ''}\n >\n {option.label}\n </Button>\n ))}\n </SegmentedControlContainer>\n);\n"],"names":["React"],"mappings":";;;;AAOa,MAAA,gBAAgB,GAAG,CAAC,EAC/B,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,GACc,MACtBA,cAAA,CAAA,aAAA,CAAC,yBAAyB,EAAA,EAAC,SAAS,EAAE,SAAS,GAAG,CAAG,EAAA,SAAS,CAAY,UAAA,CAAA,GAAG,SAAS,EAAA,EACnF,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MAClBA,cAAC,CAAA,aAAA,CAAA,MAAM,EACL,EAAA,IAAI,EAAC,QAAQ,EACC,cAAA,EAAA,MAAM,CAAC,KAAK,KAAK,QAAQ,EACvC,OAAO,EAAE,MAAM,CAAC,KAAK,KAAK,QAAQ,GAAG,SAAS,GAAG,SAAS,EAC1D,GAAG,EAAE,MAAM,CAAC,GAAG,EACf,OAAO,EAAE,MAAM,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EACrC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,SAAS,EAAE,MAAM,CAAC,KAAK,KAAK,QAAQ,GAAG,gCAAgC,GAAG,EAAE,EAAA,EAE3E,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACwB;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default, { forwardRef, useCallback } from 'react';
|
|
2
2
|
import { SelectInput } from './styled.js';
|
|
3
3
|
import { withLabels } from '../../hoc/withLabels/withLabels.js';
|
|
4
4
|
|
|
@@ -8,8 +8,8 @@ const Select = withLabels(forwardRef(({ className, options, value, onChange, siz
|
|
|
8
8
|
return;
|
|
9
9
|
onChange(e.currentTarget.value);
|
|
10
10
|
}, [onChange]);
|
|
11
|
-
return (
|
|
12
|
-
options.map((option) => (
|
|
11
|
+
return (React__default.createElement(SelectInput, { className: className, sizeVariant: size, value: value !== null && value !== undefined ? value : undefined, onChange: handleChange, disabled: disabled, hasError: hasError, ref: ref, ...otherProps }, !!options &&
|
|
12
|
+
options.map((option) => (React__default.createElement("option", { key: option.label, value: option.value, disabled: option.disabled, hidden: option.hidden }, option.label)))));
|
|
13
13
|
}));
|
|
14
14
|
Select.displayName = 'Select';
|
|
15
15
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef, useCallback } from 'react';\n\nimport { SelectInput } from './styled';\nimport { withLabels } from '../../hoc';\n\nexport type SelectOption = {\n label: string;\n value: string;\n disabled?: boolean;\n hidden?: boolean;\n};\n\nexport interface SelectProps\n extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'onChange'> {\n id?: string;\n className?: string;\n options: Array<SelectOption>;\n value?: string;\n size?: 'sm' | 'base';\n disabled?: boolean;\n hasError?: boolean;\n onChange?: (value: string) => void;\n}\n\nexport const Select = withLabels(\n forwardRef<HTMLSelectElement, SelectProps>(\n (\n { className, options, value, onChange, size, disabled, hasError, ...otherProps }: SelectProps,\n ref,\n ) => {\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLSelectElement>) => {\n if (!onChange) return;\n onChange(e.currentTarget.value);\n },\n [onChange],\n );\n\n return (\n <SelectInput\n className={className}\n sizeVariant={size}\n value={value ?? undefined}\n onChange={handleChange}\n disabled={disabled}\n hasError={hasError}\n ref={ref}\n {...otherProps}\n >\n {!!options &&\n options.map((option) => (\n <option\n key={option.label}\n value={option.value}\n disabled={option.disabled}\n hidden={option.hidden}\n >\n {option.label}\n </option>\n ))}\n </SelectInput>\n );\n },\n ),\n);\n\nSelect.displayName = 'Select';\n"],"names":[],"mappings":";;;;AAwBO,MAAM,MAAM,GAAG,UAAU,CAC9B,UAAU,CACR,CACE,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAe,EAC7F,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAiC,KAAI;AACpC,QAAA,IAAI,CAAC,QAAQ;YAAE;AACf,QAAA,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;AACjC,KAAC,EACD,CAAC,QAAQ,CAAC,CACX;AAED,IAAA,
|
|
1
|
+
{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef, useCallback } from 'react';\n\nimport { SelectInput } from './styled';\nimport { withLabels } from '../../hoc';\n\nexport type SelectOption = {\n label: string;\n value: string;\n disabled?: boolean;\n hidden?: boolean;\n};\n\nexport interface SelectProps\n extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'onChange'> {\n id?: string;\n className?: string;\n options: Array<SelectOption>;\n value?: string;\n size?: 'sm' | 'base';\n disabled?: boolean;\n hasError?: boolean;\n onChange?: (value: string) => void;\n}\n\nexport const Select = withLabels(\n forwardRef<HTMLSelectElement, SelectProps>(\n (\n { className, options, value, onChange, size, disabled, hasError, ...otherProps }: SelectProps,\n ref,\n ) => {\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLSelectElement>) => {\n if (!onChange) return;\n onChange(e.currentTarget.value);\n },\n [onChange],\n );\n\n return (\n <SelectInput\n className={className}\n sizeVariant={size}\n value={value ?? undefined}\n onChange={handleChange}\n disabled={disabled}\n hasError={hasError}\n ref={ref}\n {...otherProps}\n >\n {!!options &&\n options.map((option) => (\n <option\n key={option.label}\n value={option.value}\n disabled={option.disabled}\n hidden={option.hidden}\n >\n {option.label}\n </option>\n ))}\n </SelectInput>\n );\n },\n ),\n);\n\nSelect.displayName = 'Select';\n"],"names":["React"],"mappings":";;;;AAwBO,MAAM,MAAM,GAAG,UAAU,CAC9B,UAAU,CACR,CACE,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAe,EAC7F,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAiC,KAAI;AACpC,QAAA,IAAI,CAAC,QAAQ;YAAE;AACf,QAAA,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;AACjC,KAAC,EACD,CAAC,QAAQ,CAAC,CACX;AAED,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,WAAW,IACV,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,IAAI,EACjB,KAAK,EAAE,KAAK,aAAL,KAAK,KAAA,SAAA,GAAL,KAAK,GAAI,SAAS,EACzB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EAAA,GACJ,UAAU,EAEb,EAAA,CAAC,CAAC,OAAO;AACR,QAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACjBA,yCACE,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,MAAM,EAAE,MAAM,CAAC,MAAM,EAEpB,EAAA,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACQ;AAElB,CAAC,CACF;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default from 'react';
|
|
2
2
|
import { Kbd, ShortcutKeysContainer } from './styled.js';
|
|
3
3
|
import { ValidModifierKeysMap, ValidModifierKeyssLabelMap } from './utils.js';
|
|
4
4
|
|
|
@@ -20,19 +20,19 @@ const ShortcutKeys = ({ shortcut, label, inverse = false, displayLabel = false,
|
|
|
20
20
|
// Replace modifier keys with the corresponding UTF-16 character if available.
|
|
21
21
|
const keysToRenderComponents = keysToRender.map((key) => {
|
|
22
22
|
if (ValidModifierKeysMap[key]) {
|
|
23
|
-
return (
|
|
23
|
+
return (React__default.createElement(Kbd, { key: `Key: ${key}`, "aria-label": ValidModifierKeyssLabelMap[key] }, ValidModifierKeysMap[key]));
|
|
24
24
|
}
|
|
25
|
-
return
|
|
25
|
+
return React__default.createElement(Kbd, { key: `Key: ${key}` }, key);
|
|
26
26
|
});
|
|
27
27
|
// Combine the <Kbd /> components to sit inside a single <ShortcutKeysContainer /> component.
|
|
28
|
-
const shortcutElements = keysToRenderComponents.reduce((previousKbdElement, currentKbdElement) => (
|
|
28
|
+
const shortcutElements = keysToRenderComponents.reduce((previousKbdElement, currentKbdElement) => (React__default.createElement(React__default.Fragment, null,
|
|
29
29
|
previousKbdElement,
|
|
30
30
|
"+",
|
|
31
31
|
currentKbdElement)));
|
|
32
|
-
return (
|
|
32
|
+
return (React__default.createElement(ShortcutKeysContainer, { "aria-label": label, "$inverse": inverse, ...props },
|
|
33
33
|
shortcutElements,
|
|
34
34
|
" ",
|
|
35
|
-
displayLabel ?
|
|
35
|
+
displayLabel ? React__default.createElement("span", null, label) : null));
|
|
36
36
|
};
|
|
37
37
|
|
|
38
38
|
export { ShortcutKeys };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShortcutKeys.js","sources":["../../../src/components/ShortcutKeys/ShortcutKeys.tsx"],"sourcesContent":["import React from 'react';\nimport { ShortcutKeysContainer, Kbd } from './styled';\nimport { ValidModifierKeys, ShortcutKeysProps } from './types';\nimport { ValidModifierKeyssLabelMap, ValidModifierKeysMap } from './utils';\n\n/**\n * ShortcutKeys UI component\n *\n * Renders a keyboard shortcut string by splitting it on \"+\" and rendering each\n * key to a <kbd> component.\n *\n * Criteria for `shortcut` prop:\n * - ValidModifierKeys MUST always come before other keys e.g. `shift+a` is valid, `a+shift` is invalid\n * - If it's not a modifier key it must be a singular key e.g. `a`, `2` is valid and `a2` or `abcde` is invalid etc.\n * - A limit of 3 key combinations separated between the '+' symbol e.g. `shift+ctrl+a` is valid, `shift+ctrl+a+b` is invalid\n *\n */\nexport const ShortcutKeys = ({\n shortcut,\n label,\n inverse = false,\n displayLabel = false,\n ...props\n}: ShortcutKeysProps) => {\n // Split the keys into individual <Kbd /> components\n const keysToRender = shortcut.split('+') as ValidModifierKeys[];\n\n // Replace modifier keys with the corresponding UTF-16 character if available.\n const keysToRenderComponents = keysToRender.map((key) => {\n if (ValidModifierKeysMap[key]) {\n return (\n <Kbd key={`Key: ${key}`} aria-label={ValidModifierKeyssLabelMap[key]}>\n {ValidModifierKeysMap[key]}\n </Kbd>\n );\n }\n return <Kbd key={`Key: ${key}`}>{key}</Kbd>;\n });\n\n // Combine the <Kbd /> components to sit inside a single <ShortcutKeysContainer /> component.\n const shortcutElements = keysToRenderComponents.reduce(\n (previousKbdElement, currentKbdElement) => (\n <>\n {previousKbdElement}+{currentKbdElement}\n </>\n ),\n );\n\n return (\n <ShortcutKeysContainer aria-label={label} $inverse={inverse} {...props}>\n {shortcutElements} {displayLabel ? <span>{label}</span> : null}\n </ShortcutKeysContainer>\n );\n};\n"],"names":[],"mappings":";;;;AAKA;;;;;;;;;;;AAWG;MACU,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,KAAK,EACf,YAAY,GAAG,KAAK,EACpB,GAAG,KAAK,EACU,KAAI;;IAEtB,MAAM,YAAY,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAwB;;IAG/D,MAAM,sBAAsB,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,KAAI;AACtD,QAAA,IAAI,oBAAoB,CAAC,GAAG,CAAC,EAAE;YAC7B,
|
|
1
|
+
{"version":3,"file":"ShortcutKeys.js","sources":["../../../src/components/ShortcutKeys/ShortcutKeys.tsx"],"sourcesContent":["import React from 'react';\nimport { ShortcutKeysContainer, Kbd } from './styled';\nimport { ValidModifierKeys, ShortcutKeysProps } from './types';\nimport { ValidModifierKeyssLabelMap, ValidModifierKeysMap } from './utils';\n\n/**\n * ShortcutKeys UI component\n *\n * Renders a keyboard shortcut string by splitting it on \"+\" and rendering each\n * key to a <kbd> component.\n *\n * Criteria for `shortcut` prop:\n * - ValidModifierKeys MUST always come before other keys e.g. `shift+a` is valid, `a+shift` is invalid\n * - If it's not a modifier key it must be a singular key e.g. `a`, `2` is valid and `a2` or `abcde` is invalid etc.\n * - A limit of 3 key combinations separated between the '+' symbol e.g. `shift+ctrl+a` is valid, `shift+ctrl+a+b` is invalid\n *\n */\nexport const ShortcutKeys = ({\n shortcut,\n label,\n inverse = false,\n displayLabel = false,\n ...props\n}: ShortcutKeysProps) => {\n // Split the keys into individual <Kbd /> components\n const keysToRender = shortcut.split('+') as ValidModifierKeys[];\n\n // Replace modifier keys with the corresponding UTF-16 character if available.\n const keysToRenderComponents = keysToRender.map((key) => {\n if (ValidModifierKeysMap[key]) {\n return (\n <Kbd key={`Key: ${key}`} aria-label={ValidModifierKeyssLabelMap[key]}>\n {ValidModifierKeysMap[key]}\n </Kbd>\n );\n }\n return <Kbd key={`Key: ${key}`}>{key}</Kbd>;\n });\n\n // Combine the <Kbd /> components to sit inside a single <ShortcutKeysContainer /> component.\n const shortcutElements = keysToRenderComponents.reduce(\n (previousKbdElement, currentKbdElement) => (\n <>\n {previousKbdElement}+{currentKbdElement}\n </>\n ),\n );\n\n return (\n <ShortcutKeysContainer aria-label={label} $inverse={inverse} {...props}>\n {shortcutElements} {displayLabel ? <span>{label}</span> : null}\n </ShortcutKeysContainer>\n );\n};\n"],"names":["React"],"mappings":";;;;AAKA;;;;;;;;;;;AAWG;MACU,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,KAAK,EACf,YAAY,GAAG,KAAK,EACpB,GAAG,KAAK,EACU,KAAI;;IAEtB,MAAM,YAAY,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAwB;;IAG/D,MAAM,sBAAsB,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,KAAI;AACtD,QAAA,IAAI,oBAAoB,CAAC,GAAG,CAAC,EAAE;YAC7B,QACEA,6BAAC,GAAG,EAAA,EAAC,GAAG,EAAE,CAAA,KAAA,EAAQ,GAAG,CAAE,CAAA,EAAA,YAAA,EAAc,0BAA0B,CAAC,GAAG,CAAC,EACjE,EAAA,oBAAoB,CAAC,GAAG,CAAC,CACtB;AAET;QACD,OAAOA,cAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EAAC,GAAG,EAAE,CAAQ,KAAA,EAAA,GAAG,CAAE,CAAA,EAAA,EAAG,GAAG,CAAO;AAC7C,KAAC,CAAC;;AAGF,IAAA,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,MAAM,CACpD,CAAC,kBAAkB,EAAE,iBAAiB,MACpCA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;QACG,kBAAkB;;QAAG,iBAAiB,CACtC,CACJ,CACF;IAED,QACEA,6BAAC,qBAAqB,EAAA,EAAA,YAAA,EAAa,KAAK,EAAY,UAAA,EAAA,OAAO,KAAM,KAAK,EAAA;QACnE,gBAAgB;;AAAG,QAAA,YAAY,GAAGA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,KAAK,CAAQ,GAAG,IAAI,CACxC;AAE5B;;;;"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default from 'react';
|
|
2
2
|
import { Table, TableHeader, TableBody, TableRow, TableHeaderCell, TableCell } from './styled.js';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* A simple table component which provides flexible, pre-styled table elements.
|
|
6
6
|
*/
|
|
7
|
-
const SimpleTable = ({ striped = true, className, children }) => (
|
|
7
|
+
const SimpleTable = ({ striped = true, className, children }) => (React__default.createElement(Table, { striped: striped, className: className }, children));
|
|
8
8
|
SimpleTable.Header = TableHeader;
|
|
9
9
|
SimpleTable.Body = TableBody;
|
|
10
10
|
SimpleTable.Row = TableRow;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SimpleTable.js","sources":["../../../src/components/SimpleTable/SimpleTable.tsx"],"sourcesContent":["import React from 'react';\nimport { TableBody, TableCell, TableHeader, TableRow, TableHeaderCell, Table } from './styled';\nimport { SimpleTableProps } from './types';\n\n/**\n * A simple table component which provides flexible, pre-styled table elements.\n */\nexport const SimpleTable = ({ striped = true, className, children }: SimpleTableProps) => (\n <Table striped={striped} className={className}>\n {children}\n </Table>\n);\n\nSimpleTable.Header = TableHeader;\nSimpleTable.Body = TableBody;\nSimpleTable.Row = TableRow;\nSimpleTable.HeaderCell = TableHeaderCell;\nSimpleTable.Cell = TableCell;\n"],"names":[],"mappings":";;;AAIA;;AAEG;AACI,MAAM,WAAW,GAAG,CAAC,EAAE,OAAO,GAAG,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAoB,
|
|
1
|
+
{"version":3,"file":"SimpleTable.js","sources":["../../../src/components/SimpleTable/SimpleTable.tsx"],"sourcesContent":["import React from 'react';\nimport { TableBody, TableCell, TableHeader, TableRow, TableHeaderCell, Table } from './styled';\nimport { SimpleTableProps } from './types';\n\n/**\n * A simple table component which provides flexible, pre-styled table elements.\n */\nexport const SimpleTable = ({ striped = true, className, children }: SimpleTableProps) => (\n <Table striped={striped} className={className}>\n {children}\n </Table>\n);\n\nSimpleTable.Header = TableHeader;\nSimpleTable.Body = TableBody;\nSimpleTable.Row = TableRow;\nSimpleTable.HeaderCell = TableHeaderCell;\nSimpleTable.Cell = TableCell;\n"],"names":["React"],"mappings":";;;AAIA;;AAEG;AACI,MAAM,WAAW,GAAG,CAAC,EAAE,OAAO,GAAG,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAoB,MACnFA,cAAC,CAAA,aAAA,CAAA,KAAK,EAAC,EAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAA,EAC1C,QAAQ,CACH;AAGV,WAAW,CAAC,MAAM,GAAG,WAAW;AAChC,WAAW,CAAC,IAAI,GAAG,SAAS;AAC5B,WAAW,CAAC,GAAG,GAAG,QAAQ;AAC1B,WAAW,CAAC,UAAU,GAAG,eAAe;AACxC,WAAW,CAAC,IAAI,GAAG,SAAS;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default, { useState, useRef, useCallback, useEffect } from 'react';
|
|
2
2
|
import { SliderContainer, SliderTrack, SliderRange, SliderDiv } from './styled.js';
|
|
3
3
|
import { buildClassnames } from '../../utils/buildClassnames.js';
|
|
4
4
|
|
|
@@ -104,15 +104,15 @@ const Slider = ({ id, value, min, max, step = 1, onChange, className, e2eClassNa
|
|
|
104
104
|
else {
|
|
105
105
|
sliderClassName = buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.slider, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.slider]);
|
|
106
106
|
}
|
|
107
|
-
return (
|
|
107
|
+
return (React__default.createElement(SliderDiv, { role: "slider", ref: index === 1 ? endSliderRef : startSliderRef, className: sliderClassName, left: left, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": valueNow }));
|
|
108
108
|
};
|
|
109
109
|
const renderRangeSlider = (rangeSliderValue) => {
|
|
110
110
|
// handle value used to get slider position relative to container from value
|
|
111
111
|
const handleValueStart = ((rangeSliderValue[0] < min ? 0 : rangeSliderValue[0] - min) * 100) / (max - min);
|
|
112
112
|
const handleValueEnd = ((rangeSliderValue[1] > max ? 100 : rangeSliderValue[1] - min) * 100) / (max - min);
|
|
113
113
|
const rangeWidth = handleValueEnd - handleValueStart;
|
|
114
|
-
return (
|
|
115
|
-
|
|
114
|
+
return (React__default.createElement(React__default.Fragment, null,
|
|
115
|
+
React__default.createElement(SliderRange, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.sliderRange, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.sliderRange]), left: handleValueStart, width: rangeWidth }),
|
|
116
116
|
renderSlider(handleValueStart, rangeSliderValue[0], 0),
|
|
117
117
|
renderSlider(handleValueEnd, rangeSliderValue[1], 1)));
|
|
118
118
|
};
|
|
@@ -133,8 +133,8 @@ const Slider = ({ id, value, min, max, step = 1, onChange, className, e2eClassNa
|
|
|
133
133
|
render = renderRangeSlider(value);
|
|
134
134
|
else
|
|
135
135
|
render = renderSingleSlider(value);
|
|
136
|
-
return (
|
|
137
|
-
|
|
136
|
+
return (React__default.createElement(SliderContainer, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.container]), id: id, ref: containerRef },
|
|
137
|
+
React__default.createElement(SliderTrack, null),
|
|
138
138
|
render));
|
|
139
139
|
};
|
|
140
140
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { SliderContainer, SliderTrack, SliderRange, SliderDiv } from './styled';\nimport { SliderComponentPropTypes, DraggingSliderIndex, ClassNamesReturnPayload } from './types';\nimport { buildClassnames } from '../../utils/buildClassnames';\n\nconst generateClassNames = (prefix: string | undefined): ClassNamesReturnPayload => ({\n container: prefix ? `${prefix}-slider-container` : undefined,\n sliderRange: prefix ? `${prefix}-slider-range` : undefined,\n slider: prefix ? `${prefix}-slider` : undefined,\n startSlider: prefix ? `${prefix}-start-slider` : undefined,\n endSlider: prefix ? `${prefix}-end-slider` : undefined,\n});\n\nexport const Slider = ({\n id,\n value,\n min,\n max,\n step = 1,\n onChange,\n className,\n e2eClassName,\n onSlideStart = () => {},\n onSlideEnd = () => {},\n}: SliderComponentPropTypes) => {\n const [isDragging, setIsDragging] = useState(false);\n const [draggingSliderIndex, setDraggingSliderIndex] = useState<DraggingSliderIndex>(-1);\n const containerRef = useRef<HTMLDivElement>(null);\n const startSliderRef = useRef<HTMLDivElement>(null);\n const endSliderRef = useRef<HTMLDivElement>(null);\n const classNames = generateClassNames(className);\n const e2eClassNames = generateClassNames(e2eClassName);\n\n const handleMouseMove = useCallback(\n (e: MouseEvent) => {\n if (!isDragging || !containerRef.current) return;\n const sliderValue: number =\n draggingSliderIndex > -1 ? (value as number[])[draggingSliderIndex] : (value as number);\n const containerSize = containerRef.current.getBoundingClientRect();\n // slider position relative to the container in percents\n const handleValue = ((e.pageX - containerSize.x) * 100) / containerSize.width;\n // current value by slider position\n let newValue = (max - min) * (handleValue / 100) + min;\n\n const diff = sliderValue - newValue;\n\n // use to apply step to new value\n if (diff > 0) {\n newValue = sliderValue + Math.ceil(newValue / step - sliderValue / step) * step;\n }\n if (diff < 0) {\n newValue = sliderValue + Math.floor(newValue / step - sliderValue / step) * step;\n }\n\n if (sliderValue === newValue) return;\n if (newValue > max) newValue = max;\n if (newValue < min) newValue = min;\n\n if (Array.isArray(value)) {\n if (draggingSliderIndex === 0 && newValue > value[1]) [, newValue] = value;\n if (draggingSliderIndex === 1 && newValue < value[0]) [newValue] = value;\n }\n\n // used to fix 0.30000000000000004 problem\n const decimalPlaces = step.toString().includes('.')\n ? step.toString().split('.').pop()?.length\n : 0;\n newValue = Number(newValue.toFixed(decimalPlaces));\n\n let resultValue;\n if (Array.isArray(value)) {\n resultValue = draggingSliderIndex === 0 ? [newValue, value[1]] : [value[0], newValue];\n } else {\n resultValue = newValue;\n }\n\n onChange(resultValue);\n\n if (Array.isArray(resultValue) && resultValue[0] === resultValue[1]) {\n if (draggingSliderIndex === 0) setDraggingSliderIndex(1);\n if (draggingSliderIndex === 1) setDraggingSliderIndex(0);\n }\n },\n [draggingSliderIndex, isDragging, max, min, onChange, step, value],\n );\n\n const handleMouseUp = useCallback(() => {\n setIsDragging(false);\n onSlideEnd();\n }, [onSlideEnd]);\n const handleMouseDown = useCallback(\n (e: Event, index: DraggingSliderIndex) => {\n setIsDragging(true);\n onSlideStart();\n if (typeof index === 'number') setDraggingSliderIndex(index);\n e.preventDefault();\n },\n [onSlideStart],\n );\n\n useEffect(() => {\n const handleStartSliderMouseDown = (e: Event) =>\n handleMouseDown(e, Array.isArray(value) ? 0 : 1);\n const handleEndSliderMouseDown = (e: Event) => handleMouseDown(e, 1);\n\n const startSliderEl = startSliderRef.current;\n const endSliderEl = endSliderRef.current;\n\n startSliderEl?.addEventListener('mousedown', handleStartSliderMouseDown);\n endSliderEl?.addEventListener('mousedown', handleEndSliderMouseDown);\n\n document.addEventListener('mousemove', handleMouseMove);\n document.addEventListener('mouseup', handleMouseUp);\n return () => {\n startSliderEl?.removeEventListener('mousedown', handleStartSliderMouseDown);\n endSliderEl?.removeEventListener('mousedown', handleEndSliderMouseDown);\n\n document.removeEventListener('mousemove', handleMouseMove);\n document.removeEventListener('mouseup', handleMouseUp);\n };\n }, [handleMouseDown, handleMouseMove, handleMouseUp, value]);\n\n const renderSlider = (left: number, valueNow: number, index?: 0 | 1) => {\n let sliderClassName;\n\n if (typeof index === 'number') {\n sliderClassName = buildClassnames(\n index === 0\n ? [classNames?.startSlider, e2eClassNames?.startSlider]\n : [classNames?.endSlider, e2eClassNames?.endSlider],\n );\n } else {\n sliderClassName = buildClassnames([classNames?.slider, e2eClassNames?.slider]);\n }\n\n return (\n <SliderDiv\n role=\"slider\"\n ref={index === 1 ? endSliderRef : startSliderRef}\n className={sliderClassName}\n left={left}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={valueNow}\n />\n );\n };\n\n const renderRangeSlider = (rangeSliderValue: number[]) => {\n // handle value used to get slider position relative to container from value\n const handleValueStart =\n ((rangeSliderValue[0] < min ? 0 : rangeSliderValue[0] - min) * 100) / (max - min);\n const handleValueEnd =\n ((rangeSliderValue[1] > max ? 100 : rangeSliderValue[1] - min) * 100) / (max - min);\n\n const rangeWidth = handleValueEnd - handleValueStart;\n\n return (\n <>\n <SliderRange\n className={buildClassnames([classNames?.sliderRange, e2eClassNames?.sliderRange])}\n left={handleValueStart}\n width={rangeWidth}\n />\n {renderSlider(handleValueStart, rangeSliderValue[0], 0)}\n {renderSlider(handleValueEnd, rangeSliderValue[1], 1)}\n </>\n );\n };\n\n const renderSingleSlider = (sliderValue: number) => {\n if (Array.isArray(value)) return renderRangeSlider(value as number[]);\n\n let handleValue: number;\n\n if (value > max) handleValue = 100;\n else if (value < min) handleValue = 0;\n else handleValue = ((sliderValue - min) * 100) / (max - min);\n\n return renderSlider(handleValue, sliderValue);\n };\n\n let render;\n if (Array.isArray(value)) render = renderRangeSlider(value);\n else render = renderSingleSlider(value);\n\n return (\n <SliderContainer\n className={buildClassnames([classNames?.container, e2eClassNames?.container])}\n id={id}\n ref={containerRef}\n >\n <SliderTrack />\n {render}\n </SliderContainer>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { SliderContainer, SliderTrack, SliderRange, SliderDiv } from './styled';\nimport { SliderComponentPropTypes, DraggingSliderIndex, ClassNamesReturnPayload } from './types';\nimport { buildClassnames } from '../../utils/buildClassnames';\n\nconst generateClassNames = (prefix: string | undefined): ClassNamesReturnPayload => ({\n container: prefix ? `${prefix}-slider-container` : undefined,\n sliderRange: prefix ? `${prefix}-slider-range` : undefined,\n slider: prefix ? `${prefix}-slider` : undefined,\n startSlider: prefix ? `${prefix}-start-slider` : undefined,\n endSlider: prefix ? `${prefix}-end-slider` : undefined,\n});\n\nexport const Slider = ({\n id,\n value,\n min,\n max,\n step = 1,\n onChange,\n className,\n e2eClassName,\n onSlideStart = () => {},\n onSlideEnd = () => {},\n}: SliderComponentPropTypes) => {\n const [isDragging, setIsDragging] = useState(false);\n const [draggingSliderIndex, setDraggingSliderIndex] = useState<DraggingSliderIndex>(-1);\n const containerRef = useRef<HTMLDivElement>(null);\n const startSliderRef = useRef<HTMLDivElement>(null);\n const endSliderRef = useRef<HTMLDivElement>(null);\n const classNames = generateClassNames(className);\n const e2eClassNames = generateClassNames(e2eClassName);\n\n const handleMouseMove = useCallback(\n (e: MouseEvent) => {\n if (!isDragging || !containerRef.current) return;\n const sliderValue: number =\n draggingSliderIndex > -1 ? (value as number[])[draggingSliderIndex] : (value as number);\n const containerSize = containerRef.current.getBoundingClientRect();\n // slider position relative to the container in percents\n const handleValue = ((e.pageX - containerSize.x) * 100) / containerSize.width;\n // current value by slider position\n let newValue = (max - min) * (handleValue / 100) + min;\n\n const diff = sliderValue - newValue;\n\n // use to apply step to new value\n if (diff > 0) {\n newValue = sliderValue + Math.ceil(newValue / step - sliderValue / step) * step;\n }\n if (diff < 0) {\n newValue = sliderValue + Math.floor(newValue / step - sliderValue / step) * step;\n }\n\n if (sliderValue === newValue) return;\n if (newValue > max) newValue = max;\n if (newValue < min) newValue = min;\n\n if (Array.isArray(value)) {\n if (draggingSliderIndex === 0 && newValue > value[1]) [, newValue] = value;\n if (draggingSliderIndex === 1 && newValue < value[0]) [newValue] = value;\n }\n\n // used to fix 0.30000000000000004 problem\n const decimalPlaces = step.toString().includes('.')\n ? step.toString().split('.').pop()?.length\n : 0;\n newValue = Number(newValue.toFixed(decimalPlaces));\n\n let resultValue;\n if (Array.isArray(value)) {\n resultValue = draggingSliderIndex === 0 ? [newValue, value[1]] : [value[0], newValue];\n } else {\n resultValue = newValue;\n }\n\n onChange(resultValue);\n\n if (Array.isArray(resultValue) && resultValue[0] === resultValue[1]) {\n if (draggingSliderIndex === 0) setDraggingSliderIndex(1);\n if (draggingSliderIndex === 1) setDraggingSliderIndex(0);\n }\n },\n [draggingSliderIndex, isDragging, max, min, onChange, step, value],\n );\n\n const handleMouseUp = useCallback(() => {\n setIsDragging(false);\n onSlideEnd();\n }, [onSlideEnd]);\n const handleMouseDown = useCallback(\n (e: Event, index: DraggingSliderIndex) => {\n setIsDragging(true);\n onSlideStart();\n if (typeof index === 'number') setDraggingSliderIndex(index);\n e.preventDefault();\n },\n [onSlideStart],\n );\n\n useEffect(() => {\n const handleStartSliderMouseDown = (e: Event) =>\n handleMouseDown(e, Array.isArray(value) ? 0 : 1);\n const handleEndSliderMouseDown = (e: Event) => handleMouseDown(e, 1);\n\n const startSliderEl = startSliderRef.current;\n const endSliderEl = endSliderRef.current;\n\n startSliderEl?.addEventListener('mousedown', handleStartSliderMouseDown);\n endSliderEl?.addEventListener('mousedown', handleEndSliderMouseDown);\n\n document.addEventListener('mousemove', handleMouseMove);\n document.addEventListener('mouseup', handleMouseUp);\n return () => {\n startSliderEl?.removeEventListener('mousedown', handleStartSliderMouseDown);\n endSliderEl?.removeEventListener('mousedown', handleEndSliderMouseDown);\n\n document.removeEventListener('mousemove', handleMouseMove);\n document.removeEventListener('mouseup', handleMouseUp);\n };\n }, [handleMouseDown, handleMouseMove, handleMouseUp, value]);\n\n const renderSlider = (left: number, valueNow: number, index?: 0 | 1) => {\n let sliderClassName;\n\n if (typeof index === 'number') {\n sliderClassName = buildClassnames(\n index === 0\n ? [classNames?.startSlider, e2eClassNames?.startSlider]\n : [classNames?.endSlider, e2eClassNames?.endSlider],\n );\n } else {\n sliderClassName = buildClassnames([classNames?.slider, e2eClassNames?.slider]);\n }\n\n return (\n <SliderDiv\n role=\"slider\"\n ref={index === 1 ? endSliderRef : startSliderRef}\n className={sliderClassName}\n left={left}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={valueNow}\n />\n );\n };\n\n const renderRangeSlider = (rangeSliderValue: number[]) => {\n // handle value used to get slider position relative to container from value\n const handleValueStart =\n ((rangeSliderValue[0] < min ? 0 : rangeSliderValue[0] - min) * 100) / (max - min);\n const handleValueEnd =\n ((rangeSliderValue[1] > max ? 100 : rangeSliderValue[1] - min) * 100) / (max - min);\n\n const rangeWidth = handleValueEnd - handleValueStart;\n\n return (\n <>\n <SliderRange\n className={buildClassnames([classNames?.sliderRange, e2eClassNames?.sliderRange])}\n left={handleValueStart}\n width={rangeWidth}\n />\n {renderSlider(handleValueStart, rangeSliderValue[0], 0)}\n {renderSlider(handleValueEnd, rangeSliderValue[1], 1)}\n </>\n );\n };\n\n const renderSingleSlider = (sliderValue: number) => {\n if (Array.isArray(value)) return renderRangeSlider(value as number[]);\n\n let handleValue: number;\n\n if (value > max) handleValue = 100;\n else if (value < min) handleValue = 0;\n else handleValue = ((sliderValue - min) * 100) / (max - min);\n\n return renderSlider(handleValue, sliderValue);\n };\n\n let render;\n if (Array.isArray(value)) render = renderRangeSlider(value);\n else render = renderSingleSlider(value);\n\n return (\n <SliderContainer\n className={buildClassnames([classNames?.container, e2eClassNames?.container])}\n id={id}\n ref={containerRef}\n >\n <SliderTrack />\n {render}\n </SliderContainer>\n );\n};\n"],"names":["React"],"mappings":"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"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default from 'react';
|
|
2
2
|
import { theme } from '../../theme/index.js';
|
|
3
3
|
import { Container, StepButton } from './styled.js';
|
|
4
4
|
import { DownArrowIcon } from '../../tempIcons/DownArrowIcon.js';
|
|
5
5
|
import { UpArrowIcon } from '../../tempIcons/UpArrowIcon.js';
|
|
6
6
|
|
|
7
|
-
const Stepper = ({ onIncrement, onDecrement, disabled = false, size }) => (
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
const Stepper = ({ onIncrement, onDecrement, disabled = false, size }) => (React__default.createElement(Container, { size: size },
|
|
8
|
+
React__default.createElement(StepButton, { type: "button", onClick: onIncrement, disabled: disabled },
|
|
9
|
+
React__default.createElement(UpArrowIcon, { height: theme.sizes.base, width: theme.sizes.base, color: theme.colors.neutral.ink.base })),
|
|
10
|
+
React__default.createElement(StepButton, { type: "button", onClick: onDecrement, disabled: disabled },
|
|
11
|
+
React__default.createElement(DownArrowIcon, { height: theme.sizes.base, width: theme.sizes.base, color: theme.colors.neutral.ink.base }))));
|
|
12
12
|
|
|
13
13
|
export { Stepper };
|
|
14
14
|
//# sourceMappingURL=Stepper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stepper.js","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import React from 'react';\nimport { theme } from '../../theme';\n\nimport { Container, StepButton } from './styled';\nimport { DownArrowIcon } from '../../tempIcons/DownArrowIcon';\nimport { UpArrowIcon } from '../../tempIcons/UpArrowIcon';\nimport { ComponentSize } from '../types';\n\nexport interface StepperProps {\n onIncrement: () => void;\n onDecrement: () => void;\n disabled?: boolean;\n size?: ComponentSize;\n}\n\nexport const Stepper = ({ onIncrement, onDecrement, disabled = false, size }: StepperProps) => (\n <Container size={size}>\n <StepButton type=\"button\" onClick={onIncrement} disabled={disabled}>\n <UpArrowIcon\n height={theme.sizes.base}\n width={theme.sizes.base}\n color={theme.colors.neutral.ink.base}\n />\n </StepButton>\n <StepButton type=\"button\" onClick={onDecrement} disabled={disabled}>\n <DownArrowIcon\n height={theme.sizes.base}\n width={theme.sizes.base}\n color={theme.colors.neutral.ink.base}\n />\n </StepButton>\n </Container>\n);\n"],"names":[],"mappings":";;;;;;AAea,MAAA,OAAO,GAAG,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,GAAG,KAAK,EAAE,IAAI,EAAgB,
|
|
1
|
+
{"version":3,"file":"Stepper.js","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import React from 'react';\nimport { theme } from '../../theme';\n\nimport { Container, StepButton } from './styled';\nimport { DownArrowIcon } from '../../tempIcons/DownArrowIcon';\nimport { UpArrowIcon } from '../../tempIcons/UpArrowIcon';\nimport { ComponentSize } from '../types';\n\nexport interface StepperProps {\n onIncrement: () => void;\n onDecrement: () => void;\n disabled?: boolean;\n size?: ComponentSize;\n}\n\nexport const Stepper = ({ onIncrement, onDecrement, disabled = false, size }: StepperProps) => (\n <Container size={size}>\n <StepButton type=\"button\" onClick={onIncrement} disabled={disabled}>\n <UpArrowIcon\n height={theme.sizes.base}\n width={theme.sizes.base}\n color={theme.colors.neutral.ink.base}\n />\n </StepButton>\n <StepButton type=\"button\" onClick={onDecrement} disabled={disabled}>\n <DownArrowIcon\n height={theme.sizes.base}\n width={theme.sizes.base}\n color={theme.colors.neutral.ink.base}\n />\n </StepButton>\n </Container>\n);\n"],"names":["React"],"mappings":";;;;;;AAea,MAAA,OAAO,GAAG,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,GAAG,KAAK,EAAE,IAAI,EAAgB,MACxFA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA;AACnB,IAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAA;AAChE,QAAAA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GACpC,CACS;AACb,IAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAA;AAChE,QAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EACZ,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CACpC,CACS,CACH;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default, { forwardRef, useCallback } from 'react';
|
|
2
2
|
import { generateId } from '../../utils/generateId.js';
|
|
3
3
|
import { Textarea, Input } from './styled.js';
|
|
4
4
|
import { ComponentSize } from '../types.js';
|
|
@@ -25,9 +25,9 @@ const TextField = forwardRef(({ id, className, disabled = false, hasError, multi
|
|
|
25
25
|
}, [onChange, type]);
|
|
26
26
|
const componentId = id !== null && id !== undefined ? id : generateId('textfield');
|
|
27
27
|
if (type === 'text' && multiline) {
|
|
28
|
-
return (
|
|
28
|
+
return (React__default.createElement(Textarea, { className: className, disabled: disabled, hasError: hasError, id: componentId, name: name, onChange: handleChange, placeholder: placeholder, value: value, ref: ref, spellCheck: spellCheck, ...otherProps }));
|
|
29
29
|
}
|
|
30
|
-
return (
|
|
30
|
+
return (React__default.createElement(Input, { className: className, disabled: disabled, hasError: hasError, id: componentId, inputSize: size, name: name, "aria-label": name, onChange: handleChange, placeholder: placeholder, type: type, value: value, ref: ref, spellCheck: spellCheck, ...otherProps }));
|
|
31
31
|
});
|
|
32
32
|
|
|
33
33
|
export { TextField };
|