@lumx/react 2.2.9-alpha-exported-hooks2 → 2.2.9
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/esm/_internal/{alertdialog.1.js → AlertDialog.js} +8 -8
- package/esm/_internal/AlertDialog.js.map +1 -0
- package/esm/_internal/{autocompletemultiple.2.js → AutocompleteMultiple.js} +9 -9
- package/esm/_internal/AutocompleteMultiple.js.map +1 -0
- package/esm/_internal/{avatar.3.js → Avatar2.js} +4 -4
- package/esm/_internal/Avatar2.js.map +1 -0
- package/esm/_internal/{badge.4.js → Badge2.js} +3 -3
- package/esm/_internal/Badge2.js.map +1 -0
- package/esm/_internal/{button.5.js → Button2.js} +5 -5
- package/esm/_internal/Button2.js.map +1 -0
- package/esm/_internal/{buttongroup.7.js → ButtonGroup.js} +3 -3
- package/esm/_internal/ButtonGroup.js.map +1 -0
- package/esm/_internal/{buttonroot.57.js → ButtonRoot.js} +4 -4
- package/esm/_internal/ButtonRoot.js.map +1 -0
- package/esm/_internal/{checkbox.8.js → Checkbox2.js} +7 -7
- package/esm/_internal/Checkbox2.js.map +1 -0
- package/esm/_internal/{chip.9.js → Chip2.js} +3 -3
- package/esm/_internal/Chip2.js.map +1 -0
- package/esm/_internal/{chipgroup.10.js → ChipGroup.js} +3 -3
- package/esm/_internal/ChipGroup.js.map +1 -0
- package/esm/_internal/{clickawayprovider.60.js → ClickAwayProvider.js} +4 -4
- package/esm/_internal/ClickAwayProvider.js.map +1 -0
- package/esm/_internal/{commentblock.11.js → CommentBlock.js} +4 -4
- package/esm/_internal/CommentBlock.js.map +1 -0
- package/esm/_internal/{datepickerfield.12.js → DatePickerField.js} +9 -9
- package/esm/_internal/DatePickerField.js.map +1 -0
- package/esm/_internal/{dialog.13.js → Dialog2.js} +12 -12
- package/esm/_internal/Dialog2.js.map +1 -0
- package/esm/_internal/{divider.14.js → Divider2.js} +3 -3
- package/esm/_internal/Divider2.js.map +1 -0
- package/esm/_internal/{draghandle.15.js → DragHandle.js} +4 -4
- package/esm/_internal/DragHandle.js.map +1 -0
- package/esm/_internal/{dropdown.16.js → Dropdown2.js} +6 -6
- package/esm/_internal/Dropdown2.js.map +1 -0
- package/esm/_internal/{expansionpanel.17.js → ExpansionPanel.js} +8 -8
- package/esm/_internal/ExpansionPanel.js.map +1 -0
- package/esm/_internal/{flag.18.js → Flag2.js} +4 -4
- package/esm/_internal/Flag2.js.map +1 -0
- package/esm/_internal/{flexbox.19.js → FlexBox.js} +3 -3
- package/esm/_internal/FlexBox.js.map +1 -0
- package/esm/_internal/{griditem.20.js → GridItem.js} +3 -3
- package/esm/_internal/GridItem.js.map +1 -0
- package/esm/_internal/{icon.21.js → Icon2.js} +6 -4
- package/esm/_internal/Icon2.js.map +1 -0
- package/esm/_internal/{iconbutton.6.js → IconButton.js} +6 -6
- package/esm/_internal/IconButton.js.map +1 -0
- package/esm/_internal/{imageblock.22.js → ImageBlock.js} +4 -4
- package/esm/_internal/ImageBlock.js.map +1 -0
- package/esm/_internal/{inputhelper.23.js → InputHelper.js} +3 -3
- package/esm/_internal/InputHelper.js.map +1 -0
- package/esm/_internal/{inputlabel.24.js → InputLabel.js} +3 -3
- package/esm/_internal/InputLabel.js.map +1 -0
- package/esm/_internal/{lightbox.25.js → Lightbox2.js} +11 -11
- package/esm/_internal/Lightbox2.js.map +1 -0
- package/esm/_internal/{link.26.js → Link2.js} +5 -5
- package/esm/_internal/Link2.js.map +1 -0
- package/esm/_internal/{linkpreview.27.js → LinkPreview.js} +5 -5
- package/esm/_internal/LinkPreview.js.map +1 -0
- package/esm/_internal/{list.28.js → List2.js} +6 -6
- package/esm/_internal/List2.js.map +1 -0
- package/esm/_internal/{listsubheader.29.js → ListSubheader.js} +3 -3
- package/esm/_internal/ListSubheader.js.map +1 -0
- package/esm/_internal/{message.30.js → Message2.js} +4 -4
- package/esm/_internal/Message2.js.map +1 -0
- package/esm/_internal/{mosaic.31.js → Mosaic2.js} +4 -4
- package/esm/_internal/Mosaic2.js.map +1 -0
- package/esm/_internal/{notification.32.js → Notification2.js} +7 -7
- package/esm/_internal/Notification2.js.map +1 -0
- package/esm/_internal/{popover.33.js → Popover2.js} +6 -6
- package/esm/_internal/Popover2.js.map +1 -0
- package/esm/_internal/{postblock.34.js → PostBlock.js} +5 -5
- package/esm/_internal/PostBlock.js.map +1 -0
- package/esm/_internal/{progress.35.js → Progress2.js} +3 -3
- package/esm/_internal/Progress2.js.map +1 -0
- package/esm/_internal/{progresstrackersteppanel.36.js → ProgressTrackerStepPanel.js} +8 -8
- package/esm/_internal/ProgressTrackerStepPanel.js.map +1 -0
- package/esm/_internal/{radiogroup.37.js → RadioGroup.js} +6 -6
- package/esm/_internal/RadioGroup.js.map +1 -0
- package/esm/_internal/{selectmultiple.38.js → SelectMultiple.js} +12 -12
- package/esm/_internal/SelectMultiple.js.map +1 -0
- package/esm/_internal/{sidenavigationitem.39.js → SideNavigationItem.js} +7 -7
- package/esm/_internal/SideNavigationItem.js.map +1 -0
- package/esm/_internal/{skeletontypography.40.js → SkeletonTypography.js} +3 -3
- package/esm/_internal/SkeletonTypography.js.map +1 -0
- package/esm/_internal/{slider.41.js → Slider2.js} +6 -6
- package/esm/_internal/Slider2.js.map +1 -0
- package/esm/_internal/{slideshowcontrols.42.js → Slides.js} +238 -120
- package/esm/_internal/Slides.js.map +1 -0
- package/esm/_internal/{switch.43.js → Switch2.js} +6 -6
- package/esm/_internal/Switch2.js.map +1 -0
- package/esm/_internal/{tabpanel.45.js → TabPanel.js} +6 -6
- package/esm/_internal/TabPanel.js.map +1 -0
- package/esm/_internal/{tablerow.44.js → TableRow.js} +4 -4
- package/esm/_internal/TableRow.js.map +1 -0
- package/esm/_internal/{textfield.46.js → TextField.js} +9 -9
- package/esm/_internal/TextField.js.map +1 -0
- package/esm/_internal/{thumbnail.47.js → Thumbnail2.js} +6 -6
- package/esm/_internal/Thumbnail2.js.map +1 -0
- package/esm/_internal/{toolbar.49.js → Toolbar2.js} +3 -3
- package/esm/_internal/Toolbar2.js.map +1 -0
- package/esm/_internal/{tooltip.50.js → Tooltip2.js} +7 -7
- package/esm/_internal/Tooltip2.js.map +1 -0
- package/esm/_internal/{uploader.51.js → Uploader2.js} +4 -4
- package/esm/_internal/Uploader2.js.map +1 -0
- package/esm/_internal/{userblock.52.js → UserBlock.js} +5 -5
- package/esm/_internal/UserBlock.js.map +1 -0
- package/esm/_internal/{_rolluppluginbabelhelpers.53.js → _rollupPluginBabelHelpers.js} +1 -1
- package/esm/_internal/_rollupPluginBabelHelpers.js.map +1 -0
- package/esm/_internal/alert-dialog.js +19 -19
- package/esm/_internal/autocomplete.js +20 -20
- package/esm/_internal/avatar.js +6 -6
- package/esm/_internal/badge.js +3 -3
- package/esm/_internal/button.js +14 -14
- package/esm/_internal/checkbox.js +7 -7
- package/esm/_internal/chip.js +4 -4
- package/esm/_internal/comment-block.js +7 -7
- package/esm/_internal/components.js +1 -1
- package/esm/_internal/{constants.59.js → constants.js} +1 -1
- package/esm/_internal/constants.js.map +1 -0
- package/esm/_internal/date-picker.js +18 -18
- package/esm/_internal/dialog.js +12 -12
- package/esm/_internal/divider.js +3 -3
- package/esm/_internal/drag-handle.js +4 -4
- package/esm/_internal/dropdown.js +10 -10
- package/esm/_internal/expansion-panel.js +16 -16
- package/esm/_internal/flag.js +4 -4
- package/esm/_internal/flex-box.js +3 -3
- package/esm/_internal/{getrootclassname.54.js → getRootClassName.js} +4 -3
- package/esm/_internal/getRootClassName.js.map +1 -0
- package/esm/_internal/grid.js +3 -3
- package/esm/_internal/icon.js +3 -3
- package/esm/_internal/image-block.js +6 -6
- package/esm/_internal/input-helper.js +3 -3
- package/esm/_internal/input-label.js +3 -3
- package/esm/_internal/lightbox.js +16 -16
- package/esm/_internal/link-preview.js +8 -8
- package/esm/_internal/link.js +5 -5
- package/esm/_internal/list.js +7 -7
- package/esm/_internal/{mergerefs.56.js → mergeRefs.js} +1 -1
- package/esm/_internal/mergeRefs.js.map +1 -0
- package/esm/_internal/message.js +4 -4
- package/esm/_internal/mosaic.js +6 -6
- package/esm/_internal/notification.js +9 -9
- package/esm/_internal/{partitionmulti.62.js → partitionMulti.js} +1 -1
- package/esm/_internal/partitionMulti.js.map +1 -0
- package/esm/_internal/popover.js +6 -6
- package/esm/_internal/post-block.js +7 -7
- package/esm/_internal/progress-tracker.js +9 -9
- package/esm/_internal/progress.js +3 -3
- package/esm/_internal/radio-button.js +6 -6
- package/esm/_internal/{renderlink.65.js → renderLink.js} +2 -2
- package/esm/_internal/renderLink.js.map +1 -0
- package/esm/_internal/select.js +19 -19
- package/esm/_internal/side-navigation.js +14 -14
- package/esm/_internal/skeleton.js +3 -3
- package/esm/_internal/slider.js +6 -6
- package/esm/_internal/slideshow.js +14 -14
- package/esm/_internal/switch.js +6 -6
- package/esm/_internal/table.js +4 -4
- package/esm/_internal/tabs.js +7 -7
- package/esm/_internal/text-field.js +15 -15
- package/esm/_internal/thumbnail.js +6 -6
- package/esm/_internal/toolbar.js +3 -3
- package/esm/_internal/tooltip.js +8 -8
- package/esm/_internal/{type.64.js → type.js} +1 -1
- package/esm/_internal/type.js.map +1 -0
- package/esm/_internal/{types.48.js → types.js} +3 -2
- package/esm/_internal/types.js.map +1 -0
- package/esm/_internal/uploader.js +4 -4
- package/esm/_internal/{usedelayedvisibility.63.js → useDelayedVisibility.js} +2 -2
- package/esm/_internal/useDelayedVisibility.js.map +1 -0
- package/esm/_internal/{usedisablebodyscroll.61.js → useDisableBodyScroll.js} +1 -1
- package/esm/_internal/useDisableBodyScroll.js.map +1 -0
- package/esm/_internal/{usefocustrap.58.js → useFocusTrap.js} +2 -2
- package/esm/_internal/useFocusTrap.js.map +1 -0
- package/esm/_internal/{userovingtabindex.66.js → useRovingTabIndex.js} +3 -3
- package/esm/_internal/useRovingTabIndex.js.map +1 -0
- package/esm/_internal/user-block.js +9 -9
- package/esm/index.js +89 -0
- package/{index.js.map → esm/index.js.map} +1 -1
- package/esm/{_internal/index.55.js → index2.js} +1 -1
- package/esm/index2.js.map +1 -0
- package/package.json +10 -11
- package/src/components/slideshow/Slides.tsx +115 -0
- package/src/components/slideshow/Slideshow.stories.tsx +34 -0
- package/src/components/slideshow/Slideshow.test.tsx +1 -1
- package/src/components/slideshow/Slideshow.tsx +69 -90
- package/src/components/slideshow/SlideshowControls.stories.tsx +76 -40
- package/src/components/slideshow/SlideshowControls.tsx +35 -3
- package/src/components/slideshow/SlideshowItem.tsx +19 -3
- package/src/components/slideshow/__snapshots__/Slideshow.test.tsx.snap +124 -232
- package/src/components/slideshow/index.ts +1 -0
- package/src/components/thumbnail/index.ts +1 -0
- package/src/hooks/useFocusWithin.ts +1 -1
- package/src/hooks/useSlideshowControls.ts +26 -9
- package/src/stories/generated/Thumbnail/Demos.stories.tsx +3 -1
- package/types.d.ts +2670 -0
- package/esm/_internal/_rolluppluginbabelhelpers.53.js.map +0 -1
- package/esm/_internal/alertdialog.1.js.map +0 -1
- package/esm/_internal/autocompletemultiple.2.js.map +0 -1
- package/esm/_internal/avatar.3.js.map +0 -1
- package/esm/_internal/badge.4.js.map +0 -1
- package/esm/_internal/button.5.js.map +0 -1
- package/esm/_internal/buttongroup.7.js.map +0 -1
- package/esm/_internal/buttonroot.57.js.map +0 -1
- package/esm/_internal/checkbox.8.js.map +0 -1
- package/esm/_internal/chip.9.js.map +0 -1
- package/esm/_internal/chipgroup.10.js.map +0 -1
- package/esm/_internal/clickawayprovider.60.js.map +0 -1
- package/esm/_internal/commentblock.11.js.map +0 -1
- package/esm/_internal/constants.59.js.map +0 -1
- package/esm/_internal/datepickerfield.12.js.map +0 -1
- package/esm/_internal/dialog.13.js.map +0 -1
- package/esm/_internal/divider.14.js.map +0 -1
- package/esm/_internal/draghandle.15.js.map +0 -1
- package/esm/_internal/dropdown.16.js.map +0 -1
- package/esm/_internal/expansionpanel.17.js.map +0 -1
- package/esm/_internal/flag.18.js.map +0 -1
- package/esm/_internal/flexbox.19.js.map +0 -1
- package/esm/_internal/getrootclassname.54.js.map +0 -1
- package/esm/_internal/griditem.20.js.map +0 -1
- package/esm/_internal/icon.21.js.map +0 -1
- package/esm/_internal/iconbutton.6.js.map +0 -1
- package/esm/_internal/imageblock.22.js.map +0 -1
- package/esm/_internal/index.55.js.map +0 -1
- package/esm/_internal/inputhelper.23.js.map +0 -1
- package/esm/_internal/inputlabel.24.js.map +0 -1
- package/esm/_internal/lightbox.25.js.map +0 -1
- package/esm/_internal/link.26.js.map +0 -1
- package/esm/_internal/linkpreview.27.js.map +0 -1
- package/esm/_internal/list.28.js.map +0 -1
- package/esm/_internal/listsubheader.29.js.map +0 -1
- package/esm/_internal/mergerefs.56.js.map +0 -1
- package/esm/_internal/message.30.js.map +0 -1
- package/esm/_internal/mosaic.31.js.map +0 -1
- package/esm/_internal/notification.32.js.map +0 -1
- package/esm/_internal/partitionmulti.62.js.map +0 -1
- package/esm/_internal/popover.33.js.map +0 -1
- package/esm/_internal/postblock.34.js.map +0 -1
- package/esm/_internal/progress.35.js.map +0 -1
- package/esm/_internal/progresstrackersteppanel.36.js.map +0 -1
- package/esm/_internal/radiogroup.37.js.map +0 -1
- package/esm/_internal/renderlink.65.js.map +0 -1
- package/esm/_internal/selectmultiple.38.js.map +0 -1
- package/esm/_internal/sidenavigationitem.39.js.map +0 -1
- package/esm/_internal/skeletontypography.40.js.map +0 -1
- package/esm/_internal/slider.41.js.map +0 -1
- package/esm/_internal/slideshowcontrols.42.js.map +0 -1
- package/esm/_internal/switch.43.js.map +0 -1
- package/esm/_internal/tablerow.44.js.map +0 -1
- package/esm/_internal/tabpanel.45.js.map +0 -1
- package/esm/_internal/textfield.46.js.map +0 -1
- package/esm/_internal/thumbnail.47.js.map +0 -1
- package/esm/_internal/toolbar.49.js.map +0 -1
- package/esm/_internal/tooltip.50.js.map +0 -1
- package/esm/_internal/type.64.js.map +0 -1
- package/esm/_internal/types.48.js.map +0 -1
- package/esm/_internal/uploader.51.js.map +0 -1
- package/esm/_internal/usedelayedvisibility.63.js.map +0 -1
- package/esm/_internal/usedisablebodyscroll.61.js.map +0 -1
- package/esm/_internal/usefocustrap.58.js.map +0 -1
- package/esm/_internal/userblock.52.js.map +0 -1
- package/esm/_internal/userovingtabindex.66.js.map +0 -1
- package/hooks/useFocusWithin.d.ts +0 -16
- package/hooks/useFocusWithin.js +0 -28
- package/hooks/useFocusWithin.js.map +0 -1
- package/index.d.ts +0 -2723
- package/index.js +0 -90
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { b as _objectWithoutProperties, c as _extends } from './
|
|
1
|
+
import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
|
|
2
2
|
import { Alignment, Theme } from './components.js';
|
|
3
3
|
import React, { forwardRef, useMemo, Children } from 'react';
|
|
4
|
-
import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './
|
|
5
|
-
import { u as uid } from '
|
|
4
|
+
import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
|
|
5
|
+
import { u as uid } from '../index2.js';
|
|
6
6
|
import isEmpty from 'lodash/isEmpty';
|
|
7
|
-
import { I as InputHelper } from './
|
|
8
|
-
import { I as InputLabel } from './
|
|
7
|
+
import { I as InputHelper } from './InputHelper.js';
|
|
8
|
+
import { I as InputLabel } from './InputLabel.js';
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
11
|
* Defines the props of the component.
|
|
@@ -113,4 +113,4 @@ Switch.className = CLASSNAME;
|
|
|
113
113
|
Switch.defaultProps = DEFAULT_PROPS;
|
|
114
114
|
|
|
115
115
|
export { Switch as S };
|
|
116
|
-
//# sourceMappingURL=
|
|
116
|
+
//# sourceMappingURL=Switch2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Switch2.js","sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import React, { Children, forwardRef, InputHTMLAttributes, SyntheticEvent, useMemo } from 'react';\n\nimport classNames from 'classnames';\nimport { uid } from 'uid';\n\nimport isEmpty from 'lodash/isEmpty';\n\nimport { Alignment, InputHelper, InputLabel, Theme } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface SwitchProps extends GenericProps {\n /** Helper text. */\n helper?: string;\n /** Whether it is checked or not. */\n isChecked?: boolean;\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Native input name property. */\n name?: string;\n /** Position of the switch relative to the label. */\n position?: Extract<Alignment, 'right' | 'left'>;\n /** Theme adapting the component to light or dark background. */\n theme?: Theme;\n /** Native input value property. */\n value?: string;\n /** On change callback. */\n onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;\n /** optional props for input */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Switch';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<SwitchProps> = {\n position: Alignment.left,\n theme: Theme.light,\n};\n\n/**\n * Switch component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Switch: Comp<SwitchProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n checked,\n children,\n className,\n disabled,\n helper,\n id,\n isChecked = checked,\n isDisabled = disabled,\n name,\n onChange,\n position,\n theme,\n value,\n inputProps = {},\n ...forwardedProps\n } = props;\n const switchId = useMemo(() => id || `switch-${uid()}`, [id]);\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(!isChecked, value, name, event);\n }\n };\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n prefix: CLASSNAME,\n isChecked,\n isDisabled,\n position,\n theme,\n isUnchecked: !isChecked,\n }),\n )}\n aria-disabled={isDisabled}\n >\n <div className={`${CLASSNAME}__input-wrapper`}>\n <input\n type=\"checkbox\"\n role=\"switch\"\n id={switchId}\n className={`${CLASSNAME}__input-native`}\n name={name}\n value={value}\n disabled={isDisabled}\n checked={isChecked}\n aria-checked={Boolean(isChecked)}\n onChange={handleChange}\n {...inputProps}\n />\n\n <div className={`${CLASSNAME}__input-placeholder`}>\n <div className={`${CLASSNAME}__input-background`} />\n <div className={`${CLASSNAME}__input-indicator`} />\n </div>\n </div>\n\n {Children.count(children) > 0 && (\n <div className={`${CLASSNAME}__content`}>\n <InputLabel htmlFor={switchId} theme={theme} className={`${CLASSNAME}__label`}>\n {children}\n </InputLabel>\n {!isEmpty(helper) && (\n <InputHelper theme={theme} className={`${CLASSNAME}__helper`}>\n {helper}\n </InputHelper>\n )}\n </div>\n )}\n </div>\n );\n});\nSwitch.displayName = COMPONENT_NAME;\nSwitch.className = CLASSNAME;\nSwitch.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","position","Alignment","left","theme","Theme","light","Switch","forwardRef","props","ref","checked","children","className","disabled","helper","id","isChecked","isDisabled","name","onChange","value","inputProps","forwardedProps","switchId","useMemo","uid","handleChange","event","classNames","handleBasicClasses","prefix","isUnchecked","Boolean","Children","count","isEmpty","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { b as _objectWithoutProperties, d as _slicedToArray, e as _toConsumableArray, c as _extends } from './
|
|
1
|
+
import { b as _objectWithoutProperties, d as _slicedToArray, e as _toConsumableArray, c as _extends } from './_rollupPluginBabelHelpers.js';
|
|
2
2
|
import { Alignment, Theme, Size } from './components.js';
|
|
3
3
|
import React, { useReducer, useEffect, forwardRef, useCallback } from 'react';
|
|
4
|
-
import { c as classnames, h as handleBasicClasses, C as CSS_PREFIX } from './
|
|
5
|
-
import { I as Icon } from './
|
|
6
|
-
import { m as mergeRefs } from './
|
|
7
|
-
import { r as reducer, I as INIT_STATE, T as TabProviderContext, u as useRovingTabIndex, b as useTabProviderContext } from './
|
|
4
|
+
import { c as classnames, h as handleBasicClasses, C as CSS_PREFIX } from './getRootClassName.js';
|
|
5
|
+
import { I as Icon } from './Icon2.js';
|
|
6
|
+
import { m as mergeRefs } from './mergeRefs.js';
|
|
7
|
+
import { r as reducer, I as INIT_STATE, T as TabProviderContext, u as useRovingTabIndex, b as useTabProviderContext } from './useRovingTabIndex.js';
|
|
8
8
|
|
|
9
9
|
var DEFAULT_PROPS = {
|
|
10
10
|
isLazy: INIT_STATE.isLazy,
|
|
@@ -276,4 +276,4 @@ TabPanel.className = CLASSNAME$2;
|
|
|
276
276
|
TabPanel.defaultProps = DEFAULT_PROPS$3;
|
|
277
277
|
|
|
278
278
|
export { TabProvider as T, TabListLayout as a, TabList as b, Tab as c, TabPanel as d };
|
|
279
|
-
//# sourceMappingURL=
|
|
279
|
+
//# sourceMappingURL=TabPanel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TabPanel.js","sources":["../../../src/components/tabs/TabProvider.tsx","../../../src/components/tabs/TabList.tsx","../../../src/components/tabs/Tab.tsx","../../../src/components/tabs/TabPanel.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useReducer } from 'react';\nimport { INIT_STATE, TabProviderContext, reducer } from './state';\n\nexport interface TabProviderProps {\n /** Active tab index. */\n activeTabIndex?: number;\n /** Tab provider children. */\n children: ReactNode;\n /** Tab panel children should not render if the tab panel is hidden. */\n isLazy?: boolean;\n /** Activate tabs on focus. */\n shouldActivateOnFocus?: boolean;\n\n /** Tab change callback. */\n onChange?(index: number): void;\n}\n\nconst DEFAULT_PROPS: Partial<TabProviderProps> = {\n isLazy: INIT_STATE.isLazy,\n shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus,\n};\n\n/**\n * This component provides a context in which tabs can be defined and linked to their tab panel.\n *\n * It does not produce any markup so you can wrap it around any React elements and then split the TabList and TabPanel\n * components in the react tree.\n *\n * @param props React component props.\n * @return React element.\n */\nexport const TabProvider: React.FC<TabProviderProps> = (props) => {\n const { children, onChange, ...propState } = props;\n const [state, dispatch] = useReducer(reducer, INIT_STATE);\n\n // On prop state change => dispatch update.\n useEffect(\n () => {\n dispatch({ type: 'update', payload: propState });\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [dispatch, ...Object.values(propState)],\n );\n\n // On active tab index state change => send update to the onChange.\n useEffect(\n () => {\n if (state === INIT_STATE || !onChange || propState.activeTabIndex === state.activeTabIndex) {\n return;\n }\n onChange(state.activeTabIndex);\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [onChange, state.activeTabIndex],\n );\n\n return <TabProviderContext.Provider value={[state, dispatch]}>{children}</TabProviderContext.Provider>;\n};\nTabProvider.defaultProps = DEFAULT_PROPS;\n","import { Alignment, Theme } from '@lumx/react';\nimport { CSS_PREFIX } from '@lumx/react/constants';\nimport { Comp, GenericProps, handleBasicClasses } from '@lumx/react/utils';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\n\nimport classNames from 'classnames';\nimport React, { forwardRef, ReactNode } from 'react';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndex';\n\nexport enum TabListLayout {\n clustered = 'clustered',\n fixed = 'fixed',\n}\n\n/**\n * Defines the props of the component.\n */\nexport interface TabListProps extends GenericProps {\n /** ARIA label (purpose of the set of tabs). */\n ['aria-label']: string;\n /** Tab list. */\n children: ReactNode;\n /** Layout of the tabs in the list. */\n layout?: TabListLayout;\n /** Position of the tabs in the list (requires 'clustered' layout). */\n position?: Alignment;\n /** Theme adapting the component to light or dark background. */\n theme?: Theme;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'TabList';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = `${CSS_PREFIX}-tabs`;\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TabListProps> = {\n layout: TabListLayout.fixed,\n position: Alignment.left,\n theme: Theme.light,\n};\n\n/**\n * TabList component.\n *\n * Implements WAI-ARIA `tablist` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const TabList: Comp<TabListProps, HTMLDivElement> = forwardRef((props, ref) => {\n const { 'aria-label': ariaLabel, children, className, layout, position, theme, ...forwardedProps } = props;\n const tabListRef = React.useRef(null);\n useRovingTabIndex({\n parentRef: tabListRef,\n elementSelector: '[role=\"tab\"]',\n keepTabIndex: false,\n extraDependencies: [children],\n });\n\n return (\n <div\n ref={mergeRefs(ref, tabListRef)}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, layout, position, theme }))}\n >\n <div className={`${CLASSNAME}__links`} role=\"tablist\" aria-label={ariaLabel}>\n {children}\n </div>\n </div>\n );\n});\nTabList.displayName = COMPONENT_NAME;\nTabList.className = CLASSNAME;\nTabList.defaultProps = DEFAULT_PROPS;\n","import { Icon, IconProps, Size } from '@lumx/react';\nimport { CSS_PREFIX } from '@lumx/react/constants';\nimport { Comp, GenericProps, handleBasicClasses } from '@lumx/react/utils';\n\nimport classNames from 'classnames';\nimport React, { FocusEventHandler, forwardRef, KeyboardEventHandler, ReactNode, useCallback } from 'react';\nimport { useTabProviderContext } from './state';\n\n/**\n * Defines the props of the component.\n */\nexport interface TabProps extends GenericProps {\n /** Children are not supported. */\n children?: never;\n /** Icon (SVG path). */\n icon?: IconProps['icon'];\n /** Native id property. */\n id?: string;\n /** Whether the tab is active or not. */\n isActive?: boolean;\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Label content. */\n label: string | ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Tab';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = `${CSS_PREFIX}-tabs__link`;\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TabProps> = {};\n\n/**\n * Tab component.\n *\n * Implements WAI-ARIA `tab` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Tab: Comp<TabProps, HTMLButtonElement> = forwardRef((props, ref) => {\n const {\n className,\n disabled,\n icon,\n id,\n isActive: propIsActive,\n isDisabled = disabled,\n label,\n onFocus,\n onKeyPress,\n tabIndex = -1,\n ...forwardedProps\n } = props;\n const state = useTabProviderContext('tab', id);\n const isActive = propIsActive || state?.isActive;\n\n const changeToCurrentTab = useCallback(() => {\n if (isDisabled) {\n return;\n }\n state?.changeToTab();\n }, [isDisabled, state]);\n\n const handleFocus: FocusEventHandler = useCallback(\n (event) => {\n onFocus?.(event);\n if (state?.shouldActivateOnFocus) {\n changeToCurrentTab();\n }\n },\n [changeToCurrentTab, onFocus, state?.shouldActivateOnFocus],\n );\n\n const handleKeyPress: KeyboardEventHandler = useCallback(\n (event) => {\n onKeyPress?.(event);\n if (event.key !== 'Enter') {\n return;\n }\n changeToCurrentTab();\n },\n [changeToCurrentTab, onKeyPress],\n );\n\n return (\n <button\n ref={ref}\n {...forwardedProps}\n type=\"button\"\n id={state?.tabId}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, isActive, isDisabled }))}\n onClick={changeToCurrentTab}\n onKeyPress={handleKeyPress}\n onFocus={handleFocus}\n role=\"tab\"\n tabIndex={isActive ? 0 : tabIndex}\n aria-disabled={isDisabled}\n aria-selected={isActive}\n aria-controls={state?.tabPanelId}\n >\n {icon && <Icon icon={icon} size={Size.xs} />}\n {label && <span>{label}</span>}\n </button>\n );\n});\nTab.displayName = COMPONENT_NAME;\nTab.className = CLASSNAME;\nTab.defaultProps = DEFAULT_PROPS;\n","import { useTabProviderContext } from '@lumx/react/components/tabs/state';\nimport { CSS_PREFIX } from '@lumx/react/constants';\nimport { Comp, GenericProps, handleBasicClasses } from '@lumx/react/utils';\n\nimport classNames from 'classnames';\nimport React, { forwardRef } from 'react';\n\n/**\n * Defines the props of the component.\n */\nexport interface TabPanelProps extends GenericProps {\n /** Native id property */\n id?: string;\n /** Whether the tab is active or not. */\n isActive?: boolean;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'TabPanel';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = `${CSS_PREFIX}-tab-panel`;\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TabPanelProps> = {};\n\n/**\n * TabPanel component.\n *\n * Implements WAI-ARIA `tabpanel` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const TabPanel: Comp<TabPanelProps, HTMLDivElement> = forwardRef((props, ref) => {\n const { children, id, className, isActive: propIsActive, ...forwardedProps } = props;\n\n const state = useTabProviderContext('tabPanel', id);\n const isActive = propIsActive || state?.isActive;\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n id={state?.tabPanelId}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, isActive }))}\n role=\"tabpanel\"\n tabIndex={0}\n aria-labelledby={state?.tabId}\n >\n {(!state?.isLazy || isActive) && children}\n </div>\n );\n});\nTabPanel.displayName = COMPONENT_NAME;\nTabPanel.className = CLASSNAME;\nTabPanel.defaultProps = DEFAULT_PROPS;\n"],"names":["DEFAULT_PROPS","isLazy","INIT_STATE","shouldActivateOnFocus","TabProvider","props","children","onChange","propState","useReducer","reducer","state","dispatch","useEffect","type","payload","Object","values","activeTabIndex","defaultProps","TabListLayout","COMPONENT_NAME","CLASSNAME","CSS_PREFIX","layout","fixed","position","Alignment","left","theme","Theme","light","TabList","forwardRef","ref","ariaLabel","className","forwardedProps","tabListRef","React","useRef","useRovingTabIndex","parentRef","elementSelector","keepTabIndex","extraDependencies","mergeRefs","classNames","handleBasicClasses","prefix","displayName","Tab","disabled","icon","id","propIsActive","isActive","isDisabled","label","onFocus","onKeyPress","tabIndex","useTabProviderContext","changeToCurrentTab","useCallback","changeToTab","handleFocus","event","handleKeyPress","key","tabId","tabPanelId","Size","xs","TabPanel"],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { b as _objectWithoutProperties, c as _extends, a as _defineProperty } from './
|
|
1
|
+
import { b as _objectWithoutProperties, c as _extends, a as _defineProperty } from './_rollupPluginBabelHelpers.js';
|
|
2
2
|
import { Theme, Size } from './components.js';
|
|
3
3
|
import React, { forwardRef, useCallback } from 'react';
|
|
4
|
-
import { g as getRootClassName, c as classnames, h as handleBasicClasses, o as onEnterPressed } from './
|
|
5
|
-
import { I as Icon,
|
|
4
|
+
import { g as getRootClassName, c as classnames, h as handleBasicClasses, o as onEnterPressed } from './getRootClassName.js';
|
|
5
|
+
import { I as Icon, r as mdiArrowUp, s as mdiArrowDown } from './Icon2.js';
|
|
6
6
|
import isFunction from 'lodash/isFunction';
|
|
7
7
|
|
|
8
8
|
/**
|
|
@@ -288,4 +288,4 @@ TableRow.className = CLASSNAME$4;
|
|
|
288
288
|
TableRow.defaultProps = DEFAULT_PROPS$3;
|
|
289
289
|
|
|
290
290
|
export { Table as T, TableBody as a, ThOrder as b, TableCellVariant as c, TableCell as d, TableHeader as e, TableRow as f };
|
|
291
|
-
//# sourceMappingURL=
|
|
291
|
+
//# sourceMappingURL=TableRow.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableRow.js","sources":["../../../src/components/table/Table.tsx","../../../src/components/table/TableBody.tsx","../../../src/components/table/TableCell.tsx","../../../src/components/table/TableHeader.tsx","../../../src/components/table/TableRow.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Theme } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface TableProps extends GenericProps {\n /** Whether the table has checkbox or thumbnail on first cell or not. */\n hasBefore?: boolean;\n /** Whether the table has dividers or not. */\n hasDividers?: boolean;\n /** Theme adapting the component to light or dark background. */\n theme?: Theme;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Table';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TableProps> = {\n theme: Theme.light,\n};\n\n/**\n * Table component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Table: Comp<TableProps, HTMLTableElement> = forwardRef((props, ref) => {\n const { children, className, hasBefore, hasDividers, theme, ...forwardedProps } = props;\n\n return (\n <table\n ref={ref}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, hasBefore, hasDividers, theme }))}\n >\n {children}\n </table>\n );\n});\nTable.displayName = COMPONENT_NAME;\nTable.className = CLASSNAME;\nTable.defaultProps = DEFAULT_PROPS;\n","import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport type TableBodyProps = GenericProps;\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'TableBody';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME, true);\n\n/**\n * TableBody component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const TableBody: Comp<TableBodyProps, HTMLTableSectionElement> = forwardRef((props, ref) => {\n const { children, className, ...forwardedProps } = props;\n\n return (\n <tbody\n ref={ref}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}\n >\n {children}\n </tbody>\n );\n});\nTableBody.displayName = COMPONENT_NAME;\nTableBody.className = CLASSNAME;\n","import React, { forwardRef, useCallback } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Icon, Size } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses, onEnterPressed, ValueOf } from '@lumx/react/utils';\n\nimport { mdiArrowDown, mdiArrowUp } from '@lumx/icons';\n\nimport isFunction from 'lodash/isFunction';\n\n/**\n * Table head cell sort order.\n */\nexport const ThOrder = { asc: 'asc', desc: 'desc' } as const;\nexport type ThOrder = ValueOf<typeof ThOrder>;\n\n/**\n * Table cell variants.\n */\nexport const TableCellVariant = { body: 'body', head: 'head' } as const;\nexport type TableCellVariant = ValueOf<typeof TableCellVariant>;\n\n/**\n * Defines the props of the component.\n */\nexport interface TableCellProps extends GenericProps {\n /** Icon (SVG path).(thead only). */\n icon?: string;\n /** Whether the column is sortable or not (thead only). */\n isSortable?: boolean;\n /** Sort order displayed as icon (sortable thead only). */\n sortOrder?: ThOrder;\n /** Variant. */\n variant?: TableCellVariant;\n /** On header cell click callback. */\n onHeaderClick?(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'TableCell';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME, true);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TableCellProps> = {\n variant: TableCellVariant.body,\n};\n\n/**\n * TableCell component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const TableCell: Comp<TableCellProps, HTMLTableCellElement> = forwardRef((props, ref) => {\n const { children, className, icon, isSortable, onHeaderClick, sortOrder, variant, ...forwardedProps } = props;\n\n /**\n * Handle click on the ordered thead.\n */\n const handleOnHeaderClick = useCallback(() => {\n if (isFunction(onHeaderClick)) {\n onHeaderClick();\n }\n }, [onHeaderClick]);\n\n return (\n <>\n {variant === TableCellVariant.head && (\n <th\n ref={ref}\n {...forwardedProps}\n className={classNames(\n handleBasicClasses({ prefix: CLASSNAME, isSortable }),\n className,\n `${CLASSNAME}--head`,\n {\n [`${CLASSNAME}--is-sorted`]: isSortable && sortOrder,\n },\n )}\n tabIndex={isSortable && isFunction(onHeaderClick) ? 0 : -1}\n onClick={handleOnHeaderClick}\n onKeyDown={onEnterPressed(handleOnHeaderClick)}\n >\n <div className={`${CLASSNAME}-wrapper`}>\n {icon && !isSortable && <Icon className={`${CLASSNAME}-icon`} icon={icon} size={Size.xxs} />}\n\n {isSortable && sortOrder === ThOrder.asc && (\n <Icon className={`${CLASSNAME}-icon`} icon={mdiArrowUp} size={Size.xxs} />\n )}\n\n {isSortable && sortOrder === ThOrder.desc && (\n <Icon className={`${CLASSNAME}-icon`} icon={mdiArrowDown} size={Size.xxs} />\n )}\n\n <div className={`${CLASSNAME}-content`}>{children}</div>\n </div>\n </th>\n )}\n\n {variant === TableCellVariant.body && (\n <td\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }), `${CLASSNAME}--body`)}\n >\n <div className={`${CLASSNAME}-content`}>{children}</div>\n </td>\n )}\n </>\n );\n});\nTableCell.displayName = COMPONENT_NAME;\nTableCell.className = CLASSNAME;\nTableCell.defaultProps = DEFAULT_PROPS;\n","import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport type TableHeaderProps = GenericProps;\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'TableHeader';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME, true);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TableHeaderProps> = {};\n\n/**\n * TableHeader component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const TableHeader: Comp<TableHeaderProps, HTMLTableSectionElement> = forwardRef((props, ref) => {\n const { children, className, ...forwardedProps } = props;\n\n return (\n <thead\n ref={ref}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}\n >\n {children}\n </thead>\n );\n});\nTableHeader.displayName = COMPONENT_NAME;\nTableHeader.className = CLASSNAME;\nTableHeader.defaultProps = DEFAULT_PROPS;\n","import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface TableRowProps extends GenericProps {\n /** Whether the component is clickable or not. */\n isClickable?: boolean;\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Whether the component is selected or not. */\n isSelected?: boolean;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'TableRow';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME, true);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TableRowProps> = {};\n\n/**\n * TableRow component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const TableRow: Comp<TableRowProps, HTMLTableRowElement> = forwardRef((props, ref) => {\n const { children, className, disabled, isClickable, isDisabled = disabled, isSelected, ...forwardedProps } = props;\n\n return (\n <tr\n ref={ref}\n tabIndex={isClickable && !isDisabled ? 0 : -1}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n isClickable: isClickable && !isDisabled,\n isDisabled,\n isSelected: isSelected && !isDisabled,\n prefix: CLASSNAME,\n }),\n )}\n aria-disabled={isDisabled}\n >\n {children}\n </tr>\n );\n});\n\nTableRow.displayName = COMPONENT_NAME;\nTableRow.className = CLASSNAME;\nTableRow.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","theme","Theme","light","Table","forwardRef","props","ref","children","className","hasBefore","hasDividers","forwardedProps","classNames","handleBasicClasses","prefix","displayName","defaultProps","TableBody","ThOrder","asc","desc","TableCellVariant","body","head","variant","TableCell","icon","isSortable","onHeaderClick","sortOrder","handleOnHeaderClick","useCallback","isFunction","onEnterPressed","Size","xxs","mdiArrowUp","mdiArrowDown","TableHeader","TableRow","disabled","isClickable","isDisabled","isSelected"],"mappings":"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"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { b as _objectWithoutProperties, d as _slicedToArray, _ as _objectSpread2, c as _extends } from './
|
|
1
|
+
import { b as _objectWithoutProperties, d as _slicedToArray, _ as _objectSpread2, c as _extends } from './_rollupPluginBabelHelpers.js';
|
|
2
2
|
import { Size, Theme, Emphasis, Kind } from './components.js';
|
|
3
3
|
import React, { forwardRef, useMemo, useState, useRef, useEffect } from 'react';
|
|
4
|
-
import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './
|
|
5
|
-
import { I as Icon, c as mdiAlertCircle, b as mdiCheckCircle, n as mdiCloseCircle } from './
|
|
6
|
-
import { u as uid } from '
|
|
4
|
+
import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
|
|
5
|
+
import { I as Icon, c as mdiAlertCircle, b as mdiCheckCircle, n as mdiCloseCircle } from './Icon2.js';
|
|
6
|
+
import { u as uid } from '../index2.js';
|
|
7
7
|
import get from 'lodash/get';
|
|
8
|
-
import { m as mergeRefs } from './
|
|
9
|
-
import { I as IconButton } from './
|
|
10
|
-
import { I as InputHelper } from './
|
|
11
|
-
import { I as InputLabel } from './
|
|
8
|
+
import { m as mergeRefs } from './mergeRefs.js';
|
|
9
|
+
import { I as IconButton } from './IconButton.js';
|
|
10
|
+
import { I as InputHelper } from './InputHelper.js';
|
|
11
|
+
import { I as InputLabel } from './InputLabel.js';
|
|
12
12
|
|
|
13
13
|
/**
|
|
14
14
|
* Defines the props of the component.
|
|
@@ -319,4 +319,4 @@ TextField.className = CLASSNAME;
|
|
|
319
319
|
TextField.defaultProps = DEFAULT_PROPS;
|
|
320
320
|
|
|
321
321
|
export { TextField as T };
|
|
322
|
-
//# sourceMappingURL=
|
|
322
|
+
//# sourceMappingURL=TextField.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextField.js","sources":["../../../src/components/text-field/TextField.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, RefObject, SyntheticEvent, useEffect, useMemo, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\nimport get from 'lodash/get';\nimport { uid } from 'uid';\n\nimport { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle } from '@lumx/icons';\nimport { Emphasis, Icon, IconButton, IconButtonProps, InputHelper, InputLabel, Kind, Size, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\n\n/**\n * Defines the props of the component.\n */\nexport interface TextFieldProps extends GenericProps {\n /** Chip Group to be rendered before the main text input. */\n chips?: HTMLElement | ReactNode;\n /** Props to pass to the clear button (minus those already set by the TextField props). If not specified, the button won't be displayed. */\n clearButtonProps?: Pick<IconButtonProps, 'label'> &\n Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;\n /** Error message. */\n error?: string | ReactNode;\n /** Whether we force the focus style or not. */\n forceFocusStyle?: boolean;\n /** Whether the text field is displayed with error style or not. */\n hasError?: boolean;\n /** Additional element to put at the end of the text field. */\n afterElement?: ReactNode;\n /** Helper text. */\n helper?: string | ReactNode;\n /** Icon (SVG path). */\n icon?: string;\n /** Native input id property (generated if not provided to link the label element). */\n id?: string;\n /** Reference to the <input> or <textarea> element. */\n inputRef?: RefObject<HTMLInputElement> | RefObject<HTMLTextAreaElement>;\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Whether the component is required or not. */\n isRequired?: boolean;\n /** Whether the text field is displayed with valid style or not. */\n isValid?: boolean;\n /** Label text. */\n label?: string;\n /** Max string length the input accepts (constrains the input and displays a character counter). */\n maxLength?: number;\n /** Minimum number of rows displayed in multiline mode (requires `multiline` to be enabled). */\n minimumRows?: number;\n /** Whether the text field is a textarea or an input. */\n multiline?: boolean;\n /** Native input name property. */\n name?: string;\n /** Placeholder text. */\n placeholder?: string;\n /** Reference to the wrapper. */\n textFieldRef?: RefObject<HTMLDivElement>;\n /** Theme adapting the component to light or dark background. */\n theme?: Theme;\n /** Value. */\n value?: string;\n /** On blur callback. */\n onBlur?(event: React.FocusEvent): void;\n /** On change callback. */\n onChange(value: string, name?: string, event?: SyntheticEvent): void;\n /** On focus callback. */\n onFocus?(event: React.FocusEvent): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'TextField';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Default minimum number of rows in the multiline mode.\n */\nconst DEFAULT_MIN_ROWS = 2;\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TextFieldProps> = {\n theme: Theme.light,\n type: 'text',\n};\n\n/**\n * Hook that allows to calculate the number of rows needed for a text area.\n * @param minimumRows Minimum number of rows that we want to display.\n * @return rows to be used and a callback to recalculate\n */\nconst useComputeNumberOfRows = (\n minimumRows: number,\n): {\n /** number of rows to be used on the text area */\n rows: number;\n /**\n * Callback in order to recalculate the number of rows due to a change on the text area\n */\n recomputeNumberOfRows(target: Element): void;\n} => {\n const [rows, setRows] = useState(minimumRows);\n\n const recompute = (target: Element) => {\n /**\n * HEAD's UP! This part is a little bit tricky. The idea here is to only\n * display the necessary rows on the textarea. In order to dynamically adjust\n * the height on that field, we need to:\n * 1. Set the current amount of rows to the minimum. That will make the scroll appear.\n * 2. With that, we will have the `scrollHeight`, meaning the height of the container adjusted to the current content\n * 3. With the scroll height, we can figure out how many rows we need to use by dividing the scroll height\n * by the line height.\n * 4. With that number, we can readjust the number of rows on the text area. We need to do that here, if we leave that to\n * the state change through React, there are some scenarios (resize, hitting ENTER or BACKSPACE which add or remove lines)\n * when we will not see the update and the rows will be resized to the minimum.\n * 5. In case there is any other update on the component that changes the UI, we need to keep the number of rows\n * on the state in order to allow React to re-render. Therefore, we save them using `useState`\n */\n // eslint-disable-next-line no-param-reassign\n (target as HTMLTextAreaElement).rows = minimumRows;\n let currentRows = target.scrollHeight / (target.clientHeight / minimumRows);\n currentRows = currentRows >= minimumRows ? currentRows : minimumRows;\n // eslint-disable-next-line no-param-reassign\n (target as HTMLTextAreaElement).rows = currentRows;\n\n setRows(currentRows);\n };\n\n return {\n recomputeNumberOfRows: recompute,\n rows,\n };\n};\n\ninterface InputNativeProps {\n id?: string;\n inputRef?: RefObject<HTMLInputElement> | RefObject<HTMLTextAreaElement>;\n isDisabled?: boolean;\n isRequired?: boolean;\n multiline?: boolean;\n maxLength?: number;\n placeholder?: string;\n rows: number;\n type: string;\n name?: string;\n value?: string;\n setFocus(focus: boolean): void;\n recomputeNumberOfRows(target: Element): void;\n onChange(value: string, name?: string, event?: SyntheticEvent): void;\n onFocus?(value: React.FocusEvent): void;\n onBlur?(value: React.FocusEvent): void;\n}\n\nconst renderInputNative: React.FC<InputNativeProps> = (props) => {\n const {\n id,\n isDisabled,\n isRequired,\n placeholder,\n multiline,\n value,\n setFocus,\n onChange,\n onFocus,\n onBlur,\n inputRef,\n rows,\n recomputeNumberOfRows,\n type,\n name,\n ...forwardedProps\n } = props;\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const ref = useRef<HTMLElement>(null);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useEffect(() => {\n // Recompute the number of rows for the first rendering\n if (multiline && ref && ref.current) {\n recomputeNumberOfRows(ref.current);\n }\n }, [ref, multiline, recomputeNumberOfRows, value]);\n\n const onTextFieldFocus = (event: React.FocusEvent) => {\n onFocus?.(event);\n setFocus(true);\n };\n\n const onTextFieldBlur = (event: React.FocusEvent) => {\n onBlur?.(event);\n setFocus(false);\n };\n\n const handleChange = (event: React.ChangeEvent) => {\n onChange(get(event, 'target.value'), name, event);\n };\n\n const Component = multiline ? 'textarea' : 'input';\n const inputProps: any = {\n ...forwardedProps,\n id,\n className: multiline\n ? `${CLASSNAME}__input-native ${CLASSNAME}__input-native--textarea`\n : `${CLASSNAME}__input-native ${CLASSNAME}__input-native--text`,\n placeholder,\n value,\n name,\n disabled: isDisabled,\n required: isRequired,\n onFocus: onTextFieldFocus,\n onBlur: onTextFieldBlur,\n onChange: handleChange,\n ref: mergeRefs(inputRef as any, ref) as any,\n };\n if (multiline) {\n inputProps.rows = rows;\n } else {\n inputProps.type = type;\n }\n return <Component {...inputProps} />;\n};\n\n/**\n * TextField component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n chips,\n className,\n clearButtonProps,\n disabled,\n error,\n forceFocusStyle,\n hasError,\n helper,\n icon,\n id,\n inputRef,\n isDisabled = disabled,\n isRequired,\n isValid,\n label,\n maxLength,\n minimumRows,\n multiline,\n name,\n onBlur,\n onChange,\n onFocus,\n placeholder,\n textFieldRef,\n theme,\n type,\n value,\n afterElement,\n ...forwardedProps\n } = props;\n const textFieldId = useMemo(() => id || `text-field-${uid()}`, [id]);\n const [isFocus, setFocus] = useState(false);\n const { rows, recomputeNumberOfRows } = useComputeNumberOfRows(multiline ? minimumRows || DEFAULT_MIN_ROWS : 0);\n const valueLength = (value || '').length;\n const isNotEmpty = valueLength > 0;\n\n /**\n * Function triggered when the Clear Button is clicked.\n * The idea is to execute the `onChange` callback with an empty string\n * and remove focus from the clear button.\n * @param evt On clear event.\n */\n const onClear = (evt: React.ChangeEvent) => {\n evt.nativeEvent.preventDefault();\n evt.nativeEvent.stopPropagation();\n (evt.currentTarget as HTMLElement).blur();\n\n onChange('');\n };\n\n return (\n <div\n ref={ref}\n className={classNames(\n className,\n handleBasicClasses({\n hasChips: Boolean(chips),\n hasError: !isValid && hasError,\n hasIcon: Boolean(icon),\n hasInput: !multiline,\n hasInputClear: clearButtonProps && isNotEmpty,\n hasLabel: Boolean(label),\n hasPlaceholder: Boolean(placeholder),\n hasTextarea: multiline,\n hasValue: Boolean(value),\n isDisabled,\n isFocus: isFocus || forceFocusStyle,\n isValid,\n prefix: CLASSNAME,\n theme,\n }),\n )}\n >\n {(label || maxLength) && (\n <div className={`${CLASSNAME}__header`}>\n {label && (\n <InputLabel\n htmlFor={textFieldId}\n className={`${CLASSNAME}__label`}\n isRequired={isRequired}\n theme={theme}\n >\n {label}\n </InputLabel>\n )}\n\n {maxLength && (\n <div className={`${CLASSNAME}__char-counter`}>\n <span>{maxLength - valueLength}</span>\n {maxLength - valueLength === 0 && <Icon icon={mdiAlertCircle} size={Size.xxs} />}\n </div>\n )}\n </div>\n )}\n\n <div className={`${CLASSNAME}__wrapper`} ref={textFieldRef}>\n {icon && (\n <Icon\n className={`${CLASSNAME}__input-icon`}\n color={theme === Theme.dark ? 'light' : undefined}\n icon={icon}\n size={Size.xs}\n />\n )}\n\n {chips && (\n <div className={`${CLASSNAME}__chips`}>\n {chips}\n\n {renderInputNative({\n id: textFieldId,\n inputRef,\n isDisabled,\n isRequired,\n maxLength,\n multiline,\n onBlur,\n onChange,\n onFocus,\n placeholder,\n recomputeNumberOfRows,\n rows,\n setFocus,\n type,\n value,\n name,\n ...forwardedProps,\n })}\n </div>\n )}\n\n {!chips && (\n <div className={`${CLASSNAME}__input-wrapper`}>\n {renderInputNative({\n id: textFieldId,\n inputRef,\n isDisabled,\n isRequired,\n maxLength,\n multiline,\n onBlur,\n onChange,\n onFocus,\n placeholder,\n recomputeNumberOfRows,\n rows,\n setFocus,\n type,\n value,\n name,\n ...forwardedProps,\n })}\n </div>\n )}\n\n {(isValid || hasError) && (\n <Icon\n className={`${CLASSNAME}__input-validity`}\n color={theme === Theme.dark ? 'light' : undefined}\n icon={isValid ? mdiCheckCircle : mdiAlertCircle}\n size={Size.xxs}\n />\n )}\n\n {clearButtonProps && isNotEmpty && (\n <IconButton\n {...clearButtonProps}\n className={`${CLASSNAME}__input-clear`}\n icon={mdiCloseCircle}\n emphasis={Emphasis.low}\n size={Size.s}\n theme={theme}\n onClick={onClear}\n type=\"button\"\n />\n )}\n\n {afterElement && <div className={`${CLASSNAME}__after-element`}>{afterElement}</div>}\n </div>\n\n {hasError && error && (\n <InputHelper className={`${CLASSNAME}__helper`} kind={Kind.error} theme={theme}>\n {error}\n </InputHelper>\n )}\n\n {helper && (\n <InputHelper className={`${CLASSNAME}__helper`} theme={theme}>\n {helper}\n </InputHelper>\n )}\n </div>\n );\n});\nTextField.displayName = COMPONENT_NAME;\nTextField.className = CLASSNAME;\nTextField.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_MIN_ROWS","DEFAULT_PROPS","theme","Theme","light","type","useComputeNumberOfRows","minimumRows","useState","rows","setRows","recompute","target","currentRows","scrollHeight","clientHeight","recomputeNumberOfRows","renderInputNative","props","id","isDisabled","isRequired","placeholder","multiline","value","setFocus","onChange","onFocus","onBlur","inputRef","name","forwardedProps","ref","useRef","useEffect","current","onTextFieldFocus","event","onTextFieldBlur","handleChange","get","Component","inputProps","className","disabled","required","mergeRefs","TextField","forwardRef","chips","clearButtonProps","error","forceFocusStyle","hasError","helper","icon","isValid","label","maxLength","textFieldRef","afterElement","textFieldId","useMemo","uid","isFocus","valueLength","length","isNotEmpty","onClear","evt","nativeEvent","preventDefault","stopPropagation","currentTarget","blur","classNames","handleBasicClasses","hasChips","Boolean","hasIcon","hasInput","hasInputClear","hasLabel","hasPlaceholder","hasTextarea","hasValue","prefix","mdiAlertCircle","Size","xxs","dark","undefined","xs","mdiCheckCircle","mdiCloseCircle","Emphasis","low","s","Kind","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { d as _slicedToArray, b as _objectWithoutProperties, _ as _objectSpread2, c as _extends } from './
|
|
1
|
+
import { d as _slicedToArray, b as _objectWithoutProperties, _ as _objectSpread2, c as _extends } from './_rollupPluginBabelHelpers.js';
|
|
2
2
|
import { AspectRatio, Size, Theme } from './components.js';
|
|
3
3
|
import React, { useState, useEffect, useMemo, forwardRef } from 'react';
|
|
4
|
-
import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './
|
|
5
|
-
import { I as Icon,
|
|
6
|
-
import { m as mergeRefs } from './
|
|
4
|
+
import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
|
|
5
|
+
import { I as Icon, t as mdiImageBroken } from './Icon2.js';
|
|
6
|
+
import { m as mergeRefs } from './mergeRefs.js';
|
|
7
7
|
|
|
8
8
|
function getState(img, event) {
|
|
9
9
|
// Error event occurred or image loaded empty.
|
|
@@ -283,5 +283,5 @@ Thumbnail.displayName = COMPONENT_NAME;
|
|
|
283
283
|
Thumbnail.className = CLASSNAME;
|
|
284
284
|
Thumbnail.defaultProps = DEFAULT_PROPS;
|
|
285
285
|
|
|
286
|
-
export { Thumbnail as T };
|
|
287
|
-
//# sourceMappingURL=
|
|
286
|
+
export { Thumbnail as T, useFocusPointStyle as u };
|
|
287
|
+
//# sourceMappingURL=Thumbnail2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Thumbnail2.js","sources":["../../../src/components/thumbnail/useImageLoad.ts","../../../src/components/thumbnail/useFocusPointStyle.tsx","../../../src/components/thumbnail/Thumbnail.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport type LoadingState = 'isLoading' | 'isLoaded' | 'hasError';\n\nfunction getState(img: HTMLImageElement | null | undefined, event?: Event) {\n // Error event occurred or image loaded empty.\n if (event?.type === 'error' || (img?.complete && (img?.naturalWidth === 0 || img?.naturalHeight === 0))) {\n return 'hasError';\n }\n // Image is undefined or incomplete.\n if (!img || !img.complete) {\n return 'isLoading';\n }\n // Else loaded.\n return 'isLoaded';\n}\n\nexport function useImageLoad(imageURL: string, imgRef?: HTMLImageElement): LoadingState {\n const [state, setState] = useState<LoadingState>(getState(imgRef));\n\n // Update state when changing image URL or DOM reference.\n useEffect(() => {\n setState(getState(imgRef));\n }, [imageURL, imgRef]);\n\n // Listen to `load` and `error` event on image\n useEffect(() => {\n const img = imgRef;\n if (!img) return undefined;\n const update = (event?: Event) => setState(getState(img, event));\n img.addEventListener('load', update);\n img.addEventListener('error', update);\n return () => {\n img.removeEventListener('load', update);\n img.removeEventListener('error', update);\n };\n }, [imgRef, imgRef?.src]);\n\n return state;\n}\n","import { CSSProperties, useEffect, useMemo, useState } from 'react';\nimport { AspectRatio } from '@lumx/react/components';\nimport { ThumbnailProps } from '@lumx/react/components/thumbnail/Thumbnail';\n\n// Calculate shift to center the focus point in the container.\nfunction shiftPosition(scale: number, focusPoint: number, imageSize: number, containerSize: number) {\n const scaledSize = imageSize / scale;\n const scaledFocusHeight = focusPoint * scaledSize;\n const startFocus = scaledFocusHeight - containerSize / 2;\n const shift = startFocus / (scaledSize - containerSize);\n return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);\n}\n\ntype Size = { width: number; height: number };\n\n// Compute CSS properties to apply the focus point.\nexport const useFocusPointStyle = (\n { image, aspectRatio, focusPoint, imgProps: { width, height } = {} }: ThumbnailProps,\n element: HTMLImageElement | undefined,\n isLoaded: boolean,\n): CSSProperties => {\n // Get natural image size from imgProps or img element.\n const imageSize: Size | undefined = useMemo(() => {\n // Focus point is not applicable => exit early\n if (!image || aspectRatio === AspectRatio.original || (!focusPoint?.x && !focusPoint?.y)) return undefined;\n if (typeof width === 'number' && typeof height === 'number') return { width, height };\n if (element && isLoaded) return { width: element.naturalWidth, height: element.naturalHeight };\n return undefined;\n }, [aspectRatio, element, focusPoint?.x, focusPoint?.y, height, image, isLoaded, width]);\n\n // Get container size (dependant on imageSize).\n const [containerSize, setContainerSize] = useState<Size | undefined>(undefined);\n useEffect(\n function updateContainerSize() {\n const cWidth = element?.offsetWidth;\n const cHeight = element?.offsetHeight;\n if (cWidth && cHeight) {\n // Update only if needed.\n setContainerSize((oldContainerSize) =>\n oldContainerSize?.width === cWidth && oldContainerSize.height === cHeight\n ? oldContainerSize\n : { width: cWidth, height: cHeight },\n );\n } else if (imageSize) {\n // Wait for a render (in case the container size is dependent on the image size).\n requestAnimationFrame(updateContainerSize);\n }\n },\n [element?.offsetHeight, element?.offsetWidth, imageSize],\n );\n\n // Compute style.\n const [style, setStyle] = useState<CSSProperties>({});\n useEffect(() => {\n // Focus point is not applicable => exit early\n if (!image || aspectRatio === AspectRatio.original || (!focusPoint?.x && !focusPoint?.y)) {\n return;\n }\n if (!element || !imageSize) {\n // Focus point can be computed but now right now (image size unknown).\n setStyle({ visibility: 'hidden' });\n return;\n }\n if (!containerSize) {\n // Missing container size abort focus point compute.\n setStyle({});\n return;\n }\n\n const heightScale = imageSize.height / containerSize.height;\n const widthScale = imageSize.width / containerSize.width;\n const scale = Math.min(widthScale, heightScale);\n\n // Focus Y relative to the top (instead of the center)\n const focusPointFromTop = Math.abs((focusPoint?.y || 0) - 1) / 2;\n const y = shiftPosition(scale, focusPointFromTop, imageSize.height, containerSize.height);\n\n // Focus X relative to the left (instead of the center)\n const focusPointFromLeft = Math.abs((focusPoint?.x || 0) + 1) / 2;\n const x = shiftPosition(scale, focusPointFromLeft, imageSize.width, containerSize.width);\n\n const objectPosition = `${x}% ${y}%`;\n\n // Update only if needed.\n setStyle((oldStyle) => (oldStyle.objectPosition === objectPosition ? oldStyle : { objectPosition }));\n }, [aspectRatio, containerSize, element, focusPoint?.x, focusPoint?.y, image, imageSize]);\n\n return style;\n};\n","import React, {\n CSSProperties,\n forwardRef,\n ImgHTMLAttributes,\n KeyboardEventHandler,\n MouseEventHandler,\n ReactElement,\n ReactNode,\n Ref,\n useState,\n} from 'react';\nimport classNames from 'classnames';\n\nimport { AspectRatio, HorizontalAlignment, Icon, Size, Theme } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\nimport { mdiImageBroken } from '@lumx/icons';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\nimport { useImageLoad } from '@lumx/react/components/thumbnail/useImageLoad';\nimport { useFocusPointStyle } from '@lumx/react/components/thumbnail/useFocusPointStyle';\nimport { FocusPoint, ThumbnailSize, ThumbnailVariant } from './types';\n\ntype ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;\n\n/**\n * Defines the props of the component.\n */\nexport interface ThumbnailProps extends GenericProps {\n /** Alignment of the thumbnail in it's parent (requires flex parent). */\n align?: HorizontalAlignment;\n /** Image alternative text. */\n alt: string;\n /** Image aspect ratio. */\n aspectRatio?: AspectRatio;\n /** Badge. */\n badge?: ReactElement;\n /** Image cross origin resource policy. */\n crossOrigin?: ImgHTMLProps['crossOrigin'];\n /** Fallback icon (SVG path) or react node when image fails to load. */\n fallback?: string | ReactNode;\n /** Whether the thumbnail should fill it's parent size (requires flex parent) or not. */\n fillHeight?: boolean;\n /** Apply relative vertical and horizontal shift (from -1 to 1) on the image position inside the thumbnail. */\n focusPoint?: FocusPoint;\n /** Image URL. */\n image: string;\n /** Props to inject into the native <img> element. */\n imgProps?: ImgHTMLProps;\n /** Reference to the native <img> element. */\n imgRef?: Ref<HTMLImageElement>;\n /** Set to true to force the display of the loading skeleton. */\n isLoading?: boolean;\n /** Size variant of the component. */\n size?: ThumbnailSize;\n /** Image loading mode. */\n loading?: ImgHTMLProps['loading'];\n /** On click callback. */\n onClick?: MouseEventHandler<HTMLDivElement>;\n /** On key press callback. */\n onKeyPress?: KeyboardEventHandler<HTMLDivElement>;\n /** Theme adapting the component to light or dark background. */\n theme?: Theme;\n /** Variant of the component. */\n variant?: ThumbnailVariant;\n /** Props to pass to the link wrapping the thumbnail. */\n linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n /** Custom react component for the link (can be used to inject react router Link). */\n linkAs?: 'a' | any;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Thumbnail';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<ThumbnailProps> = {\n fallback: mdiImageBroken,\n loading: 'lazy',\n theme: Theme.light,\n};\n\n/**\n * Thumbnail component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {\n const {\n align,\n alt,\n aspectRatio = AspectRatio.original,\n badge,\n className,\n crossOrigin,\n fallback,\n fillHeight,\n // `focusPoint` needs to be here to remove it from `forwardedProps`.\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n focusPoint,\n image,\n imgProps,\n imgRef: propImgRef,\n isLoading: isLoadingProp,\n loading,\n size,\n theme,\n variant,\n linkProps,\n linkAs,\n ...forwardedProps\n } = props;\n const [imgElement, setImgElement] = useState<HTMLImageElement>();\n\n // Image loading state.\n const loadingState = useImageLoad(image, imgElement);\n const isLoaded = loadingState === 'isLoaded';\n const isLoading = isLoadingProp || loadingState === 'isLoading';\n const hasError = loadingState === 'hasError';\n\n // Focus point.\n const focusPointStyle = useFocusPointStyle(props, imgElement, isLoaded);\n\n const hasIconErrorFallback = hasError && typeof fallback === 'string';\n const hasCustomErrorFallback = hasError && !hasIconErrorFallback;\n const imageErrorStyle: CSSProperties = {};\n if (hasIconErrorFallback) {\n // Keep the image layout on icon fallback.\n imageErrorStyle.visibility = 'hidden';\n } else if (hasCustomErrorFallback) {\n // Remove the image on custom fallback.\n imageErrorStyle.display = 'none';\n }\n\n const isLink = Boolean(linkProps?.href || linkAs);\n const isButton = !!forwardedProps.onClick;\n const isClickable = isButton || isLink;\n\n let Wrapper: any = 'div';\n const wrapperProps = { ...forwardedProps };\n if (isLink) {\n Wrapper = linkAs || 'a';\n Object.assign(wrapperProps, linkProps);\n } else if (isButton) {\n Wrapper = 'button';\n wrapperProps.type = forwardedProps.type || 'button';\n wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;\n }\n\n return (\n <Wrapper\n {...wrapperProps}\n ref={ref}\n className={classNames(\n linkProps?.className,\n className,\n handleBasicClasses({\n align,\n aspectRatio,\n prefix: CLASSNAME,\n size,\n theme,\n variant,\n isClickable,\n hasError,\n hasIconErrorFallback,\n hasCustomErrorFallback,\n isLoading,\n hasBadge: !!badge,\n }),\n fillHeight && `${CLASSNAME}--fill-height`,\n )}\n >\n <div className={`${CLASSNAME}__background`}>\n <img\n {...imgProps}\n style={{\n ...imgProps?.style,\n ...imageErrorStyle,\n ...focusPointStyle,\n }}\n ref={mergeRefs(setImgElement, propImgRef)}\n className={classNames(\n handleBasicClasses({\n prefix: `${CLASSNAME}__image`,\n isLoading,\n hasDefinedSize: Boolean(imgProps?.height && imgProps.width),\n }),\n imgProps?.className,\n )}\n crossOrigin={crossOrigin}\n src={image}\n alt={alt}\n loading={loading}\n />\n {!isLoading && hasError && (\n <div className={`${CLASSNAME}__fallback`}>\n {hasIconErrorFallback ? (\n <Icon icon={fallback as string} size={Size.xxs} theme={theme} />\n ) : (\n fallback\n )}\n </div>\n )}\n </div>\n {badge &&\n React.cloneElement(badge, { className: classNames(`${CLASSNAME}__badge`, badge.props.className) })}\n </Wrapper>\n );\n});\nThumbnail.displayName = COMPONENT_NAME;\nThumbnail.className = CLASSNAME;\nThumbnail.defaultProps = DEFAULT_PROPS;\n"],"names":["getState","img","event","type","complete","naturalWidth","naturalHeight","useImageLoad","imageURL","imgRef","useState","state","setState","useEffect","undefined","update","addEventListener","removeEventListener","src","shiftPosition","scale","focusPoint","imageSize","containerSize","scaledSize","scaledFocusHeight","startFocus","shift","Math","floor","max","min","useFocusPointStyle","element","isLoaded","image","aspectRatio","imgProps","width","height","useMemo","AspectRatio","original","x","y","setContainerSize","updateContainerSize","cWidth","offsetWidth","cHeight","offsetHeight","oldContainerSize","requestAnimationFrame","style","setStyle","visibility","heightScale","widthScale","focusPointFromTop","abs","focusPointFromLeft","objectPosition","oldStyle","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","fallback","mdiImageBroken","loading","theme","Theme","light","Thumbnail","forwardRef","props","ref","align","alt","badge","className","crossOrigin","fillHeight","propImgRef","isLoadingProp","isLoading","size","variant","linkProps","linkAs","forwardedProps","imgElement","setImgElement","loadingState","hasError","focusPointStyle","hasIconErrorFallback","hasCustomErrorFallback","imageErrorStyle","display","isLink","Boolean","href","isButton","onClick","isClickable","Wrapper","wrapperProps","Object","assign","classNames","handleBasicClasses","prefix","hasBadge","mergeRefs","hasDefinedSize","Size","xxs","React","cloneElement","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { b as _objectWithoutProperties, c as _extends } from './
|
|
1
|
+
import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
|
|
2
2
|
import React, { forwardRef } from 'react';
|
|
3
|
-
import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './
|
|
3
|
+
import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* Defines the props of the component.
|
|
@@ -57,4 +57,4 @@ Toolbar.className = CLASSNAME;
|
|
|
57
57
|
Toolbar.defaultProps = DEFAULT_PROPS;
|
|
58
58
|
|
|
59
59
|
export { Toolbar as T };
|
|
60
|
-
//# sourceMappingURL=
|
|
60
|
+
//# sourceMappingURL=Toolbar2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Toolbar2.js","sources":["../../../src/components/toolbar/Toolbar.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface ToolbarProps extends GenericProps {\n /** After content (placed after the label). */\n after?: ReactNode;\n /** Before content (placed before the label). */\n before?: ReactNode;\n /** Label content. */\n label?: ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Toolbar';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<ToolbarProps> = {};\n\n/**\n * Toolbar component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Toolbar: Comp<ToolbarProps, HTMLDivElement> = forwardRef((props, ref) => {\n const { after, before, className, label, ...forwardedProps } = props;\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n hasAfter: Boolean(after),\n hasBefore: Boolean(before),\n hasLabel: Boolean(label),\n prefix: CLASSNAME,\n }),\n )}\n >\n {before && <div className={`${CLASSNAME}__before`}>{before}</div>}\n {label && <div className={`${CLASSNAME}__label`}>{label}</div>}\n {after && <div className={`${CLASSNAME}__after`}>{after}</div>}\n </div>\n );\n});\nToolbar.displayName = COMPONENT_NAME;\nToolbar.className = CLASSNAME;\nToolbar.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","Toolbar","forwardRef","props","ref","after","before","className","label","forwardedProps","classNames","handleBasicClasses","hasAfter","Boolean","hasBefore","hasLabel","prefix","displayName","defaultProps"],"mappings":";;;;AAMA;;;;AAYA;;;AAGA,IAAMA,cAAc,GAAG,SAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;AAGA,IAAMG,aAAoC,GAAG,EAA7C;AAEA;;;;;;;;IAOaC,OAA2C,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAC1EC,KAD0E,GACnBF,KADmB,CAC1EE,KAD0E;AAAA,MACnEC,MADmE,GACnBH,KADmB,CACnEG,MADmE;AAAA,MAC3DC,SAD2D,GACnBJ,KADmB,CAC3DI,SAD2D;AAAA,MAChDC,KADgD,GACnBL,KADmB,CAChDK,KADgD;AAAA,MACtCC,cADsC,4BACnBN,KADmB;;AAGlF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQK,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CACjBH,SADiB,EAEjBI,kBAAkB,CAAC;AACfC,MAAAA,QAAQ,EAAEC,OAAO,CAACR,KAAD,CADF;AAEfS,MAAAA,SAAS,EAAED,OAAO,CAACP,MAAD,CAFH;AAGfS,MAAAA,QAAQ,EAAEF,OAAO,CAACL,KAAD,CAHF;AAIfQ,MAAAA,MAAM,EAAElB;AAJO,KAAD,CAFD;AAHzB,MAaKQ,MAAM,IAAI;AAAK,IAAA,SAAS,YAAKR,SAAL;AAAd,KAAyCQ,MAAzC,CAbf,EAcKE,KAAK,IAAI;AAAK,IAAA,SAAS,YAAKV,SAAL;AAAd,KAAwCU,KAAxC,CAdd,EAeKH,KAAK,IAAI;AAAK,IAAA,SAAS,YAAKP,SAAL;AAAd,KAAwCO,KAAxC,CAfd,CADJ;AAmBH,CAtBoE;AAuBrEJ,OAAO,CAACgB,WAAR,GAAsBpB,cAAtB;AACAI,OAAO,CAACM,SAAR,GAAoBT,SAApB;AACAG,OAAO,CAACiB,YAAR,GAAuBlB,aAAvB;;;;"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { _ as _objectSpread2, c as _extends, d as _slicedToArray, b as _objectWithoutProperties } from './
|
|
1
|
+
import { _ as _objectSpread2, c as _extends, d as _slicedToArray, b as _objectWithoutProperties } from './_rollupPluginBabelHelpers.js';
|
|
2
2
|
import React, { useMemo, cloneElement, useState, useEffect, forwardRef } from 'react';
|
|
3
|
-
import { f as onEscapePressed, T as TOOLTIP_LONG_PRESS_DELAY, i as TOOLTIP_HOVER_DELAY, g as getRootClassName, c as classnames, h as handleBasicClasses } from './
|
|
4
|
-
import { u as uid } from '
|
|
5
|
-
import { D as DOCUMENT } from './constants.
|
|
3
|
+
import { f as onEscapePressed, T as TOOLTIP_LONG_PRESS_DELAY, i as TOOLTIP_HOVER_DELAY, g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
|
|
4
|
+
import { u as uid } from '../index2.js';
|
|
5
|
+
import { D as DOCUMENT } from './constants.js';
|
|
6
6
|
import get from 'lodash/get';
|
|
7
|
-
import { b as usePopper, P as Placement } from './
|
|
8
|
-
import { m as mergeRefs } from './
|
|
7
|
+
import { b as usePopper, P as Placement } from './Popover2.js';
|
|
8
|
+
import { m as mergeRefs } from './mergeRefs.js';
|
|
9
9
|
import { createPortal } from 'react-dom';
|
|
10
10
|
|
|
11
11
|
/**
|
|
@@ -283,4 +283,4 @@ Tooltip.className = CLASSNAME;
|
|
|
283
283
|
Tooltip.defaultProps = DEFAULT_PROPS;
|
|
284
284
|
|
|
285
285
|
export { Tooltip as T };
|
|
286
|
-
//# sourceMappingURL=
|
|
286
|
+
//# sourceMappingURL=Tooltip2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip2.js","sources":["../../../src/components/tooltip/useInjectTooltipRef.tsx","../../../src/utils/browserDoesNotSupportHover.ts","../../../src/components/tooltip/useTooltipOpen.tsx","../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import { mergeRefs } from '@lumx/react/utils/mergeRefs';\nimport get from 'lodash/get';\nimport React, { cloneElement, ReactNode, useMemo } from 'react';\n\n/**\n * Add ref and ARIA attribute(s) in tooltip children or wrapped children.\n * Button, IconButton, Icon and React HTML elements don't need to be wrapped but any other kind of children (array, fragment, custom components)\n * will be wrapped in a <span>.\n *\n * @param children Original tooltip anchor.\n * @param setAnchorElement Set tooltip anchor element.\n * @param isOpen Whether the tooltip is open or not.\n * @param id Tooltip id.\n * @return tooltip anchor.\n */\nexport const useInjectTooltipRef = (\n children: ReactNode,\n setAnchorElement: (e: HTMLDivElement) => void,\n isOpen: boolean,\n id: string,\n): ReactNode => {\n return useMemo(() => {\n const ariaProps = { 'aria-describedby': isOpen ? id : undefined };\n if (\n children &&\n get(children, '$$typeof') &&\n get(children, 'props.disabled') !== true &&\n get(children, 'props.isDisabled') !== true\n ) {\n const element = children as any;\n\n return cloneElement(element, {\n ...element.props,\n ...ariaProps,\n ref: mergeRefs(element.ref, setAnchorElement),\n });\n }\n return (\n <div className=\"lumx-tooltip-anchor-wrapper\" ref={setAnchorElement} {...ariaProps}>\n {children}\n </div>\n );\n }, [isOpen, id, children, setAnchorElement]);\n};\n","/** Return true if the browser does not support pointer hover */\nexport const browserDoesNotSupportHover = (): boolean => !!window.matchMedia?.('(hover: none)').matches;\n","import { onEscapePressed } from '@lumx/react/utils';\nimport { useEffect, useState } from 'react';\nimport { browserDoesNotSupportHover } from '@lumx/react/utils/browserDoesNotSupportHover';\nimport { TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY } from '@lumx/react/constants';\n\n/**\n * Hook controlling tooltip visibility using mouse hover the anchor and delay.\n *\n * @param delay Delay in millisecond to display the tooltip.\n * @param anchorElement Tooltip anchor element.\n * @return whether or not to show the tooltip.\n */\nexport function useTooltipOpen(delay: number | undefined, anchorElement: HTMLElement | null): boolean {\n const [isOpen, setIsOpen] = useState(false);\n\n useEffect(() => {\n if (!anchorElement) {\n return undefined;\n }\n let timer: number | undefined;\n let openStartTime: number | undefined;\n let shouldOpen: boolean | undefined;\n\n // Run timer to defer updating the isOpen state.\n const deferUpdate = (duration: number) => {\n if (timer) clearTimeout(timer);\n timer = setTimeout(() => {\n setIsOpen(!!shouldOpen);\n }, duration) as any;\n };\n\n const hoverNotSupported = browserDoesNotSupportHover();\n const hasTouch = 'ontouchstart' in window;\n\n // Adapt open/close delay\n const openDelay = delay || (hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.open : TOOLTIP_HOVER_DELAY.open);\n const closeDelay = hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.close : TOOLTIP_HOVER_DELAY.close;\n\n // Open (or/and cancel closing) of tooltip.\n const open = () => {\n if (shouldOpen && !timer) return;\n shouldOpen = true;\n openStartTime = Date.now();\n deferUpdate(openDelay);\n };\n\n // Close or cancel opening of tooltip\n const close = (overrideDelay = closeDelay) => {\n if (!shouldOpen && !timer) return;\n shouldOpen = false;\n deferUpdate(overrideDelay);\n };\n const closeImmediately = () => close(0);\n\n /**\n * Handle touchend event\n * If `touchend` comes before the open delay => cancel tooltip (close immediate).\n * Else if `touchend` comes after the open delay => tooltip takes priority, the anchor's default touch end event is prevented.\n */\n const touchEnd = (evt: Event) => {\n if (!openStartTime) return;\n if (Date.now() - openStartTime >= openDelay) {\n // Tooltip take priority, event prevented.\n evt.stopPropagation();\n evt.preventDefault();\n anchorElement.focus();\n // Close with delay.\n close();\n } else {\n // Close immediately.\n closeImmediately();\n }\n };\n\n // Adapt event to browsers with or without `hover` support.\n const events: Array<[Node, Event['type'], any]> = hoverNotSupported\n ? [\n [anchorElement, hasTouch ? 'touchstart' : 'mousedown', open],\n [anchorElement, hasTouch ? 'touchend' : 'mouseup', touchEnd],\n ]\n : [\n [anchorElement, 'mouseenter', open],\n [anchorElement, 'mouseleave', close],\n [anchorElement, 'mouseup', closeImmediately],\n ];\n\n // Events always applied no matter the browser:.\n events.push(\n // Open on focus.\n [anchorElement, 'focusin', open],\n // Close on lost focus.\n [anchorElement, 'focusout', closeImmediately],\n // Close on ESC keydown\n [anchorElement, 'keydown', onEscapePressed(closeImmediately)],\n );\n\n // Attach events\n for (const [node, eventType, evenHandler] of events) {\n node.addEventListener(eventType, evenHandler);\n }\n return () => {\n // Detach events.\n for (const [node, eventType, evenHandler] of events) {\n node.removeEventListener(eventType, evenHandler);\n }\n closeImmediately();\n };\n }, [anchorElement, delay]);\n\n return isOpen;\n}\n","/* eslint-disable react-hooks/rules-of-hooks */\nimport React, { forwardRef, ReactNode, useMemo, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { usePopper } from 'react-popper';\nimport { uid } from 'uid';\n\nimport classNames from 'classnames';\n\nimport { Placement } from '@lumx/react/components/popover/Popover';\n\nimport { DOCUMENT } from '@lumx/react/constants';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\n\nimport { useInjectTooltipRef } from './useInjectTooltipRef';\nimport { useTooltipOpen } from './useTooltipOpen';\n\n/** Position of the tooltip relative to the anchor element. */\nexport type TooltipPlacement = Extract<Placement, 'top' | 'right' | 'bottom' | 'left'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface TooltipProps extends GenericProps {\n /** Anchor (element on which we activate the tooltip). */\n children: ReactNode;\n /** Delay (in ms) before closing the tooltip. */\n delay?: number;\n /** Whether the tooltip is displayed even without the mouse hovering the anchor. */\n forceOpen?: boolean;\n /** Label text. */\n label?: string | null | false;\n /** Placement of the tooltip relative to the anchor. */\n placement?: TooltipPlacement;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Tooltip';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TooltipProps> = {\n placement: Placement.BOTTOM,\n};\n\n/**\n * Arrow size (in pixel).\n */\nconst ARROW_SIZE = 8;\n\n/**\n * Tooltip component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, ref) => {\n if (!DOCUMENT) {\n // Can't render in SSR.\n return null;\n }\n const { label, children, className, delay, placement, forceOpen, ...forwardedProps } = props;\n if (!label) {\n return <>{children}</>;\n }\n\n const id = useMemo(() => `tooltip-${uid()}`, []);\n\n const [popperElement, setPopperElement] = useState<null | HTMLElement>(null);\n const [anchorElement, setAnchorElement] = useState<null | HTMLElement>(null);\n const { styles, attributes } = usePopper(anchorElement, popperElement, {\n placement,\n modifiers: [\n {\n name: 'offset',\n options: { offset: [0, ARROW_SIZE] },\n },\n ],\n });\n\n const position = attributes?.popper?.['data-popper-placement'] ?? placement;\n const isOpen = useTooltipOpen(delay, anchorElement) || forceOpen;\n const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen as boolean, id);\n\n return (\n <>\n {wrappedChildren}\n {isOpen &&\n createPortal(\n <div\n ref={mergeRefs(ref, setPopperElement)}\n {...forwardedProps}\n id={id}\n role=\"tooltip\"\n aria-label={label}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, position }))}\n style={styles.popper}\n {...attributes.popper}\n >\n <div className={`${CLASSNAME}__arrow`} />\n <div className={`${CLASSNAME}__inner`}>\n {label.indexOf('\\n') !== -1\n ? label.split('\\n').map((sentence: string) => <p key={sentence}>{sentence}</p>)\n : label}\n </div>\n </div>,\n document.body,\n )}\n </>\n );\n});\nTooltip.displayName = COMPONENT_NAME;\nTooltip.className = CLASSNAME;\nTooltip.defaultProps = DEFAULT_PROPS;\n"],"names":["useInjectTooltipRef","children","setAnchorElement","isOpen","id","useMemo","ariaProps","undefined","get","element","cloneElement","props","ref","mergeRefs","browserDoesNotSupportHover","window","matchMedia","matches","useTooltipOpen","delay","anchorElement","useState","setIsOpen","useEffect","timer","openStartTime","shouldOpen","deferUpdate","duration","clearTimeout","setTimeout","hoverNotSupported","hasTouch","openDelay","TOOLTIP_LONG_PRESS_DELAY","open","TOOLTIP_HOVER_DELAY","closeDelay","close","Date","now","overrideDelay","closeImmediately","touchEnd","evt","stopPropagation","preventDefault","focus","events","push","onEscapePressed","node","eventType","evenHandler","addEventListener","removeEventListener","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","placement","Placement","BOTTOM","ARROW_SIZE","Tooltip","forwardRef","DOCUMENT","label","className","forceOpen","forwardedProps","uid","popperElement","setPopperElement","usePopper","modifiers","name","options","offset","styles","attributes","position","popper","wrappedChildren","createPortal","classNames","handleBasicClasses","prefix","indexOf","split","map","sentence","document","body","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { b as _objectWithoutProperties, c as _extends } from './
|
|
1
|
+
import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
|
|
2
2
|
import { Size, AspectRatio, Theme } from './components.js';
|
|
3
3
|
import React, { forwardRef } from 'react';
|
|
4
|
-
import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './
|
|
5
|
-
import { I as Icon } from './
|
|
4
|
+
import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
|
|
5
|
+
import { I as Icon } from './Icon2.js';
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
8
|
* Uploader variants.
|
|
@@ -81,4 +81,4 @@ Uploader.className = CLASSNAME;
|
|
|
81
81
|
Uploader.defaultProps = DEFAULT_PROPS;
|
|
82
82
|
|
|
83
83
|
export { UploaderVariant as U, Uploader as a };
|
|
84
|
-
//# sourceMappingURL=
|
|
84
|
+
//# sourceMappingURL=Uploader2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Uploader2.js","sources":["../../../src/components/uploader/Uploader.tsx"],"sourcesContent":["import React, { forwardRef, MouseEventHandler } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AspectRatio, Icon, Size, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses, ValueOf } from '@lumx/react/utils';\n\n/**\n * Uploader variants.\n */\nexport const UploaderVariant = {\n square: 'square',\n rounded: 'rounded',\n circle: 'circle',\n} as const;\nexport type UploaderVariant = ValueOf<typeof UploaderVariant>;\n\n/**\n * Uploader sizes.\n */\nexport type UploaderSize = Extract<Size, 'xl' | 'xxl'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface UploaderProps extends GenericProps {\n /** Image aspect ratio. */\n aspectRatio?: AspectRatio;\n /** Icon (SVG path). */\n icon?: string;\n /** Label text. */\n label?: string;\n /** Size variant. */\n size?: UploaderSize;\n /** Theme adapting the component to light or dark background. */\n theme?: Theme;\n /** Variant. */\n variant?: UploaderVariant;\n /** On click callback. */\n onClick?: MouseEventHandler<HTMLDivElement>;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Uploader';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<UploaderProps> = {\n aspectRatio: AspectRatio.horizontal,\n size: Size.xl,\n theme: Theme.light,\n variant: UploaderVariant.square,\n};\n\n/**\n * Uploader component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Uploader: Comp<UploaderProps, HTMLDivElement> = forwardRef((props, ref) => {\n const { aspectRatio, className, label, icon, size, theme, variant, ...forwardedProps } = props;\n // Adjust to square aspect ratio when using circle variants.\n const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio.square : aspectRatio;\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n aspectRatio: adjustedAspectRatio,\n prefix: CLASSNAME,\n size,\n theme,\n variant,\n }),\n )}\n >\n <div className={`${CLASSNAME}__background`} />\n\n <div className={`${CLASSNAME}__wrapper`}>\n {icon && (\n <div className={`${CLASSNAME}__icon`}>\n <Icon icon={icon} size={Size.s} />\n </div>\n )}\n\n {label && <span className={`${CLASSNAME}__label`}>{label}</span>}\n </div>\n </div>\n );\n});\nUploader.displayName = COMPONENT_NAME;\nUploader.className = CLASSNAME;\nUploader.defaultProps = DEFAULT_PROPS;\n"],"names":["UploaderVariant","square","rounded","circle","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","aspectRatio","AspectRatio","horizontal","size","Size","xl","theme","Theme","light","variant","Uploader","forwardRef","props","ref","className","label","icon","forwardedProps","adjustedAspectRatio","classNames","handleBasicClasses","prefix","s","displayName","defaultProps"],"mappings":";;;;;;AAOA;;;;IAGaA,eAAe,GAAG;AAC3BC,EAAAA,MAAM,EAAE,QADmB;AAE3BC,EAAAA,OAAO,EAAE,SAFkB;AAG3BC,EAAAA,MAAM,EAAE;AAHmB;;AAgC/B;;;AAGA,IAAMC,cAAc,GAAG,UAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;AAGA,IAAMG,aAAqC,GAAG;AAC1CC,EAAAA,WAAW,EAAEC,WAAW,CAACC,UADiB;AAE1CC,EAAAA,IAAI,EAAEC,IAAI,CAACC,EAF+B;AAG1CC,EAAAA,KAAK,EAAEC,KAAK,CAACC,KAH6B;AAI1CC,EAAAA,OAAO,EAAEjB,eAAe,CAACC;AAJiB,CAA9C;AAOA;;;;;;;;IAOaiB,QAA6C,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAC5Eb,WAD4E,GACKY,KADL,CAC5EZ,WAD4E;AAAA,MAC/Dc,SAD+D,GACKF,KADL,CAC/DE,SAD+D;AAAA,MACpDC,KADoD,GACKH,KADL,CACpDG,KADoD;AAAA,MAC7CC,IAD6C,GACKJ,KADL,CAC7CI,IAD6C;AAAA,MACvCb,IADuC,GACKS,KADL,CACvCT,IADuC;AAAA,MACjCG,KADiC,GACKM,KADL,CACjCN,KADiC;AAAA,MAC1BG,OAD0B,GACKG,KADL,CAC1BH,OAD0B;AAAA,MACdQ,cADc,4BACKL,KADL;;;AAGpF,MAAMM,mBAAmB,GAAGT,OAAO,KAAKjB,eAAe,CAACG,MAA5B,GAAqCM,WAAW,CAACR,MAAjD,GAA0DO,WAAtF;AAEA,SACI;AACI,IAAA,GAAG,EAAEa;AADT,KAEQI,cAFR;AAGI,IAAA,SAAS,EAAEE,UAAU,CACjBL,SADiB,EAEjBM,kBAAkB,CAAC;AACfpB,MAAAA,WAAW,EAAEkB,mBADE;AAEfG,MAAAA,MAAM,EAAExB,SAFO;AAGfM,MAAAA,IAAI,EAAJA,IAHe;AAIfG,MAAAA,KAAK,EAALA,KAJe;AAKfG,MAAAA,OAAO,EAAPA;AALe,KAAD,CAFD;AAHzB,MAcI;AAAK,IAAA,SAAS,YAAKZ,SAAL;AAAd,IAdJ,EAgBI;AAAK,IAAA,SAAS,YAAKA,SAAL;AAAd,KACKmB,IAAI,IACD;AAAK,IAAA,SAAS,YAAKnB,SAAL;AAAd,KACI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAEmB,IAAZ;AAAkB,IAAA,IAAI,EAAEZ,IAAI,CAACkB;AAA7B,IADJ,CAFR,EAOKP,KAAK,IAAI;AAAM,IAAA,SAAS,YAAKlB,SAAL;AAAf,KAAyCkB,KAAzC,CAPd,CAhBJ,CADJ;AA4BH,CAjCsE;AAkCvEL,QAAQ,CAACa,WAAT,GAAuB3B,cAAvB;AACAc,QAAQ,CAACI,SAAT,GAAqBjB,SAArB;AACAa,QAAQ,CAACc,YAAT,GAAwBzB,aAAxB;;;;"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { b as _objectWithoutProperties, _ as _objectSpread2, c as _extends } from './
|
|
1
|
+
import { b as _objectWithoutProperties, _ as _objectSpread2, c as _extends } from './_rollupPluginBabelHelpers.js';
|
|
2
2
|
import { Size, Orientation, Theme, ColorPalette } from './components.js';
|
|
3
3
|
import React, { forwardRef } from 'react';
|
|
4
|
-
import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './
|
|
4
|
+
import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
|
|
5
5
|
import isEmpty from 'lodash/isEmpty';
|
|
6
|
-
import { A as Avatar } from './
|
|
7
|
-
import { L as Link } from './
|
|
6
|
+
import { A as Avatar } from './Avatar2.js';
|
|
7
|
+
import { L as Link } from './Link2.js';
|
|
8
8
|
|
|
9
9
|
/**
|
|
10
10
|
* Component display name.
|
|
@@ -122,4 +122,4 @@ UserBlock.className = CLASSNAME;
|
|
|
122
122
|
UserBlock.defaultProps = DEFAULT_PROPS;
|
|
123
123
|
|
|
124
124
|
export { UserBlock as U };
|
|
125
|
-
//# sourceMappingURL=
|
|
125
|
+
//# sourceMappingURL=UserBlock.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"UserBlock.js","sources":["../../../src/components/user-block/UserBlock.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from 'react';\nimport isEmpty from 'lodash/isEmpty';\nimport classNames from 'classnames';\n\nimport { Avatar, ColorPalette, Link, Orientation, Size, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\nimport { AvatarProps } from '../avatar/Avatar';\n\n/**\n * User block sizes.\n */\nexport type UserBlockSize = Extract<Size, 's' | 'm' | 'l'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface UserBlockProps extends GenericProps {\n /** Props to pass to the avatar. */\n avatarProps?: AvatarProps;\n /** Additional fields used to describe the user. */\n fields?: string[];\n /** Props to pass to the link wrapping the avatar thumbnail. */\n linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n /** Custom react component for the link (can be used to inject react router Link). */\n linkAs?: 'a' | any;\n /** Multiple action toolbar content. */\n multipleActions?: ReactNode;\n /** User name. */\n name?: string;\n /** Props to pass to the name block. */\n nameProps?: GenericProps;\n /** Orientation. */\n orientation?: Orientation;\n /** Simple action toolbar content. */\n simpleAction?: ReactNode;\n /** Size variant. */\n size?: UserBlockSize;\n /** Theme adapting the component to light or dark background. */\n theme?: Theme;\n /** On click callback. */\n onClick?(): void;\n /** On mouse enter callback. */\n onMouseEnter?(): void;\n /** On mouse leave callback. */\n onMouseLeave?(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'UserBlock';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<UserBlockProps> = {\n orientation: Orientation.horizontal,\n size: Size.m,\n theme: Theme.light,\n};\n\n/**\n * UserBlock component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n avatarProps,\n className,\n fields,\n linkProps,\n linkAs,\n multipleActions,\n name,\n nameProps,\n onClick,\n onMouseEnter,\n onMouseLeave,\n orientation,\n simpleAction,\n size,\n theme,\n ...forwardedProps\n } = props;\n let componentSize = size;\n\n // Special case - When using vertical orientation force the size to be Sizes.l.\n if (orientation === Orientation.vertical) {\n componentSize = Size.l;\n }\n\n const shouldDisplayActions: boolean = orientation === Orientation.vertical;\n\n const isLink = Boolean(linkProps?.href || linkAs);\n const isClickable = !!onClick || isLink;\n\n const nameBlock: ReactNode = React.useMemo(() => {\n if (isEmpty(name)) {\n return null;\n }\n let NameComponent: any = 'span';\n const nProps: any = {\n ...nameProps,\n className: classNames(`${CLASSNAME}__name`, linkProps?.className, nameProps?.className),\n };\n if (isClickable) {\n NameComponent = Link;\n Object.assign(nProps, {\n ...linkProps,\n onClick,\n linkAs,\n color: ColorPalette.dark,\n });\n }\n return <NameComponent {...nProps}>{name}</NameComponent>;\n }, [isClickable, linkAs, linkProps, name, nameProps, onClick]);\n\n const fieldsBlock: ReactNode = fields && componentSize !== Size.s && (\n <div className={`${CLASSNAME}__fields`}>\n {fields.map((field: string, idx: number) => (\n <span key={idx} className={`${CLASSNAME}__field`}>\n {field}\n </span>\n ))}\n </div>\n );\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({ prefix: CLASSNAME, orientation, size: componentSize, theme, isClickable }),\n )}\n onMouseLeave={onMouseLeave}\n onMouseEnter={onMouseEnter}\n >\n {avatarProps && (\n <Avatar\n linkAs={linkAs}\n linkProps={linkProps}\n {...avatarProps}\n className={classNames(`${CLASSNAME}__avatar`, avatarProps.className)}\n size={componentSize}\n onClick={onClick}\n theme={theme}\n />\n )}\n {(fields || name) && (\n <div className={`${CLASSNAME}__wrapper`}>\n {nameBlock}\n {fieldsBlock}\n </div>\n )}\n {shouldDisplayActions && simpleAction && <div className={`${CLASSNAME}__action`}>{simpleAction}</div>}\n {shouldDisplayActions && multipleActions && (\n <div className={`${CLASSNAME}__actions`}>{multipleActions}</div>\n )}\n </div>\n );\n});\nUserBlock.displayName = COMPONENT_NAME;\nUserBlock.className = CLASSNAME;\nUserBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","orientation","Orientation","horizontal","size","Size","m","theme","Theme","light","UserBlock","forwardRef","props","ref","avatarProps","className","fields","linkProps","linkAs","multipleActions","name","nameProps","onClick","onMouseEnter","onMouseLeave","simpleAction","forwardedProps","componentSize","vertical","l","shouldDisplayActions","isLink","Boolean","href","isClickable","nameBlock","React","useMemo","isEmpty","NameComponent","nProps","classNames","Link","Object","assign","color","ColorPalette","dark","fieldsBlock","s","map","field","idx","handleBasicClasses","prefix","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -164,4 +164,4 @@ function _nonIterableRest() {
|
|
|
164
164
|
}
|
|
165
165
|
|
|
166
166
|
export { _objectSpread2 as _, _defineProperty as a, _objectWithoutProperties as b, _extends as c, _slicedToArray as d, _toConsumableArray as e };
|
|
167
|
-
//# sourceMappingURL=
|
|
167
|
+
//# sourceMappingURL=_rollupPluginBabelHelpers.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"_rollupPluginBabelHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|