@ni/nimble-components 30.2.0 → 30.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/all-components-bundle.js +117 -43
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +4398 -4395
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/theme-provider/design-token-comments.js +15 -1
- package/dist/esm/theme-provider/design-token-comments.js.map +1 -1
- package/dist/esm/theme-provider/design-token-names.js +15 -1
- package/dist/esm/theme-provider/design-token-names.js.map +1 -1
- package/dist/esm/theme-provider/design-tokens.d.ts +14 -0
- package/dist/esm/theme-provider/design-tokens.js +15 -1
- package/dist/esm/theme-provider/design-tokens.js.map +1 -1
- package/dist/tokens-internal.scss +84 -0
- package/dist/tokens.scss +42 -0
- package/package.json +2 -2
|
@@ -16032,7 +16032,7 @@
|
|
|
16032
16032
|
|
|
16033
16033
|
/**
|
|
16034
16034
|
* Do not edit directly
|
|
16035
|
-
* Generated on
|
|
16035
|
+
* Generated on Thu, 01 Aug 2024 08:35:14 GMT
|
|
16036
16036
|
*/
|
|
16037
16037
|
|
|
16038
16038
|
const Information100DarkUi = "#a46eff";
|
|
@@ -16053,12 +16053,16 @@
|
|
|
16053
16053
|
const Black91 = "#161617";
|
|
16054
16054
|
const ForestGreen = "#074023";
|
|
16055
16055
|
const DigitalGreenLight = "#009b65";
|
|
16056
|
+
const DigitalGreenLight10 = "#e6f5f0";
|
|
16056
16057
|
const NiSky = "#3cb4e7";
|
|
16057
16058
|
const BannerFail100DarkUi = "#d63434";
|
|
16058
16059
|
const Warning100LightUi = "#ff4b00";
|
|
16059
16060
|
const DigitalGreenDark = "#008557";
|
|
16060
16061
|
const DigitalGreenDark105 = "#00734b";
|
|
16062
|
+
const DigitalGreenDark110 = "#00613f";
|
|
16061
16063
|
const PowerGreen = "#32eb96";
|
|
16064
|
+
const PowerGreen10 = "#364941";
|
|
16065
|
+
const Black82 = "#434445";
|
|
16062
16066
|
const NiHoneyLight = "#ffe76b";
|
|
16063
16067
|
const NiScarlet = "#ef463f";
|
|
16064
16068
|
const NiFern = "#76bc43";
|
|
@@ -16412,7 +16416,21 @@
|
|
|
16412
16416
|
mentionFontFamily: 'mention-font-family',
|
|
16413
16417
|
mentionFontSize: 'mention-font-size',
|
|
16414
16418
|
mentionFontWeight: 'mention-font-weight',
|
|
16415
|
-
mentionFontLineHeight: 'mention-font-line-height'
|
|
16419
|
+
mentionFontLineHeight: 'mention-font-line-height',
|
|
16420
|
+
calendarEventBackgroundStaticColor: 'calendar-event-background-static-color',
|
|
16421
|
+
calendarEventBackgroundDynamicColor: 'calendar-event-background-dynamic-color',
|
|
16422
|
+
calendarEventBackgroundTransientColor: 'calendar-event-background-transient-color',
|
|
16423
|
+
calendarEventBorderStaticColor: 'calendar-event-border-static-color',
|
|
16424
|
+
calendarEventBorderTransientColor: 'calendar-event-border-transient-color',
|
|
16425
|
+
calendarEventStaticFontColor: 'calendar-event-static-font-color',
|
|
16426
|
+
calendarEventDynamicFontColor: 'calendar-event-dynamic-font-color',
|
|
16427
|
+
calendarEventTransientFontColor: 'calendar-event-transient-font-color',
|
|
16428
|
+
calendarEventBackgroundHoverStaticColor: 'calendar-event-background-hover-static-color',
|
|
16429
|
+
calendarEventBackgroundHoverDynamicColor: 'calendar-event-background-hover-dynamic-color',
|
|
16430
|
+
calendarEventBackgroundHoverTransientColor: 'calendar-event-background-hover-transient-color',
|
|
16431
|
+
calendarRowBackgroundSelectedColor: 'calendar-row-background-selected-color',
|
|
16432
|
+
calendarEventFillBlockedColor: 'calendar-event-fill-blocked-color',
|
|
16433
|
+
calendarGrabHandleBackgroundColor: 'calendar-grab-handle-background-color'
|
|
16416
16434
|
};
|
|
16417
16435
|
const prefix = 'ni-nimble';
|
|
16418
16436
|
const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
|
|
@@ -16661,6 +16679,20 @@
|
|
|
16661
16679
|
const buttonAccentBlockFontColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonAccentBlockFontColor)).withDefault((element) => getColorForTheme(element, White, Black15, White));
|
|
16662
16680
|
const buttonAccentOutlineFontColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonAccentOutlineFontColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark105, PowerGreen, White));
|
|
16663
16681
|
const buttonBorderAccentOutlineColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonBorderAccentOutlineColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, PowerGreen, hexToRgbaCssColor(White, 0.3)));
|
|
16682
|
+
DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundStaticColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight10, PowerGreen10, PowerGreen10));
|
|
16683
|
+
DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundDynamicColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark105, DigitalGreenDark, DigitalGreenDark));
|
|
16684
|
+
DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundTransientColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark105, DigitalGreenDark, DigitalGreenDark));
|
|
16685
|
+
DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBorderStaticColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, DigitalGreenLight));
|
|
16686
|
+
DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBorderTransientColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, hexToRgbaCssColor(PowerGreen, 0.85), hexToRgbaCssColor(PowerGreen, 0.85)));
|
|
16687
|
+
DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventStaticFontColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark110, White, White));
|
|
16688
|
+
DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventDynamicFontColor)).withDefault((element) => getColorForTheme(element, White, White, White));
|
|
16689
|
+
DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventTransientFontColor)).withDefault((element) => getColorForTheme(element, White, White, White));
|
|
16690
|
+
DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundHoverStaticColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(DigitalGreenLight, 0.3), hexToRgbaCssColor(PowerGreen, 0.3), hexToRgbaCssColor(PowerGreen, 0.3)));
|
|
16691
|
+
DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundHoverDynamicColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark110, DigitalGreenDark105, DigitalGreenDark105));
|
|
16692
|
+
DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundHoverTransientColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark110, DigitalGreenDark105, DigitalGreenDark105));
|
|
16693
|
+
DesignToken.create(styleNameFromTokenName(tokenNames.calendarRowBackgroundSelectedColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(DigitalGreenLight, 0.2), hexToRgbaCssColor(PowerGreen, 0.2), hexToRgbaCssColor(PowerGreen, 0.2)));
|
|
16694
|
+
DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventFillBlockedColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(Black91, 0.07), Black82, Black82));
|
|
16695
|
+
DesignToken.create(styleNameFromTokenName(tokenNames.calendarGrabHandleBackgroundColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, DigitalGreenLight));
|
|
16664
16696
|
// Component Sizing Tokens
|
|
16665
16697
|
const controlHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlHeight)).withDefault('32px');
|
|
16666
16698
|
const controlSlimHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlSlimHeight)).withDefault('24px');
|
|
@@ -40605,7 +40637,7 @@ so this becomes the fallback color for the slot */ ''}
|
|
|
40605
40637
|
}))
|
|
40606
40638
|
|| node.textContent
|
|
40607
40639
|
|| '%leaf%';
|
|
40608
|
-
textBefore += node.isAtom ? chunk : chunk.slice(0, Math.max(0, sliceEndPos - pos));
|
|
40640
|
+
textBefore += node.isAtom && !node.isText ? chunk : chunk.slice(0, Math.max(0, sliceEndPos - pos));
|
|
40609
40641
|
});
|
|
40610
40642
|
return textBefore;
|
|
40611
40643
|
};
|
|
@@ -41805,12 +41837,12 @@ so this becomes the fallback color for the slot */ ''}
|
|
|
41805
41837
|
}
|
|
41806
41838
|
}
|
|
41807
41839
|
if (isTextContent) {
|
|
41808
|
-
|
|
41809
|
-
let hasInvalidContent = false;
|
|
41810
|
-
let invalidContent = '';
|
|
41811
|
-
// Only ever check for invalid content if we're supposed to throw an error
|
|
41840
|
+
// Check for invalid content
|
|
41812
41841
|
if (options.errorOnInvalidContent) {
|
|
41813
|
-
|
|
41842
|
+
let hasInvalidContent = false;
|
|
41843
|
+
let invalidContent = '';
|
|
41844
|
+
// A copy of the current schema with a catch-all node at the end
|
|
41845
|
+
const contentCheckSchema = new Schema$2({
|
|
41814
41846
|
topNode: schema.spec.topNode,
|
|
41815
41847
|
marks: schema.spec.marks,
|
|
41816
41848
|
// Prosemirror's schemas are executed such that: the last to execute, matches last
|
|
@@ -41834,15 +41866,21 @@ so this becomes the fallback color for the slot */ ''}
|
|
|
41834
41866
|
},
|
|
41835
41867
|
}),
|
|
41836
41868
|
});
|
|
41869
|
+
if (options.slice) {
|
|
41870
|
+
DOMParser.fromSchema(contentCheckSchema).parseSlice(elementFromString(content), options.parseOptions);
|
|
41871
|
+
}
|
|
41872
|
+
else {
|
|
41873
|
+
DOMParser.fromSchema(contentCheckSchema).parse(elementFromString(content), options.parseOptions);
|
|
41874
|
+
}
|
|
41875
|
+
if (options.errorOnInvalidContent && hasInvalidContent) {
|
|
41876
|
+
throw new Error('[tiptap error]: Invalid HTML content', { cause: new Error(`Invalid element found: ${invalidContent}`) });
|
|
41877
|
+
}
|
|
41837
41878
|
}
|
|
41838
|
-
const parser = DOMParser.fromSchema(
|
|
41839
|
-
|
|
41840
|
-
|
|
41841
|
-
: parser.parse(elementFromString(content), options.parseOptions);
|
|
41842
|
-
if (options.errorOnInvalidContent && hasInvalidContent) {
|
|
41843
|
-
throw new Error('[tiptap error]: Invalid HTML content', { cause: new Error(`Invalid element found: ${invalidContent}`) });
|
|
41879
|
+
const parser = DOMParser.fromSchema(schema);
|
|
41880
|
+
if (options.slice) {
|
|
41881
|
+
return parser.parseSlice(elementFromString(content), options.parseOptions).content;
|
|
41844
41882
|
}
|
|
41845
|
-
return
|
|
41883
|
+
return parser.parse(elementFromString(content), options.parseOptions);
|
|
41846
41884
|
}
|
|
41847
41885
|
return createNodeFromContent('', schema, options);
|
|
41848
41886
|
}
|
|
@@ -41891,6 +41929,13 @@ so this becomes the fallback color for the slot */ ''}
|
|
|
41891
41929
|
});
|
|
41892
41930
|
}
|
|
41893
41931
|
catch (e) {
|
|
41932
|
+
editor.emit('contentError', {
|
|
41933
|
+
editor,
|
|
41934
|
+
error: e,
|
|
41935
|
+
disableCollaboration: () => {
|
|
41936
|
+
console.error('[tiptap error]: Unable to disable collaboration at this point in time');
|
|
41937
|
+
},
|
|
41938
|
+
});
|
|
41894
41939
|
return false;
|
|
41895
41940
|
}
|
|
41896
41941
|
let { from, to } = typeof position === 'number' ? { from: position, to: position } : { from: position.from, to: position.to };
|
|
@@ -42683,12 +42728,34 @@ so this becomes the fallback color for the slot */ ''}
|
|
|
42683
42728
|
return group.split(' ').includes('list');
|
|
42684
42729
|
}
|
|
42685
42730
|
|
|
42686
|
-
|
|
42687
|
-
|
|
42688
|
-
|
|
42731
|
+
/**
|
|
42732
|
+
* Returns true if the given node is empty.
|
|
42733
|
+
* When `checkChildren` is true (default), it will also check if all children are empty.
|
|
42734
|
+
*/
|
|
42735
|
+
function isNodeEmpty(node, { checkChildren } = { checkChildren: true }) {
|
|
42736
|
+
if (node.isText) {
|
|
42737
|
+
return !node.text;
|
|
42738
|
+
}
|
|
42739
|
+
if (node.content.childCount === 0) {
|
|
42740
|
+
return true;
|
|
42741
|
+
}
|
|
42742
|
+
if (node.isLeaf) {
|
|
42689
42743
|
return false;
|
|
42690
42744
|
}
|
|
42691
|
-
|
|
42745
|
+
if (checkChildren) {
|
|
42746
|
+
let hasSameContent = true;
|
|
42747
|
+
node.content.forEach(childNode => {
|
|
42748
|
+
if (hasSameContent === false) {
|
|
42749
|
+
// Exit early for perf
|
|
42750
|
+
return;
|
|
42751
|
+
}
|
|
42752
|
+
if (!isNodeEmpty(childNode)) {
|
|
42753
|
+
hasSameContent = false;
|
|
42754
|
+
}
|
|
42755
|
+
});
|
|
42756
|
+
return hasSameContent;
|
|
42757
|
+
}
|
|
42758
|
+
return false;
|
|
42692
42759
|
}
|
|
42693
42760
|
|
|
42694
42761
|
function canSetMark(state, tr, newMarkType) {
|
|
@@ -42851,15 +42918,24 @@ so this becomes the fallback color for the slot */ ''}
|
|
|
42851
42918
|
if (!$from.parent.isBlock) {
|
|
42852
42919
|
return false;
|
|
42853
42920
|
}
|
|
42854
|
-
|
|
42855
|
-
|
|
42856
|
-
|
|
42857
|
-
|
|
42858
|
-
|
|
42859
|
-
|
|
42860
|
-
|
|
42861
|
-
|
|
42862
|
-
|
|
42921
|
+
const atEnd = $to.parentOffset === $to.parent.content.size;
|
|
42922
|
+
const deflt = $from.depth === 0
|
|
42923
|
+
? undefined
|
|
42924
|
+
: defaultBlockAt($from.node(-1).contentMatchAt($from.indexAfter(-1)));
|
|
42925
|
+
let types = atEnd && deflt
|
|
42926
|
+
? [
|
|
42927
|
+
{
|
|
42928
|
+
type: deflt,
|
|
42929
|
+
attrs: newAttributes,
|
|
42930
|
+
},
|
|
42931
|
+
]
|
|
42932
|
+
: undefined;
|
|
42933
|
+
let can = canSplit(tr.doc, tr.mapping.map($from.pos), 1, types);
|
|
42934
|
+
if (!types
|
|
42935
|
+
&& !can
|
|
42936
|
+
&& canSplit(tr.doc, tr.mapping.map($from.pos), 1, deflt ? [{ type: deflt }] : undefined)) {
|
|
42937
|
+
can = true;
|
|
42938
|
+
types = deflt
|
|
42863
42939
|
? [
|
|
42864
42940
|
{
|
|
42865
42941
|
type: deflt,
|
|
@@ -42867,21 +42943,12 @@ so this becomes the fallback color for the slot */ ''}
|
|
|
42867
42943
|
},
|
|
42868
42944
|
]
|
|
42869
42945
|
: undefined;
|
|
42870
|
-
|
|
42871
|
-
|
|
42872
|
-
&& !can
|
|
42873
|
-
&& canSplit(tr.doc, tr.mapping.map($from.pos), 1, deflt ? [{ type: deflt }] : undefined)) {
|
|
42874
|
-
can = true;
|
|
42875
|
-
types = deflt
|
|
42876
|
-
? [
|
|
42877
|
-
{
|
|
42878
|
-
type: deflt,
|
|
42879
|
-
attrs: newAttributes,
|
|
42880
|
-
},
|
|
42881
|
-
]
|
|
42882
|
-
: undefined;
|
|
42883
|
-
}
|
|
42946
|
+
}
|
|
42947
|
+
if (dispatch) {
|
|
42884
42948
|
if (can) {
|
|
42949
|
+
if (selection instanceof TextSelection) {
|
|
42950
|
+
tr.deleteSelection();
|
|
42951
|
+
}
|
|
42885
42952
|
tr.split(tr.mapping.map($from.pos), 1, types);
|
|
42886
42953
|
if (deflt && !atEnd && !$from.parentOffset && $from.parent.type !== deflt) {
|
|
42887
42954
|
const first = tr.mapping.map($from.before());
|
|
@@ -42896,7 +42963,7 @@ so this becomes the fallback color for the slot */ ''}
|
|
|
42896
42963
|
}
|
|
42897
42964
|
tr.scrollIntoView();
|
|
42898
42965
|
}
|
|
42899
|
-
return
|
|
42966
|
+
return can;
|
|
42900
42967
|
};
|
|
42901
42968
|
|
|
42902
42969
|
const splitListItem = typeOrName => ({ tr, state, dispatch, editor, }) => {
|
|
@@ -43985,6 +44052,7 @@ img.ProseMirror-separator {
|
|
|
43985
44052
|
this.prependClass();
|
|
43986
44053
|
// Let’s store the editor instance in the DOM element.
|
|
43987
44054
|
// So we’ll have access to it for tests.
|
|
44055
|
+
// @ts-ignore
|
|
43988
44056
|
const dom = this.view.dom;
|
|
43989
44057
|
dom.editor = this;
|
|
43990
44058
|
}
|
|
@@ -43992,6 +44060,9 @@ img.ProseMirror-separator {
|
|
|
43992
44060
|
* Creates all node views.
|
|
43993
44061
|
*/
|
|
43994
44062
|
createNodeViews() {
|
|
44063
|
+
if (this.view.isDestroyed) {
|
|
44064
|
+
return;
|
|
44065
|
+
}
|
|
43995
44066
|
this.view.setProps({
|
|
43996
44067
|
nodeViews: this.extensionManager.nodeViews,
|
|
43997
44068
|
});
|
|
@@ -58010,6 +58081,9 @@ img.ProseMirror-separator {
|
|
|
58010
58081
|
if (event.button !== 0) {
|
|
58011
58082
|
return false;
|
|
58012
58083
|
}
|
|
58084
|
+
if (!view.editable) {
|
|
58085
|
+
return false;
|
|
58086
|
+
}
|
|
58013
58087
|
let a = event.target;
|
|
58014
58088
|
const els = [];
|
|
58015
58089
|
while (a.nodeName !== 'DIV') {
|