@wordpress/components
Version:
UI components for WordPress.
92 lines (91 loc) • 2.59 kB
JavaScript
// packages/components/src/circular-option-picker/circular-option-picker-option.tsx
import clsx from "clsx";
import { useInstanceId } from "@wordpress/compose";
import { forwardRef, useContext, useEffect } from "@wordpress/element";
import { Icon, check } from "@wordpress/icons";
import { CircularOptionPickerContext } from "./circular-option-picker-context";
import Button from "../button";
import { Composite } from "../composite";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function UnforwardedOptionAsButton(props, forwardedRef) {
const {
isPressed,
label,
...additionalProps
} = props;
return /* @__PURE__ */ _jsx(Button, {
...additionalProps,
"aria-pressed": isPressed,
ref: forwardedRef,
label
});
}
var OptionAsButton = forwardRef(UnforwardedOptionAsButton);
function UnforwardedOptionAsOption(props, forwardedRef) {
const {
id,
isSelected,
label,
...additionalProps
} = props;
const {
setActiveId,
activeId
} = useContext(CircularOptionPickerContext);
useEffect(() => {
if (isSelected && !activeId) {
window.setTimeout(() => setActiveId?.(id), 0);
}
}, [isSelected, setActiveId, activeId, id]);
return /* @__PURE__ */ _jsx(Composite.Item, {
render: /* @__PURE__ */ _jsx(Button, {
...additionalProps,
role: "option",
"aria-selected": !!isSelected,
ref: forwardedRef,
label
}),
id
});
}
var OptionAsOption = forwardRef(UnforwardedOptionAsOption);
function Option({
className,
isSelected,
selectedIconProps = {},
tooltipText,
...additionalProps
}) {
const {
baseId,
setActiveId
} = useContext(CircularOptionPickerContext);
const id = useInstanceId(Option, baseId || "components-circular-option-picker__option");
const commonProps = {
id,
className: "components-circular-option-picker__option",
__next40pxDefaultSize: true,
...additionalProps
};
const isListbox = setActiveId !== void 0;
const optionControl = isListbox ? /* @__PURE__ */ _jsx(OptionAsOption, {
...commonProps,
label: tooltipText,
isSelected
}) : /* @__PURE__ */ _jsx(OptionAsButton, {
...commonProps,
label: tooltipText,
isPressed: isSelected
});
return /* @__PURE__ */ _jsxs("div", {
className: clsx(className, "components-circular-option-picker__option-wrapper"),
children: [optionControl, isSelected && /* @__PURE__ */ _jsx(Icon, {
icon: check,
...selectedIconProps
})]
});
}
export {
Option
};
//# sourceMappingURL=circular-option-picker-option.js.map