@react-types/shared - npm Package Compare versions

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

package.json

 {
   "name": "@react-types/shared",
-  "version": "3.0.0-rc.1",
+  "version": "3.0.0-rc.2",
   "description": "Spectrum UI components in React",
@@ -17,3 +17,3 @@ "license": "Apache-2.0",
   },
-  "gitHead": "5a9784f0bb6c25af7422215efb31ef72caeb9600"
+  "gitHead": "207e6ee9076905c96638a7f81a367758872e1410"
 }

src/collections.d.ts

@@ -0,1 +1,12 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
 
@@ -8,3 +19,6 @@ import {Key, ReactElement, ReactNode} from 'react';
   hasChildItems?: boolean,
-  children: ReactNode // CellRenderer??
+  children: ReactNode, // CellRenderer??
+  textValue?: string,
+  'aria-label'?: string,
+  uniqueKey?: Key
 }
@@ -19,3 +33,3 @@
   isLoading?: boolean, // possibly isLoadingMore
-  onLoadMore?: () => any,
+  onLoadMore?: () => any
 }
@@ -25,3 +39,5 @@
   title?: ReactNode,
-  children: ItemElement<T> | ItemElement<T>[] | ItemRenderer<T>
+  'aria-label'?: string,
+  children: ItemElement<T> | ItemElement<T>[] | ItemRenderer<T>,
+  uniqueKey?: Key
 }
@@ -101,3 +117,6 @@
   /** Returns the last key, or `null` for none. */
-  getLastKey?(): Key
+  getLastKey?(): Key,
+
+  /** Returns the next key after `fromKey` that matches the given search string, or `null` for none. */
+  getKeyForSearch?(search: string, fromKey?: Key): Key
 }
@@ -104,0 +123,0 @@

src/css.d.ts

