@k8slens/lds 0.55.13 → 0.57.0

package/lib/cjs/Avatar/Avatar.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from "react";
+import React, { type HTMLAttributes } from "react";
 import { type Icon } from "@k8slens/lds-icons/lib/es/Icon/Icon";
 export interface AvatarProps extends Pick<HTMLAttributes<HTMLDivElement>, "aria-hidden" | "aria-label"> {
     /**
@@ -22,4 +22,4 @@ export interface AvatarProps extends Pick<HTMLAttributes<HTMLDivElement>, "aria-
  * Avatar component to display user's profile picture or initials.
  * If no image is provided, initials will be displayed with a random background color.
  */
-export default function Avatar({ name, className, image: AvatarImage, size, ...props }: AvatarProps): JSX.Element;
+export default function Avatar({ name, className, image: AvatarImage, size, ...props }: AvatarProps): React.JSX.Element;

package/lib/cjs/Badge/Badge.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from "react";
+import React, { HTMLAttributes } from "react";
 export interface BadgeProps extends Pick<HTMLAttributes<HTMLSpanElement>, "id" | "className" | "title" | "aria-label" | "aria-hidden" | "role"> {
     /**
      * If no title has not been provided, the badge will be hidden from screen readers.
@@ -14,4 +14,4 @@ export interface BadgeProps extends Pick<HTMLAttributes<HTMLSpanElement>, "id" |
      */
     size?: "sm" | "md" | "lg";
 }
-export default function Badge({ className, type, size, title, ...props }: BadgeProps): JSX.Element;
+export default function Badge({ className, type, size, title, ...props }: BadgeProps): React.JSX.Element;

package/lib/cjs/ButtonBar/ButtonBar.d.ts

@@ -13,5 +13,5 @@ export declare type ButtonBarProps<ElementType extends JSX.IntrinsicElements | R
  *
  * Usage: `import { ButtonBar } from "@k8slens/lds"`
  */
-declare function ButtonBar<ElementType extends JSX.IntrinsicElements | React.ElementType<any>>({ as: Component, type, gridSize, children, ...props }: PropsWithChildren<ButtonBarProps<ElementType>>): JSX.Element;
+declare function ButtonBar<ElementType extends JSX.IntrinsicElements | React.ElementType<any>>({ as: Component, type, gridSize, children, ...props }: PropsWithChildren<ButtonBarProps<ElementType>>): React.JSX.Element;
 export default ButtonBar;

package/lib/cjs/Checkbox/Checkbox.d.ts

@@ -4,4 +4,4 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     onChange(value: boolean, evt: React.ChangeEvent<HTMLInputElement>): void;
     disabled?: boolean;
 }
-export default function Checkbox({ disabled, value, onChange, className, ...inputProps }: CheckboxProps): JSX.Element;
+export default function Checkbox({ disabled, value, onChange, className, ...inputProps }: CheckboxProps): React.JSX.Element;

package/lib/cjs/ConfirmDialog/ConfirmDialog.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import React, { type ReactNode } from "react";
 import { type ButtonProps } from "../Button/Button";
 declare type AllowedButtonProps = Pick<ButtonProps, "type" | "size" | "discreet" | "icon" | "iconPosition" | "textTransform">;
 export declare type ConfirmDialogProps = {
@@ -15,10 +15,10 @@ export declare type ConfirmDialogProps = {
 /**
  * ConfirmDialog is a modal dialog that asks the user to confirm an action.
  */
-declare const ConfirmDialog: ({ title, message, confirmText, cancelLabel, confirmButtonProps, cancelButtonProps, handleClose, handleConfirm, handleCancel, }: ConfirmDialogProps) => JSX.Element;
+declare const ConfirmDialog: ({ title, message, confirmText, cancelLabel, confirmButtonProps, cancelButtonProps, handleClose, handleConfirm, handleCancel, }: ConfirmDialogProps) => React.JSX.Element;
 declare type ConfirmDialogConfig = Omit<ConfirmDialogProps, "title" | "message" | "handleClose" | "handleConfirm" | "handleCancel">;
 export declare const useConfirmDialog: () => {
-    ConfirmDialog: JSX.Element | null;
+    ConfirmDialog: React.JSX.Element | null;
     confirm: (title: string, message?: string | ReactNode, props?: ConfirmDialogConfig) => Promise<unknown>;
 };
 export default ConfirmDialog;

package/lib/cjs/Modal/Modal.d.ts

@@ -25,5 +25,5 @@ export interface ModalProps<Component extends keyof JSX.IntrinsicElements | Reac
  *
  * Usage: `import { Modal } from "@k8slens/lds"`
  */
-declare function Modal<Component extends keyof JSX.IntrinsicElements | React.ElementType>({ children, isOpen, onClose, title, subTitle, size, contentComponent, contentProps: _contentProps, buttonBarProps, className, footer, }: PropsWithChildren<ModalProps<Component>>): JSX.Element | null;
+declare function Modal<Component extends keyof JSX.IntrinsicElements | React.ElementType>({ children, isOpen, onClose, title, subTitle, size, contentComponent, contentProps: _contentProps, buttonBarProps, className, footer, }: PropsWithChildren<ModalProps<Component>>): React.JSX.Element | null;
 export default Modal;

package/lib/cjs/Modal/Modal.js

@@ -1 +1 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),a=require("clsx"),r=require("@headlessui/react"),o=require("../Panel/Panel.js"),l=require("../ButtonBar/ButtonBar.js"),s=require("./Modal.module.css.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=n(t),i=n(a);module.exports=function(a){var n=a.children,d=a.isOpen,c=a.onClose,m=a.title,f=a.subTitle,p=a.size,_=void 0===p?"md":p,v=a.contentComponent,h=a.contentProps,g=a.buttonBarProps,q=void 0===g?{}:g,C=a.className,N=void 0===C?"":C,P=a.footer,b=t.useMemo((function(){return e.__assign(e.__assign({},h||{}),{className:i.default(s.modalContent,(null==h?void 0:h.className)||"")})}),[h]);return d?u.default.createElement(r.Dialog,{open:d,onClose:c,className:i.default(s.modal,s[_])},u.default.createElement(o,{wrapperComponent:v||"div",wrapperProps:b,className:N,headerComponent:r.Dialog.Title,headerProps:{as:"header"},header:u.default.createElement(u.default.Fragment,null,u.default.createElement("h3",{className:"lds-h2"},m),f?u.default.createElement("p",{className:s.subTitle},f):null),footer:P,footerComponent:l,footerProps:e.__assign(e.__assign({},q),{as:"footer"})},n)):null};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),a=require("clsx"),r=require("@headlessui/react"),o=require("../Panel/Panel.js"),l=require("../ButtonBar/ButtonBar.js"),s=require("./Modal.module.css.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=n(t),i=n(a);module.exports=function(a){var n=a.children,d=a.isOpen,c=a.onClose,m=a.title,f=a.subTitle,p=a.size,_=void 0===p?"md":p,v=a.contentComponent,h=a.contentProps,g=a.buttonBarProps,q=void 0===g?{}:g,C=a.className,N=void 0===C?"":C,P=a.footer,b=t.useMemo((function(){return e.__assign(e.__assign({},h||{}),{className:i.default(s.modalContent,(null==h?void 0:h.className)||"")})}),[h]);return d?u.default.createElement(r.Dialog,{open:d,onClose:c,className:i.default(s.modal,s[_])},u.default.createElement(o,{wrapperComponent:v||"div",wrapperProps:b,className:N,headerComponent:r.DialogTitle,headerProps:{as:"header"},header:u.default.createElement(u.default.Fragment,null,u.default.createElement("h3",{className:"lds-h2"},m),f?u.default.createElement("p",{className:s.subTitle},f):null),footer:P,footerComponent:l,footerProps:e.__assign(e.__assign({},q),{as:"footer"})},n)):null};

package/lib/cjs/NumberBadge/NumberBadge.d.ts

@@ -1,4 +1,4 @@
-import { AriaRole } from "react";
+import React, { AriaRole } from "react";
 import { LozengeProps } from "../Lozenge/Lozenge";
 export declare const formatNumber: (n: number) => string;
 interface BaseNumberBadgeProps extends Omit<LozengeProps, "role" | "children" | "title" | "textTransform" | "size"> {
@@ -31,5 +31,5 @@ interface Props extends BaseNumberBadgeProps {
     role: Exclude<AriaRole, "status">;
 }
 export declare type NumberBadgeProps = StatusNumberBadgeProps | Props;
-export default function NumberBadge({ className, value, showZero, displayPlusSign, title, ...props }: NumberBadgeProps): JSX.Element | null;
+export default function NumberBadge({ className, value, showZero, displayPlusSign, title, ...props }: NumberBadgeProps): React.JSX.Element | null;
 export {};

package/lib/cjs/Panel/Panel.d.ts

@@ -25,5 +25,5 @@ export interface PanelProps<WrapperComponent extends keyof JSX.IntrinsicElements
  *
  * Usage: `import { Panel } from "@k8slens/lds"`
  */
-declare function Panel<WrapperComponent extends keyof JSX.IntrinsicElements | React.ElementType | typeof Fragment = typeof Fragment, HeaderComponent extends keyof JSX.IntrinsicElements | React.ElementType = "header", ContentComponent extends keyof JSX.IntrinsicElements | React.ElementType = "div", FooterComponent extends keyof JSX.IntrinsicElements | React.ElementType = "footer">({ header, footer, className, wrapperComponent, wrapperProps: _wrapperProps, headerComponent, headerProps: _headerProps, contentComponent, contentProps: _contentProps, footerComponent, footerProps: _footerProps, loading, children, }: React.PropsWithChildren<PanelProps<WrapperComponent, HeaderComponent, ContentComponent, FooterComponent>>): JSX.Element;
+declare function Panel<WrapperComponent extends keyof JSX.IntrinsicElements | React.ElementType | typeof Fragment = typeof Fragment, HeaderComponent extends keyof JSX.IntrinsicElements | React.ElementType = "header", ContentComponent extends keyof JSX.IntrinsicElements | React.ElementType = "div", FooterComponent extends keyof JSX.IntrinsicElements | React.ElementType = "footer">({ header, footer, className, wrapperComponent, wrapperProps: _wrapperProps, headerComponent, headerProps: _headerProps, contentComponent, contentProps: _contentProps, footerComponent, footerProps: _footerProps, loading, children, }: React.PropsWithChildren<PanelProps<WrapperComponent, HeaderComponent, ContentComponent, FooterComponent>>): React.JSX.Element;
 export default Panel;

package/lib/cjs/ProfileBlock/ProfileBlock.d.ts

@@ -1,4 +1,4 @@
-import { HTMLProps, ReactElement } from "react";
+import React, { HTMLProps, ReactElement } from "react";
 import { type AvatarProps } from "../Avatar/Avatar";
 declare type Item = {
     title: string;
@@ -12,5 +12,5 @@ export declare type ProfileBlockProps = HTMLProps<HTMLDivElement> & {
     formatTitle?: (item: Item) => string | ReactElement;
     formatSubtitle?: (item: Item) => string | ReactElement;
 };
-declare const ProfileBlock: ({ className, loading, item, formatTitle, formatSubtitle, ...props }: ProfileBlockProps) => JSX.Element;
+declare const ProfileBlock: ({ className, loading, item, formatTitle, formatSubtitle, ...props }: ProfileBlockProps) => React.JSX.Element;
 export default ProfileBlock;

package/lib/cjs/ProgressBar/ProgressBar.d.ts

@@ -5,4 +5,4 @@ export interface ProgressBarProps extends React.ProgressHTMLAttributes<HTMLProgr
     type?: "default" | "ok" | "caution" | "danger";
     title?: string;
 }
-export default function ProgressBar({ value, type, max, title, className, ...props }: ProgressBarProps): JSX.Element;
+export default function ProgressBar({ value, type, max, title, className, ...props }: ProgressBarProps): React.JSX.Element;

package/lib/cjs/RadioCard/RadioCard.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import React, { type ReactNode } from "react";
 export declare type DefaultOption = {
     id: string;
     label: string;
@@ -34,5 +34,5 @@ export interface RadioCardProps<T> {
  *
  * Usage: `import { RadioCard } from "@k8slens/lds"`
  */
-export default function RadioCard<T extends DefaultOption>({ id, "aria-label": ariaLabel, value, options, onChange, name, invalid, disabled, itemClassName, className, renderItem, ...radioGroupProps }: RadioCardProps<T>): JSX.Element;
+export default function RadioCard<T extends DefaultOption>({ id, "aria-label": ariaLabel, value, options, onChange, name, invalid, disabled, itemClassName, className, renderItem, ...radioGroupProps }: RadioCardProps<T>): React.JSX.Element;
 export {};

package/lib/cjs/RadioCard/RadioCard.js

@@ -1 +1 @@
-"use strict";var e=require("../_virtual/_tslib.js"),a=require("react"),l=require("clsx"),t=require("@headlessui/react"),n=require("./RadioCard.module.css.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=r(a),d=r(l);module.exports=function(a){var l=a.id,r=a["aria-label"],s=a.value,u=a.options,c=a.onChange,m=a.name,o=a.invalid,f=a.disabled,b=a.itemClassName,v=a.className,p=a.renderItem,N=void 0===p?function(e){return i.default.createElement("span",{className:n.content},i.default.createElement("span",{className:n.label},e.label),i.default.createElement("span",{className:n.subtitle},e.subtitle))}:p,E=e.__rest(a,["id","aria-label","value","options","onChange","name","invalid","disabled","itemClassName","className","renderItem"]);return i.default.createElement(t.RadioGroup,e.__assign({},E,{id:l,by:"id",value:s,onChange:c,"aria-label":r,className:d.default(n.radioCard,v),name:m}),u.map((function(e){return i.default.createElement(t.RadioGroup.Option,{key:e.id,value:e,disabled:f||e.disabled,className:function(e){var a,l=e.checked;return d.default(n.item,b,((a={})[n.selected]=l,a[n.invalid]=o,a))}},(function(a){var l=a.checked;return i.default.createElement(i.default.Fragment,null,i.default.createElement("span",{className:n.dot},i.default.createElement("span",null)),N(e,{invalid:o,selected:l,disabled:f||e.disabled}))}))})))};
+"use strict";var e=require("../_virtual/_tslib.js"),a=require("react"),l=require("clsx"),t=require("@headlessui/react"),n=require("./RadioCard.module.css.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=r(a),i=r(l);module.exports=function(a){var l=a.id,r=a["aria-label"],s=a.value,u=a.options,c=a.onChange,m=a.name,o=a.invalid,f=a.disabled,b=a.itemClassName,v=a.className,p=a.renderItem,N=void 0===p?function(e){return d.default.createElement("span",{className:n.content},d.default.createElement("span",{className:n.label},e.label),d.default.createElement("span",{className:n.subtitle},e.subtitle))}:p,E=e.__rest(a,["id","aria-label","value","options","onChange","name","invalid","disabled","itemClassName","className","renderItem"]);return d.default.createElement(t.RadioGroup,e.__assign({},E,{id:l,by:"id",value:s,onChange:c,"aria-label":r,className:i.default(n.radioCard,v),name:m}),u.map((function(e){return d.default.createElement(t.Radio,{key:e.id,value:e,disabled:f||e.disabled,className:function(e){var a,l=e.checked;return i.default(n.item,b,((a={})[n.selected]=l,a[n.invalid]=o,a))}},(function(a){var l=a.checked;return d.default.createElement(d.default.Fragment,null,d.default.createElement("span",{className:n.dot},d.default.createElement("span",null)),N(e,{invalid:o,selected:l,disabled:f||e.disabled}))}))})))};

package/lib/cjs/Select/Option.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from "react";
 import { type DefaultOption, type SelectProps } from "./Select";
 export declare type OptionProps<T> = Pick<SelectProps<T>, "size" | "itemClassName" | "placeholder"> & NonNullable<Pick<SelectProps<T>, "renderContent">> & {
     currentValues?: T[] | null;
     option: T;
 };
-export default function Option<T extends DefaultOption>({ option, currentValues, size, itemClassName, renderContent, placeholder, }: OptionProps<T>): JSX.Element;
+export default function Option<T extends DefaultOption>({ option, currentValues, size, itemClassName, renderContent, placeholder, }: OptionProps<T>): React.JSX.Element;

package/lib/cjs/Select/Option.js

@@ -1 +1 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),r=require("@headlessui/react"),i=require("clsx"),n=require("./Select.module.css.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=u(t),l=u(i);module.exports=function(t){var i=t.option,u=t.currentValues,c=t.size,a=t.itemClassName,o=t.renderContent,d=t.placeholder;return s.default.createElement(r.Listbox.Option,{value:i,className:function(t){var r,s;return l.default(n.item,((r={})[n.active]=t.active,r[n.selected]=t.selected||(u||[]).some((function(e){return e.id===i.id})),r[n.lg]="lg"===c,r),null!==(s="function"==typeof a?a(e.__assign(e.__assign({},t),{selected:t.selected||(u||[]).some((function(e){return e.id===i.id}))})):a)&&void 0!==s?s:"")}},o?o(i,{selected:(u||[]).some((function(e){return e.id===i.id}))},d):null)};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),r=require("@headlessui/react"),i=require("clsx"),n=require("./Select.module.css.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=u(t),l=u(i);module.exports=function(t){var i=t.option,u=t.currentValues,c=t.size,a=t.itemClassName,o=t.renderContent,d=t.placeholder;return s.default.createElement(r.ListboxOption,{value:i,className:function(t){var r,s;return l.default(n.item,((r={})[n.active]=t.active,r[n.selected]=t.selected||(u||[]).some((function(e){return e.id===i.id})),r[n.lg]="lg"===c,r),null!==(s="function"==typeof a?a(e.__assign(e.__assign({},t),{selected:t.selected||(u||[]).some((function(e){return e.id===i.id}))})):a)&&void 0!==s?s:"")}},o?o(i,{selected:(u||[]).some((function(e){return e.id===i.id}))},d):null)};

package/lib/cjs/Select/Select.d.ts

@@ -81,5 +81,5 @@ export declare type SelectProps<T> = (SingleSelectionProps<T> | MultiSelectionPr
  *
  * Usage: `import { Select } from "@k8slens/lds"`
  */
-export default function Select<T extends DefaultOption>({ id, "aria-label": ariaLabel, value, options, onChange, placeholder, name, invalid, disabled, className, dropdownClassName, itemClassName, renderContent, loading, title, openingDirection, maxHeight, multiple, size, ...selectProps }: SelectProps<T>): JSX.Element;
+export default function Select<T extends DefaultOption>({ id, "aria-label": ariaLabel, value, options, onChange, placeholder, name, invalid, disabled, className, dropdownClassName, itemClassName, renderContent, loading, title, openingDirection, maxHeight, multiple, size, ...selectProps }: SelectProps<T>): React.JSX.Element;
 export {};

package/lib/cjs/Select/Select.js

@@ -1 +1 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),n=require("clsx"),a=require("@headlessui/react"),l=require("@k8slens/lds-icons"),r=require("../LoadingIndicator/LoadingIndicator.js"),i=require("./SelectDropdown.js"),o=require("./Option.js"),u=require("./MultiOption.js"),s=require("./Select.module.css.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=d(t),f=d(n),m=l.navigation.ArrowDownIcon,p=l.navigation.ArrowUpIcon;module.exports=function(n){var l=n.id,d=n["aria-label"],v=n.value,g=n.options,b=n.onChange,N=n.placeholder,h=void 0===N?"":N,y=n.name,E=n.invalid,C=n.disabled,A=n.className,R=n.dropdownClassName,q=n.itemClassName,w=n.renderContent,x=void 0===w?function(e,t,n){return e?e.label:n}:w,I=n.loading,_=n.title,j=n.openingDirection,D=n.maxHeight,L=n.multiple,k=n.size,B=e.__rest(n,["id","aria-label","value","options","onChange","placeholder","name","invalid","disabled","className","dropdownClassName","itemClassName","renderContent","loading","title","openingDirection","maxHeight","multiple","size"]),O=t.useRef(null),z=t.useRef(null),M=t.useRef([]),H=1===g.length;t.useEffect((function(){var e,t;(null===(e=B.buttonRef)||void 0===e?void 0:e.current)&&(O.current=null===(t=B.buttonRef)||void 0===t?void 0:t.current)}),[B.buttonRef]);var S=t.useMemo((function(){var t=function(e){return!L||!Array.isArray(v)||!v.some((function(t){return t.id===e.id}))};return g.map((function(n){if("options"in n){var a=n.options.filter((function(e){return t(e)}));return a.length>0?e.__assign(e.__assign({},n),{options:a}):null}return t(n)?n:null})).filter((function(e){return null!==e}))}),[L,g,v]),V=t.useMemo((function(){return L?Array.isArray(v)?v:[]:v}),[L,v]);return c.default.createElement(a.Listbox,{value:V,onChange:b,name:y,disabled:C,multiple:L},(function(e){var t,n,N,y=e.open;return c.default.createElement("div",{className:f.default(s.select,A,(t={},t[s.invalid]=E,t[s.locked]=H,t[s.disabled]=C||I,t[s.open]=y,t))},c.default.createElement(a.Listbox.Button,{id:l,ref:B.buttonRef?B.buttonRef:O,"aria-label":d,className:f.default(s.selectButton),title:_},c.default.createElement("span",{className:f.default(s.item,s.selectedItem,(n={},n[s.multiple]=L,n[s.disabled]=C||I,n[s.invalid]=E,n[s.placeholder]=!v,n[s.lg]="lg"===k,n),null!==(N="function"==typeof q?q({disabled:Boolean(C),invalid:Boolean(E)}):q)&&void 0!==N?N:"")},I?c.default.createElement(r,{className:s.loadingIndicator}):L&&Array.isArray(v)?c.default.createElement("span",{className:s.multiOptionContainer},v.map((function(e,t){return c.default.createElement(u,{ref:function(e){return M.current[t]=e},label:e.label,className:"multiOptionClassName"in B?B.multiOptionClassName:void 0,onRemove:function(n){n.stopPropagation();var a=v.filter((function(t){return t.id!==e.id}));b(a),setTimeout((function(){var e,n,l=Math.min(t,a.length-1);a.length>0?null===(e=M.current[l])||void 0===e||e.focus():null===(n=O.current)||void 0===n||n.focus()}),0)},onArrowNavigate:function(e){var n,a="next"===e?t+1:t-1;null===(n=M.current[a])||void 0===n||n.focus()},key:e.id},x(e,{invalid:E,disabled:C},h))}))):x(v,{invalid:E,disabled:C},h)),y&&S.length>0?c.default.createElement(p,{className:s.dropDownIcon}):c.default.createElement(m,{className:s.dropDownIcon})),c.default.createElement(i,{listRef:z,buttonRef:O,openingDirection:j,maxHeight:D,grouped:g.some((function(e){return"options"in e}))},c.default.createElement(a.Listbox.Options,{ref:z,className:f.default(s.dropdown,R)},S.length>0?S.map((function(e){var t;if("options"in e){var n="".concat(e.id,"-label");return c.default.createElement("li",{key:e.id,className:s.group,role:"group","aria-labelledby":n},c.default.createElement("span",{id:n,className:f.default(s.groupLabel,(t={},t[s.lg]="lg"===k,t))},e.label),c.default.createElement("ul",{className:s.groupList},e.options.map((function(e){return c.default.createElement(o,{key:e.id,option:e,currentValues:Array.isArray(v)?v:[v].filter(Boolean),size:k,itemClassName:q,renderContent:x,placeholder:h})}))))}return c.default.createElement(o,{key:e.id,option:e,currentValues:Array.isArray(v)?v:[v].filter(Boolean),size:k,itemClassName:q,renderContent:x,placeholder:h})})):null)))}))};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),n=require("clsx"),a=require("@headlessui/react"),l=require("@k8slens/lds-icons"),r=require("../LoadingIndicator/LoadingIndicator.js"),i=require("./SelectDropdown.js"),o=require("./Option.js"),u=require("./MultiOption.js"),s=require("./Select.module.css.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=d(t),f=d(n),m=l.navigation.ArrowDownIcon,p=l.navigation.ArrowUpIcon;module.exports=function(n){var l=n.id,d=n["aria-label"],v=n.value,g=n.options,b=n.onChange,N=n.placeholder,h=void 0===N?"":N,E=n.name,y=n.invalid,C=n.disabled,A=n.className,R=n.dropdownClassName,q=n.itemClassName,w=n.renderContent,x=void 0===w?function(e,t,n){return e?e.label:n}:w,I=n.loading,L=n.title,_=n.openingDirection,j=n.maxHeight,D=n.multiple,k=n.size,B=e.__rest(n,["id","aria-label","value","options","onChange","placeholder","name","invalid","disabled","className","dropdownClassName","itemClassName","renderContent","loading","title","openingDirection","maxHeight","multiple","size"]),O=t.useRef(null),z=t.useRef(null),M=t.useRef([]),H=1===g.length;t.useEffect((function(){var e,t;(null===(e=B.buttonRef)||void 0===e?void 0:e.current)&&(O.current=null===(t=B.buttonRef)||void 0===t?void 0:t.current)}),[B.buttonRef]);var S=t.useMemo((function(){var t=function(e){return!D||!Array.isArray(v)||!v.some((function(t){return t.id===e.id}))};return g.map((function(n){if("options"in n){var a=n.options.filter((function(e){return t(e)}));return a.length>0?e.__assign(e.__assign({},n),{options:a}):null}return t(n)?n:null})).filter((function(e){return null!==e}))}),[D,g,v]),V=t.useMemo((function(){return D?Array.isArray(v)?v:[]:null===v?void 0:v}),[D,v]),P=function(e){var t,n,N,E=e.open;return c.default.createElement("div",{className:f.default(s.select,A,(t={},t[s.invalid]=y,t[s.locked]=H,t[s.disabled]=C||I,t[s.open]=E,t))},c.default.createElement(a.ListboxButton,{id:l,ref:B.buttonRef?B.buttonRef:O,"aria-label":d,className:f.default(s.selectButton),title:L},c.default.createElement("span",{className:f.default(s.item,s.selectedItem,(n={},n[s.multiple]=D,n[s.disabled]=C||I,n[s.invalid]=y,n[s.placeholder]=!v,n[s.lg]="lg"===k,n),null!==(N="function"==typeof q?q({disabled:Boolean(C),invalid:Boolean(y)}):q)&&void 0!==N?N:"")},I?c.default.createElement(r,{className:s.loadingIndicator}):D&&Array.isArray(v)?c.default.createElement("span",{className:s.multiOptionContainer},v.map((function(e,t){return c.default.createElement(u,{ref:function(e){return M.current[t]=e},label:e.label,className:"multiOptionClassName"in B?B.multiOptionClassName:void 0,onRemove:function(n){n.stopPropagation();var a=v.filter((function(t){return t.id!==e.id}));b(a),setTimeout((function(){var e,n,l=Math.min(t,a.length-1);a.length>0?null===(e=M.current[l])||void 0===e||e.focus():null===(n=O.current)||void 0===n||n.focus()}),0)},onArrowNavigate:function(e){var n,a="next"===e?t+1:t-1;null===(n=M.current[a])||void 0===n||n.focus()},key:e.id},x(e,{invalid:y,disabled:C},h))}))):x(v,{invalid:y,disabled:C},h)),E&&S.length>0?c.default.createElement(p,{className:s.dropDownIcon}):c.default.createElement(m,{className:s.dropDownIcon})),c.default.createElement(i,{listRef:z,buttonRef:O,openingDirection:_,maxHeight:j,grouped:g.some((function(e){return"options"in e}))},c.default.createElement(a.ListboxOptions,{ref:z,className:f.default(s.dropdown,R)},S.length>0?S.map((function(e){var t;if("options"in e){var n="".concat(e.id,"-label");return c.default.createElement("li",{key:e.id,className:s.group,role:"group","aria-labelledby":n},c.default.createElement("span",{id:n,className:f.default(s.groupLabel,(t={},t[s.lg]="lg"===k,t))},e.label),c.default.createElement("ul",{className:s.groupList},e.options.map((function(e){return c.default.createElement(o,{key:e.id,option:e,currentValues:Array.isArray(v)?v:[v].filter(Boolean),size:k,itemClassName:q,renderContent:x,placeholder:h})}))))}return c.default.createElement(o,{key:e.id,option:e,currentValues:Array.isArray(v)?v:[v].filter(Boolean),size:k,itemClassName:q,renderContent:x,placeholder:h})})):null)))};return D?c.default.createElement(a.Listbox,{value:V,onChange:b,name:E,disabled:C,multiple:!0},P):c.default.createElement(a.Listbox,{value:V,onChange:b,name:E,disabled:C,multiple:!1},P)};

package/lib/cjs/Select/SelectDropdown.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren, RefObject } from "react";
+import React, { PropsWithChildren, RefObject } from "react";
 export interface SelectDropdownProps {
     /**
      * Ref to the button that opens the dropdown
@@ -26,4 +26,4 @@ export interface SelectDropdownProps {
 /**
  * SelectDropdown is a component that displays a dropdown menu of links. Uses Popper.js for positioning.
  */
-export default function SelectDropdown({ buttonRef, listRef, openingDirection, maxHeight, children, grouped, }: PropsWithChildren<SelectDropdownProps>): JSX.Element;
+export default function SelectDropdown({ buttonRef, listRef, openingDirection, maxHeight, children, grouped, }: PropsWithChildren<SelectDropdownProps>): React.JSX.Element;

package/lib/cjs/Select/SelectDropdown.js

@@ -1 +1 @@
-"use strict";var t=require("react"),e=require("@headlessui/react"),n=require("../node_modules/@k8slens/lds-tokens/lib/web/tokens.base.js"),r=require("../helpers.js");function o(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var a=o(t),i=r.convertRemToPixels(n.SpacingMd)||0;module.exports=function(n){var o=n.buttonRef,u=n.listRef,c=n.openingDirection,l=void 0===c?"auto":c,s=n.maxHeight,d=n.children,v=n.grouped,p=t.useCallback((function(){var t;if((null==u?void 0:u.current)&&o.current&&null===u.current.getAttribute("data-placement")){var e=r.getScrollableContainer(o.current),n=window.getComputedStyle(e),a=parseFloat(n.paddingTop),c=parseFloat(n.paddingBottom),d=o.current.getBoundingClientRect().height||0,v=o.current.getBoundingClientRect().width||0,p=(e.getBoundingClientRect().height||0)-a-c,m=e.getBoundingClientRect().top||0,g=(o.current.getBoundingClientRect().top||0)-m||m,f=g,b=p-g-d,h=(null===(t=u.current)||void 0===t?void 0:t.getBoundingClientRect().height)||0;if("auto"===l?"above"===(!(b>=h)&&f>1.5*b?"above":"below"):"above"===l){var y=f-i;u.current.setAttribute("data-placement","top"),u.current.style.top="auto",u.current.style.bottom="".concat(d,"px"),u.current.style.maxHeight="".concat(void 0!==s?Math.min(s,y):y,"px")}else{var x=b-i;u.current.setAttribute("data-placement","bottom"),u.current.style.bottom="auto",u.current.style.top="".concat(d,"px"),u.current.style.maxHeight="".concat(void 0!==s?Math.min(s,x):x,"px")}u.current.style.maxWidth="".concat(v,"px")}}),[o,u,l,s]);return t.useEffect((function(){var t,e=u.current;if(e){var n=new MutationObserver((function(){var t;null===(t=null==u?void 0:u.current)||void 0===t||t.removeAttribute("data-placement"),p()}));return n.observe(e,{childList:!0,subtree:null!=v&&v}),null===(t=null==u?void 0:u.current)||void 0===t||t.removeAttribute("data-placement"),p(),function(){n.disconnect()}}}),[v,u,null==u?void 0:u.current,p]),a.default.createElement(e.Transition,{as:t.Fragment,beforeEnter:function(){p()},afterLeave:function(){var t;null===(t=null==u?void 0:u.current)||void 0===t||t.removeAttribute("data-placement")},enter:"transition duration-75 ease-in-out",enterFrom:"transform scale-95 opacity-0",enterTo:"transform scale-100 opacity-100",leave:"transition duration-100 ease-in-out",leaveFrom:"transform scale-100 opacity-100",leaveTo:"transform scale-95 opacity-0"},d)};
+"use strict";var t=require("react"),e=require("@headlessui/react"),n=require("../node_modules/@k8slens/lds-tokens/lib/web/tokens.base.js"),r=require("../helpers.js");function o(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var a=o(t),i=r.convertRemToPixels(n.SpacingMd)||0;module.exports=function(n){var o=n.buttonRef,u=n.listRef,c=n.openingDirection,l=void 0===c?"auto":c,s=n.maxHeight,d=n.children,v=n.grouped,p=t.useCallback((function(){var t;if((null==u?void 0:u.current)&&o.current&&null===u.current.getAttribute("data-placement")){var e=r.getScrollableContainer(o.current),n=window.getComputedStyle(e),a=parseFloat(n.paddingTop),c=parseFloat(n.paddingBottom),d=o.current.getBoundingClientRect().height||0,v=o.current.getBoundingClientRect().width||0,p=(e.getBoundingClientRect().height||0)-a-c,m=e.getBoundingClientRect().top||0,g=(o.current.getBoundingClientRect().top||0)-m||m,f=g,b=p-g-d,h=(null===(t=u.current)||void 0===t?void 0:t.getBoundingClientRect().height)||0;if("auto"===l?"above"===(!(b>=h)&&f>1.5*b?"above":"below"):"above"===l){var y=f-i;u.current.setAttribute("data-placement","top"),u.current.style.top="auto",u.current.style.bottom="".concat(d,"px"),u.current.style.maxHeight="".concat(void 0!==s?Math.min(s,y):y,"px")}else{var x=b-i;u.current.setAttribute("data-placement","bottom"),u.current.style.bottom="auto",u.current.style.top="".concat(d,"px"),u.current.style.maxHeight="".concat(void 0!==s?Math.min(s,x):x,"px")}u.current.style.maxWidth="".concat(v,"px")}}),[o,u,l,s]);return t.useEffect((function(){var t,e=u.current;if(e){var n=new MutationObserver((function(){var t;null===(t=null==u?void 0:u.current)||void 0===t||t.removeAttribute("data-placement"),p()}));return n.observe(e,{childList:!0,subtree:null!=v&&v}),null===(t=null==u?void 0:u.current)||void 0===t||t.removeAttribute("data-placement"),p(),function(){n.disconnect()}}}),[v,u,null==u?void 0:u.current,p]),a.default.createElement(e.Transition,{beforeEnter:function(){p()},afterLeave:function(){var t;null===(t=null==u?void 0:u.current)||void 0===t||t.removeAttribute("data-placement")},enter:"transition duration-75 ease-in-out",enterFrom:"transform scale-95 opacity-0",enterTo:"transform scale-100 opacity-100",leave:"transition duration-100 ease-in-out",leaveFrom:"transform scale-100 opacity-100",leaveTo:"transform scale-95 opacity-0"},d)};

package/lib/cjs/SideNav/SideNavGroup.d.ts

@@ -31,7 +31,7 @@ export interface SideNavGroupPropsWithoutLabel<Component extends React.ElementTy
  * import { SideNavGroup } from @k8slens/lds
  * ```
  */
-declare function SideNavGroup<C extends keyof JSX.IntrinsicElements | React.ElementType = "nav">({ component, componentProps, id, className, children, ...props }: SideNavGroupPropsWithLabel<C> | SideNavGroupPropsWithoutLabel<C>): JSX.Element;
+declare function SideNavGroup<C extends keyof JSX.IntrinsicElements | React.ElementType = "nav">({ component, componentProps, id, className, children, ...props }: SideNavGroupPropsWithLabel<C> | SideNavGroupPropsWithoutLabel<C>): React.JSX.Element;
 declare namespace SideNavGroup {
     var displayName: string;
 }

package/lib/cjs/SideNav/SideNavItem.d.ts

@@ -27,7 +27,7 @@ export interface SideNavItemProps<Component extends React.ElementType | keyof JS
  * import { SideNavItem } from @k8slens/lds
  * ```
  */
-declare function SideNavItem<C extends keyof JSX.IntrinsicElements | React.ElementType = "a">({ component, componentProps, active, disabled, className, children, type, externalLink, ...props }: SideNavItemProps<C>): JSX.Element;
+declare function SideNavItem<C extends keyof JSX.IntrinsicElements | React.ElementType = "a">({ component, componentProps, active, disabled, className, children, type, externalLink, ...props }: SideNavItemProps<C>): React.JSX.Element;
 declare namespace SideNavItem {
     var displayName: string;
 }

package/lib/cjs/Switch/Switch.d.ts

@@ -1,5 +1,6 @@
 import type { ChangeEvent, HTMLProps } from "react";
+import React from "react";
 export interface SwitchProps extends Omit<HTMLProps<HTMLInputElement>, "onChange"> {
     onChange?: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
 }
-export declare function Switch({ className, children, disabled, onChange, ...props }: SwitchProps): JSX.Element;
+export declare function Switch({ className, children, disabled, onChange, ...props }: SwitchProps): React.JSX.Element;

package/lib/cjs/Tooltip/Tooltip.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, type ReactElement } from "react";
+import React, { type HTMLAttributes, type ReactElement } from "react";
 import { type Placement } from "@popperjs/core";
 export interface TooltipProps {
     /**
@@ -23,4 +23,4 @@ export interface SpanTooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>,
 export interface DivTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, "onFocus" | "onBlur" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "aria-describedby">, TooltipProps {
     wrapper: "div";
 }
-export default function Tooltip({ id, wrapper: Wrapper, mutationsListenerElement: initialMutationsListenerElement, popupClassName, placement, alwaysVisible, text, children, ...props }: SpanTooltipProps | DivTooltipProps): JSX.Element;
+export default function Tooltip({ id, wrapper: Wrapper, mutationsListenerElement: initialMutationsListenerElement, popupClassName, placement, alwaysVisible, text, children, ...props }: SpanTooltipProps | DivTooltipProps): React.JSX.Element;

package/lib/cjs/UserMenu/DefaultHeader.d.ts

@@ -4,4 +4,4 @@ export declare const DefaultHeader: ({ licenseText, noLicenseText, onClick, disa
     noLicenseText?: string | undefined;
     onClick?: ((e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void) | undefined;
     disabled?: boolean | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/cjs/UserMenu/UserMenu.d.ts

@@ -52,4 +52,4 @@ export declare type UserMenuProps = DefaultUserMenuProps | CustomUserMenuProps;
 /**
  * UserMenu is a component that displays a user's information and a dropdown menu of links.
  */
-export default function UserMenu({ user, header, footer, origin, className, onLogoutClick, loading, ...props }: UserMenuProps): JSX.Element;
+export default function UserMenu({ user, header, footer, origin, className, onLogoutClick, loading, ...props }: UserMenuProps): React.JSX.Element;

package/lib/cjs/UserMenu/UserMenu.js

@@ -1 +1 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),r=require("clsx"),n=require("@headlessui/react"),a=require("@k8slens/lds-icons"),o=require("../ProfileBlock/ProfileBlock.js"),u=require("./default-items.js"),l=require("./UserMenuDropdown.js"),i=require("./UserMenu.module.css.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=s(t),d=s(r),f=a.navigation.ArrowDownIcon,m=a.navigation.ArrowUpIcon;module.exports=function(r){var a=r.user,s=r.header,g=r.footer,p=r.origin,v=void 0===p?u.defaultOrigin:p,b=r.className,q=r.onLogoutClick,k=r.loading,_=e.__rest(r,["user","header","footer","origin","className","onLogoutClick","loading"]),E=t.useRef(null),M=_.buttonRef?_.buttonRef:E,N=t.useMemo((function(){return("items"in _?_.items:u.defaultItems).map((function(t){return{children:t.children.map((function(t){return"logout"===t.key?e.__assign(e.__assign({},t),{onClick:q}):t}))}}))}),[_,q]),h=t.useMemo((function(){return{avatar:a.avatar,avatarTitle:a.name,title:"@".concat(a.username),subtitle:a.name}}),[a]);return c.default.createElement(n.Menu,null,(function(e){var t,r=e.open;return c.default.createElement("div",{className:d.default(i.userMenu,b)},c.default.createElement(n.Menu.Button,{className:d.default(i.button,(t={},t[i.open]=r,t[i.disabled]=k,t)),ref:M,disabled:k},c.default.createElement(o,{item:h,loading:k,className:i.profileBlock}),r?c.default.createElement(m,{className:i.dropDownIcon}):c.default.createElement(f,{className:i.dropDownIcon})),c.default.createElement(l,{open:r,header:s,footer:g,origin:v,groups:N,buttonRef:M}))}))};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),r=require("clsx"),n=require("@headlessui/react"),a=require("@k8slens/lds-icons"),o=require("../ProfileBlock/ProfileBlock.js"),u=require("./default-items.js"),l=require("./UserMenuDropdown.js"),i=require("./UserMenu.module.css.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=s(t),d=s(r),f=a.navigation.ArrowDownIcon,m=a.navigation.ArrowUpIcon;module.exports=function(r){var a=r.user,s=r.header,g=r.footer,p=r.origin,v=void 0===p?u.defaultOrigin:p,b=r.className,q=r.onLogoutClick,k=r.loading,_=e.__rest(r,["user","header","footer","origin","className","onLogoutClick","loading"]),E=t.useRef(null),M=_.buttonRef?_.buttonRef:E,N=t.useMemo((function(){return("items"in _?_.items:u.defaultItems).map((function(t){return{children:t.children.map((function(t){return"logout"===t.key?e.__assign(e.__assign({},t),{onClick:q}):t}))}}))}),[_,q]),h=t.useMemo((function(){return{avatar:a.avatar,avatarTitle:a.name,title:"@".concat(a.username),subtitle:a.name}}),[a]);return c.default.createElement(n.Menu,null,(function(e){var t,r=e.open;return c.default.createElement("div",{className:d.default(i.userMenu,b)},c.default.createElement(n.MenuButton,{className:d.default(i.button,(t={},t[i.open]=r,t[i.disabled]=k,t)),ref:M,disabled:k},c.default.createElement(o,{item:h,loading:k,className:i.profileBlock}),r?c.default.createElement(m,{className:i.dropDownIcon}):c.default.createElement(f,{className:i.dropDownIcon})),c.default.createElement(l,{open:r,header:s,footer:g,origin:v,groups:N,buttonRef:M}))}))};

package/lib/cjs/UserMenu/UserMenuDropdown.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, RefObject } from "react";
+import React, { ReactNode, RefObject } from "react";
 import { MenuItemGroup } from "./default-items";
 export interface UserMenuDropdownProps {
     /**
@@ -33,4 +33,4 @@ export interface UserMenuDropdownProps {
 /**
  * UserMenuDropdown is a component that displays a dropdown menu of links. Uses Popper.js for positioning.
  */
-export default function UserMenuDropdown({ header, footer, origin, className, groups, open, buttonRef, }: UserMenuDropdownProps): JSX.Element;
+export default function UserMenuDropdown({ header, footer, origin, className, groups, open, buttonRef, }: UserMenuDropdownProps): React.JSX.Element;

package/lib/cjs/UserMenu/UserMenuDropdown.js

@@ -1 +1 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),n=require("@headlessui/react"),o=require("react-popper"),r=require("clsx"),i=require("../node_modules/@k8slens/lds-tokens/lib/web/tokens.base.js"),a=require("../helpers.js"),s=require("./UserMenuItem.js"),l=require("./UserMenuDropdown.module.css.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=u(t),p=u(r),d=a.convertRemToPixels(i.SpacingLg),m={name:"offset",options:{offset:function(e){var t=e.placement;return t.startsWith("top")||t.startsWith("bottom")?[0,-1]:[0,0]}}},f={name:"maxSize",enabled:!0,phase:"main",fn:function(t){var n=t.state;if(void 0!==d&&"undefined"!=typeof window&&"undefined"!=typeof document){var o=n.elements.reference.getBoundingClientRect(),r=document.documentElement,i=n.placement.endsWith("start")?Math.min(r.clientWidth,window.innerWidth)-o.left-d:o.right-d,a=n.placement.startsWith("bottom")?Math.min(r.clientHeight,window.innerHeight)-o.bottom-d:o.top-d;n.styles.popper=e.__assign(e.__assign({},n.styles.popper),{maxWidth:"".concat(i,"px"),maxHeight:"".concat(a,"px")})}}};module.exports=function(r){var a,u,d=r.header,v=r.footer,h=r.origin,g=r.className,y=r.groups,b=r.open,_=r.buttonRef,w=t.useRef(null),k=o.usePopper(null==_?void 0:_.current,null==w?void 0:w.current,{placement:"bottom-start",modifiers:[{name:"flip",options:{fallbackPlacements:["top-start","bottom-end","top-end"]}},{name:"preventOverflow",options:{boundary:"viewport"}},{name:"computeStyles",options:{adaptive:!0}},m,f]}),x=k.styles,q=k.attributes;return c.default.createElement(n.Transition,e.__assign({show:b,enter:"transition duration-[".concat(i.TransitionDurationDefault,"] ease-in-out"),enterFrom:"transform opacity-0",enterTo:"transform opacity-100",leave:"transition duration-[".concat(i.TransitionDurationDefault,"] ease-in-out"),leaveFrom:"transform opacity-100",leaveTo:"transform opacity-0",className:p.default(l.userMenuDropdown,g),ref:w,style:e.__assign(e.__assign({},x.popper),{minWidth:null===(u=null==_?void 0:_.current)||void 0===u?void 0:u.offsetWidth})},q.popper),c.default.createElement(n.Menu.Items,{className:p.default(l.content,(a={},a[l.open]=b,a))},d,y.map((function(e,t){var n,o=e.children;return c.default.createElement("div",{className:p.default(l.group,(n={},n[l.last]=t===y.length-1,n)),key:"group-".concat(t),role:"navigation"},o.map((function(e,t){return c.default.createElement(s,{key:"key"in e?e.key:"item-".concat(t),title:e.title,icon:e.icon,type:e.type,disabled:e.disabled,external:e.external,href:e.href,onClick:"onClick"in e?e.onClick:void 0,origin:h})})))})),v))};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),n=require("@headlessui/react"),o=require("react-popper"),r=require("clsx"),i=require("../node_modules/@k8slens/lds-tokens/lib/web/tokens.base.js"),a=require("../helpers.js"),s=require("./UserMenuItem.js"),l=require("./UserMenuDropdown.module.css.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=u(t),p=u(r),d=a.convertRemToPixels(i.SpacingLg),m={name:"offset",options:{offset:function(e){var t=e.placement;return t.startsWith("top")||t.startsWith("bottom")?[0,-1]:[0,0]}}},f={name:"maxSize",enabled:!0,phase:"main",fn:function(t){var n=t.state;if(void 0!==d&&"undefined"!=typeof window&&"undefined"!=typeof document){var o=n.elements.reference.getBoundingClientRect(),r=document.documentElement,i=n.placement.endsWith("start")?Math.min(r.clientWidth,window.innerWidth)-o.left-d:o.right-d,a=n.placement.startsWith("bottom")?Math.min(r.clientHeight,window.innerHeight)-o.bottom-d:o.top-d;n.styles.popper=e.__assign(e.__assign({},n.styles.popper),{maxWidth:"".concat(i,"px"),maxHeight:"".concat(a,"px")})}}};module.exports=function(r){var a,u,d=r.header,v=r.footer,h=r.origin,g=r.className,y=r.groups,b=r.open,_=r.buttonRef,w=t.useRef(null),k=o.usePopper(null==_?void 0:_.current,null==w?void 0:w.current,{placement:"bottom-start",modifiers:[{name:"flip",options:{fallbackPlacements:["top-start","bottom-end","top-end"]}},{name:"preventOverflow",options:{boundary:"viewport"}},{name:"computeStyles",options:{adaptive:!0}},m,f]}),x=k.styles,q=k.attributes;return c.default.createElement(n.Transition,e.__assign({show:b,enter:"transition duration-[".concat(i.TransitionDurationDefault,"] ease-in-out"),enterFrom:"transform opacity-0",enterTo:"transform opacity-100",leave:"transition duration-[".concat(i.TransitionDurationDefault,"] ease-in-out"),leaveFrom:"transform opacity-100",leaveTo:"transform opacity-0",as:"div",className:p.default(l.userMenuDropdown,g),ref:w,style:e.__assign(e.__assign({},x.popper),{minWidth:null===(u=null==_?void 0:_.current)||void 0===u?void 0:u.offsetWidth})},q.popper),c.default.createElement(n.MenuItems,{className:p.default(l.content,(a={},a[l.open]=b,a))},d,y.map((function(e,t){var n,o=e.children;return c.default.createElement("div",{className:p.default(l.group,(n={},n[l.last]=t===y.length-1,n)),key:"group-".concat(t),role:"navigation"},o.map((function(e,t){return c.default.createElement(s,{key:"key"in e?e.key:"item-".concat(t),title:e.title,icon:e.icon,type:e.type,disabled:e.disabled,external:e.external,href:e.href,onClick:"onClick"in e?e.onClick:void 0,origin:h})})))})),v))};

package/lib/cjs/UserMenu/UserMenuItem.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { MouseEvent } from "react";
 import { type Icon } from "@k8slens/lds-icons/lib/es/Icon/Icon";
 export declare type MenuItem = {
@@ -18,4 +19,4 @@ export interface UserMenuItemProps extends MenuItem {
      */
     className?: string;
 }
-export default function UserMenuItem({ type, title, icon: Icon, disabled, external, onClick, selected, href: path, origin, className: cls, }: UserMenuItemProps): JSX.Element;
+export default function UserMenuItem({ type, title, icon: Icon, disabled, external, onClick, selected, href: path, origin, className: cls, }: UserMenuItemProps): React.JSX.Element;

package/lib/cjs/UserMenu/UserMenuItem.js

@@ -1 +1 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),n=require("@headlessui/react"),l=require("clsx"),a=require("./UserMenuItem.module.css.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=r(t),c=r(l),i=function(e,t){return new URL(e,t).pathname},o=function(e){var t=e.Icon,n=e.title;return u.default.createElement(u.default.Fragment,null,t?u.default.createElement(t,{className:a.icon,size:"sm"}):null,u.default.createElement("span",{className:a.title},n))};module.exports=function(l){var r=l.type,d=void 0===r?"default":r,s=l.title,f=l.icon,m=l.disabled,E=l.external,b=l.onClick,p=l.selected,v=l.href,w=l.origin,I=l.className,M=t.useMemo((function(){return E||!v?v:w?"".concat(w).concat((null==v?void 0:v.startsWith("/"))?v:"/".concat(v)):v}),[v,w,E]),h=t.useMemo((function(){return"boolean"==typeof p?p:!(!M||"undefined"==typeof window)&&i(window.location.href,"undefined"!=typeof window?window.location.origin:void 0)===i(M,M)}),[M,p]),N=t.useMemo((function(){var e;return c.default(a.userMenuItem,((e={})[a[d]]=d&&"default"!==d,e[a.disabled]=m,e[a.external]=E,e[a.selected]=h,e),I)}),[d,m,E,I,h]);return m||p||!M?m||p||!b?u.default.createElement(n.Menu.Item,{disabled:!0},u.default.createElement("span",{className:c.default(N,a.disabled)},u.default.createElement(o,{Icon:f,title:s}))):u.default.createElement(n.Menu.Item,null,u.default.createElement("button",{className:c.default(a.button,N),onClick:b},u.default.createElement(o,{Icon:f,title:s}))):u.default.createElement(n.Menu.Item,null,u.default.createElement("a",e.__assign({className:N,onClick:b,href:M},E?{target:"_blank"}:{},{rel:"noopener noreferrer"}),u.default.createElement(o,{Icon:f,title:s})))};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),n=require("@headlessui/react"),l=require("clsx"),a=require("./UserMenuItem.module.css.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=r(t),c=r(l),i=function(e,t){return new URL(e,t).pathname},o=function(e){var t=e.Icon,n=e.title;return u.default.createElement(u.default.Fragment,null,t?u.default.createElement(t,{className:a.icon,size:"sm"}):null,u.default.createElement("span",{className:a.title},n))};module.exports=function(l){var r=l.type,d=void 0===r?"default":r,s=l.title,f=l.icon,m=l.disabled,E=l.external,b=l.onClick,p=l.selected,v=l.href,w=l.origin,I=l.className,M=t.useMemo((function(){return E||!v?v:w?"".concat(w).concat((null==v?void 0:v.startsWith("/"))?v:"/".concat(v)):v}),[v,w,E]),h=t.useMemo((function(){return"boolean"==typeof p?p:!(!M||"undefined"==typeof window)&&i(window.location.href,"undefined"!=typeof window?window.location.origin:void 0)===i(M,M)}),[M,p]),N=t.useMemo((function(){var e;return c.default(a.userMenuItem,((e={})[a[d]]=d&&"default"!==d,e[a.disabled]=m,e[a.external]=E,e[a.selected]=h,e),I)}),[d,m,E,I,h]);return m||p||!M?m||p||!b?u.default.createElement(n.MenuItem,{disabled:!0},u.default.createElement("span",{className:c.default(N,a.disabled)},u.default.createElement(o,{Icon:f,title:s}))):u.default.createElement(n.MenuItem,null,u.default.createElement("button",{className:c.default(a.button,N),onClick:b},u.default.createElement(o,{Icon:f,title:s}))):u.default.createElement(n.MenuItem,null,u.default.createElement("a",e.__assign({className:N,onClick:b,href:M},E?{target:"_blank"}:{},{rel:"noopener noreferrer"}),u.default.createElement(o,{Icon:f,title:s})))};

package/lib/es/Avatar/Avatar.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from "react";
+import React, { type HTMLAttributes } from "react";
 import { type Icon } from "@k8slens/lds-icons/lib/es/Icon/Icon";
 export interface AvatarProps extends Pick<HTMLAttributes<HTMLDivElement>, "aria-hidden" | "aria-label"> {
     /**
@@ -22,4 +22,4 @@ export interface AvatarProps extends Pick<HTMLAttributes<HTMLDivElement>, "aria-
  * Avatar component to display user's profile picture or initials.
  * If no image is provided, initials will be displayed with a random background color.
  */
-export default function Avatar({ name, className, image: AvatarImage, size, ...props }: AvatarProps): JSX.Element;
+export default function Avatar({ name, className, image: AvatarImage, size, ...props }: AvatarProps): React.JSX.Element;

package/lib/es/Badge/Badge.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from "react";
+import React, { HTMLAttributes } from "react";
 export interface BadgeProps extends Pick<HTMLAttributes<HTMLSpanElement>, "id" | "className" | "title" | "aria-label" | "aria-hidden" | "role"> {
     /**
      * If no title has not been provided, the badge will be hidden from screen readers.
@@ -14,4 +14,4 @@ export interface BadgeProps extends Pick<HTMLAttributes<HTMLSpanElement>, "id" |
      */
     size?: "sm" | "md" | "lg";
 }
-export default function Badge({ className, type, size, title, ...props }: BadgeProps): JSX.Element;
+export default function Badge({ className, type, size, title, ...props }: BadgeProps): React.JSX.Element;

package/lib/es/ButtonBar/ButtonBar.d.ts

@@ -13,5 +13,5 @@ export declare type ButtonBarProps<ElementType extends JSX.IntrinsicElements | R
  *
  * Usage: `import { ButtonBar } from "@k8slens/lds"`
  */
-declare function ButtonBar<ElementType extends JSX.IntrinsicElements | React.ElementType<any>>({ as: Component, type, gridSize, children, ...props }: PropsWithChildren<ButtonBarProps<ElementType>>): JSX.Element;
+declare function ButtonBar<ElementType extends JSX.IntrinsicElements | React.ElementType<any>>({ as: Component, type, gridSize, children, ...props }: PropsWithChildren<ButtonBarProps<ElementType>>): React.JSX.Element;
 export default ButtonBar;

package/lib/es/Checkbox/Checkbox.d.ts

@@ -4,4 +4,4 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     onChange(value: boolean, evt: React.ChangeEvent<HTMLInputElement>): void;
     disabled?: boolean;
 }
-export default function Checkbox({ disabled, value, onChange, className, ...inputProps }: CheckboxProps): JSX.Element;
+export default function Checkbox({ disabled, value, onChange, className, ...inputProps }: CheckboxProps): React.JSX.Element;

package/lib/es/ConfirmDialog/ConfirmDialog.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import React, { type ReactNode } from "react";
 import { type ButtonProps } from "../Button/Button";
 declare type AllowedButtonProps = Pick<ButtonProps, "type" | "size" | "discreet" | "icon" | "iconPosition" | "textTransform">;
 export declare type ConfirmDialogProps = {
@@ -15,10 +15,10 @@ export declare type ConfirmDialogProps = {
 /**
  * ConfirmDialog is a modal dialog that asks the user to confirm an action.
  */
-declare const ConfirmDialog: ({ title, message, confirmText, cancelLabel, confirmButtonProps, cancelButtonProps, handleClose, handleConfirm, handleCancel, }: ConfirmDialogProps) => JSX.Element;
+declare const ConfirmDialog: ({ title, message, confirmText, cancelLabel, confirmButtonProps, cancelButtonProps, handleClose, handleConfirm, handleCancel, }: ConfirmDialogProps) => React.JSX.Element;
 declare type ConfirmDialogConfig = Omit<ConfirmDialogProps, "title" | "message" | "handleClose" | "handleConfirm" | "handleCancel">;
 export declare const useConfirmDialog: () => {
-    ConfirmDialog: JSX.Element | null;
+    ConfirmDialog: React.JSX.Element | null;
     confirm: (title: string, message?: string | ReactNode, props?: ConfirmDialogConfig) => Promise<unknown>;
 };
 export default ConfirmDialog;

package/lib/es/Modal/Modal.d.ts

@@ -25,5 +25,5 @@ export interface ModalProps<Component extends keyof JSX.IntrinsicElements | Reac
  *
  * Usage: `import { Modal } from "@k8slens/lds"`
  */
-declare function Modal<Component extends keyof JSX.IntrinsicElements | React.ElementType>({ children, isOpen, onClose, title, subTitle, size, contentComponent, contentProps: _contentProps, buttonBarProps, className, footer, }: PropsWithChildren<ModalProps<Component>>): JSX.Element | null;
+declare function Modal<Component extends keyof JSX.IntrinsicElements | React.ElementType>({ children, isOpen, onClose, title, subTitle, size, contentComponent, contentProps: _contentProps, buttonBarProps, className, footer, }: PropsWithChildren<ModalProps<Component>>): React.JSX.Element | null;
 export default Modal;

package/lib/es/Modal/Modal.js

@@ -1 +1 @@
-import{__assign as e}from"../_virtual/_tslib.js";import o,{useMemo as t}from"react";import r from"clsx";import{Dialog as a}from"@headlessui/react";import n from"../Panel/Panel.js";import l from"../ButtonBar/ButtonBar.js";import s from"./Modal.module.css.js";function m(m){var i=m.children,p=m.isOpen,c=m.onClose,d=m.title,u=m.subTitle,f=m.size,h=void 0===f?"md":f,v=m.contentComponent,C=m.contentProps,N=m.buttonBarProps,P=void 0===N?{}:N,B=m.className,E=void 0===B?"":B,b=m.footer,j=t((function(){return e(e({},C||{}),{className:r(s.modalContent,(null==C?void 0:C.className)||"")})}),[C]);return p?o.createElement(a,{open:p,onClose:c,className:r(s.modal,s[h])},o.createElement(n,{wrapperComponent:v||"div",wrapperProps:j,className:E,headerComponent:a.Title,headerProps:{as:"header"},header:o.createElement(o.Fragment,null,o.createElement("h3",{className:"lds-h2"},d),u?o.createElement("p",{className:s.subTitle},u):null),footer:b,footerComponent:l,footerProps:e(e({},P),{as:"footer"})},i)):null}export{m as default};
+import{__assign as e}from"../_virtual/_tslib.js";import o,{useMemo as t}from"react";import r from"clsx";import{Dialog as a,DialogTitle as n}from"@headlessui/react";import s from"../Panel/Panel.js";import l from"../ButtonBar/ButtonBar.js";import m from"./Modal.module.css.js";function p(p){var i=p.children,c=p.isOpen,d=p.onClose,u=p.title,f=p.subTitle,h=p.size,v=void 0===h?"md":h,C=p.contentComponent,N=p.contentProps,P=p.buttonBarProps,B=void 0===P?{}:P,E=p.className,b=void 0===E?"":E,j=p.footer,w=t((function(){return e(e({},N||{}),{className:r(m.modalContent,(null==N?void 0:N.className)||"")})}),[N]);return c?o.createElement(a,{open:c,onClose:d,className:r(m.modal,m[v])},o.createElement(s,{wrapperComponent:C||"div",wrapperProps:w,className:b,headerComponent:n,headerProps:{as:"header"},header:o.createElement(o.Fragment,null,o.createElement("h3",{className:"lds-h2"},u),f?o.createElement("p",{className:m.subTitle},f):null),footer:j,footerComponent:l,footerProps:e(e({},B),{as:"footer"})},i)):null}export{p as default};

package/lib/es/NumberBadge/NumberBadge.d.ts

@@ -1,4 +1,4 @@
-import { AriaRole } from "react";
+import React, { AriaRole } from "react";
 import { LozengeProps } from "../Lozenge/Lozenge";
 export declare const formatNumber: (n: number) => string;
 interface BaseNumberBadgeProps extends Omit<LozengeProps, "role" | "children" | "title" | "textTransform" | "size"> {
@@ -31,5 +31,5 @@ interface Props extends BaseNumberBadgeProps {
     role: Exclude<AriaRole, "status">;
 }
 export declare type NumberBadgeProps = StatusNumberBadgeProps | Props;
-export default function NumberBadge({ className, value, showZero, displayPlusSign, title, ...props }: NumberBadgeProps): JSX.Element | null;
+export default function NumberBadge({ className, value, showZero, displayPlusSign, title, ...props }: NumberBadgeProps): React.JSX.Element | null;
 export {};

package/lib/es/Panel/Panel.d.ts

@@ -25,5 +25,5 @@ export interface PanelProps<WrapperComponent extends keyof JSX.IntrinsicElements
  *
  * Usage: `import { Panel } from "@k8slens/lds"`
  */
-declare function Panel<WrapperComponent extends keyof JSX.IntrinsicElements | React.ElementType | typeof Fragment = typeof Fragment, HeaderComponent extends keyof JSX.IntrinsicElements | React.ElementType = "header", ContentComponent extends keyof JSX.IntrinsicElements | React.ElementType = "div", FooterComponent extends keyof JSX.IntrinsicElements | React.ElementType = "footer">({ header, footer, className, wrapperComponent, wrapperProps: _wrapperProps, headerComponent, headerProps: _headerProps, contentComponent, contentProps: _contentProps, footerComponent, footerProps: _footerProps, loading, children, }: React.PropsWithChildren<PanelProps<WrapperComponent, HeaderComponent, ContentComponent, FooterComponent>>): JSX.Element;
+declare function Panel<WrapperComponent extends keyof JSX.IntrinsicElements | React.ElementType | typeof Fragment = typeof Fragment, HeaderComponent extends keyof JSX.IntrinsicElements | React.ElementType = "header", ContentComponent extends keyof JSX.IntrinsicElements | React.ElementType = "div", FooterComponent extends keyof JSX.IntrinsicElements | React.ElementType = "footer">({ header, footer, className, wrapperComponent, wrapperProps: _wrapperProps, headerComponent, headerProps: _headerProps, contentComponent, contentProps: _contentProps, footerComponent, footerProps: _footerProps, loading, children, }: React.PropsWithChildren<PanelProps<WrapperComponent, HeaderComponent, ContentComponent, FooterComponent>>): React.JSX.Element;
 export default Panel;

package/lib/es/ProfileBlock/ProfileBlock.d.ts

@@ -1,4 +1,4 @@
-import { HTMLProps, ReactElement } from "react";
+import React, { HTMLProps, ReactElement } from "react";
 import { type AvatarProps } from "../Avatar/Avatar";
 declare type Item = {
     title: string;
@@ -12,5 +12,5 @@ export declare type ProfileBlockProps = HTMLProps<HTMLDivElement> & {
     formatTitle?: (item: Item) => string | ReactElement;
     formatSubtitle?: (item: Item) => string | ReactElement;
 };
-declare const ProfileBlock: ({ className, loading, item, formatTitle, formatSubtitle, ...props }: ProfileBlockProps) => JSX.Element;
+declare const ProfileBlock: ({ className, loading, item, formatTitle, formatSubtitle, ...props }: ProfileBlockProps) => React.JSX.Element;
 export default ProfileBlock;

package/lib/es/ProgressBar/ProgressBar.d.ts

@@ -5,4 +5,4 @@ export interface ProgressBarProps extends React.ProgressHTMLAttributes<HTMLProgr
     type?: "default" | "ok" | "caution" | "danger";
     title?: string;
 }
-export default function ProgressBar({ value, type, max, title, className, ...props }: ProgressBarProps): JSX.Element;
+export default function ProgressBar({ value, type, max, title, className, ...props }: ProgressBarProps): React.JSX.Element;

package/lib/es/RadioCard/RadioCard.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import React, { type ReactNode } from "react";
 export declare type DefaultOption = {
     id: string;
     label: string;
@@ -34,5 +34,5 @@ export interface RadioCardProps<T> {
  *
  * Usage: `import { RadioCard } from "@k8slens/lds"`
  */
-export default function RadioCard<T extends DefaultOption>({ id, "aria-label": ariaLabel, value, options, onChange, name, invalid, disabled, itemClassName, className, renderItem, ...radioGroupProps }: RadioCardProps<T>): JSX.Element;
+export default function RadioCard<T extends DefaultOption>({ id, "aria-label": ariaLabel, value, options, onChange, name, invalid, disabled, itemClassName, className, renderItem, ...radioGroupProps }: RadioCardProps<T>): React.JSX.Element;
 export {};

package/lib/es/RadioCard/RadioCard.js

@@ -1 +1 @@
-import{__rest as e,__assign as a}from"../_virtual/_tslib.js";import l from"react";import t from"clsx";import{RadioGroup as n}from"@headlessui/react";import i from"./RadioCard.module.css.js";function r(r){var s=r.id,m=r["aria-label"],d=r.value,c=r.options,o=r.onChange,u=r.name,b=r.invalid,p=r.disabled,v=r.itemClassName,f=r.className,N=r.renderItem,E=void 0===N?function(e){return l.createElement("span",{className:i.content},l.createElement("span",{className:i.label},e.label),l.createElement("span",{className:i.subtitle},e.subtitle))}:N,C=e(r,["id","aria-label","value","options","onChange","name","invalid","disabled","itemClassName","className","renderItem"]);return l.createElement(n,a({},C,{id:s,by:"id",value:d,onChange:o,"aria-label":m,className:t(i.radioCard,f),name:u}),c.map((function(e){return l.createElement(n.Option,{key:e.id,value:e,disabled:p||e.disabled,className:function(e){var a,l=e.checked;return t(i.item,v,((a={})[i.selected]=l,a[i.invalid]=b,a))}},(function(a){var t=a.checked;return l.createElement(l.Fragment,null,l.createElement("span",{className:i.dot},l.createElement("span",null)),E(e,{invalid:b,selected:t,disabled:p||e.disabled}))}))})))}export{r as default};
+import{__rest as e,__assign as a}from"../_virtual/_tslib.js";import l from"react";import t from"clsx";import{RadioGroup as n,Radio as r}from"@headlessui/react";import s from"./RadioCard.module.css.js";function i(i){var m=i.id,d=i["aria-label"],c=i.value,o=i.options,u=i.onChange,b=i.name,p=i.invalid,v=i.disabled,f=i.itemClassName,N=i.className,E=i.renderItem,C=void 0===E?function(e){return l.createElement("span",{className:s.content},l.createElement("span",{className:s.label},e.label),l.createElement("span",{className:s.subtitle},e.subtitle))}:E,h=e(i,["id","aria-label","value","options","onChange","name","invalid","disabled","itemClassName","className","renderItem"]);return l.createElement(n,a({},h,{id:m,by:"id",value:c,onChange:u,"aria-label":d,className:t(s.radioCard,N),name:b}),o.map((function(e){return l.createElement(r,{key:e.id,value:e,disabled:v||e.disabled,className:function(e){var a,l=e.checked;return t(s.item,f,((a={})[s.selected]=l,a[s.invalid]=p,a))}},(function(a){var t=a.checked;return l.createElement(l.Fragment,null,l.createElement("span",{className:s.dot},l.createElement("span",null)),C(e,{invalid:p,selected:t,disabled:v||e.disabled}))}))})))}export{i as default};

package/lib/es/Select/Option.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from "react";
 import { type DefaultOption, type SelectProps } from "./Select";
 export declare type OptionProps<T> = Pick<SelectProps<T>, "size" | "itemClassName" | "placeholder"> & NonNullable<Pick<SelectProps<T>, "renderContent">> & {
     currentValues?: T[] | null;
     option: T;
 };
-export default function Option<T extends DefaultOption>({ option, currentValues, size, itemClassName, renderContent, placeholder, }: OptionProps<T>): JSX.Element;
+export default function Option<T extends DefaultOption>({ option, currentValues, size, itemClassName, renderContent, placeholder, }: OptionProps<T>): React.JSX.Element;

package/lib/es/Select/Option.js

@@ -1 +1 @@
-import{__assign as e}from"../_virtual/_tslib.js";import t from"react";import{Listbox as r}from"@headlessui/react";import i from"clsx";import o from"./Select.module.css.js";function n(n){var l=n.option,s=n.currentValues,c=n.size,u=n.itemClassName,m=n.renderContent,a=n.placeholder;return t.createElement(r.Option,{value:l,className:function(t){var r,n;return i(o.item,((r={})[o.active]=t.active,r[o.selected]=t.selected||(s||[]).some((function(e){return e.id===l.id})),r[o.lg]="lg"===c,r),null!==(n="function"==typeof u?u(e(e({},t),{selected:t.selected||(s||[]).some((function(e){return e.id===l.id}))})):u)&&void 0!==n?n:"")}},m?m(l,{selected:(s||[]).some((function(e){return e.id===l.id}))},a):null)}export{n as default};
+import{__assign as e}from"../_virtual/_tslib.js";import t from"react";import{ListboxOption as r}from"@headlessui/react";import i from"clsx";import o from"./Select.module.css.js";function l(l){var n=l.option,s=l.currentValues,c=l.size,u=l.itemClassName,m=l.renderContent,a=l.placeholder;return t.createElement(r,{value:n,className:function(t){var r,l;return i(o.item,((r={})[o.active]=t.active,r[o.selected]=t.selected||(s||[]).some((function(e){return e.id===n.id})),r[o.lg]="lg"===c,r),null!==(l="function"==typeof u?u(e(e({},t),{selected:t.selected||(s||[]).some((function(e){return e.id===n.id}))})):u)&&void 0!==l?l:"")}},m?m(n,{selected:(s||[]).some((function(e){return e.id===n.id}))},a):null)}export{l as default};

package/lib/es/Select/Select.d.ts

@@ -81,5 +81,5 @@ export declare type SelectProps<T> = (SingleSelectionProps<T> | MultiSelectionPr
  *
  * Usage: `import { Select } from "@k8slens/lds"`
  */
-export default function Select<T extends DefaultOption>({ id, "aria-label": ariaLabel, value, options, onChange, placeholder, name, invalid, disabled, className, dropdownClassName, itemClassName, renderContent, loading, title, openingDirection, maxHeight, multiple, size, ...selectProps }: SelectProps<T>): JSX.Element;
+export default function Select<T extends DefaultOption>({ id, "aria-label": ariaLabel, value, options, onChange, placeholder, name, invalid, disabled, className, dropdownClassName, itemClassName, renderContent, loading, title, openingDirection, maxHeight, multiple, size, ...selectProps }: SelectProps<T>): React.JSX.Element;
 export {};

package/lib/es/Select/Select.js

@@ -1 +1 @@
-import{__rest as e,__assign as n}from"../_virtual/_tslib.js";import t,{useRef as r,useEffect as l,useMemo as o}from"react";import a from"clsx";import{Listbox as i}from"@headlessui/react";import{navigation as s}from"@k8slens/lds-icons";import u from"../LoadingIndicator/LoadingIndicator.js";import c from"./SelectDropdown.js";import m from"./Option.js";import d from"./MultiOption.js";import p from"./Select.module.css.js";var f=s.ArrowDownIcon,v=s.ArrowUpIcon;function g(s){var g=s.id,b=s["aria-label"],N=s.value,h=s.options,y=s.onChange,C=s.placeholder,E=void 0===C?"":C,A=s.name,w=s.invalid,I=s.disabled,R=s.className,D=s.dropdownClassName,j=s.itemClassName,k=s.renderContent,x=void 0===k?function(e,n,t){return e?e.label:t}:k,B=s.loading,O=s.title,z=s.openingDirection,L=s.maxHeight,H=s.multiple,M=s.size,S=e(s,["id","aria-label","value","options","onChange","placeholder","name","invalid","disabled","className","dropdownClassName","itemClassName","renderContent","loading","title","openingDirection","maxHeight","multiple","size"]),V=r(null),_=r(null),P=r([]),T=1===h.length;l((function(){var e,n;(null===(e=S.buttonRef)||void 0===e?void 0:e.current)&&(V.current=null===(n=S.buttonRef)||void 0===n?void 0:n.current)}),[S.buttonRef]);var U=o((function(){var e=function(e){return!H||!Array.isArray(N)||!N.some((function(n){return n.id===e.id}))};return h.map((function(t){if("options"in t){var r=t.options.filter((function(n){return e(n)}));return r.length>0?n(n({},t),{options:r}):null}return e(t)?t:null})).filter((function(e){return null!==e}))}),[H,h,N]),q=o((function(){return H?Array.isArray(N)?N:[]:N}),[H,N]);return t.createElement(i,{value:q,onChange:y,name:A,disabled:I,multiple:H},(function(e){var n,r,l,o=e.open;return t.createElement("div",{className:a(p.select,R,(n={},n[p.invalid]=w,n[p.locked]=T,n[p.disabled]=I||B,n[p.open]=o,n))},t.createElement(i.Button,{id:g,ref:S.buttonRef?S.buttonRef:V,"aria-label":b,className:a(p.selectButton),title:O},t.createElement("span",{className:a(p.item,p.selectedItem,(r={},r[p.multiple]=H,r[p.disabled]=I||B,r[p.invalid]=w,r[p.placeholder]=!N,r[p.lg]="lg"===M,r),null!==(l="function"==typeof j?j({disabled:Boolean(I),invalid:Boolean(w)}):j)&&void 0!==l?l:"")},B?t.createElement(u,{className:p.loadingIndicator}):H&&Array.isArray(N)?t.createElement("span",{className:p.multiOptionContainer},N.map((function(e,n){return t.createElement(d,{ref:function(e){return P.current[n]=e},label:e.label,className:"multiOptionClassName"in S?S.multiOptionClassName:void 0,onRemove:function(t){t.stopPropagation();var r=N.filter((function(n){return n.id!==e.id}));y(r),setTimeout((function(){var e,t,l=Math.min(n,r.length-1);r.length>0?null===(e=P.current[l])||void 0===e||e.focus():null===(t=V.current)||void 0===t||t.focus()}),0)},onArrowNavigate:function(e){var t,r="next"===e?n+1:n-1;null===(t=P.current[r])||void 0===t||t.focus()},key:e.id},x(e,{invalid:w,disabled:I},E))}))):x(N,{invalid:w,disabled:I},E)),o&&U.length>0?t.createElement(v,{className:p.dropDownIcon}):t.createElement(f,{className:p.dropDownIcon})),t.createElement(c,{listRef:_,buttonRef:V,openingDirection:z,maxHeight:L,grouped:h.some((function(e){return"options"in e}))},t.createElement(i.Options,{ref:_,className:a(p.dropdown,D)},U.length>0?U.map((function(e){var n;if("options"in e){var r="".concat(e.id,"-label");return t.createElement("li",{key:e.id,className:p.group,role:"group","aria-labelledby":r},t.createElement("span",{id:r,className:a(p.groupLabel,(n={},n[p.lg]="lg"===M,n))},e.label),t.createElement("ul",{className:p.groupList},e.options.map((function(e){return t.createElement(m,{key:e.id,option:e,currentValues:Array.isArray(N)?N:[N].filter(Boolean),size:M,itemClassName:j,renderContent:x,placeholder:E})}))))}return t.createElement(m,{key:e.id,option:e,currentValues:Array.isArray(N)?N:[N].filter(Boolean),size:M,itemClassName:j,renderContent:x,placeholder:E})})):null)))}))}export{g as default};
+import{__rest as e,__assign as n}from"../_virtual/_tslib.js";import t,{useRef as r,useEffect as l,useMemo as a}from"react";import i from"clsx";import{Listbox as o,ListboxButton as s,ListboxOptions as u}from"@headlessui/react";import{navigation as c}from"@k8slens/lds-icons";import m from"../LoadingIndicator/LoadingIndicator.js";import d from"./SelectDropdown.js";import p from"./Option.js";import f from"./MultiOption.js";import v from"./Select.module.css.js";var g=c.ArrowDownIcon,b=c.ArrowUpIcon;function N(c){var N=c.id,h=c["aria-label"],C=c.value,E=c.options,y=c.onChange,A=c.placeholder,w=void 0===A?"":A,I=c.name,R=c.invalid,D=c.disabled,j=c.className,k=c.dropdownClassName,x=c.itemClassName,B=c.renderContent,O=void 0===B?function(e,n,t){return e?e.label:t}:B,z=c.loading,L=c.title,H=c.openingDirection,M=c.maxHeight,S=c.multiple,V=c.size,_=e(c,["id","aria-label","value","options","onChange","placeholder","name","invalid","disabled","className","dropdownClassName","itemClassName","renderContent","loading","title","openingDirection","maxHeight","multiple","size"]),P=r(null),T=r(null),U=r([]),q=1===E.length;l((function(){var e,n;(null===(e=_.buttonRef)||void 0===e?void 0:e.current)&&(P.current=null===(n=_.buttonRef)||void 0===n?void 0:n.current)}),[_.buttonRef]);var F=a((function(){var e=function(e){return!S||!Array.isArray(C)||!C.some((function(n){return n.id===e.id}))};return E.map((function(t){if("options"in t){var r=t.options.filter((function(n){return e(n)}));return r.length>0?n(n({},t),{options:r}):null}return e(t)?t:null})).filter((function(e){return null!==e}))}),[S,E,C]),G=a((function(){return S?Array.isArray(C)?C:[]:null===C?void 0:C}),[S,C]),J=function(e){var n,r,l,a=e.open;return t.createElement("div",{className:i(v.select,j,(n={},n[v.invalid]=R,n[v.locked]=q,n[v.disabled]=D||z,n[v.open]=a,n))},t.createElement(s,{id:N,ref:_.buttonRef?_.buttonRef:P,"aria-label":h,className:i(v.selectButton),title:L},t.createElement("span",{className:i(v.item,v.selectedItem,(r={},r[v.multiple]=S,r[v.disabled]=D||z,r[v.invalid]=R,r[v.placeholder]=!C,r[v.lg]="lg"===V,r),null!==(l="function"==typeof x?x({disabled:Boolean(D),invalid:Boolean(R)}):x)&&void 0!==l?l:"")},z?t.createElement(m,{className:v.loadingIndicator}):S&&Array.isArray(C)?t.createElement("span",{className:v.multiOptionContainer},C.map((function(e,n){return t.createElement(f,{ref:function(e){return U.current[n]=e},label:e.label,className:"multiOptionClassName"in _?_.multiOptionClassName:void 0,onRemove:function(t){t.stopPropagation();var r=C.filter((function(n){return n.id!==e.id}));y(r),setTimeout((function(){var e,t,l=Math.min(n,r.length-1);r.length>0?null===(e=U.current[l])||void 0===e||e.focus():null===(t=P.current)||void 0===t||t.focus()}),0)},onArrowNavigate:function(e){var t,r="next"===e?n+1:n-1;null===(t=U.current[r])||void 0===t||t.focus()},key:e.id},O(e,{invalid:R,disabled:D},w))}))):O(C,{invalid:R,disabled:D},w)),a&&F.length>0?t.createElement(b,{className:v.dropDownIcon}):t.createElement(g,{className:v.dropDownIcon})),t.createElement(d,{listRef:T,buttonRef:P,openingDirection:H,maxHeight:M,grouped:E.some((function(e){return"options"in e}))},t.createElement(u,{ref:T,className:i(v.dropdown,k)},F.length>0?F.map((function(e){var n;if("options"in e){var r="".concat(e.id,"-label");return t.createElement("li",{key:e.id,className:v.group,role:"group","aria-labelledby":r},t.createElement("span",{id:r,className:i(v.groupLabel,(n={},n[v.lg]="lg"===V,n))},e.label),t.createElement("ul",{className:v.groupList},e.options.map((function(e){return t.createElement(p,{key:e.id,option:e,currentValues:Array.isArray(C)?C:[C].filter(Boolean),size:V,itemClassName:x,renderContent:O,placeholder:w})}))))}return t.createElement(p,{key:e.id,option:e,currentValues:Array.isArray(C)?C:[C].filter(Boolean),size:V,itemClassName:x,renderContent:O,placeholder:w})})):null)))};return S?t.createElement(o,{value:G,onChange:y,name:I,disabled:D,multiple:!0},J):t.createElement(o,{value:G,onChange:y,name:I,disabled:D,multiple:!1},J)}export{N as default};