@kong/kongponents 9.30.1 → 9.30.2

package/dist/types/types/index.d.ts

@@ -12,10 +12,12 @@ export * from './date-time-picker';
 export * from './dropdown';
 export * from './empty-state';
 export * from './external-link';
+export * from './file-upload';
 export * from './input';
 export * from './input-switch';
 export * from './label';
 export * from './method-badge';
+export * from './modal';
 export * from './multi-select';
 export * from './pagination';
 export * from './popover';

package/dist/types/types/modal.d.ts

@@ -0,0 +1,127 @@
+import type { FocusTrapTabbableOptions } from 'focus-trap';
+import type { ButtonAppearance } from './button';
+export interface ModalProps {
+    /**
+     * Whether the modal is shown.
+     * @default false
+     */
+    visible?: boolean;
+    /**
+     * Modal title.
+     * @default ''
+     */
+    title?: string;
+    /**
+     * Text displayed in the action button.
+     * @default ''
+     */
+    actionButtonText?: string;
+    /**
+     * Appearance of the action button.
+     * One of ['primary', 'secondary', 'tertiary', 'danger', 'none'].
+     * @default 'primary'
+     */
+    actionButtonAppearance?: ButtonAppearance;
+    /**
+     * Whether the action button is disabled.
+     * @default false
+     */
+    actionButtonDisabled?: boolean;
+    /**
+     * Whether to hide the cancel button.
+     * @default false
+     */
+    hideCancelButton?: boolean;
+    /**
+     * Text displayed in the cancel button.
+     * @default ''
+     */
+    cancelButtonText?: string;
+    /**
+     * Appearance of the cancel button.
+     * One of ['primary', 'secondary', 'tertiary', 'danger', 'none'].
+     * @default 'tertiary'
+     */
+    cancelButtonAppearance?: ButtonAppearance;
+    /**
+     * Whether the cancel button is disabled.
+     * @default false
+     */
+    cancelButtonDisabled?: boolean;
+    /**
+     * Options to be passed to [focus-trap](https://github.com/focus-trap/focus-trap)'s `tabbableOptions`, which is responsible for trapping focus inside the modal box.
+     */
+    tabbableOptions?: FocusTrapTabbableOptions;
+    /**
+     * Max width of the modal.
+     * @default '500px'
+     */
+    maxWidth?: string;
+    /**
+     * Max height of the modal.
+     * @default 'calc(100vh - 200px)'
+     */
+    maxHeight?: string;
+    /**
+     * Whether clicking on backdrop should close the modal.
+     * @default false
+     */
+    closeOnBackdropClick?: boolean;
+    /**
+     * Whether pressing the `escape` key should close the modal.
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Whether to hide close icon next to the title.
+     * @default false
+     */
+    hideCloseIcon?: boolean;
+    /**
+     * Whether the modal window should take up almost the whole screen.
+     * @default false
+     */
+    fullScreen?: boolean;
+    /**
+     * Whether KModal should set focus on the first visible input field as soon as modal opens.
+     * @default false
+     */
+    inputAutofocus?: boolean;
+    /**
+     * `zIndex` value for the modal.
+     * @default 1100
+     */
+    zIndex?: number;
+}
+export interface ModalEmits {
+    /**
+     * Emitted when action button is clicked.
+     */
+    proceed: [];
+    /**
+     * Emitted when cancel button or close icon (when not hidden) is clicked.
+     */
+    cancel: [];
+}
+export interface ModalSlots {
+    /**
+     * Slot for modal content.
+     */
+    default?(): any;
+    /**
+     * Slot for modal title.
+     */
+    title?(): any;
+    /**
+     * Slot for modal footer content.
+     */
+    footer?(): any;
+    /**
+     * Slot for cusom buttons in modal footer.
+     */
+    'footer-actions'?(): any;
+    /**
+     * Used to override the default header/content/footer layout with just a wrapper container to provide custom layout.
+     */
+    content?(): any;
+}

package/dist/types/types/skeleton.d.ts

