@workday/canvas-kit-preview-react/dist/commonjs/select/lib/SelectOption.js

Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SelectOption = void 0;
const React = __importStar(require("react"));
const common_1 = require("@workday/canvas-kit-react/common");
const tokens_1 = require("@workday/canvas-kit-react/tokens");
const optionPadding = 6;
const activeStyles = (theme) => {
    const activeBgColor = theme.canvas.palette.primary.main;
    return {
        backgroundColor: activeBgColor,
        color: (0, common_1.pickForegroundColor)(activeBgColor),
    };
};
const Option = (0, common_1.styled)('li')({
    ...tokens_1.type.levels.subtext.large,
    cursor: 'default',
    // Apply listStyle at the list item style to ensure it's styled properly
    // in Visual Testing States
    listStyle: 'none',
    // In case the content of the option is empty/undefined for some reason
    minHeight: tokens_1.type.levels.subtext.large.lineHeight,
    textAlign: 'left',
}, ({ 'aria-disabled': disabled, focused, interactive, theme }) => {
    if (disabled) {
        // If the option is disabled, return disabled styles...
        return {
            color: tokens_1.colors.licorice100,
        };
    }
    else if (focused) {
        // ...else if the option is focused, return focused styles...
        return {
            ...activeStyles(theme),
        };
    }
    else {
        // ...else return hover and selected (via aria-selected) styles
        const selectedBgColor = theme.canvas.palette.primary.lightest;
        const selectedStyles = {
            '&[aria-selected="true"]': {
                backgroundColor: selectedBgColor,
                color: (0, common_1.pickForegroundColor)(selectedBgColor),
            },
        };
        // Only display interactive (hover/active) styles if the option is interactive
        const interactiveStyles = interactive
            ? {
                '&:hover': {
                    backgroundColor: tokens_1.commonColors.hoverBackground,
                },
                '&:active, &:active[aria-selected="true"]': {
                    ...activeStyles(theme),
                },
            }
            : {};
        return {
            // Place selected styles after interactive styles to have selected styles
            // override interactive styles (subject to CSS specificity rules)
            ...interactiveStyles,
            ...selectedStyles,
        };
    }
}, ({ error }) => ({
    padding: `${optionPadding}px ${error === common_1.ErrorType.Alert ? optionPadding - 1 : optionPadding}px`,
}));
/**
 * @deprecated ⚠️ `SelectOption` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
 */
const SelectOption = ({ children, focused = false, interactive = true, optionRef, value, ...elemProps }) => {
    return (React.createElement(Option, { "data-value": value, focused: focused, interactive: interactive, ref: optionRef, role: "option", ...elemProps }, children));
};
exports.SelectOption = SelectOption;