@yamada-ui/react/dist/cjs/components/steps/use-steps.cjs.map

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

{"version":3,"file":"use-steps.cjs","names":["createDescendants","createContext","useControllableState","indexProp","index","getRootProps: PropGetter","mergeRefs","getListProps: PropGetter<\"ol\">","getContentProps: PropGetter<\"div\", { index?: number }>","getPrevTriggerProps: PropGetter<\"button\">","useEnvironment","getRootProps: PropGetter<\"li\">","getTitleProps: PropGetter<\"h3\">"],"sources":["../../../../src/components/steps/use-steps.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport { useCallback, useId } from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n  createContext,\n  cx,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  setAttribute,\n  useSafeLayoutEffect,\n} from \"../../utils\"\n\nexport type StepStatusScheme = \"complete\" | \"current\" | \"incomplete\"\n\nconst {\n  DescendantsContext: StepsDescendantsContext,\n  useDescendant: useStepsDescendant,\n  useDescendants: useStepsDescendants,\n} = createDescendants<HTMLLIElement>()\n\nexport { StepsDescendantsContext, useStepsDescendant, useStepsDescendants }\n\ninterface StepsContext\n  extends Omit<UseStepsReturn, \"descendants\" | \"getRootProps\"> {}\n\nconst [StepsContext, useStepsContext] = createContext<StepsContext>({\n  name: \"StepsContext\",\n})\n\nexport { StepsContext, useStepsContext }\n\ninterface StepsItemContext extends Omit<UseStepsItemReturn, \"getRootProps\"> {}\n\nconst [StepsItemContext, useStepsItemContext] = createContext<StepsItemContext>(\n  {\n    name: \"StepsItemContext\",\n  },\n)\n\nexport { StepsItemContext, useStepsItemContext }\n\nexport interface UseStepsProps extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The total number of steps.\n   */\n  count?: number\n  /**\n   * The initial index of the active step.\n   *\n   * @default 0\n   */\n  defaultIndex?: number\n  /**\n   * The index of the active step.\n   */\n  index?: number\n  /**\n   * The orientation of the steps.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * The callback function that is called when the active step index is changed.\n   */\n  onChange?: (index: number) => void\n}\n\nexport const useSteps = ({\n  count = 0,\n  defaultIndex = 0,\n  index: indexProp,\n  orientation = \"horizontal\",\n  onChange,\n  ...rest\n}: UseStepsProps = {}) => {\n  const descendants = useStepsDescendants()\n  const [index, setIndex] = useControllableState({\n    defaultValue: defaultIndex,\n    value: indexProp,\n    onChange,\n  })\n  const id = useId()\n\n  const getStatus = useCallback(\n    (indexProp: number): StepStatusScheme => {\n      if (indexProp < index) {\n        return \"complete\"\n      } else if (indexProp > index) {\n        return \"incomplete\"\n      } else {\n        return \"current\"\n      }\n    },\n    [index],\n  )\n\n  const onPrev = useCallback(\n    () => setIndex((index) => Math.max(0, index - 1)),\n    [setIndex],\n  )\n\n  const onNext = useCallback(() => {\n    setIndex((index) => Math.min(count, index + 1))\n  }, [count, setIndex])\n\n  const getRootProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...rest,\n      ...props,\n      ref: mergeRefs(ref, rest.ref),\n    }),\n    [rest],\n  )\n\n  const getListProps: PropGetter<\"ol\"> = useCallback(\n    (props) => {\n      return {\n        \"data-orientation\": orientation,\n        ...props,\n      }\n    },\n    [orientation],\n  )\n\n  const getContentProps: PropGetter<\"div\", { index?: number }> = useCallback(\n    ({ index: indexProp = count, ...props } = {}) => ({\n      id: `${id}-${indexProp}`,\n      hidden: indexProp !== index,\n      tabIndex: 0,\n      ...props,\n    }),\n    [count, id, index],\n  )\n\n  const getPrevTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      disabled: index === 0,\n      ...props,\n      onClick: handlerAll(props.onClick, onPrev),\n    }),\n    [onPrev, index],\n  )\n\n  const getNextTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => {\n      return {\n        disabled: count <= index,\n        ...props,\n        onClick: handlerAll(props.onClick, onNext),\n      }\n    },\n    [count, index, onNext],\n  )\n\n  return {\n    id,\n    count,\n    descendants,\n    getStatus,\n    index,\n    orientation,\n    setIndex,\n    getContentProps,\n    getListProps,\n    getNextTriggerProps,\n    getPrevTriggerProps,\n    getRootProps,\n    onNext,\n    onPrev,\n  }\n}\n\nexport type UseStepsReturn = ReturnType<typeof useSteps>\n\nexport interface UseStepsItemProps extends HTMLProps<\"li\"> {\n  /**\n   * The index of the step.\n   */\n  index: number\n}\n\nexport const useStepsItem = ({\n  \"aria-labelledby\": ariaLabelledbyProp,\n  index,\n  ...rest\n}: UseStepsItemProps) => {\n  const { descendants, register } = useStepsDescendant()\n  const { id, getStatus, orientation } = useStepsContext()\n  const status = getStatus(index)\n  const current = status === \"current\"\n  const first = index === 0\n  const last = index === descendants.lastValue()?.index\n  const statusDataAttr = `data-${status}`\n  const { getDocument } = useEnvironment()\n\n  useSafeLayoutEffect(() => {\n    const el = descendants.value(index)?.node\n    const hasContent = !!getDocument()?.getElementById(`${id}-${index}`)\n\n    if (el && hasContent) setAttribute(el, \"aria-labelledby\", `${id}-${index}`)\n  }, [descendants, getDocument, id, index])\n\n  const getRootProps: PropGetter<\"li\"> = useCallback(\n    ({ ref, \"aria-labelledby\": ariaLabelledby, ...props } = {}) => {\n      return {\n        \"aria-current\": current ? \"step\" : undefined,\n        \"aria-labelledby\": cx(ariaLabelledbyProp, ariaLabelledby),\n        \"data-orientation\": orientation,\n        [statusDataAttr]: dataAttr(true),\n        ...rest,\n        ...props,\n        ref: mergeRefs(ref, register),\n      }\n    },\n    [ariaLabelledbyProp, current, orientation, statusDataAttr, rest, register],\n  )\n\n  const getTitleProps: PropGetter<\"h3\"> = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getDescriptionProps: PropGetter<\"p\"> = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getIndicatorProps: PropGetter = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getSeparatorProps: PropGetter = useCallback(\n    (props) => ({\n      \"data-orientation\": orientation,\n      role: \"separator\",\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [orientation, statusDataAttr],\n  )\n\n  return {\n    first,\n    index,\n    last,\n    status,\n    getDescriptionProps,\n    getIndicatorProps,\n    getRootProps,\n    getSeparatorProps,\n    getTitleProps,\n  }\n}\n\nexport type UseStepsItemReturn = ReturnType<typeof useStepsItem>\n"],"mappings":"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"}