@decisiv/ui-components 2.0.1-alpha.204 → 2.0.1-alpha.206
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/lib/atoms/OptionsList/Option/index.d.ts.map +1 -1
- package/lib/atoms/OptionsList/Option/index.js +5 -2
- package/lib/atoms/OptionsList/Option/styles.js +4 -1
- package/lib/atoms/OptionsList/context.d.ts +1 -0
- package/lib/atoms/OptionsList/context.d.ts.map +1 -1
- package/lib/atoms/OptionsList/index.d.ts.map +1 -1
- package/lib/atoms/OptionsList/index.js +4 -2
- package/lib/atoms/OptionsList/schema.d.ts.map +1 -1
- package/lib/atoms/OptionsList/schema.js +1 -0
- package/lib/atoms/OptionsList/types.d.ts +2 -0
- package/lib/atoms/OptionsList/types.d.ts.map +1 -1
- package/lib/components/Combobox/index.d.ts.map +1 -1
- package/lib/components/Combobox/index.js +4 -2
- package/lib/components/Combobox/schema.d.ts.map +1 -1
- package/lib/components/Combobox/schema.js +2 -1
- package/lib/components/Combobox/types.d.ts +1 -1
- package/lib/components/Combobox/types.d.ts.map +1 -1
- package/lib/components/DropdownList/index.test.js +47 -15
- package/lib/components/Modal/index.d.ts +1 -1
- package/lib/components/Modal/index.d.ts.map +1 -1
- package/lib/components/Modal/index.js +12 -5
- package/lib/components/Modal/index.test.js +63 -0
- package/lib/components/Popover/index.d.ts.map +1 -1
- package/lib/components/Popover/index.js +10 -3
- package/lib/utils/useStackingContext.d.ts +12 -0
- package/lib/utils/useStackingContext.d.ts.map +1 -0
- package/lib/utils/useStackingContext.js +46 -0
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/atoms/OptionsList/Option/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EACL,WAAW,EAKZ,MAAM,UAAU,CAAC;AA4DlB,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/atoms/OptionsList/Option/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EACL,WAAW,EAKZ,MAAM,UAAU,CAAC;AA4DlB,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA0H/C;;AAED,wBAAkC"}
|
|
@@ -95,7 +95,9 @@ function Option(props) {
|
|
|
95
95
|
updateActiveId = _useOptionsList.updateActiveId,
|
|
96
96
|
inputMethod = _useOptionsList.inputMethod,
|
|
97
97
|
selectable = _useOptionsList.selectable,
|
|
98
|
-
itemRole = _useOptionsList.itemRole
|
|
98
|
+
itemRole = _useOptionsList.itemRole,
|
|
99
|
+
_useOptionsList$point = _useOptionsList.pointerEvents,
|
|
100
|
+
pointerEvents = _useOptionsList$point === void 0 ? 'none' : _useOptionsList$point;
|
|
99
101
|
|
|
100
102
|
var checked = selectedIds.includes(id);
|
|
101
103
|
var commonProps = {
|
|
@@ -134,7 +136,8 @@ function Option(props) {
|
|
|
134
136
|
onMouseEnter: handleMouseEnter,
|
|
135
137
|
inputMethod: inputMethod,
|
|
136
138
|
role: itemRole,
|
|
137
|
-
size: size
|
|
139
|
+
size: size,
|
|
140
|
+
pointerEvents: pointerEvents
|
|
138
141
|
}, (0, _utils.isLink)(props) ? _react.default.createElement(_styles.StyledLink, {
|
|
139
142
|
tabIndex: -1,
|
|
140
143
|
to: props.linkTo,
|
|
@@ -48,7 +48,10 @@ function getBorderRadius(_ref) {
|
|
|
48
48
|
var Container = _styledComponents.default.li.withConfig({
|
|
49
49
|
displayName: "styles__Container",
|
|
50
50
|
componentId: "sc-1vr9h8x-1"
|
|
51
|
-
})(["text-align:left;&:focus{outline:none;}> .label,> ", "{align-items:center;border:1px solid transparent;color:", ";display:flex;pointer-events:
|
|
51
|
+
})(["text-align:left;&:focus{outline:none;}> .label,> ", "{align-items:center;border:1px solid transparent;color:", ";display:flex;pointer-events:", ";width:100%;white-space:nowrap;", " > *{margin-right:", ";}}> ", "{pointer-events:auto;background-color:transparent;text-decoration:none;}&:first-child > .label,&:first-child > ", "{border-top-left-radius:", ";border-top-right-radius:", ";}&:last-child > .label,&:last-child > ", "{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}&:hover:not([aria-disabled='true']):not([aria-selected='true']) > .label,&:hover:not([aria-disabled='true']):not([aria-selected='true']) > ", "{color:", ";text-decoration:none;.label > *{border-color:", ";}}&[aria-selected='true'] > .label{background:", ";color:", ";}&[aria-selected='true'] > .label > div > #optionLabelDetails{background:", ";color:", ";}", ";", " &[aria-disabled='true']{cursor:not-allowed;", "{pointer-events:none;}}&[aria-disabled='true'] > .label,&[aria-disabled='true'] > ", "{background:", ";color:", ";}"], StyledLink, (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), function (_ref2) {
|
|
52
|
+
var pointerEvents = _ref2.pointerEvents;
|
|
53
|
+
return pointerEvents;
|
|
54
|
+
}, withSizeModifiers, (0, _rem.default)(10), StyledLink, StyledLink, getBorderRadius, getBorderRadius, StyledLink, getBorderRadius, getBorderRadius, StyledLink, (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _toColorString.default)(_designTokens.color.interaction.indianOcean), (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _styleModifiers.when)('isActive', (0, _styledComponents.css)(["color:", ";background:", ";.label > *{border-color:", ";}"], (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean15), (0, _toColorString.default)(_designTokens.color.interaction.indianOcean))), (0, _styleModifiers.when)([['isActive'], ['inputMethod', 'keyboard']], (0, _styledComponents.css)(["background:none;> .label,> ", "{border-color:", ";", "}&[aria-selected='true'] > .label,&[aria-selected='true'] > ", "{color:", ";", "}"], StyledLink, (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _focusRingWithColor.default)(_designTokens.color.interaction.pacificOcean40), StyledLink, (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _focusRingWithColor.default)(_designTokens.color.opacity.fullMoon50))), StyledLink, StyledLink, (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _toColorString.default)(_designTokens.color.opacity.charcoal40));
|
|
52
55
|
|
|
53
56
|
exports.Container = Container;
|
|
54
57
|
|
|
@@ -12,6 +12,7 @@ export interface CtxValue {
|
|
|
12
12
|
setInputMethod: (newInputMethod: InputMethod) => void;
|
|
13
13
|
selectable?: boolean;
|
|
14
14
|
itemRole?: string;
|
|
15
|
+
pointerEvents?: OptionsListProps['pointerEvents'];
|
|
15
16
|
}
|
|
16
17
|
declare const OptionsListContextProvider: import("react").ProviderExoticComponent<import("react").ProviderProps<CtxValue>>;
|
|
17
18
|
declare const useOptionsList: () => CtxValue;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/context.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAYxD,MAAM,WAAW,QAAQ;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;IAC1D,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,CAAC,cAAc,EAAE,WAAW,KAAK,IAAI,CAAC;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/context.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAYxD,MAAM,WAAW,QAAQ;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;IAC1D,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,CAAC,cAAc,EAAE,WAAW,KAAK,IAAI,CAAC;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAC;CACnD;AAGD,QAAA,MAAM,0BAA0B,kFAA8B,CAAC;AAE/D,QAAA,MAAM,cAAc,gBACY,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAE,0BAA0B,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAcf,OAAO,EAGL,gBAAgB,EAIjB,MAAM,SAAS,CAAC;AAwBjB,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAmCrB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAcf,OAAO,EAGL,gBAAgB,EAIjB,MAAM,SAAS,CAAC;AAwBjB,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAmCrB,CAAC;AAiTF,QAAA,MAAM,2BAA2B,2FAA0B,CAAC;AAmC5D,eAAe,2BAA2B,CAAC"}
|
|
@@ -120,7 +120,8 @@ function OptionsList(props, forwardedRef) {
|
|
|
120
120
|
role = props.role,
|
|
121
121
|
minWidth = props.minWidth,
|
|
122
122
|
maxWidth = props.maxWidth,
|
|
123
|
-
maxHeight = props.maxHeight
|
|
123
|
+
maxHeight = props.maxHeight,
|
|
124
|
+
pointerEvents = props.pointerEvents;
|
|
124
125
|
var initialIds = selectedIdsProp || defaultSelected;
|
|
125
126
|
|
|
126
127
|
var _useState = (0, _react.useState)(null),
|
|
@@ -277,7 +278,8 @@ function OptionsList(props, forwardedRef) {
|
|
|
277
278
|
setInputMethod: setInputMethod,
|
|
278
279
|
updateActiveId: updateActiveId,
|
|
279
280
|
selectable: !!selectable,
|
|
280
|
-
itemRole: itemRole
|
|
281
|
+
itemRole: itemRole,
|
|
282
|
+
pointerEvents: pointerEvents
|
|
281
283
|
}
|
|
282
284
|
}, _react.default.createElement(_Grid.default.Container, null, _react.default.createElement(Row, null, _react.default.createElement(Container, {
|
|
283
285
|
"aria-activedescendant": activeId,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA2C,CAAC;
|
|
1
|
+
{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA2C,CAAC;AA6ExD,eAAe,MAAM,CAAC"}
|
|
@@ -37,6 +37,7 @@ schema.makePropTypes = function () {
|
|
|
37
37
|
onChange: _reactDesc.PropTypes.func.description('Change event handler, called with the selected id or array of the selected item IDs.'),
|
|
38
38
|
selected: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.string, _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.string)]).description('Used when component is controlled. Defines the item(s) selected in the options list.'),
|
|
39
39
|
renderOptionLabel: _reactDesc.PropTypes.func.description('Function to customize render of option labels, called with the item value.'),
|
|
40
|
+
pointerEvents: _reactDesc.PropTypes.string.description('Defines the value of pointer-events of the options.').defaultValue('none'),
|
|
40
41
|
selectable: _reactDesc.PropTypes.bool.description('Enables selection in the options list.').defaultValue(true),
|
|
41
42
|
role: _reactDesc.PropTypes.string.description('The role assigned to the list.').defaultValue('listbox'),
|
|
42
43
|
itemRole: _reactDesc.PropTypes.string.description('The role assigned to each item in the list.').defaultValue('option'),
|
|
@@ -84,6 +84,7 @@ export interface OptionsListProps extends OptionsListDimensions {
|
|
|
84
84
|
defaultSelected?: Selection;
|
|
85
85
|
role?: string;
|
|
86
86
|
itemRole?: string;
|
|
87
|
+
pointerEvents?: string;
|
|
87
88
|
}
|
|
88
89
|
export declare type OptionsListContainerRef = HTMLUListElement;
|
|
89
90
|
export interface StyledCategoryProps extends React.LiHTMLAttributes<HTMLLIElement> {
|
|
@@ -95,6 +96,7 @@ export interface ContainerProps {
|
|
|
95
96
|
multiple: boolean;
|
|
96
97
|
inputMethod: InputMethod;
|
|
97
98
|
size: Size;
|
|
99
|
+
pointerEvents?: string;
|
|
98
100
|
}
|
|
99
101
|
export interface StyledLinkProps extends LinkProps {
|
|
100
102
|
disabled: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/types.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/index.tsx"],"names":[],"mappings":"AASA,OAAc,EAGZ,sBAAsB,EAQvB,MAAM,OAAO,CAAC;AA2Bf,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAQ,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/index.tsx"],"names":[],"mappings":"AASA,OAAc,EAGZ,sBAAsB,EAQvB,MAAM,OAAO,CAAC;AA2Bf,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAQ,MAAM,SAAS,CAAC;AAsjBhE,QAAA,MAAM,eAAe,EAAE,sBAAsB,CAC3C,gBAAgB,EAChB,aAAa,CACS,CAAC;AAOzB,eAAe,eAAe,CAAC"}
|
|
@@ -123,7 +123,8 @@ function Combobox(props, ref) {
|
|
|
123
123
|
_props$variant = props.variant,
|
|
124
124
|
variant = _props$variant === void 0 ? 'sync' : _props$variant,
|
|
125
125
|
zIndex = props.zIndex,
|
|
126
|
-
containerSelector = props.containerSelector
|
|
126
|
+
containerSelector = props.containerSelector,
|
|
127
|
+
pointerEvents = props.pointerEvents;
|
|
127
128
|
|
|
128
129
|
var _useCombobox = (0, _useCombobox2.default)(props),
|
|
129
130
|
getInputFieldProps = _useCombobox.getInputFieldProps,
|
|
@@ -563,7 +564,8 @@ function Combobox(props, ref) {
|
|
|
563
564
|
target: popoverTargetRef,
|
|
564
565
|
visible: Boolean(isPopoverVisible || loading),
|
|
565
566
|
renderOptionLabel: renderOptionLabel,
|
|
566
|
-
zIndex: zIndex
|
|
567
|
+
zIndex: zIndex,
|
|
568
|
+
pointerEvents: pointerEvents
|
|
567
569
|
}));
|
|
568
570
|
}));
|
|
569
571
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAAwC,CAAC;
|
|
1
|
+
{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAAwC,CAAC;AA+FrD,eAAe,MAAM,CAAC"}
|
|
@@ -51,7 +51,8 @@ schema.propTypes = _objectSpread({}, (0, _omit.default)(_InputField.schema.makeP
|
|
|
51
51
|
multiple: _reactDesc.PropTypes.bool.description('Used when multiple selections can be made in the Combobox').defaultValue(false),
|
|
52
52
|
variant: _reactDesc.PropTypes.oneOf(['async', 'sync']).description('Enables different logic for rendering the dropdown list.').defaultValue('sync'),
|
|
53
53
|
renderOptionLabel: _reactDesc.PropTypes.func.description('Function to customize render of option labels, called with the item value'),
|
|
54
|
-
zIndex: _reactDesc.PropTypes.number.description('Sets the z-index style property of the options list')
|
|
54
|
+
zIndex: _reactDesc.PropTypes.number.description('Sets the z-index style property of the options list'),
|
|
55
|
+
pointerEvents: _reactDesc.PropTypes.string.description('Defines the value of pointer-events of the options.').defaultValue('none')
|
|
55
56
|
});
|
|
56
57
|
var _default = schema;
|
|
57
58
|
exports.default = _default;
|
|
@@ -8,7 +8,7 @@ declare type Variant = 'async' | 'sync';
|
|
|
8
8
|
interface TOnChangeMeta {
|
|
9
9
|
removed: boolean;
|
|
10
10
|
}
|
|
11
|
-
export interface ComboboxProps extends Omit<React.InputHTMLAttributes<ComboboxInputRef>, 'onChange' | 'value'>, Omit<BaseInputFieldProps, 'children' | 'onChange' | 'value'>, Pick<DropdownListProps, 'onShow' | 'onHide' | 'renderOptionLabel' | 'containerSelector'> {
|
|
11
|
+
export interface ComboboxProps extends Omit<React.InputHTMLAttributes<ComboboxInputRef>, 'onChange' | 'value'>, Omit<BaseInputFieldProps, 'children' | 'onChange' | 'value'>, Pick<DropdownListProps, 'onShow' | 'onHide' | 'renderOptionLabel' | 'containerSelector' | 'pointerEvents'> {
|
|
12
12
|
clearButtonLabel?: string;
|
|
13
13
|
defaultInputValue?: string;
|
|
14
14
|
defaultValue?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAE3D,oBAAY,gBAAgB,GAAG,gBAAgB,CAAC;AAEhD,aAAK,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAEhC,UAAU,aAAa;IACrB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,aACf,SAAQ,IAAI,CACR,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,UAAU,GAAG,OAAO,CACrB,EACD,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC,EAC5D,IAAI,CACF,iBAAiB,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -149,16 +149,48 @@ describe('DropdownList', function () {
|
|
|
149
149
|
selector: 'b'
|
|
150
150
|
})).toBeTruthy();
|
|
151
151
|
});
|
|
152
|
+
it('renders custom option with internal actions', function () {
|
|
153
|
+
var testButtonTitle = 'internalActionButton';
|
|
154
|
+
var onClickMock = jest.fn();
|
|
155
|
+
|
|
156
|
+
var customProps = _objectSpread({}, defaultProps, {
|
|
157
|
+
items: [{
|
|
158
|
+
id: '1',
|
|
159
|
+
label: 'Option 1',
|
|
160
|
+
value: '1'
|
|
161
|
+
}]
|
|
162
|
+
});
|
|
163
|
+
|
|
164
|
+
var renderOptionLabel = function renderOptionLabel(item) {
|
|
165
|
+
return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("b", null, item.label), _react.default.createElement(_Button.default, {
|
|
166
|
+
text: testButtonTitle,
|
|
167
|
+
onClick: onClickMock
|
|
168
|
+
}));
|
|
169
|
+
};
|
|
170
|
+
|
|
171
|
+
var _render5 = render(_react.default.createElement(_.default, _extends({}, customProps, {
|
|
172
|
+
renderOptionLabel: renderOptionLabel,
|
|
173
|
+
pointerEvents: "auto"
|
|
174
|
+
}))),
|
|
175
|
+
baseElement = _render5.baseElement,
|
|
176
|
+
getByText = _render5.getByText;
|
|
177
|
+
|
|
178
|
+
_react2.fireEvent.click(getByText(targetButtonText));
|
|
179
|
+
|
|
180
|
+
_react2.fireEvent.click((0, _react2.getByText)(baseElement, testButtonTitle));
|
|
181
|
+
|
|
182
|
+
expect(onClickMock).toHaveBeenCalled();
|
|
183
|
+
});
|
|
152
184
|
describe('selecting', function () {
|
|
153
185
|
describe('a single option', function () {
|
|
154
186
|
it('calls the onChange prop with the selection id', function () {
|
|
155
187
|
var onChange = jest.fn();
|
|
156
188
|
|
|
157
|
-
var
|
|
189
|
+
var _render6 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
|
|
158
190
|
onChange: onChange
|
|
159
191
|
}))),
|
|
160
|
-
baseElement =
|
|
161
|
-
getByText =
|
|
192
|
+
baseElement = _render6.baseElement,
|
|
193
|
+
getByText = _render6.getByText;
|
|
162
194
|
|
|
163
195
|
_react2.fireEvent.click(getByText(targetButtonText));
|
|
164
196
|
|
|
@@ -168,9 +200,9 @@ describe('DropdownList', function () {
|
|
|
168
200
|
expect(baseElement).toMatchSnapshot();
|
|
169
201
|
});
|
|
170
202
|
it('does not automatically hide the options', function () {
|
|
171
|
-
var
|
|
172
|
-
baseElement =
|
|
173
|
-
getByText =
|
|
203
|
+
var _render7 = render(_react.default.createElement(_.default, defaultProps)),
|
|
204
|
+
baseElement = _render7.baseElement,
|
|
205
|
+
getByText = _render7.getByText;
|
|
174
206
|
|
|
175
207
|
_react2.fireEvent.click(getByText(targetButtonText));
|
|
176
208
|
|
|
@@ -181,11 +213,11 @@ describe('DropdownList', function () {
|
|
|
181
213
|
it('does not allow multiple selections', function () {
|
|
182
214
|
var onChange = jest.fn();
|
|
183
215
|
|
|
184
|
-
var
|
|
216
|
+
var _render8 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
|
|
185
217
|
onChange: onChange
|
|
186
218
|
}))),
|
|
187
|
-
baseElement =
|
|
188
|
-
getByText =
|
|
219
|
+
baseElement = _render8.baseElement,
|
|
220
|
+
getByText = _render8.getByText;
|
|
189
221
|
|
|
190
222
|
_react2.fireEvent.click(getByText(targetButtonText));
|
|
191
223
|
|
|
@@ -202,12 +234,12 @@ describe('DropdownList', function () {
|
|
|
202
234
|
it('calls the onChange prop with the selection ids', function () {
|
|
203
235
|
var onChange = jest.fn();
|
|
204
236
|
|
|
205
|
-
var
|
|
237
|
+
var _render9 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
|
|
206
238
|
onChange: onChange,
|
|
207
239
|
multiple: true
|
|
208
240
|
}))),
|
|
209
|
-
baseElement =
|
|
210
|
-
getByText =
|
|
241
|
+
baseElement = _render9.baseElement,
|
|
242
|
+
getByText = _render9.getByText;
|
|
211
243
|
|
|
212
244
|
_react2.fireEvent.click(getByText(targetButtonText));
|
|
213
245
|
|
|
@@ -219,11 +251,11 @@ describe('DropdownList', function () {
|
|
|
219
251
|
expect(baseElement).toMatchSnapshot();
|
|
220
252
|
});
|
|
221
253
|
it('does not automatically hide the options', function () {
|
|
222
|
-
var
|
|
254
|
+
var _render10 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
|
|
223
255
|
multiple: true
|
|
224
256
|
}))),
|
|
225
|
-
baseElement =
|
|
226
|
-
getByText =
|
|
257
|
+
baseElement = _render10.baseElement,
|
|
258
|
+
getByText = _render10.getByText;
|
|
227
259
|
|
|
228
260
|
_react2.fireEvent.click(getByText(targetButtonText));
|
|
229
261
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { ModalProps } from './types';
|
|
3
|
-
declare function ModalWrapper({ onClose, visible, children, ...rest }: ModalProps): JSX.Element;
|
|
3
|
+
declare function ModalWrapper({ onClose, visible, children, zIndex, ...rest }: ModalProps): JSX.Element;
|
|
4
4
|
declare namespace ModalWrapper {
|
|
5
5
|
var propTypes: any;
|
|
6
6
|
var defaultProps: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":";AAgCA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":";AAgCA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAkIrC,iBAAS,YAAY,CAAC,EACpB,OAAO,EACP,OAAO,EACP,QAAQ,EACR,MAAa,EACb,GAAG,IAAI,EACR,EAAE,UAAU,eAUZ;kBAhBQ,YAAY;;;;;;;;AAgCrB,eAAe,YAAY,CAAC"}
|
|
@@ -49,6 +49,8 @@ var _ResponsiveModalWrapper = _interopRequireDefault(require("./ResponsiveModalW
|
|
|
49
49
|
|
|
50
50
|
var _schema = _interopRequireDefault(require("./schema"));
|
|
51
51
|
|
|
52
|
+
var _useStackingContext = require("../../utils/useStackingContext");
|
|
53
|
+
|
|
52
54
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
53
55
|
|
|
54
56
|
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
|
|
@@ -92,7 +94,7 @@ function Modal(_ref) {
|
|
|
92
94
|
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
93
95
|
title = _ref.title,
|
|
94
96
|
_ref$zIndex = _ref.zIndex,
|
|
95
|
-
zIndex = _ref$zIndex === void 0 ?
|
|
97
|
+
zIndex = _ref$zIndex === void 0 ? 1001 : _ref$zIndex;
|
|
96
98
|
|
|
97
99
|
var breakpoints = _defineProperty({}, _breakpointObserver.sizes.LG, 650);
|
|
98
100
|
|
|
@@ -173,15 +175,20 @@ function ModalWrapper(_ref8) {
|
|
|
173
175
|
var onClose = _ref8.onClose,
|
|
174
176
|
visible = _ref8.visible,
|
|
175
177
|
children = _ref8.children,
|
|
176
|
-
|
|
178
|
+
_ref8$zIndex = _ref8.zIndex,
|
|
179
|
+
zIndex = _ref8$zIndex === void 0 ? 1001 : _ref8$zIndex,
|
|
180
|
+
rest = _objectWithoutProperties(_ref8, ["onClose", "visible", "children", "zIndex"]);
|
|
177
181
|
|
|
178
|
-
return _react.default.createElement(
|
|
182
|
+
return _react.default.createElement(_useStackingContext.StackingContextProvider, {
|
|
183
|
+
zIndex: zIndex
|
|
184
|
+
}, _react.default.createElement(_Manager.default, {
|
|
179
185
|
onClose: onClose,
|
|
180
186
|
visible: visible
|
|
181
187
|
}, _react.default.createElement(Modal, _extends({
|
|
182
188
|
onClose: onClose,
|
|
183
|
-
visible: visible
|
|
184
|
-
|
|
189
|
+
visible: visible,
|
|
190
|
+
zIndex: zIndex
|
|
191
|
+
}, rest), children)));
|
|
185
192
|
} // @ts-ignore
|
|
186
193
|
|
|
187
194
|
|
|
@@ -14,8 +14,14 @@ var _constants = require("./constants");
|
|
|
14
14
|
|
|
15
15
|
var _ = _interopRequireDefault(require("."));
|
|
16
16
|
|
|
17
|
+
var _Combobox = _interopRequireDefault(require("../Combobox"));
|
|
18
|
+
|
|
17
19
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
20
|
|
|
21
|
+
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
|
|
22
|
+
|
|
23
|
+
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
24
|
+
|
|
19
25
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
20
26
|
|
|
21
27
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
@@ -26,8 +32,24 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
26
32
|
|
|
27
33
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
28
34
|
|
|
35
|
+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
36
|
+
|
|
29
37
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
30
38
|
|
|
39
|
+
// Prevent warnings about missing document methods (createRange, etc.)
|
|
40
|
+
jest.mock('popper.js', function () {
|
|
41
|
+
var _class, _temp;
|
|
42
|
+
|
|
43
|
+
var PopperJS = jest.requireActual('popper.js');
|
|
44
|
+
return _temp = _class = function _class() {
|
|
45
|
+
_classCallCheck(this, _class);
|
|
46
|
+
|
|
47
|
+
return {
|
|
48
|
+
destroy: function destroy() {},
|
|
49
|
+
scheduleUpdate: function scheduleUpdate() {}
|
|
50
|
+
};
|
|
51
|
+
}, _defineProperty(_class, "placements", PopperJS.placements), _temp;
|
|
52
|
+
});
|
|
31
53
|
beforeAll(function () {
|
|
32
54
|
var root = document.createElement('div');
|
|
33
55
|
root.setAttribute('id', 'modal-root');
|
|
@@ -238,4 +260,45 @@ describe('Modal', function () {
|
|
|
238
260
|
});
|
|
239
261
|
});
|
|
240
262
|
});
|
|
263
|
+
describe('with a Popover as its children', function () {
|
|
264
|
+
it('renders the Popover with the same zIndex', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
|
265
|
+
var _render5, getByRole, getByLabelText, modal, combobox, modalZIndex, comboboxOptionsZIndex;
|
|
266
|
+
|
|
267
|
+
return regeneratorRuntime.wrap(function _callee$(_context) {
|
|
268
|
+
while (1) {
|
|
269
|
+
switch (_context.prev = _context.next) {
|
|
270
|
+
case 0:
|
|
271
|
+
_render5 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
|
|
272
|
+
zIndex: 1234
|
|
273
|
+
}), _react.default.createElement(_Combobox.default, {
|
|
274
|
+
label: "Nested Combobox",
|
|
275
|
+
options: [{
|
|
276
|
+
id: '1',
|
|
277
|
+
value: '1',
|
|
278
|
+
label: 'Combobox Opt 1'
|
|
279
|
+
}]
|
|
280
|
+
}))), getByRole = _render5.getByRole, getByLabelText = _render5.getByLabelText;
|
|
281
|
+
modal = getByRole('dialog');
|
|
282
|
+
combobox = getByLabelText('Nested Combobox');
|
|
283
|
+
(0, _react2.act)(function () {
|
|
284
|
+
_react2.fireEvent.click(combobox);
|
|
285
|
+
});
|
|
286
|
+
_context.next = 6;
|
|
287
|
+
return (0, _react2.wait)(function () {
|
|
288
|
+
expect(getByRole('listbox')).toBeInTheDocument();
|
|
289
|
+
});
|
|
290
|
+
|
|
291
|
+
case 6:
|
|
292
|
+
modalZIndex = window.getComputedStyle(modal).zIndex;
|
|
293
|
+
comboboxOptionsZIndex = window.getComputedStyle(getByRole('listbox')).zIndex;
|
|
294
|
+
expect(modalZIndex).toEqual(comboboxOptionsZIndex);
|
|
295
|
+
|
|
296
|
+
case 9:
|
|
297
|
+
case "end":
|
|
298
|
+
return _context.stop();
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
}, _callee);
|
|
302
|
+
})));
|
|
303
|
+
});
|
|
241
304
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAUN,MAAM,OAAO,CAAC;AAWf,OAAc,EAAE,WAAW,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,SAAS,CAAC;AAE7E,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EACL,UAAU,IAAI,cAAc,EAC5B,WAAW,IAAI,eAAe,EAE9B,SAAS,IAAI,aAAa,EAC1B,YAAY,IAAI,SAAS,EACzB,MAAM,IAAI,aAAa,EACvB,cAAc,IAAI,kBAAkB,EACpC,mBAAmB,IAAI,uBAAuB,EAE/C,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAUN,MAAM,OAAO,CAAC;AAWf,OAAc,EAAE,WAAW,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,SAAS,CAAC;AAE7E,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EACL,UAAU,IAAI,cAAc,EAC5B,WAAW,IAAI,eAAe,EAE9B,SAAS,IAAI,aAAa,EAC1B,YAAY,IAAI,SAAS,EACzB,MAAM,IAAI,aAAa,EACvB,cAAc,IAAI,kBAAkB,EACpC,mBAAmB,IAAI,uBAAuB,EAE/C,MAAM,SAAS,CAAC;AAIjB,oBAAY,UAAU,GAAG,cAAc,CAAC;AACxC,oBAAY,WAAW,GAAG,eAAe,CAAC;AAC1C,oBAAY,WAAW,GAAG,eAAe,CAAC;AAC1C,oBAAY,SAAS,GAAG,aAAa,CAAC;AACtC,oBAAY,YAAY,GAAG,SAAS,CAAC;AACrC,oBAAY,MAAM,GAAG,aAAa,CAAC;AACnC,oBAAY,cAAc,GAAG,kBAAkB,CAAC;AAChD,oBAAY,mBAAmB,GAAG,uBAAuB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC;AA4QnC,QAAA,MAAM,cAAc,mFAAsB,CAAC;AAkD3C,eAAe,cAAc,CAAC"}
|
|
@@ -47,6 +47,8 @@ var _types = require("./types");
|
|
|
47
47
|
|
|
48
48
|
var _utils = require("./utils");
|
|
49
49
|
|
|
50
|
+
var _useStackingContext2 = _interopRequireDefault(require("../../utils/useStackingContext"));
|
|
51
|
+
|
|
50
52
|
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
|
|
51
53
|
|
|
52
54
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -106,7 +108,8 @@ var Popover = function Popover(props, instanceRef) {
|
|
|
106
108
|
showArrow = _props$showArrow === void 0 ? true : _props$showArrow,
|
|
107
109
|
target = props.target,
|
|
108
110
|
visible = props.visible,
|
|
109
|
-
zIndex = props.zIndex,
|
|
111
|
+
_props$zIndex = props.zIndex,
|
|
112
|
+
zIndexProp = _props$zIndex === void 0 ? 0 : _props$zIndex,
|
|
110
113
|
rest = _objectWithoutProperties(props, ["alwaysRender", "arrowColor", "borderRadius", "children", "containerSelector", "contentRole", "defaultVisible", "enabled", "hideOnClickOutside", "hideOnESC", "id", "manageEvents", "onHide", "onRequestHide", "onShow", "placement", "showArrow", "target", "visible", "zIndex"]);
|
|
111
114
|
|
|
112
115
|
var contentRef = (0, _react.useRef)(null);
|
|
@@ -120,11 +123,15 @@ var Popover = function Popover(props, instanceRef) {
|
|
|
120
123
|
setIsVisibleState = _useState2[1];
|
|
121
124
|
|
|
122
125
|
var _useConfig = (0, _ConfigProvider.useConfig)(),
|
|
123
|
-
createPortal = _useConfig.createPortal;
|
|
126
|
+
createPortal = _useConfig.createPortal;
|
|
127
|
+
|
|
128
|
+
var _useStackingContext = (0, _useStackingContext2.default)(),
|
|
129
|
+
currentZIndex = _useStackingContext.currentZIndex;
|
|
130
|
+
|
|
131
|
+
var zIndex = currentZIndex + zIndexProp; // wrapper for setting visibility state; forces a recalculation
|
|
124
132
|
// of the popper position (computing new offsets) each time the
|
|
125
133
|
// popover window becomes visible
|
|
126
134
|
|
|
127
|
-
|
|
128
135
|
var setIsVisible = (0, _react.useCallback)(function (makeItVisible) {
|
|
129
136
|
setIsVisibleState(makeItVisible);
|
|
130
137
|
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface StackingContextType {
|
|
3
|
+
setZIndex: (zIndex: number) => void;
|
|
4
|
+
currentZIndex: number;
|
|
5
|
+
}
|
|
6
|
+
export declare const StackingContextProvider: ({ zIndex, children, }: {
|
|
7
|
+
zIndex: number;
|
|
8
|
+
children: React.ReactNode;
|
|
9
|
+
}) => JSX.Element;
|
|
10
|
+
export default function useStackingContext(): StackingContextType;
|
|
11
|
+
export {};
|
|
12
|
+
//# sourceMappingURL=useStackingContext.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useStackingContext.d.ts","sourceRoot":"","sources":["../../src/utils/useStackingContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAE5E,UAAU,mBAAmB;IAC3B,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,aAAa,EAAE,MAAM,CAAC;CACvB;AAWD,eAAO,MAAM,uBAAuB;;;iBAoBnC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,kBAAkB,IAAI,mBAAmB,CAQhE"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = useStackingContext;
|
|
7
|
+
exports.StackingContextProvider = void 0;
|
|
8
|
+
|
|
9
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
|
|
11
|
+
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
|
|
12
|
+
|
|
13
|
+
var defaultStackingContext = {
|
|
14
|
+
setZIndex: function setZIndex() {},
|
|
15
|
+
currentZIndex: 0
|
|
16
|
+
};
|
|
17
|
+
var StackingContext = (0, _react.createContext)(defaultStackingContext);
|
|
18
|
+
|
|
19
|
+
var StackingContextProvider = function StackingContextProvider(_ref) {
|
|
20
|
+
var zIndex = _ref.zIndex,
|
|
21
|
+
children = _ref.children;
|
|
22
|
+
var zIndexRef = (0, _react.useRef)(zIndex);
|
|
23
|
+
|
|
24
|
+
var setZIndex = function setZIndex(newZIndex) {
|
|
25
|
+
zIndexRef.current = newZIndex;
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
return _react.default.createElement(StackingContext.Provider, {
|
|
29
|
+
value: {
|
|
30
|
+
currentZIndex: zIndexRef.current,
|
|
31
|
+
setZIndex: setZIndex
|
|
32
|
+
}
|
|
33
|
+
}, children);
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
exports.StackingContextProvider = StackingContextProvider;
|
|
37
|
+
|
|
38
|
+
function useStackingContext() {
|
|
39
|
+
var context = (0, _react.useContext)(StackingContext);
|
|
40
|
+
|
|
41
|
+
if (context === undefined) {
|
|
42
|
+
return defaultStackingContext;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
return context;
|
|
46
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@decisiv/ui-components",
|
|
3
|
-
"version": "2.0.1-alpha.
|
|
3
|
+
"version": "2.0.1-alpha.206+c447756",
|
|
4
4
|
"description": "Decisiv's design system React components",
|
|
5
5
|
"author": "Decisiv UI Development Team",
|
|
6
6
|
"license": "MIT",
|
|
@@ -71,5 +71,5 @@
|
|
|
71
71
|
"access": "public"
|
|
72
72
|
},
|
|
73
73
|
"private": false,
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "c447756bcaf57212002f0db16c83d62df0ea54a3"
|
|
75
75
|
}
|