@splunk/react-ui 5.8.0 → 5.9.1

package/docs-llm/Multiselect.md

@@ -229,6 +229,8 @@ function NewValues() {
         'Line Chart',
         'Map',
         'Table',
+        'Bar chart',
+        'Bubble chart',
     ]);
 
     const handleChange: MultiselectChangeHandler = useCallback((e, { values }) => {
@@ -324,6 +326,8 @@ export default MultiselectError;
 
 ### Disabled
 
+If you absolutely need to disable a `Multiselect` use `"disabled="dimmed"`. This ensures the `Multiselect` does not respond to events, but can still receive focus to so that users can navigate to the `Multiselect` when using assistive technologies.
+
 ```typescript
 import React, { useCallback, useState } from 'react';
 
@@ -338,7 +342,7 @@ function Disabled() {
     }, []);
 
     return (
-        <Multiselect values={selectedValues} onChange={handleChange} disabled inline>
+        <Multiselect values={selectedValues} onChange={handleChange} disabled="dimmed" inline>
             <Multiselect.Option label="Area chart" value="1" />
             <Multiselect.Option label="Bar chart" value="2" />
             <Multiselect.Option label="Bubble chart" value="3" />
@@ -613,163 +617,6 @@ export default Fetching;
 
 
 
-### Load more on scroll bottom
-
-Similar example as fetching but it's also possible to append more Options from a server when the list is scrolled to the bottom. Here, that behavior is simulated. The onScrollBottom prop is a function that should fetch more results and append them to the current Options. Once all items are loaded, the onScrollBottom prop should be set to null.
-
-```typescript
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-
-import useFetchOptions, {
-    isMovieOption,
-    Movie,
-    MovieOption,
-} from '@splunk/react-ui/fixtures/useFetchOptions';
-import Multiselect, {
-    MultiselectChangeHandler,
-    MultiselectFilterChangeHandler,
-} from '@splunk/react-ui/Multiselect';
-import { _ } from '@splunk/ui-utils/i18n';
-
-
-function LoadMoreOnScrollBottom() {
-    const [fullCount, setFullCount] = useState(0);
-    const [isLoading, setIsLoading] = useState(false);
-    const [isLoadingMore, setIsLoadingMore] = useState(false);
-    const [options, setOptions] = useState<MovieOption[]>([]);
-    const [selectedValues, setSelectedValues] = useState<(string | number | boolean)[]>([10, 30]);
-
-    
-    const { fetch, fetchMore, getFullCount, getSelectedOptions, stop } = useFetchOptions();
-
-    const handleFetch = useCallback(
-        (keyword?: string) => {
-            setIsLoading(true);
-
-            fetch(keyword)
-                .then((fetchedOptions) => {
-                    setIsLoading(false);
-                    setOptions(fetchedOptions);
-                    setFullCount(getFullCount());
-                })
-                .catch((error) => {
-                    if (!error.isCanceled) throw error;
-                });
-        },
-        [fetch, getFullCount]
-    );
-
-    const handleChange: MultiselectChangeHandler = useCallback(
-        (e, { values }) => {
-            setSelectedValues(values);
-            handleFetch();
-        },
-        [handleFetch]
-    );
-
-    const handleFetchMore = useCallback(
-        (currentOptions: MovieOption[]) => {
-            setIsLoadingMore(true);
-
-            fetchMore(currentOptions)
-                .then((fetchedOptions) => {
-                    setOptions(fetchedOptions);
-                    setIsLoading(false);
-                    setIsLoadingMore(false);
-                    setFullCount(getFullCount());
-                })
-                .catch((error) => {
-                    if (!error.isCanceled) {
-                        throw error;
-                    }
-                });
-        },
-        [fetchMore, getFullCount]
-    );
-
-    const handleFilterChange: MultiselectFilterChangeHandler = useCallback(
-        (e, { keyword }) => {
-            handleFetch(keyword);
-        },
-        [handleFetch]
-    );
-
-    const handleScrollBottom = useCallback(() => {
-        if (!isLoadingMore) {
-            handleFetchMore(options);
-        }
-    }, [handleFetchMore, isLoadingMore, options]);
-
-    useEffect(() => {
-        handleFetch();
-
-        return () => {
-            stop();
-        };
-    }, [handleFetch, stop]);
-
-    const createOption = useCallback(
-        (movie: Movie | MovieOption, isSelected = false) => (
-            
-            <Multiselect.Option
-                hidden={isSelected}
-                key={isSelected ? `selected-${movie.id}` : movie.id}
-                label={movie.title}
-                matchRanges={isMovieOption(movie) ? movie.matchRanges : undefined}
-                value={movie.id}
-            />
-        ),
-        []
-    );
-
-    const generateOptions = useMemo(() => {
-        // The selected items always have to be in the option list, but can be hidden
-        let selectedOptions: React.ReactElement[] = [];
-        if (selectedValues.length) {
-            const selectedMovies = getSelectedOptions(selectedValues as number[]);
-            selectedOptions = selectedMovies.map((movie) => createOption(movie, true));
-        }
-
-        if (isLoading) {
-            // Only return the select items
-            return selectedOptions;
-        }
-
-        const list = options.map((movie) => createOption(movie));
-        return list.concat(selectedOptions);
-    }, [createOption, getSelectedOptions, isLoading, options, selectedValues]);
-
-    const footerMessage = useMemo(() => {
-        if (fullCount > options.length && !isLoading) {
-            return _('%1 of %2 movies')
-                .replace('%1', options.length.toString())
-                .replace('%2', fullCount.toString());
-        }
-        return null;
-    }, [fullCount, options.length, isLoading]);
-
-    return (
-        <Multiselect
-            values={selectedValues}
-            placeholder={_('Select a movie...')}
-            onChange={handleChange}
-            controlledFilter
-            onFilterChange={handleFilterChange}
-            onScrollBottom={fullCount === options.length ? undefined : handleScrollBottom} // Disable when all items are loaded.
-            isLoadingOptions={isLoading}
-            footerMessage={footerMessage}
-            inline
-        >
-            {generateOptions}
-        </Multiselect>
-    );
-}
-
-export default LoadMoreOnScrollBottom;
-```
-
-
-
 ### data
 
 ```typescript
@@ -837,6 +684,182 @@ export default Compact;
 
 
 
+### movies
+
+```typescript
+import React, { useCallback, useMemo, useState } from 'react';
+
+import moviesJson from '@splunk/react-ui/fixtures/movies.json';
+import Multiselect, {
+    MultiselectChangeHandler,
+    MultiselectFilterChangeHandler,
+    MultiselectScrollBottomHandler,
+} from '@splunk/react-ui/Multiselect';
+import { keywordLocations, stringToKeywords, testPhrase } from '@splunk/ui-utils/filter';
+import { sprintf } from '@splunk/ui-utils/format';
+import { _ } from '@splunk/ui-utils/i18n';
+
+type Movie = {
+    id: number;
+    title: string;
+};
+
+type OptionItem = {
+    hidden?: boolean;
+    label: string;
+    matchRanges?: { start: number; end: number }[];
+    value: string | number | boolean;
+};
+
+const { movies } = moviesJson as { movies: Movie[] };
+
+const pageSize = 20;
+
+
+function LoadMoreWithSelectAll() {
+    const [keyword, setKeyword] = useState('');
+    const [loadedCount, setLoadedCount] = useState(pageSize);
+    const [values, setValues] = useState<(string | number | boolean)[]>([]);
+    const keywords = useMemo(() => stringToKeywords(keyword), [keyword]);
+
+    const allOptions = useMemo<OptionItem[]>(() => {
+        const hasKeyword = keywords.length > 0;
+        return movies
+            .filter((movie) => !hasKeyword || testPhrase(movie.title, keywords))
+            .map((movie) => ({
+                label: movie.title,
+                matchRanges: hasKeyword
+                    ? keywordLocations(movie.title, keywords) || undefined
+                    : undefined,
+                value: movie.id,
+            }));
+    }, [keywords]);
+
+    const visibleCount = Math.min(loadedCount, allOptions.length);
+    const loadedOptions = useMemo(
+        () => allOptions.slice(0, visibleCount),
+        [allOptions, visibleCount]
+    );
+    const allOptionValues = useMemo(() => allOptions.map((option) => option.value), [allOptions]);
+    const selectedValueSet = useMemo(() => new Set(values), [values]);
+    const movieById = useMemo(() => {
+        const map = new Map<string | number | boolean, Movie>();
+        movies.forEach((movie) => {
+            map.set(movie.id, movie);
+        });
+        return map;
+    }, []);
+
+    const options = useMemo<OptionItem[]>(() => {
+        const loadedValueSet = new Set(loadedOptions.map((option) => option.value));
+        const hiddenSelectedOptions = values
+            .filter((value) => !loadedValueSet.has(value))
+            .map((value) => movieById.get(value))
+            .filter((movie): movie is Movie => !!movie)
+            .map((movie) => ({
+                hidden: true,
+                label: movie.title,
+                matchRanges: keywordLocations(movie.title, keywords) || undefined,
+                value: movie.id,
+            }));
+
+        return [...loadedOptions, ...hiddenSelectedOptions];
+    }, [keywords, loadedOptions, movieById, values]);
+
+    const handleChange = useCallback<MultiselectChangeHandler>(
+        (_e, { values: nextValues, reason }) => {
+            if (reason === 'selectAll') {
+                setValues(allOptionValues);
+                return;
+            }
+
+            setValues(nextValues);
+        },
+        [allOptionValues]
+    );
+
+    const handleScrollBottom = useCallback<MultiselectScrollBottomHandler>(() => {
+        setLoadedCount((currentCount) => Math.min(currentCount + pageSize, allOptions.length));
+    }, [allOptions.length]);
+
+    const handleFilterChange = useCallback<MultiselectFilterChangeHandler>(
+        (_e, { keyword: nextKeyword }) => {
+            setKeyword(nextKeyword);
+            setLoadedCount(pageSize);
+        },
+        []
+    );
+
+    const footerMessage = useMemo(() => {
+        const selectedInFilteredCount = allOptions.filter((option) =>
+            selectedValueSet.has(option.value)
+        ).length;
+        const hasKeyword = keywords.length > 0;
+        const allLoaded = visibleCount >= allOptions.length;
+        const selectedCountDisplay = hasKeyword ? selectedInFilteredCount : values.length;
+
+        if (hasKeyword) {
+            if (allLoaded) {
+                return sprintf(_('%(selected)d selected / %(matches)d matches'), {
+                    matches: allOptions.length,
+                    selected: selectedCountDisplay,
+                });
+            }
+
+            return sprintf(_('%(selected)d selected (%(loaded)d loaded / %(matches)d matches)'), {
+                loaded: visibleCount,
+                matches: allOptions.length,
+                selected: selectedCountDisplay,
+            });
+        }
+
+        if (allLoaded) {
+            return sprintf(_('%(selected)d selected / %(total)d total'), {
+                selected: selectedCountDisplay,
+                total: allOptions.length,
+            });
+        }
+
+        return sprintf(_('%(selected)d selected (%(loaded)d loaded / %(total)d total)'), {
+            loaded: visibleCount,
+            selected: selectedCountDisplay,
+            total: allOptions.length,
+        });
+    }, [allOptions, keywords.length, selectedValueSet, values.length, visibleCount]);
+
+    return (
+        <Multiselect
+            compact
+            filter="controlled"
+            values={values}
+            placeholder={_('Select movies...')}
+            menuStyle={{ maxHeight: 640 }}
+            onChange={handleChange}
+            onFilterChange={handleFilterChange}
+            onScrollBottom={visibleCount < allOptions.length ? handleScrollBottom : undefined}
+            footerMessage={footerMessage}
+            selectAllAppearance="checkbox"
+            inline
+        >
+            {options.map(({ hidden, label, matchRanges, value }) => (
+                <Multiselect.Option
+                    key={`${hidden ? 'selected-' : ''}${value}`}
+                    // hidden options represent selected values outside the current loaded slice to avoid treating them as new values
+                    hidden={hidden}
+                    label={label}
+                    matchRanges={matchRanges}
+                    value={value}
+                />
+            ))}
+        </Multiselect>
+    );
+}
+
+export default LoadMoreWithSelectAll;
+```
+
+
+
 
 ## API
 
@@ -856,7 +879,7 @@ export default Compact;
 | defaultPlacement | 'above' \| 'below' \| 'vertical' | no | 'vertical' | The default placement of the dropdown menu. It might be rendered in a different direction depending upon the space available. |
 | defaultValues | (string \| number \| boolean)[] | no |  | Set this property instead of value to keep the value uncontrolled. |
 | describedBy | string | no |  | The id of the description. When placed in a ControlGroup, this is automatically set to the ControlGroup's help component. |
-| disabled | boolean | no |  | Disable adding and removing. |
+| disabled | boolean \| 'dimmed' \| 'disabled' | no |  | Prevents user interaction and adds disabled styling.  If set to `dimmed`, the component is able to receive focus. If set to `disabled`, the component is unable to receive focus. |
 | elementRef | React.Ref<HTMLButtonElement \| HTMLDivElement> | no |  | A React ref which is set to the DOM element when the component mounts, and null when it unmounts. |
 | error | boolean | no |  | Display as in an error. |
 | filter | boolean \| 'controlled' | no |  | Determines whether to show the filter box. When true, the children are automatically filtered based on the label. When controlled, the parent component must provide a onFilterChange callback and update the children.  Only supported when `compact=true`. |
@@ -870,7 +893,7 @@ export default Compact;
 | menuStyle | React.CSSProperties | no |  | Style properties to apply to the Menu. This is primarily used to override the width of the menu should it need to be wider than the toggle Button. |
 | name | string | no |  | The name is returned with onChange events, which can be used to identify the control when multiple controls share an onChange callback. |
 | noOptionsMessage | React.ReactNode | no | _('No matches') | The noOptionsMessage is shown when there are no children and it's not loading, such as when there are no Options matching the filter. This can be customized to the type of content, for example: "No matching dashboards". You can insert other content, such as an error message, or communicate a minimum number of characters to enter to see results. |
-| onChange | MultiselectChangeHandler | no |  | A callback to receive the change events.  If values is set, this callback is required. This must set the values prop to retain the change. |
+| onChange | MultiselectChangeHandler | no |  | A callback to receive the change events.  If values is set, this callback is required. This must set the values prop to retain the change. Supports custom selection behavior. |
 | onClose | () => void | no |  | A callback function invoked when the popover closes. |
 | onFilterChange | MultiselectFilterChangeHandler | no |  | A callback with the change event and value of the filter box. Providing this callback and setting controlledFilter to true enables you to filter and update the children by other criteria. |
 | onOpen | () => void | no |  | A callback function invoked when the popover opens. |
@@ -879,7 +902,7 @@ export default Compact;
 | placeholder | string | no | _('Select...') | If 'value' is undefined or doesn't match an item, the Button will display this text. |
 | prepend | boolean | no |  | Prepend removes rounded borders from the left side. |
 | repositionMode | 'none' \| 'flip' | no | 'flip' | See `repositionMode` on `Popover` for details. |
-| selectAllAppearance | 'buttongroup' \| 'checkbox' \| 'none' | no |  | **DEPRECATED**: Value 'buttongroup' Determines how to display Select all/Clear all. Only supported when `compact=true`.  The 'buttongroup' value is deprecated and will be removed in a future major version. |
+| selectAllAppearance | 'buttongroup' \| 'checkbox' \| 'none' | no |  | **DEPRECATED**: Value 'buttongroup' Determines how to display Select all/Clear all. Only supported when `compact=true`.  By default, selection applies only to currently loaded options. Use `onChange` for custom selection behavior.  The 'buttongroup' value is deprecated and will be removed in a future major version. |
 | showSelectedValuesFirst | 'nextOpen' \| 'immediately' \| 'never' | no |  | When `compact=true`, move selected values to the top of the list on next open (default), immediately, or not at all. |
 | tabConfirmsNewValue | boolean | no |  | Pressing Tab while entering an input confirms the new value. Requires `allowNewValues`. |
 | values | (string \| number \| boolean)[] | no |  | Value will be matched to one of the children to deduce the label and/or icon for the toggle. |
@@ -905,7 +928,7 @@ An option within a `Multiselect`.
 | children | React.ReactNode | no |  | When provided, `children` is rendered instead of the `label`.  Caution: The element(s) passed here must be pure. |
 | description | string | no |  | Additional information to explain the option, such as "Recommended". |
 | descriptionPosition | 'right' \| 'bottom' | no | 'bottom' | The description text may appear to the right of the label or under the label. |
-| disabled | boolean | no |  | If disabled=true, the option is grayed out and cannot be clicked. |
+| disabled | boolean \| 'dimmed' \| 'disabled' | no |  | Prevents user interaction and adds disabled styling.  If set to `dimmed`, the component is able to receive focus. If set to `disabled`, the component is unable to receive focus. |
 | hidden | boolean | no |  | Adding hidden options can be useful for resolving the selected display label and icon, when the option should not be in the list. This scenario can arise when Select's filter is controlled, because the selected item may be filtered out; and when a legacy option is valid, but should no longer be displayed as a selectable option. |
 | icon | React.ReactNode | no |  | The icon to show before the label. See the @splunk/react-icons package for drop in icons.  Caution: The element(s) passed here must be pure. All icons in the react-icons package are pure. |
 | label | string | yes |  | The text to show for the option when `children` is not defined. When filtering, the `label` is used for matching to the filter text. |

package/docs-llm/Notifications.md

@@ -0,0 +1,46 @@
+# Notifications
+
+## Overview
+
+# Notifications
+
+Notifications help users understand what happened, what needs attention, and what to do next.
+
+There are two notification components in Splunk UI:
+- [Message](./Message) is used for inline, contextual feedback near the content it refers to.
+- [Message Bar](./MessageBar) is used for page-level or system-level communication.
+
+These components use standardized icons and [`notificationColors` design tokens](../themes/variables#notification-colors) to communicate consistent tone and urgency, so users can quickly understand what to expect.
+
+## Toast Notifications (Deprecated)
+
+Toast notifications are **deprecated** and should not be used for new experiences.
+Even with careful implementation, this pattern still creates significant accessibility and usability barriers.
+
+Use persistent, user-dismissible notifications instead:
+- Use [Message](./Message) for inline, contextual feedback.
+- Use [Message Bar](./MessageBar) for page-level or system-level communication.
+
+### Migration Guide
+
+Review the CRUD Blueprint sections for [Create confirmation](../../DesignSystem/Blueprints/CRUD/Create#3-confirmation), [Update confirmation](../../DesignSystem/Blueprints/CRUD/Update#3-confirmation) and [Delete feedback](../../DesignSystem/Blueprints/CRUD/Delete#3-feedback) for guidance on scenarios where the toast pattern may have previously been used.
+
+Below are suggestions for how to migrate common scenarios:
+
+| Current Toast Pattern | Recommended Alternative | Reason |
+|---|---|---|
+| Success message after form submission | Message Bar at top of page, or inline Message next to changed element | Persistent confirmation is visible to all users regardless of timing |
+| Error feedback | Inline Message in form field, or Message Bar at top | Direct association with the error source helps users understand and fix the problem |
+| Temporary status updates | Message Bar for page-level updates, or Message for task-level updates | Clear scope and persistent visibility ensure all users receive the information |
+| Real-time alerts | Message Bar with optional dismiss action | Ensures users see critical information before it's dismissed |
+
+### Further Reading
+
+Below are additional resources to understand the issues with toast patterns:
+
+- [GitHub Primer: Accessible Notifications and Messages](https://primer.style/accessibility/patterns/accessible-notifications-and-messages/#toasts)
+- [Defining Toast Messages (Adrian Roselli)](https://adrianroselli.com/2020/01/defining-toast-messages.html)
+- [A Toast to an Accessible Toast... to Notifications (Scott O'Hara)](https://www.scottohara.me/blog/2019/07/08/a-toast-to-a11y-toasts.html)
+- [The Problem with Toast Messages and What to Do Instead (Adam Silver)](https://adamsilver.io/blog/the-problem-with-toast-messages-and-what-to-do-instead/)
+
+

package/docs-llm/Table.md

@@ -2452,14 +2452,14 @@ export default Complex;
 
 | Name | Type | Required | Default | Description |
 |------|------|------|------|------|
-| actions | React.ReactElement[] | no |  | Adds table-level actions. Not compatible with `onRequestResize`. |
+| actions | React.ReactElement[] | no | [] | Adds table-level actions. Not compatible with `onRequestResize`. |
 | actionsColumnWidth | number | no |  | Specifies the width of the actions column. Adds an empty header for row actions if no table-level actions are present. |
 | children | React.ReactNode | no |  | Must be `Table.Head`, `Table.Body`, or `Table.Caption`. |
-| dockOffset | number | no |  | Sets the offset from the top of the window. Only applies when `headType` is 'docked'. |
+| dockOffset | number | no | 0 | Sets the offset from the top of the window. Only applies when `headType` is 'docked'. |
 | dockScrollBar | boolean | no |  | Docks the horizontal scroll bar at the bottom of the window when the bottom of the table is below the viewport. |
 | elementRef | React.Ref<HTMLDivElement> | no |  | A React ref which is set to the DOM element when the component mounts and null when it unmounts. |
-| headType | 'docked' \| 'fixed' \| 'inline' | no |  | Sets the table head type:   * `docked`: The head is docked against the window  * `fixed` : The head is fixed in the table. The table can scroll          independently from the head.  * `inline`: The head isn't fixed, but can scroll with the rest of          the table. |
-| horizontalOverflow | 'auto' \| 'scroll' | no |  | Controls how the Table handles horizontal content overflow:   * `auto`: The default behavior for overflow. `HeadCell` content will truncate and `Cell` content will wrap.            The Table will scroll horizontally when the container's width exceeds the Table's width.  * `scroll`: The Table will scroll horizontally. `HeadCell` content will not truncate and `Cell` content will wrap only for word breaks. |
+| headType | 'docked' \| 'fixed' \| 'inline' | no | 'inline' | Sets the table head type:   * `docked`: The head is docked against the window  * `fixed` : The head is fixed in the table. The table can scroll          independently from the head.  * `inline`: The head isn't fixed, but can scroll with the rest of          the table. |
+| horizontalOverflow | 'auto' \| 'scroll' | no | 'auto' | Controls how the Table handles horizontal content overflow:   * `auto`: The default behavior for overflow. `HeadCell` content will truncate and `Cell` content will wrap.            The Table will scroll horizontally when the container's width exceeds the Table's width.  * `scroll`: The Table will scroll horizontally. `HeadCell` content will not truncate and `Cell` content will wrap only for word breaks. |
 | innerStyle | React.CSSProperties | no |  | Style specification for the inner container, which is the scrolling container. |
 | onRequestMoveColumn | TableRequestMoveColumnHandler | no |  | An event handler for handle the re-order action of Table. The function is passed an options object with `fromIndex` and `toIndex`. |
 | onRequestMoveRow | TableRequestMoveRowHandler | no |  | An event handler to handle the reorder rows action of Table. The function is passed an options object with `fromIndex` and `toIndex`. |
@@ -2468,10 +2468,10 @@ export default Complex;
 | onScroll | React.UIEventHandler<HTMLDivElement> | no |  | Callback invoked when a scroll event occurs on the inner scrolling container. |
 | outerStyle | React.CSSProperties | no |  | Style specification for the outer container. |
 | pinnedColumns | PinnedColumnsProp | no |  | Optionally pin the actions column to the end of the table by passing `pinnedColumns={{ actions: true }}.` When using pinned columns `horizontalOverflow` should be set to `scroll`. |
-| primaryColumnIndex | number | no |  | Indicates the column to use as the primary label for each row. |
+| primaryColumnIndex | number | no | 0 | Indicates the column to use as the primary label for each row. |
 | resizableFillLayout | boolean | no |  | Table will fill parent container. Resizable columns can have a `width` of `auto` only with this prop enabled. |
-| rowExpansion | 'single' \| 'multi' \| 'controlled' \| 'none' | no |  | Adds a column to the table with an expansion button for each row that has expansion content. Supported values:  * `single`: Only one row can be expanded at a time. If another expansion button is clicked, the currently expanded row closes and the new one opens. * `multi`: Allows multiple rows to be expanded at the same time. * `controlled`: Allows the expanded state to be externally managed by `expanded` prop of `Row`. * `none`: The default with no row expansion. |
-| rowSelection | 'all' \| 'some' \| 'none' | no |  | When an `onRequestToggleAllRows` handler is defined, this prop determines the appearance of the toggle all rows button. |
+| rowExpansion | 'single' \| 'multi' \| 'controlled' \| 'none' | no | 'none' | Adds a column to the table with an expansion button for each row that has expansion content. Supported values:  * `single`: Only one row can be expanded at a time. If another expansion button is clicked, the currently expanded row closes and the new one opens. * `multi`: Allows multiple rows to be expanded at the same time. * `controlled`: Allows the expanded state to be externally managed by `expanded` prop of `Row`. * `none`: The default with no row expansion. |
+| rowSelection | 'all' \| 'some' \| 'none' | no | 'none' | When an `onRequestToggleAllRows` handler is defined, this prop determines the appearance of the toggle all rows button. |
 | stripeRows | boolean | no |  | Alternate rows are given a darker background to improve readability. |
 | tableStyle | React.CSSProperties | no |  | The style attribute for the table. This is primarily useful for setting the CSS table-layout property. |
 

package/docs-llm/Tree.md

@@ -163,8 +163,10 @@ import { variables } from '@splunk/themes';
 
 const StyledExpansionToggleWrapper = styled.span`
     display: inline-flex;
-    padding-inline-end: ${variables.spacingSmall};
     width: 16px;
+    justify-content: center;
+    align-items: center;
+    padding-inline: ${variables.spacingMedium};
 `;
 const StyledSpan = styled.span`
     display: inline-flex;
@@ -314,9 +316,12 @@ import { variables } from '@splunk/themes';
 const StyledExpansionToggleWrapper = styled.span`
     display: inline-flex;
     width: 16px;
+    justify-content: center;
+    align-items: center;
+    padding-inline: ${variables.spacingMedium};
 `;
 const StyledCheckbox = styled(Checkbox)`
-    padding-inline: ${variables.spacingSmall};
+    padding-inline-end: ${variables.spacingSmall};
 `;
 const StyledSpan = styled.span`
     align-items: center;

package/docs-llm/Typography.md

@@ -68,7 +68,7 @@ Typography renders text content with styling based on the Splunk Design System.
 
 | Name | Type | Required | Default | Description |
 |------|------|------|------|------|
-| as | \| 'p' \| 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'span' \| 'blockquote' \| 'dd' \| 'dl' \| 'dt' \| 'figcaption' \| 'figure' \| 'li' \| 'ol' \| 'ul' \| 'pre' \| 'abbr' \| 'cite' \| 'code' \| 'data' \| 'dfn' \| 'em' \| 'u' \| 'time' \| 'sup' \| 'sub' \| 'strong' \| 'small' \| 'samp' \| 's' \| 'var' \| 'ruby' \| 'rt' \| 'rp' | yes |  | Tag for the element to render children content into. Use the most semantically appropriate tag. Layout elements like `div` are not allowed; use the `typography` mixin from `@splunk/themes` instead. |
+| as | \| 'p' \| 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'span' \| 'blockquote' \| 'dd' \| 'dl' \| 'dt' \| 'figcaption' \| 'figure' \| 'li' \| 'ol' \| 'ul' \| 'pre' \| 'abbr' \| 'cite' \| 'code' \| 'data' \| 'dfn' \| 'em' \| 'label' \| 'u' \| 'time' \| 'sup' \| 'sub' \| 'strong' \| 'small' \| 'samp' \| 's' \| 'var' \| 'ruby' \| 'rt' \| 'rp' | yes |  | Tag for the element to render children content into. Use the most semantically appropriate tag. Layout elements like `div` are not allowed; use the `typography` mixin from `@splunk/themes` instead. |
 | children | React.ReactNode | yes |  | Text and inline icons |
 | color | 'active' \| 'default' \| 'disabled' \| 'inverted' \| 'muted' \| 'inherit' | no |  | Set the color to a system-standard color: e.g. `active` for `@splunk/themes/variables.contentColorActive`. |
 | elementRef | React.Ref<HTMLElement> | no |  | A React ref which is set to the DOM element when the component mounts, and null when it unmounts. |

package/docs-llm/llms.txt

@@ -17,8 +17,6 @@ A library of UI components, all independent of the Splunk Enterprise environment
 - **JSON Tree**
 - **Link**
 - **Markdown**
-- **Message**
-- **Message Bar**
 - **Modal**
 - **Paginator**
 - **Progress**
@@ -68,12 +66,17 @@ A library of UI components, all independent of the Splunk Enterprise environment
 - **Anchor Menu**
 - **Breadcrumbs**
 
+## Notifications
+
+- **Notifications**
+- **Message**
+- **Message Bar**
+
 ## Utilities
 
 - **AnimationToggle**
 - **Button Group**
 - **Clickable**
-- **Column Layout**
 - **Divider**
 - **Dropdown**
 - **Layer**
@@ -93,5 +96,6 @@ A library of UI components, all independent of the Splunk Enterprise environment
 ## Deprecated
 
 - **Accordion**
+- **Column Layout**
 - **Monogram**
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "5.8.0",
+  "version": "5.9.1",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -45,17 +45,16 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@react-spring/web": "^9.7.5",
-    "@splunk/react-icons": "^5.8.0",
-    "@splunk/themes": "^1.5.0",
-    "@splunk/ui-utils": "^1.12.0",
+    "@splunk/react-icons": "^5.10.0",
+    "@splunk/themes": "^1.7.0",
+    "@splunk/ui-utils": "^1.13.0",
     "decimal.js-light": "^2.5.1",
     "intl-tel-input": "^25.3.2",
-    "lodash": "^4.17.14",
+    "lodash": "^4.18.1",
     "moment": "^2.29.4",
     "prop-types": "^15.6.2",
     "react-markdown": "^8.0.7",
     "remark-gfm": "^1.0.0",
-    "tinycolor2": "^1.4.1",
     "use-sync-external-store": "^1.6.0",
     "use-typed-event-listener": "^3.0.0"
   },
@@ -63,10 +62,10 @@
     "@babel/core": "^7.28.0",
     "@babel/plugin-transform-runtime": "^7.28.0",
     "@splunk/babel-preset": "^4.0.0",
-    "@splunk/docs-gen": "^1.4.0",
-    "@splunk/eslint-config": "^5.0.0",
-    "@splunk/eslint-plugin-splunk-ui": "^0.1.0",
-    "@splunk/react-docs": "^1.5.1",
+    "@splunk/docs-gen": "^1.5.0",
+    "@splunk/eslint-config": "^5.1.0",
+    "@splunk/eslint-plugin-splunk-ui": "^0.2.0",
+    "@splunk/react-docs": "^1.7.0",
     "@splunk/stylelint-config": "^5.0.0",
     "@splunk/test-runner-utils": "^0.4.1",
     "@splunk/webpack-configs": "^7.0.3",
@@ -90,7 +89,6 @@
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@types/styled-components": "^5.1.0",
-    "@types/tinycolor2": "^1.4.2",
     "@types/use-sync-external-store": "^1.5.0",
     "@types/webpack-env": "^1.15.2",
     "@typescript-eslint/eslint-plugin": "^8.29.1",