@@ -5,3 +5,114 @@ export declare const SkeletonBoxWidthArray: readonly ["1", "2", "5", "6", "10",
 export type SkeletonBoxWidth = AnyElementOf<typeof SkeletonBoxWidthArray>;
 export declare const SkeletonBoxHeightArray: readonly ["1", "2"];
 export type SkeletonBoxHeight = AnyElementOf<typeof SkeletonBoxHeightArray>;
+export interface SkeletonBoxProps {
+    /**
+     * Width of the skeleton box in relative units.
+     * One of ['1', '2', '5', '6', '10', '25', '50', '75', '100'].
+     * @default '1'
+     */
+    width?: SkeletonBoxWidth;
+    /**
+     * Height of the skeleton box in relative units.
+     * One of ['1', '2'].
+     * @default '1'
+     */
+    height?: SkeletonBoxHeight;
+}
+export interface SkeletonProps {
+    /**
+     * The type of skeleton to render.
+     * One of ['', 'table', 'card', 'form', 'spinner', 'fullscreen-kong', 'fullscreen-generic'].
+     * @default ''
+     */
+    type?: SkeletonType;
+    /**
+     * Number of milliseconds to wait before showing the skeleton state.
+     * @default 0
+     */
+    delayMilliseconds?: number;
+    /**
+     * Number of the skeleton cards.
+     * @default 1
+     */
+    cardCount?: number;
+    /**
+     * Width of the skeleton card in relative units.
+     * @default ''
+     */
+    cardMaxWidth?: string;
+    /**
+     * Number of the skeleton table rows.
+     * @default 5
+     */
+    tableRows?: number;
+    /**
+     * Number of the skeleton table columns.
+     * @default 6
+     */
+    tableColumns?: number;
+    /**
+     * Progress of the skeleton loading indicator.
+     * @default null
+     */
+    progress?: number | null;
+    /**
+     * Whether to hide the progress bar.
+     * @default false
+     */
+    hideProgress?: boolean;
+    /**
+     * `zIndex` of the skeleton overlay.
+     * @default 10500
+     */
+    zIndex?: number;
+}
+/**
+ * @internal
+ */
+export type SkeletonCardProps = {
+    cardCount: Exclude<SkeletonProps['cardCount'], undefined>;
+    maxWidth: Exclude<SkeletonProps['cardMaxWidth'], undefined>;
+};
+/**
+ * @internal
+ */
+export type SkeletonTableProps = {
+    rows: Exclude<SkeletonProps['tableRows'], undefined>;
+    columns: Exclude<SkeletonProps['tableColumns'], undefined>;
+};
+/**
+ * List all props manually to make Vue compiler happy
+ * @internal
+ */
+export type SkeletonFullscreenProps = {
+    progress: Exclude<SkeletonProps['progress'], undefined>;
+    hideProgress: Exclude<SkeletonProps['hideProgress'], undefined>;
+    zIndex: Exclude<SkeletonProps['zIndex'], undefined>;
+};
+export interface SkeletonSlots {
+    /**
+     * The content for each skeleton row when `type` is `table`.
+     */
+    default?(): any;
+    /**
+     * The header of each skeleton card when `type` is `card`.
+     */
+    'card-header'?(): any;
+    /**
+     * The content of each skeleton card when `type` is `card`.
+     */
+    'card-content'?(): any;
+    /**
+     * The footer of each skeleton card when `type` is `card`.
+     */
+    'card-footer'?(): any;
+}
+/**
+ * @internal
+ */
+export type SkeletonCardSlots = Pick<SkeletonSlots, 'card-header' | 'card-content' | 'card-footer'>;
+/**
+ * @internal
+ */
+export type SkeletonTableSlots = Pick<SkeletonSlots, 'default'>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kong/kongponents",
-  "version": "9.30.1",
+  "version": "9.30.2",
   "description": "Kong Component library",
   "type": "module",
   "repository": {
@@ -80,7 +80,7 @@
     "@cypress/vite-dev-server": "^6.0.3",
     "@digitalroute/cz-conventional-changelog-for-jira": "^8.0.1",
     "@evilmartians/lefthook": "^1.11.11",
-    "@kong-ui-public/sandbox-layout": "^2.1.69",
+    "@kong-ui-public/sandbox-layout": "^2.1.72",
     "@kong/design-tokens": "^1.17.4",
     "@kong/eslint-config-kong-ui": "^1.2.7",
     "@semantic-release/changelog": "^6.0.3",
@@ -120,7 +120,7 @@
     "stylelint-config-html": "^1.1.0",
     "stylelint-config-recommended-scss": "^14.1.0",
     "stylelint-config-recommended-vue": "^1.5.0",
-    "stylelint-order": "^6.0.4",
+    "stylelint-order": "^7.0.0",
     "tsc-alias": "^1.8.15",
     "typescript": "^5.6.3",
     "vite": "^6.0.15",