@aivenio/aquarium 1.0.0 → 1.2.0

package/dist/src/components/Banner/Banner.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ActionType } from '../../../types/ActionType';
-import type { BannerLayoutType } from '../../../src/common/Banner/Banner';
+import type { BannerLayoutType, BannerVariantType } from '../../../src/common/Banner/Banner';
 declare type ImageBanner = {
     /**
      * Optional image src that will be displayed on the right side of banner.
@@ -27,6 +27,8 @@ export declare type BannerProps = {
     description: string;
     /** Banner layout. */
     layout?: BannerLayoutType;
+    /** Banner variant. */
+    variant?: BannerVariantType;
     /** Optional action for banner. */
     action?: ActionType;
     /** If `onDismiss()` callback is provided, alert will be rendered with close icon.

package/dist/src/components/Banner/Banner.js

@@ -8,10 +8,10 @@ import cross from '../../../src/icons/cross';
 const BannerImageSkeleton = () => React.createElement(Skeleton, { width: 225, className: tw('h-full') });
 const createBanner = (displayName, opts = {}) => {
     const BannerComponent = (props) => {
-        const { title, description, layout: layoutProp, action, onDismiss } = props;
+        const { title, description, layout: layoutProp, action, onDismiss, variant = 'default' } = props;
         const layout = opts.isOneLineBanner ? 'horizontal' : layoutProp || 'vertical';
         const isDismissable = onDismiss !== undefined;
-        return (React.createElement(BannerBase, { layout: layout },
+        return (React.createElement(BannerBase, { layout: layout, variant: variant },
             React.createElement(BannerBase.ContentContainer, { layout: layout },
                 React.createElement(BannerBase.Title, { layout: layout, titleVariant: opts.isOneLineBanner ? 'secondary' : 'primary' }, title),
                 React.createElement(BannerBase.Description, { flexGrow: isDismissable ? false : true }, description),
@@ -42,4 +42,4 @@ const OneLineBannerBase = createBanner('OneLineBanner', {
 });
 // type test = React.ComponentProps<typeof OneLineBannerBase>;
 export const OneLineBanner = OneLineBannerBase;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQmFubmVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvQmFubmVyL0Jhbm5lci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCLE9BQU8sRUFBRSxNQUFNLElBQUksVUFBVSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFFaEUsT0FBTyxFQUFFLFdBQVcsRUFBRSxVQUFVLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUN2RSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDNUQsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3hDLE9BQU8sSUFBSSxNQUFNLGFBQWEsQ0FBQztBQUMvQixPQUFPLEtBQUssTUFBTSxpQkFBaUIsQ0FBQztBQThDcEMsTUFBTSxtQkFBbUIsR0FBYSxHQUFHLEVBQUUsQ0FBQyxvQkFBQyxRQUFRLElBQUMsS0FBSyxFQUFFLEdBQUcsRUFBRSxTQUFTLEVBQUUsRUFBRSxDQUFDLFFBQVEsQ0FBQyxHQUFJLENBQUM7QUFFOUYsTUFBTSxZQUFZLEdBQUcsQ0FBQyxXQUFtQixFQUFFLE9BQXNCLEVBQUUsRUFBRSxFQUFFO0lBQ3JFLE1BQU0sZUFBZSxHQUEwQixDQUFDLEtBQUssRUFBRSxFQUFFO1FBQ3ZELE1BQU0sRUFBRSxLQUFLLEVBQUUsV0FBVyxFQUFFLE1BQU0sRUFBRSxVQUFVLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxHQUFHLEtBQUssQ0FBQztRQUM1RSxNQUFNLE1BQU0sR0FBcUIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxDQUFDLENBQUMsWUFBWSxDQUFDLENBQUMsQ0FBQyxVQUFVLElBQUksVUFBVSxDQUFDO1FBQ2hHLE1BQU0sYUFBYSxHQUFHLFNBQVMsS0FBSyxTQUFTLENBQUM7UUFFOUMsT0FBTyxDQUNMLG9CQUFDLFVBQVUsSUFBQyxNQUFNLEVBQUUsTUFBTTtZQUN4QixvQkFBQyxVQUFVLENBQUMsZ0JBQWdCLElBQUMsTUFBTSxFQUFFLE1BQU07Z0JBQ3pDLG9CQUFDLFVBQVUsQ0FBQyxLQUFLLElBQUMsTUFBTSxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQUUsSUFBSSxDQUFDLGVBQWUsQ0FBQyxDQUFDLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQyxTQUFTLElBQzNGLEtBQUssQ0FDVztnQkFDbkIsb0JBQUMsVUFBVSxDQUFDLFdBQVcsSUFBQyxRQUFRLEVBQUUsYUFBYSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLElBQUksSUFBRyxXQUFXLENBQTBCO2dCQUNyRyxNQUFNLElBQUksQ0FDVCxvQkFBQyxVQUFVLENBQUMsT0FBTyxJQUFDLE1BQU0sRUFBRSxNQUFNO29CQUNoQyxvQkFBQyxXQUFXLGtCQUFDLEtBQUssVUFBSyxJQUFJLENBQUMsTUFBTSxFQUFFLE1BQU0sQ0FBQyxHQUN4QyxNQUFNLENBQUMsSUFBSSxDQUNBLENBQ0ssQ0FDdEIsQ0FDMkI7WUFDN0IsQ0FBQyxLQUFLLENBQUMsTUFBTSxLQUFLLFVBQVUsSUFBSSxLQUFLLENBQUMsTUFBTSxLQUFLLFNBQVMsQ0FBQyxJQUFJLEtBQUssQ0FBQyxLQUFLLEtBQUssU0FBUyxJQUFJLENBQzNGLG9CQUFDLFVBQVUsQ0FBQyxjQUFjLFFBQ3ZCLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQ2IsNkJBQ0UsR0FBRyxFQUFFLEtBQUssQ0FBQyxLQUFLLEVBQ2hCLEdBQUcsRUFBRSxLQUFLLENBQUMsUUFBUSxFQUNuQixTQUFTLEVBQUUsRUFBRSxDQUFDLDhCQUE4QixDQUFDLEVBQzdDLEtBQUssRUFBRSxFQUFFLEtBQUssRUFBRSxLQUFLLENBQUMsVUFBVSxFQUFFLE1BQU0sRUFBRSxLQUFLLENBQUMsV0FBVyxFQUFFLEdBQzdELENBQ0gsQ0FBQyxDQUFDLENBQUMsQ0FDRixvQkFBQyxtQkFBbUIsT0FBRyxDQUN4QixDQUN5QixDQUM3QjtZQUNBLGFBQWEsSUFBSSxDQUNoQixvQkFBQyxVQUFVLENBQUMsZ0JBQWdCLElBQUMsTUFBTSxFQUFFLE1BQU07Z0JBQ3pDLG9CQUFDLFVBQVUsSUFBQyxJQUFJLEVBQUMsUUFBUSxFQUFDLE9BQU8sRUFBQyxTQUFTLEVBQUMsSUFBSSxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUUsU0FBUyxHQUFJLENBQ25ELENBQy9CLENBQ1UsQ0FDZCxDQUFDO0lBQ0osQ0FBQyxDQUFDO0lBQ0YsZUFBZSxDQUFDLFdBQVcsR0FBRyxXQUFXLENBQUM7SUFDMUMsT0FBTyxlQUFlLENBQUM7QUFDekIsQ0FBQyxDQUFDO0FBRUY7Ozs7Ozs7Ozs7O0dBV0c7QUFDSCxNQUFNLENBQUMsTUFBTSxNQUFNLEdBQUcsWUFBWSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0FBRTdDLE1BQU0saUJBQWlCLEdBQUcsWUFBWSxDQUFDLGVBQWUsRUFBRTtJQUN0RCxlQUFlLEVBQUUsSUFBSTtDQUN0QixDQUFDLENBQUM7QUFFSCw4REFBOEQ7QUFDOUQsTUFBTSxDQUFDLE1BQU0sYUFBYSxHQUFHLGlCQUU1QixDQUFDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQmFubmVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvQmFubmVyL0Jhbm5lci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCLE9BQU8sRUFBRSxNQUFNLElBQUksVUFBVSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFFaEUsT0FBTyxFQUFFLFdBQVcsRUFBRSxVQUFVLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUN2RSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDNUQsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3hDLE9BQU8sSUFBSSxNQUFNLGFBQWEsQ0FBQztBQUMvQixPQUFPLEtBQUssTUFBTSxpQkFBaUIsQ0FBQztBQWlEcEMsTUFBTSxtQkFBbUIsR0FBYSxHQUFHLEVBQUUsQ0FBQyxvQkFBQyxRQUFRLElBQUMsS0FBSyxFQUFFLEdBQUcsRUFBRSxTQUFTLEVBQUUsRUFBRSxDQUFDLFFBQVEsQ0FBQyxHQUFJLENBQUM7QUFFOUYsTUFBTSxZQUFZLEdBQUcsQ0FBQyxXQUFtQixFQUFFLE9BQXNCLEVBQUUsRUFBRSxFQUFFO0lBQ3JFLE1BQU0sZUFBZSxHQUEwQixDQUFDLEtBQUssRUFBRSxFQUFFO1FBQ3ZELE1BQU0sRUFBRSxLQUFLLEVBQUUsV0FBVyxFQUFFLE1BQU0sRUFBRSxVQUFVLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxPQUFPLEdBQUcsU0FBUyxFQUFFLEdBQUcsS0FBSyxDQUFDO1FBQ2pHLE1BQU0sTUFBTSxHQUFxQixJQUFJLENBQUMsZUFBZSxDQUFDLENBQUMsQ0FBQyxZQUFZLENBQUMsQ0FBQyxDQUFDLFVBQVUsSUFBSSxVQUFVLENBQUM7UUFDaEcsTUFBTSxhQUFhLEdBQUcsU0FBUyxLQUFLLFNBQVMsQ0FBQztRQUU5QyxPQUFPLENBQ0wsb0JBQUMsVUFBVSxJQUFDLE1BQU0sRUFBRSxNQUFNLEVBQUUsT0FBTyxFQUFFLE9BQU87WUFDMUMsb0JBQUMsVUFBVSxDQUFDLGdCQUFnQixJQUFDLE1BQU0sRUFBRSxNQUFNO2dCQUN6QyxvQkFBQyxVQUFVLENBQUMsS0FBSyxJQUFDLE1BQU0sRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLElBQUksQ0FBQyxlQUFlLENBQUMsQ0FBQyxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUMsU0FBUyxJQUMzRixLQUFLLENBQ1c7Z0JBQ25CLG9CQUFDLFVBQVUsQ0FBQyxXQUFXLElBQUMsUUFBUSxFQUFFLGFBQWEsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxJQUFJLElBQUcsV0FBVyxDQUEwQjtnQkFDckcsTUFBTSxJQUFJLENBQ1Qsb0JBQUMsVUFBVSxDQUFDLE9BQU8sSUFBQyxNQUFNLEVBQUUsTUFBTTtvQkFDaEMsb0JBQUMsV0FBVyxrQkFBQyxLQUFLLFVBQUssSUFBSSxDQUFDLE1BQU0sRUFBRSxNQUFNLENBQUMsR0FDeEMsTUFBTSxDQUFDLElBQUksQ0FDQSxDQUNLLENBQ3RCLENBQzJCO1lBQzdCLENBQUMsS0FBSyxDQUFDLE1BQU0sS0FBSyxVQUFVLElBQUksS0FBSyxDQUFDLE1BQU0sS0FBSyxTQUFTLENBQUMsSUFBSSxLQUFLLENBQUMsS0FBSyxLQUFLLFNBQVMsSUFBSSxDQUMzRixvQkFBQyxVQUFVLENBQUMsY0FBYyxRQUN2QixLQUFLLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUNiLDZCQUNFLEdBQUcsRUFBRSxLQUFLLENBQUMsS0FBSyxFQUNoQixHQUFHLEVBQUUsS0FBSyxDQUFDLFFBQVEsRUFDbkIsU0FBUyxFQUFFLEVBQUUsQ0FBQyw4QkFBOEIsQ0FBQyxFQUM3QyxLQUFLLEVBQUUsRUFBRSxLQUFLLEVBQUUsS0FBSyxDQUFDLFVBQVUsRUFBRSxNQUFNLEVBQUUsS0FBSyxDQUFDLFdBQVcsRUFBRSxHQUM3RCxDQUNILENBQUMsQ0FBQyxDQUFDLENBQ0Ysb0JBQUMsbUJBQW1CLE9BQUcsQ0FDeEIsQ0FDeUIsQ0FDN0I7WUFDQSxhQUFhLElBQUksQ0FDaEIsb0JBQUMsVUFBVSxDQUFDLGdCQUFnQixJQUFDLE1BQU0sRUFBRSxNQUFNO2dCQUN6QyxvQkFBQyxVQUFVLElBQUMsSUFBSSxFQUFDLFFBQVEsRUFBQyxPQUFPLEVBQUMsU0FBUyxFQUFDLElBQUksRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFLFNBQVMsR0FBSSxDQUNuRCxDQUMvQixDQUNVLENBQ2QsQ0FBQztJQUNKLENBQUMsQ0FBQztJQUNGLGVBQWUsQ0FBQyxXQUFXLEdBQUcsV0FBVyxDQUFDO0lBQzFDLE9BQU8sZUFBZSxDQUFDO0FBQ3pCLENBQUMsQ0FBQztBQUVGOzs7Ozs7Ozs7OztHQVdHO0FBQ0gsTUFBTSxDQUFDLE1BQU0sTUFBTSxHQUFHLFlBQVksQ0FBQyxRQUFRLENBQUMsQ0FBQztBQUU3QyxNQUFNLGlCQUFpQixHQUFHLFlBQVksQ0FBQyxlQUFlLEVBQUU7SUFDdEQsZUFBZSxFQUFFLElBQUk7Q0FDdEIsQ0FBQyxDQUFDO0FBRUgsOERBQThEO0FBQzlELE1BQU0sQ0FBQyxNQUFNLGFBQWEsR0FBRyxpQkFFNUIsQ0FBQyJ9

package/dist/src/components/Box/Box.d.ts

@@ -11,14 +11,18 @@ declare type Props = {
     justifyContent?: React.CSSProperties['justifyContent'];
     alignContent?: React.CSSProperties['alignContent'];
     alignItems?: React.CSSProperties['alignItems'];
+    alignSelf?: React.CSSProperties['alignSelf'];
     flexDirection?: React.CSSProperties['flexDirection'];
     flexWrap?: React.CSSProperties['flexWrap'];
+    grow?: React.CSSProperties['flexGrow'];
+    shrink?: React.CSSProperties['flexShrink'];
+    flex?: React.CSSProperties['flex'];
     gap?: keyof typeof twTheme['gap'];
     colGap?: keyof typeof twTheme['gap'];
     rowGap?: keyof typeof twTheme['gap'];
 };
 export declare type BoxProps<C extends React.ElementType> = TailwindifyProps<Props> & ElementProps<C> & Props;
-export declare const Box: <C extends React.ElementType<any>>({ style, color, borderColor, borderRadius, borderWidth, justifyContent, alignContent, alignItems, flexDirection, flexWrap, display, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, margin, marginX, marginY, marginTop, marginRight, marginBottom, marginLeft, backgroundColor, width, height, maxWidth, maxHeight, minWidth, minHeight, gap, colGap, rowGap, ...rest }: BoxProps<C>) => JSX.Element;
+export declare const Box: <C extends React.ElementType<any>>({ style, color, borderColor, borderRadius, borderWidth, justifyContent, alignContent, alignItems, alignSelf, flexDirection, flexWrap, flex, grow, shrink, display, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, margin, marginX, marginY, marginTop, marginRight, marginBottom, marginLeft, backgroundColor, width, height, maxWidth, maxHeight, minWidth, minHeight, gap, colGap, rowGap, ...rest }: BoxProps<C>) => JSX.Element;
 export declare const BorderBox: React.ComponentType<{
     className?: string | undefined;
     style?: React.CSSProperties | undefined;

package/dist/src/components/Box/Box.js

@@ -16,7 +16,7 @@ import isUndefined from 'lodash/isUndefined';
 import twTheme from '../../../tailwind.theme.json';
 import { createSimpleComponent } from '../../../src/utils/createComponent';
 export const Box = (_a) => {
-    var { style, color, borderColor, borderRadius, borderWidth, justifyContent, alignContent, alignItems, flexDirection, flexWrap, display, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, margin, marginX, marginY, marginTop, marginRight, marginBottom, marginLeft, backgroundColor, width, height, maxWidth, maxHeight, minWidth, minHeight, gap, colGap, rowGap } = _a, rest = __rest(_a, ["style", "color", "borderColor", "borderRadius", "borderWidth", "justifyContent", "alignContent", "alignItems", "flexDirection", "flexWrap", "display", "padding", "paddingX", "paddingY", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "margin", "marginX", "marginY", "marginTop", "marginRight", "marginBottom", "marginLeft", "backgroundColor", "width", "height", "maxWidth", "maxHeight", "minWidth", "minHeight", "gap", "colGap", "rowGap"]);
+    var { style, color, borderColor, borderRadius, borderWidth, justifyContent, alignContent, alignItems, alignSelf, flexDirection, flexWrap, flex, grow, shrink, display, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, margin, marginX, marginY, marginTop, marginRight, marginBottom, marginLeft, backgroundColor, width, height, maxWidth, maxHeight, minWidth, minHeight, gap, colGap, rowGap } = _a, rest = __rest(_a, ["style", "color", "borderColor", "borderRadius", "borderWidth", "justifyContent", "alignContent", "alignItems", "alignSelf", "flexDirection", "flexWrap", "flex", "grow", "shrink", "display", "padding", "paddingX", "paddingY", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "margin", "marginX", "marginY", "marginTop", "marginRight", "marginBottom", "marginLeft", "backgroundColor", "width", "height", "maxWidth", "maxHeight", "minWidth", "minHeight", "gap", "colGap", "rowGap"]);
     const styles = useStyle({
         padding,
         display,
@@ -27,6 +27,7 @@ export const Box = (_a) => {
         justifyContent,
         alignContent,
         alignItems,
+        alignSelf,
         flexDirection,
         flexWrap,
         paddingTop: isUndefined(paddingY) ? paddingTop : paddingY,
@@ -45,6 +46,9 @@ export const Box = (_a) => {
         maxHeight,
         minWidth,
         minHeight,
+        flexGrow: grow,
+        flexShrink: shrink,
+        flex,
         gap,
         columnGap: colGap,
         rowGap,
@@ -52,4 +56,4 @@ export const Box = (_a) => {
     return React.createElement(Element, Object.assign({ style: Object.assign(Object.assign({}, styles), style) }, rest));
 };
 export const BorderBox = createSimpleComponent(Box, { className: 'rounded border', borderColor: 'grey-10' }, 'BorderBox');
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvQm94L0JveC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLE9BQU8sRUFBZ0IsTUFBTSxnQ0FBZ0MsQ0FBQztBQUV2RSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDOUMsT0FBTyxXQUFXLE1BQU0sb0JBQW9CLENBQUM7QUFDN0MsT0FBTyxPQUFPLE1BQU0scUJBQXFCLENBQUM7QUFDMUMsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFvQmxFLE1BQU0sQ0FBQyxNQUFNLEdBQUcsR0FBRyxDQUE4QixFQXFDbkMsRUFBZSxFQUFFO1FBckNrQixFQUMvQyxLQUFLLEVBQ0wsS0FBSyxFQUNMLFdBQVcsRUFDWCxZQUFZLEVBQ1osV0FBVyxFQUNYLGNBQWMsRUFDZCxZQUFZLEVBQ1osVUFBVSxFQUNWLGFBQWEsRUFDYixRQUFRLEVBQ1IsT0FBTyxFQUNQLE9BQU8sRUFDUCxRQUFRLEVBQ1IsUUFBUSxFQUNSLFVBQVUsRUFDVixZQUFZLEVBQ1osYUFBYSxFQUNiLFdBQVcsRUFDWCxNQUFNLEVBQ04sT0FBTyxFQUNQLE9BQU8sRUFDUCxTQUFTLEVBQ1QsV0FBVyxFQUNYLFlBQVksRUFDWixVQUFVLEVBQ1YsZUFBZSxFQUNmLEtBQUssRUFDTCxNQUFNLEVBQ04sUUFBUSxFQUNSLFNBQVMsRUFDVCxRQUFRLEVBQ1IsU0FBUyxFQUNULEdBQUcsRUFDSCxNQUFNLEVBQ04sTUFBTSxPQUVNLEVBRFQsSUFBSSxjQXBDd0Msc2NBcUNoRCxDQURRO0lBRVAsTUFBTSxNQUFNLEdBQUcsUUFBUSxDQUFDO1FBQ3RCLE9BQU87UUFDUCxPQUFPO1FBQ1AsS0FBSztRQUNMLFdBQVcsRUFBRSxXQUFXLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxlQUFlLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUU7UUFDcEUsWUFBWTtRQUNaLFdBQVc7UUFDWCxjQUFjO1FBQ2QsWUFBWTtRQUNaLFVBQVU7UUFDVixhQUFhO1FBQ2IsUUFBUTtRQUNSLFVBQVUsRUFBRSxXQUFXLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsUUFBUTtRQUN6RCxZQUFZLEVBQUUsV0FBVyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQyxZQUFZLENBQUMsQ0FBQyxDQUFDLFFBQVE7UUFDN0QsYUFBYSxFQUFFLFdBQVcsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQyxRQUFRO1FBQy9ELFdBQVcsRUFBRSxXQUFXLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUMsUUFBUTtRQUMzRCxNQUFNO1FBQ04sU0FBUyxFQUFFLFdBQVcsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxPQUFPO1FBQ3JELFdBQVcsRUFBRSxXQUFXLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUMsT0FBTztRQUN6RCxZQUFZLEVBQUUsV0FBVyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQyxZQUFZLENBQUMsQ0FBQyxDQUFDLE9BQU87UUFDM0QsVUFBVSxFQUFFLFdBQVcsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxPQUFPO1FBQ3ZELGVBQWU7UUFDZixLQUFLO1FBQ0wsTUFBTTtRQUNOLFFBQVE7UUFDUixTQUFTO1FBQ1QsUUFBUTtRQUNSLFNBQVM7UUFDVCxHQUFHO1FBQ0gsU0FBUyxFQUFFLE1BQU07UUFDakIsTUFBTTtLQUNQLENBQUMsQ0FBQztJQUVILE9BQU8sb0JBQUMsT0FBTyxrQkFBQyxLQUFLLGtDQUFPLE1BQU0sR0FBSyxLQUFLLEtBQVEsSUFBSSxFQUFJLENBQUM7QUFDL0QsQ0FBQyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sU0FBUyxHQUFHLHFCQUFxQixDQUM1QyxHQUFHLEVBQ0gsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUUsV0FBVyxFQUFFLFNBQVMsRUFBRSxFQUN2RCxXQUFXLENBQ1osQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvQm94L0JveC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLE9BQU8sRUFBZ0IsTUFBTSxnQ0FBZ0MsQ0FBQztBQUV2RSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDOUMsT0FBTyxXQUFXLE1BQU0sb0JBQW9CLENBQUM7QUFDN0MsT0FBTyxPQUFPLE1BQU0scUJBQXFCLENBQUM7QUFDMUMsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUF3QmxFLE1BQU0sQ0FBQyxNQUFNLEdBQUcsR0FBRyxDQUE4QixFQXlDbkMsRUFBZSxFQUFFO1FBekNrQixFQUMvQyxLQUFLLEVBQ0wsS0FBSyxFQUNMLFdBQVcsRUFDWCxZQUFZLEVBQ1osV0FBVyxFQUNYLGNBQWMsRUFDZCxZQUFZLEVBQ1osVUFBVSxFQUNWLFNBQVMsRUFDVCxhQUFhLEVBQ2IsUUFBUSxFQUNSLElBQUksRUFDSixJQUFJLEVBQ0osTUFBTSxFQUNOLE9BQU8sRUFDUCxPQUFPLEVBQ1AsUUFBUSxFQUNSLFFBQVEsRUFDUixVQUFVLEVBQ1YsWUFBWSxFQUNaLGFBQWEsRUFDYixXQUFXLEVBQ1gsTUFBTSxFQUNOLE9BQU8sRUFDUCxPQUFPLEVBQ1AsU0FBUyxFQUNULFdBQVcsRUFDWCxZQUFZLEVBQ1osVUFBVSxFQUNWLGVBQWUsRUFDZixLQUFLLEVBQ0wsTUFBTSxFQUNOLFFBQVEsRUFDUixTQUFTLEVBQ1QsUUFBUSxFQUNSLFNBQVMsRUFDVCxHQUFHLEVBQ0gsTUFBTSxFQUNOLE1BQU0sT0FFTSxFQURULElBQUksY0F4Q3dDLDZlQXlDaEQsQ0FEUTtJQUVQLE1BQU0sTUFBTSxHQUFHLFFBQVEsQ0FBQztRQUN0QixPQUFPO1FBQ1AsT0FBTztRQUNQLEtBQUs7UUFDTCxXQUFXLEVBQUUsV0FBVyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsZUFBZSxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFO1FBQ3BFLFlBQVk7UUFDWixXQUFXO1FBQ1gsY0FBYztRQUNkLFlBQVk7UUFDWixVQUFVO1FBQ1YsU0FBUztRQUNULGFBQWE7UUFDYixRQUFRO1FBQ1IsVUFBVSxFQUFFLFdBQVcsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxRQUFRO1FBQ3pELFlBQVksRUFBRSxXQUFXLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDLFlBQVksQ0FBQyxDQUFDLENBQUMsUUFBUTtRQUM3RCxhQUFhLEVBQUUsV0FBVyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFDLFFBQVE7UUFDL0QsV0FBVyxFQUFFLFdBQVcsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQyxRQUFRO1FBQzNELE1BQU07UUFDTixTQUFTLEVBQUUsV0FBVyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLE9BQU87UUFDckQsV0FBVyxFQUFFLFdBQVcsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQyxPQUFPO1FBQ3pELFlBQVksRUFBRSxXQUFXLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFDLFlBQVksQ0FBQyxDQUFDLENBQUMsT0FBTztRQUMzRCxVQUFVLEVBQUUsV0FBVyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLE9BQU87UUFDdkQsZUFBZTtRQUNmLEtBQUs7UUFDTCxNQUFNO1FBQ04sUUFBUTtRQUNSLFNBQVM7UUFDVCxRQUFRO1FBQ1IsU0FBUztRQUNULFFBQVEsRUFBRSxJQUFJO1FBQ2QsVUFBVSxFQUFFLE1BQU07UUFDbEIsSUFBSTtRQUNKLEdBQUc7UUFDSCxTQUFTLEVBQUUsTUFBTTtRQUNqQixNQUFNO0tBQ1AsQ0FBQyxDQUFDO0lBRUgsT0FBTyxvQkFBQyxPQUFPLGtCQUFDLEtBQUssa0NBQU8sTUFBTSxHQUFLLEtBQUssS0FBUSxJQUFJLEVBQUksQ0FBQztBQUMvRCxDQUFDLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxTQUFTLEdBQUcscUJBQXFCLENBQzVDLEdBQUcsRUFDSCxFQUFFLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRSxXQUFXLEVBQUUsU0FBUyxFQUFFLEVBQ3ZELFdBQVcsQ0FDWixDQUFDIn0=

package/dist/src/components/Carousel/Carousel.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export declare type CarouselProps = {
+    /**
+     * Currently active page number for controlled mode.
+     */
+    currentPage?: number;
+    /**
+     *  Change callback for the currently active page number for controlled mode.
+     */
+    onPageChange?: (pageNumber: number) => void;
+    /**
+     * Initial active page number for uncontrolled mode.
+     */
+    defaultPage?: number;
+};
+export declare const Carousel: React.FC<CarouselProps>;

