@oliasoft-open-source/react-ui-library 3.12.0-beta-21 → 3.12.0-beta-24

package/dist/components/modal/modal.stories.js

@@ -1,107 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useArgs } from "@storybook/addons";
-import { Modal } from "./modal";
-import { Button } from "../button/button";
-import { Dialog } from "../dialog/dialog";
-import { Popover } from "../popover/popover";
-import { Input } from "../input/input";
-import { InputGroup } from "../input-group/input-group";
-import { Field } from "../form/field";
-import { Menu } from "../menu/menu";
-import { Select } from "../select/select";
-import { Spacer } from "../layout/spacer/spacer";
-import { Tooltip } from "../tooltip/tooltip";
-import { MenuType } from "../menu/enum";
-import { TriggerType } from "../../common-enum";
-export default {
-    title: 'Modals/Modal',
-    component: Modal,
-    args: {
-        visible: true,
-        centered: true,
-        width: '300px',
-        heading: 'Are you sure?',
-        content: _jsx(_Fragment, { children: "This will complete the transaction" }),
-        footer: (_jsxs(_Fragment, { children: [_jsx(Button, { label: "Okay", colored: true, onClick: () => { } }), _jsx(Button, { label: "Cancel", onClick: () => { } })] })),
-        onClose: () => { },
-    },
-    parameters: {
-        docs: {
-            story: {
-                inline: false,
-                iframeHeight: 400,
-            },
-        },
-    },
-};
-const Template = (args) => {
-    const [{ visible, centered, ...dialogProps }, updateArgs] = useArgs();
-    const toggleModal = () => {
-        updateArgs({ visible: !visible });
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(Modal, { visible: visible, centered: centered, children: _jsx(Dialog, { dialog: {
-                        ...dialogProps,
-                        onClose: toggleModal,
-                    } }) }), _jsx(Button, { label: "Open Modal", onClick: toggleModal })] }));
-};
-export const Default = Template.bind({});
-export const Centered = Template.bind({});
-Centered.args = { centered: true };
-export const LineBreak = Template.bind({});
-LineBreak.args = { content: ['This is a', 'new line!'] };
-export const Scroll = Template.bind({});
-Scroll.args = {
-    scroll: true,
-    content: (_jsx("div", { children: 'Example modal content goes here lorem ipsum. '.repeat(100) })),
-};
-export const FullWidth = Template.bind({});
-FullWidth.args = {
-    width: '100%',
-    content: (_jsx("div", { children: 'Example modal content goes here lorem ipsum. '.repeat(100) })),
-};
-export const NoContentPadding = Template.bind({});
-NoContentPadding.args = { contentPadding: 0 };
-export const WithPopoverLayers = Template.bind({});
-WithPopoverLayers.args = {
-    content: (_jsxs(_Fragment, { children: [_jsx(Tooltip, { text: "Tooltip text", children: "Hover for tooltip" }), _jsx(Spacer, {}), _jsx(Field, { label: "Custom Select", helpText: "Select an animal", children: _jsx(Select, { name: "example", options: [
-                        'Aardvarks',
-                        'Kangaroos',
-                        'Monkeys',
-                        'Possums',
-                        'Gorilla',
-                        'Puma',
-                        'Patagonian Mara',
-                        'Tarsier',
-                        'Koala',
-                        'Panda',
-                        'Red Panda',
-                        'Impala',
-                        'Tiger',
-                        'Crocodile',
-                        'Bat',
-                    ], onChange: () => { }, value: "Monkeys", error: "Bad value" }) }), _jsx(Field, { label: "Nested Menu", children: _jsx(Menu, { maxHeight: "240px", menu: {
-                        label: 'Menu',
-                        trigger: TriggerType.DROP_DOWN_BUTTON,
-                        sections: [
-                            {
-                                type: MenuType.MENU,
-                                menu: {
-                                    trigger: 'Text',
-                                    label: 'Children',
-                                    sections: [...Array(100).keys()].map(() => ({
-                                        type: 'Option',
-                                        label: Math.random().toString(36).substring(7),
-                                        onClick: () => { },
-                                    })),
-                                },
-                            },
-                            ...[...Array(100).keys()].map(() => ({
-                                type: MenuType.OPTION,
-                                label: Math.random().toString(36).substring(7),
-                                onClick: () => { },
-                            })),
-                        ],
-                    } }) }), _jsx(Popover, { content: _jsxs(InputGroup, { small: true, children: [_jsx(Input, { value: "Value", width: "150px", error: "Bad value" }), _jsx(Button, { colored: true, label: "Save", onClick: () => { } }), _jsx(Button, { label: "Cancel", onClick: () => {
-                                /* You'll need to define the 'close' action here */
-                            } })] }), children: _jsx(Button, { colored: true, label: "Toggle me", onClick: () => { } }) })] })),
-};

