@navikt/ds-react 6.6.1 → 6.7.1
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/cjs/chat/Chat.d.ts +2 -1
- package/cjs/chat/Chat.js +2 -1
- package/cjs/chat/Chat.js.map +1 -1
- package/cjs/date/datepicker/parts/DropdownCaption.js +1 -1
- package/cjs/date/datepicker/parts/DropdownCaption.js.map +1 -1
- package/cjs/date/monthpicker/MonthCaption.js +1 -1
- package/cjs/date/utils/labels.d.ts +2 -2
- package/cjs/form/ReadOnlyIcon.d.ts +2 -2
- package/cjs/form/combobox/Combobox.js +7 -22
- package/cjs/form/combobox/Combobox.js.map +1 -1
- package/cjs/form/combobox/ComboboxProvider.js +2 -2
- package/cjs/form/combobox/ComboboxProvider.js.map +1 -1
- package/cjs/form/combobox/ComboboxWrapper.d.ts +1 -2
- package/cjs/form/combobox/ComboboxWrapper.js +4 -2
- package/cjs/form/combobox/ComboboxWrapper.js.map +1 -1
- package/cjs/form/combobox/FilteredOptions/FilteredOptions.js +4 -4
- package/cjs/form/combobox/FilteredOptions/FilteredOptions.js.map +1 -1
- package/cjs/form/combobox/FilteredOptions/filteredOptionsContext.d.ts +4 -4
- package/cjs/form/combobox/FilteredOptions/filteredOptionsContext.js +13 -15
- package/cjs/form/combobox/FilteredOptions/filteredOptionsContext.js.map +1 -1
- package/cjs/form/combobox/Input/{inputContext.d.ts → Input.context.d.ts} +7 -5
- package/cjs/form/combobox/Input/{inputContext.js → Input.context.js} +22 -22
- package/cjs/form/combobox/Input/Input.context.js.map +1 -0
- package/cjs/form/combobox/Input/Input.js +2 -2
- package/cjs/form/combobox/Input/Input.js.map +1 -1
- package/cjs/form/combobox/Input/InputController.d.ts +3 -0
- package/cjs/form/combobox/Input/InputController.js +70 -0
- package/cjs/form/combobox/Input/InputController.js.map +1 -0
- package/cjs/form/combobox/{ToggleListButton.js → Input/ToggleListButton.js} +1 -1
- package/cjs/form/combobox/Input/ToggleListButton.js.map +1 -0
- package/cjs/form/combobox/SelectedOptions/SelectedOptions.js +2 -2
- package/cjs/form/combobox/SelectedOptions/SelectedOptions.js.map +1 -1
- package/cjs/form/combobox/SelectedOptions/selectedOptionsContext.d.ts +4 -4
- package/cjs/form/combobox/SelectedOptions/selectedOptionsContext.js +7 -13
- package/cjs/form/combobox/SelectedOptions/selectedOptionsContext.js.map +1 -1
- package/cjs/form/combobox/customOptionsContext.d.ts +4 -4
- package/cjs/form/combobox/customOptionsContext.js +10 -13
- package/cjs/form/combobox/customOptionsContext.js.map +1 -1
- package/cjs/form/combobox/types.d.ts +1 -1
- package/cjs/help-text/HelpTextIcon.d.ts +1 -1
- package/cjs/index.d.ts +1 -0
- package/cjs/index.js +4 -2
- package/cjs/index.js.map +1 -1
- package/cjs/overlay/dismiss/DismissableLayer.d.ts +70 -0
- package/cjs/overlay/dismiss/DismissableLayer.js +253 -0
- package/cjs/overlay/dismiss/DismissableLayer.js.map +1 -0
- package/cjs/overlay/dismiss/util/dispatchCustomEvent.d.ts +50 -0
- package/cjs/overlay/dismiss/util/dispatchCustomEvent.js +65 -0
- package/cjs/overlay/dismiss/util/dispatchCustomEvent.js.map +1 -0
- package/cjs/overlay/dismiss/util/useEscapeKeydown.d.ts +1 -0
- package/cjs/overlay/dismiss/util/useEscapeKeydown.js +19 -0
- package/cjs/overlay/dismiss/util/useEscapeKeydown.js.map +1 -0
- package/cjs/overlay/dismiss/util/useFocusOutside.d.ts +8 -0
- package/cjs/overlay/dismiss/util/useFocusOutside.js +42 -0
- package/cjs/overlay/dismiss/util/useFocusOutside.js.map +1 -0
- package/cjs/overlay/dismiss/util/usePointerDownOutside.d.ts +10 -0
- package/cjs/overlay/dismiss/util/usePointerDownOutside.js +84 -0
- package/cjs/overlay/dismiss/util/usePointerDownOutside.js.map +1 -0
- package/cjs/overlays/floating/Floating.d.ts +53 -0
- package/cjs/overlays/floating/Floating.js +215 -0
- package/cjs/overlays/floating/Floating.js.map +1 -0
- package/cjs/overlays/floating/Floating.utils.d.ts +18 -0
- package/cjs/overlays/floating/Floating.utils.js +52 -0
- package/cjs/overlays/floating/Floating.utils.js.map +1 -0
- package/cjs/popover/Popover.js +13 -28
- package/cjs/popover/Popover.js.map +1 -1
- package/cjs/progress-bar/ProgressBar.d.ts +72 -0
- package/cjs/progress-bar/ProgressBar.js +86 -0
- package/cjs/progress-bar/ProgressBar.js.map +1 -0
- package/cjs/progress-bar/index.d.ts +1 -0
- package/cjs/progress-bar/index.js +10 -0
- package/cjs/progress-bar/index.js.map +1 -0
- package/cjs/tabs/Tabs.context.d.ts +7 -3
- package/cjs/tabs/Tabs.context.js +1 -0
- package/cjs/tabs/Tabs.context.js.map +1 -1
- package/cjs/timeline/AxisLabels.d.ts +1 -1
- package/cjs/toggle-group/ToggleGroup.context.d.ts +7 -3
- package/cjs/toggle-group/ToggleGroup.context.js +1 -0
- package/cjs/toggle-group/ToggleGroup.context.js.map +1 -1
- package/cjs/typography/BodyLong.d.ts +7 -7
- package/cjs/typography/BodyLong.js +5 -5
- package/cjs/typography/BodyShort.d.ts +5 -5
- package/cjs/typography/BodyShort.js +3 -3
- package/cjs/typography/Detail.d.ts +5 -5
- package/cjs/typography/Detail.js +3 -3
- package/cjs/typography/ErrorMessage.d.ts +5 -5
- package/cjs/typography/ErrorMessage.js +3 -3
- package/cjs/typography/Heading.d.ts +6 -6
- package/cjs/typography/Heading.js +3 -3
- package/cjs/typography/Label.d.ts +5 -5
- package/cjs/typography/Label.js +3 -3
- package/cjs/typography/types.d.ts +3 -3
- package/cjs/util/hooks/descendants/useDescendant.d.ts +2 -2
- package/cjs/util/hooks/descendants/useDescendant.js +49 -52
- package/cjs/util/hooks/descendants/useDescendant.js.map +1 -1
- package/cjs/util/types/AsChild.d.ts +14 -0
- package/cjs/util/types/AsChild.js +3 -0
- package/cjs/util/types/AsChild.js.map +1 -0
- package/esm/chat/Chat.d.ts +2 -1
- package/esm/chat/Chat.js +1 -0
- package/esm/chat/Chat.js.map +1 -1
- package/esm/date/datepicker/parts/DropdownCaption.js +1 -1
- package/esm/date/datepicker/parts/DropdownCaption.js.map +1 -1
- package/esm/date/monthpicker/MonthCaption.js +1 -1
- package/esm/date/utils/labels.d.ts +2 -2
- package/esm/form/ReadOnlyIcon.d.ts +2 -2
- package/esm/form/combobox/Combobox.js +8 -23
- package/esm/form/combobox/Combobox.js.map +1 -1
- package/esm/form/combobox/ComboboxProvider.js +1 -1
- package/esm/form/combobox/ComboboxProvider.js.map +1 -1
- package/esm/form/combobox/ComboboxWrapper.d.ts +1 -2
- package/esm/form/combobox/ComboboxWrapper.js +4 -2
- package/esm/form/combobox/ComboboxWrapper.js.map +1 -1
- package/esm/form/combobox/FilteredOptions/FilteredOptions.js +3 -3
- package/esm/form/combobox/FilteredOptions/FilteredOptions.js.map +1 -1
- package/esm/form/combobox/FilteredOptions/filteredOptionsContext.d.ts +4 -4
- package/esm/form/combobox/FilteredOptions/filteredOptionsContext.js +15 -16
- package/esm/form/combobox/FilteredOptions/filteredOptionsContext.js.map +1 -1
- package/esm/form/combobox/Input/{inputContext.d.ts → Input.context.d.ts} +7 -5
- package/esm/form/combobox/Input/{inputContext.js → Input.context.js} +22 -21
- package/esm/form/combobox/Input/Input.context.js.map +1 -0
- package/esm/form/combobox/Input/Input.js +1 -1
- package/esm/form/combobox/Input/Input.js.map +1 -1
- package/esm/form/combobox/Input/InputController.d.ts +3 -0
- package/esm/form/combobox/Input/InputController.js +41 -0
- package/esm/form/combobox/Input/InputController.js.map +1 -0
- package/esm/form/combobox/{ToggleListButton.js → Input/ToggleListButton.js} +1 -1
- package/esm/form/combobox/Input/ToggleListButton.js.map +1 -0
- package/esm/form/combobox/SelectedOptions/SelectedOptions.js +1 -1
- package/esm/form/combobox/SelectedOptions/SelectedOptions.js.map +1 -1
- package/esm/form/combobox/SelectedOptions/selectedOptionsContext.d.ts +4 -4
- package/esm/form/combobox/SelectedOptions/selectedOptionsContext.js +9 -14
- package/esm/form/combobox/SelectedOptions/selectedOptionsContext.js.map +1 -1
- package/esm/form/combobox/customOptionsContext.d.ts +4 -4
- package/esm/form/combobox/customOptionsContext.js +10 -12
- package/esm/form/combobox/customOptionsContext.js.map +1 -1
- package/esm/form/combobox/types.d.ts +1 -1
- package/esm/help-text/HelpTextIcon.d.ts +1 -1
- package/esm/index.d.ts +1 -0
- package/esm/index.js +1 -0
- package/esm/index.js.map +1 -1
- package/esm/overlay/dismiss/DismissableLayer.d.ts +70 -0
- package/esm/overlay/dismiss/DismissableLayer.js +226 -0
- package/esm/overlay/dismiss/DismissableLayer.js.map +1 -0
- package/esm/overlay/dismiss/util/dispatchCustomEvent.d.ts +50 -0
- package/esm/overlay/dismiss/util/dispatchCustomEvent.js +58 -0
- package/esm/overlay/dismiss/util/dispatchCustomEvent.js.map +1 -0
- package/esm/overlay/dismiss/util/useEscapeKeydown.d.ts +1 -0
- package/esm/overlay/dismiss/util/useEscapeKeydown.js +15 -0
- package/esm/overlay/dismiss/util/useEscapeKeydown.js.map +1 -0
- package/esm/overlay/dismiss/util/useFocusOutside.d.ts +8 -0
- package/esm/overlay/dismiss/util/useFocusOutside.js +38 -0
- package/esm/overlay/dismiss/util/useFocusOutside.js.map +1 -0
- package/esm/overlay/dismiss/util/usePointerDownOutside.d.ts +10 -0
- package/esm/overlay/dismiss/util/usePointerDownOutside.js +80 -0
- package/esm/overlay/dismiss/util/usePointerDownOutside.js.map +1 -0
- package/esm/overlays/floating/Floating.d.ts +53 -0
- package/esm/overlays/floating/Floating.js +188 -0
- package/esm/overlays/floating/Floating.js.map +1 -0
- package/esm/overlays/floating/Floating.utils.d.ts +18 -0
- package/esm/overlays/floating/Floating.utils.js +48 -0
- package/esm/overlays/floating/Floating.utils.js.map +1 -0
- package/esm/popover/Popover.js +16 -31
- package/esm/popover/Popover.js.map +1 -1
- package/esm/progress-bar/ProgressBar.d.ts +72 -0
- package/esm/progress-bar/ProgressBar.js +57 -0
- package/esm/progress-bar/ProgressBar.js.map +1 -0
- package/esm/progress-bar/index.d.ts +1 -0
- package/esm/progress-bar/index.js +3 -0
- package/esm/progress-bar/index.js.map +1 -0
- package/esm/tabs/Tabs.context.d.ts +7 -3
- package/esm/tabs/Tabs.context.js +1 -0
- package/esm/tabs/Tabs.context.js.map +1 -1
- package/esm/timeline/AxisLabels.d.ts +1 -1
- package/esm/toggle-group/ToggleGroup.context.d.ts +7 -3
- package/esm/toggle-group/ToggleGroup.context.js +1 -0
- package/esm/toggle-group/ToggleGroup.context.js.map +1 -1
- package/esm/typography/BodyLong.d.ts +7 -7
- package/esm/typography/BodyLong.js +5 -5
- package/esm/typography/BodyShort.d.ts +5 -5
- package/esm/typography/BodyShort.js +3 -3
- package/esm/typography/Detail.d.ts +5 -5
- package/esm/typography/Detail.js +3 -3
- package/esm/typography/ErrorMessage.d.ts +5 -5
- package/esm/typography/ErrorMessage.js +3 -3
- package/esm/typography/Heading.d.ts +6 -6
- package/esm/typography/Heading.js +3 -3
- package/esm/typography/Label.d.ts +5 -5
- package/esm/typography/Label.js +3 -3
- package/esm/typography/types.d.ts +3 -3
- package/esm/util/hooks/descendants/useDescendant.d.ts +2 -2
- package/esm/util/hooks/descendants/useDescendant.js +49 -52
- package/esm/util/hooks/descendants/useDescendant.js.map +1 -1
- package/esm/util/types/AsChild.d.ts +14 -0
- package/esm/util/types/AsChild.js +2 -0
- package/esm/util/types/AsChild.js.map +1 -0
- package/package.json +16 -5
- package/src/chat/Chat.tsx +2 -1
- package/src/date/datepicker/parts/DropdownCaption.tsx +5 -1
- package/src/date/monthpicker/MonthCaption.tsx +1 -1
- package/src/form/combobox/Combobox.tsx +6 -76
- package/src/form/combobox/ComboboxProvider.tsx +1 -1
- package/src/form/combobox/ComboboxWrapper.tsx +4 -3
- package/src/form/combobox/FilteredOptions/FilteredOptions.tsx +3 -3
- package/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx +19 -29
- package/src/form/combobox/Input/{inputContext.tsx → Input.context.tsx} +30 -33
- package/src/form/combobox/Input/Input.tsx +1 -1
- package/src/form/combobox/Input/InputController.tsx +102 -0
- package/src/form/combobox/{ToggleListButton.tsx → Input/ToggleListButton.tsx} +1 -1
- package/src/form/combobox/SelectedOptions/SelectedOptions.tsx +1 -1
- package/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx +12 -26
- package/src/form/combobox/{combobox-utils.test.ts → __tests__/combobox-utils.test.ts} +1 -1
- package/src/form/combobox/{combobox.test.tsx → __tests__/combobox.test.tsx} +2 -3
- package/src/form/combobox/customOptionsContext.tsx +14 -18
- package/src/form/combobox/types.ts +3 -1
- package/src/index.ts +1 -0
- package/src/overlay/README.md +5 -0
- package/src/overlay/dismiss/DismissableLayer.tsx +368 -0
- package/src/overlay/dismiss/util/dispatchCustomEvent.ts +77 -0
- package/src/overlay/dismiss/util/useEscapeKeydown.ts +21 -0
- package/src/overlay/dismiss/util/useFocusOutside.ts +52 -0
- package/src/overlay/dismiss/util/usePointerDownOutside.ts +95 -0
- package/src/overlays/floating/Floating.tsx +399 -0
- package/src/overlays/floating/Floating.utils.ts +63 -0
- package/src/popover/Popover.tsx +38 -70
- package/src/progress-bar/ProgressBar.tsx +149 -0
- package/src/progress-bar/index.ts +2 -0
- package/src/tabs/Tabs.context.ts +2 -0
- package/src/toggle-group/ToggleGroup.context.ts +1 -0
- package/src/typography/BodyLong.tsx +7 -7
- package/src/typography/BodyShort.tsx +5 -5
- package/src/typography/Detail.tsx +5 -5
- package/src/typography/ErrorMessage.tsx +5 -5
- package/src/typography/Heading.tsx +6 -6
- package/src/typography/Label.tsx +5 -5
- package/src/typography/types.ts +3 -3
- package/src/util/hooks/descendants/useDescendant.tsx +55 -68
- package/src/util/types/AsChild.ts +15 -0
- package/cjs/form/combobox/ClearButton.d.ts +0 -7
- package/cjs/form/combobox/ClearButton.js +0 -28
- package/cjs/form/combobox/ClearButton.js.map +0 -1
- package/cjs/form/combobox/FilteredOptions/CheckIcon.d.ts +0 -3
- package/cjs/form/combobox/FilteredOptions/CheckIcon.js +0 -12
- package/cjs/form/combobox/FilteredOptions/CheckIcon.js.map +0 -1
- package/cjs/form/combobox/Input/inputContext.js.map +0 -1
- package/cjs/form/combobox/ToggleListButton.js.map +0 -1
- package/esm/form/combobox/ClearButton.d.ts +0 -7
- package/esm/form/combobox/ClearButton.js +0 -21
- package/esm/form/combobox/ClearButton.js.map +0 -1
- package/esm/form/combobox/FilteredOptions/CheckIcon.d.ts +0 -3
- package/esm/form/combobox/FilteredOptions/CheckIcon.js +0 -7
- package/esm/form/combobox/FilteredOptions/CheckIcon.js.map +0 -1
- package/esm/form/combobox/Input/inputContext.js.map +0 -1
- package/esm/form/combobox/ToggleListButton.js.map +0 -1
- package/src/form/combobox/ClearButton.tsx +0 -29
- package/src/form/combobox/FilteredOptions/CheckIcon.tsx +0 -23
- /package/cjs/form/combobox/{ToggleListButton.d.ts → Input/ToggleListButton.d.ts} +0 -0
- /package/esm/form/combobox/{ToggleListButton.d.ts → Input/ToggleListButton.d.ts} +0 -0
|
@@ -0,0 +1,215 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
26
|
+
var t = {};
|
|
27
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
28
|
+
t[p] = s[p];
|
|
29
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
30
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
31
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
32
|
+
t[p[i]] = s[p[i]];
|
|
33
|
+
}
|
|
34
|
+
return t;
|
|
35
|
+
};
|
|
36
|
+
var _a;
|
|
37
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
38
|
+
exports.Floating = exports.useFloatingContext = exports.FloatingProvider = void 0;
|
|
39
|
+
const react_dom_1 = require("@floating-ui/react-dom");
|
|
40
|
+
const react_1 = __importStar(require("react"));
|
|
41
|
+
const Slot_1 = require("../../util/Slot");
|
|
42
|
+
const create_context_1 = require("../../util/create-context");
|
|
43
|
+
const hooks_1 = require("../../util/hooks");
|
|
44
|
+
const Floating_utils_1 = require("./Floating.utils");
|
|
45
|
+
_a = (0, create_context_1.createContext)({
|
|
46
|
+
name: "FloatingContext",
|
|
47
|
+
hookName: "useFloating",
|
|
48
|
+
providerName: "FloatingProvider",
|
|
49
|
+
}), exports.FloatingProvider = _a[0], exports.useFloatingContext = _a[1];
|
|
50
|
+
const Floating = ({ children }) => {
|
|
51
|
+
const [anchor, setAnchor] = (0, react_1.useState)(null);
|
|
52
|
+
return (react_1.default.createElement(exports.FloatingProvider, { anchor: anchor, onAnchorChange: setAnchor }, children));
|
|
53
|
+
};
|
|
54
|
+
exports.Floating = Floating;
|
|
55
|
+
/**
|
|
56
|
+
* `FloatingAnchor` provides an anchor for a Floating instance.
|
|
57
|
+
* Allows anchoring to non-DOM nodes like a cursor position when used with `virtualRef`.
|
|
58
|
+
*/
|
|
59
|
+
const FloatingAnchor = (0, react_1.forwardRef)((_a, forwardedRef) => {
|
|
60
|
+
var { virtualRef, asChild } = _a, rest = __rest(_a, ["virtualRef", "asChild"]);
|
|
61
|
+
const context = (0, exports.useFloatingContext)();
|
|
62
|
+
const ref = (0, react_1.useRef)(null);
|
|
63
|
+
const mergedRef = (0, hooks_1.useMergeRefs)(forwardedRef, ref);
|
|
64
|
+
(0, react_1.useEffect)(() => {
|
|
65
|
+
// Allows anchoring the floating to non-DOM nodes like a cursor position.
|
|
66
|
+
// We replace `anchorRef` with a virtual ref in such cases.
|
|
67
|
+
context.onAnchorChange((virtualRef === null || virtualRef === void 0 ? void 0 : virtualRef.current) || ref.current);
|
|
68
|
+
});
|
|
69
|
+
const Comp = asChild ? Slot_1.Slot : "div";
|
|
70
|
+
return virtualRef ? null : react_1.default.createElement(Comp, Object.assign({ ref: mergedRef }, rest));
|
|
71
|
+
});
|
|
72
|
+
/**
|
|
73
|
+
* Floating Arrow
|
|
74
|
+
*/
|
|
75
|
+
const OPPOSITE_SIDE = {
|
|
76
|
+
top: "bottom",
|
|
77
|
+
right: "left",
|
|
78
|
+
bottom: "top",
|
|
79
|
+
left: "right",
|
|
80
|
+
};
|
|
81
|
+
const FloatingArrow = ({ width, height, className }) => {
|
|
82
|
+
const context = useFloatingContentContext();
|
|
83
|
+
const side = OPPOSITE_SIDE[context.placedSide];
|
|
84
|
+
return (react_1.default.createElement("span", { ref: context.onArrowChange, style: {
|
|
85
|
+
position: "absolute",
|
|
86
|
+
left: context.arrowX,
|
|
87
|
+
top: context.arrowY,
|
|
88
|
+
[side]: 0,
|
|
89
|
+
transformOrigin: {
|
|
90
|
+
top: "",
|
|
91
|
+
right: "0 0",
|
|
92
|
+
bottom: "center 0",
|
|
93
|
+
left: "100% 0",
|
|
94
|
+
}[context.placedSide],
|
|
95
|
+
transform: {
|
|
96
|
+
top: "translateY(100%)",
|
|
97
|
+
right: "translateY(50%) rotate(90deg) translateX(-50%)",
|
|
98
|
+
bottom: `rotate(180deg)`,
|
|
99
|
+
left: "translateY(50%) rotate(-90deg) translateX(50%)",
|
|
100
|
+
}[context.placedSide],
|
|
101
|
+
visibility: context.hideArrow ? "hidden" : undefined,
|
|
102
|
+
}, "aria-hidden": true },
|
|
103
|
+
react_1.default.createElement("svg", { className: className, width: width, height: height, viewBox: "0 0 30 10", preserveAspectRatio: "none", style: { display: "block" } },
|
|
104
|
+
react_1.default.createElement("polygon", { points: "0,0 30,0 15,10" }))));
|
|
105
|
+
};
|
|
106
|
+
const [FloatingContentProvider, useFloatingContentContext] = (0, create_context_1.createContext)({
|
|
107
|
+
name: "FloatingContentContext",
|
|
108
|
+
hookName: "useFloatingContentContext",
|
|
109
|
+
providerName: "FloatingContentProvider",
|
|
110
|
+
});
|
|
111
|
+
const FloatingContent = (0, react_1.forwardRef)((_a, forwardedRef) => {
|
|
112
|
+
var _b, _c, _d, _e, _f, _g;
|
|
113
|
+
var { children, side = "bottom", sideOffset = 0, align = "center", alignOffset = 0, avoidCollisions = true, collisionBoundary = [], collisionPadding: collisionPaddingProp = 0, hideWhenDetached = false, updatePositionStrategy = "optimized", onPlaced, arrow: _arrow } = _a, contentProps = __rest(_a, ["children", "side", "sideOffset", "align", "alignOffset", "avoidCollisions", "collisionBoundary", "collisionPadding", "hideWhenDetached", "updatePositionStrategy", "onPlaced", "arrow"]);
|
|
114
|
+
const context = (0, exports.useFloatingContext)();
|
|
115
|
+
const [content, setContent] = (0, react_1.useState)(null);
|
|
116
|
+
const mergeRefs = (0, hooks_1.useMergeRefs)(forwardedRef, setContent);
|
|
117
|
+
const arrowDefaults = Object.assign({ padding: 5, width: 0, height: 0 }, _arrow);
|
|
118
|
+
const [arrow, setArrow] = (0, react_1.useState)(null);
|
|
119
|
+
const arrowWidth = arrowDefaults.width;
|
|
120
|
+
const arrowHeight = arrowDefaults.height;
|
|
121
|
+
const desiredPlacement = (side +
|
|
122
|
+
(align !== "center" ? "-" + align : ""));
|
|
123
|
+
const collisionPadding = typeof collisionPaddingProp === "number"
|
|
124
|
+
? collisionPaddingProp
|
|
125
|
+
: Object.assign({ top: 0, right: 0, bottom: 0, left: 0 }, collisionPaddingProp);
|
|
126
|
+
const boundary = Array.isArray(collisionBoundary)
|
|
127
|
+
? collisionBoundary
|
|
128
|
+
: [collisionBoundary];
|
|
129
|
+
const hasExplicitBoundaries = boundary.length > 0;
|
|
130
|
+
/**
|
|
131
|
+
* .filter(x => x !== null) does not narrow the type of the array enough.
|
|
132
|
+
*/
|
|
133
|
+
function isNotNull(value) {
|
|
134
|
+
return value !== null;
|
|
135
|
+
}
|
|
136
|
+
const detectOverflowOptions = {
|
|
137
|
+
padding: collisionPadding,
|
|
138
|
+
boundary: boundary.filter(isNotNull),
|
|
139
|
+
// with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
|
|
140
|
+
altBoundary: hasExplicitBoundaries,
|
|
141
|
+
};
|
|
142
|
+
const { refs, floatingStyles, placement, isPositioned, middlewareData } = (0, react_dom_1.useFloating)({
|
|
143
|
+
// default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
|
|
144
|
+
strategy: "fixed",
|
|
145
|
+
placement: desiredPlacement,
|
|
146
|
+
whileElementsMounted: (...args) => {
|
|
147
|
+
const cleanup = (0, react_dom_1.autoUpdate)(...args, {
|
|
148
|
+
animationFrame: updatePositionStrategy === "always",
|
|
149
|
+
});
|
|
150
|
+
return cleanup;
|
|
151
|
+
},
|
|
152
|
+
elements: {
|
|
153
|
+
reference: context.anchor,
|
|
154
|
+
},
|
|
155
|
+
middleware: [
|
|
156
|
+
(0, react_dom_1.offset)({
|
|
157
|
+
mainAxis: sideOffset + arrowHeight,
|
|
158
|
+
alignmentAxis: alignOffset,
|
|
159
|
+
}),
|
|
160
|
+
avoidCollisions &&
|
|
161
|
+
(0, react_dom_1.shift)(Object.assign({ mainAxis: true, crossAxis: false, limiter: (0, react_dom_1.limitShift)() }, detectOverflowOptions)),
|
|
162
|
+
avoidCollisions && (0, react_dom_1.flip)(Object.assign({}, detectOverflowOptions)),
|
|
163
|
+
(0, react_dom_1.size)(Object.assign(Object.assign({}, detectOverflowOptions), { apply: ({ elements, rects, availableWidth, availableHeight }) => {
|
|
164
|
+
const { width: anchorWidth, height: anchorHeight } = rects.reference;
|
|
165
|
+
const contentStyle = elements.floating.style;
|
|
166
|
+
/**
|
|
167
|
+
* Allows styling and animations based on the available space.
|
|
168
|
+
*/
|
|
169
|
+
contentStyle.setProperty("--ac-floating-available-width", `${availableWidth}px`);
|
|
170
|
+
contentStyle.setProperty("--ac-floating-available-height", `${availableHeight}px`);
|
|
171
|
+
contentStyle.setProperty("--ac-floating-anchor-width", `${anchorWidth}px`);
|
|
172
|
+
contentStyle.setProperty("--ac-floating-anchor-height", `${anchorHeight}px`);
|
|
173
|
+
} })),
|
|
174
|
+
arrow &&
|
|
175
|
+
(0, react_dom_1.arrow)({ element: arrow, padding: arrowDefaults.padding }),
|
|
176
|
+
(0, Floating_utils_1.transformOrigin)({ arrowWidth, arrowHeight }),
|
|
177
|
+
hideWhenDetached &&
|
|
178
|
+
(0, react_dom_1.hide)(Object.assign({ strategy: "referenceHidden" }, detectOverflowOptions)),
|
|
179
|
+
],
|
|
180
|
+
});
|
|
181
|
+
const [placedSide, placedAlign] = (0, Floating_utils_1.getSideAndAlignFromPlacement)(placement);
|
|
182
|
+
const handlePlaced = (0, hooks_1.useCallbackRef)(onPlaced);
|
|
183
|
+
(0, hooks_1.useClientLayoutEffect)(() => {
|
|
184
|
+
isPositioned && (handlePlaced === null || handlePlaced === void 0 ? void 0 : handlePlaced());
|
|
185
|
+
}, [isPositioned, handlePlaced]);
|
|
186
|
+
const arrowX = (_b = middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.x;
|
|
187
|
+
const arrowY = (_c = middlewareData.arrow) === null || _c === void 0 ? void 0 : _c.y;
|
|
188
|
+
const cannotCenterArrow = ((_d = middlewareData.arrow) === null || _d === void 0 ? void 0 : _d.centerOffset) !== 0;
|
|
189
|
+
const [contentZIndex, setContentZIndex] = (0, react_1.useState)();
|
|
190
|
+
(0, hooks_1.useClientLayoutEffect)(() => {
|
|
191
|
+
if (content)
|
|
192
|
+
setContentZIndex(window.getComputedStyle(content).zIndex);
|
|
193
|
+
}, [content]);
|
|
194
|
+
return (react_1.default.createElement("div", { ref: refs.setFloating, "data-aksel-floating-content-wrapper": "", style: Object.assign(Object.assign({}, floatingStyles), { transform: isPositioned
|
|
195
|
+
? floatingStyles.transform
|
|
196
|
+
: "translate(0, -200%)", minWidth: "max-content", zIndex: contentZIndex, ["--ac-floating-transform-origin"]: [
|
|
197
|
+
(_e = middlewareData.transformOrigin) === null || _e === void 0 ? void 0 : _e.x,
|
|
198
|
+
(_f = middlewareData.transformOrigin) === null || _f === void 0 ? void 0 : _f.y,
|
|
199
|
+
].join(" ") }),
|
|
200
|
+
// Floating UI uses the `dir` attribute on the reference/floating node for logical alignment.
|
|
201
|
+
// This attribute is necessary for both portalled and inline calculations.
|
|
202
|
+
dir: "ltr" },
|
|
203
|
+
react_1.default.createElement(FloatingContentProvider, { placedSide: placedSide, onArrowChange: setArrow, arrowX: arrowX, arrowY: arrowY, hideArrow: cannotCenterArrow },
|
|
204
|
+
react_1.default.createElement("div", Object.assign({ ref: mergeRefs, "data-side": placedSide, "data-align": placedAlign }, contentProps, { style: Object.assign(Object.assign({}, contentProps.style), {
|
|
205
|
+
// if the FloatingContent hasn't been placed yet (not all measurements done)
|
|
206
|
+
// we prevent animations so that users's animation don't kick in too early referring wrong sides
|
|
207
|
+
animation: !isPositioned ? "none" : undefined,
|
|
208
|
+
// hide the content if using the hide middleware and should be hidden
|
|
209
|
+
opacity: ((_g = middlewareData.hide) === null || _g === void 0 ? void 0 : _g.referenceHidden) ? 0 : undefined }) }),
|
|
210
|
+
children,
|
|
211
|
+
(_arrow === null || _arrow === void 0 ? void 0 : _arrow.height) && (_arrow === null || _arrow === void 0 ? void 0 : _arrow.width) && (react_1.default.createElement(FloatingArrow, { width: _arrow.width, height: _arrow.height, className: _arrow.className }))))));
|
|
212
|
+
});
|
|
213
|
+
Floating.Anchor = FloatingAnchor;
|
|
214
|
+
Floating.Content = FloatingContent;
|
|
215
|
+
//# sourceMappingURL=Floating.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Floating.js","sourceRoot":"","sources":["../../../src/overlays/floating/Floating.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { Middleware, Placement } from "@floating-ui/react-dom";
|
|
2
|
+
declare const SIDE_OPTIONS: readonly ["top", "right", "bottom", "left"];
|
|
3
|
+
declare const ALIGN_OPTIONS: readonly ["start", "center", "end"];
|
|
4
|
+
type Side = (typeof SIDE_OPTIONS)[number];
|
|
5
|
+
type Align = (typeof ALIGN_OPTIONS)[number];
|
|
6
|
+
type Measurable = {
|
|
7
|
+
getBoundingClientRect(): DOMRect;
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* `transformOrigin` is a custom middleware for floating-ui that calculates the transform origin of the floating-element.
|
|
11
|
+
*/
|
|
12
|
+
declare function transformOrigin(options: {
|
|
13
|
+
arrowWidth: number;
|
|
14
|
+
arrowHeight: number;
|
|
15
|
+
}): Middleware;
|
|
16
|
+
declare function getSideAndAlignFromPlacement(placement: Placement): readonly ["left" | "right" | "bottom" | "top", "center" | "start" | "end"];
|
|
17
|
+
export { getSideAndAlignFromPlacement, transformOrigin };
|
|
18
|
+
export type { Side, Align, Measurable };
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.transformOrigin = exports.getSideAndAlignFromPlacement = void 0;
|
|
4
|
+
const SIDE_OPTIONS = ["top", "right", "bottom", "left"];
|
|
5
|
+
const ALIGN_OPTIONS = ["start", "center", "end"];
|
|
6
|
+
/**
|
|
7
|
+
* `transformOrigin` is a custom middleware for floating-ui that calculates the transform origin of the floating-element.
|
|
8
|
+
*/
|
|
9
|
+
function transformOrigin(options) {
|
|
10
|
+
return {
|
|
11
|
+
name: "transformOrigin",
|
|
12
|
+
options,
|
|
13
|
+
fn(data) {
|
|
14
|
+
var _a, _b, _c, _d, _e;
|
|
15
|
+
const { placement, rects, middlewareData } = data;
|
|
16
|
+
const cannotCenterArrow = ((_a = middlewareData.arrow) === null || _a === void 0 ? void 0 : _a.centerOffset) !== 0;
|
|
17
|
+
const isArrowHidden = cannotCenterArrow;
|
|
18
|
+
const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
|
|
19
|
+
const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
|
|
20
|
+
const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
|
|
21
|
+
const noArrowAlign = { start: "0%", center: "50%", end: "100%" }[placedAlign];
|
|
22
|
+
const arrowXCenter = ((_c = (_b = middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.x) !== null && _c !== void 0 ? _c : 0) + arrowWidth / 2;
|
|
23
|
+
const arrowYCenter = ((_e = (_d = middlewareData.arrow) === null || _d === void 0 ? void 0 : _d.y) !== null && _e !== void 0 ? _e : 0) + arrowHeight / 2;
|
|
24
|
+
let x = "";
|
|
25
|
+
let y = "";
|
|
26
|
+
if (placedSide === "bottom") {
|
|
27
|
+
x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
|
|
28
|
+
y = `${-arrowHeight}px`;
|
|
29
|
+
}
|
|
30
|
+
else if (placedSide === "top") {
|
|
31
|
+
x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
|
|
32
|
+
y = `${rects.floating.height + arrowHeight}px`;
|
|
33
|
+
}
|
|
34
|
+
else if (placedSide === "right") {
|
|
35
|
+
x = `${-arrowHeight}px`;
|
|
36
|
+
y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
|
|
37
|
+
}
|
|
38
|
+
else if (placedSide === "left") {
|
|
39
|
+
x = `${rects.floating.width + arrowHeight}px`;
|
|
40
|
+
y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
|
|
41
|
+
}
|
|
42
|
+
return { data: { x, y } };
|
|
43
|
+
},
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
exports.transformOrigin = transformOrigin;
|
|
47
|
+
function getSideAndAlignFromPlacement(placement) {
|
|
48
|
+
const [side, align = "center"] = placement.split("-");
|
|
49
|
+
return [side, align];
|
|
50
|
+
}
|
|
51
|
+
exports.getSideAndAlignFromPlacement = getSideAndAlignFromPlacement;
|
|
52
|
+
//# sourceMappingURL=Floating.utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Floating.utils.js","sourceRoot":"","sources":["../../../src/overlays/floating/Floating.utils.ts"],"names":[],"mappings":"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"}
|
package/cjs/popover/Popover.js
CHANGED
|
@@ -43,6 +43,7 @@ const clsx_1 = __importDefault(require("clsx"));
|
|
|
43
43
|
const react_2 = __importStar(require("react"));
|
|
44
44
|
const context_1 = require("../date/context");
|
|
45
45
|
const Modal_context_1 = require("../modal/Modal.context");
|
|
46
|
+
const DismissableLayer_1 = require("../overlay/dismiss/DismissableLayer");
|
|
46
47
|
const hooks_1 = require("../util/hooks");
|
|
47
48
|
const useMergeRefs_1 = require("../util/hooks/useMergeRefs");
|
|
48
49
|
const PopoverContent_1 = __importDefault(require("./PopoverContent"));
|
|
@@ -73,11 +74,10 @@ exports.Popover = (0, react_2.forwardRef)((_a, ref) => {
|
|
|
73
74
|
const isInDatepicker = (0, react_2.useContext)(context_1.DateContext) !== null;
|
|
74
75
|
const chosenStrategy = userStrategy !== null && userStrategy !== void 0 ? userStrategy : (isInModal ? "fixed" : "absolute");
|
|
75
76
|
const chosenFlip = isInDatepicker ? false : _flip;
|
|
76
|
-
const {
|
|
77
|
+
const { update, refs, placement: flPlacement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {} }, floatingStyles, } = (0, react_1.useFloating)({
|
|
77
78
|
strategy: chosenStrategy,
|
|
78
79
|
placement,
|
|
79
80
|
open,
|
|
80
|
-
onOpenChange: () => onClose(),
|
|
81
81
|
middleware: [
|
|
82
82
|
(0, react_1.offset)(offset !== null && offset !== void 0 ? offset : (arrow ? 16 : 4)),
|
|
83
83
|
chosenFlip &&
|
|
@@ -86,10 +86,6 @@ exports.Popover = (0, react_2.forwardRef)((_a, ref) => {
|
|
|
86
86
|
(0, react_1.arrow)({ element: arrowRef, padding: 8 }),
|
|
87
87
|
],
|
|
88
88
|
});
|
|
89
|
-
const { getFloatingProps } = (0, react_1.useInteractions)([
|
|
90
|
-
(0, react_1.useClick)(context),
|
|
91
|
-
(0, react_1.useDismiss)(context),
|
|
92
|
-
]);
|
|
93
89
|
(0, hooks_1.useClientLayoutEffect)(() => {
|
|
94
90
|
refs.setReference(anchorEl);
|
|
95
91
|
}, [anchorEl]);
|
|
@@ -100,34 +96,23 @@ exports.Popover = (0, react_2.forwardRef)((_a, ref) => {
|
|
|
100
96
|
const cleanup = (0, react_1.autoUpdate)(refs.reference.current, refs.floating.current, update);
|
|
101
97
|
return () => cleanup();
|
|
102
98
|
}, [refs.floating, refs.reference, update, open, anchorEl]);
|
|
103
|
-
(0, hooks_1.useEventListener)("focusin", (0, react_2.useCallback)((e) => {
|
|
104
|
-
if (e.target instanceof HTMLElement &&
|
|
105
|
-
![anchorEl, refs.floating.current].some((element) => element === null || element === void 0 ? void 0 : element.contains(e.target)) &&
|
|
106
|
-
!e.target.contains(refs.floating.current)) {
|
|
107
|
-
open && onClose();
|
|
108
|
-
}
|
|
109
|
-
}, [anchorEl, refs, open, onClose]));
|
|
110
99
|
const staticSide = {
|
|
111
100
|
top: "bottom",
|
|
112
101
|
right: "left",
|
|
113
102
|
bottom: "top",
|
|
114
103
|
left: "right",
|
|
115
104
|
}[flPlacement.split("-")[0]];
|
|
116
|
-
return (react_2.default.createElement(
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
children,
|
|
128
|
-
arrow && (react_2.default.createElement("div", { ref: (node) => {
|
|
129
|
-
arrowRef.current = node;
|
|
130
|
-
}, style: Object.assign(Object.assign(Object.assign({}, (arrowX != null ? { left: arrowX } : {})), (arrowY != null ? { top: arrowY } : {})), (staticSide ? { [staticSide]: "-0.5rem" } : {})), className: "navds-popover__arrow" }))));
|
|
105
|
+
return (react_2.default.createElement(DismissableLayer_1.DismissableLayer, { asChild: true, safeZone: {
|
|
106
|
+
anchor: anchorEl,
|
|
107
|
+
dismissable: refs.floating.current,
|
|
108
|
+
}, onDismiss: () => open && (onClose === null || onClose === void 0 ? void 0 : onClose()), enabled: open },
|
|
109
|
+
react_2.default.createElement("div", Object.assign({ ref: floatingRef }, rest, { className: (0, clsx_1.default)("navds-popover", className, {
|
|
110
|
+
"navds-popover--hidden": !open || !anchorEl,
|
|
111
|
+
}), style: Object.assign(Object.assign({}, rest.style), floatingStyles), "data-placement": flPlacement, "aria-hidden": !open || !anchorEl }),
|
|
112
|
+
children,
|
|
113
|
+
arrow && (react_2.default.createElement("div", { ref: (node) => {
|
|
114
|
+
arrowRef.current = node;
|
|
115
|
+
}, style: Object.assign(Object.assign(Object.assign({}, (arrowX != null ? { left: arrowX } : {})), (arrowY != null ? { top: arrowY } : {})), (staticSide ? { [staticSide]: "-0.5rem" } : {})), className: "navds-popover__arrow" })))));
|
|
131
116
|
});
|
|
132
117
|
exports.Popover.Content = PopoverContent_1.default;
|
|
133
118
|
exports.default = exports.Popover;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../src/popover/Popover.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../src/popover/Popover.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8CAO4B;AAC5B,gDAAsB;AACtB,+CAA8E;AAC9E,6CAA8C;AAC9C,0DAAyD;AACzD,0EAAuE;AACvE,yCAAsD;AACtD,6DAA0D;AAC1D,sEAAsE;AAoEtE;;;;;;;;;;;;;;;;;;;GAmBG;AACU,QAAA,OAAO,GAAG,IAAA,kBAAU,EAC/B,CACE,EAYC,EACD,GAAG,EACH,EAAE;QAdF,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,IAAI,EACZ,IAAI,EACJ,OAAO,EACP,SAAS,GAAG,KAAK,EACjB,MAAM,EACN,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAE,KAAK,GAAG,IAAI,OAEnB,EADI,IAAI,cAXT,4GAYC,CADQ;IAIT,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IACrD,MAAM,SAAS,GAAG,IAAA,+BAAe,EAAC,KAAK,CAAC,KAAK,SAAS,CAAC;IACvD,MAAM,cAAc,GAAG,IAAA,kBAAU,EAAC,qBAAW,CAAC,KAAK,IAAI,CAAC;IACxD,MAAM,cAAc,GAAG,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;IAC1E,MAAM,UAAU,GAAG,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAElD,MAAM,EACJ,MAAM,EACN,IAAI,EACJ,SAAS,EAAE,WAAW,EACtB,cAAc,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EACxD,cAAc,GACf,GAAG,IAAA,mBAAW,EAAC;QACd,QAAQ,EAAE,cAAc;QACxB,SAAS;QACT,IAAI;QACJ,UAAU,EAAE;YACV,IAAA,cAAQ,EAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACpC,UAAU;gBACR,IAAA,YAAI,EAAC,EAAE,OAAO,EAAE,CAAC,EAAE,kBAAkB,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;YAC7D,IAAA,aAAK,EAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;YACtB,IAAA,aAAO,EAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;SAC3C;KACF,CAAC,CAAC;IAEH,IAAA,6BAAqB,EAAC,GAAG,EAAE;QACzB,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,WAAW,GAAG,IAAA,2BAAY,EAAC,IAAI,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;IAExD,IAAA,6BAAqB,EAAC,GAAG,EAAE;QACzB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,IAAI,CAAC,IAAI;YAAE,OAAO;QACvE,MAAM,OAAO,GAAG,IAAA,kBAAU,EACxB,IAAI,CAAC,SAAS,CAAC,OAAO,EACtB,IAAI,CAAC,QAAQ,CAAC,OAAO,EACrB,MAAM,CACP,CAAC;QACF,OAAO,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC;IACzB,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE5D,MAAM,UAAU,GAAG;QACjB,GAAG,EAAE,QAAQ;QACb,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,KAAK;QACb,IAAI,EAAE,OAAO;KACd,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAE7B,OAAO,CACL,8BAAC,mCAAgB,IACf,OAAO,QACP,QAAQ,EAAE;YACR,MAAM,EAAE,QAAQ;YAChB,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO;SACnC,EACD,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,KAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAA,EACpC,OAAO,EAAE,IAAI;QAEb,qDACE,GAAG,EAAE,WAAW,IACZ,IAAI,IACR,SAAS,EAAE,IAAA,cAAE,EAAC,eAAe,EAAE,SAAS,EAAE;gBACxC,uBAAuB,EAAE,CAAC,IAAI,IAAI,CAAC,QAAQ;aAC5C,CAAC,EACF,KAAK,kCAAO,IAAI,CAAC,KAAK,GAAK,cAAc,qBACzB,WAAW,iBACd,CAAC,IAAI,IAAI,CAAC,QAAQ;YAE9B,QAAQ;YACR,KAAK,IAAI,CACR,uCACE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;oBACZ,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;gBAC1B,CAAC,EACD,KAAK,gDACA,CAAC,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GACxC,CAAC,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GACvC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAEpD,SAAS,EAAC,sBAAsB,GAChC,CACH,CACG,CACW,CACpB,CAAC;AACJ,CAAC,CACkB,CAAC;AAEtB,eAAO,CAAC,OAAO,GAAG,wBAAc,CAAC;AAEjC,kBAAe,eAAO,CAAC"}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import React, { HTMLAttributes } from "react";
|
|
2
|
+
interface ProgressBarPropsBase extends Omit<HTMLAttributes<HTMLDivElement>, "role"> {
|
|
3
|
+
/**
|
|
4
|
+
* Changes height.
|
|
5
|
+
* @default "medium"
|
|
6
|
+
*/
|
|
7
|
+
size?: "large" | "medium" | "small";
|
|
8
|
+
/**
|
|
9
|
+
* Current progress. If set, the `simulated` prop overrides `value`.
|
|
10
|
+
*/
|
|
11
|
+
value?: number;
|
|
12
|
+
/**
|
|
13
|
+
* Maximum progress.
|
|
14
|
+
* @default 100
|
|
15
|
+
*/
|
|
16
|
+
valueMax?: number;
|
|
17
|
+
/**
|
|
18
|
+
* Visually simulates loading.
|
|
19
|
+
* ProgressBar grows with a preset animation for set number of seconds,
|
|
20
|
+
* then shows an indeterminate animation on timeout.
|
|
21
|
+
*/
|
|
22
|
+
simulated?: {
|
|
23
|
+
/**
|
|
24
|
+
* Duration in seconds.
|
|
25
|
+
*/
|
|
26
|
+
seconds: number;
|
|
27
|
+
/**
|
|
28
|
+
* Callback function when progress is indeterminate.
|
|
29
|
+
*/
|
|
30
|
+
onTimeout: () => void;
|
|
31
|
+
};
|
|
32
|
+
/**
|
|
33
|
+
* String ID of the element that labels the progress bar.
|
|
34
|
+
* Not needed if `aria-label` is used.
|
|
35
|
+
*/
|
|
36
|
+
"aria-labelledby"?: string;
|
|
37
|
+
/**
|
|
38
|
+
* String value that labels the progress bar.
|
|
39
|
+
* Not needed if `aria-labelledby` is used.
|
|
40
|
+
*/
|
|
41
|
+
"aria-label"?: string;
|
|
42
|
+
}
|
|
43
|
+
export type ProgressBarProps = ProgressBarPropsBase & ({
|
|
44
|
+
"aria-hidden": true;
|
|
45
|
+
} | {
|
|
46
|
+
"aria-labelledby": string;
|
|
47
|
+
"aria-label"?: never;
|
|
48
|
+
} | {
|
|
49
|
+
"aria-label": string;
|
|
50
|
+
"aria-labelledby"?: never;
|
|
51
|
+
});
|
|
52
|
+
/**
|
|
53
|
+
* ProgressBar
|
|
54
|
+
* A component for visualizing progression in a process.
|
|
55
|
+
*
|
|
56
|
+
* @see [📝 Documentation](https://aksel.nav.no/komponenter/core/progress-bar)
|
|
57
|
+
* @see 🏷️ {@link ProgressBarProps}
|
|
58
|
+
*
|
|
59
|
+
* @example
|
|
60
|
+
* // For loading content with an approximate duration in sec.
|
|
61
|
+
* <ProgressBar simulated={{
|
|
62
|
+
* seconds: 30,
|
|
63
|
+
* onTimeout: () => console.log("Oops, this is taking more time than expected!")
|
|
64
|
+
* }}
|
|
65
|
+
* />
|
|
66
|
+
*
|
|
67
|
+
* @example
|
|
68
|
+
* // As a step indicator for forms, questionnaires, etc.
|
|
69
|
+
* <ProgressBar value={2} valueMax={7} />
|
|
70
|
+
*/
|
|
71
|
+
export declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
|
|
72
|
+
export default ProgressBar;
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
26
|
+
var t = {};
|
|
27
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
28
|
+
t[p] = s[p];
|
|
29
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
30
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
31
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
32
|
+
t[p[i]] = s[p[i]];
|
|
33
|
+
}
|
|
34
|
+
return t;
|
|
35
|
+
};
|
|
36
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
37
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
38
|
+
};
|
|
39
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
|
+
exports.ProgressBar = void 0;
|
|
41
|
+
const clsx_1 = __importDefault(require("clsx"));
|
|
42
|
+
const react_1 = __importStar(require("react"));
|
|
43
|
+
/**
|
|
44
|
+
* ProgressBar
|
|
45
|
+
* A component for visualizing progression in a process.
|
|
46
|
+
*
|
|
47
|
+
* @see [📝 Documentation](https://aksel.nav.no/komponenter/core/progress-bar)
|
|
48
|
+
* @see 🏷️ {@link ProgressBarProps}
|
|
49
|
+
*
|
|
50
|
+
* @example
|
|
51
|
+
* // For loading content with an approximate duration in sec.
|
|
52
|
+
* <ProgressBar simulated={{
|
|
53
|
+
* seconds: 30,
|
|
54
|
+
* onTimeout: () => console.log("Oops, this is taking more time than expected!")
|
|
55
|
+
* }}
|
|
56
|
+
* />
|
|
57
|
+
*
|
|
58
|
+
* @example
|
|
59
|
+
* // As a step indicator for forms, questionnaires, etc.
|
|
60
|
+
* <ProgressBar value={2} valueMax={7} />
|
|
61
|
+
*/
|
|
62
|
+
exports.ProgressBar = (0, react_1.forwardRef)((_a, ref) => {
|
|
63
|
+
var { size = "medium", value = 0, valueMax = 100, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, className, simulated } = _a, rest = __rest(_a, ["size", "value", "valueMax", "aria-labelledby", "aria-label", "className", "simulated"]);
|
|
64
|
+
const translate = 100 - (Math.round(value) / valueMax) * 100;
|
|
65
|
+
const onTimeoutRef = (0, react_1.useRef)();
|
|
66
|
+
onTimeoutRef.current = simulated === null || simulated === void 0 ? void 0 : simulated.onTimeout;
|
|
67
|
+
react_1.default.useEffect(() => {
|
|
68
|
+
if ((simulated === null || simulated === void 0 ? void 0 : simulated.seconds) && onTimeoutRef.current) {
|
|
69
|
+
const timeout = setTimeout(onTimeoutRef.current, simulated.seconds * 1000);
|
|
70
|
+
return () => clearTimeout(timeout);
|
|
71
|
+
}
|
|
72
|
+
}, [simulated === null || simulated === void 0 ? void 0 : simulated.seconds]);
|
|
73
|
+
return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, clsx_1.default)("navds-progress-bar", `navds-progress-bar--${size}`, className), "aria-valuemax": (simulated === null || simulated === void 0 ? void 0 : simulated.seconds) ? 0 : Math.round(valueMax), "aria-valuenow": (simulated === null || simulated === void 0 ? void 0 : simulated.seconds) ? 0 : Math.round(value), "aria-valuetext": (simulated === null || simulated === void 0 ? void 0 : simulated.seconds)
|
|
74
|
+
? `Fremdrift kan ikke beregnes, antatt tid er: ${simulated === null || simulated === void 0 ? void 0 : simulated.seconds} sekunder`
|
|
75
|
+
: `${Math.round(value)} av ${Math.round(valueMax)}`, role: "progressbar", "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel }, rest),
|
|
76
|
+
react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-progress-bar__foreground", {
|
|
77
|
+
"navds-progress-bar__foreground--indeterminate": Number.isInteger(simulated === null || simulated === void 0 ? void 0 : simulated.seconds),
|
|
78
|
+
}), style: {
|
|
79
|
+
"--__ac-progress-bar-simulated": Number.isInteger(simulated === null || simulated === void 0 ? void 0 : simulated.seconds)
|
|
80
|
+
? `${simulated === null || simulated === void 0 ? void 0 : simulated.seconds}s`
|
|
81
|
+
: undefined,
|
|
82
|
+
"--__ac-progress-bar-translate": `-${translate}%`,
|
|
83
|
+
} })));
|
|
84
|
+
});
|
|
85
|
+
exports.default = exports.ProgressBar;
|
|
86
|
+
//# sourceMappingURL=ProgressBar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../src/progress-bar/ProgressBar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAAkE;AA4DlE;;;;;;;;;;;;;;;;;;GAkBG;AACU,QAAA,WAAW,GAAG,IAAA,kBAAU,EACnC,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,CAAC,EACT,QAAQ,GAAG,GAAG,EACd,iBAAiB,EAAE,cAAc,EACjC,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,SAAS,OAEV,EADI,IAAI,cART,wFASC,CADQ;IAIT,MAAM,SAAS,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,GAAG,GAAG,CAAC;IAC7D,MAAM,YAAY,GAAG,IAAA,cAAM,GAAc,CAAC;IAC1C,YAAY,CAAC,OAAO,GAAG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS,CAAC;IAE5C,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,KAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YAC/C,MAAM,OAAO,GAAG,UAAU,CACxB,YAAY,CAAC,OAAO,EACpB,SAAS,CAAC,OAAO,GAAG,IAAI,CACzB,CAAC;YACF,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACrC,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,CAAC,CAAC,CAAC;IAEzB,OAAO,CACL,qDACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAE,EACX,oBAAoB,EACpB,uBAAuB,IAAI,EAAE,EAC7B,SAAS,CACV,mBACc,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,EAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,mBAC7C,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,EAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,oBAEvD,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO;YAChB,CAAC,CAAC,+CAA+C,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,WAAW;YAC9E,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,EAEvD,IAAI,EAAC,aAAa,qBACD,cAAc,gBACnB,SAAS,IACjB,IAAI;QAER,uCACE,SAAS,EAAE,IAAA,cAAE,EAAC,gCAAgC,EAAE;gBAC9C,+CAA+C,EAAE,MAAM,CAAC,SAAS,CAC/D,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,CACnB;aACF,CAAC,EACF,KAAK,EAAE;gBACL,+BAA+B,EAAE,MAAM,CAAC,SAAS,CAC/C,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,CACnB;oBACC,CAAC,CAAC,GAAG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,GAAG;oBAC1B,CAAC,CAAC,SAAS;gBACb,+BAA+B,EAAE,IAAI,SAAS,GAAG;aAClD,GACD,CACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAe,mBAAW,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as ProgressBar, type ProgressBarProps } from "./ProgressBar";
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
5
|
+
};
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
+
exports.ProgressBar = void 0;
|
|
8
|
+
var ProgressBar_1 = require("./ProgressBar");
|
|
9
|
+
Object.defineProperty(exports, "ProgressBar", { enumerable: true, get: function () { return __importDefault(ProgressBar_1).default; } });
|
|
10
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/progress-bar/index.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;AACb,6CAA8E;AAArE,2HAAA,OAAO,OAAe"}
|
|
@@ -3,14 +3,18 @@ import { TabsProps } from "./Tabs.types";
|
|
|
3
3
|
import { useTabs } from "./useTabs";
|
|
4
4
|
export declare const TabsDescendantsProvider: import("react").Provider<import("../util/hooks/descendants/descendant").DescendantsManager<HTMLButtonElement, {
|
|
5
5
|
value: string;
|
|
6
|
-
}>>, useTabsDescendantsContext: () => import("../util/hooks/descendants/descendant").DescendantsManager<HTMLButtonElement, {
|
|
6
|
+
}>>, useTabsDescendantsContext: <S extends boolean = true>(strict?: S) => S extends true ? import("../util/hooks/descendants/descendant").DescendantsManager<HTMLButtonElement, {
|
|
7
7
|
value: string;
|
|
8
|
-
}
|
|
8
|
+
}> : import("../util/hooks/descendants/descendant").DescendantsManager<HTMLButtonElement, {
|
|
9
|
+
value: string;
|
|
10
|
+
}> | undefined, useTabsDescendants: () => import("../util/hooks/descendants/descendant").DescendantsManager<HTMLButtonElement, {
|
|
9
11
|
value: string;
|
|
10
12
|
}>, useTabsDescendant: (options?: import("../util/hooks/descendants/descendant").DescendantOptions<{
|
|
11
13
|
value: string;
|
|
12
14
|
}> | undefined) => {
|
|
13
|
-
descendants: import("../util/hooks/descendants/descendant").DescendantsManager<
|
|
15
|
+
descendants: import("../util/hooks/descendants/descendant").DescendantsManager<HTMLButtonElement, {
|
|
16
|
+
value: string;
|
|
17
|
+
}>;
|
|
14
18
|
index: number;
|
|
15
19
|
enabledIndex: number;
|
|
16
20
|
register: (instance: HTMLButtonElement | null) => void;
|
package/cjs/tabs/Tabs.context.js
CHANGED
|
@@ -10,5 +10,6 @@ _b = (0, create_context_1.createContext)({
|
|
|
10
10
|
name: "TabsContext",
|
|
11
11
|
hookName: "useTabsContext",
|
|
12
12
|
providerName: "TabsProvider",
|
|
13
|
+
errorMessage: "Tabs.List, Tabs.Tag and Tabs.Panel needs to be wrapped within <Tabs>",
|
|
13
14
|
}), exports.TabsProvider = _b[0], exports.useTabsContext = _b[1];
|
|
14
15
|
//# sourceMappingURL=Tabs.context.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.context.js","sourceRoot":"","sources":["../../src/tabs/Tabs.context.ts"],"names":[],"mappings":";;;;AAAA,2DAAuD;AACvD,2EAAkF;AAIrE,KAKT,IAAA,uCAAuB,GAAwC,EAJjE,+BAAuB,UACvB,iCAAyB,UACzB,0BAAkB,UAClB,yBAAiB,SACiD;AAQpE,mBAAmB;AACN,KAAiC,IAAA,8BAAa,EAAoB;IAC7E,IAAI,EAAE,aAAa;IACnB,QAAQ,EAAE,gBAAgB;IAC1B,YAAY,EAAE,cAAc;
|
|
1
|
+
{"version":3,"file":"Tabs.context.js","sourceRoot":"","sources":["../../src/tabs/Tabs.context.ts"],"names":[],"mappings":";;;;AAAA,2DAAuD;AACvD,2EAAkF;AAIrE,KAKT,IAAA,uCAAuB,GAAwC,EAJjE,+BAAuB,UACvB,iCAAyB,UACzB,0BAAkB,UAClB,yBAAiB,SACiD;AAQpE,mBAAmB;AACN,KAAiC,IAAA,8BAAa,EAAoB;IAC7E,IAAI,EAAE,aAAa;IACnB,QAAQ,EAAE,gBAAgB;IAC1B,YAAY,EAAE,cAAc;IAC5B,YAAY,EACV,sEAAsE;CACzE,CAAC,EANY,oBAAY,UAAE,sBAAc,SAMvC"}
|