@skedulo/sked-ui 0.0.0-preview-react-18

package/dist/components/icon/iconPaths.d.ts

@@ -0,0 +1,131 @@
+declare const _default: {
+    actions: any;
+    activity: any;
+    archive: any;
+    arrowLeft: any;
+    arrowUp: any;
+    arrowDown: any;
+    attachmentMessaging: any;
+    attachments: any;
+    attribute: any;
+    attributeFilled: any;
+    availability: any;
+    bell: any;
+    bellAlert: any;
+    bookingGrid: any;
+    bookmark: any;
+    calendar: any;
+    calendarNavLeft: any;
+    calendarNavRight: any;
+    cancel: any;
+    cardSize: any;
+    close: any;
+    chat: any;
+    chatFilled: any;
+    chevronUp: any;
+    chevronDown: any;
+    chevronDownFilled: any;
+    chevronLeft: any;
+    chevronRight: any;
+    columns: any;
+    contact: any;
+    content: any;
+    copy: any;
+    critical: any;
+    dashboard: any;
+    dateRange: any;
+    details: any;
+    dispatch: any;
+    edit: any;
+    ellipsisVertical: any;
+    emoji: any;
+    exclamation: any;
+    exclamationFill: any;
+    filter: any;
+    filterFunnel: any;
+    filterNew: any;
+    glasses: any;
+    globe: any;
+    grid: any;
+    grip: any;
+    hash: any;
+    help: any;
+    helpFilled: any;
+    hide: any;
+    info: any;
+    infoFill: any;
+    infoOutline: any;
+    jobDependency: any;
+    jobFields: any;
+    jobFill: any;
+    jobs: any;
+    location: any;
+    locked: any;
+    logout: any;
+    map: any;
+    mapResource: any;
+    megaphone: any;
+    mention: any;
+    minus: any;
+    normal: any;
+    notes: any;
+    notify: any;
+    openLink: any;
+    optimise: any;
+    optimiseFill: any;
+    outOfFilter: any;
+    paperFold: any;
+    phone: any;
+    pin: any;
+    planeLanding: any;
+    planeLandingGround: any;
+    planeTakeoff: any;
+    plus: any;
+    processing: any;
+    push: any;
+    recurring: any;
+    reload: any;
+    remove: any;
+    reorder: any;
+    resource: any;
+    resourceAbove: any;
+    resourceAdd: any;
+    resourceBelow: any;
+    resourceRemove: any;
+    restore: any;
+    salesforce: any;
+    scheduling: any;
+    search: any;
+    settings: any;
+    send: any;
+    shift: any;
+    shiftOvernight: any;
+    skedulo: any;
+    skeduloText: any;
+    sms: any;
+    sortAscending: any;
+    sortDescending: any;
+    suggest: any;
+    swimlane: any;
+    swimlaneVertical: any;
+    tag: any;
+    tasks: any;
+    tick: any;
+    tickCircle: any;
+    time: any;
+    timeConstraint: any;
+    today: any;
+    thread: any;
+    trash: any;
+    unlocked: any;
+    unschedule: any;
+    upDown: any;
+    upload: any;
+    urgent: any;
+    view: any;
+    warning: any;
+    warningFill: any;
+    zoomIn: any;
+    zoomOut: any;
+};
+export default _default;

package/dist/components/info-card/InfoCard.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * This is a wrapper for the other InfoCard components to sit in
+ */
+export declare const InfoCard: React.FC<React.HTMLAttributes<HTMLDivElement>>;

package/dist/components/info-card/InfoCard.stories.d.ts

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

package/dist/components/info-card/InfoCardBody.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+interface IInfoCardBody {
+    description: React.ReactNode;
+    contact?: React.ReactNode;
+    address?: React.ReactNode;
+    tags?: React.ReactNode;
+    /**
+     * This will be wrapped in an InlineBanner
+     */
+    exception?: React.ReactNode;
+}
+export declare const InfoCardBody: React.FC<IInfoCardBody & React.HTMLAttributes<HTMLDivElement>>;
+export {};

package/dist/components/info-card/InfoCardFooter.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const InfoCardFooter: React.FC<React.HTMLAttributes<HTMLDivElement>>;

