@chakra-ui/react-use-controllable-state/dist/index.mjs.map

A Quick description of the component

{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { useMemo, useState } from \"react\"\nimport { useCallbackRef } from \"@chakra-ui/react-use-callback-ref\"\n\n/**\n * Given a prop value and state value, the useControllableProp hook is used to determine whether a component is controlled or uncontrolled, and also returns the computed value.\n *\n * @see Docs https://chakra-ui.com/docs/hooks/use-controllable#usecontrollableprop\n */\nexport function useControllableProp<T>(prop: T | undefined, state: T) {\n  const controlled = typeof prop !== \"undefined\"\n  const value = controlled ? prop : state\n  return useMemo<[boolean, T]>(() => [controlled, value], [controlled, value])\n}\n\nexport interface UseControllableStateProps<T> {\n  value?: T\n  defaultValue?: T | (() => T)\n  onChange?: (value: T) => void\n  shouldUpdate?: (prev: T, next: T) => boolean\n}\n\n/**\n * The `useControllableState` hook returns the state and function that updates the state, just like React.useState does.\n *\n * @see Docs https://chakra-ui.com/docs/hooks/use-controllable#usecontrollablestate\n */\nexport function useControllableState<T>(props: UseControllableStateProps<T>) {\n  const {\n    value: valueProp,\n    defaultValue,\n    onChange,\n    shouldUpdate = (prev, next) => prev !== next,\n  } = props\n\n  const onChangeProp = useCallbackRef(onChange)\n  const shouldUpdateProp = useCallbackRef(shouldUpdate)\n\n  const [uncontrolledState, setUncontrolledState] = useState(defaultValue as T)\n  const controlled = valueProp !== undefined\n  const value = controlled ? valueProp : uncontrolledState\n\n  const setValue = useCallbackRef(\n    (next: React.SetStateAction<T>) => {\n      const setter = next as (prevState?: T) => T\n      const nextValue = typeof next === \"function\" ? setter(value) : next\n\n      if (!shouldUpdateProp(value, nextValue)) {\n        return\n      }\n\n      if (!controlled) {\n        setUncontrolledState(nextValue)\n      }\n\n      onChangeProp(nextValue)\n    },\n    [controlled, onChangeProp, value, shouldUpdateProp],\n  )\n\n  return [value, setValue] as [T, React.Dispatch<React.SetStateAction<T>>]\n}\n"],"mappings":";;;AAAA,SAAS,SAAS,gBAAgB;AAClC,SAAS,sBAAsB;AAOxB,SAAS,oBAAuB,MAAqB,OAAU;AACpE,QAAM,aAAa,OAAO,SAAS;AACnC,QAAM,QAAQ,aAAa,OAAO;AAClC,SAAO,QAAsB,MAAM,CAAC,YAAY,KAAK,GAAG,CAAC,YAAY,KAAK,CAAC;AAC7E;AAcO,SAAS,qBAAwB,OAAqC;AAC3E,QAAM;AAAA,IACJ,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,eAAe,CAAC,MAAM,SAAS,SAAS;AAAA,EAC1C,IAAI;AAEJ,QAAM,eAAe,eAAe,QAAQ;AAC5C,QAAM,mBAAmB,eAAe,YAAY;AAEpD,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,YAAiB;AAC5E,QAAM,aAAa,cAAc;AACjC,QAAM,QAAQ,aAAa,YAAY;AAEvC,QAAM,WAAW;AAAA,IACf,CAAC,SAAkC;AACjC,YAAM,SAAS;AACf,YAAM,YAAY,OAAO,SAAS,aAAa,OAAO,KAAK,IAAI;AAE/D,UAAI,CAAC,iBAAiB,OAAO,SAAS,GAAG;AACvC;AAAA,MACF;AAEA,UAAI,CAAC,YAAY;AACf,6BAAqB,SAAS;AAAA,MAChC;AAEA,mBAAa,SAAS;AAAA,IACxB;AAAA,IACA,CAAC,YAAY,cAAc,OAAO,gBAAgB;AAAA,EACpD;AAEA,SAAO,CAAC,OAAO,QAAQ;AACzB;","names":[]}