package/dist/components/number-input/number-input.d.ts

@@ -1,26 +0,0 @@
-import React, { ChangeEvent, FocusEvent } from 'react';
-export interface INumberInputProps {
-    name?: string | {
-        fieldName: string;
-    };
-    placeholder?: string;
-    disabled?: boolean;
-    error?: string | boolean;
-    left?: boolean;
-    small?: boolean;
-    width?: string | number;
-    value?: string | number;
-    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
-    tabIndex?: number;
-    testId?: string;
-    tooltip?: string | number | React.ReactNode;
-    warning?: string | boolean;
-    validationCallback?: (name: string | {
-        fieldName: string;
-    }, error: string | null) => void;
-    allowEmpty?: boolean;
-    isInTable?: boolean;
-    groupOrder?: any;
-}
-export declare const NumberInput: ({ name, placeholder, disabled, error, left, small, width, value, onChange, onFocus, tabIndex, testId, tooltip, warning, validationCallback, allowEmpty, isInTable, groupOrder, }: INumberInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/number-input/number-input.js

@@ -1,66 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import { validateNumber, cleanNumStr } from '@oliasoft-open-source/units';
-import { Input } from '../input/input';
-const getStringName = (name) => {
-    if (!name)
-        return '';
-    if (typeof name === 'string') {
-        return name;
-    }
-    return name.fieldName;
-};
-export const NumberInput = ({ name, placeholder = '', disabled = false, error = false, left = false, small = false, width = '100%', value = '', onChange = () => { }, onFocus = () => { }, tabIndex = 0, testId, tooltip = null, warning = false, validationCallback = () => { }, allowEmpty = false, isInTable, groupOrder, }) => {
-    const [displayValue, setDisplayValue] = useState(value);
-    const [validationError, setValidationError] = useState(null);
-    const stringName = getStringName(name);
-    const validateInputValue = (value) => {
-        let validation = validateNumber(value);
-        if ((allowEmpty && value === '') || validation.valid) {
-            return { ...validation, valid: true, errors: undefined };
-        }
-        else {
-            return validation;
-        }
-    };
-    useEffect(() => {
-        const { valid, errors } = validateInputValue(value);
-        setDisplayValue(value);
-        if (valid) {
-            setValidationError(null);
-            validationCallback(stringName, null);
-        }
-        else {
-            const firstError = errors && errors.length ? errors[0] : null;
-            setValidationError(firstError);
-            validationCallback(stringName, firstError);
-        }
-    }, [value, error]);
-    const onSetValue = (evt) => {
-        const input = evt.target;
-        const { value } = input;
-        const inputValue = cleanNumStr(value.replaceAll(' ', '').replaceAll('|', ''));
-        const { valid, errors } = validateInputValue(inputValue);
-        if (valid) {
-            const newEvent = {
-                ...evt,
-                target: {
-                    ...evt.target,
-                    value: inputValue,
-                    name: stringName,
-                },
-            };
-            onChange(newEvent);
-            setDisplayValue(inputValue);
-            setValidationError(null);
-            validationCallback(stringName, null);
-        }
-        else {
-            setDisplayValue(inputValue);
-            const firstError = errors && errors.length ? errors[0] : null;
-            setValidationError(firstError);
-            validationCallback(stringName, firstError);
-        }
-    };
-    return (_jsx(Input, { type: "text", name: stringName, testId: testId, disabled: disabled, placeholder: placeholder, value: displayValue, onChange: onSetValue, onFocus: onFocus, error: error || validationError, warning: warning, right: !left, small: small, width: width, isInTable: isInTable, groupOrder: groupOrder, tabIndex: tabIndex, tooltip: tooltip }, stringName));
-};

package/dist/components/number-input/number-input.stories.d.ts

@@ -1,13 +0,0 @@
-import { INumberInputProps } from './number-input';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, INumberInputProps>;
-export declare const Small: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, INumberInputProps>;
-export declare const Width: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, INumberInputProps>;
-export declare const Left: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, INumberInputProps>;
-export declare const Disabled: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, INumberInputProps>;
-export declare const AllowEmpty: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, INumberInputProps>;
-export declare const Warning: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, INumberInputProps>;
-export declare const Error: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, INumberInputProps>;
-export declare const BadInput: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, INumberInputProps>;
-export declare const TestInputGroup: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/number-input/number-input.stories.js

@@ -1,43 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useArgs } from '@storybook/addons';
-import { NumberInput } from './number-input';
-import { InputGroup } from '../input-group/input-group';
-import { InputGroupAddon } from '../input-group/input-group-addon/input-group-addon';
-import { Select } from '../select/select';
-export default {
-    title: 'Forms/NumberInput',
-    component: NumberInput,
-    parameters: {
-        canvas: {
-            page: null,
-        },
-    },
-    args: {
-        label: 'Label',
-    },
-};
-const Template = (args) => {
-    const [_, updateArgs] = useArgs();
-    const handleChange = (evt) => {
-        updateArgs({ value: evt.target.value });
-    };
-    return _jsx(NumberInput, { onChange: handleChange, value: 123, ...args });
-};
-export const Default = Template.bind({});
-export const Small = Template.bind({});
-Small.args = { small: true };
-export const Width = Template.bind({});
-Width.args = { width: '150px' };
-export const Left = Template.bind({});
-Left.args = { left: true };
-export const Disabled = Template.bind({});
-Disabled.args = { disabled: true };
-export const AllowEmpty = Template.bind({});
-AllowEmpty.args = { allowEmpty: true, value: '' };
-export const Warning = Template.bind({});
-Warning.args = { warning: 'This input number is almost 100!', value: '99' };
-export const Error = Template.bind({});
-Error.args = { error: 'This is a error message' };
-export const BadInput = Template.bind({});
-BadInput.args = { value: '123test' };
-export const TestInputGroup = () => (_jsxs(InputGroup, { small: true, children: [_jsx(NumberInput, { value: 123 }), _jsx(InputGroupAddon, { children: "to" }), _jsx(NumberInput, { value: 123 }), _jsx(Select, { options: [{ value: 'units', label: 'units' }], width: "auto", value: "units" })] }));

