@yamada-ui/rating/dist/use-rating-item.js

Yamada UI rating component

"use client"
"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/use-rating-item.ts
var use_rating_item_exports = {};
__export(use_rating_item_exports, {
  useRatingItem: () => useRatingItem
});
module.exports = __toCommonJS(use_rating_item_exports);
var import_use_focus_visible = require("@yamada-ui/use-focus-visible");
var import_utils2 = require("@yamada-ui/utils");
var import_react = require("react");

// src/rating-context.ts
var import_utils = require("@yamada-ui/utils");
var [RatingProvider, useRatingContext] = (0, import_utils.createContext)({
  name: "RatingContext",
  errorMessage: `useRatingContext returned is 'undefined'. Seems you forgot to wrap the components in "<Rating />"`
});

// src/use-rating-item.ts
var useRatingItem = ({
  fractionValue,
  groupValue,
  value
}) => {
  const {
    id,
    name,
    highlightSelectedOnly,
    outside,
    resolvedValue,
    roundedValue,
    setHoveredValue,
    setValue,
    formControlProps
  } = useRatingContext();
  const {
    "aria-disabled": ariaDisabled,
    "aria-readonly": _ariaReadOnly,
    disabled,
    readOnly,
    ...omittedFormControlProps
  } = formControlProps;
  const [focused, setFocused] = (0, import_react.useState)(false);
  const [focusVisible, setFocusVisible] = (0, import_react.useState)(false);
  const active = value === resolvedValue;
  const checked = value === roundedValue;
  const filled = highlightSelectedOnly ? value === resolvedValue : value <= resolvedValue;
  const onBlur = (0, import_react.useCallback)(() => {
    setFocused(false);
    if (outside) setHoveredValue(-1);
  }, [outside, setHoveredValue]);
  const onInputChange = (0, import_react.useCallback)(
    (ev) => {
      if (readOnly || disabled) return;
      const value2 = parseFloat(ev.target.value);
      setHoveredValue(value2);
    },
    [disabled, readOnly, setHoveredValue]
  );
  const onChange = (0, import_react.useCallback)(
    (value2) => {
      if (readOnly || disabled) return;
      setValue(value2);
    },
    [disabled, readOnly, setValue]
  );
  const onMouseDown = (0, import_react.useCallback)(() => {
    if (readOnly || disabled) return;
    onChange(value);
  }, [disabled, onChange, readOnly, value]);
  const onTouchStart = (0, import_react.useCallback)(() => {
    if (readOnly || disabled) return;
    onChange(value);
  }, [disabled, onChange, readOnly, value]);
  const getItemProps = (0, import_react.useCallback)(
    (props = {}, ref = null) => {
      const zIndex = active ? 1 : -1;
      return {
        ref,
        htmlFor: `${id}-${groupValue}-${value}`,
        ...omittedFormControlProps,
        ...props,
        "data-active": (0, import_utils2.dataAttr)(active),
        "data-disabled": (0, import_utils2.dataAttr)(disabled),
        "data-filled": (0, import_utils2.dataAttr)(filled),
        "data-focus": (0, import_utils2.dataAttr)(focused),
        "data-focus-visible": (0, import_utils2.dataAttr)(focused && focusVisible),
        zIndex: fractionValue !== 1 ? zIndex : void 0,
        onMouseDown: (0, import_utils2.handlerAll)(onMouseDown, props.onMouseDown),
        onTouchStart: (0, import_utils2.handlerAll)(onTouchStart, props.onTouchStart)
      };
    },
    [
      disabled,
      omittedFormControlProps,
      fractionValue,
      groupValue,
      id,
      active,
      filled,
      focusVisible,
      focused,
      onMouseDown,
      onTouchStart,
      value
    ]
  );
  const getInputProps = (0, import_react.useCallback)(
    (props = {}, ref = null) => {
      return {
        ref,
        "aria-disabled": ariaDisabled,
        "aria-label": `${value}`,
        disabled,
        readOnly,
        ...omittedFormControlProps,
        ...props,
        id: `${id}-${groupValue}-${value}`,
        type: "radio",
        name,
        style: {
          border: "0px",
          clip: "rect(0px, 0px, 0px, 0px)",
          height: "1px",
          margin: "-1px",
          overflow: "hidden",
          padding: "0px",
          position: "absolute",
          whiteSpace: "nowrap",
          width: "1px"
        },
        "data-active": (0, import_utils2.dataAttr)(active),
        "data-checked": (0, import_utils2.dataAttr)(checked),
        checked,
        value,
        onBlur: (0, import_utils2.handlerAll)(onBlur, props.onBlur),
        onChange: (0, import_utils2.handlerAll)(onInputChange, props.onChange),
        onFocus: (0, import_utils2.handlerAll)(() => setFocused(true), props.onFocus),
        onKeyDown: (0, import_utils2.handlerAll)(
          (ev) => ev.key === " " ? onChange(value) : void 0,
          props.onKeyDown
        )
      };
    },
    [
      ariaDisabled,
      disabled,
      readOnly,
      value,
      omittedFormControlProps,
      id,
      groupValue,
      name,
      checked,
      onInputChange,
      onBlur,
      active,
      onChange
    ]
  );
  (0, import_react.useEffect)(() => {
    return (0, import_use_focus_visible.trackFocusVisible)(setFocusVisible);
  }, []);
  return {
    active,
    checked,
    filled,
    getInputProps,
    getItemProps
  };
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  useRatingItem
});
//# sourceMappingURL=use-rating-item.js.map