@charcoal-ui/react 2.0.0-alpha.21 → 2.0.0-alpha.22

package/dist/index.modern.js

@@ -1,6 +1,6 @@
-import React, { useContext, useCallback, createContext, useMemo, useRef, useState, useEffect } from 'react';
+import React, { useContext, useCallback, createContext, useMemo, useRef, useState, useEffect, useImperativeHandle } from 'react';
 export { SSRProvider } from '@react-aria/ssr';
-import styled, { css } from 'styled-components';
+import styled, { css, keyframes } from 'styled-components';
 import { createTheme } from '@charcoal-ui/styled';
 import { disabledSelector, px } from '@charcoal-ui/utils';
 import warning from 'warning';
@@ -9,6 +9,7 @@ import { useToggleState } from 'react-stately';
 import { useTextField } from '@react-aria/textfield';
 import { useVisuallyHidden } from '@react-aria/visually-hidden';
 import '@charcoal-ui/icons';
+import { transparentize } from 'polished';
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -81,10 +82,10 @@ function unreachable(value) {
 
 const theme$2 = createTheme(styled);
 
-let _$7 = t => t,
-    _t$7,
-    _t2$5,
-    _t3$5;
+let _$8 = t => t,
+    _t$8,
+    _t2$6,
+    _t3$6;
 
 const _excluded$6 = ["onClick", "disabled"];
 const Clickable = React.forwardRef(function Clickable(props, ref) {
@@ -111,7 +112,7 @@ const Clickable = React.forwardRef(function Clickable(props, ref) {
     }));
   }
 });
