fannypack-v5
Version:
An accessible, composable, and friendly React UI Kit
249 lines (241 loc) • 8.15 kB
JavaScript
import { createElement as createElement$1 } from 'react';
import '../Provider/ThemeContext.js';
import 'classnames';
import 'emotion';
import '@emotion/core';
import 'emotion-theming';
import '@emotion/styled';
import '../utils/useTheme.js';
import { _ as _objectSpread2, d as _objectWithoutPropertiesLoose, 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 '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/Icon.js';
import '../Text/styles-00cf45ec.js';
import '../Text/Text.js';
import '../Spinner/styles-d3bec5e2.js';
import '../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 { T as TextareaWrapper, a as Textarea$1, b as TextareaField$1 } from './styles-8128f75c.js';
var useProps = createHook(function (props, _ref) {
var themeKey = _ref.themeKey,
themeKeyOverride = _ref.themeKeyOverride;
var isRequired = props.isRequired,
state = props.state,
restProps = _objectWithoutPropertiesLoose(props, ["isRequired", "state"]);
var wrapperClassName = useClassName({
style: TextareaWrapper,
styleProps: props,
themeKey: themeKey,
themeKeyOverride: themeKeyOverride,
themeKeySuffix: 'Wrapper',
prevClassName: restProps.className
});
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);
}
}));
var className = useClassName({
style: Textarea$1,
styleProps: props,
themeKey: themeKey,
themeKeyOverride: themeKeyOverride,
prevClassName: boxProps.className
});
return _objectSpread2(_objectSpread2({}, boxProps), {}, {
className: className,
'aria-invalid': state === 'danger',
'aria-required': isRequired
});
}, {
defaultProps: {
type: 'text'
},
themeKey: 'Textarea'
});
var Textarea = createComponent(function (props) {
var textareaProps = useProps(props);
return createElement({
children: props.children,
component: Box,
use: props.use,
htmlProps: _objectSpread2(_objectSpread2({}, textareaProps), props.mask ? {
mask: props.mask
} : {})
});
}, {
attach: {
useProps: useProps,
displayName: 'Textarea'
},
defaultProps: {
use: 'textarea'
},
themeKey: 'Textarea'
}); ////////////////////////////////////////////////////////////////
var useTextareaFieldProps = createHook(function (props, _ref2) {
var themeKey = _ref2.themeKey,
themeKeyOverride = _ref2.themeKeyOverride;
var children = props.children,
autoComplete = props.autoComplete,
autoFocus = props.autoFocus,
defaultValue = props.defaultValue,
description = props.description,
disabled = props.disabled,
hint = props.hint,
textareaProps = props.textareaProps,
isOptional = props.isOptional,
isRequired = props.isRequired,
label = props.label,
name = props.name,
size = props.size,
mask = props.mask,
maxLength = props.maxLength,
minLength = props.minLength,
multiple = props.multiple,
pattern = props.pattern,
placeholder = props.placeholder,
readOnly = props.readOnly,
spellCheck = props.spellCheck,
step = props.step,
state = props.state,
tooltip = props.tooltip,
tooltipTriggerComponent = props.tooltipTriggerComponent,
type = props.type,
value = props.value,
onBlur = props.onBlur,
onChange = props.onChange,
onFocus = props.onFocus,
overrides = props.overrides,
validationText = props.validationText,
restProps = _objectWithoutPropertiesLoose(props, ["children", "autoComplete", "autoFocus", "defaultValue", "description", "disabled", "hint", "textareaProps", "isOptional", "isRequired", "label", "name", "size", "mask", "maxLength", "minLength", "multiple", "pattern", "placeholder", "readOnly", "spellCheck", "step", "state", "tooltip", "tooltipTriggerComponent", "type", "value", "onBlur", "onChange", "onFocus", "overrides", "validationText"]);
var boxProps = Box$1.useProps(restProps);
var className = useClassName({
style: TextareaField$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(Textarea, _extends({
autoComplete: autoComplete,
autoFocus: autoFocus,
defaultValue: defaultValue,
disabled: disabled,
isRequired: isRequired,
name: name,
size: size,
mask: mask,
maxLength: maxLength,
minLength: minLength,
multiple: multiple,
pattern: pattern,
placeholder: placeholder,
readOnly: readOnly,
spellCheck: spellCheck,
step: step,
state: state,
type: type,
value: value,
onBlur: onBlur,
onChange: onChange,
onFocus: onFocus,
overrides: overrides
}, elementProps, textareaProps));
})
});
}, {
themeKey: 'TextareaField'
});
var TextareaField = createComponent(function (props) {
var textareaFieldProps = useTextareaFieldProps(props);
return createElement({
children: props.children,
component: Box,
use: props.use,
htmlProps: textareaFieldProps
});
}, {
attach: {
useProps: useProps,
displayName: 'TextareaField'
},
themeKey: 'TextareaField'
});
export { Textarea, TextareaField };