package/dist/components/option-dropdown/enum.d.ts

@@ -1,5 +0,0 @@
-export declare enum DropdownType {
-    HEADING = "Heading",
-    DIVIDER = "Divider",
-    DEFAULT = "Default"
-}

package/dist/components/option-dropdown/enum.js

@@ -1,6 +0,0 @@
-export var DropdownType;
-(function (DropdownType) {
-    DropdownType["HEADING"] = "Heading";
-    DropdownType["DIVIDER"] = "Divider";
-    DropdownType["DEFAULT"] = "Default";
-})(DropdownType || (DropdownType = {}));

package/dist/components/option-dropdown/heading.d.ts

@@ -1,4 +0,0 @@
-export interface IOptDropdownHeadingProps {
-    label: string;
-}
-export declare const Heading: ({ label }: IOptDropdownHeadingProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/option-dropdown/heading.js

@@ -1,3 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styles from './option-dropdown.module.less';
-export const Heading = ({ label }) => (_jsx("div", { className: styles.heading, children: label }));

package/dist/components/option-dropdown/layer.d.ts

@@ -1,16 +0,0 @@
-import React, { ReactElement } from 'react';
-import { DropdownType } from "./enum";
-interface IOptionType {
-    type?: DropdownType;
-    label?: string;
-    value?: any;
-    selected?: boolean;
-}
-export interface IOptDropdownLayerProps {
-    options: IOptionType[];
-    onChangeOptions: (event: React.MouseEvent<HTMLAnchorElement>, options: IOptionType[]) => void;
-    showHeader?: boolean;
-    maxHeight?: string | number;
-}
-export declare const Layer: ({ options, onChangeOptions, showHeader, maxHeight, }: IOptDropdownLayerProps) => ReactElement;
-export {};

package/dist/components/option-dropdown/layer.js

@@ -1,43 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import cx from 'classnames';
-import { Option } from './option';
-import { Divider } from '../divider/divider';
-import styles from './option-dropdown.module.less';
-import { Heading } from './heading';
-import { DropdownType } from "./enum";
-export const Layer = ({ options, onChangeOptions, showHeader, maxHeight, }) => {
-    return (_jsxs("div", { className: cx('menu', styles.menu), style: { maxHeight }, children: [showHeader && (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.header, children: [_jsx("a", { onClick: (evt) => {
-                                    const next = options.map((option) => ({
-                                        ...option,
-                                        selected: true,
-                                    }));
-                                    onChangeOptions(evt, next);
-                                }, children: "All" }), _jsx("a", { onClick: (evt) => {
-                                    const next = options.map((option) => ({
-                                        ...option,
-                                        selected: false,
-                                    }));
-                                    onChangeOptions(evt, next);
-                                }, children: "Clear" }), _jsx("a", { onClick: (evt) => {
-                                    const next = options.map((option) => ({
-                                        ...option,
-                                        selected: !option.selected,
-                                    }));
-                                    onChangeOptions(evt, next);
-                                }, children: "Invert" })] }), _jsx(Divider, { margin: "7px" })] })), options.map((option, index) => {
-                switch (option.type) {
-                    case DropdownType.HEADING:
-                        return _jsx(Heading, { label: option.label }, index);
-                    case DropdownType.DIVIDER:
-                        return _jsx(Divider, { margin: "7px" }, index);
-                    default:
-                        return (_jsx(Option, { option: option, onChange: (evt) => {
-                                const { value } = option;
-                                const next = options.map((option) => option.value !== value
-                                    ? option
-                                    : { ...option, selected: !option.selected });
-                                onChangeOptions(evt, next);
-                            } }, index));
-                }
-            })] }));
-};

