@workday/canvas-kit-react/dist/es6/collection/lib/useListItemRegister.js

The parent module that contains all Workday Canvas Kit React components

import React from 'react';
import { useMountLayout, createElemPropsHook, useLocalRef, useForkRef, slugify, } from '@workday/canvas-kit-react/common';
import { useListModel } from './useListModel';
import { ListRenderItemContext } from './useListRenderItem';
/**
 * This elemProps hook is the base of all item component hooks. It registers an item with a
 * collection and sets the `data-id` that is used by other hooks. It should always be the last
 * defined hook when using `composeHooks` (`composeHooks` executes hooks right to left and merges
 * props left to right). It is used by `ListBox.Item` and all `*.Item` subcomponents.
 *
 * ```ts
 * const useMyItem = composeHooks(
 *   useListItemSelect, // additional hooks go here
 *   useListItemRegister // always last
 * );
 * ```
 */
export const useListItemRegister = createElemPropsHook(useListModel)((model, ref, elemProps = {}) => {
    const { state, events } = model;
    const { item, virtual } = React.useContext(ListRenderItemContext);
    const [localId, setLocalId] = React.useState(elemProps['data-id'] || (item === null || item === void 0 ? void 0 : item.id) || '');
    const { localRef, elementRef } = useLocalRef(useForkRef(ref, virtual ? model.state.UNSTABLE_virtual.measureElement : null));
    // if the list is virtual, force the correct styling. Without this, weird things happen...
    const style = virtual
        ? {
            position: 'absolute',
            top: 0,
            left: 0,
            transform: `translateY(${virtual.start}px)`,
        }
        : {};
    useMountLayout(() => {
        var _a;
        if ((virtual === null || virtual === void 0 ? void 0 : virtual.index) === 0 && ((_a = localRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight)) {
            // TODO: This update doesn't seem to be working correctly
            // events.updateItemHeight?.(localRef.current!.clientHeight);
        }
        // if an item is already provided, there's nothing left to do
        if (item) {
            return;
        }
        const defaultId = state.indexRef.current;
        const itemId = localId || (elemProps['data-has-children'] ? `${state.id}-` : '') + String(defaultId);
        // TODO: Better lookup that using `items.find`. We need a more generic collection to handle seeing if an item already exists
        // bail early if item already exists. This happens if items were already provided.
        if (state.items.find(item => item.id === itemId)) {
            return;
        }
        const registeredItem = {
            id: itemId,
            textValue: elemProps['data-text']
                ? elemProps['data-text']
                : typeof elemProps.children === 'string'
                    ? elemProps.children
                    : '',
        };
        events.registerItem(registeredItem);
        setLocalId(itemId);
        return () => {
            events.unregisterItem({ id: itemId });
        };
    });
    return {
        ref: elementRef,
        'data-id': localId,
        disabled: elemProps.disabled || state.nonInteractiveIds.includes(localId) ? true : undefined,
        'aria-setsize': virtual ? state.UNSTABLE_virtual.options.count : undefined,
        'aria-posinset': virtual ? item.index + 1 : undefined,
        'data-index': virtual ? item.index : undefined,
        style,
        id: slugify(`${state.id}-${localId}`),
    };
});