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

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

{"version":3,"file":"native-select.cjs","names":["createSlotComponent","nativeSelectStyle","useGroupItemProps","useNativeSelect","useInputBorder","useInputPropsContext","ChevronDownIcon"],"sources":["../../../../src/components/native-select/native-select.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { NativeSelectStyle } from \"./native-select.style\"\nimport type { UseNativeSelectProps } from \"./use-native-select\"\nimport { createSlotComponent } from \"../../core\"\nimport { useGroupItemProps } from \"../group\"\nimport { ChevronDownIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { nativeSelectStyle } from \"./native-select.style\"\nimport { useNativeSelect } from \"./use-native-select\"\n\nexport interface NativeSelectRootProps\n  extends Omit<HTMLStyledProps<\"select\">, \"size\">,\n    UseNativeSelectProps,\n    ThemeProps<NativeSelectStyle>,\n    FieldProps,\n    UseInputBorderProps {\n  /**\n   * The icon to be used in the select.\n   */\n  icon?: ReactNode\n  /**\n   * The props for the end element.\n   */\n  elementProps?: InputGroup.ElementProps\n  /**\n   * Props for icon element.\n   */\n  iconProps?: NativeSelectIconProps\n  /**\n   * Props for root element.\n   */\n  rootProps?: InputGroup.RootProps\n}\n\nconst {\n  component,\n  PropsContext: NativeSelectPropsContext,\n  usePropsContext: useNativeSelectPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<NativeSelectRootProps, NativeSelectStyle>(\n  \"native-select\",\n  nativeSelectStyle,\n)\n\nexport { NativeSelectPropsContext, useNativeSelectPropsContext }\n\n/**\n * `NativeSelect` is a component used for allowing users to select one option from a list. It displays a native dropdown list provided by the browser (user agent).\n *\n * @see https://yamada-ui.com/docs/components/native-select\n */\nexport const NativeSelectRoot = withProvider<\"select\", NativeSelectRootProps>(\n  (props) => {\n    const [\n      groupItemProps,\n      {\n        className,\n        css,\n        colorScheme,\n        errorBorderColor,\n        focusBorderColor,\n        icon,\n        elementProps,\n        iconProps,\n        rootProps,\n        ...rest\n      },\n    ] = useGroupItemProps(props)\n    const { getFieldProps, getIconProps, getRootProps } = useNativeSelect(rest)\n    const varProps = useInputBorder({\n      errorBorderColor,\n      focusBorderColor,\n    })\n\n    return (\n      <InputGroup.Root\n        className={className}\n        css={css}\n        colorScheme={colorScheme}\n        {...getRootProps({ ...groupItemProps, ...rootProps })}\n      >\n        <NativeSelectField {...getFieldProps(varProps)} />\n\n        <InputGroup.Element {...elementProps}>\n          <NativeSelectIcon icon={icon} {...getIconProps(iconProps)} />\n        </InputGroup.Element>\n      </InputGroup.Root>\n    )\n  },\n  \"root\",\n)((props) => {\n  const context = useInputPropsContext()\n\n  return { ...context, ...props }\n})\n\ninterface NativeSelectFieldProps extends HTMLStyledProps<\"select\"> {}\n\nconst NativeSelectField = withContext<\"select\", NativeSelectFieldProps>(\n  \"select\",\n  \"field\",\n)({ \"data-group-propagate\": \"\" })\n\ninterface NativeSelectIconProps extends HTMLStyledProps {\n  icon?: ReactNode\n}\n\nconst NativeSelectIcon = withContext<\"div\", NativeSelectIconProps>(\n  \"div\",\n  \"icon\",\n)(undefined, ({ children, icon, ...rest }) => ({\n  children: icon || children || <ChevronDownIcon />,\n  ...rest,\n}))\n\nexport interface NativeSelectGroupProps extends HTMLProps<\"optgroup\"> {}\n\nexport const NativeSelectGroup = component<\"optgroup\", NativeSelectGroupProps>(\n  \"optgroup\",\n  \"group\",\n)()\n\nexport interface NativeSelectOptionProps extends HTMLProps<\"option\"> {}\n\nexport const NativeSelectOption = component<\"option\", NativeSelectOptionProps>(\n  \"option\",\n  \"option\",\n)()\n\nexport interface NativeSelectSeparatorProps extends HTMLProps<\"hr\"> {}\n\nexport const NativeSelectSeparator = component<\n  \"hr\",\n  NativeSelectSeparatorProps\n>(\"hr\", \"separator\")()\n"],"mappings":";;;;;;;;;;;;;;;;;AAuCA,MAAM,EACJ,WACA,cAAc,0BACd,iBAAiB,6BACjB,aACA,iBACEA,6CACF,iBACAC,8CACD;;;;;;AASD,MAAa,mBAAmB,cAC7B,UAAU;CACT,MAAM,CACJ,gBACA,EACE,WACA,KACA,aACA,kBACA,kBACA,MACA,cACA,WACA,UACA,GAAG,UAEHC,oCAAkB,MAAM;CAC5B,MAAM,EAAE,eAAe,cAAc,iBAAiBC,0CAAgB,KAAK;CAC3E,MAAM,WAAWC,wCAAe;EAC9B;EACA;EACD,CAAC;AAEF,QACE;EACa;EACN;EACQ;EACb,GAAI,aAAa;GAAE,GAAG;GAAgB,GAAG;GAAW,CAAC;aAErD,2CAAC,qBAAkB,GAAI,cAAc,SAAS,GAAI,EAElD;GAAoB,GAAI;aACtB,2CAAC;IAAuB;IAAM,GAAI,aAAa,UAAU;KAAI;IAC1C;GACL;GAGtB,OACD,EAAE,UAAU;AAGX,QAAO;EAAE,GAFOC,oCAAsB;EAEjB,GAAG;EAAO;EAC/B;AAIF,MAAM,oBAAoB,YACxB,UACA,QACD,CAAC,EAAE,wBAAwB,IAAI,CAAC;AAMjC,MAAM,mBAAmB,YACvB,OACA,OACD,CAAC,SAAY,EAAE,UAAU,KAAM,GAAG,YAAY;CAC7C,UAAU,QAAQ,YAAY,2CAACC,8CAAkB;CACjD,GAAG;CACJ,EAAE;AAIH,MAAa,oBAAoB,UAC/B,YACA,QACD,EAAE;AAIH,MAAa,qBAAqB,UAChC,UACA,SACD,EAAE;AAIH,MAAa,wBAAwB,UAGnC,MAAM,YAAY,EAAE"}