package/dist/components/option-dropdown/option-dropdown.d.ts

@@ -1,19 +0,0 @@
-import { ReactElement, ChangeEvent } from 'react';
-interface IOptionType {
-    label?: string;
-    value?: string | number;
-    selected?: boolean;
-}
-export interface IOptionDropdownProps {
-    name?: string;
-    label: string;
-    options: IOptionType[];
-    onChange: (event: ChangeEvent<HTMLInputElement & {
-        name?: string;
-        value: IOptionType[];
-    }>) => void;
-    showHeader?: boolean;
-    maxHeight?: string;
-}
-export declare const OptionDropdown: ({ name, label, options, onChange, showHeader, maxHeight, }: IOptionDropdownProps) => ReactElement;
-export {};

package/dist/components/option-dropdown/option-dropdown.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Menu } from '../menu/menu';
-import { Layer } from './layer';
-import { TriggerType } from "../../common-enum";
-export const OptionDropdown = ({ name, label, options, onChange, showHeader = true, maxHeight = '40vh', }) => {
-    return (_jsx(Menu, { menu: {
-            label,
-            trigger: TriggerType.DROP_DOWN_BUTTON,
-            possiblePlacements: ['top-start', 'bottom-start'],
-            sections: (_jsx(Layer, { options: options, onChangeOptions: (evt, nextOptions) => {
-                    evt.stopPropagation();
-                    evt.target.name = name;
-                    evt.target.value = nextOptions;
-                    onChange(evt);
-                }, showHeader: showHeader, maxHeight: maxHeight })),
-        } }));
-};

package/dist/components/option-dropdown/option-dropdown.stories.d.ts

@@ -1,5 +0,0 @@
-import { IOptionDropdownProps } from './option-dropdown';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IOptionDropdownProps>;
-export declare const ScrollOverflow: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IOptionDropdownProps>;

package/dist/components/option-dropdown/option-dropdown.stories.js

