Socket
Socket
Sign inDemoInstall

@react-types/shared

Package Overview
Dependencies
Maintainers
1
Versions
776
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-types/shared - npm Package Compare versions

Comparing version 3.0.0-rc.2 to 3.0.0-rc.3

4

package.json
{
"name": "@react-types/shared",
"version": "3.0.0-rc.2",
"version": "3.0.0-rc.3",
"description": "Spectrum UI components in React",

@@ -17,3 +17,3 @@ "license": "Apache-2.0",

},
"gitHead": "207e6ee9076905c96638a7f81a367758872e1410"
"gitHead": "461d6321126ae9b4f1508aa912f7b36bf8a603f8"
}

159

src/collections.d.ts

@@ -16,9 +16,14 @@ /*

export interface ItemProps<T> {
/** Rendered contents of the item or child items. */
children: ReactNode,
/** Rendered contents of the item if `children` contains child items. */
title?: ReactNode, // label?? contents?
/** A string representation of the item's contents, used for features like typeahead. */
textValue?: string,
/** An accessibility label for this item. */
'aria-label'?: string,
/** A list of child item objects. Used for dynamic collections. */
childItems?: Iterable<T>,
/** Whether this item has children, even if not loaded yet. */
hasChildItems?: boolean,
children: ReactNode, // CellRenderer??
textValue?: string,
'aria-label'?: string,
uniqueKey?: Key
}

@@ -29,14 +34,18 @@