package/dist/components/info-card/InfoCardHeader.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { ICardActionMenu } from '../menus/cardactionmenu/CardActionMenu';
+interface IInfoCardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    heading: JSX.Element | React.ReactNode;
+    subHeading?: JSX.Element | React.ReactNode;
+    onClose?: ICardActionMenu['onClose'];
+    onView?: ICardActionMenu['onView'];
+    actions?: ICardActionMenu['menuItems'];
+}
+export declare const InfoCardHeader: React.FC<IInfoCardHeaderProps>;
+export {};

package/dist/components/info-card/index.d.ts

@@ -0,0 +1,4 @@
+export * from './InfoCard';
+export * from './InfoCardHeader';
+export * from './InfoCardBody';
+export * from './InfoCardFooter';

package/dist/components/inline-banner/InlineBanner.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { IStatusIconProps } from '../status-icon/StatusIcon';
+export interface IInlineBannerProps extends React.HTMLAttributes<HTMLDivElement> {
+    type: IStatusIconProps['status'];
+}
+/**
+ * Displays a inline banner with various styling depending on the type.
+ */
+export declare const InlineBanner: React.SFC<IInlineBannerProps & React.HTMLAttributes<HTMLDivElement>>;

package/dist/components/inline-banner/InlineBanner.spec.d.ts

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

package/dist/components/inline-banner/InlineBanner.stories.d.ts

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

package/dist/components/link/Link.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface ILinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    type?: 'primary' | 'secondary';
+}
+export declare const Link: ({ type, className, children, ...otherProps }: ILinkProps) => JSX.Element;

package/dist/components/link/Link.spec.d.ts

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

