@skedulo/sked-ui 19.21.0 → 19.22.0

package/README.md

@@ -1,24 +1,34 @@
 # Skedulo UI
 
-### Demo (Local)
+Demo https://ui.skedulo.com
+
+## Demo (Local)
 
 Run:
 
- yarn storybook
+```bash
+yarn storybook
+ ```
 
 ## Development
 
+Use NodeJS 16 for development
+
 ### Installation
 
 Run:
 
-    yarn bootstrap
+```bash
+yarn bootstrap
+```
 
 ### Testing
 
 Run:
 
-    yarn test
+```bash
+yarn test
+```
 
 Run with the watch command:
 
@@ -28,31 +38,41 @@ Run with the watch command:
 
 Run:
 
-    yarn build
+```bash
+yarn build
+```
 
 ### Linking between projects
 
 If you need to test your changes to the package in another project, you can do so by first building the package:
 
-    yarn build:package
+```bash
+yarn build:package
+```
 
 then allow a link to sked-ui by running:
 
-    yarn link
+```bash
+yarn link
+```
 
 within this projects directory.
 
 To use it within another project, navigate to the root folder of that project and run:
 
-    yarn link @skedulo/sked-ui
+```bash
+yarn link @skedulo/sked-ui
+```
 
 Some potentially helpful commands to run if you are making changes to sked are:
 
-    yarn package:watch
+```bash
+yarn package:watch
 
-and
+# and
 
-    yarn build:declarations:watch
+yarn build:declarations:watch
+```
 
 ### Merging to master & semantic-release
 

package/dist/components/avatar/AvatarDetail.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IAvatar } from './Avatar';
 declare type AvatarDetailGroupSize = 'tiny' | 'small' | 'medium' | 'large';
 declare type AvatarProps = Pick<IAvatar, 'name' | 'imageUrl'>;

package/dist/components/badge/Badge.d.ts

@@ -1,6 +1,7 @@
-import * as React from 'react';
+/// <reference types="react" />
 export declare type BadgeTypes = 'default' | 'primary' | 'important';
-interface IProps {
+export declare const DEFAULT_BADGE_CLASSES = "sked-badge-min-w sk-text-xxs sk-font-medium sk-tracking-wide sk-h-5 sk-pb-px sk-rounded-full sk-inline-flex sk-items-center sk-justify-center";
+export interface IBadgeProps {
     /**
      * Value to be displayed in badge
      */
@@ -14,5 +15,4 @@ interface IProps {
      */
     badgeType?: BadgeTypes;
 }
-export declare const Badge: React.SFC<IProps>;
-export {};
+export declare const Badge: ({ count, countLimiter, badgeType }: IBadgeProps) => JSX.Element;

package/dist/components/badge/Badge.stories.d.ts

@@ -1 +1,17 @@
-export {};
+/// <reference types="react" />
+import { ComponentStory } from '@storybook/react';
+import { IBadgeProps } from './Badge';
+declare const _default: {
+    title: string;
+    component: (props: IBadgeProps) => JSX.Element;
+    argTypes: {
+        badgeType: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Basic: ComponentStory<({ count, countLimiter, badgeType }: IBadgeProps) => JSX.Element>;

package/dist/components/calendar-controls/elements/NavigationButtons.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IBaseDateSelectorProps } from './DateSelector';
 export interface INavigationButtonProps extends IBaseDateSelectorProps {
     hideTooltipIfDisabled?: boolean;

package/dist/components/datepicker/DateTime.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface IDateTimeProps {
     dateTime?: Date;
     /**

package/dist/components/datepicker/Datepicker.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@emotion/core" />
 import * as React from 'react';
 import { ReactDatePickerProps } from 'react-datepicker';
 import { RangeType } from '../calendar-controls/elements/RangePicker';

package/dist/components/datepicker/Time.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const TIME_FORMAT = "h:mma";
 export declare const formatTime: (date: Date | number) => string;
 export declare const readonlyTimeFormat: ({ value, suffix }: {

package/dist/components/filter-bar/filter-list/FilterList.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IFilterItem } from '../interfaces';
 export interface IFilterListProps<T> {
     items: T[];

package/dist/components/forms/elements/AsyncMultiSearchSelect.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { ISelectItem, AsyncMultiSearchSelectBox } from './interfaces';
 export declare const AsyncMultiSearchSelect: <T extends ISelectItem<any>>({ fetchItems, debounceTime, fetchStrategy, useCache, minChars, onSelectedItemsChange, disabled, ...rest }: AsyncMultiSearchSelectBox<T>) => JSX.Element;

package/dist/components/forms/elements/AsyncSearchSelect.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ISelectItem, AsyncSelectBox } from './interfaces';
 /**
  * Asynchronous version of SearchSelect for use with remote fetching

package/dist/components/forms/elements/MultiSearchSelect.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { ISelectItem, MultiSearchSelectBox } from './interfaces';
 export declare const MultiSearchSelect: <T extends ISelectItem<any>>({ initialSelectedItems, items, id, name, placeholder, autoFocus, className, onSelectedItemsChange, disabled, loading, itemToString, ItemRenderer, MenuItemsRenderer, selectAll, onInputValueChange, onMenuToggle, ...rest }: MultiSearchSelectBox<T>) => JSX.Element;

package/dist/components/forms/elements/SearchSelect.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ISelectItem, SelectBox } from './interfaces';
 /**
  * A searchable select component. Just like it's native counterpart, only a valid listed option is allowed.

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

@@ -40,6 +40,7 @@ declare const _default: {
     ellipsisVertical: any;
     emoji: any;
     exclamation: any;
+    exclamationFill: any;
     filter: any;
     filterFunnel: any;
     filterNew: any;

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

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

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

@@ -1 +1,17 @@
-export {};
+/// <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/popout/PopOutBase.d.ts

@@ -9,6 +9,7 @@ export interface IPopOutBase {
     placement?: PopperJS.Options['placement'];
     modifiers?: PopperJS.Options['modifiers'];
     popOutContainer?: (PopperWrappedContent: JSX.Element) => JSX.Element;
+    children?: React.ReactNode;
 }
 /**
  * PopOutBase uses react-popper/popperjs under the hood and is a wrapper that sets up the Popperjs Manager, Reference and Popper.

package/dist/components/popups/info-window/InfoWindow.d.ts

@@ -27,6 +27,7 @@ export interface IRequiredProps {
     position: Position;
 }
 export declare type IInfoWindowProps = IRequiredProps & {
+    children?: React.ReactNode;
     /**
      * IEvent type used to trigger the info window
      */

package/dist/components/popups/info-window/info-window-utils.d.ts

@@ -25,10 +25,13 @@ export declare const adjustContentDisplayCoordinates: (anchor: IAnchorScores, wi
     display: {
         left: number;
         right: number;
-        bottom: number;
         height: number;
-        top: number;
         width: number;
+        x: number;
+        y: number;
+        bottom: number;
+        top: number;
+        toJSON(): any;
     };
     displayScore: number;
     distanceScore: number;

package/dist/components/portal/Portal.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 interface IProps {
+    children?: React.ReactNode;
     position?: Partial<{
         left: number;
         top: number;