@@ -1,2 +0,13 @@
-// https://github.com/Microsoft/TypeScript/issues/2709 hopefully move more centrally later
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
 declare module '*.css' {
@@ -3,0 +14,0 @@ const content: any;

src/dna.d.ts

@@ -1,2 +0,12 @@
-// This file is generated by lib/varsToTypeScript.js! DO NOT EDIT.
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
 
@@ -3,0 +13,0 @@ export type DimensionValue =

src/dnd.d.ts

@@ -0,1 +1,13 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
 import {Key, ReactNode} from 'react';
@@ -2,0 +14,0 @@

src/dom.d.ts

@@ -0,1 +1,13 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
 import {ClipboardEventHandler, CompositionEventHandler, FormEventHandler, ReactEventHandler} from 'react';
@@ -2,0 +14,0 @@

src/events.d.ts

@@ -0,1 +1,13 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
 import {
@@ -18,5 +30,6 @@ FocusEvent as ReactFocusEvent,
 
-export type PointerType = 'mouse' | 'pen' | 'touch' | 'keyboard';
+export type PointerType = 'mouse' | 'pen' | 'touch' | 'keyboard' | 'virtual';
+
 export interface PressEvent {
-  type: 'pressstart' | 'pressend' | 'press',
+  type: 'pressstart' | 'pressend' | 'pressup' | 'press',
   pointerType: PointerType,
@@ -29,4 +42,12 @@ target: HTMLElement,
 
+export interface HoverEvent {
+  type: 'hoverstart' | 'hoverend' | 'hover',
+  pointerType: 'mouse' | 'touch' | 'pen',
+  target: HTMLElement
+}
+
 export interface KeyboardEvents {
+  /** Handler that is called when a key is pressed. */
   onKeyDown?: (e: KeyboardEvent) => void,
+  /** Handler that is called when a key is released. */
   onKeyUp?: (e: KeyboardEvent) => void
@@ -36,16 +57,32 @@ }
 export interface FocusEvents {
+  /** Handler that is called when the element receives focus. */
   onFocus?: (e: FocusEvent) => void,
+  /** Handler that is called when the element loses focus. */
   onBlur?: (e: FocusEvent) => void,
+  /** Handler that is called when the element's focus status changes. */
   onFocusChange?: (isFocused: boolean) => void
 }
 
+export interface HoverEvents {
+  onHover?: (e: HoverEvent) => void,
+  onHoverEnd?: (e: HoverEvent) => void,
+  onHoverChange?: (isHovering: boolean) => void
+}
+
 export interface PressEvents {
+  /**
+   * Called when the mouse or touch is released
+   * @param e A press event
+   * @returns nothing
+   */
   onPress?: (e: PressEvent) => void,
   onPressStart?: (e: PressEvent) => void,
   onPressEnd?: (e: PressEvent) => void,
-  onPressChange?: (isPressed: boolean) => void
+  onPressChange?: (isPressed: boolean) => void,
+  onPressUp?: (e: PressEvent) => void
 }
 
 export interface FocusableProps extends FocusEvents, KeyboardEvents {
+  /** Whether the element should receive focus on render */
   autoFocus?: boolean
 }

src/index.d.ts

@@ -0,1 +1,13 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
 export * from './dom';
@@ -13,1 +25,3 @@ export * from './inputs';
 export * from './labelable';
+export * from './orientation';
+export * from './locale';

src/inputs.d.ts

@@ -0,1 +1,13 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
 import {FocusableProps} from './events';
@@ -5,5 +17,12 @@
 export interface InputBase extends FocusableProps {
+  /** Whether the input is disabled. */
   isDisabled?: boolean,
+  /** 
+   * 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,
+  /** Whether the input can be selected but not changed by the user. */
   isReadOnly?: boolean
@@ -13,4 +32,7 @@ }
 export interface ValueBase<T> {
+  /** The current value (controlled). */
   value?: T,
+  /** The default value (uncontrolled). */
   defaultValue?: T,
+  /** Handler that is called when the value changes. */
   onChange?: (value: T) => void,
@@ -20,2 +42,3 @@ }
 export interface TextInputBase {
+  /** Temporary text that occupies the text input when it is empty. */
   placeholder?: string
@@ -25,3 +48,5 @@ }
 export interface RangeValue<T> {
+  /** The start value of the range. */
   start: T,
+  /** The end value of the range. */
   end: T
@@ -31,5 +56,8 @@ }
 export interface RangeInputBase<T> {
+  /** The smallest value allowed for the input. */
   minValue?: T,
+  /** The largest value allowed for the input. */
   maxValue?: T,
+  /** The amount that the input value changes with each increment or decrement "tick". */
   step?: T // ??
 }

src/labelable.d.ts

@@ -0,1 +1,13 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
 import {ReactNode} from 'react';
@@ -8,3 +20,5 @@
 export interface LabelableProps {
+  /** The content to display as the label. */
   label?: ReactNode,
+  /** Whether the label is labeling a required field or group. */
   isRequired?: boolean
@@ -14,5 +28,17 @@ }
 export interface SpectrumLabelableProps extends LabelableProps {
+  /** 
+   * The label's overall position relative to the element it is labeling.
+   * @default "top" 
+   */
   labelPosition?: LabelPosition,
+  /** 
+   * The label's horizontal alignment relative to the element it is labeling.
+   * @default "start" 
+   */
   labelAlign?: Alignment,
+  /** 
+   * Whether the required state should be shown as an icon or text.
+   * @default "icon" 
+   */
   necessityIndicator?: NecessityIndicator
 }

src/refs.d.ts

@@ -0,1 +1,13 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
 import {Ref} from 'react';
@@ -2,0 +14,0 @@

src/removable.d.ts

@@ -0,1 +1,13 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
 import {SyntheticEvent} from 'react';
@@ -2,0 +14,0 @@

src/selection.d.ts

@@ -0,1 +1,13 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
 export interface SelectionOptions {
@@ -2,0 +14,0 @@ allowsSelection?: boolean,

src/splitview.d.ts

@@ -0,1 +1,13 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
 import {
@@ -8,2 +20,3 @@ Dispatch,
 } from 'react';
+import {Orientation} from './orientation';
 
@@ -48,3 +61,3 @@ export interface SplitViewStatelyProps {
   allowsResizing?: boolean,
-  orientation?: 'horizontal' | 'vertical',
+  orientation?: Orientation,
   primaryPane?: 0 | 1,
@@ -62,3 +75,3 @@ primaryMinSize?: number,
   children: [ReactElement, ReactElement],
-  orientation?: 'horizontal' | 'vertical',
+  orientation?: Orientation,
   allowsResizing?: boolean,
@@ -65,0 +78,0 @@ allowsCollapsing?: boolean,

src/style.d.ts

@@ -0,1 +1,13 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
 import {BackgroundColorValue, BorderColorValue, BorderRadiusValue, BorderSizeValue, DimensionValue} from './dna';
@@ -28,2 +40,3 @@ import {CSSProperties} from 'react';
   flexShrink?: number,
+  flexBasis?: number | string,
   justifySelf?: 'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch', // ...
@@ -42,3 +55,12 @@ alignSelf?: 'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'stretch', // ...
 
-  isHidden?: boolean
+  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
 }
@@ -91,1 +113,38 @@
 }
+
+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 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 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????
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

48363

increased by117.48%

Number of package files

19

increased by18.75%

Lines of code

1022

increased by37.92%

No dependency changes