package/dist/components/link/Link.stories.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { ComponentStory } from '@storybook/react';
+import { ILinkProps } from './Link';
+declare const _default: {
+    title: string;
+    component: ({ type, className, children, ...otherProps }: ILinkProps) => JSX.Element;
+    argTypes: {
+        type: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Basic: ComponentStory<({ type, className, children, ...otherProps }: ILinkProps) => JSX.Element>;

package/dist/components/loader/Loading.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+interface IProps {
+    /**
+     * className applied to the containing div
+     */
+    className?: string;
+    /**
+     * Alignment of the component
+     */
+    align?: 'left' | 'center' | 'right';
+}
+/**
+ * Loading indicator for lists
+ */
+export declare const Loading: React.FunctionComponent<IProps>;
+export {};

package/dist/components/loader/Loading.stories.d.ts

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

package/dist/components/loader/__tests__/Loading.spec.d.ts

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

package/dist/components/loader/spinner/LoadingSpinner.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+interface ILoadingSpinnerProps {
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * The size of the loader. If no prop is passed the default size is 24px.
+     */
+    size?: number;
+    /**
+     * The color of the loader. If no prop is passed, it uses the color of parent container.
+     */
+    color?: string;
+}
+/**
+ * Loading Spinner inherits the color used in the parent element.
+ * It accepts a size prop which defines the size of the spinner in px.
+ */
+export declare const LoadingSpinner: React.SFC<ILoadingSpinnerProps>;
+export {};

package/dist/components/lozenge/CustomLozenge.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IconNames } from '../icon/Icon';
+import { ITooltipPosition } from '../popups/tooltip/Tooltip';
+export declare type CustomColor = 'yellow-900' | 'yellow-800' | 'yellow-700' | 'yellow-600' | 'yellow-300' | 'yellow-200' | 'yellow-100' | 'orange-900' | 'orange-800' | 'orange-700' | 'orange-600' | 'orange-300' | 'orange-200' | 'orange-100' | 'red-900' | 'red-800' | 'red-700' | 'red-600' | 'red-300' | 'red-200' | 'red-100' | 'pink-900' | 'pink-800' | 'pink-700' | 'pink-600' | 'pink-300' | 'pink-200' | 'pink-100' | 'rose-900' | 'rose-800' | 'rose-700' | 'rose-600' | 'rose-300' | 'rose-200' | 'rose-100' | 'maroon-900' | 'maroon-800' | 'maroon-700' | 'maroon-600' | 'maroon-300' | 'maroon-200' | 'maroon-100' | 'green-900' | 'green-800' | 'green-700' | 'green-600' | 'green-300' | 'green-200' | 'green-100' | 'lime-900' | 'lime-800' | 'lime-700' | 'lime-600' | 'lime-300' | 'lime-200' | 'lime-100' | 'teal-900' | 'teal-800' | 'teal-700' | 'teal-600' | 'teal-300' | 'teal-200' | 'teal-100' | 'cyan-900' | 'cyan-800' | 'cyan-700' | 'cyan-600' | 'cyan-300' | 'cyan-200' | 'cyan-100' | 'sapphire-900' | 'sapphire-800' | 'sapphire-700' | 'sapphire-600' | 'sapphire-300' | 'sapphire-200' | 'sapphire-100' | 'purple-900' | 'purple-800' | 'purple-700' | 'purple-600' | 'purple-300' | 'purple-200' | 'purple-100' | 'indigo-900' | 'indigo-800' | 'indigo-700' | 'indigo-600' | 'indigo-300' | 'indigo-200' | 'indigo-100' | 'neutral-900' | 'neutral-850' | 'neutral-800' | 'neutral-750' | 'neutral-700' | 'neutral-650' | 'neutral-300' | 'neutral-200' | 'white';
+export declare type CustomBorderColor = CustomColor | 'transparent';
+interface ICustomLozenge {
+    label: string;
+    bg: CustomColor;
+    text: CustomColor;
+    border: CustomBorderColor;
+    bgHover?: CustomColor;
+    /**
+     * @default small
+     */
+    size?: 'small' | 'medium' | 'large';
+    icon?: IconNames;
+    tooltipPosition?: ITooltipPosition;
+}
+declare type LozengeProps = ICustomLozenge & React.HTMLAttributes<HTMLDivElement>;
+export declare const CustomLozenge: React.FC<LozengeProps>;
+export {};

package/dist/components/lozenge/Lozenge.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { IconNames } from '../icon/Icon';
+import { ITooltipPosition } from '../popups/tooltip/Tooltip';
+export declare type LozengeColors = 'neutral-light' | 'neutral' | 'orange' | 'green' | 'cyan' | 'red' | 'sapphire' | 'purple' | 'purple-dark' | 'purple-darker';
+export declare type LozengeTheme = 'transparent' | 'pale' | 'solid';
+interface ILozenge {
+    label: string;
+    color: LozengeColors;
+    /**
+     * @default pale
+     */
+    theme?: LozengeTheme;
+    /**
+     * @default small
+     */
+    size?: 'small' | 'medium' | 'large';
+    icon?: IconNames;
+    tooltipPosition?: ITooltipPosition;
+}
+declare type LozengeProps = ILozenge & React.HTMLAttributes<HTMLDivElement>;
+export declare const Lozenge: React.FC<LozengeProps>;
+export {};

package/dist/components/lozenge/Lozenge.stories.d.ts

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

package/dist/components/lozenge/__tests__/Lozenge.spec.d.ts

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

package/dist/components/menus/Menus.stories.d.ts

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

package/dist/components/menus/actionmenu/ActionMenu.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { IconButtonDropdown } from '../../buttons/icon-button-dropdown/IconButtonDropdown';
+export interface IActionMenu extends Omit<IconButtonDropdown, 'icon' | 'tooltipContent'> {
+    menuItems: {
+        label: string;
+        onClick: () => void;
+        disabled?: boolean;
+    }[];
+}
+/**
+ * ActionMenu is a utility component for generating a menu triggered from an ellipse icon
+ */
+export declare const ActionMenu: React.FC<IActionMenu>;

package/dist/components/menus/cardactionmenu/CardActionMenu.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { IActionMenu } from '../actionmenu/ActionMenu';
+export interface ICardActionMenu extends Partial<Pick<IActionMenu, 'menuItems'>> {
+    onView?: () => void;
+    onClose?: () => void;
+}
+/**
+ * CardActionMenu is used for InfoCards
+ */
+export declare const CardActionMenu: React.FC<ICardActionMenu>;

package/dist/components/menus/index.d.ts

@@ -0,0 +1,2 @@
+export * from './menu/Menu';
+export * from './actionmenu/ActionMenu';

package/dist/components/menus/menu/Menu.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export interface IMenuProps extends React.HTMLAttributes<HTMLUListElement> {
+    className?: string;
+}
+export interface IMenuItemProps extends React.HTMLAttributes<HTMLLIElement> {
+    className?: string;
+    /**
+     * Disabled list item
+     */
+    disabled?: boolean;
+    isHighlighted?: boolean;
+}
+/**
+ * The Menu component is used as a wrapper for list items when needed to display a menu. Pass in as many list items as you need by wrapping each in a MenuItem wrapper.
+ * An example component that makes use of the Menu is the ButtonDropdown component. You can disable individual list items by passing in a disabled prop.
+ */
+export declare const Menu: React.ForwardRefExoticComponent<IMenuProps & React.RefAttributes<HTMLUListElement>>;
+export declare const MenuItem: React.ForwardRefExoticComponent<IMenuItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/modals/Modal.spec.d.ts

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

package/dist/components/modals/Modal.stories.d.ts

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

package/dist/components/modals/Modals.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+declare type ModalContentProps = Pick<React.HTMLAttributes<HTMLDivElement>, 'className' | 'datatype'>;
+interface IDynamicModal {
+    header?: JSX.Element;
+    footer?: JSX.Element;
+    loading?: boolean;
+    scrollableContentClassNames?: string;
+}
+export declare const BaseModal: React.FC<Omit<ModalContentProps, 'className'>>;
+/**
+ * Use DynamicModal when you have long content in your modal and you want it restricted to the viewport.
+ * It accepts a header and footer which will remain static with the child content being placed in the
+ * scrollable section.
+ */
+export declare const DynamicModal: React.FC<IDynamicModal & ModalContentProps>;
+export interface IConfirmationModalProps {
+    onConfirm: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    onCancel: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    confirmButtonText?: string;
+    /**
+     * Used to indicate the current onConfirm action is in progress.
+     */
+    useWorkingStateOnConfirm?: boolean;
+}
+export interface IConfirmationModalState {
+    confirmActionLoading: boolean;
+}
+export declare class ConfirmationModal extends React.PureComponent<IConfirmationModalProps, IConfirmationModalState> {
+    constructor(props: IConfirmationModalProps);
+    handleConfirmButtonClick: () => void;
+    render(): JSX.Element;
+}
+export {};

package/dist/components/pagination/Pagination-utils.d.ts

@@ -0,0 +1 @@
+export declare function paginate(totalPages: number, currentPage?: number, noOfSiblings?: number): number[];

package/dist/components/pagination/Pagination-utils.spec.d.ts

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

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IPagination } from './interfaces';
+export declare const Pagination: React.FC<IPagination>;

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

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

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

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

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IPagination } from '../interfaces';
+export declare const PaginationCount: React.SFC<IPagination>;

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

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

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { IPagination } from '../interfaces';
+export declare const Arrow: React.FC<{
+    direction: 'left' | 'right';
+    disable: boolean;
+    onClick: (event: React.MouseEvent) => void;
+}>;
+export declare const Ellipsis: React.FC;
+export declare const Page: React.FC<{
+    pageNo: number;
+    isCurrent: boolean;
+    onClick?: (event: React.MouseEvent) => void;
+}>;
+export declare const PaginationPages: React.SFC<IPagination>;

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

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

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

