fannypack-v5
Version:
An accessible, composable, and friendly React UI Kit
295 lines (284 loc) • 9.95 kB
JavaScript
import { useState, useCallback, createElement as createElement$1, Fragment } from 'react';
import '../Provider/ThemeContext.js';
import 'classnames';
import 'emotion';
import '@emotion/core';
import 'emotion-theming';
import '@emotion/styled';
import '../utils/useTheme.js';
import { d as _objectWithoutPropertiesLoose, _ as _objectSpread2, c as _extends } from '../chunk-0c448560.js';
import 'lodash/kebabCase';
import 'tinycolor2';
import '../utils/isFunction.js';
import '../utils/get.js';
import '../utils/theme.js';
import '../utils/omit.js';
import '../utils/pick.js';
import { omitCSSProps, pickCSSProps } from '../utils/cssProps.js';
import '../utils/useLocalStorage.js';
import '../Provider/ColorModeContext.js';
import '../utils/useColorMode.js';
import '../utils/useStyle.js';
import '../utils/omitBy.js';
import '../utils/useDefaultProps.js';
import '../utils/useDebounce.js';
import 'lodash/uniq';
import { useClassName } from '../utils/useClassName.js';
import '../utils/useBreakpoint.js';
import '../utils/uniqueId.js';
import '../utils/times.js';
import '../utils/parseIcons.js';
import '../utils/colors.js';
import '../utils/palette.js';
import '../utils/mergeRefs.js';
import 'deepmerge';
import 'lodash/set';
import '../utils/applyTheme.js';
import '../utils/bindFns.js';
import { createComponent } from '../utils/createComponent.js';
import { createElement } from '../utils/createElement.js';
import { createHook } from '../utils/createHook.js';
import '../utils/forwardRefWithUse.js';
import '../utils/fieldAdaptors.js';
import '@emotion/is-prop-valid';
import '../utils/htmlProps.js';
import '../utils/OutsideClickHandler.js';
import '../theme/palette.js';
import { Box } from 'reakit';
import '../Button/styles-7847dc2c.js';
import ConditionalWrap from 'conditional-wrap';
import '../Box/styles-579aeb3a.js';
import { Box as Box$1 } from '../Box/Box.js';
import '../Flex/styles-53e15538.js';
import '../Flex/Flex.js';
import '../Icon/styles-ca55138b.js';
import { Icon } from '../Icon/Icon.js';
import '../Text/styles-00cf45ec.js';
import '../Text/Text.js';
import '../Spinner/styles-d3bec5e2.js';
import { Spinner } from '../Spinner/Spinner.js';
import '../Button/Button.js';
import 'reakit/VisuallyHidden';
import '../Button/ButtonClose.js';
import '../Button/index.js';
import '../FieldWrapper/styles-406ca84b.js';
import '../Card/styles-95a1c511.js';
import '../Card/Card.js';
import '../Card/index.js';
import '../Disclosure/styles-05d33dce.js';
import '../Disclosure/DisclosureState.js';
import '../Disclosure/Disclosure.js';
import '../Disclosure/DisclosureContent.js';
import '../Disclosure/index.js';
import '../Label/styles-d69a783d.js';
import '../Label/Label.js';
import { FieldWrapper } from '../FieldWrapper/FieldWrapper.js';
import '../Group/styles-8b5ad05e.js';
import { Group } from '../Group/Group.js';
import { a as SelectWrapper, b as SelectIcon, c as SelectSpinner, S as Select$1, d as SelectField$1 } from './styles-cd97f33e.js';
var useProps = createHook(function (props, _ref) {
var themeKey = _ref.themeKey,
themeKeyOverride = _ref.themeKeyOverride;
var disabled = props.disabled,
isLoading = props.isLoading,
isRequired = props.isRequired,
onChange = props.onChange,
options = props.options,
_placeholder = props.placeholder,
state = props.state,
restProps = _objectWithoutPropertiesLoose(props, ["disabled", "isLoading", "isRequired", "onChange", "options", "placeholder", "state"]);
var placeholder = _placeholder;
if (isLoading && options.length === 0) {
placeholder = 'Loading...';
}
var _React$useState = useState(Boolean(placeholder)),
isPlaceholderSelected = _React$useState[0],
setIsPlaceholderSelected = _React$useState[1];
var handleChange = useCallback(function (e) {
setIsPlaceholderSelected(false);
onChange && onChange(e);
}, [onChange]);
var wrapperClassName = useClassName({
style: SelectWrapper,
styleProps: props,
themeKey: themeKey,
themeKeyOverride: themeKeyOverride,
themeKeySuffix: 'Wrapper',
prevClassName: restProps.className
});
var iconClassName = useClassName({
style: SelectIcon,
styleProps: props,
themeKey: themeKey,
themeKeyOverride: themeKeyOverride,
themeKeySuffix: 'Icon'
});
var spinnerClassName = useClassName({
style: SelectSpinner,
styleProps: props,
themeKey: themeKey,
themeKeyOverride: themeKeyOverride,
themeKeySuffix: 'Spinner'
});
var boxProps = Box$1.useProps(_objectSpread2(_objectSpread2({}, omitCSSProps(restProps)), {}, {
className: undefined,
wrapElement: function wrapElement(children) {
return /*#__PURE__*/createElement$1(Box$1, _extends({
className: wrapperClassName
}, pickCSSProps(props)), children, isLoading ? /*#__PURE__*/createElement$1(Spinner, {
className: spinnerClassName,
color: "text"
}) : /*#__PURE__*/createElement$1(Icon, {
className: iconClassName,
icon: "chevron-down"
}));
}
}));
var className = useClassName({
style: Select$1,
styleProps: _objectSpread2(_objectSpread2({}, props), {}, {
isPlaceholderSelected: isPlaceholderSelected
}),
themeKey: themeKey,
themeKeyOverride: themeKeyOverride,
prevClassName: boxProps.className
});
return _objectSpread2(_objectSpread2({}, boxProps), {}, {
className: className,
'aria-invalid': state === 'danger',
'aria-required': isRequired,
disabled: disabled,
onChange: handleChange,
children: /*#__PURE__*/createElement$1(Fragment, null, placeholder && /*#__PURE__*/createElement$1("option", {
disabled: typeof restProps.value !== 'undefined',
value: ""
}, placeholder), options.map(function (option, i) {
return /*#__PURE__*/createElement$1("option", {
key: i // eslint-disable-line
,
disabled: disabled || option.disabled,
value: option.value
}, option.label);
}))
});
}, {
themeKey: 'Select'
});
var Select = createComponent(function (props) {
var selectProps = useProps(props);
return createElement({
children: props.children,
component: Box,
use: props.use,
htmlProps: selectProps
});
}, {
attach: {
useProps: useProps,
displayName: 'Select'
},
defaultProps: {
use: 'select'
},
themeKey: 'Select'
}); ////////////////////////////////////////////////////////////////
var useSelectFieldProps = createHook(function (props, _ref2) {
var themeKey = _ref2.themeKey,
themeKeyOverride = _ref2.themeKeyOverride;
var addonAfter = props.addonAfter,
addonBefore = props.addonBefore,
children = props.children,
autoFocus = props.autoFocus,
defaultValue = props.defaultValue,
description = props.description,
disabled = props.disabled,
hint = props.hint,
selectProps = props.selectProps,
isLoading = props.isLoading,
isOptional = props.isOptional,
isRequired = props.isRequired,
orientation = props.orientation,
label = props.label,
name = props.name,
options = props.options,
size = props.size,
placeholder = props.placeholder,
state = props.state,
tooltip = props.tooltip,
tooltipTriggerComponent = props.tooltipTriggerComponent,
value = props.value,
onBlur = props.onBlur,
onChange = props.onChange,
onFocus = props.onFocus,
overrides = props.overrides,
validationText = props.validationText,
restProps = _objectWithoutPropertiesLoose(props, ["addonAfter", "addonBefore", "children", "autoFocus", "defaultValue", "description", "disabled", "hint", "selectProps", "isLoading", "isOptional", "isRequired", "orientation", "label", "name", "options", "size", "placeholder", "state", "tooltip", "tooltipTriggerComponent", "value", "onBlur", "onChange", "onFocus", "overrides", "validationText"]);
var boxProps = Box$1.useProps(restProps);
var className = useClassName({
style: SelectField$1,
styleProps: props,
themeKey: themeKey,
themeKeyOverride: themeKeyOverride,
prevClassName: boxProps.className
});
return _objectSpread2(_objectSpread2({}, boxProps), {}, {
className: className,
children: /*#__PURE__*/createElement$1(FieldWrapper, {
description: description,
hint: hint,
isOptional: isOptional,
isRequired: isRequired,
label: label,
overrides: overrides,
state: state,
tooltip: tooltip,
tooltipTriggerComponent: tooltipTriggerComponent,
validationText: validationText
}, function (_ref3) {
var elementProps = _ref3.elementProps;
return /*#__PURE__*/createElement$1(ConditionalWrap, {
condition: addonBefore || addonAfter,
wrap: function wrap(children) {
return /*#__PURE__*/createElement$1(Group, {
orientation: orientation,
overrides: overrides
}, children);
}
}, addonBefore, /*#__PURE__*/createElement$1(Select, _extends({
autoFocus: autoFocus,
defaultValue: defaultValue,
disabled: disabled,
isLoading: isLoading,
isRequired: isRequired,
name: name,
size: size,
options: options,
placeholder: placeholder,
state: state,
value: value,
onBlur: onBlur,
onChange: onChange,
onFocus: onFocus,
overrides: overrides
}, elementProps, selectProps)), addonAfter);
})
});
}, {
themeKey: 'SelectField'
});
var SelectField = createComponent(function (props) {
var SelectFieldProps = useSelectFieldProps(props);
return createElement({
children: props.children,
component: Box,
use: props.use,
htmlProps: SelectFieldProps
});
}, {
attach: {
useProps: useProps,
displayName: 'SelectField'
},
themeKey: 'SelectField'
});
export { Select, SelectField };