@geneui/components 3.0.0-next-9ffcb93-16102024 → 3.0.0-next-48d0ef7-31102024
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/Avatar.js +63 -0
- package/CHANGELOG.md +7 -0
- package/Divider.js +23 -0
- package/{GeneUIProvider/index.js → GeneUIProvider.js} +52 -65
- package/HelperText.js +69 -0
- package/Info.js +64 -0
- package/Label.js +38 -0
- package/Loader.js +21 -0
- package/Pill.js +64 -0
- package/TextLink.js +20 -0
- package/{index-65217440.js → Tooltip.js} +104 -80
- package/{lib → components}/atoms/Avatar/Avatar.d.ts +7 -6
- package/components/atoms/Avatar/index.d.ts +1 -0
- package/{lib → components}/atoms/Divider/Divider.d.ts +5 -5
- package/components/atoms/Divider/index.d.ts +1 -0
- package/{lib → components}/atoms/HelperText/HelperText.d.ts +6 -5
- package/components/atoms/HelperText/index.d.ts +1 -0
- package/{lib → components}/atoms/Info/Info.d.ts +5 -5
- package/components/atoms/Info/index.d.ts +1 -0
- package/{lib → components}/atoms/Label/Label.d.ts +3 -3
- package/components/atoms/Label/index.d.ts +1 -0
- package/{lib → components}/atoms/Loader/Loader.d.ts +5 -5
- package/components/atoms/Loader/index.d.ts +1 -0
- package/{lib → components}/atoms/Pill/Pill.d.ts +7 -6
- package/components/atoms/Pill/index.d.ts +1 -0
- package/{lib → components}/atoms/TextLink/TextLink.d.ts +5 -5
- package/components/atoms/TextLink/index.d.ts +1 -0
- package/{lib → components}/molecules/Tooltip/Tooltip.d.ts +26 -21
- package/components/molecules/Tooltip/index.d.ts +1 -0
- package/components/providers/GeneUIProvider/GeneUIProvider.d.ts +30 -0
- package/components/providers/GeneUIProvider/index.d.ts +1 -0
- package/hooks/index.d.ts +2 -20
- package/hooks/useDebounceCallback/index.d.ts +1 -0
- package/hooks/useDebounceCallback/useDebounceCallback.d.ts +2 -0
- package/hooks/useEllipsisDetection/index.d.ts +1 -1
- package/hooks/useEllipsisDetection/useEllipsisDetection.d.ts +2 -2
- package/{index-031ff73c.js → index-ce02421b.js} +4 -4
- package/index.d.ts +11 -121
- package/index.js +12 -159
- package/package.json +24 -43
- package/tokens-0abb4e1b.js +6 -0
- package/types/index.d.ts +0 -3
- package/useEllipsisDetection-46d712b6.js +34 -0
- package/ActionableList/index.js +0 -1694
- package/AdvancedSearch/index.js +0 -892
- package/Alert/index.js +0 -98
- package/Avatar/index.js +0 -58
- package/Badge/index.js +0 -29
- package/Breadcrumb/index.js +0 -130
- package/BusyLoader/index.js +0 -31
- package/Button/index.js +0 -30
- package/Card/index.js +0 -502
- package/CardList/index.js +0 -662
- package/CellMeasurerCache-80be385d.js +0 -229
- package/Charts/index.js +0 -17662
- package/Checkbox/index.js +0 -229
- package/CheckboxGroup/index.js +0 -203
- package/CheckboxGroupWithSearch/index.js +0 -280
- package/Collapse/index.js +0 -195
- package/ColorPicker/index.js +0 -210
- package/ComboBox/index.js +0 -524
- package/Copy/index.js +0 -56
- package/Counter/index.js +0 -312
- package/DateFilter/index.js +0 -183
- package/DatePicker/index.js +0 -1229
- package/DatePickerInput/index.js +0 -883
- package/Divider/index.js +0 -23
- package/Drawer/index.js +0 -261
- package/Dropdown/index.js +0 -43
- package/Editor/index.js +0 -22975
- package/Empty/index.js +0 -76
- package/ExtendedInput/index.js +0 -590
- package/Form/index.js +0 -85
- package/FormContainer/index.js +0 -189
- package/FormableCheckbox/index.js +0 -24
- package/FormableDatePicker/index.js +0 -43
- package/FormableDropdown/index.js +0 -50
- package/FormableEditor/index.js +0 -26
- package/FormableHOC-85f89a81.js +0 -83
- package/FormableMultiSelectDropdown/index.js +0 -50
- package/FormableNumberInput/index.js +0 -34
- package/FormableRadio/index.js +0 -22
- package/FormableSwitcher/index.js +0 -22
- package/FormableTextInput/index.js +0 -34
- package/FormableUploader/index.js +0 -44
- package/Grid/index.js +0 -167
- package/HelperText/index.js +0 -86
- package/Holder/index.js +0 -261
- package/Icon/index.js +0 -62
- package/Image/index.js +0 -45
- package/ImagePreview/index.js +0 -217
- package/Info/index.js +0 -41
- package/InfoOutline-dd2e89d9.js +0 -29
- package/InteractiveWidget/index.js +0 -78
- package/KeyValue/index.js +0 -22
- package/Label/index.js +0 -48
- package/LinkButton/index.js +0 -34
- package/Loader/index.js +0 -23
- package/Menu/index.js +0 -281
- package/MobileNavigation/index.js +0 -94
- package/MobilePopup/index.js +0 -182
- package/Modal/index.js +0 -251
- package/ModuleTitle/index.js +0 -141
- package/NavigationMenu/index.js +0 -222
- package/Notification/index.js +0 -120
- package/Option/index.js +0 -184
- package/Overlay/index.js +0 -187
- package/Overspread/index.js +0 -291
- package/Pagination/index.js +0 -261
- package/Paper/index.js +0 -96
- package/Pill/index.js +0 -67
- package/Popover/index.js +0 -725
- package/PopoverV2/index.js +0 -19
- package/Portal/index.js +0 -58
- package/Products/index.js +0 -115
- package/Profile/index.js +0 -589
- package/Progress/index.js +0 -200
- package/QRCode/index.js +0 -814
- package/Radio/index.js +0 -151
- package/RadioGroup/index.js +0 -104
- package/Range/index.js +0 -191
- package/Rating/index.js +0 -174
- package/RichEditor/index.js +0 -13
- package/RichEditor-78c2617e.js +0 -228
- package/Scrollbar/index.js +0 -1585
- package/Search/index.js +0 -75
- package/SearchWithDropdown/index.js +0 -140
- package/Section/index.js +0 -61
- package/SkeletonLoader/index.js +0 -81
- package/Slider/index.js +0 -261
- package/Status/index.js +0 -97
- package/Steps/index.js +0 -314
- package/SuggestionList/index.js +0 -385
- package/Switcher/index.js +0 -193
- package/Table/index.js +0 -57
- package/TableCompositions/index.js +0 -16995
- package/Tabs/index.js +0 -235
- package/Tag/index.js +0 -102
- package/TextLink/index.js +0 -20
- package/Textarea/index.js +0 -242
- package/Time/index.js +0 -62
- package/TimePicker/index.js +0 -575
- package/Timeline/index.js +0 -113
- package/Title/index.js +0 -65
- package/Toaster/index.js +0 -116
- package/Tooltip/index.js +0 -6
- package/TransferList/index.js +0 -493
- package/Uploader/index.js +0 -992
- package/ValidatableCheckbox/index.js +0 -123
- package/ValidatableDatePicker/index.js +0 -316
- package/ValidatableDropdown/index.js +0 -141
- package/ValidatableElements/index.js +0 -67
- package/ValidatableMultiSelectDropdown/index.js +0 -152
- package/ValidatableNumberInput/index.js +0 -204
- package/ValidatableRadio/index.js +0 -116
- package/ValidatableSwitcher/index.js +0 -93
- package/ValidatableTextInput/index.js +0 -167
- package/ValidatableTimeInput/index.js +0 -174
- package/ValidatableUploader/index.js +0 -98
- package/Widget/index.js +0 -225
- package/_commonjsHelpers-24198af3.js +0 -35
- package/_rollupPluginBabelHelpers-a83240e1.js +0 -11
- package/callAfterDelay-7272faca.js +0 -12
- package/checkTimeValidation-e56771be.js +0 -16
- package/checkboxRadioSwitcher-5b69d7bd.js +0 -4
- package/clsx.m-2bb6df4b.js +0 -3
- package/config-1053d64d.js +0 -20
- package/configs-00612ce0.js +0 -103
- package/configs.js +0 -111
- package/dateValidation-67caec66.js +0 -225
- package/debounce-4419bc2f.js +0 -17
- package/guid-8ddf77b3.js +0 -16
- package/hooks/useBodyScroll.js +0 -16
- package/hooks/useClick.js +0 -18
- package/hooks/useClickOutside.js +0 -25
- package/hooks/useDebounce.js +0 -28
- package/hooks/useDeviceType.js +0 -17
- package/hooks/useDidMount.js +0 -15
- package/hooks/useForceUpdate.js +0 -8
- package/hooks/useHover.js +0 -20
- package/hooks/useImgDownload.js +0 -18
- package/hooks/useKeyDown.js +0 -21
- package/hooks/useMount.js +0 -13
- package/hooks/useMutationObserver.js +0 -21
- package/hooks/usePrevious.js +0 -10
- package/hooks/useThrottle.js +0 -16
- package/hooks/useToggle.js +0 -11
- package/hooks/useUpdatableRef.js +0 -14
- package/hooks/useUpdate.js +0 -10
- package/hooks/useWidth.js +0 -16
- package/hooks/useWindowSize.js +0 -40
- package/index-122432cd.js +0 -270
- package/index-262edd7a.js +0 -77
- package/index-2f5aa51e.js +0 -6483
- package/index-370f9acd.js +0 -4
- package/index-45eafea6.js +0 -90
- package/index-480fd7d9.js +0 -10032
- package/index-5f37f281.js +0 -168
- package/index-73aaa093.js +0 -1940
- package/index.mobile.d.ts +0 -14
- package/lib/atoms/Avatar/index.d.ts +0 -1
- package/lib/atoms/Badge/Badge.d.ts +0 -36
- package/lib/atoms/Badge/index.d.ts +0 -1
- package/lib/atoms/BusyLoader/BusyLoader.d.ts +0 -32
- package/lib/atoms/BusyLoader/BusyLoaderHolderHOC.d.ts +0 -8
- package/lib/atoms/BusyLoader/index.d.ts +0 -1
- package/lib/atoms/Button/Button.d.ts +0 -70
- package/lib/atoms/Button/index.d.ts +0 -1
- package/lib/atoms/Divider/index.d.ts +0 -1
- package/lib/atoms/Empty/Empty.d.ts +0 -39
- package/lib/atoms/Empty/index.d.ts +0 -1
- package/lib/atoms/Empty/utils.d.ts +0 -9
- package/lib/atoms/HelperText/index.d.ts +0 -1
- package/lib/atoms/Image/Image.d.ts +0 -51
- package/lib/atoms/Image/index.d.ts +0 -1
- package/lib/atoms/ImagePreview/ImagePreview.d.ts +0 -56
- package/lib/atoms/ImagePreview/ImagePreviewHOC.d.ts +0 -4
- package/lib/atoms/ImagePreview/Magnifier.d.ts +0 -40
- package/lib/atoms/ImagePreview/index.d.ts +0 -1
- package/lib/atoms/Info/index.d.ts +0 -1
- package/lib/atoms/KeyValue/KeyValue.d.ts +0 -29
- package/lib/atoms/KeyValue/index.d.ts +0 -1
- package/lib/atoms/Label/index.d.ts +0 -1
- package/lib/atoms/LinkButton/LinkButton.d.ts +0 -46
- package/lib/atoms/LinkButton/index.d.ts +0 -1
- package/lib/atoms/Loader/index.d.ts +0 -1
- package/lib/atoms/Pill/index.d.ts +0 -1
- package/lib/atoms/Rating/DefaultSvg.d.ts +0 -3
- package/lib/atoms/Rating/Rating.d.ts +0 -49
- package/lib/atoms/Rating/index.d.ts +0 -1
- package/lib/atoms/TextLink/index.d.ts +0 -1
- package/lib/molecules/Copy/Copy.d.ts +0 -38
- package/lib/molecules/Copy/index.d.ts +0 -1
- package/lib/molecules/InteractiveWidget/InteractiveWidget.d.ts +0 -70
- package/lib/molecules/InteractiveWidget/InteractiveWidgetIcon.d.ts +0 -8
- package/lib/molecules/InteractiveWidget/index.d.ts +0 -1
- package/lib/molecules/Tooltip/index.d.ts +0 -1
- package/lib/providers/GeneUIProvider/GeneUIProvider.d.ts +0 -30
- package/lib/providers/GeneUIProvider/index.d.ts +0 -1
- package/localization-4ba17032.js +0 -46
- package/objectWithoutPropertiesLoose-e1596bdb.js +0 -62
- package/rangeAndSlider-693a3d41.js +0 -8684
- package/react-beautiful-dnd.esm-b637016a.js +0 -10116
- package/react-lifecycles-compat.es-6e1f3768.js +0 -158
- package/redux-e591c1b8.js +0 -536
- package/tokens-8ab1179c.js +0 -6
- package/tslib.es6-f211516f.js +0 -35
- package/useEllipsisDetection-c1c9ad94.js +0 -38
package/Tabs/index.js
DELETED
|
@@ -1,235 +0,0 @@
|
|
|
1
|
-
import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
|
|
2
|
-
import React__default, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
|
|
3
|
-
import PropTypes from 'prop-types';
|
|
4
|
-
import { c as classnames } from '../index-031ff73c.js';
|
|
5
|
-
import Icon from '../Icon/index.js';
|
|
6
|
-
import { c as childrenOf } from '../index-5f37f281.js';
|
|
7
|
-
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
|
|
8
|
-
import '../dateValidation-67caec66.js';
|
|
9
|
-
import '../_commonjsHelpers-24198af3.js';
|
|
10
|
-
import 'react-dom';
|
|
11
|
-
|
|
12
|
-
function Tab(props) {
|
|
13
|
-
const {
|
|
14
|
-
title,
|
|
15
|
-
icon,
|
|
16
|
-
active,
|
|
17
|
-
onClose,
|
|
18
|
-
disabled,
|
|
19
|
-
activeKey,
|
|
20
|
-
closeTitleText,
|
|
21
|
-
defaultActiveKey,
|
|
22
|
-
...restProps
|
|
23
|
-
} = props;
|
|
24
|
-
const ref = useRef(null);
|
|
25
|
-
const isCloseable = props.hasOwnProperty('onClose') && typeof onClose === 'function';
|
|
26
|
-
useEffect(() => {
|
|
27
|
-
if (active && activeKey && defaultActiveKey !== activeKey && (defaultActiveKey || defaultActiveKey === 0)) {
|
|
28
|
-
ref.current.scrollIntoView({
|
|
29
|
-
behavior: 'smooth',
|
|
30
|
-
inline: 'nearest',
|
|
31
|
-
block: 'start'
|
|
32
|
-
});
|
|
33
|
-
}
|
|
34
|
-
}, [active, activeKey, defaultActiveKey]);
|
|
35
|
-
return /*#__PURE__*/React__default.createElement("li", _extends({
|
|
36
|
-
ref: ref,
|
|
37
|
-
className: classnames({
|
|
38
|
-
active,
|
|
39
|
-
disabled
|
|
40
|
-
})
|
|
41
|
-
}, restProps), icon && /*#__PURE__*/React__default.createElement(Icon, {
|
|
42
|
-
type: icon,
|
|
43
|
-
className: "tab-icon"
|
|
44
|
-
}), /*#__PURE__*/React__default.createElement("div", {
|
|
45
|
-
className: "ellipsis-text"
|
|
46
|
-
}, title), isCloseable && /*#__PURE__*/React__default.createElement("button", {
|
|
47
|
-
onClick: e => {
|
|
48
|
-
e.stopPropagation();
|
|
49
|
-
onClose();
|
|
50
|
-
},
|
|
51
|
-
className: "tab-close-button",
|
|
52
|
-
title: closeTitleText
|
|
53
|
-
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
54
|
-
type: "bc-icon-close"
|
|
55
|
-
})));
|
|
56
|
-
}
|
|
57
|
-
Tab.propTypes = {
|
|
58
|
-
/**
|
|
59
|
-
* Title for 'Tab'.
|
|
60
|
-
*/
|
|
61
|
-
title: PropTypes.node,
|
|
62
|
-
/**
|
|
63
|
-
* Active/Passive state of 'Tab'
|
|
64
|
-
*/
|
|
65
|
-
active: PropTypes.bool,
|
|
66
|
-
/**
|
|
67
|
-
* Disabled state of 'Tab'
|
|
68
|
-
*/
|
|
69
|
-
disabled: PropTypes.bool,
|
|
70
|
-
/**
|
|
71
|
-
* Icon of 'Tab'
|
|
72
|
-
*/
|
|
73
|
-
icon: PropTypes.string,
|
|
74
|
-
/**
|
|
75
|
-
* Content padding for specific 'Tab'
|
|
76
|
-
*/
|
|
77
|
-
contentPadding: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
78
|
-
/**
|
|
79
|
-
* Prop for specifying which tab is active
|
|
80
|
-
*/
|
|
81
|
-
activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
82
|
-
/**
|
|
83
|
-
* Prop for default active tab
|
|
84
|
-
*/
|
|
85
|
-
defaultActiveKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
86
|
-
/**
|
|
87
|
-
* Shows close button and triggers function onClick
|
|
88
|
-
*/
|
|
89
|
-
onClose: PropTypes.func,
|
|
90
|
-
/**
|
|
91
|
-
* Shows title hovering the close button
|
|
92
|
-
*/
|
|
93
|
-
closeTitleText: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
|
|
94
|
-
};
|
|
95
|
-
Tab.defaultProps = {
|
|
96
|
-
disabled: false
|
|
97
|
-
};
|
|
98
|
-
|
|
99
|
-
var css_248z = "[data-gene-ui-version=\"2.16.3\"] .tabs-holder{align-items:flex-start;display:flex;width:100%}[data-gene-ui-version=\"2.16.3\"] .tabs-holder.reversed{flex-direction:row-reverse}[data-gene-ui-version=\"2.16.3\"] .tabs-holder.horizontal{flex-direction:column}[data-gene-ui-version=\"2.16.3\"] .tabs-head{display:flex;flex-shrink:0;-webkit-user-select:none;user-select:none}[data-gene-ui-version=\"2.16.3\"] .tabs-holder.horizontal>.tabs-head{width:100%}[data-gene-ui-version=\"2.16.3\"] .tabs-head>.tabs-wrapper{flex:auto}[data-gene-ui-version=\"2.16.3\"] .tabs-head>.tabs-actions{align-items:center;box-shadow:inset 0 -1px 0 0 rgba(var(--background-sc-rgb),.06);color:var(--hero);display:flex;flex-shrink:0}[data-gene-ui-version=\"2.16.3\"] .tabs-head>.tabs-actions>*{margin-inline-end:2rem}[data-gene-ui-version=\"2.16.3\"] .tabs-holder.horizontal>.tabs-head>.tabs-wrapper{overflow-x:auto;width:100%}[data-gene-ui-version=\"2.16.3\"] .tabs-holder.horizontal>.tabs-head>.tabs-wrapper::-webkit-scrollbar{display:none;height:0;width:0}[data-gene-ui-version=\"2.16.3\"] .tabs-holder.horizontal>.tabs-head>.tabs-wrapper>.tabs-content.equal-tabs,[data-gene-ui-version=\"2.16.3\"] .tabs-holder.horizontal>.tabs-head>.tabs-wrapper>.tabs-content.type-basic{min-width:100%}[data-gene-ui-version=\"2.16.3\"] .tabs-content{display:inline-flex;font-weight:600;line-height:4.2rem;text-align:center;vertical-align:top}[data-gene-ui-version=\"2.16.3\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content{flex-direction:column;text-align:start}[data-gene-ui-version=\"2.16.3\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content .tab-icon{display:none}[data-gene-ui-version=\"2.16.3\"] .tabs-content>li{align-items:center;cursor:pointer;display:flex;justify-content:center;padding:0 2rem;position:relative;transition:color .3s,box-shadow .3s,border-color .3s,background-color,.3s}[data-gene-ui-version=\"2.16.3\"] .tabs-content>li .tab-icon{flex-shrink:0;margin-inline-end:1.4rem;margin-inline-start:-.4rem}[data-gene-ui-version=\"2.16.3\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content>li{justify-content:flex-start;padding:0 3rem 0 2rem}html[dir=rtl] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content>li{padding:0 2rem 0 3rem}[data-gene-ui-version=\"2.16.3\"] .tabs-holder.vertical:not(.reversed)>.tabs-head>.tabs-wrapper>.type-basic.tabs-content>li{justify-content:flex-end}[data-gene-ui-version=\"2.16.3\"] .tabs-holder.reversed>.tabs-head>.tabs-wrapper>.tabs-content>li{padding:0 2rem 0 3rem}html[dir=rtl] .tabs-holder.reversed>.tabs-head>.tabs-wrapper>.tabs-content>li{padding:0 3rem 0 2rem}[data-gene-ui-version=\"2.16.3\"] .tabs-content>li.disabled{opacity:.5}[data-gene-ui-version=\"2.16.3\"] .tabs-content>li.active,[data-gene-ui-version=\"2.16.3\"] .tabs-content>li.disabled{pointer-events:none}[data-gene-ui-version=\"2.16.3\"] .tabs-content>li .tab-close-button{align-items:center;background:rgba(var(--background-sc-rgb),.07);border-radius:100%;color:var(--background-sc);cursor:pointer;display:flex;height:1.6rem;justify-content:center;margin-inline-end:-1.6rem;margin-inline-start:.8rem;pointer-events:auto;transition:color .3s,background-color .3s;width:1.6rem}[data-gene-ui-version=\"2.16.3\"] .tabs-content>li .tab-close-button .icon{font-size:1.2rem}@media (hover:hover){[data-gene-ui-version=\"2.16.3\"] .tabs-content>li .tab-close-button:hover{background:var(--hero);color:var(--hero-sc)}}[data-gene-ui-version=\"2.16.3\"] .tabs-content.active .tab-close-button{background:rgba(var(--hero-rgb),.1);color:var(--hero)}@media (hover:hover){[data-gene-ui-version=\"2.16.3\"] .tabs-content.active .tab-close-button:hover{background:var(--hero);color:var(--hero-sc)}}[data-gene-ui-version=\"2.16.3\"] .tabs-content.equal-tabs>li{flex:1;min-width:12rem}[data-gene-ui-version=\"2.16.3\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.equal-tabs>li{width:13rem}[data-gene-ui-version=\"2.16.3\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.equal-tabs.type-text>li{width:12rem}[data-gene-ui-version=\"2.16.3\"] .tabs-content.type-basic{box-shadow:inset 0 -1px 0 0 rgba(var(--background-sc-rgb),.06);line-height:4.6rem;padding:0 2rem}[data-gene-ui-version=\"2.16.3\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-basic{box-shadow:inset -1px 0 0 rgba(var(--background-sc-rgb),.06);padding:2rem 0;text-align:end}html[dir=rtl] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-basic{box-shadow:inset 1px 0 0 rgba(var(--background-sc-rgb),.06)}[data-gene-ui-version=\"2.16.3\"] .tabs-holder.reversed>.tabs-head>.tabs-wrapper>.tabs-content.type-basic{box-shadow:inset 1px 0 0 rgba(var(--background-sc-rgb),.06);text-align:start}html[dir=rtl] .tabs-holder.reversed>.tabs-head>.tabs-wrapper>.tabs-content.type-basic{box-shadow:inset -1px 0 0 rgba(var(--background-sc-rgb),.06)}[data-gene-ui-version=\"2.16.3\"] .tabs-content.type-basic>li{box-shadow:inset 0 0 0 var(--hero);flex:inherit}[data-gene-ui-version=\"2.16.3\"] .tabs-content.type-basic>li.active{box-shadow:inset 0 -.4rem 0 0 var(--hero)}[data-gene-ui-version=\"2.16.3\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-basic>li.active{box-shadow:inset -.3rem 0 0 var(--hero)}[data-gene-ui-version=\"2.16.3\"] .tabs-holder.reversed>.tabs-head>.tabs-wrapper>.tabs-content.type-basic>li.active,html[dir=rtl] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-basic>li.active{box-shadow:inset .3rem 0 0 var(--hero)}html[dir=rtl] .tabs-holder.reversed>.tabs-head>.tabs-wrapper>.tabs-content.type-basic>li.active{box-shadow:inset -.3rem 0 0 var(--hero)}[data-gene-ui-version=\"2.16.3\"] .tabs-content.type-box>li{border:1px solid #0000;border-radius:1rem 1rem 0 0;line-height:4.1rem}[data-gene-ui-version=\"2.16.3\"] .tabs-holder:not(.vertical)>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li+*{margin:0 0 0 .2rem}html[dir=rtl] .tabs-holder:not(.vertical)>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li+*{margin:0 .2rem 0 0}[data-gene-ui-version=\"2.16.3\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li{border-radius:1rem 0 0 1rem}html[dir=rtl] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li{border-radius:0 1rem 1rem 0}[data-gene-ui-version=\"2.16.3\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li+*{margin:.2rem 0 0}[data-gene-ui-version=\"2.16.3\"] .tabs-holder.vertical.reversed>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li{border-radius:0 1rem 1rem 0}html[dir=rtl] .tabs-holder.vertical.reversed>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li{border-radius:1rem 0 0 1rem}@media (hover:hover){[data-gene-ui-version=\"2.16.3\"] .tabs-content.type-box>li:hover{border-color:rgba(var(--background-sc-rgb),.1)}}[data-gene-ui-version=\"2.16.3\"] .tabs-content.type-box>li.active{border-color:rgba(var(--background-sc-rgb),.1)}@media (hover:hover){html:not([dir=rtl]) .tabs-holder.vertical:not(.reversed)>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li:hover{border-right-color:#0000}html:not([dir=rtl]) .tabs-holder.vertical.reversed>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li:hover,html[dir=rtl] .tabs-holder.vertical:not(.reversed)>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li:hover{border-left-color:#0000}html[dir=rtl] .tabs-holder.vertical.reversed>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li:hover{border-right-color:#0000}}[data-gene-ui-version=\"2.16.3\"] .tabs-holder:not(.vertical)>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li.active{border-bottom-color:var(--background)}html:not([dir=rtl]) .tabs-holder.vertical:not(.reversed)>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li.active{border-right-color:var(--background)}html:not([dir=rtl]) .tabs-holder.reversed.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li.active,html[dir=rtl] .tabs-holder.vertical:not(.reversed)>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li.active{border-left-color:var(--background)}html[dir=rtl] .tabs-holder.reversed.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li.active{border-right-color:var(--background)}[data-gene-ui-version=\"2.16.3\"] .tabs-content.type-button{box-shadow:inset 0 0 0 1px rgba(var(--background-sc-rgb),.1)}[data-gene-ui-version=\"2.16.3\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-button:not(.equal-tabs)>li{padding:0 2rem}[data-gene-ui-version=\"2.16.3\"] .tabs-content.type-button>li{box-shadow:inset 0 0 0 0 var(--hero)}[data-gene-ui-version=\"2.16.3\"] .tabs-content.type-button>li.active{box-shadow:inset 0 0 0 1px var(--hero)}[data-gene-ui-version=\"2.16.3\"] .tabs-content.type-text.equal-tabs>li{min-width:10rem}[data-gene-ui-version=\"2.16.3\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-text.equal-tabs>li{min-width:12rem}[data-gene-ui-version=\"2.16.3\"] .tabs-content.type-text>li{line-height:2.8rem;padding:0 1.5rem}[data-gene-ui-version=\"2.16.3\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-text>li{padding:0 2rem}[data-gene-ui-version=\"2.16.3\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-text>li+*{margin:1rem 0 0}[data-gene-ui-version=\"2.16.3\"] .tabs-content.type-text>li.active{background:var(--hero);color:var(--hero-sc)}[data-gene-ui-version=\"2.16.3\"] .tabs-content.type-box>li.active,[data-gene-ui-version=\"2.16.3\"] .tabs-content.type-button>li.active{color:var(--hero)}[data-gene-ui-version=\"2.16.3\"] .tabs-content.type-button,[data-gene-ui-version=\"2.16.3\"] .tabs-content.type-button>li,[data-gene-ui-version=\"2.16.3\"] .tabs-content.type-text,[data-gene-ui-version=\"2.16.3\"] .tabs-content.type-text>li{border-radius:2rem}@media (hover:hover){[data-gene-ui-version=\"2.16.3\"] .tabs-content.type-button>li:not(.active):hover,[data-gene-ui-version=\"2.16.3\"] .tabs-content.type-text>li:not(.active):hover{color:var(--hero)}}[data-gene-ui-version=\"2.16.3\"] .tabs-content-holder{width:100%}[data-gene-ui-version=\"2.16.3\"] .tabs-holder.vertical>.tabs-content-holder{flex:auto}[data-gene-ui-version=\"2.16.3\"] .tabs-content-holder.c-type-box{align-self:stretch;border:1px solid rgba(var(--background-sc-rgb),.1);border-radius:0 0 1rem 1rem;margin:-1px 0 0}[data-gene-ui-version=\"2.16.3\"] .tabs-holder.vertical>.tabs-content-holder.c-type-box{border-radius:1rem}[data-gene-ui-version=\"2.16.3\"] .tabs-holder.vertical:not(.reversed)>.tabs-content-holder.c-type-box{border-radius:0 1rem 1rem 0;margin:0 0 0 -1px}[data-gene-ui-version=\"2.16.3\"] .tabs-holder.vertical.reversed>.tabs-content-holder.c-type-box,html[dir=rtl] .tabs-holder.vertical:not(.reversed)>.tabs-content-holder.c-type-box{border-radius:1rem 0 0 1rem;margin:0 -1px 0 0}html[dir=rtl] .tabs-holder.vertical.reversed>.tabs-content-holder.c-type-box{border-radius:0 1rem 1rem 0;margin:0 0 0 -1px}[data-gene-ui-version=\"2.16.3\"] .external-link{align-items:center;display:flex;font-weight:600}[data-gene-ui-version=\"2.16.3\"] .external-link>*+*{margin-inline-start:.2rem}";
|
|
100
|
-
styleInject(css_248z);
|
|
101
|
-
|
|
102
|
-
function Tabs(props) {
|
|
103
|
-
const {
|
|
104
|
-
type,
|
|
105
|
-
actions,
|
|
106
|
-
position,
|
|
107
|
-
children,
|
|
108
|
-
fixedSize,
|
|
109
|
-
onChange,
|
|
110
|
-
className,
|
|
111
|
-
defaultActiveKey,
|
|
112
|
-
contentClassName,
|
|
113
|
-
contentPadding
|
|
114
|
-
} = props;
|
|
115
|
-
const holderRef = useRef(null);
|
|
116
|
-
const isControlled = ('activeKey' in props);
|
|
117
|
-
const [active, setActive] = useState(() => defaultActiveKey || getDefaultActiveKey(children));
|
|
118
|
-
const activeKey = isControlled ? props.activeKey : active;
|
|
119
|
-
const handleClick = useCallback(key => {
|
|
120
|
-
!isControlled && setActive(key);
|
|
121
|
-
onChange && onChange(key);
|
|
122
|
-
(holderRef === null || holderRef === void 0 ? void 0 : holderRef.current) && holderRef.current.scrollTo(0, 0);
|
|
123
|
-
}, [onChange, isControlled, holderRef.current]);
|
|
124
|
-
const {
|
|
125
|
-
tabs,
|
|
126
|
-
content,
|
|
127
|
-
tabContentPadding
|
|
128
|
-
} = useMemo(() => getTabsAndContent(children, activeKey, defaultActiveKey, handleClick), [children, activeKey, handleClick]);
|
|
129
|
-
return /*#__PURE__*/React__default.createElement("div", {
|
|
130
|
-
className: classnames('tabs-holder', className, {
|
|
131
|
-
vertical: position !== 'top',
|
|
132
|
-
reversed: position === 'right',
|
|
133
|
-
horizontal: position === 'top'
|
|
134
|
-
})
|
|
135
|
-
}, /*#__PURE__*/React__default.createElement("div", {
|
|
136
|
-
className: "tabs-head"
|
|
137
|
-
}, /*#__PURE__*/React__default.createElement("div", {
|
|
138
|
-
className: "tabs-wrapper"
|
|
139
|
-
}, /*#__PURE__*/React__default.createElement("ul", {
|
|
140
|
-
className: classnames('tabs-content', "type-".concat(type), {
|
|
141
|
-
'equal-tabs': fixedSize
|
|
142
|
-
})
|
|
143
|
-
}, tabs)), actions && position === 'top' && /*#__PURE__*/React__default.createElement("div", {
|
|
144
|
-
className: "tabs-actions"
|
|
145
|
-
}, actions)), /*#__PURE__*/React__default.createElement("div", {
|
|
146
|
-
ref: holderRef,
|
|
147
|
-
className: classnames('tabs-content-holder', contentClassName, {
|
|
148
|
-
'c-type-box': type === 'box'
|
|
149
|
-
}),
|
|
150
|
-
style: {
|
|
151
|
-
padding: "".concat((tabContentPadding || contentPadding) / 10, "rem")
|
|
152
|
-
}
|
|
153
|
-
}, content));
|
|
154
|
-
}
|
|
155
|
-
Tabs.propTypes = {
|
|
156
|
-
/**
|
|
157
|
-
* Any valid react node, will be shown at right side of tab menu bar.
|
|
158
|
-
*/
|
|
159
|
-
actions: PropTypes.node,
|
|
160
|
-
/**
|
|
161
|
-
* Prop for specifying which tab is active
|
|
162
|
-
*/
|
|
163
|
-
activeKey: PropTypes.string,
|
|
164
|
-
/**
|
|
165
|
-
* Prop for default active tab
|
|
166
|
-
*/
|
|
167
|
-
defaultActiveKey: PropTypes.string,
|
|
168
|
-
/**
|
|
169
|
-
* Style of tab menu bar
|
|
170
|
-
*/
|
|
171
|
-
type: PropTypes.oneOf(['basic', 'box', 'button', 'text']),
|
|
172
|
-
/**
|
|
173
|
-
* Position of tab menu bar
|
|
174
|
-
*/
|
|
175
|
-
position: PropTypes.oneOf(['top', 'left', 'right']),
|
|
176
|
-
/**
|
|
177
|
-
* Size of tabs will be fixed when the value is true
|
|
178
|
-
*/
|
|
179
|
-
fixedSize: PropTypes.bool,
|
|
180
|
-
/**
|
|
181
|
-
* Callback function, fired when tab changes
|
|
182
|
-
*/
|
|
183
|
-
onChange: PropTypes.func,
|
|
184
|
-
/**
|
|
185
|
-
* Any valid react node
|
|
186
|
-
*/
|
|
187
|
-
children: childrenOf([Tab]),
|
|
188
|
-
/**
|
|
189
|
-
* Additional classname for content wrapper
|
|
190
|
-
*/
|
|
191
|
-
contentClassName: PropTypes.string,
|
|
192
|
-
/**
|
|
193
|
-
* Padding value for content wrapper
|
|
194
|
-
*/
|
|
195
|
-
contentPadding: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
|
|
196
|
-
};
|
|
197
|
-
Tabs.defaultProps = {
|
|
198
|
-
type: 'basic',
|
|
199
|
-
position: 'top',
|
|
200
|
-
fixedSize: false,
|
|
201
|
-
contentPadding: 19
|
|
202
|
-
};
|
|
203
|
-
function getDefaultActiveKey(children) {
|
|
204
|
-
let defaultActiveKey;
|
|
205
|
-
React__default.Children.forEach(children, child => {
|
|
206
|
-
if (!defaultActiveKey && !child.props.disabled) {
|
|
207
|
-
defaultActiveKey = child.key;
|
|
208
|
-
}
|
|
209
|
-
});
|
|
210
|
-
return defaultActiveKey;
|
|
211
|
-
}
|
|
212
|
-
function getTabsAndContent(children, activeKey, defaultActiveKey, handleClick) {
|
|
213
|
-
let content;
|
|
214
|
-
let tabContentPadding;
|
|
215
|
-
const tabs = React__default.Children.map(children, child => {
|
|
216
|
-
const active = child.key === activeKey;
|
|
217
|
-
if (active) {
|
|
218
|
-
content = child.props.children;
|
|
219
|
-
tabContentPadding = child.props.contentPadding;
|
|
220
|
-
}
|
|
221
|
-
return /*#__PURE__*/React__default.cloneElement(child, {
|
|
222
|
-
onClick: () => handleClick(child.key),
|
|
223
|
-
defaultActiveKey,
|
|
224
|
-
activeKey,
|
|
225
|
-
active
|
|
226
|
-
});
|
|
227
|
-
});
|
|
228
|
-
return {
|
|
229
|
-
tabs,
|
|
230
|
-
content,
|
|
231
|
-
tabContentPadding
|
|
232
|
-
};
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
export { Tab, Tabs };
|
package/Tag/index.js
DELETED
|
@@ -1,102 +0,0 @@
|
|
|
1
|
-
import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
|
|
2
|
-
import React__default from 'react';
|
|
3
|
-
import PropTypes from 'prop-types';
|
|
4
|
-
import { c as classnames } from '../index-031ff73c.js';
|
|
5
|
-
import { d as tagConfig } from '../configs-00612ce0.js';
|
|
6
|
-
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
|
|
7
|
-
|
|
8
|
-
var css_248z = "[data-gene-ui-version=\"2.16.3\"] .static-title-holder{align-items:flex-start;display:inline-flex;flex-direction:column;max-width:100%;vertical-align:top}[data-gene-ui-version=\"2.16.3\"] .static-title-holder .st-t{font:600 1.4rem/1.8rem var(--font-family);margin:0 0 .4rem;opacity:.5;padding:0 var(--static-title-padding,0)}[data-gene-ui-version=\"2.16.3\"] .static-title-holder .st-c{max-width:100%}[data-gene-ui-version=\"2.16.3\"] .static-title-holder .st-c:nth-child(2){align-items:center;display:flex;min-height:3.2rem}[data-gene-ui-version=\"2.16.3\"] .static-title-holder.f-full-width,[data-gene-ui-version=\"2.16.3\"] .static-title-holder.f-full-width .st-c{width:100%}[data-gene-ui-version=\"2.16.3\"] .tag-c{--color:var(--hero);align-items:center;background:var(--background);color:var(--color);display:flex;flex-direction:row-reverse;flex-shrink:0;font:600 1.4rem/1.8rem var(--font-family);height:var(--size);justify-content:center;max-width:100%;padding:0 1rem;position:relative;text-align:center;transition:color .3s;-webkit-user-select:none;user-select:none;width:100%}[data-gene-ui-version=\"2.16.3\"] .tag-c.s-small{--size:2.4rem;font-size:1.2rem}html:not([dir=rtl]) .tag-c.s-small .icon{margin-left:1px}html[dir=rtl] .tag-c.s-small .icon{margin-right:1px}[data-gene-ui-version=\"2.16.3\"] .tag-c.s-medium{--size:2.6rem}html:not([dir=rtl]) .tag-c.s-medium .icon{margin-left:.5rem}html[dir=rtl] .tag-c.s-medium .icon{margin-right:.5rem}[data-gene-ui-version=\"2.16.3\"] .tag-c.s-big{--size:3rem}html:not([dir=rtl]) .tag-c.s-big .icon{margin-left:.5rem}html[dir=rtl] .tag-c.s-big .icon{margin-right:.5rem}[data-gene-ui-version=\"2.16.3\"] .tag-c.f-compact{min-width:var(--size)}[data-gene-ui-version=\"2.16.3\"] .tag-c.f-compact.s-small{padding:0 .4rem}[data-gene-ui-version=\"2.16.3\"] .tag-c.f-compact.s-medium{padding:0 .5rem}[data-gene-ui-version=\"2.16.3\"] .tag-c.f-compact.s-big{padding:0 .7rem}html:not([dir=rtl]) .tag-c:not(.f-compact).s-small .icon{margin-right:-.9rem}html[dir=rtl] .tag-c:not(.f-compact).s-small .icon{margin-left:-.9rem}html:not([dir=rtl]) .tag-c:not(.f-compact).s-medium .icon{margin-right:-.7rem}html[dir=rtl] .tag-c:not(.f-compact).s-medium .icon{margin-left:-.7rem}html:not([dir=rtl]) .tag-c:not(.f-compact).s-big .icon{margin-right:-.2rem}html[dir=rtl] .tag-c:not(.f-compact).s-big .icon{margin-left:-.2rem}[data-gene-ui-version=\"2.16.3\"] .tag-c.cr-full-radius{border-radius:1.4rem}[data-gene-ui-version=\"2.16.3\"] .tag-c.cr-smooth-radius{border-radius:.6rem}[data-gene-ui-version=\"2.16.3\"] .tag-c:not(.active).a-simple{--color:var(--background-sc)}[data-gene-ui-version=\"2.16.3\"] .tag-c:not(.active).a-simple .tag-backdrop:before{opacity:.1}[data-gene-ui-version=\"2.16.3\"] .tag-c:not(.active).a-simple .tag-backdrop:after{content:none}[data-gene-ui-version=\"2.16.3\"] .tag-c:not(.active).a-minimal .tag-backdrop{--color:var(--background-sc)}[data-gene-ui-version=\"2.16.3\"] .tag-c:not(.active).a-minimal .tag-backdrop:before{opacity:.03}[data-gene-ui-version=\"2.16.3\"] .tag-c:not(.active).a-minimal .tag-backdrop:after{opacity:.07}[data-gene-ui-version=\"2.16.3\"] .tag-c:not(.active).a-outline .tag-backdrop:before{content:none}[data-gene-ui-version=\"2.16.3\"] .tag-c:not(.active).a-colored .tag-backdrop:before{opacity:.1}[data-gene-ui-version=\"2.16.3\"] .tag-c:not(.active).a-clean{--color:var(--background-sc)}@media (hover:hover){[data-gene-ui-version=\"2.16.3\"] .tag-c:not(.active).a-clean:hover{--color:var(--hero)}}[data-gene-ui-version=\"2.16.3\"] .tag-c:not(.active).a-clean .tag-backdrop:after,[data-gene-ui-version=\"2.16.3\"] .tag-c:not(.active).a-clean .tag-backdrop:before{content:none}[data-gene-ui-version=\"2.16.3\"] .tag-c:not(.active).a-light .tag-backdrop:before{opacity:.1}[data-gene-ui-version=\"2.16.3\"] .tag-c:not(.active).a-light .tag-backdrop:after{border:0}[data-gene-ui-version=\"2.16.3\"] .tag-c.active{color:var(--hero-sc)}@media (hover:hover){[data-gene-ui-version=\"2.16.3\"] .tag-c:hover .tag-backdrop{opacity:.6}}[data-gene-ui-version=\"2.16.3\"] .tag-c .icon,[data-gene-ui-version=\"2.16.3\"] .tag-c .tag-cc{position:relative;transition:opacity .3s;z-index:1}[data-gene-ui-version=\"2.16.3\"] .tag-c .icon{cursor:pointer;opacity:.5}@media (hover:hover){[data-gene-ui-version=\"2.16.3\"] .tag-c .icon:hover{opacity:1}[data-gene-ui-version=\"2.16.3\"] .tag-c .icon:hover~.tag-cp{opacity:.6}}[data-gene-ui-version=\"2.16.3\"] .tag-backdrop{border-radius:inherit;height:100%;left:0;position:absolute;top:0;transition:opacity .3s;width:100%}[data-gene-ui-version=\"2.16.3\"] .tag-backdrop:after,[data-gene-ui-version=\"2.16.3\"] .tag-backdrop:before{border-radius:inherit;content:\"\";display:block;height:100%;left:0;position:absolute;top:0;width:100%}[data-gene-ui-version=\"2.16.3\"] .tag-backdrop:before{background:var(--color);transition:background .3s,opacity .3s}[data-gene-ui-version=\"2.16.3\"] .tag-backdrop:after{border:1px solid var(--color);transition:border-color .3s,opacity .3s}";
|
|
9
|
-
styleInject(css_248z);
|
|
10
|
-
|
|
11
|
-
function Tag(_ref) {
|
|
12
|
-
let {
|
|
13
|
-
label,
|
|
14
|
-
name,
|
|
15
|
-
cornerRadius,
|
|
16
|
-
size,
|
|
17
|
-
color,
|
|
18
|
-
appearance,
|
|
19
|
-
flexibility,
|
|
20
|
-
selected,
|
|
21
|
-
className,
|
|
22
|
-
cursor,
|
|
23
|
-
icons,
|
|
24
|
-
...restProps
|
|
25
|
-
} = _ref;
|
|
26
|
-
return /*#__PURE__*/React__default.createElement("ul", _extends({
|
|
27
|
-
className: classnames('static-title-holder', className, "f-".concat(flexibility))
|
|
28
|
-
}, restProps), label && /*#__PURE__*/React__default.createElement("li", {
|
|
29
|
-
className: "st-t"
|
|
30
|
-
}, label), /*#__PURE__*/React__default.createElement("li", {
|
|
31
|
-
className: "st-c"
|
|
32
|
-
}, /*#__PURE__*/React__default.createElement("div", {
|
|
33
|
-
className: classnames('tag-c', "cr-".concat(cornerRadius), "a-".concat(appearance), "f-".concat(flexibility), "s-".concat(size), {
|
|
34
|
-
active: selected,
|
|
35
|
-
'pointer-events-none': !icons
|
|
36
|
-
}),
|
|
37
|
-
style: {
|
|
38
|
-
'--hero': color,
|
|
39
|
-
cursor
|
|
40
|
-
}
|
|
41
|
-
}, icons || null, /*#__PURE__*/React__default.createElement("div", {
|
|
42
|
-
className: "tag-cp tag-cc ellipsis-text"
|
|
43
|
-
}, name), /*#__PURE__*/React__default.createElement("div", {
|
|
44
|
-
className: "tag-backdrop"
|
|
45
|
-
}))));
|
|
46
|
-
}
|
|
47
|
-
Tag.propTypes = {
|
|
48
|
-
/**
|
|
49
|
-
* Label for 'Tag'.
|
|
50
|
-
*/
|
|
51
|
-
label: PropTypes.string,
|
|
52
|
-
/**
|
|
53
|
-
* Cursor type for 'Tag'.
|
|
54
|
-
*/
|
|
55
|
-
cursor: PropTypes.string,
|
|
56
|
-
/**
|
|
57
|
-
* Name for 'Tag'.
|
|
58
|
-
*/
|
|
59
|
-
name: PropTypes.string.isRequired,
|
|
60
|
-
/**
|
|
61
|
-
* Border type of corners
|
|
62
|
-
*/
|
|
63
|
-
cornerRadius: PropTypes.oneOf(tagConfig.cornerRadius),
|
|
64
|
-
/**
|
|
65
|
-
* Chooses how to show 'Tag'
|
|
66
|
-
*/
|
|
67
|
-
flexibility: PropTypes.oneOf(tagConfig.flexibility),
|
|
68
|
-
/**
|
|
69
|
-
* Switches between different sizes of 'Tag'.
|
|
70
|
-
*/
|
|
71
|
-
size: PropTypes.oneOf(tagConfig.size),
|
|
72
|
-
/**
|
|
73
|
-
* Color/theming for 'Tag'.
|
|
74
|
-
*/
|
|
75
|
-
color: PropTypes.string,
|
|
76
|
-
/**
|
|
77
|
-
* Switches between different views of 'Tag'.
|
|
78
|
-
*/
|
|
79
|
-
appearance: PropTypes.oneOf(tagConfig.appearance),
|
|
80
|
-
/**
|
|
81
|
-
* Selected state
|
|
82
|
-
*/
|
|
83
|
-
selected: PropTypes.bool,
|
|
84
|
-
/**
|
|
85
|
-
* External/Additional className
|
|
86
|
-
*/
|
|
87
|
-
className: PropTypes.string,
|
|
88
|
-
/**
|
|
89
|
-
* Showing icons
|
|
90
|
-
*/
|
|
91
|
-
icons: PropTypes.node
|
|
92
|
-
};
|
|
93
|
-
Tag.defaultProps = {
|
|
94
|
-
cornerRadius: tagConfig.cornerRadius[0],
|
|
95
|
-
flexibility: tagConfig.flexibility[0],
|
|
96
|
-
size: tagConfig.size[1],
|
|
97
|
-
appearance: tagConfig.appearance[0],
|
|
98
|
-
selected: false,
|
|
99
|
-
cursor: 'pointer'
|
|
100
|
-
};
|
|
101
|
-
|
|
102
|
-
export { Tag as default };
|
package/TextLink/index.js
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import React__default from 'react';
|
|
2
|
-
import { c as classnames } from '../index-031ff73c.js';
|
|
3
|
-
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
|
|
4
|
-
|
|
5
|
-
var css_248z = "[data-gene-ui-version=\"2.16.3\"] .textLink{align-items:center;border-radius:var(--guit-ref-radius-4xsmall);cursor:pointer;display:inline-flex;flex-direction:row;gap:var(--guit-ref-spacing-3xsmall);-webkit-user-select:none;user-select:none}[data-gene-ui-version=\"2.16.3\"] .textLink_underline .textLink__text{font-family:var(--guit-sem-font-body-medium-underline-medium-font-family);font-size:var(--guit-sem-font-body-medium-underline-medium-font-size);font-weight:var(--guit-sem-font-body-medium-underline-medium-font-weight);line-height:var(--guit-sem-font-body-medium-underline-medium-line-height);-webkit-text-decoration:var(--guit-sem-font-body-medium-underline-medium-text-decoration);text-decoration:var(--guit-sem-font-body-medium-underline-medium-text-decoration)}[data-gene-ui-version=\"2.16.3\"] .textLink:not(.textLink_underline) .textLink__text{font-family:var(--guit-sem-font-body-medium-default-medium-font-family);font-size:var(--guit-sem-font-body-medium-default-medium-font-size);font-weight:var(--guit-sem-font-body-medium-default-medium-font-weight);line-height:var(--guit-sem-font-body-medium-default-medium-line-height)}[data-gene-ui-version=\"2.16.3\"] .textLink_color_primary{color:var(--guit-sem-color-foreground-brand)}[data-gene-ui-version=\"2.16.3\"] .textLink_color_primary:hover{color:var(--guit-sem-color-foreground-brand-hover)}[data-gene-ui-version=\"2.16.3\"] .textLink_color_primary:active{color:var(--guit-sem-color-foreground-brand-pressed)}[data-gene-ui-version=\"2.16.3\"] .textLink_color_secondary{color:var(--guit-sem-color-foreground-neutral-2)}[data-gene-ui-version=\"2.16.3\"] .textLink_color_secondary:hover{color:var(--guit-sem-color-foreground-neutral-2-hover)}[data-gene-ui-version=\"2.16.3\"] .textLink_color_secondary:active{color:var(--guit-sem-color-foreground-neutral-2-pressed)}[data-gene-ui-version=\"2.16.3\"] .textLink_color_inverse{color:var(--guit-sem-color-foreground-inverse)}[data-gene-ui-version=\"2.16.3\"] .textLink_color_inverse:hover{color:var(--guit-sem-color-foreground-inverse-hover)}[data-gene-ui-version=\"2.16.3\"] .textLink_color_inverse:active{color:var(--guit-sem-color-foreground-inverse-pressed)}[data-gene-ui-version=\"2.16.3\"] .textLink_disabled{pointer-events:none}[data-gene-ui-version=\"2.16.3\"] .textLink_disabled:not(.textLink_color_inverse){color:var(--guit-sem-color-foreground-disabled)}[data-gene-ui-version=\"2.16.3\"] .textLink_disabled.textLink_color_inverse{color:var(--guit-sem-color-foreground-inverse-disabled)}[data-gene-ui-version=\"2.16.3\"] .textLink_iconBefore{flex-direction:row-reverse}[data-gene-ui-version=\"2.16.3\"] .textLink__text{color:inherit;text-transform:capitalize}[data-gene-ui-version=\"2.16.3\"] .textLink__icon{align-items:center;display:flex;flex:0 0 auto;height:var(--guit-sem-dimension-height-small-nudge);justify-content:center;width:var(--guit-sem-dimension-width-small-nudge)}";
|
|
6
|
-
styleInject(css_248z);
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* A link is styled text that navigates users to another location, either within the current experience or to a different app or website.
|
|
10
|
-
*/
|
|
11
|
-
const TextLink = ({ text, href, iconBefore, rel, target = 'self', underline, appearance = 'primary', disabled, onClick, isLoading, Icon, className }) => (React__default.createElement(React__default.Fragment, null, isLoading ? (React__default.createElement("span", null, "skeleton")) : (React__default.createElement("a", Object.assign({ target: `_${target}`, rel: rel, className: classnames(`textLink textLink_color_${appearance}`, className, {
|
|
12
|
-
textLink_underline: underline,
|
|
13
|
-
textLink_disabled: disabled,
|
|
14
|
-
textLink_iconBefore: iconBefore
|
|
15
|
-
}), href: href, onClick: onClick }, (disabled && { tabIndex: -1 })),
|
|
16
|
-
React__default.createElement("span", { className: "textLink__text" }, text),
|
|
17
|
-
Icon && (React__default.createElement("span", { className: "textLink__icon" },
|
|
18
|
-
React__default.createElement(Icon, { size: 20 })))))));
|
|
19
|
-
|
|
20
|
-
export { TextLink as default };
|
package/Textarea/index.js
DELETED
|
@@ -1,242 +0,0 @@
|
|
|
1
|
-
import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
|
|
2
|
-
import React__default from 'react';
|
|
3
|
-
import PropTypes from 'prop-types';
|
|
4
|
-
import { n as noop } from '../index-5f37f281.js';
|
|
5
|
-
import { i as inputConfig, s as screenTypes } from '../configs-00612ce0.js';
|
|
6
|
-
import ExtendedInput from '../ExtendedInput/index.js';
|
|
7
|
-
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
|
|
8
|
-
import '../dateValidation-67caec66.js';
|
|
9
|
-
import '../_commonjsHelpers-24198af3.js';
|
|
10
|
-
import 'react-dom';
|
|
11
|
-
import '../index-031ff73c.js';
|
|
12
|
-
import '../hooks/useDeviceType.js';
|
|
13
|
-
import '../hooks/useWindowSize.js';
|
|
14
|
-
import '../hooks/useDebounce.js';
|
|
15
|
-
import '../useEllipsisDetection-c1c9ad94.js';
|
|
16
|
-
import '../Icon/index.js';
|
|
17
|
-
import '../SuggestionList/index.js';
|
|
18
|
-
import '../hooks/useKeyDown.js';
|
|
19
|
-
import '../hooks/useClickOutside.js';
|
|
20
|
-
import '../config-1053d64d.js';
|
|
21
|
-
import '../Scrollbar/index.js';
|
|
22
|
-
import '../callAfterDelay-7272faca.js';
|
|
23
|
-
import '../index-65217440.js';
|
|
24
|
-
import '../tslib.es6-f211516f.js';
|
|
25
|
-
import '../GeneUIProvider/index.js';
|
|
26
|
-
|
|
27
|
-
var css_248z = "";
|
|
28
|
-
styleInject(css_248z);
|
|
29
|
-
|
|
30
|
-
function Textarea(props) {
|
|
31
|
-
return /*#__PURE__*/React__default.createElement(ExtendedInput, _extends({}, props, {
|
|
32
|
-
type: "textarea"
|
|
33
|
-
}));
|
|
34
|
-
}
|
|
35
|
-
Textarea.propTypes = {
|
|
36
|
-
/**
|
|
37
|
-
* Additional className
|
|
38
|
-
*/
|
|
39
|
-
className: PropTypes.string,
|
|
40
|
-
/**
|
|
41
|
-
* Control ExtendedInput disabled state with this prop
|
|
42
|
-
*/
|
|
43
|
-
disabled: PropTypes.bool,
|
|
44
|
-
/**
|
|
45
|
-
* Borders will be colored on when "isValid" and this props are set to "true"
|
|
46
|
-
*/
|
|
47
|
-
colorBorderOnError: PropTypes.bool,
|
|
48
|
-
/**
|
|
49
|
-
* Shows an icon to clear ExtendedInput's value when set to "true"
|
|
50
|
-
*/
|
|
51
|
-
showClearIcon: PropTypes.bool,
|
|
52
|
-
/**
|
|
53
|
-
* Use this props in combo with "icon" prop. This will fire on icon click when set to "true"
|
|
54
|
-
*/
|
|
55
|
-
clickableIcon: PropTypes.bool,
|
|
56
|
-
/**
|
|
57
|
-
* Shows an error icon when "isValid" is set to "false" and this prop is set to "true"
|
|
58
|
-
*/
|
|
59
|
-
showErrorIcon: PropTypes.bool,
|
|
60
|
-
/**
|
|
61
|
-
*.
|
|
62
|
-
*/
|
|
63
|
-
showClickableTooltipOnError: PropTypes.bool,
|
|
64
|
-
/**
|
|
65
|
-
* ExtendedInput borders are colored when "isValid" and this props are set to "true"
|
|
66
|
-
*/
|
|
67
|
-
colorOnValid: PropTypes.bool,
|
|
68
|
-
/**
|
|
69
|
-
* ExtendedInput will display an icon when "isValid" and this props are set to "true"
|
|
70
|
-
*/
|
|
71
|
-
showIconOnValid: PropTypes.bool,
|
|
72
|
-
/**
|
|
73
|
-
* Shows the "errorText" value in "Tooltip" when set to "true"
|
|
74
|
-
*/
|
|
75
|
-
showErrorWithTooltip: PropTypes.bool,
|
|
76
|
-
/**
|
|
77
|
-
* Control ExtendedInput validation. For more info see "ValidatableNumberInput", "ValidatableTextInput"(integrated ExtendedInputs with "Form" organism).
|
|
78
|
-
*/
|
|
79
|
-
isValid: PropTypes.bool,
|
|
80
|
-
/**
|
|
81
|
-
* Use this prop to specify error message. This will be displayed when "isValid" is set to "false"
|
|
82
|
-
*/
|
|
83
|
-
errorText: PropTypes.string,
|
|
84
|
-
/**
|
|
85
|
-
* Use this prop to specify tooltip message.
|
|
86
|
-
*/
|
|
87
|
-
tooltipText: PropTypes.string,
|
|
88
|
-
/**
|
|
89
|
-
* Valid values are same as "Icon" type
|
|
90
|
-
*/
|
|
91
|
-
icon: PropTypes.string,
|
|
92
|
-
/**
|
|
93
|
-
* ExtendedInput placeholder
|
|
94
|
-
*/
|
|
95
|
-
placeholder: PropTypes.string,
|
|
96
|
-
/**
|
|
97
|
-
* Control items direction
|
|
98
|
-
*/
|
|
99
|
-
itemsDirection: PropTypes.oneOf(inputConfig.itemsDirection),
|
|
100
|
-
/**
|
|
101
|
-
* Use this prop to control ExtendedInput state. Note that when you specify this prop, the ExtendedInput will not functionate itself
|
|
102
|
-
*/
|
|
103
|
-
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
104
|
-
/**
|
|
105
|
-
* ExtendedInput appearance
|
|
106
|
-
*/
|
|
107
|
-
appearance: PropTypes.oneOf(inputConfig.appearance),
|
|
108
|
-
/**
|
|
109
|
-
* ExtendedInput size
|
|
110
|
-
*/
|
|
111
|
-
inputSize: PropTypes.oneOf(inputConfig.size),
|
|
112
|
-
/**
|
|
113
|
-
* ExtendedInput corner radius
|
|
114
|
-
*/
|
|
115
|
-
cornerRadius: PropTypes.oneOf(inputConfig.cornerRadius),
|
|
116
|
-
/**
|
|
117
|
-
* Will make ExtendedInput readonly when set to "true"
|
|
118
|
-
*/
|
|
119
|
-
readOnly: PropTypes.bool,
|
|
120
|
-
/**
|
|
121
|
-
* How to display inscription in relation to it's parent in ExtendedInput
|
|
122
|
-
*/
|
|
123
|
-
flexibility: PropTypes.oneOf(inputConfig.flexibility),
|
|
124
|
-
/**
|
|
125
|
-
* This prop will only applied once as defaultState for "value" when ExtendedInput mounts.
|
|
126
|
-
* Note that specifying this prop is not mean controlling it.
|
|
127
|
-
*/
|
|
128
|
-
defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
129
|
-
/**
|
|
130
|
-
* Shows an "Icon" to remove ExtendedInput's value
|
|
131
|
-
*/
|
|
132
|
-
canClear: PropTypes.bool,
|
|
133
|
-
/**
|
|
134
|
-
* Fires an event on clear "Icon" click((element: Element) => void)
|
|
135
|
-
*/
|
|
136
|
-
onClear: PropTypes.func,
|
|
137
|
-
/**
|
|
138
|
-
* Fires an event on ExtendedInput change((event: Event) => void)
|
|
139
|
-
*/
|
|
140
|
-
onChange: PropTypes.func,
|
|
141
|
-
/**
|
|
142
|
-
* Specify a label for ExtendedInput
|
|
143
|
-
*/
|
|
144
|
-
label: PropTypes.string,
|
|
145
|
-
/**
|
|
146
|
-
* Specify a "label" appearance
|
|
147
|
-
*/
|
|
148
|
-
labelAppearance: PropTypes.oneOf(inputConfig.labelAppearance),
|
|
149
|
-
/**
|
|
150
|
-
* Will add an additional description field
|
|
151
|
-
*/
|
|
152
|
-
description: PropTypes.node,
|
|
153
|
-
/**
|
|
154
|
-
* Fires an event on ExtendInput <input /> click((event: Event => void))
|
|
155
|
-
*/
|
|
156
|
-
onClick: PropTypes.func,
|
|
157
|
-
/**
|
|
158
|
-
* Typing will be blocked when set to "true". Note design is different from "readonly" prop's design
|
|
159
|
-
*/
|
|
160
|
-
writeProtected: PropTypes.bool,
|
|
161
|
-
/**
|
|
162
|
-
* Callback fires when input is focused
|
|
163
|
-
*/
|
|
164
|
-
onFocus: PropTypes.func,
|
|
165
|
-
/**
|
|
166
|
-
* Callback fires when input loose focus
|
|
167
|
-
*/
|
|
168
|
-
onBlur: PropTypes.func,
|
|
169
|
-
/**
|
|
170
|
-
* Callback fires when click in icon
|
|
171
|
-
*/
|
|
172
|
-
onIconClick: PropTypes.func,
|
|
173
|
-
/**
|
|
174
|
-
* Define is input required or no.
|
|
175
|
-
*/
|
|
176
|
-
required: PropTypes.bool,
|
|
177
|
-
/**
|
|
178
|
-
* The switch between mobile and desktop version
|
|
179
|
-
*/
|
|
180
|
-
screenType: PropTypes.oneOf(screenTypes),
|
|
181
|
-
/**
|
|
182
|
-
* Define is need input info icon required.
|
|
183
|
-
*/
|
|
184
|
-
withInfoIcon: PropTypes.bool,
|
|
185
|
-
/**
|
|
186
|
-
* ExtendedInput info icon title.
|
|
187
|
-
*/
|
|
188
|
-
infoIconTitle: PropTypes.string,
|
|
189
|
-
/**
|
|
190
|
-
* Max Length of input Value
|
|
191
|
-
*/
|
|
192
|
-
maxLength: PropTypes.number,
|
|
193
|
-
/**
|
|
194
|
-
* Show Remaining Length of input value, works only with maxLength
|
|
195
|
-
*/
|
|
196
|
-
showRemainingLength: PropTypes.bool,
|
|
197
|
-
/**
|
|
198
|
-
* Suggestion Data
|
|
199
|
-
*/
|
|
200
|
-
suggestionData: PropTypes.arrayOf(PropTypes.shape({
|
|
201
|
-
key: PropTypes.string.isRequired,
|
|
202
|
-
data: PropTypes.arrayOf(PropTypes.shape({
|
|
203
|
-
label: PropTypes.string.isRequired,
|
|
204
|
-
value: PropTypes.string.isRequired
|
|
205
|
-
}))
|
|
206
|
-
}))
|
|
207
|
-
};
|
|
208
|
-
Textarea.defaultProps = {
|
|
209
|
-
step: 1,
|
|
210
|
-
placeholder: '',
|
|
211
|
-
itemsDirection: inputConfig.itemsDirection[0],
|
|
212
|
-
appearance: inputConfig.appearance[0],
|
|
213
|
-
inputSize: inputConfig.size[1],
|
|
214
|
-
cornerRadius: inputConfig.cornerRadius[0],
|
|
215
|
-
readOnly: false,
|
|
216
|
-
flexibility: inputConfig.flexibility[0],
|
|
217
|
-
colorBorderOnError: true,
|
|
218
|
-
showErrorIcon: false,
|
|
219
|
-
showClickableTooltipOnError: true,
|
|
220
|
-
showErrorWithTooltip: false,
|
|
221
|
-
colorOnValid: false,
|
|
222
|
-
showIconOnValid: false,
|
|
223
|
-
canClear: false,
|
|
224
|
-
isValid: true,
|
|
225
|
-
onChange: noop,
|
|
226
|
-
onClick: noop,
|
|
227
|
-
onClear: noop,
|
|
228
|
-
onFocus: noop,
|
|
229
|
-
onBlur: noop,
|
|
230
|
-
onIconClick: noop,
|
|
231
|
-
withInfoIcon: false,
|
|
232
|
-
infoIconTitle: '',
|
|
233
|
-
label: '',
|
|
234
|
-
labelAppearance: inputConfig.labelAppearance[0],
|
|
235
|
-
description: '',
|
|
236
|
-
writeProtected: false,
|
|
237
|
-
defaultValue: '',
|
|
238
|
-
screenType: screenTypes[0]
|
|
239
|
-
};
|
|
240
|
-
Textarea.displayName = 'Textarea';
|
|
241
|
-
|
|
242
|
-
export { Textarea as default };
|