-const clickableCss = css(_t$7 || (_t$7 = _$7`
+const clickableCss = css(_t$8 || (_t$8 = _$8`
   /* Clickable style */
   cursor: pointer;
 
@@ -119,7 +120,7 @@ const clickableCss = css(_t$7 || (_t$7 = _$7`
     cursor: default;
   }
 `), disabledSelector);
-const Button$1 = styled.button(_t2$5 || (_t2$5 = _$7`
+const Button$1 = styled.button(_t2$6 || (_t2$6 = _$8`
   /* Reset button appearance */
   appearance: none;
   background: transparent;
@@ -155,7 +156,7 @@ const Button$1 = styled.button(_t2$5 || (_t2$5 = _$7`
 
   ${0}
 `), clickableCss);
-const A = styled.span(_t3$5 || (_t3$5 = _$7`
+const A = styled.span(_t3$6 || (_t3$6 = _$8`
   /* Reset a-tag appearance */
   color: inherit;
 
@@ -170,8 +171,8 @@ const A = styled.span(_t3$5 || (_t3$5 = _$7`
   ${0}
 `), clickableCss);
 
-let _$6 = t => t,
-    _t$6;
+let _$7 = t => t,
+    _t$7;
 
 const _excluded$5 = ["children", "variant", "size", "fixed", "disabled"];
 const Button = React.forwardRef(function Button(_ref, ref) {
@@ -198,7 +199,7 @@ const StyledButton = styled(Clickable).withConfig({
     return prop !== 'fixed';
   }
 
-}).attrs(styledProps$1)(_t$6 || (_t$6 = _$6`
+}).attrs(styledProps$1)(_t$7 || (_t$7 = _$7`
   width: ${0};
   display: inline-grid;
   align-items: center;
@@ -270,8 +271,8 @@ function sizeToProps$1(size) {
   }
 }
 
-let _$5 = t => t,
-    _t$5;
+let _$6 = t => t,
+    _t$6;
 
 const _excluded$4 = ["variant", "size", "icon"];
 const IconButton = React.forwardRef(function IconButtonInner(_ref, ref) {
@@ -291,7 +292,7 @@ const IconButton = React.forwardRef(function IconButtonInner(_ref, ref) {
     name: icon
   }));
 });
-const StyledIconButton = styled(Clickable).attrs(styledProps)(_t$5 || (_t$5 = _$5`
+const StyledIconButton = styled(Clickable).attrs(styledProps)(_t$6 || (_t$6 = _$6`
   user-select: none;
 
   width: ${0}px;
@@ -381,10 +382,10 @@ function validateIconSize(size, icon) {
   }
 }
 
-let _$4 = t => t,
-    _t$4,
-    _t2$4,
-    _t3$4,
+let _$5 = t => t,
+    _t$5,
+    _t2$5,
+    _t3$5,
     _t4$3;
 function Radio({
   value,
@@ -419,7 +420,7 @@ function Radio({
     disabled: isDisabled || isReadonly
   }), children != null && /*#__PURE__*/React.createElement(RadioLabel, null, children));
 }
-const RadioRoot = styled.label(_t$4 || (_t$4 = _$4`
+const RadioRoot = styled.label(_t$5 || (_t$5 = _$5`
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: ${0};
@@ -432,7 +433,7 @@ const RadioRoot = styled.label(_t$4 || (_t$4 = _$4`
 }) => px(theme.spacing[4]), theme$2(o => [o.disabled]));
 const RadioInput = styled.input.attrs({
   type: 'radio'
-})(_t2$4 || (_t2$4 = _$4`
+})(_t2$5 || (_t2$5 = _$5`
   /** Make prior to browser default style */
   &[type='radio'] {
     appearance: none;
@@ -473,11 +474,11 @@ const RadioInput = styled.input.attrs({
 }) => theme$2(o => [o.borderRadius('oval'), o.bg.text5.hover.press, _hasError && o.outline.assertive]), ({
   theme
 }) => theme.color.text4, theme$2(o => o.bg.brand.hover.press), theme$2(o => [o.bg.text5.hover.press, o.borderRadius('oval')]), theme$2(o => o.outline.default.focus));
-const RadioLabel = styled.div(_t3$4 || (_t3$4 = _$4`
+const RadioLabel = styled.div(_t3$5 || (_t3$5 = _$5`
   ${0}
 `), theme$2(o => [o.typography(14)])); // TODO: use (or polyfill) flex gap
 
-const StyledRadioGroup = styled.div(_t4$3 || (_t4$3 = _$4`
+const StyledRadioGroup = styled.div(_t4$3 || (_t4$3 = _$5`
   display: grid;
   grid-template-columns: 1fr;
   grid-gap: ${0};
@@ -541,10 +542,10 @@ const SelectGroupContext = createContext({
 
 });
 
-let _$3 = t => t,
-    _t$3,
-    _t2$3,
-    _t3$3,
+let _$4 = t => t,
+    _t$4,
+    _t2$4,
+    _t3$4,
     _t4$2,
     _t5$1;
 function Select({
@@ -601,7 +602,7 @@ function Select({
     "unsafe-non-guideline-scale": 16 / 24
   })), Boolean(children) && /*#__PURE__*/React.createElement(SelectLabel, null, children));
 }
-const SelectRoot = styled.label(_t$3 || (_t$3 = _$3`
+const SelectRoot = styled.label(_t$4 || (_t$4 = _$4`
   display: grid;
   grid-template-columns: auto 1fr;
   align-items: center;
@@ -615,14 +616,14 @@ const SelectRoot = styled.label(_t$3 || (_t$3 = _$3`
 `), disabledSelector, ({
   theme
 }) => px(theme.spacing[4]), theme$2(o => o.disabled));
-const SelectLabel = styled.div(_t2$3 || (_t2$3 = _$3`
+const SelectLabel = styled.div(_t2$4 || (_t2$4 = _$4`
   display: flex;
   align-items: center;
   ${0}
 `), theme$2(o => [o.typography(14), o.font.text1]));
 const SelectInput = styled.input.attrs({
   type: 'checkbox'
-})(_t3$3 || (_t3$3 = _$3`
+})(_t3$4 || (_t3$4 = _$4`
   &[type='checkbox'] {
     appearance: none;
     display: block;
@@ -640,7 +641,7 @@ const SelectInput = styled.input.attrs({
   hasError,
   overlay
 }) => theme$2(o => [o.bg.text3.hover.press, o.borderRadius('oval'), hasError && !overlay && o.outline.assertive, overlay && o.bg.surface4]));
-const SelectInputOverlay = styled.div(_t4$2 || (_t4$2 = _$3`
+const SelectInputOverlay = styled.div(_t4$2 || (_t4$2 = _$4`
   position: absolute;
   top: -2px;
   left: -2px;
@@ -657,7 +658,7 @@ const SelectInputOverlay = styled.div(_t4$2 || (_t4$2 = _$3`
   overlay
 }) => theme$2(o => [o.width.px(24), o.height.px(24), o.borderRadius('oval'), o.font.text5, hasError && overlay && o.outline.assertive]), ({
   overlay
-}) => overlay && css(_t5$1 || (_t5$1 = _$3`
+}) => overlay && css(_t5$1 || (_t5$1 = _$4`
       border-color: ${0};
       border-width: 2px;
       border-style: solid;
@@ -704,10 +705,10 @@ function SelectGroup({
   }, children));
 }
 
-let _$2 = t => t,
-    _t$2,
-    _t2$2,
-    _t3$2;
+let _$3 = t => t,
+    _t$3,
+    _t2$3,
+    _t3$3;
 
 const _excluded$3 = ["className", "type"];
 function SwitchCheckbox(props) {
@@ -737,7 +738,7 @@ function SwitchCheckbox(props) {
   // eslint-disable-next-line react/destructuring-assignment
   React.createElement(LabelInner, null, props.children) : undefined);
 }
-const Label$1 = styled.label(_t$2 || (_t$2 = _$2`
+const Label$1 = styled.label(_t$3 || (_t$3 = _$3`
   display: inline-grid;
   grid-template-columns: auto 1fr;
   gap: ${0};
@@ -752,12 +753,12 @@ const Label$1 = styled.label(_t$2 || (_t$2 = _$2`
 `), ({
   theme
 }) => px(theme.spacing[4]), theme$2(o => o.disabled), disabledSelector);
-const LabelInner = styled.div(_t2$2 || (_t2$2 = _$2`
+const LabelInner = styled.div(_t2$3 || (_t2$3 = _$3`
   ${0}
 `), theme$2(o => o.typography(14)));
 const SwitchInput = styled.input.attrs({
   type: 'checkbox'
-})(_t3$2 || (_t3$2 = _$2`
+})(_t3$3 || (_t3$3 = _$3`
   &[type='checkbox'] {
     appearance: none;
     display: inline-flex;
@@ -792,10 +793,10 @@ const SwitchInput = styled.input.attrs({
   }
 `), theme$2(o => [o.borderRadius(16), o.height.px(16), o.bg.text4.hover.press, o.outline.default.focus]), theme$2(o => [o.bg.text5.hover.press, o.borderRadius('oval')]), theme$2(o => o.bg.brand.hover.press));
 
-let _$1 = t => t,
-    _t$1,
-    _t2$1,
-    _t3$1,
+let _$2 = t => t,
+    _t$2,
+    _t2$2,
+    _t3$2,
     _t4$1;
 
 const _excluded$2 = ["style", "className", "label", "required", "requiredText", "subLabel"];
@@ -818,16 +819,16 @@ const FieldLabel = React.forwardRef(function FieldLabel(_ref, ref) {
   }, labelProps), label), required && /*#__PURE__*/React.createElement(RequiredText, null, requiredText), /*#__PURE__*/React.createElement(SubLabelClickable, null, /*#__PURE__*/React.createElement("span", null, subLabel)));
 });
 const theme$1 = createTheme(styled);
-const Label = styled.label(_t$1 || (_t$1 = _$1`
+const Label = styled.label(_t$2 || (_t$2 = _$2`
   ${0}
 `), theme$1(o => [o.typography(14).bold, o.font.text1]));
-const RequiredText = styled.span(_t2$1 || (_t2$1 = _$1`
+const RequiredText = styled.span(_t2$2 || (_t2$2 = _$2`
   ${0}
 `), theme$1(o => [o.typography(14), o.font.text3]));
-const SubLabelClickable = styled.div(_t3$1 || (_t3$1 = _$1`
+const SubLabelClickable = styled.div(_t3$2 || (_t3$2 = _$2`
   ${0}
 `), theme$1(o => [o.typography(14), o.font.text3.hover.press, o.outline.default.focus]));
-const FieldLabelWrapper = styled.div(_t4$1 || (_t4$1 = _$1`
+const FieldLabelWrapper = styled.div(_t4$1 || (_t4$1 = _$2`
   display: inline-flex;
   align-items: center;
 
@@ -840,10 +841,10 @@ const FieldLabelWrapper = styled.div(_t4$1 || (_t4$1 = _$1`
   }
 `), RequiredText, theme$1(o => o.margin.left(4)), SubLabelClickable, theme$1(o => o.margin.left('auto')));
 
-let _ = t => t,
-    _t,
-    _t2,
-    _t3,
+let _$1 = t => t,
+    _t$1,
+    _t2$1,
+    _t3$1,
     _t4,
     _t5,
     _t6,
@@ -1025,11 +1026,8 @@ const MultiLineTextField = React.forwardRef(function MultiLineTextFieldInner(_re
   const syncHeight = useCallback(textarea => {
     var _$match$length, _$match;
 
-    const rows = (_$match$length = (_$match = `${textarea.value}\n`.match(/\n/g)) == null ? void 0 : _$match.length) != null ? _$match$length : 1;
-
-    if (initialRows <= rows) {
-      setRows(rows);
-    }
+    const rows = ((_$match$length = (_$match = `${textarea.value}\n`.match(/\n/g)) == null ? void 0 : _$match.length) != null ? _$match$length : 0) || 1;
+    setRows(initialRows <= rows ? rows : initialRows);
   }, [initialRows]);
   const nonControlled = props.value === undefined;
   const handleChange = useCallback(value => {
@@ -1092,7 +1090,7 @@ const MultiLineTextField = React.forwardRef(function MultiLineTextFieldInner(_re
     invalid: invalid
   }, invalid ? errorMessageProps : descriptionProps), assistiveText));
 });
-const TextFieldRoot = styled.div(_t || (_t = _`
+const TextFieldRoot = styled.div(_t$1 || (_t$1 = _$1`
   display: flex;
   flex-direction: column;
 
@@ -1100,21 +1098,21 @@ const TextFieldRoot = styled.div(_t || (_t = _`
 `), p => p.isDisabled && {
   opacity: p.theme.elementEffect.disabled.opacity
 });
-const TextFieldLabel = styled(FieldLabel)(_t2 || (_t2 = _`
+const TextFieldLabel = styled(FieldLabel)(_t2$1 || (_t2$1 = _$1`
   ${0}
 `), theme(o => o.margin.bottom(8)));
-const StyledInputContainer = styled.div(_t3 || (_t3 = _`
+const StyledInputContainer = styled.div(_t3$1 || (_t3$1 = _$1`
   height: 40px;
   display: grid;
   position: relative;
 `));
-const PrefixContainer = styled.span(_t4 || (_t4 = _`
+const PrefixContainer = styled.span(_t4 || (_t4 = _$1`
   position: absolute;
   top: 50%;
   left: 8px;
   transform: translateY(-50%);
 `));
-const SuffixContainer = styled.span(_t5 || (_t5 = _`
+const SuffixContainer = styled.span(_t5 || (_t5 = _$1`
   position: absolute;
   top: 50%;
   right: 8px;
@@ -1123,12 +1121,12 @@ const SuffixContainer = styled.span(_t5 || (_t5 = _`
   display: flex;
   gap: 8px;
 `));
-const Affix = styled.span(_t6 || (_t6 = _`
+const Affix = styled.span(_t6 || (_t6 = _$1`
   user-select: none;
 
   ${0}
 `), theme(o => [o.typography(14).preserveHalfLeading, o.font.text2]));
-const StyledInput = styled.input(_t7 || (_t7 = _`
+const StyledInput = styled.input(_t7 || (_t7 = _$1`
   border: none;
   box-sizing: border-box;
   outline: none;
@@ -1154,7 +1152,7 @@ const StyledInput = styled.input(_t7 || (_t7 = _`
     ${0}
   }
 `), p => p.extraLeftPadding, p => p.extraRightPadding, p => theme(o => [o.bg.surface3.hover, o.outline.default.focus, p.invalid && o.outline.assertive, o.font.text2]), theme(o => o.font.text3));
-const StyledTextareaContainer = styled.div(_t8 || (_t8 = _`
+const StyledTextareaContainer = styled.div(_t8 || (_t8 = _$1`
   position: relative;
   overflow: hidden;
   padding: 0 8px;
@@ -1168,10 +1166,10 @@ const StyledTextareaContainer = styled.div(_t8 || (_t8 = _`
   ${0};
 `), p => theme(o => [o.bg.surface3.hover, p.invalid && o.outline.assertive, o.font.text2, o.borderRadius(4)]), p => theme(o => p.invalid ? o.outline.assertive : o.outline.default), ({
   rows
-}) => css(_t9 || (_t9 = _`
+}) => css(_t9 || (_t9 = _$1`
     height: calc(22px * ${0} + 18px);
   `), rows));
-const StyledTextarea = styled.textarea(_t10 || (_t10 = _`
+const StyledTextarea = styled.textarea(_t10 || (_t10 = _$1`
   border: none;
   outline: none;
   resize: none;
@@ -1206,25 +1204,25 @@ const StyledTextarea = styled.textarea(_t10 || (_t10 = _`
   scrollbar-width: none; /* Firefox */
 `), p => p.noBottomPadding ? 0 : '', ({
   rows: _rows = 1
-}) => css(_t11 || (_t11 = _`
+}) => css(_t11 || (_t11 = _$1`
     height: calc(22px / 0.875 * ${0});
   `), _rows), theme(o => o.font.text3));
-const SingleLineCounter = styled.span(_t12 || (_t12 = _`
+const SingleLineCounter = styled.span(_t12 || (_t12 = _$1`
   ${0}
 `), theme(o => [o.typography(14).preserveHalfLeading, o.font.text3]));
-const MultiLineCounter = styled.span(_t13 || (_t13 = _`
+const MultiLineCounter = styled.span(_t13 || (_t13 = _$1`
   position: absolute;
   bottom: 9px;
   right: 8px;
 
   ${0}
 `), theme(o => [o.typography(14).preserveHalfLeading, o.font.text3]));
-const AssistiveText = styled.p(_t14 || (_t14 = _`
+const AssistiveText = styled.p(_t14 || (_t14 = _$1`
   ${0}
 `), p => theme(o => [o.typography(14), o.margin.top(8), o.margin.bottom(0), o.font[p.invalid ? 'assertive' : 'text1']]));
 
 const _excluded = ["name", "scale", "unsafeNonGuidelineScale", "className"];
-const Icon = React.forwardRef(function IconInner(_ref, ref) {
+const Icon$1 = React.forwardRef(function IconInner(_ref, ref) {
   let {
     name,
     scale,
@@ -1242,5 +1240,82 @@ const Icon = React.forwardRef(function IconInner(_ref, ref) {
   }, rest));
 });
 
-export { Button, Clickable, ComponentAbstraction, Icon, IconButton, Radio, RadioGroup, Select, SelectGroup, SwitchCheckbox as Switch, TextField, useComponentAbstraction };
+let _ = t => t,
+    _t,
+    _t2,
+    _t3;
+function LoadingSpinner({
+  size = 48,
+  padding = 16,
+  transparent = false
+}) {
+  return /*#__PURE__*/React.createElement(LoadingSpinnerRoot, {
+    size: size,
+    padding: padding,
+    transparent: transparent
+  }, /*#__PURE__*/React.createElement(LoadingSpinnerIcon, null));
+}
+const LoadingSpinnerRoot = styled.div.attrs({
+  role: 'progressbar'
+})(_t || (_t = _`
+  margin: auto;
+  padding: ${0}px;
+  border-radius: 8px;
+  font-size: ${0}px;
+  width: ${0}px;
+  height: ${0}px;
+  background-color: ${0};
+  color: ${0};
+`), props => props.padding, props => props.size, props => props.size, props => props.size, ({
+  theme,
+  transparent
+}) => transparent ? 'transparent' : transparentize(0.32, theme.color.background1), ({
+  theme
+}) => theme.color.text4);
+const scaleout = keyframes(_t2 || (_t2 = _`
+  from {
+    transform: scale(0);
+    opacity: 1;
+  }
+
+  to {
+    transform: scale(1);
+    opacity: 0;
+  }
+`));
+const Icon = styled.div.attrs({
+  role: 'presentation'
+})(_t3 || (_t3 = _`
+  width: 1em;
+  height: 1em;
+  border-radius: 1em;
+  background-color: currentColor;
+  animation: ${0} 1s both ease-out;
+  animation-iteration-count: ${0};
+
+  &[data-reset-animation] {
+    animation: none;
+  }
+`), scaleout, p => p.once ? 1 : 'infinite');
+const LoadingSpinnerIcon = React.forwardRef(function LoadingSpinnerIcon({
+  once = false
+}, ref) {
+  const iconRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    restart: () => {
+      if (!iconRef.current) {
+        return;
+      }
+
+      iconRef.current.dataset.resetAnimation = 'true'; // Force reflow hack!
+      delete iconRef.current.dataset.resetAnimation;
+    }
+  }));
+  return /*#__PURE__*/React.createElement(Icon, {
+    ref: iconRef,
+    once: once
+  });
+});
+
+export { Button, Clickable, ComponentAbstraction, Icon$1 as Icon, IconButton, LoadingSpinner, LoadingSpinnerIcon, Radio, RadioGroup, Select, SelectGroup, SwitchCheckbox as Switch, TextField, useComponentAbstraction };
 //# sourceMappingURL=index.modern.js.map