@@ -1,35 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useArgs } from '@storybook/addons';
-import { OptionDropdown } from './option-dropdown';
-const options = [
-    { label: 'Animals', type: 'Heading' },
-    { type: 'Divider' },
-    { label: 'Aardvarks', value: 'termites' },
-    { label: 'Kangaroos', value: 'grass' },
-    { label: 'Monkeys', value: 'bananas' },
-];
-export default {
-    title: 'Forms/OptionDropdown',
-    component: OptionDropdown,
-    args: {
-        label: 'Label',
-        options,
-    },
-};
-const Template = (args) => {
-    const [_, updateArgs] = useArgs();
-    const handleChange = (evt) => {
-        updateArgs({ options: evt.target.value });
-    };
-    return (_jsx(OptionDropdown
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    , { ...args, onChange: handleChange }));
-};
-export const Default = Template.bind({});
-export const ScrollOverflow = Template.bind({});
-ScrollOverflow.args = {
-    options: [...Array(50)].map((_, index) => ({
-        label: `Item #${index}`,
-        value: index,
-    })),
-};

package/dist/components/option-dropdown/option.d.ts

@@ -1,10 +0,0 @@
-import React, { ReactElement } from 'react';
-export interface IOptDropdownOptionProps {
-    option: {
-        key?: string;
-        label?: string;
-        selected?: boolean;
-    };
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-export declare const Option: ({ option, onChange, }: IOptDropdownOptionProps) => ReactElement;

package/dist/components/option-dropdown/option.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { CheckBox } from '../check-box/check-box';
-import styles from './option-dropdown.module.less';
-export const Option = ({ option, onChange, }) => {
-    const { key, label, selected } = option;
-    return (_jsx("div", { className: styles.item, children: _jsx(CheckBox, { label: label, noMargin: true, checked: selected, onChange: onChange }) }, key));
-};

package/dist/components/pagination/pagination.d.ts

@@ -1,13 +0,0 @@
-import { IPaginationPerPageType } from './pagination.interface';
-export interface IPagination {
-    rowCount: number;
-    selectedPage: string | number;
-    onSelectPage?: (value: number) => void;
-    rowsPerPage?: IPaginationPerPageType;
-    small?: boolean;
-    errorMessageTemplate?: string;
-}
-export interface IPaginationProps {
-    pagination: IPagination;
-}
-export declare const Pagination: ({ pagination }: IPaginationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/pagination/pagination.interface.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-export interface IPaginationValidationResult {
-    valid: boolean;
-    error: string | null;
-}
-export interface IPaginationOptionType {
-    label?: string;
-    value?: string | number;
-    selected?: boolean;
-}
-export interface IPaginationPerPageType {
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    options?: IPaginationOptionType[];
-    value?: string | number;
-}

package/dist/components/pagination/pagination.interface.js

@@ -1 +0,0 @@
-export {};

package/dist/components/pagination/pagination.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { Select } from '../select/select';
-import { Input } from '../input/input';
-import { numberOfPages, validateSelectedPage } from './pagination.viewdata';
-import styles from './pagination.module.less';
-import { Button } from '../button/button';
-import { InputGroup } from '../input-group/input-group';
-import { InputGroupAddon } from '../input-group/input-group-addon/input-group-addon';
-import { IconType } from "../../common-enum";
-export const Pagination = ({ pagination }) => {
-    const { rowCount, selectedPage, small, onSelectPage, rowsPerPage, errorMessageTemplate, } = pagination;
-    const showAll = Number(rowsPerPage?.value) === 0;
-    const numPages = numberOfPages(rowCount, rowsPerPage);
-    const [unvalidatedSelectedPage, setUnvalidatedSelectedPage] = useState(String(selectedPage));
-    useEffect(() => {
-        setUnvalidatedSelectedPage(String(selectedPage));
-    }, [selectedPage]);
-    const { error } = validateSelectedPage(unvalidatedSelectedPage, numPages, errorMessageTemplate);
-    const setSelectedPage = (value) => {
-        const { valid } = validateSelectedPage(value, numPages, errorMessageTemplate);
-        setUnvalidatedSelectedPage(value);
-        if (valid && value !== '' && onSelectPage) {
-            onSelectPage(Number(value));
-        }
-    };
-    return (_jsxs("div", { className: styles.paginationContainer, children: [rowsPerPage && (_jsx("div", { style: { flexShrink: 0 }, children: _jsx(Select, { onChange: (evt) => {
-                        if (rowsPerPage.onChange) {
-                            rowsPerPage.onChange(evt);
-                        }
-                        setSelectedPage(String(1));
-                    }, options: rowsPerPage.options, native: !!rowsPerPage.options, small: small, width: "auto", value: rowsPerPage.value }) })), _jsx(Button, { small: small, round: true, basic: true, icon: IconType.CHEVRON_DOUBLE_LEFT, onClick: () => setSelectedPage(String(1)), disabled: showAll || selectedPage === 1 }), _jsx(Button, { small: small, round: true, basic: true, icon: IconType.CHEVRON_LEFT, onClick: () => setSelectedPage(String(Number(selectedPage) - 1)), disabled: showAll || selectedPage === 1 }), _jsxs(InputGroup, { small: small, width: "auto", children: [_jsx(Input, { right: true, value: unvalidatedSelectedPage, placeholder: String(selectedPage), onChange: (evt) => setSelectedPage(evt.target.value), width: "50px", disabled: showAll || numPages <= 1, error: error }), _jsxs(InputGroupAddon, { children: ["of ", numPages] })] }), _jsx(Button, { small: small, round: true, basic: true, icon: IconType.CHEVRON_RIGHT, onClick: () => setSelectedPage(String(Number(selectedPage) + 1)), disabled: showAll || selectedPage === numPages }), _jsx(Button, { small: small, round: true, basic: true, icon: IconType.CHEVRON_DOUBLE_RIGHT, onClick: () => setSelectedPage(String(numPages)), disabled: showAll || selectedPage === numPages })] }));
-};

package/dist/components/pagination/pagination.stories.d.ts

@@ -1,7 +0,0 @@
-import { StoryFn } from '@storybook/react';
-import { IPaginationProps } from './pagination';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-export declare const Default: StoryFn<IPaginationProps>;
-export declare const RowsPerPage: () => import("react/jsx-runtime").JSX.Element;
-export declare const Small: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/pagination/pagination.stories.js

@@ -1,62 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Pagination } from './pagination';
-const pagination = {
-    rowCount: 500,
-    selectedPage: 1,
-    onSelectPage: () => { },
-};
-export default {
-    title: 'Basic/Pagination',
-    component: Pagination,
-    args: {
-        pagination,
-    },
-};
-export const Default = () => {
-    const [selectedPage, setSelectedPage] = useState(1);
-    return (_jsx(Pagination, { pagination: {
-            rowCount: 500,
-            selectedPage,
-            onSelectPage: (evt) => setSelectedPage(evt),
-        } }));
-};
-export const RowsPerPage = () => {
-    const [selectedPage, setSelectedPage] = useState(1);
-    const [rowsPerPage, setRowsPerPage] = useState(20);
-    return (_jsx(Pagination, { pagination: {
-            rowCount: 500,
-            selectedPage,
-            rowsPerPage: {
-                onChange: (evt) => setRowsPerPage(Number(evt.target.value)),
-                options: [
-                    { label: '10 / page', value: 10 },
-                    { label: '20 / page', value: 20 },
-                    { label: '50 / page', value: 50 },
-                    { label: 'Show all', value: 0 },
-                ],
-                value: rowsPerPage,
-            },
-            onSelectPage: (evt) => setSelectedPage(evt),
-        } }));
-};
-export const Small = () => {
-    const [selectedPage, setSelectedPage] = useState(1);
-    const [rowsPerPage, setRowsPerPage] = useState(20);
-    return (_jsx(Pagination, { pagination: {
-            small: true,
-            rowCount: 500,
-            selectedPage,
-            rowsPerPage: {
-                onChange: (evt) => setRowsPerPage(Number(evt.target.value)),
-                options: [
-                    { label: '10 / page', value: 10 },
-                    { label: '20 / page', value: 20 },
-                    { label: '50 / page', value: 50 },
-                    { label: 'Show all', value: 0 },
-                ],
-                value: rowsPerPage,
-            },
-            onSelectPage: (evt) => setSelectedPage(evt),
-        } }));
-};

package/dist/components/pagination/pagination.test.d.ts

@@ -1 +0,0 @@
-export {};