interface AsyncLoadable<T> {
items?: Iterable<T>,
itemKey?: string,
export interface AsyncLoadable {
/** Whether the items are currently loading. */
isLoading?: boolean, // possibly isLoadingMore
/** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */
onLoadMore?: () => any
}
export interface SectionProps<T> extends AsyncLoadable<T> {
export interface SectionProps<T> {
/** Rendered contents of the section, e.g. a header. */
title?: ReactNode,
/** An accessibility label for the section. */
'aria-label'?: string,
/** Static child items or a function to render children. */
children: ItemElement<T> | ItemElement<T>[] | ItemRenderer<T>,
uniqueKey?: Key
/** Item objects in the section. */
items?: Iterable<T>
}

@@ -46,10 +55,10 @@

export interface CellProps {
children: ReactNode
}
export type CollectionElement<T> = SectionElement<T> | ItemElement<T>;
export type CollectionChildren<T> = CollectionElement<T> | CollectionElement<T>[] | ((item: T) => CollectionElement<T>);
export interface CollectionBase<T> extends AsyncLoadable<T> {
export interface CollectionBase<T> {
/** The contents of the collection. */
children: CollectionChildren<T>,
/** Item objects in the collection. */
items?: Iterable<T>,
/** The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. */
disabledKeys?: Iterable<Key>

@@ -59,4 +68,9 @@ }

export interface SingleSelection {
/** Whether the collection allows empty selection. */
disallowEmptySelection?: boolean,
/** The currently selected key in the collection (controlled). */
selectedKey?: Key,
/** The initial selected key in the collection (uncontrolled). */
defaultSelectedKey?: Key,
/** Handler that is called when the selection changes. */
onSelectionChange?: (key: Key) => any

@@ -66,12 +80,22 @@ }

export type SelectionMode = 'none' | 'single' | 'multiple';
export type Selection = 'all' | Set<Key>;
export interface MultipleSelection {
/** The type of selection that is allowed in the collection. */
selectionMode?: SelectionMode,
selectedKeys?: Iterable<Key>,
defaultSelectedKeys?: Iterable<Key>,
onSelectionChange?: (keys: Set<Key>) => any
/** Whether the collection allows empty selection. */
disallowEmptySelection?: boolean,
/** The currently selected keys in the collection (controlled). */
selectedKeys?: 'all' | Iterable<Key>,
/** The initial selected keys in the collection (uncontrolled). */
defaultSelectedKeys?: 'all' | Iterable<Key>,
/** Handler that is called when the selection changes. */
onSelectionChange?: (keys: Selection) => any
}
export interface Expandable {
/** The currently expanded keys in the collection (controlled). */
expandedKeys?: Iterable<Key>,
/** The initial expanded keys in the collection (uncontrolled). */
defaultExpandedKeys?: Iterable<Key>,
/** Handler that is called when items are expanded or collapsed. */
onExpandedChange?: (keys: Set<Key>) => any

@@ -81,4 +105,5 @@ }

export interface Sortable {
/** The current sorted column and direction. */
sortDescriptor?: SortDescriptor,
defaultSortDescriptor?: SortDescriptor,
/** Handler that is called when the sorted column or direction changes. */
onSortChange?: (descriptor: SortDescriptor) => any

@@ -88,10 +113,9 @@ }

export interface SortDescriptor {
column?: string,
/** The key of the column to sort by. */
column?: Key,
/** The direction to sort by. */
direction?: SortDirection
}
export enum SortDirection {
ASC,
DESC
}
export type SortDirection = 'ascending' | 'descending';

@@ -116,8 +140,8 @@ export interface KeyboardDelegate {

getKeyPageAbove?(key: Key): Key,
/** Returns the first key, or `null` for none. */
getFirstKey?(): Key,
getFirstKey?(key?: Key, global?: boolean): Key,
/** Returns the last key, or `null` for none. */
getLastKey?(): Key,
getLastKey?(key?: Key, global?: boolean): Key,

@@ -128,31 +152,62 @@ /** Returns the next key after `fromKey` that matches the given search string, or `null` for none. */

interface AsyncListOptions<T> {
load: (state: ListState<T>) => Promise<ListState<T>>,
loadMore?: (state: ListState<T>) => Promise<ListState<T>>,
defaultSortDescriptor?: SortDescriptor,
sort?: (state: ListState<T>) => Promise<ListState<T>>
}
/**
* A generic interface to access a readonly sequential
* collection of unique keyed items.
*/
export interface Collection<T> extends Iterable<T> {
/** The number of items in the collection. */
readonly size: number;
interface ListState<T> {
items: Iterable<T>,
disabledKeys?: Iterable<Key>,
selectedKeys?: Iterable<Key>,
selectedKey?: Key,
expandedKeys?: Iterable<Key>,
sortDescriptor?: SortDescriptor
/** Iterate over all keys in the collection. */
getKeys(): Iterable<Key>,
/** Get an item by its key. */
getItem(key: Key): T,
/** Get the key that comes before the given key in the collection. */
getKeyBefore(key: Key): Key | null,
/** Get the key that comes after the given key in the collection. */
getKeyAfter(key: Key): Key | null,
/** Get the first key in the collection. */
getFirstKey(): Key | null,
/** Get the last key in the collection. */
getLastKey(): Key | null
}
interface AsyncListProps<T> {
items: Iterable<T>,
isLoading: boolean,
error?: Error,
onLoadMore?: () => void,
sortDescriptor?: SortDescriptor,
onSortChange?: (desc: SortDescriptor) => void,
disabledKeys?: Iterable<Key>,
selectedKeys?: Iterable<Key>,
selectedKey?: Key,
expandedKeys?: Iterable<Key>
export interface Node<T> {
/** The type of item this node represents. */
type: string,
/** A unique key for the node. */
key: Key,
/** The object value the node was created from. */
value: T,
/** The level of depth this node is at in the heirarchy. */
level: number,
/** Whether this item has children, even if not loaded yet. */
hasChildNodes: boolean,
/** The loaded children of this node. */
childNodes: Iterable<Node<T>>,
/** The rendered contents of this node (e.g. JSX). */
rendered: ReactNode,
/** A string value for this node, used for features like typeahead. */
textValue: string,
/** An accessibility label for this node. */
'aria-label'?: string,
/** The index of this node within its parent. */
index?: number,
/** A function that should be called to wrap the rendered node. */
wrapper?: (element: ReactElement) => ReactElement,
/** The key of the parent node. */
parentKey?: Key,
/** The key of the node before this node. */
prevKey?: Key,
/** The key of the node after this node. */
nextKey?: Key,
/** Additional properties specific to a particular node type. */
props?: any,
/** @private */
shouldInvalidate?: (context: unknown) => boolean
}
declare function useAsyncList<T>(opts: AsyncListOptions<T>): AsyncListProps<T>;

5

src/dna.d.ts

@@ -13,2 +13,3 @@ /*

/** See the [Styling docs](styling.html#dimension-values) for a visualization of these values. */
export type DimensionValue =

@@ -92,3 +93,5 @@ | 'size-0'

| 'single-line-width'
| string
// This allows autocomplete to work properly and not collapse the above options into just `string`.
// See https://github.com/microsoft/TypeScript/issues/29729.
| (string & {})
| number;

@@ -95,0 +98,0 @@

40

src/dom.d.ts

@@ -15,12 +15,5 @@ /*

// A set of common DOM props that are allowed on any component
// Ensure this is synced with DOMPropNames in filterDOMProps
export interface DOMProps {
id?: string,
tabIndex?: number,
role?: string,
export interface AriaLabelingProps {
/**
* Defines a string value that labels the current element.
* @see aria-labelledby.
*/

@@ -31,3 +24,2 @@ 'aria-label'?: string,

* Identifies the element (or elements) that labels the current element.
* @see aria-describedby.
*/

@@ -38,3 +30,2 @@ 'aria-labelledby'?: string,

* Identifies the element (or elements) that describes the object.
* @see aria-labelledby
*/

@@ -44,22 +35,27 @@ 'aria-describedby'?: string,

/**
* Identifies the element (or elements) whose contents or presence are controlled by the current element.
* @see aria-owns.
* Identifies the element (or elements) that provide a detailed, extended description for the object.
*/
'aria-controls'?: string,
'aria-details'?: string
}
export interface AriaValidationProps {
// https://www.w3.org/TR/wai-aria-1.2/#aria-errormessage
/**
* Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
* between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
* @see aria-controls.
* Identifies the element that provides an error message for the object.
*/
'aria-owns'?: string,
'aria-errormessage'?: string
}
/**
* Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
*/
'aria-hidden'?: boolean | 'false' | 'true'
// A set of common DOM props that are allowed on any component
// Ensure this is synced with DOMPropNames in filterDOMProps
export interface DOMProps {
id?: string
}
export interface FocusableDOMProps extends DOMProps {
tabIndex?: number
}
// DOM props that apply to all text inputs
// Ensure this is synced with TextInputDOMPropNames in filterDOMProps
// Ensure this is synced with useTextField
export interface TextInputDOMProps extends DOMProps {

@@ -66,0 +62,0 @@ autoComplete?: string,

37

src/events.d.ts

@@ -14,3 +14,3 @@ /*

import {
FocusEvent as ReactFocusEvent,
FocusEvent,
KeyboardEvent as ReactKeyboardEvent,

@@ -29,3 +29,2 @@ SyntheticEvent

export type KeyboardEvent = BaseEvent<ReactKeyboardEvent<any>>;
export type FocusEvent = BaseEvent<ReactFocusEvent<any>>;

@@ -35,7 +34,13 @@ export type PointerType = 'mouse' | 'pen' | 'touch' | 'keyboard' | 'virtual';

export interface PressEvent {
/** The type of press event being fired. */
type: 'pressstart' | 'pressend' | 'pressup' | 'press',
/** The pointer type that triggered the press event. */
pointerType: PointerType,
/** The target element of the press event. */
target: HTMLElement,
/** Whether the shift keyboard modifier was held during the press event. */
shiftKey: boolean,
/** Whether the ctrl keyboard modifier was held during the press event. */
ctrlKey: boolean,
/** Whether the meta keyboard modifier was held during the press event. */
metaKey: boolean

@@ -45,4 +50,7 @@ }

export interface HoverEvent {
type: 'hoverstart' | 'hoverend' | 'hover',
pointerType: 'mouse' | 'touch' | 'pen',
/** The type of hover event being fired. */
type: 'hoverstart' | 'hoverend',
/** The pointer type that triggered the hover event. */
pointerType: 'mouse' | 'pen',
/** The target element of the hover event. */
target: HTMLElement

@@ -68,4 +76,7 @@ }

export interface HoverEvents {
onHover?: (e: HoverEvent) => void,
/** Handler that is called when a hover interaction starts. */
onHoverStart?: (e: HoverEvent) => void,
/** Handler that is called when a hover interaction ends. */
onHoverEnd?: (e: HoverEvent) => void,
/** Handler that is called when the hover state changes. */
onHoverChange?: (isHovering: boolean) => void

@@ -75,11 +86,17 @@ }

export interface PressEvents {
/** Handler that is called when the press is released over the target. */
onPress?: (e: PressEvent) => void,
/** Handler that is called when a press interaction starts. */
onPressStart?: (e: PressEvent) => void,
/**
* Called when the mouse or touch is released
* @param e A press event
* @returns nothing
* Handler that is called when a press interaction ends, either
* over the target or when the pointer leaves the target.
*/
onPress?: (e: PressEvent) => void,
onPressStart?: (e: PressEvent) => void,
onPressEnd?: (e: PressEvent) => void,
/** Handler that is called when the press state changes. */
onPressChange?: (isPressed: boolean) => void,
/**
* Handler that is called when a press is released over the target, regardless of
* whether it started on the target or not.
*/
onPressUp?: (e: PressEvent) => void

@@ -86,0 +103,0 @@ }

20

src/inputs.d.ts

@@ -13,15 +13,17 @@ /*

import {FocusableProps} from './events';
export type ValidationState = 'valid' | 'invalid';
export type ValidationState = 'valid' | 'invalid';
export interface InputBase extends FocusableProps {
/** Whether the input is disabled. */
isDisabled?: boolean,
/**
* Whether user input is required on the input before form submission.
export interface Validation {
/** Whether the input should display its "valid" or "invalid" visual styling. */
validationState?: ValidationState
/**
* Whether user input is required on the input before form submission.
* Often paired with the `necessityIndicator` prop to add a visual indicator to the input.
*/
isRequired?: boolean,
/** Whether the input should display its "valid" or "invalid" visual styling. */
validationState?: ValidationState,
}
export interface InputBase {
/** Whether the input is disabled. */
isDisabled?: boolean,
/** Whether the input can be selected but not changed by the user. */

@@ -28,0 +30,0 @@ isReadOnly?: boolean

12

src/labelable.d.ts

@@ -27,17 +27,17 @@ /*

export interface SpectrumLabelableProps extends LabelableProps {
/**
/**
* The label's overall position relative to the element it is labeling.
* @default "top"
* @default 'top'
*/
labelPosition?: LabelPosition,
/**
/**
* The label's horizontal alignment relative to the element it is labeling.
* @default "start"
* @default 'start'
*/
labelAlign?: Alignment,
/**
/**
* Whether the required state should be shown as an icon or text.
* @default "icon"
* @default 'icon'
*/
necessityIndicator?: NecessityIndicator
}

38

src/selection.d.ts

@@ -13,20 +13,26 @@ /*

export interface SelectionOptions {
allowsSelection?: boolean,
allowsMultipleSelection?: boolean,
allowsEmptySelection?: boolean,
typeToSelect?: boolean // ???
export interface SingleSelection {
/** Whether the collection allows empty selection. */
disallowEmptySelection?: boolean,
/** The currently selected key in the collection (controlled). */
selectedKey?: Key,
/** The initial selected key in the collection (uncontrolled). */
defaultSelectedKey?: Key,
/** Handler that is called when the selection changes. */
onSelectionChange?: (key: Key) => any
}
export interface MultipleSelectionBase extends SelectionOptions {
selectedItems?: Array<any>,
defaultSelectedItems?: Array<any>,
onSelectionChange?: (selectedItems: Array<any>) => void
export type SelectionMode = 'none' | 'single' | 'multiple';
export type Selection = 'all' | Set<Key>;
export interface MultipleSelection {
/** The type of selection that is allowed in the collection. */
selectionMode?: SelectionMode,
/** Whether the collection allows empty selection. */
disallowEmptySelection?: boolean,
/** The currently selected keys in the collection (controlled). */
selectedKeys?: 'all' | Iterable<Key>,
/** The initial selected keys in the collection (uncontrolled). */
defaultSelectedKeys?: 'all' | Iterable<Key>,
/** Handler that is called when the selection changes. */
onSelectionChange?: (keys: Selection) => any
}
export interface SingleSelectionBase {
selectedItem?: any,
defaultSelectedItem?: any,
onSelectionChange?: (selectedItem: any) => void,
typeToSelect?: boolean // or is it really typeToFocus?
}

210

src/style.d.ts

@@ -18,48 +18,88 @@ /*

// For backward compatibility!
/** @deprecated */
/** Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use style props instead. */
UNSAFE_className?: string,
/** Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/Element/style) for the element. Only use as a **last resort**. Use style props instead. */
UNSAFE_style?: CSSProperties,
/** The margin for all four sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin). */
margin?: DimensionValue,
/** The margin for the logical start side of the element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start). */
marginStart?: DimensionValue,
/** The margin for the logical end side of an element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end). */
marginEnd?: DimensionValue,
marginLeft?: DimensionValue,
marginRight?: DimensionValue,
// /** The margin for the left side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left). Consider using `marginStart` instead for RTL support. */
// marginLeft?: DimensionValue,
// /** The margin for the right side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left). Consider using `marginEnd` instead for RTL support. */
// marginRight?: DimensionValue,
/** The margin for the top side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top). */
marginTop?: DimensionValue,
/** The margin for the bottom side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom). */
marginBottom?: DimensionValue,
/** The margin for both the left and right sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin). */
marginX?: DimensionValue,
/** The margin for both the top and bottom sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin). */
marginY?: DimensionValue,
/** The width of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width). */
width?: DimensionValue,
/** The height of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height). */
height?: DimensionValue,
/** The minimum width of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width). */
minWidth?: DimensionValue,
/** The minimum height of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height). */
minHeight?: DimensionValue,
/** The maximum width of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width). */
maxWidth?: DimensionValue,
/** The maximum height of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height). */
maxHeight?: DimensionValue,
/** When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex). */
flex?: string | number | boolean,
/** When used in a flex layout, specifies how the element will grow to fit the space available. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow). */
flexGrow?: number,
/** When used in a flex layout, specifies how the element will shrink to fit the space available. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink). */
flexShrink?: number,
/** When used in a flex layout, specifies the initial main size of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis). */
flexBasis?: number | string,
/** Specifies how the element is justified inside a flex or grid container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self). */
justifySelf?: 'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch', // ...
alignSelf?: 'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'stretch', // ...
flexOrder?: number,
// TODO: grid
/** Overrides the `alignItems` property of a flex or grid container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self). */
alignSelf?: 'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch',
/** The layout order for the element within a flex or grid container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/order). */
order?: number,
/** When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area). */
gridArea?: string
/** When used in a grid layout, specifies the column the element should be placed in within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column). */
gridColumn?: string,
/** When used in a grid layout, specifies the row the element should be placed in within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row). */
gridRow?: string,
/** When used in a grid layout, specifies the starting column to span within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start). */
gridColumnStart?: string,
/** When used in a grid layout, specifies the ending column to span within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end). */
gridColumnEnd?: string,
/** When used in a grid layout, specifies the starting row to span within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start). */
gridRowStart?: string,
/** When used in a grid layout, specifies the ending row to span within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end). */
gridRowEnd?: string,
/** Specifies how the element is positioned. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/position). */
position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky',
/** The stacking order for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index). */
zIndex?: number,
/** The top position for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/top). */
top?: DimensionValue,
/** The bottom position for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom). */
bottom?: DimensionValue,
/** The logical start position for the element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start). */
start?: DimensionValue,
/** The logical end position for the element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end). */
end?: DimensionValue,
/** The left position for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/left). Consider using `start` instead for RTL support. */
left?: DimensionValue,
/** The right position for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/right). Consider using `start` instead for RTL support. */
right?: DimensionValue,
isHidden?: boolean,
// don't know how to type these https://css-tricks.com/snippets/css/complete-guide-grid/
gridColumnStart?: string,
gridColumnEnd?: string,
gridRowStart?: string,
gridRowEnd?: string,
gridColumn?: string,
gridRow?: string,
gridArea?: string
/** Hides the element. */
isHidden?: boolean
}

@@ -70,39 +110,72 @@

export interface ViewStyleProps extends StyleProps {
/** The background color for the element. */
backgroundColor?: BackgroundColorValue,
/** The width of the element's border on all four sides. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
borderWidth?: BorderSizeValue,
/** The width of the border on the logical start side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-width). */
borderStartWidth?: BorderSizeValue,
/** The width of the border on the logical end side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-width). */
borderEndWidth?: BorderSizeValue,
borderLeftWidth?: BorderSizeValue,
borderRightWidth?: BorderSizeValue,
// borderLeftWidth?: BorderSizeValue,
// borderRightWidth?: BorderSizeValue,
/** The width of the top border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width). */
borderTopWidth?: BorderSizeValue,
/** The width of the bottom border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width). */
borderBottomWidth?: BorderSizeValue,
borderTopWidth?: BorderSizeValue,
/** The width of the left and right borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
borderXWidth?: BorderSizeValue,
/** The width of the top and bottom borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
borderYWidth?: BorderSizeValue,
/** The color of the element's border on all four sides. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color). */
borderColor?: BorderColorValue,
/** The color of the border on the logical start side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color). */
borderStartColor?: BorderColorValue,
/** The color of the border on the logical end side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color). */
borderEndColor?: BorderColorValue,
borderLeftColor?: BorderColorValue,
borderRightColor?: BorderColorValue,
// borderLeftColor?: BorderColorValue,
// borderRightColor?: BorderColorValue,
/** The color of the top border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color). */
borderTopColor?: BorderColorValue,
/** The color of the bottom border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color). */
borderBottomColor?: BorderColorValue,
borderTopColor?: BorderColorValue,
/** The color of the left and right borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color). */
borderXColor?: BorderColorValue,
/** The color of the top and bottom borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
borderYColor?: BorderColorValue,
/** The border radius on all four sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius). */
borderRadius?: BorderRadiusValue,
/** The border radius for the top start corner of the element, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-start-radius). */
borderTopStartRadius?: BorderRadiusValue,
/** The border radius for the top end corner of the element, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius). */
borderTopEndRadius?: BorderRadiusValue,
/** The border radius for the bottom start corner of the element, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-start-radius). */
borderBottomStartRadius?: BorderRadiusValue,
/** The border radius for the bottom end corner of the element, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-end-radius). */
borderBottomEndRadius?: BorderRadiusValue,
borderTopLeftRadius?: BorderRadiusValue,
borderTopRightRadius?: BorderRadiusValue,
borderBottomLeftRadius?: BorderRadiusValue,
borderBottomRightRadius?: BorderRadiusValue,
// borderTopLeftRadius?: BorderRadiusValue,
// borderTopRightRadius?: BorderRadiusValue,
// borderBottomLeftRadius?: BorderRadiusValue,
// borderBottomRightRadius?: BorderRadiusValue,
/** The padding for all four sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding). */
padding?: DimensionValue,
/** The padding for the logical start side of the element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start). */
paddingStart?: DimensionValue,
/** The padding for the logical end side of an element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end). */
paddingEnd?: DimensionValue,
paddingLeft?: DimensionValue,
paddingRight?: DimensionValue,
// paddingLeft?: DimensionValue,
// paddingRight?: DimensionValue,
/** The padding for the top side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top). */
paddingTop?: DimensionValue,
/** The padding for the bottom side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom). */
paddingBottom?: DimensionValue,
/** The padding for both the left and right sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding). */
paddingX?: DimensionValue,
/** The padding for both the top and bottom sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding). */
paddingY?: DimensionValue,
/** Species what to do when the element's content is too long to fit its size. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow). */
overflow?: string,

@@ -114,37 +187,54 @@ // ...

type GlobalVals = 'initial' | 'inherit' | 'unset';
type JustifyContentType = 'center'| 'start'| 'end'| 'flex-start' | 'flex-end' | 'left' | 'right' | 'normal' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'safe center' | 'unsafe center' | GlobalVals;
type JustifyItemsType = 'auto' | 'normal' | 'stretch' | 'center'| 'start'| 'end'| 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'left' | 'right' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center' | 'legacy right' | 'legacy left' | 'legacy center' | GlobalVals;
type AlignContentType = 'center'| 'start'| 'end'| 'flex-start' | 'flex-end' | 'normal' | 'baseline' | 'first baseline' | 'last baseline' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'safe center' | 'unsafe center' | GlobalVals;
type AlignItemsType = 'normal'| 'stretch'| 'center'| 'start' | 'end' | 'flex-start' | 'flex-end' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center' | GlobalVals;
export interface BoxAlignmentStyleProps {
/**
* The distribution of space around items along the main axis. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).
* @default 'stretch'
*/
justifyContent?: 'start' | 'end' | 'center' | 'left' | 'right' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center',
/**
* The distribution of space around child items along the cross axis. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).
* @default 'start'
*/
alignContent?: 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center',
/**
* The alignment of children within their container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).
* @default 'stretch'
*/
alignItems?: 'start' | 'end' | 'center' | 'stretch' | 'self-start' | 'self-end' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center',
/** The space to display between both rows and columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap). */
gap?: DimensionValue,
/** The space to display between columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap). */
columnGap?: DimensionValue,
/** The space to display between rows. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap). */
rowGap?: DimensionValue
}
export interface FlexStyleProps extends StyleProps {
flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse',
flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse',
justifyContent?: JustifyContentType,
justifyItems?: JustifyItemsType,
alignContent?: AlignContentType,
alignItems?: AlignItemsType
export interface FlexStyleProps extends BoxAlignmentStyleProps, StyleProps {
/**
* The direction in which to layout children. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction).
* @default 'row'
*/
direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse',
/**
* Whether to wrap items onto multiple lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap).
* @default false
*/
wrap?: boolean | 'wrap' | 'nowrap' | 'wrap-reverse'
}
export interface GridStyleProps extends StyleProps {
justifyContent?: JustifyContentType,
justifyItems?: JustifyItemsType,
alignContent?: AlignContentType,
alignItems?: AlignItemsType,
// naming existing properties but don't know how to type many of them
rowGap?: DimensionValue, // not well supported in Flex, but is well supported in Grid, also, should this really be dimension value??
columnGap?: DimensionValue, // dimension value correct?
gridTemplateAreas?: string,
gridTemplateRows?: string,
gridTemplateColumns?: string,
gridTemplate?: string,
gridColumnGap?: string,
gridRowGap?: string,
gridGap?: string,
gridAutoColumns?: string,
gridAutoRows?: string,
gridAutoFlow?: 'row' | 'column' | 'row dense' | 'column dense',
grid?: string,
// gap?: how do i type this one????
export interface GridStyleProps extends BoxAlignmentStyleProps, StyleProps {
/** Defines named grid areas. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas). */
areas?: string[],
/** Defines the sizes of each row in the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows). */
rows?: string | DimensionValue[],
/** Defines the sizes of each column in the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns). */
columns?: string | DimensionValue[],
/** Defines the size of implicitly generated columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns). */
autoColumns?: DimensionValue,
/** Defines the size of implicitly generated rows. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows). */
autoRows?: DimensionValue,
/** Controls how auto-placed items are flowed into the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow). */
autoFlow?: 'row' | 'column' | 'row dense' | 'column dense',
/** Defines the default `justifySelf` for all items in the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items). */
justifyItems?: 'auto' | 'normal' | 'start' | 'end' | 'center' | 'left' | 'right' | 'stretch' | 'self-start' | 'self-end' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center' | 'legacy right' | 'legacy left' | 'legacy center'
}
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