@cloudoperators/juno-ui-components 5.0.1 → 5.1.0

package/build/components/Modal/Modal.component.d.ts

@@ -16,14 +16,32 @@ To make the modal less intrusive and effectively un-modal it, pass `closeOnBackd
 export declare const Modal: React.FC<ModalProps>;
 type ModalSize = "small" | "large";
 export interface ModalProps extends Omit<React.HTMLProps<HTMLDivElement>, "size"> {
-    /** The aria-label of the modal. Use only if the modal does NOT have a `title` or `heading`.  */
-    ariaLabel?: string;
     /** The title of the modal. This will be rendering as the heading of the modal, and the modal's `arial-labelledby` attribute will reference the title/heading element. If the modal does not have `title` or `heading`, use `ariaLabel` to provide an accessible name for the modal. */
     title?: string;
     /** Also the title of the modal, just for API flexibility. If both `title` and `heading` are passed, `title` will win. */
     heading?: string;
+    /** The aria-label of the modal. Use only if the modal does NOT have a `title` or `heading`.  */
+    ariaLabel?: string;
+    /** By default, the first element in the tab order of the Modal content will be focussed. To specify an element to be focussed when the modal opens, pass an element, DOM node, or selector string. */
+    initialFocus?: HTMLElement | SVGElement | string;
+    /** Whether the modal will be open */
+    open?: boolean;
+    /** Whether the modal can be closed using an "X"-Button at the top right. Defaults to true. */
+    closeable?: boolean;
+    /** Whether the modal should be closed when the backdrop is clicked. Essentially 'un-modals' the modal. */
+    closeOnEsc?: boolean;
     /** The Modal size */
+    closeOnBackdropClick?: boolean;
+    /** Whether the modal can be closed by hitting the ESC key */
     size?: ModalSize;
+    /** Pass to remove default padding from the content area of the modal */
+    unpad?: boolean;
+    /** Custom className to add to the modal */
+    className?: string;
+    /** The children of the modal. These will be rendered as the modal content. To render custom buttons at the bottom, see `modalFooter` below.*/
+    children?: React.ReactNode;
+    /** Optional. Pass a `<ModalFooter />` component with custom content as required. Will default to using the `<ModalFooter/>` component internally. */
+    modalFooter?: React.ReactElement;
     /** Pass a label to render a confirm button and a Cancel button */
     confirmButtonLabel?: string;
     /** Pass a label for the cancel button. Defaults to "Cancel" */
@@ -32,28 +50,14 @@ export interface ModalProps extends Omit<React.HTMLProps<HTMLDivElement>, "size"
     confirmButtonIcon?: KnownIcons;
     /** Pass an icon name to show on the cancelling button */
     cancelButtonIcon?: KnownIcons;
-    /** Whether the modal will be open */
-    open?: boolean;
-    /** The children of the modal. These will be rendered as the modal content. To render custom buttons at the bottom, see `modalFooter` below.*/
-    children?: React.ReactNode;
-    /** Optional. Pass a `<ModalFooter />` component with custom content as required. Will default to using the `<ModalFooter/>` component internally. */
-    modalFooter?: React.ReactElement;
-    /** Whether the modal can be closed using an "X"-Button at the top right. Defaults to true. */
-    closeable?: boolean;
-    /** Pass to remove default padding from the content area of the modal */
-    unpad?: boolean;
-    /** Custom className to add to the modal */
-    className?: string;
+    /** Determines whether the confirm action button should be disabled */
+    disableConfirmButton?: boolean;
+    /** Determines whether the cancel action button should be disabled */
+    disableCancelButton?: boolean;
     /** A handler to execute once the modal is confirmed by clicking the confrim button if exists. Note that we do not close the modal automatically. */
     onConfirm?: React.MouseEventHandler<HTMLElement>;
     /** A handler to execute once the modal is cancelled or dismissed using the x-Close button,  Cancel-button or pressing ESC */
     onCancel?: (event: React.MouseEvent<HTMLElement> | KeyboardEvent) => void;
-    /** Whether the modal should be closed when the backdrop is clicked. Essentially 'un-modals' the modal. */
-    closeOnBackdropClick?: boolean;
-    /** Whether the modal can be closed by hitting the ESC key */
-    closeOnEsc?: boolean;
-    /** By default, the first element in the tab order of the Modal content will be focussed. To specify an element to be focussed when the modal opens, pass an element, DOM node, or selector string. */
-    initialFocus?: HTMLElement | SVGElement | string;
 }
 export {};
 //# sourceMappingURL=Modal.component.d.ts.map

package/build/components/Modal/Modal.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.component.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.component.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA6C,MAAM,OAAO,CAAA;AAIjE,OAAO,EAAQ,UAAU,EAAE,MAAM,wBAAwB,CAAA;AA6DzD;;;;;;;;;;;;EAYE;AACF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA2ItC,CAAA;AAED,KAAK,SAAS,GAAG,OAAO,GAAG,OAAO,CAAA;AAElC,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;IAC/E,gGAAgG;IAChG,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uRAAuR;IACvR,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yHAAyH;IACzH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,qBAAqB;IACrB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,kEAAkE;IAClE,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,+DAA+D;IAC/D,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,gEAAgE;IAChE,iBAAiB,CAAC,EAAE,UAAU,CAAA;IAC9B,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,UAAU,CAAA;IAC7B,qCAAqC;IACrC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,8IAA8I;IAC9I,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,qJAAqJ;IACrJ,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAA;IAChC,8FAA8F;IAC9F,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,wEAAwE;IACxE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oJAAoJ;IACpJ,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAA;IAChD,6HAA6H;IAE7H,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,GAAG,aAAa,KAAK,IAAI,CAAA;IACzE,0GAA0G;IAC1G,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,6DAA6D;IAC7D,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,sMAAsM;IACtM,YAAY,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,MAAM,CAAA;CACjD"}
+{"version":3,"file":"Modal.component.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.component.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA6C,MAAM,OAAO,CAAA;AAIjE,OAAO,EAAQ,UAAU,EAAE,MAAM,wBAAwB,CAAA;AA6DzD;;;;;;;;;;;;EAYE;AACF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA+ItC,CAAA;AAED,KAAK,SAAS,GAAG,OAAO,GAAG,OAAO,CAAA;AAElC,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;IAC/E,uRAAuR;IACvR,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yHAAyH;IACzH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,gGAAgG;IAChG,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sMAAsM;IACtM,YAAY,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,MAAM,CAAA;IAChD,qCAAqC;IACrC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,8FAA8F;IAC9F,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,0GAA0G;IAC1G,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,qBAAqB;IACrB,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,6DAA6D;IAC7D,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,wEAAwE;IACxE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8IAA8I;IAC9I,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,qJAAqJ;IACrJ,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAA;IAChC,kEAAkE;IAClE,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,+DAA+D;IAC/D,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,gEAAgE;IAChE,iBAAiB,CAAC,EAAE,UAAU,CAAA;IAC9B,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,UAAU,CAAA;IAC7B,sEAAsE;IACtE,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,qEAAqE;IACrE,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,oJAAoJ;IACpJ,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAA;IAChD,6HAA6H;IAE7H,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,GAAG,aAAa,KAAK,IAAI,CAAA;CAC1E"}

package/build/components/Modal/Modal.stories.d.ts

@@ -5,6 +5,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const SimpleConfirmDialog: Story;
+export declare const SimpleConfirmDialogWithDisabledButtons: Story;
 export declare const AutoFocusDialog: Story;
 export declare const LargeWithTitle: Story;
 export declare const NonCloseable: Story;

package/build/components/Modal/Modal.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.stories.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,KAAK,EAAc,MAAM,mBAAmB,CAAA;AAqCrD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CA2B5B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAOjC,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAOlC,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAsBnB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAoB/B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAe/B,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAwBjC,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KA8ClC,CAAA"}
+{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.stories.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,KAAK,EAAc,MAAM,mBAAmB,CAAA;AAqCrD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CA2B5B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAOjC,CAAA;AAED,eAAO,MAAM,sCAAsC,EAAE,KASpD,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAOlC,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAsBnB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAoB/B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAe/B,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAwBjC,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KA8ClC,CAAA"}

package/build/components/ModalFooter/ModalFooter.component.d.ts

@@ -8,6 +8,8 @@ Can alternatively render all custom children as passed.
 */
 export declare const ModalFooter: React.FC<ModalFooterProps>;
 export interface ModalFooterProps extends React.HTMLProps<HTMLDivElement> {
+    /** A custom className. Useful to configure flex items alignment when passing custom content as children. */
+    className?: string;
     /** Custom children to render. */
     children?: React.ReactNode;
     /** The label for the Confirm-button. When passed, the component will render a Confirm button and a cancel button, otherwise the component will ONLY render a Close-Button. */
@@ -18,8 +20,10 @@ export interface ModalFooterProps extends React.HTMLProps<HTMLDivElement> {
     confirmButtonIcon?: KnownIcons;
     /** Pass an icon name to show on the cancelling button */
     cancelButtonIcon?: KnownIcons;
-    /** A custom className. Useful to configure flex items alignment when passing custom content as children. */
-    className?: string;
+    /** Determines whether the confirm action button should be disabled */
+    disableConfirmButton?: boolean;
+    /** Determines whether the cancel action button should be disabled */
+    disableCancelButton?: boolean;
     /** Handler to execute once the confirming button is clicked */
     onConfirm?: React.MouseEventHandler<HTMLElement>;
     /** Handler to execute once the cancelling button is clicked */

package/build/components/ModalFooter/ModalFooter.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalFooter.component.d.ts","sourceRoot":"","sources":["../../../src/components/ModalFooter/ModalFooter.component.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAgBnD;;;;;EAKE;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqDlD,CAAA;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IACvE,iCAAiC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,8KAA8K;IAC9K,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,kGAAkG;IAClG,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,gEAAgE;IAChE,iBAAiB,CAAC,EAAE,UAAU,CAAA;IAC9B,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,UAAU,CAAA;IAC7B,4GAA4G;IAC5G,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAA;IAChD,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAA;CAChD"}
+{"version":3,"file":"ModalFooter.component.d.ts","sourceRoot":"","sources":["../../../src/components/ModalFooter/ModalFooter.component.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAgBnD;;;;;EAKE;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA0DlD,CAAA;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IACvE,4GAA4G;IAC5G,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,8KAA8K;IAC9K,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,kGAAkG;IAClG,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,gEAAgE;IAChE,iBAAiB,CAAC,EAAE,UAAU,CAAA;IAC9B,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,UAAU,CAAA;IAC7B,sEAAsE;IACtE,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,qEAAqE;IACrE,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,+DAA+D;IAC/D,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAA;IAChD,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAA;CAChD"}

package/build/components/ModalFooter/ModalFooter.stories.d.ts

@@ -5,5 +5,6 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Configure: Story;
+export declare const ConfigureWithDisabledButtons: Story;
 export declare const Custom: Story;
 //# sourceMappingURL=ModalFooter.stories.d.ts.map

package/build/components/ModalFooter/ModalFooter.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalFooter.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ModalFooter/ModalFooter.stories.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAM3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAM1D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAWhC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAGrB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAgBpB,CAAA"}
+{"version":3,"file":"ModalFooter.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ModalFooter/ModalFooter.stories.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAM3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAM1D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAWhC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAGrB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAA;AAED,eAAO,MAAM,4BAA4B,EAAE,KAQ1C,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAgBpB,CAAA"}