@@ -0,0 +1,18 @@
+export interface IPagination {
+    /**
+     * Total number of items
+     */
+    itemsTotal: NonNullable<number>;
+    /**
+     * Number of items per page
+     */
+    itemsPerPage: NonNullable<number>;
+    currentPage: NonNullable<number>;
+    /**
+     * Optional value for number of pages displayed before/after current page item @default 1
+     * This will control the viewable range of pages so that there is always an even amount of page/ellipse elements
+     */
+    currentPageSiblings?: NonNullable<number>;
+    onPageChange?: (pageNumber: number) => void;
+    className?: string;
+}

package/dist/components/pill/Pill.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { IconNames } from '../icon/Icon';
+import { ITooltipPosition } from '../popups/tooltip/Tooltip';
+export interface IPillProps {
+    text: string;
+    /**
+     * Default position is right
+     */
+    tooltipPosition?: ITooltipPosition;
+    /**
+     * Default is dark
+     */
+    theme?: 'dark' | 'light';
+    iconName?: IconNames;
+    disabled?: boolean;
+    className?: string;
+    onClose?: (e: React.MouseEvent) => void;
+}
+/**
+ * Creates a Pill. Text will be truncated at 190px and a Tooltip will be enabled
+ * If you supply an onClose function, a close icon will appear and call that function on click
+ * @requires OverflowTooltip
+ * @requires Icon
+ */
+export declare const Pill: React.ForwardRefExoticComponent<IPillProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/pill/Pill.spec.d.ts

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

