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

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

{"version":3,"file":"use-native-select.cjs","names":["useFieldProps","computedChildren: ReactNode","rest","items","index","label","computedChildren","getRootProps: PropGetter","props","mergeRefs"],"sources":["../../../../src/components/native-select/use-native-select.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { cloneElement, useCallback, useMemo } from \"react\"\nimport { ariaAttr, handlerAll, mergeRefs } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface NativeSelectSharedItem\n  extends Omit<HTMLProps<\"option\">, \"children\" | \"label\" | \"value\"> {\n  label: string\n}\n\ninterface NativeSelectItemWithValue extends NativeSelectSharedItem {\n  value?: HTMLProps<\"option\">[\"value\"]\n}\n\ninterface NativeSelectItemWithItems extends NativeSelectSharedItem {\n  items: NativeSelectItemWithValue[]\n}\n\nexport type NativeSelectItem =\n  | NativeSelectItemWithItems\n  | NativeSelectItemWithValue\n\nexport interface UseNativeSelectProps extends HTMLProps<\"select\">, FieldProps {\n  /**\n   * If `true`, include placeholder in options.\n   *\n   * @default true\n   */\n  includePlaceholder?: boolean\n  /**\n   * If provided, generate options based on items.\n   *\n   * @default []\n   */\n  items?: NativeSelectItem[]\n  /**\n   * The placeholder for select.\n   */\n  placeholder?: string\n}\n\nexport const useNativeSelect = (props: UseNativeSelectProps = {}) => {\n  const {\n    props: {\n      children,\n      disabled,\n      includePlaceholder = true,\n      items = [],\n      placeholder,\n      readOnly,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const interactive = !(readOnly || disabled)\n\n  const computedChildren = useMemo(() => {\n    let computedChildren: ReactNode = null\n\n    if (children) {\n      computedChildren = children\n    } else if (items.length) {\n      computedChildren = items.map((item, index) => {\n        if (\"items\" in item) {\n          const { items = [], label, ...rest } = item\n\n          return cloneElement(<optgroup />, {\n            key: index,\n            children: items.map(({ label, ...rest }, index) =>\n              cloneElement(<option />, {\n                key: index,\n                children: label,\n                ...rest,\n              }),\n            ),\n            label,\n            ...rest,\n          })\n        } else {\n          const { label, ...rest } = item\n\n          return cloneElement(<option />, {\n            key: index,\n            children: label,\n            ...rest,\n          })\n        }\n      })\n    }\n\n    return (\n      <>\n        {placeholder ? (\n          <option hidden={!includePlaceholder} value=\"\">\n            {placeholder}\n          </option>\n        ) : null}\n\n        {computedChildren}\n      </>\n    )\n  }, [children, items, placeholder, includePlaceholder])\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({ ...dataProps, ...props }),\n    [dataProps],\n  )\n\n  const getFieldProps: PropGetter<\"select\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      disabled,\n      readOnly,\n      tabIndex: interactive ? undefined : -1,\n      ...ariaProps,\n      ...dataProps,\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-label\": placeholder,\n      ...rest,\n      ...props,\n      ref: mergeRefs(ref, rest.ref),\n      children: props.children ?? computedChildren,\n      onBlur: handlerAll(eventProps.onBlur, props.onBlur),\n      onFocus: handlerAll(eventProps.onFocus, props.onFocus),\n    }),\n    [\n      interactive,\n      ariaProps,\n      computedChildren,\n      dataProps,\n      eventProps,\n      rest,\n      placeholder,\n      disabled,\n      readOnly,\n    ],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props) => ({ ...dataProps, ...props }),\n    [dataProps],\n  )\n\n  return { getFieldProps, getIconProps, getRootProps }\n}\n\nexport type UseNativeSelectReturn = ReturnType<typeof useNativeSelect>\n"],"mappings":";;;;;;;;;;;;;AA6CA,MAAa,mBAAmB,QAA8B,EAAE,KAAK;CACnE,MAAM,EACJ,OAAO,EACL,UACA,UACA,qBAAqB,MACrB,QAAQ,EAAE,EACV,aACA,SACA,GAAG,QAEL,WACA,WACA,eACEA,sCAAc,MAAM;CACxB,MAAM,cAAc,EAAE,YAAY;CAElC,MAAM,4CAAiC;EACrC,IAAIC,qBAA8B;AAElC,MAAI,SACF,sBAAmB;WACV,MAAM,OACf,sBAAmB,MAAM,KAAK,MAAM,UAAU;AAC5C,OAAI,WAAW,MAAM;IACnB,MAAM,EAAE,iBAAQ,EAAE,EAAE,MAAO,GAAGC,WAAS;AAEvC,mCAAoB,2CAAC,eAAW,EAAE;KAChC,KAAK;KACL,UAAUC,QAAM,KAAK,EAAE,eAAO,GAAGD,UAAQ,oCAC1B,2CAAC,aAAS,EAAE;MACvB,KAAKE;MACL,UAAUC;MACV,GAAGH;MACJ,CAAC,CACH;KACD;KACA,GAAGA;KACJ,CAAC;UACG;IACL,MAAM,EAAE,MAAO,GAAGA,WAAS;AAE3B,mCAAoB,2CAAC,aAAS,EAAE;KAC9B,KAAK;KACL,UAAU;KACV,GAAGA;KACJ,CAAC;;IAEJ;AAGJ,SACE,qFACG,cACC,2CAAC;GAAO,QAAQ,CAAC;GAAoB,OAAM;aACxC;IACM,GACP,MAEHI,sBACA;IAEJ;EAAC;EAAU;EAAO;EAAa;EAAmB,CAAC;CAEtD,MAAMC,uCACH,aAAW;EAAE,GAAG;EAAW,GAAGC;EAAO,GACtC,CAAC,UAAU,CACZ;AAoCD,QAAO;EAAE,uCAjCN,EAAE,IAAK,GAAGA,YAAU,EAAE,MAAM;GAC3B;GACA;GACA,UAAU,cAAc,SAAY;GACpC,GAAG;GACH,GAAG;GACH,iEAA0B,CAAC,YAAY;GACvC,cAAc;GACd,GAAG;GACH,GAAGA;GACH,KAAKC,sBAAU,KAAK,KAAK,IAAI;GAC7B,UAAUD,QAAM,YAAY;GAC5B,0DAAmB,WAAW,QAAQA,QAAM,OAAO;GACnD,2DAAoB,WAAW,SAASA,QAAM,QAAQ;GACvD,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAOuB,sCAJrB,aAAW;GAAE,GAAG;GAAW,GAAGA;GAAO,GACtC,CAAC,UAAU,CACZ;EAEqC;EAAc"}