package/dist/src/components/Carousel/Carousel.js

@@ -0,0 +1,89 @@
+import React, { useRef, useLayoutEffect, useState, useEffect } from 'react';
+import { tw } from '../../../src/utils/tailwind';
+import { IconButton } from '../../../src/components/Button/Button';
+import { Typography } from '../../../src/components/Typography/Typography';
+import chevronLeft from '../../../src/icons/chevronLeft';
+import chevronRight from '../../../src/icons/chevronRight';
+import { Flexbox } from '../../../src/components/Flexbox/Flexbox';
+export const Carousel = ({ defaultPage = 1, currentPage: currentPageProp, onPageChange, children, }) => {
+    const containerRef = useRef(null);
+    const scrollbarContainerRef = useRef(null);
+    const items = React.Children.toArray(children);
+    const [width, setWidth] = useState(0);
+    const [isUpdating, setIsUpdating] = useState(false); // waiting for activePage update scrollTo to be done first (controlled mode)
+    const [currentPage, setCurrentPage] = useState(currentPageProp !== null && currentPageProp !== void 0 ? currentPageProp : defaultPage);
+    useLayoutEffect(() => {
+        const updateContainerWidth = () => {
+            var _a;
+            const containerWidth = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
+            if (containerWidth !== undefined && width !== containerWidth) {
+                setWidth(containerWidth);
+            }
+        };
+        updateContainerWidth();
+        window.addEventListener('resize', updateContainerWidth); // update width when user resizes window's size
+        return () => {
+            window.removeEventListener('resize', updateContainerWidth);
+        };
+    }, [containerRef.current]);
+    // case: controlled mode
+    if (typeof currentPageProp === 'number' && currentPageProp !== currentPage && onPageChange && width !== 0) {
+        setCurrentPage(currentPageProp);
+    }
+    useEffect(() => {
+        var _a, _b;
+        if (width === 0) {
+            return;
+        }
+        const currentPageX = (currentPage - 1) * width;
+        if (((_a = scrollbarContainerRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== currentPageX) {
+            setIsUpdating(true); // this will prevent scroll event listener to work when we are updating scrollTo() programatically which are 1) when clicking on next/back button 2) when scroll based on "currentPageProp" changes. Since when we set scrollTo() programatically, it also triggers scroll event listener at the same time.
+            (_b = scrollbarContainerRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({ left: currentPageX, behavior: 'smooth' });
+        }
+    }, [currentPage, scrollbarContainerRef.current]);
+    const handleNavigationClick = (direction) => {
+        const nextItem = currentPage + (direction === 'left' ? -1 : 1);
+        // case: uncontrolled mode
+        !onPageChange && setCurrentPage(nextItem);
+        // case: controlled mode
+        onPageChange && onPageChange(nextItem);
+    };
+    const handleScroll = () => {
+        var _a, _b;
+        const currentPageX = (currentPage - 1) * width;
+        // when currentPageProp is updated, as controlled mode, we programatically scroll it by scrollTo() which will also trigger the scroll event and this "handleScroll" callback will also be triggered.
+        // Due to the above reason, while the previous scroll isn't done yet, "scrollLeft" here might be different than the targeted x position of the previous scroll action
+        // for example we pass `currentPageProp=4` and then update it to `currentPageProp=2`, it will have to scroll from 4 back to 2 which will also pass 3. So in the UI, it will show like 4->2, then 4->3, and then 3->2 which causes UI glitch.
+        // but this will have no problem if user navigates through `handleNavigationClick` since it is only -1/+1 item at a time.
+        // to fix the above issue, we will not trigger any action in this callback if "isUpdating === true"
+        // this should be inside a scroll event handle since it is checking when scrolling to x destination is done.
+        // once it arrives to "x" as expected when "currentPage" changes. Resume everything back, so defult scroll event works as usual.
+        if (isUpdating && ((_a = scrollbarContainerRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) === currentPageX) {
+            setIsUpdating(false);
+        }
+        const scrollBarX = (_b = scrollbarContainerRef.current) === null || _b === void 0 ? void 0 : _b.scrollLeft;
+        if (typeof scrollBarX === 'number' && scrollBarX % width === 0 && currentPageX !== scrollBarX && !isUpdating) {
+            const newPage = scrollBarX / width + 1;
+            // case: uncontrolled mode
+            !onPageChange && setCurrentPage(newPage);
+            // case: controlled mode
+            onPageChange && onPageChange(newPage);
+        }
+    };
+    return items.length > 0 ? (React.createElement("div", { className: tw('w-full flex flex-col'), ref: containerRef },
+        containerRef !== null && (React.createElement("ul", { ref: scrollbarContainerRef, tabIndex: 0, onScroll: handleScroll, 
+            // use items-strech here, so that every carousel items are the same height in case there are some items that taller than others
+            className: tw('grid items-stretch grid-flow-col overflow-x-scroll scroll-smooth snap-x snap-mandatory scrollbar-hide focus-visible:outline-0 focus-visible:ring-1 focus-visible:ring-info-70') }, width !== 0 &&
+            React.Children.map(children, (child, index) => (React.createElement(CarouselItem, { key: index, width: width, ariaHidden: index + 1 === currentPage ? undefined : true }, child))))),
+        React.createElement(Flexbox, { direction: "row", justifyContent: "flex-end", alignItems: "center" },
+            React.createElement(IconButton, { "aria-label": "Previous", onClick: () => handleNavigationClick('left'), icon: chevronLeft, disabled: currentPage === 1 }),
+            React.createElement(Typography.Caption, null, `${currentPage}/${React.Children.count(children)}`),
+            React.createElement(IconButton, { "aria-label": "Next", onClick: () => handleNavigationClick('right'), icon: chevronRight, disabled: currentPage === items.length })))) : null;
+};
+const CarouselItem = ({ width, children, ariaHidden }) => {
+    return (
+    // let height to be auto
+    // if a carousel item doesn't fit the width of the container nicely, it will be aligned center within the container
+    React.createElement("li", { style: { width }, "aria-hidden": ariaHidden, className: tw('flex justify-center snap-start') }, children));
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2Fyb3VzZWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9DYXJvdXNlbC9DYXJvdXNlbC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxNQUFNLEVBQUUsZUFBZSxFQUFFLFFBQVEsRUFBRSxTQUFTLEVBQUUsTUFBTSxPQUFPLENBQUM7QUFDNUUsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3hDLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUMxRCxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDbEUsT0FBTyxXQUFXLE1BQU0sdUJBQXVCLENBQUM7QUFDaEQsT0FBTyxZQUFZLE1BQU0sd0JBQXdCLENBQUM7QUFDbEQsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBbUJ6RCxNQUFNLENBQUMsTUFBTSxRQUFRLEdBQTRCLENBQUMsRUFDaEQsV0FBVyxHQUFHLENBQUMsRUFDZixXQUFXLEVBQUUsZUFBZSxFQUM1QixZQUFZLEVBQ1osUUFBUSxHQUNULEVBQUUsRUFBRTtJQUNILE1BQU0sWUFBWSxHQUFHLE1BQU0sQ0FBaUIsSUFBSSxDQUFDLENBQUM7SUFDbEQsTUFBTSxxQkFBcUIsR0FBRyxNQUFNLENBQW1CLElBQUksQ0FBQyxDQUFDO0lBQzdELE1BQU0sS0FBSyxHQUFHLEtBQUssQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBRS9DLE1BQU0sQ0FBQyxLQUFLLEVBQUUsUUFBUSxDQUFDLEdBQUcsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQ3RDLE1BQU0sQ0FBQyxVQUFVLEVBQUUsYUFBYSxDQUFDLEdBQUcsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsNEVBQTRFO0lBQ2pJLE1BQU0sQ0FBQyxXQUFXLEVBQUUs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

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

@@ -34,6 +34,7 @@ export declare const Chip: React.FC<ChipProps> & {
     Skeleton: React.FC<SkeletonProps>;
 };
 declare type SkeletonProps = {
+    width?: number;
     dense?: boolean;
 };
 export declare type StatusChipProps = BaseChipProps & {

package/dist/src/components/Chip/Chip.js

@@ -46,7 +46,7 @@ export const Chip = (_a) => {
         onClose && (React.createElement(InlineIcon, { role: "button", "aria-hidden": false, icon: crossIcon, className: tw({ 'cursor-pointer': onClose !== undefined }), onClick: () => onClose === null || onClose === void 0 ? void 0 : onClose() })),
         locked && React.createElement(InlineIcon, { icon: lockIcon })));
 };
-const ChipSkeleton = ({ dense = false }) => (React.createElement(Skeleton, { width: dense ? 34 : 46, height: dense ? 20 : 28 }));
+const ChipSkeleton = ({ dense = false, width = dense ? 34 : 56 }) => (React.createElement(Skeleton, { width: width, height: dense ? 20 : 28 }));
 Chip.Skeleton = ChipSkeleton;
 export const StatusChip = React.forwardRef((_a, ref) => {
     var { UNSAFE_icon: icon, text, dense = false, status } = _a, rest = __rest(_a, ["UNSAFE_icon", "text", "dense", "status"]);
@@ -60,4 +60,4 @@ export const ChipContainer = ({ dense, children }) => (React.createElement("div"
     }) }, React.Children.map(children, (child) => isComponentType(child, Chip) || isComponentType(child, StatusChip)
     ? React.cloneElement(child, { dense })
     : undefined)));
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hpcC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0NoaXAvQ2hpcC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxRQUFRLE1BQU0saUJBQWlCLENBQUM7QUFDdkMsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ3RELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUN2RCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFFNUQsT0FBTyxFQUFFLElBQUksSUFBSSxRQUFRLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUN4RCxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDeEMsT0FBTyxTQUFTLE1BQU0saUJBQWlCLENBQUM7QUFDeEMsT0FBTyxRQUFRLE1BQU0sZ0JBQWdCLENBQUM7QUFDdEMsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQXVDOUMsTUFBTSxtQkFBbUIsR0FBRyxDQUFDLFNBQXFCLFNBQVMsRUFBVSxFQUFFO0lBQ3JFLFFBQVEsTUFBTSxFQUFFO1FBQ2QsS0FBSyxNQUFNO1lBQ1QsT0FBTyxFQUFFLENBQUMseUJBQXlCLENBQUMsQ0FBQztRQUV2QyxLQUFLLFNBQVM7WUFDWixPQUFPLEVBQUUsQ0FBQyxrQ0FBa0MsQ0FBQyxDQUFDO1FBRWhELEtBQUssUUFBUTtZQUNYLE9BQU8sRUFBRSxDQUFDLDJCQUEyQixDQUFDLENBQUM7UUFFekMsS0FBSyxTQUFTO1lBQ1osT0FBTyxFQUFFLENBQUMsK0JBQStCLENBQUMsQ0FBQztRQUU3QyxLQUFLLFNBQVMsQ0FBQztRQUNmO1lBQ0UsT0FBTyxFQUFFLENBQUMsd0JBQXdCLENBQUMsQ0FBQztLQUN2QztBQUNILENBQUMsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLElBQUksR0FBZ0UsQ0FBQyxFQVFqRixFQUFFLEVBQUU7UUFSNkUsRUFDaEYsSUFBSSxFQUNKLElBQUksRUFDSixLQUFLLEdBQUcsS0FBSyxFQUNiLE1BQU0sR0FBRyxLQUFLLEVBQ2QsS0FBSyxFQUNMLE9BQU8sT0FFUixFQURJLElBQUksY0FQeUUsdURBUWpGLENBRFE7SUFDSCxPQUFBLENBQ0osb0JBQUMsUUFBUSxDQUFDLFNBQVMsa0JBQ2pCLEtBQUssRUFBRSxLQUFLLEVBQ1osU0FBUyxFQUFFLEVBQUUsQ0FBQztZQUNaLHdCQUF3QixFQUFFLENBQUMsTUFBTTtZQUNqQyx3QkFBd0IsRUFBRSxNQUFNO1NBQ2pDLENBQUMsSUFDRSxJQUFJO1FBRVAsSUFBSSxJQUFJLG9CQUFDLFVBQVUsSUFBQyxJQUFJLEVBQUUsSUFBSSxHQUFJO1FBQ2xDLElBQUk7UUFDSixRQUFRLENBQUMsS0FBSyxDQUFDLElBQUksb0JBQUMsU0FBUyxJQUFDLEtBQUssRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxhQUFhLEVBQUUsRUFBRSxDQUFDLGNBQWMsQ0FBQyxHQUFJO1FBQy9GLE9BQU8sSUFBSSxDQUNWLG9CQUFDLFVBQVUsSUFDVCxJQUFJLEVBQUMsUUFBUSxpQkFDQSxLQUFLLEVBQ2xCLElBQUksRUFBRSxTQUFTLEVBQ2YsU0FBUyxFQUFFLEVBQUUsQ0FBQyxFQUFFLGdCQUFnQixFQUFFLE9BQU8sS0FBSyxTQUFTLEVBQUUsQ0FBQyxFQUMxRCxPQUFPLEVBQUUsR0FBRyxFQUFFLENBQUMsT0FBTyxhQUFQLE9BQU8sdUJBQVAsT0FBTyxFQUFJLEdBQzFCLENBQ0g7UUFDQSxNQUFNLElBQUksb0JBQUMsVUFBVSxJQUFDLElBQUksRUFBRSxRQUFRLEdBQUksQ0FDdEIsQ0FDdEIsQ0FBQTtDQUFBLENBQUM7QUFJRixNQUFNLFlBQVksR0FBNEIsQ0FBQyxFQUFFLEtBQUssR0FBRyxLQUFLLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FDbkUsb0JBQUMsUUFBUSxJQUFDLEtBQUssRUFBRSxLQUFLLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLE1BQU0sRUFBRSxLQUFLLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsRUFBRSxHQUFJLENBQzlELENBQUM7QUFFRixJQUFJLENBQUMsUUFBUSxHQUFHLFlBQVksQ0FBQztBQWlCN0IsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQ3hDLENBQUMsRUFBMkQsRUFBRSxHQUFHLEVBQUUsRUFBRTtRQUFwRSxFQUFFLFdBQVcsRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLEtBQUssR0FBRyxLQUFLLEVBQUUsTUFBTSxPQUFXLEVBQU4sSUFBSSxjQUF6RCwwQ0FBMkQsQ0FBRjtJQUFZLE9BQUEsQ0FDcEUsb0JBQUMsUUFBUSxDQUFDLFNBQVMsa0JBQUMsR0FBRyxFQUFFLEdBQUcsRUFBRSxLQUFLLEVBQUUsS0FBSyxJQUFNLElBQUksSUFBRSxTQUFTLEVBQUUsbUJBQW1CLENBQUMsTUFBTSxDQUFDO1FBQ3pGLElBQUksSUFBSSxvQkFBQyxVQUFVLElBQUMsSUFBSSxFQUFFLElBQUksR0FBSTtRQUNsQyxJQUFJLENBQ2MsQ0FDdEIsQ0FBQTtDQUFBLENBQ0YsQ0FBQztBQWNGLE1BQU0sQ0FBQyxNQUFNLGFBQWEsR0FBaUMsQ0FBQyxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FDbEYsNkJBQ0UsU0FBUyxFQUFFLEVBQUUsQ0FBQyxtQkFBbUIsRUFBRTtRQUNqQyxTQUFTLEVBQUUsQ0FBQyxLQUFLO1FBQ2pCLFNBQVMsRUFBRSxPQUFPLENBQUMsS0FBSyxDQUFDO0tBQzFCLENBQUMsSUFFRCxLQUFLLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxRQUFRLEVBQUUsQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUN0QyxlQUFlLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxJQUFJLGVBQWUsQ0FBQyxLQUFLLEVBQUUsVUFBVSxDQUFDO0lBQ2hFLENBQUMsQ0FBQyxLQUFLLENBQUMsWUFBWSxDQUFDLEtBQUssRUFBRSxFQUFFLEtBQUssRUFBRSxDQUFDO0lBQ3RDLENBQUMsQ0FBQyxTQUFTLENBQ2QsQ0FDRyxDQUNQLENBQUMifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hpcC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0NoaXAvQ2hpcC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxRQUFRLE1BQU0saUJBQWlCLENBQUM7QUFDdkMsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ3RELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUN2RCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFFNUQsT0FBTyxFQUFFLElBQUksSUFBSSxRQUFRLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUN4RCxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDeEMsT0FBTyxTQUFTLE1BQU0saUJBQWlCLENBQUM7QUFDeEMsT0FBTyxRQUFRLE1BQU0sZ0JBQWdCLENBQUM7QUFDdEMsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQXVDOUMsTUFBTSxtQkFBbUIsR0FBRyxDQUFDLFNBQXFCLFNBQVMsRUFBVSxFQUFFO0lBQ3JFLFFBQVEsTUFBTSxFQUFFO1FBQ2QsS0FBSyxNQUFNO1lBQ1QsT0FBTyxFQUFFLENBQUMseUJBQXlCLENBQUMsQ0FBQztRQUV2QyxLQUFLLFNBQVM7WUFDWixPQUFPLEVBQUUsQ0FBQyxrQ0FBa0MsQ0FBQyxDQUFDO1FBRWhELEtBQUssUUFBUTtZQUNYLE9BQU8sRUFBRSxDQUFDLDJCQUEyQixDQUFDLENBQUM7UUFFekMsS0FBSyxTQUFTO1lBQ1osT0FBTyxFQUFFLENBQUMsK0JBQStCLENBQUMsQ0FBQztRQUU3QyxLQUFLLFNBQVMsQ0FBQztRQUNmO1lBQ0UsT0FBTyxFQUFFLENBQUMsd0JBQXdCLENBQUMsQ0FBQztLQUN2QztBQUNILENBQUMsQ0FBQztBQUVG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

package/dist/src/components/DataList/DataList.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { DataTableRow, DataListColumn } from '../../../src/utils/table/types';
+export declare type DataListProps<R extends DataTableRow> = {
+    /**
+     * Array of column definitions that correspond to the data rows.
+     */
+    columns: Array<DataListColumn<R>>;
+    /**
+     * Array of data rows to be displayed.
+     */
+    rows: R[];
+};
+export declare const DataList: <R extends DataTableRow>({ columns, rows }: DataListProps<R>) => JSX.Element;

package/dist/src/components/DataList/DataList.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { toSortDirection, cellProps } from '../../../src/utils/table/types';
+import { DataList as DataListBase } from '../../../src/common/DataList/DataList';
+import { Item } from '../../../src/common/Table/Table';
+import { StatusChip } from '../../../src/components/Chip/Chip';
+import { Template } from '../../../src/components/Template/Template';
+import { SecondaryButton } from '../../../src/components/Button/Button';
+import { renameProperty } from '../../../src/utils/object';
+import orderBy from 'lodash/orderBy';
+import { List } from '../../../src/components';
+import { useTableSort } from '../../../src/utils/table/useTableSort';
+export const DataList = ({ columns, rows }) => {
+    const [sort, updateSort] = useTableSort();
+    const sortedRows = orderBy(rows, [sort === null || sort === void 0 ? void 0 : sort.key], [toSortDirection(sort === null || sort === void 0 ? void 0 : sort.direction)]);
+    const templateColumns = columns.map((column) => { var _a; return (_a = column.width) !== null && _a !== void 0 ? _a : 'auto'; });
+    return (React.createElement(Template, { columns: templateColumns },
+        columns.map((column) => (column.type === 'text' || column.type === 'number') && column.sortable ? (React.createElement(DataListBase.SortCell, Object.assign({ direction: sort && sort.key === column.field ? sort.direction : 'none', onClick: () => updateSort(column.field) }, cellProps(column)), column.headerName)) : (React.createElement(DataListBase.HeadCell, Object.assign({}, cellProps(column)), column.headerName))),
+        React.createElement(List, { items: sortedRows, renderItem: (row, index) => (React.createElement(DataListBase.Row, { key: row.id },
+                React.createElement(List, { items: columns, renderItem: (column) => column.type === 'status' ? (React.createElement(DataListBase.Cell, Object.assign({}, cellProps(column)),
+                        React.createElement(StatusChip, Object.assign({ dense: true }, column.status(row, index, sortedRows))))) : column.type === 'action' ? (React.createElement(DataListBase.Cell, Object.assign({}, cellProps(column)),
+                        React.createElement(SecondaryButton, Object.assign({ dense: true }, renameProperty('text', 'children', column.action(row, index, sortedRows)))))) : column.type === 'custom' ? (React.createElement(DataListBase.Cell, Object.assign({}, cellProps(column)), column.UNSAFE_render(row, index, sortedRows))) : column.type === 'item' ? (React.createElement(DataListBase.Cell, null,
+                        React.createElement(Item, Object.assign({}, column.item(row, index, sortedRows))))) : (React.createElement(DataListBase.Cell, Object.assign({}, cellProps(column)), column.formatter ? column.formatter(row[column.field], row, index, sortedRows) : row[column.field])) }))) })));
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRGF0YUxpc3QuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9EYXRhTGlzdC9EYXRhTGlzdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBZ0MsZUFBZSxFQUFFLFNBQVMsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQ2pHLE9BQU8sRUFBRSxRQUFRLElBQUksWUFBWSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDeEUsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQzlDLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUN0RCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDNUQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQy9ELE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUNsRCxPQUFPLE9BQU8sTUFBTSxnQkFBZ0IsQ0FBQztBQUNyQyxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDdEMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBYzVELE1BQU0sQ0FBQyxNQUFNLFFBQVEsR0FBRyxDQUF5QixFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQW9CLEVBQWUsRUFBRTtJQUNuRyxNQUFNLENBQUMsSUFBSSxFQUFFLFVBQVUsQ0FBQyxHQUFHLFlBQVksRUFBSyxDQUFDO0lBQzdDLE1BQU0sVUFBVSxHQUFHLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQyxJQUFJLGFBQUosSUFBSSx1QkFBSixJQUFJLENBQUUsR0FBRyxDQUFDLEVBQUUsQ0FBQyxlQUFlLENBQUMsSUFBSSxhQUFKLElBQUksdUJBQUosSUFBSSxDQUFFLFNBQVMsQ0FBQyxDQUFDLENBQVEsQ0FBQztJ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

package/dist/src/components/DataTable/DataTable.d.ts

@@ -1,93 +1,15 @@
-import React from 'react';
+/// <reference types="react" />
 import { TableProps } from '../../../src/components/Table/Table';
-import { SortDirection } from '../../../src/common/Table/Table.utils';
-import { ChipStatus } from '../../../src/components/Chip/Chip';
-import { ActionType } from '../../../types/ActionType';
-declare type Column = {
-    /**
-     * Display name for the column.
-     */
-    headerName: string;
-    /**
-     * Width of the column. Number for pixels and string for percentages
-     */
-    width?: number | `${number}%`;
-};
-declare type TextColumn<T> = Column & {
-    /**
-     * Name of the property field that this column represents in the data rows.
-     */
-    field: keyof T & (string | number);
-    /**
-     * When true, user will be able to sort data rows by clicking this column header.
-     */
-    sortable?: boolean;
-};
-declare type NumberColumn<T> = Column & {
-    /**
-     * Type of the column.
-     */
-    type: 'number';
-    /**
-     * Name of the property field that this column represents in the data rows.
-     */
-    field: keyof T & (string | number);
-    /**
-     * When true, user will be able to sort data rows by clicking this column header.
-     */
-    sortable?: boolean;
-};
-declare type ActionColumn<T> = Column & {
-    /**
-     * Type of the column.
-     */
-    type: 'action';
-    /**
-     * Callback function that resolves to Button props.
-     */
-    action: (row: T, index: number, rows: T[]) => ActionType;
-};
-declare type CustomColumn<T> = Column & {
-    /**
-     * Type of the column.
-     */
-    type: 'custom';
-    /**
-     * Unsafe render method. Consider consulting the designer instead of using this.
-     * Using render callback will also disallow sorting on that column.
-     */
-    UNSAFE_render: (row: T, index: number, rows: T[]) => React.ReactNode;
-};
-declare type StatusColumn<T> = Column & {
-    /**
-     * Type of the column.
-     */
-    type: 'status';
-    /**
-     * Callback function that resolves to StatusChip props
-     */
-    status: (row: T, index: number, rows: T[]) => {
-        status: ChipStatus;
-        text: string | number;
-    };
-};
-export declare type DataTableColumn<T extends DataTableRow> = TextColumn<T> | CustomColumn<T> | StatusColumn<T> | NumberColumn<T> | ActionColumn<T>;
-export declare type DataTableRow = Record<string, any> & {
-    /**
-     * Assigned ID for each data row.
-     * Used as a key. Use something unqiue derived from the data, not index.
-     */
-    id: string | number;
-};
-export declare type DataTableProps<T extends DataTableRow> = {
+import { DataTableRow, DataTableColumn } from '../../../src/utils/table/types';
+export declare type DataTableProps<R extends DataTableRow> = {
     /**
      * Array of column definitions that correspond to the data rows.
      */
-    columns: Array<DataTableColumn<T>>;
+    columns: Array<DataTableColumn<R>>;
     /**
      * Array of data rows to be displayed.
      */
-    rows: T[];
+    rows: R[];
     /**
      * When true, sets column whitespace to nowrap. Defaults to false.
      * Use when you dont want text to wrap due to 100% width column for example.
@@ -98,10 +20,4 @@ export declare type DataTableProps<T extends DataTableRow> = {
      */
     layout?: 'auto' | 'fixed';
 } & Pick<TableProps, 'ariaLabel' | 'onNext' | 'onPrev'>;
-declare type Sort<T extends DataTableRow> = {
-    key: keyof T;
-    direction: SortDirection;
-};
-export declare const useTableSort: <T extends DataTableRow>() => [Sort<T> | undefined, (field: keyof T) => void];
 export declare const DataTable: <T extends DataTableRow>({ columns, rows, noWrap, layout, ...rest }: DataTableProps<T>) => JSX.Element;
-export {};

package/dist/src/components/DataTable/DataTable.js

@@ -12,46 +12,31 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { tw } from '../../../src/utils/tailwind';
 import { Table } from '../../../src/components/Table/Table';
+import { Item } from '../../../src/common/Table/Table';
 import { StatusChip } from '../../../src/components/Chip/Chip';
 import { SecondaryButton } from '../../../src/components/Button/Button';
 import { renameProperty } from '../../../src/utils/object';
 import orderBy from 'lodash/orderBy';
 import { List } from '../../../src/components';
-const toSortDirection = (direction) => direction === 'ascending' ? 'asc' : direction === 'descending' ? 'desc' : false;
-const isFieldColumn = (column) => Boolean(column.field);
-const isNumberColumn = (column) => column.type === 'number';
-const isStatusColumn = (column) => column.type === 'status';
-const isActionColumn = (column) => column.type === 'action';
-export const useTableSort = () => {
-    const [sort, setSort] = React.useState();
-    const handleSortClick = (field) => {
-        if ((sort === null || sort === void 0 ? void 0 : sort.key) === field) {
-            if (sort.direction === 'ascending') {
-                setSort({ key: field, direction: 'descending' });
-            }
-            else {
-                setSort(undefined);
-            }
-        }
-        else {
-            setSort({ key: field, direction: 'ascending' });
-        }
-    };
-    return [sort, handleSortClick];
-};
+import { toSortDirection, cellProps } from '../../../src/utils/table/types';
+import { useTableSort } from '../../../src/utils/table/useTableSort';
 export const DataTable = (_a) => {
     var { columns, rows, noWrap = false, layout = 'auto' } = _a, rest = __rest(_a, ["columns", "rows", "noWrap", "layout"]);
     const [sort, updateSort] = useTableSort();
+    const sortedRows = orderBy(rows, [sort === null || sort === void 0 ? void 0 : sort.key], [toSortDirection(sort === null || sort === void 0 ? void 0 : sort.direction)]);
     return (React.createElement(Table, Object.assign({}, rest, { className: tw({
             'whitespace-nowrap': noWrap,
             'table-auto': layout === 'auto',
             'table-fixed': layout === 'fixed',
         }) }),
-        React.createElement(Table.Head, null, columns.map((column) => isFieldColumn(column) && column.sortable ? (React.createElement(Table.SortCell, { key: column.headerName, direction: sort && sort.key === column.field ? sort.direction : 'none', onClick: () => updateSort(column.field), align: isNumberColumn(column) ? 'right' : 'left', style: { width: column.width } }, column.headerName)) : (React.createElement(Table.Cell, { align: isNumberColumn(column) ? 'right' : 'left', key: column.headerName, style: { width: column.width } }, column.headerName)))),
+        React.createElement(Table.Head, null, columns.map((column) => (column.type === 'text' || column.type === 'number') && column.sortable ? (React.createElement(Table.SortCell, Object.assign({ direction: sort && sort.key === column.field ? sort.direction : 'none', onClick: () => updateSort(column.field), style: { width: column.width } }, cellProps(column)), column.headerName)) : (React.createElement(Table.Cell, Object.assign({}, cellProps(column), { style: { width: column.width } }), column.headerName)))),
         React.createElement(Table.Body, null,
-            React.createElement(List, { items: orderBy(rows, [sort === null || sort === void 0 ? void 0 : sort.key], [toSortDirection(sort === null || sort === void 0 ? void 0 : sort.direction)]), renderItem: (row) => (React.createElement(Table.Row, { key: row.id },
-                    React.createElement(List, { items: columns, renderItem: (column, index) => isFieldColumn(column) ? (React.createElement(Table.Cell, { key: column.field, align: isNumberColumn(column) ? 'right' : 'left' }, row[column.field])) : isStatusColumn(column) ? (React.createElement(Table.Cell, { key: column.headerName },
-                            React.createElement(StatusChip, Object.assign({ dense: true }, column.status(row, index, rows))))) : isActionColumn(column) ? (React.createElement(Table.Cell, { align: "right", key: column.headerName },
-                            React.createElement(SecondaryButton, Object.assign({ dense: true }, renameProperty('text', 'children', column.action(row, index, rows)))))) : (React.createElement(Table.Cell, { key: column.headerName }, column.UNSAFE_render(row, index, rows))) }))) }))));
+            React.createElement(List, { items: sortedRows, renderItem: (row, index) => (React.createElement(Table.Row, { key: row.id },
+                    React.createElement(List, { items: columns, renderItem: (column) => column.type === 'status' ? (React.createElement(Table.Cell, Object.assign({}, cellProps(column)),
+                            React.createElement(StatusChip, Object.assign({ dense: true }, column.status(row, index, sortedRows))))) : column.type === 'action' ? (React.createElement(Table.Cell, Object.assign({}, cellProps(column)),
+                            React.createElement(SecondaryButton, Object.assign({ dense: true }, renameProperty('text', 'children', column.action(row, index, sortedRows)))))) : column.type === 'custom' ? (React.createElement(Table.Cell, Object.assign({}, cellProps(column)), column.UNSAFE_render(row, index, sortedRows))) : column.type === 'item' ? (React.createElement(Table.Cell, Object.assign({}, cellProps(column)),
+                            React.createElement(Item, Object.assign({}, column.item(row, index, sortedRows))))) : (React.createElement(Table.Cell, Object.assign({}, cellProps(column)), column.formatter
+                            ? column.formatter(row[column.field], row, index, sortedRows)
+                            : row[column.field])) }))) }))));
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRGF0YVRhYmxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvRGF0YVRhYmxlL0RhdGFUYWJsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3hDLE9BQU8sRUFBRSxLQUFLLEVBQWMsTUFBTSw0QkFBNEIsQ0FBQztBQUUvRCxPQUFPLEVBQWMsVUFBVSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDbEUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBRS9ELE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUNsRCxPQUFPLE9BQU8sTUFBTSxnQkFBZ0IsQ0FBQztBQUNyQyxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFtSHRDLE1BQU0sZUFBZSxHQUFHLENBQUMsU0FBb0MsRUFBRSxFQUFFLENBQy9ELFNBQVMsS0FBSyxXQUFXLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsU0FBUyxLQUFLLFlBQVksQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUM7QUFFbEYsTUFBTSxhQUFhLEdBQUcsQ0FBeUIsTUFBMEIsRUFBNEIsRUFBRSxDQUNyRyxPQUFPLENBQUUsTUFBeUIsQ0FBQyxLQUFLLENBQUMsQ0FBQztBQUU1QyxNQUFNLGNBQWMsR0FBRyxDQUF5QixNQUEwQixFQUE2QixFQUFFLENBQ3RHLE1BQTBCLENBQUMsSUFBSSxLQUFLLFFBQVEsQ0FBQztBQUVoRCxNQUFNLGNBQWMsR0FBRyxDQUF5QixNQUEwQixFQUE2QixFQUFFLENBQ3RHLE1BQTBCLENBQUMsSUFBSSxLQUFLLFFBQVEsQ0FBQztBQUVoRCxNQUFNLGNBQWMsR0FBRyxD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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRGF0YVRhYmxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvRGF0YVRhYmxlL0RhdGFUYWJsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3hDLE9BQU8sRUFBRSxLQUFLLEVBQWMsTUFBTSw0QkFBNEIsQ0FBQztBQUMvRCxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDOUMsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ3RELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUMvRCxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFDbEQsT0FBTyxPQUFPLE1BQU0sZ0JBQWdCLENBQUM7QUFDckMsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3RDLE9BQU8sRUFBaUMsZUFBZSxFQUFFLFNBQVMsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQ2xHLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQXlCNUQsTUFBTSxDQUFDLE1BQU0sU0FBUyxHQUFHLENBQXlCLEVBTTlCLEVBQWUsRUFBRTtRQU5hLEVBQ2hELE9BQU8sRUFDUCxJQUFJLEVBQ0osTUFBTSxHQUFHLEtBQUssRUFDZCxNQUFNLEdBQUcsTUFBTSxPQUVHLEVBRGYsSUFBSSxjQUx5Qyx1Q0FNakQsQ0FEUTtJQUVQLE1BQU0sQ0FBQyxJQUFJLEVBQUUsVUFBVSxDQUFDLEdBQUcsWUFBWSxFQUFLLENBQUM7SUFDN0MsTUFBTSxVQUFVLEdBQUcsT0FBTyxDQUFDLElBQUksRUFBRSxDQUFDLElBQUksYUFBSixJQUFJLHVCQUFKLElBQUksQ0FBRSxHQUFH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

package/dist/src/components/Dialog/Dialog.js

@@ -1,18 +1,41 @@
 import React from 'react';
 import omit from 'lodash/omit';
+import { Overlay, useModalOverlay } from '@react-aria/overlays';
+import { useDialog } from '@react-aria/dialog';
+import { FocusScope } from '@react-aria/focus';
+import { useId } from '@react-aria/utils';
+import { useOverlayTriggerState } from '@react-stately/overlays';
 import { GhostButton, SecondaryButton } from '../../../src/components/Button/Button';
 import { Icon } from '../../../src/components/Icon/Icon';
 import { Modal } from '../../../src/common/Modal/Modal';
 import { DIALOG_ICONS_AND_COLORS } from '../../../src/common/Dialog/Dialog';
-export const Dialog = ({ title, type = 'confirmation', open, children, primaryAction, secondaryAction, }) => (React.createElement(Modal, { open: open },
-    React.createElement(Modal.BackDrop, null),
-    React.createElement(Modal.Dialog, { size: "sm" },
-        React.createElement(Modal.Header, null,
-            React.createElement(Icon, { icon: DIALOG_ICONS_AND_COLORS[type].icon, color: DIALOG_ICONS_AND_COLORS[type].color, fontSize: 20 }),
-            React.createElement(Modal.Title, { variant: "body-large", color: DIALOG_ICONS_AND_COLORS[type].color }, title)),
-        React.createElement(Modal.Body, null, children),
-        React.createElement(Modal.Footer, null,
-            React.createElement(Modal.Actions, null,
-                secondaryAction && (React.createElement(GhostButton, Object.assign({ key: secondaryAction.text }, omit(secondaryAction, 'text')), secondaryAction.text)),
-                React.createElement(SecondaryButton, Object.assign({ key: primaryAction.text }, omit(primaryAction, 'text')), primaryAction.text))))));
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRGlhbG9nLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvRGlhbG9nL0RpYWxvZy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sSUFBSSxNQUFNLGFBQWEsQ0FBQztBQUMvQixPQUFPLEVBQUUsV0FBVyxFQUFFLGVBQWUsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQzVFLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUVoRCxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDL0MsT0FBTyxFQUFjLHVCQUF1QixFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFzQi9FLE1BQU0sQ0FBQyxNQUFNLE1BQU0sR0FBMEIsQ0FBQyxFQUM1QyxLQUFLLEVBQ0wsSUFBSSxHQUFHLGNBQWMsRUFDckIsSUFBSSxFQUNKLFFBQVEsRUFDUixhQUFhLEVBQ2IsZUFBZSxHQUNoQixFQUFFLEVBQUUsQ0FBQyxDQUNKLG9CQUFDLEtBQUssSUFBQyxJQUFJLEVBQUUsSUFBSTtJQUNmLG9CQUFDLEtBQUssQ0FBQyxRQUFRLE9BQUc7SUFDbEIsb0JBQUMsS0FBSyxDQUFDLE1BQU0sSUFBQyxJQUFJLEVBQUMsSUFBSTtRQUNyQixvQkFBQyxLQUFLLENBQUMsTUFBTTtZQUNYLG9CQUFDLElBQUksSUFBQyxJQUFJLEVBQUUsdUJBQXVCLENBQUMsSUFBSSxDQUFDLENBQUMsSUFBSSxFQUFFLEtBQUssRUFBRSx1QkFBdUIsQ0FBQyxJQUFJLENBQUMsQ0FBQyxLQUFLLEVBQUUsUUFBUSxFQUFFLEVBQUUsR0FBSTtZQUM1RyxvQkFBQyxLQUFLLENBQUMsS0FBSyxJQUFDLE9BQU8sRUFBQyxZQUFZLEVBQUMsS0FBSyxFQUFFLHVCQUF1QixDQUFDLElBQUksQ0FBQyxDQUFDLEtBQUssSUFDekUsS0FBSyxDQUNNLENBQ0Q7UUFDZixvQkFBQyxLQUFLLENBQUMsSUFBSSxRQUFFLFFBQVEsQ0FBYztRQUNuQyxvQkFBQyxLQUFLLENBQUMsTUFBTTtZQUNYLG9CQUFDLEtBQUssQ0FBQyxPQUFPO2dCQUNYLGVBQWUsSUFBSSxDQUNsQixvQkFBQyxXQUFXLGtCQUFDLEdBQUcsRUFBRSxlQUFlLENBQUMsSUFBSSxJQUFNLElBQUksQ0FBQyxlQUFlLEVBQUUsTUFBTSxDQUFDLEdBQ3RFLGVBQWUsQ0FBQyxJQUFJLENBQ1QsQ0FDZjtnQkFDRCxvQkFBQyxlQUFlLGtCQUFDLEdBQUcsRUFBRSxhQUFhLENBQUMsSUFBSSxJQUFNLElBQUksQ0FBQyxhQUFhLEVBQUUsTUFBTSxDQUFDLEdBQ3RFLGFBQWEsQ0FBQyxJQUFJLENBQ0gsQ0FDSixDQUNILENBQ0YsQ0FDVCxDQUNULENBQUMifQ==
+export const Dialog = ({ title, type = 'confirmation', open, children, primaryAction, secondaryAction, }) => {
+    const ref = React.useRef(null);
+    const state = useOverlayTriggerState({ isOpen: open });
+    const { modalProps, underlayProps } = useModalOverlay({ isDismissable: false }, state, ref);
+    const labelledBy = useId();
+    const describedBy = useId();
+    // useDialog() also returns 'titleProps', but it doesn't work correctly
+    // in this case because the title id is set to null after the second render.
+    // The problem (most likely) is somewhere in this component which causes
+    // it render twice when it is opened and that causes the useSlotId() hook
+    // in react-aria to think that the title is not rendered correctly.
+    const { dialogProps } = useDialog({ 'role': 'alertdialog', 'aria-labelledby': labelledBy, 'aria-describedby': describedBy }, ref);
+    if (!open) {
+        return null;
+    }
+    return (React.createElement(Overlay, null,
+        React.createElement(Modal, { open: open },
+            React.createElement(Modal.BackDrop, Object.assign({}, underlayProps)),
+            React.createElement(FocusScope, { contain: true, restoreFocus: true, autoFocus: true },
+                React.createElement(Modal.Dialog, Object.assign({ ref: ref, size: "sm" }, modalProps, dialogProps),
+                    React.createElement(Modal.Header, null,
+                        React.createElement(Icon, { icon: DIALOG_ICONS_AND_COLORS[type].icon, color: DIALOG_ICONS_AND_COLORS[type].color, fontSize: 20 }),
+                        React.createElement(Modal.Title, { id: labelledBy, variant: "body-large", color: DIALOG_ICONS_AND_COLORS[type].color }, title)),
+                    React.createElement(Modal.Body, { id: describedBy }, children),
+                    React.createElement(Modal.Footer, null,
+                        React.createElement(Modal.Actions, null,
+                            secondaryAction && (React.createElement(GhostButton, Object.assign({ key: secondaryAction.text }, omit(secondaryAction, 'text')), secondaryAction.text)),
+                            React.createElement(SecondaryButton, Object.assign({ key: primaryAction.text }, omit(primaryAction, 'text')), primaryAction.text))))))));
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRGlhbG9nLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvRGlhbG9nL0RpYWxvZy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sSUFBSSxNQUFNLGFBQWEsQ0FBQztBQUMvQixPQUFPLEVBQUUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQ2hFLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUMvQyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDL0MsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBQzFDLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQ2pFLE9BQU8sRUFBRSxXQUFXLEVBQUUsZUFBZSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDNUUsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBRWhELE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUMvQyxPQUFPLEVBQWMsdUJBQXVCLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQXNCL0UsTUFBTSxDQUFDLE1BQU0sTUFBTSxHQUEwQixDQUFDLEVBQzVDLEtBQUssRUFDTCxJQUFJLEdBQUcsY0FBYyxFQUNyQixJQUFJLEVBQ0osUUFBUSxFQUNSLGFBQWEsRUFDYixlQUFlLEdBQ2hCLEVBQUUsRUFBRTtJQUNILE1BQU0sR0FBRyxHQUFHLEtBQUssQ0FBQyxNQUFNLENBQWlCLElBQUksQ0FBQyxDQUFDO0lBQy9DLE1BQU0sS0FBSyxHQUFHLHNCQUFzQixDQUFDLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSxDQUFDLENBQUM7SUFDdkQsTUFBTSxFQUFFLFVBQVUsRUFBRSxhQUFhLEVBQUUsR0FBRyxlQUFlLENBQUMsRUFBRSxhQUFhLEVBQUUsS0FBSyxFQUFFLEVBQUUsS0FBSyxFQUFFLEdBQUcsQ0FBQyxDQUFDO0lBQzVGLE1BQU0sVUFBVSxHQUFHLEtBQUssRUFBRSxDQUFDO0lBQzNCLE1BQU0sV0FBVyxHQUFHLEtBQUssRUFBRSxDQUFDO0lBQzVCLHVFQUF1RTtJQUN2RSw0RUFBNEU7SUFDNUUsd0VBQXdFO0lBQ3hFLHlFQUF5RTtJQUN6RSxtRUFBbUU7SUFDbkUsTUFBTSxFQUFFLFdBQVcsRUFBRSxHQUFHLFNBQVMsQ0FDL0IsRUFBRSxNQUFNLEVBQUUsYUFBYSxFQUFFLGlCQUFpQixFQUFFLFVBQVUsRUFBRSxrQkFBa0IsRUFBRSxXQUFXLEVBQUUsRUFDekYsR0FBRyxDQUNKLENBQUM7SUFFRixJQUFJLENBQUMsSUFBSSxFQUFFO1FBQ1QsT0FBTyxJQUFJLENBQUM7S0FDYjtJQUVELE9BQU8sQ0FDTCxvQkFBQyxPQUFPO1FBQ04sb0JBQUMsS0FBSyxJQUFDLElBQUksRUFBRSxJQUFJO1lBQ2Ysb0JBQUMsS0FBSyxDQUFDLFFBQVEsb0JBQUssYUFBYSxFQUFJO1lBQ3JDLG9CQUFDLFVBQVUsSUFBQyxPQUFPLFFBQUMsWUFBWSxRQUFDLFNBQVM7Z0JBQ3hDLG9CQUFDLEtBQUssQ0FBQyxNQUFNLGtCQUFDLEdBQUcsRUFBRSxHQUFHLEVBQUUsSUFBSSxFQUFDLElBQUksSUFBSyxVQUFVLEVBQU0sV0FBVztvQkFLL0Qsb0JBQUMsS0FBSyxDQUFDLE1BQU07d0JBQ1gsb0JBQUMsSUFBSSxJQUNILElBQUksRUFBRSx1QkFBdUIsQ0FBQyxJQUFJLENBQUMsQ0FBQyxJQUFJLEVBQ3hDLEtBQUssRUFBRSx1QkFBdUIsQ0FBQyxJQUFJLENBQUMsQ0FBQyxLQUFLLEVBQzFDLFFBQVEsRUFBRSxFQUFFLEdBQ1o7d0JBQ0Ysb0JBQUMsS0FBSyxDQUFDLEtBQUssSUFBQyxFQUFFLEVBQUUsVUFBVSxFQUFFLE9BQU8sRUFBQyxZQUFZLEVBQUMsS0FBSyxFQUFFLHVCQUF1QixDQUFDLElBQUksQ0FBQyxDQUFDLEtBQUssSUFDekYsS0FBSyxDQUNNLENBQ0Q7b0JBQ2Ysb0JBQUMsS0FBSyxDQUFDLElBQUksSUFBQyxFQUFFLEVBQUUsV0FBVyxJQUFHLFFBQVEsQ0FBYztvQkFDcEQsb0JBQUMsS0FBSyxDQUFDLE1BQU07d0JBQ1gsb0JBQUMsS0FBSyxDQUFDLE9BQU87NEJBQ1gsZUFBZSxJQUFJLENBQ2xCLG9CQUFDLFdBQVcsa0JBQUMsR0FBRyxFQUFFLGVBQWUsQ0FBQyxJQUFJLElBQU0sSUFBSSxDQUFDLGVBQWUsRUFBRSxNQUFNLENBQUMsR0FDdEUsZUFBZSxDQUFDLElBQUksQ0FDVCxDQUNmOzRCQUNELG9CQUFDLGVBQWUsa0JBQUMsR0FBRyxFQUFFLGFBQWEsQ0FBQyxJQUFJLElBQU0sSUFBSSxDQUFDLGFBQWEsRUFBRSxNQUFNLENBQUMsR0FDdEUsYUFBYSxDQUFDLElBQUksQ0FDSCxDQUNKLENBQ0gsQ0FDRixDQUNKLENBQ1AsQ0FDQSxDQUNYLENBQUM7QUFDSixDQUFDLENBQUMifQ==