@bigcommerce/big-design - npm Package Compare versions

Comparing version 0.11.1 to 0.12.0

CHANGELOG.md

@@ -6,2 +6,148 @@ # Change Log
 
+# [0.12.0](https://github.com/bigcommerce/big-design/compare/@bigcommerce/big-design@0.11.1...@bigcommerce/big-design@0.12.0) (2019-10-29)
+
+
+* Restrict Dropdown (#212) ([8608609](https://github.com/bigcommerce/big-design/commit/8608609)), closes [#212](https://github.com/bigcommerce/big-design/issues/212)
+
+
+### Bug Fixes
+
+* **component:** pagination mobile styles ([59cbfe3](https://github.com/bigcommerce/big-design/commit/59cbfe3))
+
+
+### Features
+
+* **component:** add filterable prop to Select ([#227](https://github.com/bigcommerce/big-design/issues/227)) ([f05d343](https://github.com/bigcommerce/big-design/commit/f05d343))
+* **component:** add header and action props to Panel ([8a90002](https://github.com/bigcommerce/big-design/commit/8a90002))
+* **component:** add multiselect ([#200](https://github.com/bigcommerce/big-design/issues/200)) ([02acf73](https://github.com/bigcommerce/big-design/commit/02acf73))
+* **component:** add optional text to non required inputs ([#208](https://github.com/bigcommerce/big-design/issues/208)) ([463e99f](https://github.com/bigcommerce/big-design/commit/463e99f))
+* **component:** add sort functionality to Table component ([2d30461](https://github.com/bigcommerce/big-design/commit/2d30461))
+* **component:** allow state override of table select all checkbox ([#224](https://github.com/bigcommerce/big-design/issues/224)) ([b64eda1](https://github.com/bigcommerce/big-design/commit/b64eda1))
+* **component:** convert Button component to FC ([#221](https://github.com/bigcommerce/big-design/issues/221)) ([90759d6](https://github.com/bigcommerce/big-design/commit/90759d6))
+* **component:** restrict actions and header from modals ([#209](https://github.com/bigcommerce/big-design/issues/209)) ([bc85d25](https://github.com/bigcommerce/big-design/commit/bc85d25))
+* **component:** restrict Select ([#218](https://github.com/bigcommerce/big-design/issues/218)) ([66378ed](https://github.com/bigcommerce/big-design/commit/66378ed))
+* **component:** rework Table component ([11389b9](https://github.com/bigcommerce/big-design/commit/11389b9))
+* **component:** table multi-page select ([#225](https://github.com/bigcommerce/big-design/issues/225)) ([00140ab](https://github.com/bigcommerce/big-design/commit/00140ab))
+* **component:** update Tabs component to be more restrictive ([683d768](https://github.com/bigcommerce/big-design/commit/683d768))
+
+
+### BREAKING CHANGES
+
+* **component:** Select now accepts an array of `Options` and an `Action` object. Will call `onChange` when option is selected with the chosen `value` and `option` as arguments. For more details see the usage examples in our docs.
+
+Old:
+```jsx
+<Select
+    label="Countries"
+    maxHeight={300}
+    onActionClick={() => null}
+    onItemChange={handleChange}
+    placeholder={'Choose country'}
+    placement={'bottom-start'}
+    required
+    value={value}
+>
+    <Select.Option value="us">United States</Select.Option>
+    <Select.Option value="mx">Mexico</Select.Option>
+    <Select.Option value="ca">Canada</Select.Option>
+    <Select.Option value="ru" disabled>Russia</Select.Option>
+    <Select.Action>Action</Select.Action>
+</Select>
+```
+
+New:
+```jsx
+<Select
+    action={{
+        actionType: 'destructive',
+        content: 'Remove Country',
+        icon: <DeleteIcon />,
+        onClick: () => null,
+    }}
+    label="Countries"
+    maxHeight={300}
+    onChange={handleChange}
+    options={[
+        { value: 'us', content: 'United States' },
+        { value: 'mx', content: 'Mexico' },
+        { value: 'ca', content: 'Canada' },
+        { value: 'ru', content: 'Russia', disabled: true },
+    ]}
+    placeholder={'Choose country'}
+    placement={'bottom-start'}
+    required
+    value={value}
+/>
+```
+* **component:** Tabs now accepts an `items` prop to render tab items and omits children from being rendered.
+
+Old:
+```jsx
+<Tabs>
+  <Tabs.Tab id="tab1">Tab 1</Tabs.Tab>
+  {/* ... */}
+</Tabs>
+```
+
+New:
+```jsx
+<Tabs activeTab="tab1" items={[{ id: 'tab1', title: 'Tab 1' }]} onTabClick={() => {}} />
+```
+* **component:** `Table` component no longer exposes Actions, Head, Row, Body, Cell
+statics. Check out the updated [Table
+docs](https://bigcommerce.github.io/big-design/table) for a more
+detailed usage.
+* Dropdown now accepts an array of `DropdownItems` & `DropdownItemLinks` as `options`.
+
+Old:
+```jsx
+<Dropdown onItemClick={onClick} trigger={<Button>Button</Button>}>
+  <Dropdown.Item value={0}>Option</Dropdown.Item>
+  <Dropdown.Item value={1}>Option</Dropdown.Item>
+  <Dropdown.Item value={2}>Option</Dropdown.Item>
+</Dropdown>
+```
+
+New:
+```jsx
+<Dropdown
+  options={[
+    { content: 'Option', value: 0, onClick },
+    { content: 'Option', value: 1, onClick },
+    { content: 'Option', value: 2, onClick, actionType: 'destructive' },
+    { content: 'Option', value: 3, onClick, icon: <CheckCircleIcon /> },
+  ]}
+  trigger={<Button>Button</Button>}/>
+```
+* **component:** Modal is now restricted and uses a `header` and `actions` props instead.
+
+Old:
+```jsx
+<Modal isOpen={isOpen}>
+  <Modal.Header>Modal Title</Modal.Header>
+  <Modal.Body>
+    <Text>Body content.</Text>
+  </Modal.Body>
+  <Modal.Actions>
+    <Button variant="subtle" onClick={() => setIsOpen(false)}>
+       Cancel
+     </Button>
+  </Modal.Actions>
+</Modal>
+```
+
+New:
+```jsx
+<Modal 
+  actions={[{text: 'Cancel', variant: 'subtle', onClick: () => setIsOpen(false)}]}
+  isOpen={isOpen} 
+  header="Modal Title">
+  <Text>Body content.</Text>
+</Modal>
+```
+
+
+
+
+
 ## [0.11.1](https://github.com/bigcommerce/big-design/compare/@bigcommerce/big-design@0.11.0...@bigcommerce/big-design@0.11.1) (2019-09-24)
@@ -8,0 +154,0 @@

dist/src/components/Checkbox/Checkbox.d.ts

@@ -14,3 +14,3 @@ import { ThemeInterface } from '@bigcommerce/big-design-theme';
 declare class RawCheckbox extends React.PureComponent<CheckboxProps & PrivateProps> {
-    static Label: React.MemoExoticComponent<import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>>;
+    static Label: React.MemoExoticComponent<import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, import("./styled").StyledLabelProps, never>>;
     private readonly uniqueId;
@@ -17,0 +17,0 @@ private readonly labelUniqueId;

dist/src/components/Checkbox/styled.d.ts

@@ -6,7 +6,10 @@ import { DefaultTheme, StyledComponent } from 'styled-components';
 }
+export interface StyledLabelProps {
+    disabled?: boolean;
+}
 export declare const CheckboxContainer: StyledComponent<"div", DefaultTheme, {}, never>;
 export declare const HiddenCheckbox: StyledComponent<"input", DefaultTheme, {}, never>;
 export declare const StyledCheckbox: StyledComponent<"label", DefaultTheme, StyledCheckboxProps, never>;
-export declare const StyledLabel: StyledComponent<"label", DefaultTheme, {}, never>;
+export declare const StyledLabel: StyledComponent<"label", DefaultTheme, StyledLabelProps, never>;
 export {};
 //# sourceMappingURL=styled.d.ts.map

dist/src/components/Chip/Chip.d.ts

 import { ThemeInterface } from '@bigcommerce/big-design-theme';
 import React from 'react';
-export interface ChipProps {
+import { MarginProps } from '../../mixins';
+export interface ChipProps extends MarginProps {
     theme?: ThemeInterface;
+    label: string;
     onDelete?(): void;
@@ -6,0 +8,0 @@ }

dist/src/components/Dropdown/Dropdown.d.ts

@@ -1,3 +0,3 @@
-import { Placement } from 'popper.js';
-import React, { AllHTMLAttributes } from 'react';
+import React from 'react';
+import { DropdownProps } from './types';
 interface DropdownState {
@@ -7,11 +7,3 @@ highlightedItem: HTMLLIElement | null;
 }
-interface Props {
-    maxHeight?: number;
-    placement?: Placement;
-    trigger: React.ReactElement;
-    onItemClick?(value: AllHTMLAttributes<HTMLElement>['value']): void;
-}
-export declare type DropdownProps = Props & React.HTMLAttributes<HTMLUListElement>;
-export declare class Dropdown extends React.PureComponent<DropdownProps, DropdownState> {
-    static Item: React.ForwardRefExoticComponent<import("../List/Item").ListItemProps & React.RefAttributes<HTMLLIElement>>;
+export declare class Dropdown<T extends any> extends React.PureComponent<DropdownProps<T>, DropdownState> {
     readonly state: DropdownState;
@@ -24,4 +16,6 @@ private listRef;
     render(): JSX.Element;
-    private renderChildren;
+    private renderOptions;
     private renderTrigger;
+    private renderIcon;
+    private iconColor;
     private toggleList;
@@ -37,4 +31,3 @@ private openList;
     private handleOnItemClick;
-    private handleOnItemFocus;
-    private handleOnItemMouseOver;
+    private handleOnItemHighlighted;
     /**
@@ -41,0 +34,0 @@ * Accessiblilty Menu Keyboard Support

dist/src/components/Dropdown/index.d.ts

@@ -1,2 +0,3 @@
-export { Dropdown, DropdownProps } from './Dropdown';
+export { Dropdown } from './Dropdown';
+export { DropdownItem, DropdownLinkItem, DropdownProps } from './types';
 //# sourceMappingURL=index.d.ts.map

dist/src/components/Form/Form.d.ts

@@ -9,3 +9,3 @@ import hoistNonReactStatics from 'hoist-non-react-statics';
 declare class StyleableForm extends React.PureComponent<PrivateProps & FormProps> {
-    static Label: React.FunctionComponent<React.LabelHTMLAttributes<HTMLLabelElement>>;
+    static Label: React.FunctionComponent<import("./Label/Label").LabelProps>;
     static Error: React.FunctionComponent<import("..").SmallProps>;
@@ -12,0 +12,0 @@ static Fieldset: typeof Fieldset;

dist/src/components/Form/Label/Label.d.ts

 import React from 'react';
-export declare type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement>;
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    renderOptional?: boolean;
+}
 export declare const Label: React.FC<LabelProps>;
 //# sourceMappingURL=Label.d.ts.map

dist/src/components/Form/Label/spec.d.ts

@@ -1,2 +0,2 @@
-export {};
+import 'jest-styled-components';
 //# sourceMappingURL=spec.d.ts.map

dist/src/components/Input/Input.d.ts

@@ -5,2 +5,3 @@ import { ThemeInterface } from '@bigcommerce/big-design-theme';
 interface Props {
+    chips?: string[];
     description?: React.ReactChild;
@@ -12,2 +13,3 @@ error?: React.ReactChild | React.ReactChild[];
     theme?: ThemeInterface;
+    onChipDelete?(chip: string): () => void;
 }
@@ -17,11 +19,16 @@ interface PrivateProps {
 }
+interface InputState {
+    focus: boolean;
+}
 export declare type InputProps = Props & React.InputHTMLAttributes<HTMLInputElement>;
-declare class StyleableInput extends React.PureComponent<InputProps & PrivateProps> {
+declare class StyleableInput extends React.PureComponent<InputProps & PrivateProps, InputState> {
     static Description: React.FunctionComponent<import("../Typography").SmallProps>;
     static Error: React.FunctionComponent<import("../Typography").SmallProps>;
-    static Label: React.FunctionComponent<React.LabelHTMLAttributes<HTMLLabelElement>>;
+    static Label: React.FunctionComponent<import("../Form/Label/Label").LabelProps>;
+    readonly state: InputState;
     private readonly uniqueId;
     render(): JSX.Element;
     private getId;
-    private onInputChange;
+    private onInputFocus;
+    private onInputBlur;
     private renderDescription;
@@ -31,2 +38,4 @@ private renderLabel;
     private renderIconRight;
+    private setFocus;
+    private renderChips;
 }
@@ -33,0 +42,0 @@ export declare const Input: React.ForwardRefExoticComponent<Props & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>> & hoistNonReactStatics.NonReactStatics<typeof StyleableInput, {}>;

dist/src/components/Input/styled.d.ts

 import { InputProps } from './Input';
-interface StyledIconWrapperProps {
-    position?: 'left' | 'right';
+interface StyledInputWrapperProps extends InputProps {
+    focus: boolean;
 }
-export declare const StyledInputWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, InputProps, never>;
+export declare const StyledInputWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, StyledInputWrapperProps, never>;
 export declare const StyledInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, InputProps, never>;
-export declare const StyledIconWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, StyledIconWrapperProps, never>;
+export declare const StyledIconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledInputContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, InputProps, never>;
 export {};
 //# sourceMappingURL=styled.d.ts.map

dist/src/components/List/Item/Item.d.ts

 import React from 'react';
 export interface ListItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    actionType?: 'normal' | 'destructive';
     disabled?: boolean;
@@ -4,0 +5,0 @@ }

dist/src/components/List/List.d.ts

@@ -12,7 +12,4 @@ import { Placement } from 'popper.js';
 declare type ListProps = Props & React.HTMLAttributes<HTMLUListElement>;
-export declare class List extends React.PureComponent<ListProps> {
-    static defaultProps: Partial<Props>;
-    render(): JSX.Element;
-}
+export declare const List: React.FC<ListProps>;
 export {};
 //# sourceMappingURL=List.d.ts.map

dist/src/components/Modal/index.d.ts

@@ -1,2 +0,2 @@
-export { Modal, ModalProps } from './Modal';
+export { Modal, ModalAction, ModalProps } from './Modal';
 //# sourceMappingURL=index.d.ts.map

dist/src/components/Modal/Modal.d.ts

 import React from 'react';
+import { ButtonProps } from '../Button';
 export interface ModalProps {
+    actions?: ModalAction[];
     backdrop: boolean;
-    isOpen: boolean;
     closeOnClickOutside: boolean;
     closeOnEscKey: boolean;
+    header?: string;
+    isOpen: boolean;
     variant: 'modal' | 'dialog';
@@ -14,13 +17,7 @@ onClose(): void;
 }
-export interface ModalActionsProps {
-    withBorder?: boolean;
+export interface ModalAction extends Omit<ButtonProps, 'children'> {
+    text?: string;
 }
-export interface ModalHeaderProps {
-    withBorder?: boolean;
-}
 export declare class Modal extends React.PureComponent<ModalProps, ModalState> {
     static defaultProps: Partial<ModalProps>;
-    static Actions: React.FunctionComponent<ModalActionsProps>;
-    static Body: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-    static Header: React.FunctionComponent<ModalHeaderProps>;
     readonly state: ModalState;
@@ -34,3 +31,4 @@ private modalRef;
     private renderClose;
-    private renderChildren;
+    private renderHeader;
+    private renderActions;
     private autoFocus;
@@ -37,0 +35,0 @@ private onClickAway;

dist/src/components/Modal/styled.d.ts

 import { Flex } from '../Flex';
-import { ModalActionsProps, ModalHeaderProps, ModalProps } from './Modal';
+import { ModalProps } from './Modal';
 export declare const StyledModal: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
@@ -11,6 +11,6 @@ 'aria-modal': true;
 }, never>;
-export declare const StyledModalActions: import("styled-components").StyledComponent<typeof Flex, import("styled-components").DefaultTheme, ModalActionsProps, never>;
-export declare const StyledModalHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ModalHeaderProps, never>;
+export declare const StyledModalActions: import("styled-components").StyledComponent<typeof Flex, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledModalHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledModalClose: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledModalBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=styled.d.ts.map

dist/src/components/Panel/Panel.d.ts

 import React from 'react';
 import { MarginProps } from '../../mixins';
-export declare type PanelProps = React.HTMLAttributes<HTMLElement> & MarginProps;
+import { ButtonProps } from '../Button';
+export interface PanelAction extends Omit<ButtonProps, 'children'> {
+    text?: string;
+}
+export interface PanelProps extends React.HTMLAttributes<HTMLElement>, MarginProps {
+    header?: string;
+    action?: PanelAction;
+}
 export declare const RawPanel: React.FC<PanelProps>;
 export declare const Panel: React.FC<PanelProps>;
 //# sourceMappingURL=Panel.d.ts.map

dist/src/components/Panel/styled.d.ts

 /// <reference types="react" />
-import { PanelProps } from './Panel';
-export declare const StyledPanel: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Box").BoxProps>, import("styled-components").DefaultTheme, PanelProps, never>;
+export declare const StyledPanel: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Box").BoxProps>, import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=styled.d.ts.map

dist/src/components/Select/index.d.ts

@@ -1,2 +0,3 @@
-export { Select, SelectProps } from './Select';
+export { Select } from './Select';
+export { Action, Option, SelectProps } from './types';
 //# sourceMappingURL=index.d.ts.map

dist/src/components/Select/Select.d.ts

@@ -1,3 +0,3 @@
-import { Placement } from 'popper.js';
-import React, { AllHTMLAttributes } from 'react';
+import React from 'react';
+import { SelectProps } from './types';
 interface SelectState {
@@ -8,21 +8,6 @@ filterChildren: boolean;
     isOpen: boolean;
-    selectedItem: HTMLLIElement | null;
+    selectedElement: HTMLLIElement | null;
+    selectedOptionContent: string;
 }
-interface Props {
-    disabled?: boolean;
-    error?: React.ReactChild;
-    label?: React.ReactChild;
-    maxHeight?: number;
-    placement?: Placement;
-    positionFixed?: boolean;
-    required?: boolean;
-    value?: AllHTMLAttributes<HTMLElement>['value'];
-    onActionClick?(inputText: string): void;
-    onItemChange(value: AllHTMLAttributes<HTMLElement>['value']): void;
-}
-export declare type SelectProps = Props & React.HTMLAttributes<HTMLUListElement>;
-export declare class Select extends React.PureComponent<SelectProps, SelectState> {
-    static readonly Action: React.ForwardRefExoticComponent<import("../List/Action").ListActionProps & React.RefAttributes<HTMLLIElement>>;
-    static readonly Option: React.ForwardRefExoticComponent<import("../List/Item").ListItemProps & React.RefAttributes<HTMLLIElement>>;
-    static readonly Error: React.FunctionComponent<import("..").SmallProps>;
+export declare class Select<T extends any> extends React.PureComponent<SelectProps<T>, SelectState> {
     readonly state: SelectState;
@@ -34,18 +19,25 @@ private inputRef;
     private readonly uniqueSelectId;
-    private listItemsRefs;
+    private listItems;
     componentDidMount(): void;
-    componentDidUpdate(prevProps: SelectProps): void;
+    componentDidUpdate(prevProps: SelectProps<T>): void;
     render(): JSX.Element;
-    private renderChildren;
-    private renderDropdownIcon;
     private renderLabel;
     private renderInput;
+    private renderChips;
+    private renderDropdownIcon;
+    private renderOptions;
+    private renderAction;
+    private renderIcon;
+    private iconColor;
     private toggleList;
     private openList;
     private closeList;
+    private focusInput;
     private getInputId;
     private getLabelId;
     private getSelectId;
-    private getItemId;
+    private getOptionId;
     private getActionId;
+    private getSelectedOptions;
+    private isChecked;
     private updateHighlightedItem;
@@ -56,5 +48,6 @@ private updatedSelectedItem;
     private handleOnClickOutside;
-    private handleOnItemClick;
-    private handleOnItemMouseOver;
-    private handleOnInputFocus;
+    private handleOnCheckboxOptionClick;
+    private handleOnOptionClick;
+    private handleOnOptionHighlighted;
+    private handleOnInputSelected;
     private handleOnInputChange;
@@ -61,0 +54,0 @@ /**

dist/src/components/Select/styled.d.ts

 /// <reference types="react" />
 export declare const StyledStatusMessage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledDropdownIcon: import("styled-components").StyledComponent<import("react").FunctionComponent<Partial<import("@bigcommerce/big-design-icons").IconProps>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledInputContainer: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=styled.d.ts.map

dist/src/components/Table/Actions/Actions.d.ts

@@ -1,5 +0,12 @@
-import React from 'react';
-import { FlexProps } from '../../Flex';
-export declare type TableActionsProps = FlexProps;
-export declare const TableActions: React.FC<TableActionsProps>;
+/// <reference types="react" />
+import { TableItem, TablePaginationProps, TableSelectable } from '../types';
+export interface ActionsProps<T> {
+    itemName?: string;
+    items: T[];
+    pagination?: TablePaginationProps;
+    onSelectionChange?: TableSelectable<T>['onSelectionChange'];
+    selectedItems: Set<T>;
+    tableId: string;
+}
+export declare const Actions: <T extends TableItem>({ pagination, tableId, itemName, items, onSelectionChange, selectedItems, ...props }: ActionsProps<T>) => JSX.Element;
 //# sourceMappingURL=Actions.d.ts.map

dist/src/components/Table/Actions/index.d.ts

@@ -1,2 +0,2 @@
-export { TableActions, TableActionsProps } from './Actions';
+export { Actions, ActionsProps } from './Actions';
 //# sourceMappingURL=index.d.ts.map

dist/src/components/Table/Body/Body.d.ts

 import React from 'react';
-export interface TableBodyProps extends React.TableHTMLAttributes<HTMLTableSectionElement> {
+export interface BodyProps extends React.TableHTMLAttributes<HTMLTableSectionElement> {
 }
-export declare const TableBody: React.FC<TableBodyProps>;
+export declare const Body: React.FC<BodyProps>;
 //# sourceMappingURL=Body.d.ts.map

dist/src/components/Table/Body/index.d.ts

@@ -1,2 +0,2 @@
-export { TableBody, TableBodyProps } from './Body';
+export { Body, BodyProps } from './Body';
 //# sourceMappingURL=index.d.ts.map

dist/src/components/Table/Head/Head.d.ts

 import React from 'react';
-export declare type TableHeadProps = React.TableHTMLAttributes<HTMLTableSectionElement>;
-export declare const TableHead: React.FC<TableHeadProps>;
+export declare type HeadProps = React.TableHTMLAttributes<HTMLTableSectionElement>;
+export declare const Head: React.FC<HeadProps>;
 //# sourceMappingURL=Head.d.ts.map

dist/src/components/Table/Head/index.d.ts

@@ -1,2 +0,2 @@
-export { TableHead, TableHeadProps } from './Head';
+export { Head, HeadProps } from './Head';
 //# sourceMappingURL=index.d.ts.map

dist/src/components/Table/index.d.ts

@@ -1,2 +0,3 @@
-export { Table, TableFigure, TableProps } from './Table';
+export { Table, TableFigure } from './Table';
+export * from './types';
 //# sourceMappingURL=index.d.ts.map

dist/src/components/Table/Row/index.d.ts

@@ -1,2 +0,2 @@
-export { TableRow, TableRowProps } from './Row';
+export { Row, RowProps } from './Row';
 //# sourceMappingURL=index.d.ts.map

dist/src/components/Table/Row/Row.d.ts

 import React from 'react';
-export interface TableRowProps extends React.TableHTMLAttributes<HTMLTableRowElement> {
-    selected?: boolean;
-    verticalAlign?: 'top' | 'bottom' | 'middle';
-    onRowSelect?(e: React.ChangeEvent<HTMLInputElement>, nextValue?: boolean): void;
+import { TableColumn, TableItem } from '../types';
+export interface RowProps<T> extends React.TableHTMLAttributes<HTMLTableRowElement> {
+    isSelected?: boolean;
+    isSelectable?: boolean;
+    item: T;
+    columns: Array<TableColumn<T>>;
+    onItemSelect?(item: T): void;
 }
-export declare const TableRow: React.FC<TableRowProps>;
+export declare const Row: <T extends TableItem>({ columns, isSelectable, isSelected, item, onItemSelect, }: RowProps<T>) => JSX.Element;
 //# sourceMappingURL=Row.d.ts.map

dist/src/components/Table/Row/styled.d.ts

@@ -1,3 +0,4 @@
-import { TableRowProps } from './Row';
-export declare const StyledTableRow: import("styled-components").StyledComponent<"tr", import("styled-components").DefaultTheme, TableRowProps, never>;
+export declare const StyledTableRow: import("styled-components").StyledComponent<"tr", import("styled-components").DefaultTheme, {
+    isSelected: boolean;
+}, never>;
 //# sourceMappingURL=styled.d.ts.map

dist/src/components/Table/styled.d.ts

@@ -1,4 +0,11 @@
-import { TableProps } from './Table';
 export declare const StyledTableFigure: import("styled-components").StyledComponent<"figure", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledTable: import("styled-components").StyledComponent<"table", import("styled-components").DefaultTheme, TableProps, never>;
+export declare const StyledTable: import("styled-components").StyledComponent<"table", import("styled-components").DefaultTheme, Partial<{
+    margin: "small" | "none" | "xxSmall" | "xSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | import("../../types").Responsive<"small" | "none" | "xxSmall" | "xSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge">;
+    marginTop: "small" | "none" | "xxSmall" | "xSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | import("../../types").Responsive<"small" | "none" | "xxSmall" | "xSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge">;
+    marginRight: "small" | "none" | "xxSmall" | "xSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | import("../../types").Responsive<"small" | "none" | "xxSmall" | "xSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge">;
+    marginBottom: "small" | "none" | "xxSmall" | "xSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | import("../../types").Responsive<"small" | "none" | "xxSmall" | "xSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge">;
+    marginLeft: "small" | "none" | "xxSmall" | "xSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | import("../../types").Responsive<"small" | "none" | "xxSmall" | "xSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge">;
+    marginVertical: "small" | "none" | "xxSmall" | "xSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | import("../../types").Responsive<"small" | "none" | "xxSmall" | "xSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge">;
+    marginHorizontal: "small" | "none" | "xxSmall" | "xSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | import("../../types").Responsive<"small" | "none" | "xxSmall" | "xSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge">;
+}>, never>;
 //# sourceMappingURL=styled.d.ts.map

dist/src/components/Table/Table.d.ts

 import React from 'react';
-import { TableActionsProps } from './Actions';
-import { TableBodyProps } from './Body';
-import { TableCellProps } from './Cell';
-import { TableFooterProps } from './Footer';
-import { TableHeadProps } from './Head';
-import { TableRowProps } from './Row';
-export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement & {
-    children: React.ReactNode;
-}> {
-    selectable?: boolean;
-    stickyHeader?: boolean;
-}
-interface Table extends React.FC<TableProps> {
-    Actions: TableActionsProps;
-    Body: TableBodyProps;
-    Cell: TableCellProps;
-    Footer: TableFooterProps;
-    Head: TableHeadProps;
-    Row: TableRowProps;
-}
-export declare function Table(this: Table, props: TableProps): JSX.Element;
-export declare namespace Table {
-    var Actions: React.FunctionComponent<import("..").FlexProps>;
-    var Body: React.FunctionComponent<TableBodyProps>;
-    var Cell: React.FunctionComponent<TableCellProps>;
-    var Footer: React.FunctionComponent<React.TableHTMLAttributes<HTMLTableSectionElement>>;
-    var Head: React.FunctionComponent<React.TableHTMLAttributes<HTMLTableSectionElement>>;
-    var Row: React.FunctionComponent<TableRowProps>;
-}
-export declare const TableFigure: React.FC<any>;
-export {};
+import { TableItem, TableProps } from './types';
+export declare const Table: <T extends TableItem>(props: TableProps<T>) => React.ReactElement<TableProps<T>, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export declare const TableFigure: React.FC;
 //# sourceMappingURL=Table.d.ts.map

dist/src/components/Tabs/index.d.ts

@@ -1,2 +0,2 @@
-export { Tabs, TabProps, TabsProps } from './Tabs';
+export { Tabs, TabItem, TabsProps } from './Tabs';
 //# sourceMappingURL=index.d.ts.map

dist/src/components/Tabs/styled.d.ts

 /// <reference types="react" />
-import { TabProps } from './Tabs';
-export declare const StyledTabs: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    role: "tablist";
-}, "role">;
+import { Flex } from '../Flex';
+import { TabItem } from './Tabs';
+interface TabProps extends Omit<TabItem, 'title'> {
+    activeTab?: string;
+}
+export declare const StyledTabs: import("styled-components").StyledComponent<typeof Flex, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTab: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, import("styled-components").DefaultTheme, TabProps, never>;
+export {};
 //# sourceMappingURL=styled.d.ts.map

dist/src/components/Tabs/Tabs.d.ts

@@ -0,15 +1,15 @@
+import { ThemeInterface } from '@bigcommerce/big-design-theme';
 import React from 'react';
-export interface TabProps {
-    activeTab?: string;
+export interface TabItem {
+    id: string;
+    title: string;
+    disabled?: boolean;
 }
 export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
-    activeTab?: string;
-    onTabClick(tabId: string): void;
+    activeTab?: TabItem['id'];
+    items?: TabItem[];
+    theme?: ThemeInterface;
+    onTabClick?(tabId: TabItem['id']): void;
 }
-export declare class Tabs extends React.PureComponent<TabsProps> {
-    static Tab: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("..").ButtonProps & React.RefAttributes<HTMLButtonElement>>, import("styled-components").DefaultTheme, TabProps, never>;
-    render(): JSX.Element;
-    private renderChildren;
-    private handleOnTabClick;
-}
+export declare const Tabs: React.FC<TabsProps>;
 //# sourceMappingURL=Tabs.d.ts.map

dist/src/components/Textarea/Textarea.d.ts

@@ -20,3 +20,3 @@ import { ThemeInterface } from '@bigcommerce/big-design-theme';
     static Error: React.FunctionComponent<import("../Typography").SmallProps>;
-    static Label: React.FunctionComponent<React.LabelHTMLAttributes<HTMLLabelElement>>;
+    static Label: React.FunctionComponent<import("../Form/Label/Label").LabelProps>;
     private readonly uniqueId;
@@ -23,0 +23,0 @@ private readonly MAX_ROWS;

dist/src/utils/index.d.ts

@@ -0,2 +1,3 @@
+export * from './typedMemo';
 export * from './uniqueId';
 //# sourceMappingURL=index.d.ts.map

package.json

 {
   "name": "@bigcommerce/big-design",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "private": false,
@@ -43,4 +43,4 @@ "sideEffects": false,
   "dependencies": {
-    "@bigcommerce/big-design-icons": "^0.3.0",
-    "@bigcommerce/big-design-theme": "^0.1.2",
+    "@bigcommerce/big-design-icons": "^0.4.0",
+    "@bigcommerce/big-design-theme": "^0.2.0",
     "@types/hoist-non-react-statics": "^3.3.0",
@@ -64,3 +64,3 @@ "downshift": "^3.2.7",
     "@babel/preset-typescript": "^7.1.0",
-    "@bigcommerce/configs": "^0.6.0",
+    "@bigcommerce/configs": "^0.7.0",
     "@testing-library/jest-dom": "^4.0.0",
@@ -95,3 +95,3 @@ "@testing-library/react": "^8.0.7",
   },
-  "gitHead": "2622f51091dd35b26e9899030daec7b160e4ecb2"
+  "gitHead": "787b28beeeea22037557a6c6cd65940478a26199"
 }

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

1044860

increased by11.66%

Number of package files

354

increased by4.73%

Lines of code

10902

increased by10.64%

Dependency changes

• + Added@bigcommerce/big-design-icons@0.4.0(transitive)

• + Added@bigcommerce/big-design-theme@0.2.0(transitive)

• - Removed@bigcommerce/big-design-icons@0.3.0(transitive)

• - Removed@bigcommerce/big-design-theme@0.1.2(transitive)

• Updated@bigcommerce/big-design-icons@^0.4.0

• Updated@bigcommerce/big-design-theme@^0.2.0