package/dist/components/pill/Pill.stories.d.ts

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

package/dist/components/popout/PopOut.d.ts

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { IPopOutBase } from './PopOutBase';
+declare type IPopOutBaseSubset = Omit<IPopOutBase, 'visible' | 'trigger'>;
+export interface IPopOutProps extends IPopOutBaseSubset {
+    /**
+     * The element you are rendering the content from
+     */
+    trigger: (isOpen?: IPopOutState['isOpen']) => IPopOutBase['trigger'];
+    /**
+     * The content to pop out
+     */
+    children: (closePopOut: () => void) => JSX.Element | React.ReactNode;
+    /**
+     * Close on clicking in the content area.  Defaults to false
+     */
+    closeOnFirstClick?: boolean;
+    /**
+     * Close content on clicking outside the content area. Defaults to false
+     */
+    closeOnOuterClick?: boolean;
+    /**
+     * Close content on document scroll
+     * Defaults to false
+     */
+    closeOnScroll?: boolean;
+    /**
+     * Delay the render of the pop out after the trigger event has been fired
+     */
+    delayShow?: number;
+    /**
+     * Open the popout container on mount, ignoring any trigger.
+     */
+    openOnMount?: boolean;
+    /**
+     * When the popout hides, fire this callback.
+     */
+    onClose?: () => void;
+    /**
+     * Event to fire on mouse leave of reference content
+     */
+    onMouseLeave?: React.MouseEventHandler<HTMLSpanElement>;
+    /**
+     * Event to fire on mouse over of reference content
+     */
+    onMouseOver?: React.MouseEventHandler<HTMLSpanElement>;
+    /**
+     * Prevent the display of the info window regardless of the trigger event
+     */
+    preventShow?: boolean;
+}
+export interface IPopOutState {
+    isOpen: boolean;
+}
+/**
+ * The PopOut component displays/hides its children when either the supplied trigger is clicked or if the openOnMount prop is supplied.
+ * Default placement is bottom-start
+ *
+ * @requires PopOutBase
+ */
+export declare const PopOut: (props: IPopOutProps) => JSX.Element;
+export {};

package/dist/components/popout/PopOut.stories.d.ts

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

package/dist/components/popout/PopOutBase.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import * as PopperJS from '@popperjs/core';
+import { StrictModifier } from 'react-popper';
+export interface IPopOutBase {
+    /**
+     * The element you are rendering the content from
+     */
+    className?: string;
+    /**
+     * Whether to add inline-block to the reference element
+     */
+    displayInline?: boolean;
+    trigger: JSX.Element;
+    triggerClassName?: string;
+    visible?: boolean;
+    /**
+     * Placement options supported by PopperJS
+     */
+    placement?: PopperJS.Options['placement'];
+    /**
+     * Modifiers supported by PopperJS if overriding defaults
+     */
+    modifiers?: PopperJS.Options['modifiers'];
+    /**
+     * Optional PopOut container to override Portal component if needed
+     */
+    popOutContainer?: (PopperWrappedContent: JSX.Element) => JSX.Element;
+    children?: React.ReactNode;
+    showArrow?: boolean;
+}
+export declare const DEFAULT_MODIFIERS: StrictModifier[];
+/**
+ * PopOutBase uses react-popper/popperjs under the hood and is a wrapper that sets up the Popperjs Manager, Reference and Popper.
+ * It will place any content next to the trigger based on whether it fits and what placement you specify.
+ * If you need click show/hide functionality, use @PopOut
+ *
+ * @requires react-popper
+ */
+export declare const PopOutBase: React.FC<IPopOutBase>;

package/dist/components/popout/useClickAway.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const useClickAway: (ref: React.RefObject<HTMLElement | null>, onClickAway: (event: Event) => void, events?: string[]) => void;

package/dist/components/popout/usePopOut.d.ts

@@ -0,0 +1,9 @@
+import { IPopOutProps } from './PopOut';
+declare type UsePopOutProps = Pick<IPopOutProps, 'delayShow' | 'preventShow' | 'onClose' | 'openOnMount'>;
+export declare const usePopOut: ({ delayShow, preventShow, onClose, openOnMount }: UsePopOutProps) => {
+    visible: boolean;
+    openPopOut: () => void;
+    closePopOut: () => void;
+    togglePopOut: () => void;
+};
+export {};