Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Socket
Sign inDemoInstall

@lumino/widgets

Package Overview
Dependencies
Maintainers
4
Versions
77
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@lumino/widgets - npm Package Compare versions

Comparing version 1.25.0 to 1.26.0

src/accordionlayout.ts
src/accordionpanel.ts
src/utils.ts
style/accordionpanel.css
types/accordionlayout.d.ts
types/accordionlayout.d.ts.map
types/accordionpanel.d.ts
types/accordionpanel.d.ts.map
types/utils.d.ts
types/utils.d.ts.map

2

package.json
{
"name": "@lumino/widgets",
"version": "1.25.0",
"version": "1.26.0",
"description": "Lumino Widgets",

@@ -5,0 +5,0 @@ "homepage": "https://github.com/jupyterlab/lumino",

6

src/boxlayout.ts

@@ -38,2 +38,4 @@ // Copyright (c) Jupyter Development Team.

import Utils from './utils';
import {

@@ -63,3 +65,3 @@ Widget

if (options.spacing !== undefined) {
this._spacing = Private.clampSpacing(options.spacing);
this._spacing = Utils.clampDimension(options.spacing);
}

@@ -151,3 +153,3 @@ }

set spacing(value: number) {
value = Private.clampSpacing(value);
value = Utils.clampDimension(value);
if (this._spacing === value) {

@@ -154,0 +156,0 @@ return;

14

src/docklayout.ts

@@ -34,2 +34,4 @@ // Copyright (c) Jupyter Development Team.

import Utils from './utils';
import {

@@ -59,3 +61,3 @@ Widget

if (options.spacing !== undefined) {
this._spacing = Private.clampSpacing(options.spacing);
this._spacing = Utils.clampDimension(options.spacing);
}

@@ -105,3 +107,3 @@ }

set spacing(value: number) {
value = Private.clampSpacing(value);
value = Utils.clampDimension(value);
if (this._spacing === value) {

@@ -1387,10 +1389,2 @@ return;

/**
* Clamp a spacing value to an integer >= 0.
*/
export
function clampSpacing(value: number): number {
return Math.max(0, Math.floor(value));
}
/**
* Create a box sizer with an initial size hint.

@@ -1397,0 +1391,0 @@ */

2

src/index.ts

@@ -10,2 +10,4 @@ // Copyright (c) Jupyter Development Team.

|----------------------------------------------------------------------------*/
export * from './accordionlayout';
export * from './accordionpanel';
export * from './boxengine';

@@ -12,0 +14,0 @@ export * from './boxlayout';

36

src/menu.ts

@@ -223,2 +223,7 @@ // Copyright (c) Jupyter Development Team.

// Make active element in focus
if (this._activeIndex >= 0 && this.contentNode.childNodes[this._activeIndex]) {
(this.contentNode.childNodes[this._activeIndex] as HTMLElement).focus();
}
// schedule an update of the items.

@@ -545,3 +550,10 @@ this.update();

let collapsed = collapsedFlags[i];
content[i] = renderer.renderItem({ item, active, collapsed });
content[i] = renderer.renderItem({
item,
active,
collapsed,
onfocus: () => {
this.activeIndex = i;
}
});
}

@@ -1114,2 +1126,7 @@ VirtualDOM.render(content, this.contentNode);

readonly collapsed: boolean;
/**
* Handler for when element is in focus.
*/
readonly onfocus?: () => void;
}

@@ -1157,3 +1174,10 @@

return (
h.li({ className, dataset, ...aria },
h.li(
{
className,
dataset,
tabindex: '0',
onfocus: data.onfocus,
...aria
},
this.renderIcon(data),

@@ -1342,4 +1366,10 @@ this.renderLabel(data),

aria['aria-haspopup'] = 'true';
if (!data.item.isEnabled) {
aria['aria-disabled'] = 'true';
}
break;
default:
if (!data.item.isEnabled) {
aria['aria-disabled'] = 'true';
}
aria.role = 'menuitem';

@@ -1433,3 +1463,3 @@ }

content.setAttribute('role', 'menu');
node.tabIndex = -1;
node.tabIndex = 0;
return node;

@@ -1436,0 +1466,0 @@ }

18

src/menubar.ts

@@ -147,2 +147,7 @@ // Copyright (c) Jupyter Development Team.

// Update focus to new active index
if (this._activeIndex >= 0 && this.contentNode.childNodes[this._activeIndex]) {
(this.contentNode.childNodes[this._activeIndex] as HTMLElement).focus();
}
// Schedule an update of the items.

@@ -408,3 +413,9 @@ this.update();

let active = i === activeIndex;
content[i] = renderer.renderItem({ title, active });
content[i] = renderer.renderItem({
title,
active,
onfocus: () => {
this.activeIndex = i;
}
});
}

@@ -747,2 +758,4 @@ VirtualDOM.render(content, this.contentNode);

readonly active: boolean;
readonly onfocus?: (event: FocusEvent) => void;
}

@@ -790,3 +803,3 @@

return (
h.li({ className, dataset, ...aria },
h.li({ className, dataset, tabindex: '0', onfocus: data.onfocus, ...aria },
this.renderIcon(data),

@@ -957,2 +970,3 @@ this.renderLabel(data)

node.tabIndex = 0;
content.tabIndex = 0;
return node;

@@ -959,0 +973,0 @@ }

282

src/splitlayout.ts

@@ -10,34 +10,19 @@ // Copyright (c) Jupyter Development Team.

|----------------------------------------------------------------------------*/
import {
ArrayExt, each
} from '@lumino/algorithm';
import { ArrayExt, each } from '@lumino/algorithm';
import {
ElementExt
} from '@lumino/domutils';
import { ElementExt } from '@lumino/domutils';
import {
Message, MessageLoop
} from '@lumino/messaging';
import { Message, MessageLoop } from '@lumino/messaging';
import {
AttachedProperty
} from '@lumino/properties';
import { AttachedProperty } from '@lumino/properties';
import {
BoxEngine, BoxSizer
} from './boxengine';
import { BoxEngine, BoxSizer } from './boxengine';
import {
LayoutItem
} from './layout';
import { LayoutItem } from './layout';
import {
PanelLayout
} from './panellayout';
import { PanelLayout } from './panellayout';
import {
Widget
} from './widget';
import { Utils } from './utils';
import { Widget } from './widget';

@@ -47,4 +32,3 @@ /**

*/
export
class SplitLayout extends PanelLayout {
export class SplitLayout extends PanelLayout {
/**

@@ -65,3 +49,3 @@ * Construct a new split layout.

if (options.spacing !== undefined) {
this._spacing = Private.clampSpacing(options.spacing);
this._spacing = Utils.clampDimension(options.spacing);
}

@@ -75,3 +59,5 @@ }

// Dispose of the layout items.
each(this._items, item => { item.dispose(); });
each(this._items, (item) => {
item.dispose();
});

@@ -160,3 +146,3 @@ // Clear the layout state.

set spacing(value: number) {
value = Private.clampSpacing(value);
value = Utils.clampDimension(value);
if (this._spacing === value) {

@@ -191,3 +177,3 @@ return;

relativeSizes(): number[] {
return Private.normalize(this._sizers.map(sizer => sizer.size));
return Private.normalize(this._sizers.map((sizer) => sizer.size));
}

@@ -342,3 +328,7 @@

*/
protected moveWidget(fromIndex: number, toIndex: number, widget: Widget): void {
protected moveWidget(
fromIndex: number,
toIndex: number,
widget: Widget
): void {
// Move the item, sizer, and handle for the widget.

@@ -448,2 +438,50 @@ ArrayExt.move(this._items, fromIndex, toIndex);

/**
* Update the item position.
*
* @param i Item index
* @param isHorizontal Whether the layout is horizontal or not
* @param left Left position in pixels
* @param top Top position in pixels
* @param height Item height
* @param width Item width
* @param size Item size
*/
protected updateItemPosition(
i: number,
isHorizontal: boolean,
left: number,
top: number,
height: number,
width: number,
size: number
): void {
const item = this._items[i];
if (item.isHidden) {
return;
}
// Fetch the style for the handle.
let handleStyle = this._handles[i].style;
// Update the widget and handle, and advance the relevant edge.
if (isHorizontal) {
left += this.widgetOffset;
item.update(left, top, size, height);
left += size;
handleStyle.top = `${top}px`;
handleStyle.left = `${left}px`;
handleStyle.width = `${this._spacing}px`;
handleStyle.height = `${height}px`;
} else {
top += this.widgetOffset;
item.update(left, top, width, size);
top += size;
handleStyle.top = `${top}px`;
handleStyle.left = `${left}px`;
handleStyle.width = `${width}px`;
handleStyle.height = `${this._spacing}px`;
}
}
/**
* Fit the layout to the total size required by the widgets.

@@ -480,3 +518,5 @@ */

// Update the fixed space for the visible items.
this._fixed = this._spacing * Math.max(0, nVisible - 1);
this._fixed =
this._spacing * Math.max(0, nVisible - 1) +
this.widgetOffset * this._items.length;

@@ -527,3 +567,3 @@ // Setup the computed minimum size.

// Update the box sizing and add it to the computed min size.
let box = this._box = ElementExt.boxSizing(this.parent!.node);
let box = (this._box = ElementExt.boxSizing(this.parent!.node));
minW += box.horizontalSum;

@@ -569,3 +609,3 @@ minH += box.verticalSum;

// Bail early if there are no visible items to layout.
if (nVisible === 0) {
if (nVisible === 0 && this.widgetOffset === 0) {
return;

@@ -593,45 +633,49 @@ }

// Compute the adjusted layout space.
let space: number;
// Set up the variables for justification and alignment offset.
let extra = 0;
let offset = 0;
let horz = this._orientation === 'horizontal';
if (horz) {
space = Math.max(0, width - this._fixed);
} else {
space = Math.max(0, height - this._fixed);
}
// Scale the size hints if they are normalized.
if (this._hasNormedSizes) {
for (let sizer of this._sizers) {
sizer.sizeHint *= space;
if (nVisible > 0) {
// Compute the adjusted layout space.
let space: number;
if (horz) {
// left += this.widgetOffset;
space = Math.max(0, width - this._fixed);
} else {
// top += this.widgetOffset;
space = Math.max(0, height - this._fixed);
}
this._hasNormedSizes = false;
}
// Distribute the layout space to the box sizers.
let delta = BoxEngine.calc(this._sizers, space);
// Scale the size hints if they are normalized.
if (this._hasNormedSizes) {
for (let sizer of this._sizers) {
sizer.sizeHint *= space;
}
this._hasNormedSizes = false;
}
// Set up the variables for justification and alignment offset.
let extra = 0;
let offset = 0;
// Distribute the layout space to the box sizers.
let delta = BoxEngine.calc(this._sizers, space);
// Account for alignment if there is extra layout space.
if (delta > 0) {
switch (this._alignment) {
case 'start':
break;
case 'center':
extra = 0;
offset = delta / 2;
break;
case 'end':
extra = 0;
offset = delta;
break;
case 'justify':
extra = delta / nVisible;
offset = 0;
break;
default:
throw 'unreachable';
// Account for alignment if there is extra layout space.
if (delta > 0) {
switch (this._alignment) {
case 'start':
break;
case 'center':
extra = 0;
offset = delta / 2;
break;
case 'end':
extra = 0;
offset = delta;
break;
case 'justify':
extra = delta / nVisible;
offset = 0;
break;
default:
throw 'unreachable';
}
}

@@ -643,32 +687,27 @@ }

// Fetch the item.
let item = this._items[i];
const item = this._items[i];
// Ignore hidden items.
if (item.isHidden) {
continue;
}
// Fetch the computed size for the widget.
let size = this._sizers[i].size;
const size = item.isHidden ? 0 : this._sizers[i].size + extra;
// Fetch the style for the handle.
let handleStyle = this._handles[i].style;
this.updateItemPosition(
i,
horz,
horz ? left + offset : left,
horz ? top : top + offset,
height,
width,
size
);
// Update the widget and handle, and advance the relevant edge.
const fullOffset =
this.widgetOffset +
(this._handles[i].classList.contains('lm-mod-hidden')
? 0
: this._spacing);
if (horz) {
item.update(left + offset, top, size + extra, height);
left += size + extra;
handleStyle.top = `${top}px`;
handleStyle.left = `${left + offset}px`;
handleStyle.width = `${this._spacing}px`;
handleStyle.height = `${height}px`;
left += this._spacing;
left += size + fullOffset;
} else {
item.update(left, top + offset, width, size + extra);
top += size + extra;
handleStyle.top = `${top + offset}px`;
handleStyle.left = `${left}px`;
handleStyle.width = `${width}px`;
handleStyle.height = `${this._spacing}px`;
top += this._spacing;
top += size + fullOffset;
}

@@ -678,2 +717,3 @@ }

protected widgetOffset = 0;
private _fixed = 0;

@@ -691,13 +731,10 @@ private _spacing = 4;

/**
* The namespace for the `SplitLayout` class statics.
*/
export
namespace SplitLayout {
export namespace SplitLayout {
/**
* A type alias for a split layout orientation.
*/
export
type Orientation = 'horizontal' | 'vertical';
export type Orientation = 'horizontal' | 'vertical';

@@ -707,4 +744,3 @@ /**

*/
export
type Alignment = 'start' | 'center' | 'end' | 'justify';
export type Alignment = 'start' | 'center' | 'end' | 'justify';

@@ -714,4 +750,3 @@ /**

*/
export
interface IOptions {
export interface IOptions {
/**

@@ -747,4 +782,3 @@ * The renderer to use for the split layout.

*/
export
interface IRenderer {
export interface IRenderer {
/**

@@ -765,4 +799,3 @@ * Create a new handle for use with a split layout.

*/
export
function getStretch(widget: Widget): number {
export function getStretch(widget: Widget): number {
return Private.stretchProperty.get(widget);

@@ -778,4 +811,3 @@ }

*/
export
function setStretch(widget: Widget, value: number): void {
export function setStretch(widget: Widget, value: number): void {
Private.stretchProperty.set(widget, value);

@@ -785,3 +817,2 @@ }

/**

@@ -794,8 +825,7 @@ * The namespace for the module implementation details.

*/
export
const stretchProperty = new AttachedProperty<Widget, number>({
export const stretchProperty = new AttachedProperty<Widget, number>({
name: 'stretch',
create: () => 0,
coerce: (owner, value) => Math.max(0, Math.floor(value)),
changed: onChildSizingChanged
changed: onChildSizingChanged,
});

@@ -806,4 +836,3 @@

*/
export
function createSizer(size: number): BoxSizer {
export function createSizer(size: number): BoxSizer {
let sizer = new BoxSizer();

@@ -817,4 +846,5 @@ sizer.sizeHint = Math.floor(size);

*/
export
function createHandle(renderer: SplitLayout.IRenderer): HTMLDivElement {
export function createHandle(
renderer: SplitLayout.IRenderer
): HTMLDivElement {
let handle = renderer.createHandle();

@@ -826,14 +856,5 @@ handle.style.position = 'absolute';

/**
* Clamp a spacing value to an integer >= 0.
*/
export
function clampSpacing(value: number): number {
return Math.max(0, Math.floor(value));
}
/**
* Compute the average size of an array of box sizers.
*/
export
function averageSize(sizers: BoxSizer[]): number {
export function averageSize(sizers: BoxSizer[]): number {
return sizers.reduce((v, s) => v + s.size, 0) / sizers.length || 0;

@@ -845,4 +866,3 @@ }

*/
export
function normalize(values: number[]): number[] {
export function normalize(values: number[]): number[] {
let n = values.length;

@@ -853,3 +873,3 @@ if (n === 0) {

let sum = values.reduce((a, b) => a + Math.abs(b), 0);
return sum === 0 ? values.map(v => 1 / n) : values.map(v => v / sum);
return sum === 0 ? values.map((v) => 1 / n) : values.map((v) => v / sum);
}

@@ -856,0 +876,0 @@

122

src/splitpanel.ts

@@ -10,31 +10,16 @@ // Copyright (c) Jupyter Development Team.

|----------------------------------------------------------------------------*/
import {
ArrayExt
} from '@lumino/algorithm';
import { ArrayExt } from '@lumino/algorithm';
import {
IDisposable
} from '@lumino/disposable';
import { IDisposable } from '@lumino/disposable';
import {
Drag
} from '@lumino/dragdrop';
import { Drag } from '@lumino/dragdrop';
import {
Message
} from '@lumino/messaging';
import { Message } from '@lumino/messaging';
import {
Panel
} from './panel';
import { Panel } from './panel';
import {
SplitLayout
} from './splitlayout';
import { SplitLayout } from './splitlayout';
import {
Widget
} from './widget';
import { Widget } from './widget';
/**

@@ -46,4 +31,3 @@ * A panel which arranges its widgets into resizable sections.

*/
export
class SplitPanel extends Panel {
export class SplitPanel extends Panel {
/**

@@ -179,18 +163,18 @@ * Construct a new split panel.

switch (event.type) {
case 'mousedown':
this._evtMouseDown(event as MouseEvent);
break;
case 'mousemove':
this._evtMouseMove(event as MouseEvent);
break;
case 'mouseup':
this._evtMouseUp(event as MouseEvent);
break;
case 'keydown':
this._evtKeyDown(event as KeyboardEvent);
break;
case 'contextmenu':
event.preventDefault();
event.stopPropagation();
break;
case 'mousedown':
this._evtMouseDown(event as MouseEvent);
break;
case 'mousemove':
this._evtMouseMove(event as MouseEvent);
break;
case 'mouseup':
this._evtMouseUp(event as MouseEvent);
break;
case 'keydown':
this._evtKeyDown(event as KeyboardEvent);
break;
case 'contextmenu':
event.preventDefault();
event.stopPropagation();
break;
}

@@ -241,4 +225,6 @@ }

// Stop input events during drag.
event.preventDefault();
event.stopPropagation();
if (this._pressData) {
event.preventDefault();
event.stopPropagation();
}

@@ -262,3 +248,3 @@ // Release the mouse if `Escape` is pressed.

let layout = this.layout as SplitLayout;
let index = ArrayExt.findFirstIndex(layout.handles, handle => {
let index = ArrayExt.findFirstIndex(layout.handles, (handle) => {
return handle.contains(event.target as HTMLElement);

@@ -360,13 +346,10 @@ });

/**
* The namespace for the `SplitPanel` class statics.
*/
export
namespace SplitPanel {
export namespace SplitPanel {
/**
* A type alias for a split panel orientation.
*/
export
type Orientation = SplitLayout.Orientation;
export type Orientation = SplitLayout.Orientation;

@@ -376,4 +359,3 @@ /**

*/
export
type Alignment = SplitLayout.Alignment;
export type Alignment = SplitLayout.Alignment;

@@ -383,4 +365,3 @@ /**

*/
export
type IRenderer = SplitLayout.IRenderer;
export type IRenderer = SplitLayout.IRenderer;

@@ -390,4 +371,3 @@ /**

*/
export
interface IOptions {
export interface IOptions {
/**

@@ -434,4 +414,3 @@ * The renderer to use for the split panel.

*/
export
class Renderer implements IRenderer {
export class Renderer implements IRenderer {
/**

@@ -455,4 +434,3 @@ * Create a new handle for use with a split panel.

*/
export
const defaultRenderer = new Renderer();
export const defaultRenderer = new Renderer();

@@ -466,4 +444,3 @@ /**

*/
export
function getStretch(widget: Widget): number {
export function getStretch(widget: Widget): number {
return SplitLayout.getStretch(widget);

@@ -479,4 +456,3 @@ }

*/
export
function setStretch(widget: Widget, value: number): void {
export function setStretch(widget: Widget, value: number): void {
SplitLayout.setStretch(widget, value);

@@ -486,3 +462,2 @@ }

/**

@@ -495,4 +470,3 @@ * The namespace for the module implementation details.

*/
export
interface IPressData {
export interface IPressData {
/**

@@ -517,11 +491,13 @@ * The index of the pressed handle.

*/
export
function createLayout(options: SplitPanel.IOptions): SplitLayout {
return options.layout || new SplitLayout({
renderer: options.renderer || SplitPanel.defaultRenderer,
orientation: options.orientation,
alignment: options.alignment,
spacing: options.spacing
});
export function createLayout(options: SplitPanel.IOptions): SplitLayout {
return (
options.layout ||
new SplitLayout({
renderer: options.renderer || SplitPanel.defaultRenderer,
orientation: options.orientation,
alignment: options.alignment,
spacing: options.spacing,
})
);
}
}

2

types/index.d.ts

@@ -0,1 +1,3 @@

export * from './accordionlayout';
export * from './accordionpanel';
export * from './boxengine';

@@ -2,0 +4,0 @@ export * from './boxlayout';

4

types/menu.d.ts

@@ -474,2 +474,6 @@ import { CommandRegistry } from '@lumino/commands';

readonly collapsed: boolean;
/**
* Handler for when element is in focus.
*/
readonly onfocus?: () => void;
}

@@ -476,0 +480,0 @@ /**

1

types/menubar.d.ts

@@ -228,2 +228,3 @@ import { Message } from '@lumino/messaging';

readonly active: boolean;
readonly onfocus?: (event: FocusEvent) => void;
}

@@ -230,0 +231,0 @@ /**

13

types/splitlayout.d.ts

@@ -164,2 +164,14 @@ import { Message } from '@lumino/messaging';

/**
* Update the item position.
*
* @param i Item index
* @param isHorizontal Whether the layout is horizontal or not
* @param left Left position in pixels
* @param top Top position in pixels
* @param height Item height
* @param width Item width
* @param size Item size
*/
protected updateItemPosition(i: number, isHorizontal: boolean, left: number, top: number, height: number, width: number, size: number): void;
/**
* Fit the layout to the total size required by the widgets.

@@ -174,2 +186,3 @@ */

private _update;
protected widgetOffset: number;
private _fixed;

@@ -176,0 +189,0 @@ private _spacing;

dist/index.es6.js

Sorry, the diff of this file is too big to display

dist/index.es6.js.map

Sorry, the diff of this file is not supported yet

dist/index.js

Sorry, the diff of this file is too big to display

dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/index.min.js

Sorry, the diff of this file is too big to display

dist/index.min.js.map

Sorry, the diff of this file is not supported yet

style/index.css

Sorry, the diff of this file is not supported yet

types/boxlayout.d.ts.map

Sorry, the diff of this file is not supported yet

types/docklayout.d.ts.map

Sorry, the diff of this file is not supported yet

types/index.d.ts.map

Sorry, the diff of this file is not supported yet

types/menu.d.ts.map

Sorry, the diff of this file is not supported yet

types/menubar.d.ts.map

Sorry, the diff of this file is not supported yet

types/splitlayout.d.ts.map

Sorry, the diff of this file is not supported yet

types/splitpanel.d.ts.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc