@helpwave/hightide 0.10.1 → 0.10.2

package/dist/index.d.mts

@@ -1011,7 +1011,7 @@ interface SelectOptionType<T = string> {
     label?: string;
     display?: ReactNode;
     disabled?: boolean;
-    ref: RefObject<HTMLElement>;
+    ref: RefObject<HTMLElement | null>;
 }
 interface SelectContextIds {
     trigger: string;
@@ -1042,8 +1042,8 @@ interface SelectContextActions<T> {
     toggleIsOpen(behavior?: UseSelectFirstHighlightBehavior): void;
 }
 interface SelectContextLayout {
-    triggerRef: RefObject<HTMLElement>;
-    registerTrigger(element: RefObject<HTMLElement>): () => void;
+    triggerRef: RefObject<HTMLElement | null>;
+    registerTrigger(element: RefObject<HTMLElement | null>): () => void;
 }
 interface SelectContextSearch {
     hasSearch: boolean;
@@ -1065,10 +1065,11 @@ declare const SelectContext: react.Context<SelectContextType<unknown>>;
 declare function useSelectContext<T>(): SelectContextType<T>;
 
 interface SelectButtonProps<T = string> extends ComponentPropsWithoutRef<'div'> {
-    placeholder?: ReactNode;
-    disabled?: boolean;
-    selectedDisplay?: (value: SelectOptionType<T> | null) => ReactNode;
-    hideExpansionIcon?: boolean;
+    'placeholder'?: ReactNode;
+    'disabled'?: boolean;
+    'selectedDisplay'?: (value: SelectOptionType<T> | null) => ReactNode;
+    'hideExpansionIcon'?: boolean;
+    'data-name'?: string;
 }
 declare const SelectButton: react.ForwardRefExoticComponent<SelectButtonProps<unknown> & react.RefAttributes<HTMLDivElement>>;
 
@@ -2242,7 +2243,7 @@ interface MultiSelectOptionType<T = string> {
     label?: string;
     display?: ReactNode;
     disabled?: boolean;
-    ref: RefObject<HTMLElement>;
+    ref: RefObject<HTMLElement | null>;
 }
 interface MultiSelectContextIds {
     trigger: string;
@@ -2274,8 +2275,8 @@ interface MultiSelectContextActions<T> {
     toggleIsOpen(behavior?: UseMultiSelectFirstHighlightBehavior): void;
 }
 interface MultiSelectContextLayout {
-    triggerRef: RefObject<HTMLElement>;
-    registerTrigger(element: RefObject<HTMLElement>): () => void;
+    triggerRef: RefObject<HTMLElement | null>;
+    registerTrigger(element: RefObject<HTMLElement | null>): () => void;
 }
 interface MultiSelectContextSearch {
     hasSearch: boolean;
@@ -2314,10 +2315,11 @@ interface MultiSelectRootProps<T> extends Partial<FormFieldDataHandling<T[]>>, P
 declare function MultiSelectRoot<T>({ children, value, onValueChange, onEditComplete, initialValue, compareFunction, initialIsOpen, onClose, showSearch, iconAppearance, invalid, disabled, readOnly, required, }: MultiSelectRootProps<T>): react_jsx_runtime.JSX.Element;
 
 interface MultiSelectButtonProps<T = string> extends ComponentPropsWithoutRef<'div'> {
-    placeholder?: ReactNode;
-    disabled?: boolean;
-    selectedDisplay?: (values: T[]) => ReactNode;
-    hideExpansionIcon?: boolean;
+    'placeholder'?: ReactNode;
+    'disabled'?: boolean;
+    'selectedDisplay'?: (values: T[]) => ReactNode;
+    'hideExpansionIcon'?: boolean;
+    'data-name'?: string;
 }
 declare const MultiSelectButton: react.ForwardRefExoticComponent<MultiSelectButtonProps<unknown> & react.RefAttributes<HTMLDivElement>>;
 
@@ -2336,12 +2338,14 @@ declare const MultiSelect: <T = string>(props: MultiSelectProps<T> & {
 }) => React.ReactElement;
 
 type MultiSelectChipDisplayButtonProps = HTMLAttributes<HTMLDivElement> & {
-    disabled?: boolean;
-    placeholder?: ReactNode;
+    'disabled'?: boolean;
+    'placeholder'?: ReactNode;
+    'data-name'?: string;
 };
 declare const MultiSelectChipDisplayButton: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     disabled?: boolean;
     placeholder?: ReactNode;
+    'data-name'?: string;
 } & react.RefAttributes<HTMLDivElement>>;
 type MultiSelectChipDisplayProps<T = string> = MultiSelectRootProps<T> & {
     contentPanelProps?: MultiSelectContentProps;

package/dist/index.d.ts

@@ -1011,7 +1011,7 @@ interface SelectOptionType<T = string> {
     label?: string;
     display?: ReactNode;
     disabled?: boolean;
-    ref: RefObject<HTMLElement>;
+    ref: RefObject<HTMLElement | null>;
 }
 interface SelectContextIds {
     trigger: string;
@@ -1042,8 +1042,8 @@ interface SelectContextActions<T> {
     toggleIsOpen(behavior?: UseSelectFirstHighlightBehavior): void;
 }
 interface SelectContextLayout {
-    triggerRef: RefObject<HTMLElement>;
-    registerTrigger(element: RefObject<HTMLElement>): () => void;
+    triggerRef: RefObject<HTMLElement | null>;
+    registerTrigger(element: RefObject<HTMLElement | null>): () => void;
 }
 interface SelectContextSearch {
     hasSearch: boolean;
@@ -1065,10 +1065,11 @@ declare const SelectContext: react.Context<SelectContextType<unknown>>;
 declare function useSelectContext<T>(): SelectContextType<T>;
 
 interface SelectButtonProps<T = string> extends ComponentPropsWithoutRef<'div'> {
-    placeholder?: ReactNode;
-    disabled?: boolean;
-    selectedDisplay?: (value: SelectOptionType<T> | null) => ReactNode;
-    hideExpansionIcon?: boolean;
+    'placeholder'?: ReactNode;
+    'disabled'?: boolean;
+    'selectedDisplay'?: (value: SelectOptionType<T> | null) => ReactNode;
+    'hideExpansionIcon'?: boolean;
+    'data-name'?: string;
 }
 declare const SelectButton: react.ForwardRefExoticComponent<SelectButtonProps<unknown> & react.RefAttributes<HTMLDivElement>>;
 
@@ -2242,7 +2243,7 @@ interface MultiSelectOptionType<T = string> {
     label?: string;
     display?: ReactNode;
     disabled?: boolean;
-    ref: RefObject<HTMLElement>;
+    ref: RefObject<HTMLElement | null>;
 }
 interface MultiSelectContextIds {
     trigger: string;
@@ -2274,8 +2275,8 @@ interface MultiSelectContextActions<T> {
     toggleIsOpen(behavior?: UseMultiSelectFirstHighlightBehavior): void;
 }
 interface MultiSelectContextLayout {
-    triggerRef: RefObject<HTMLElement>;
-    registerTrigger(element: RefObject<HTMLElement>): () => void;
+    triggerRef: RefObject<HTMLElement | null>;
+    registerTrigger(element: RefObject<HTMLElement | null>): () => void;
 }
 interface MultiSelectContextSearch {
     hasSearch: boolean;
@@ -2314,10 +2315,11 @@ interface MultiSelectRootProps<T> extends Partial<FormFieldDataHandling<T[]>>, P
 declare function MultiSelectRoot<T>({ children, value, onValueChange, onEditComplete, initialValue, compareFunction, initialIsOpen, onClose, showSearch, iconAppearance, invalid, disabled, readOnly, required, }: MultiSelectRootProps<T>): react_jsx_runtime.JSX.Element;
 
 interface MultiSelectButtonProps<T = string> extends ComponentPropsWithoutRef<'div'> {
-    placeholder?: ReactNode;
-    disabled?: boolean;
-    selectedDisplay?: (values: T[]) => ReactNode;
-    hideExpansionIcon?: boolean;
+    'placeholder'?: ReactNode;
+    'disabled'?: boolean;
+    'selectedDisplay'?: (values: T[]) => ReactNode;
+    'hideExpansionIcon'?: boolean;
+    'data-name'?: string;
 }
 declare const MultiSelectButton: react.ForwardRefExoticComponent<MultiSelectButtonProps<unknown> & react.RefAttributes<HTMLDivElement>>;
 
@@ -2336,12 +2338,14 @@ declare const MultiSelect: <T = string>(props: MultiSelectProps<T> & {
 }) => React.ReactElement;
 
 type MultiSelectChipDisplayButtonProps = HTMLAttributes<HTMLDivElement> & {
-    disabled?: boolean;
-    placeholder?: ReactNode;
+    'disabled'?: boolean;
+    'placeholder'?: ReactNode;
+    'data-name'?: string;
 };
 declare const MultiSelectChipDisplayButton: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     disabled?: boolean;
     placeholder?: ReactNode;
+    'data-name'?: string;
 } & react.RefAttributes<HTMLDivElement>>;
 type MultiSelectChipDisplayProps<T = string> = MultiSelectRootProps<T> & {
     contentPanelProps?: MultiSelectContentProps;

package/dist/index.js

@@ -10353,9 +10353,11 @@ var SelectButton = (0, import_react21.forwardRef)(
       return () => unregister();
     }, [registerTrigger]);
     const disabled = !!disabledOverride || !!context.disabled;
+    const readOnly = !!context.readOnly;
     const invalid = context.invalid;
     const hasValue = context.selectedId !== null;
-    const selectedOption = context.idToOptionMap[context.selectedId] ?? null;
+    const hasInteractions = !readOnly && !disabled;
+    const selectedOption = context.selectedId ? context.idToOptionMap[context.selectedId] ?? null : null;
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
       "div",
       {
@@ -10363,12 +10365,13 @@ var SelectButton = (0, import_react21.forwardRef)(
         ref: innerRef,
         id: context.config.ids.trigger,
         onClick: (event) => {
+          if (!hasInteractions) return;
           props.onClick?.(event);
           context.toggleIsOpen();
         },
         onKeyDown: (event) => {
           props.onKeyDown?.(event);
-          if (disabled) return;
+          if (!hasInteractions) return;
           switch (event.key) {
             case "Enter":
             case " ":
@@ -10391,16 +10394,18 @@ var SelectButton = (0, import_react21.forwardRef)(
         "data-name": props["data-name"] ?? "select-button",
         "data-value": hasValue ? "" : void 0,
         "data-disabled": disabled ? "" : void 0,
+        "data-readonly": readOnly ? "" : void 0,
         "data-invalid": invalid ? "" : void 0,
         tabIndex: disabled ? -1 : 0,
         role: "button",
         "aria-invalid": invalid,
         "aria-disabled": disabled,
+        "aria-readonly": readOnly,
         "aria-haspopup": "dialog",
         "aria-expanded": context.isOpen,
         "aria-controls": context.isOpen ? context.config.ids.content : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectOptionDisplayContext.Provider, { value: "trigger", children: hasValue ? selectedDisplay?.(selectedOption) ?? selectedOption.display : placeholder ?? translation("clickToSelect") }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectOptionDisplayContext.Provider, { value: "trigger", children: hasValue ? selectedDisplay?.(selectedOption) ?? selectedOption?.display : placeholder ?? translation("clickToSelect") }),
           !hideExpansionIcon && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ExpansionIcon, { isExpanded: context.isOpen })
         ]
       }
@@ -18867,8 +18872,10 @@ var MultiSelectButton = (0, import_react86.forwardRef)(function MultiSelectButto
     return () => unregister();
   }, [registerTrigger]);
   const disabled = !!disabledOverride || !!context.disabled;
+  const readOnly = !!context.readOnly;
   const invalid = context.invalid;
   const hasValue = context.value.length > 0;
+  const hasInteractions = !readOnly && !disabled;
   const selectedOptions = context.selectedIds.map((id2) => context.idToOptionMap[id2]).filter(Boolean);
   return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
     "div",
@@ -18877,12 +18884,13 @@ var MultiSelectButton = (0, import_react86.forwardRef)(function MultiSelectButto
       ref: innerRef,
       id: context.config.ids.trigger,
       onClick: (event) => {
+        if (!hasInteractions) return;
         props.onClick?.(event);
         context.toggleIsOpen();
       },
       onKeyDown: (event) => {
         props.onKeyDown?.(event);
-        if (disabled) return;
+        if (!hasInteractions) return;
         switch (event.key) {
           case "Enter":
           case " ":
@@ -18905,11 +18913,13 @@ var MultiSelectButton = (0, import_react86.forwardRef)(function MultiSelectButto
       "data-name": props["data-name"] ?? "multi-select-button",
       "data-value": hasValue ? "" : void 0,
       "data-disabled": disabled ? "" : void 0,
+      "data-readonly": readOnly ? "" : void 0,
       "data-invalid": invalid ? "" : void 0,
       tabIndex: disabled ? -1 : 0,
       role: "button",
       "aria-invalid": invalid,
       "aria-disabled": disabled,
+      "aria-readonly": readOnly,
       "aria-haspopup": "dialog",
       "aria-expanded": context.isOpen,
       "aria-controls": context.isOpen ? context.config.ids.content : void 0,
@@ -21188,7 +21198,9 @@ var MultiSelectChipDisplayButton = (0, import_react105.forwardRef)(function Mult
     return () => unregister();
   }, [registerTrigger]);
   const disabled = !!props?.disabled || !!context.disabled;
+  const readOnly = !!context.readOnly;
   const invalid = context.invalid;
+  const hasInteractions = !readOnly && !disabled;
   const selectedOptions = context.selectedIds.map((oid) => context.idToOptionMap[oid]).filter(Boolean);
   return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
     "div",
@@ -21198,14 +21210,17 @@ var MultiSelectChipDisplayButton = (0, import_react105.forwardRef)(function Mult
       onClick: (event) => {
         props.onClick?.(event);
         if (event.defaultPrevented) return;
+        if (!hasInteractions) return;
         context.toggleIsOpen();
       },
       "data-name": props["data-name"] ?? "multi-select-chip-display-button",
       "data-value": context.value.length > 0 ? "" : void 0,
       "data-disabled": disabled ? "" : void 0,
+      "data-readonly": readOnly ? "" : void 0,
       "data-invalid": invalid ? "" : void 0,
       "aria-invalid": invalid,
       "aria-disabled": disabled,
+      "aria-readonly": readOnly,
       children: [
         selectedOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { "data-name": "multi-select-chip-display-chip", children: [
           opt.display,
@@ -21213,6 +21228,7 @@ var MultiSelectChipDisplayButton = (0, import_react105.forwardRef)(function Mult
             IconButton,
             {
               tooltip: translation("remove"),
+              disabled: !hasInteractions,
               onClick: (e) => {
                 context.toggleSelection(opt.id, false);
                 e.preventDefault();
@@ -21229,11 +21245,14 @@ var MultiSelectChipDisplayButton = (0, import_react105.forwardRef)(function Mult
           IconButton,
           {
             id: context.config.ids.trigger,
+            disabled: !hasInteractions,
             onClick: (event) => {
               event.stopPropagation();
+              if (!hasInteractions) return;
               context.toggleIsOpen();
             },
             onKeyDown: (event) => {
+              if (!hasInteractions) return;
               switch (event.key) {
                 case "ArrowDown":
                   context.setIsOpen(true, "first");