+ {loadingProps => (
+
+
+ {isNumberInput && (
+
+ )}
+ {isNumberInput && (
+
+ )}
+
+ )}
+
+ );
+}
+
+Input.dashPersistence = pick(
+ ['persisted_props', 'persistence_type'],
+ defaultProps
+);
+
+export default Input;
diff --git a/components/dash-core-components/src/components/css/dcc.css b/components/dash-core-components/src/components/css/dcc.css
new file mode 100644
index 0000000000..f3a52a6e39
--- /dev/null
+++ b/components/dash-core-components/src/components/css/dcc.css
@@ -0,0 +1,10 @@
+:root {
+ --Dash-Spacing: 4px;
+ --Dash-Stroke-Strong: rgba(0, 18, 77, 0.45);
+ --Dash-Stroke-Weak: rgba(0, 24, 102, 0.1);
+ --Dash-Fill-Weak: rgba(0, 30, 128, 0.04);
+ --Dash-Fill-Inverse-strong: #fff;
+ --Dash-Text-Primary: rgba(0, 18, 77, 0.87);
+ --Dash-Fill-Primary-Hover: rgba(0, 18, 77, 0.04);
+ --Dash-Fill-Primary-Active: rgba(0, 18, 77, 0.08);
+}
diff --git a/components/dash-core-components/src/components/css/input.css b/components/dash-core-components/src/components/css/input.css
index 2e7193a0ff..96d5926320 100644
--- a/components/dash-core-components/src/components/css/input.css
+++ b/components/dash-core-components/src/components/css/input.css
@@ -1,7 +1,113 @@
-input.dash-input:invalid {
+/* Input container styles */
+.dash-input-container {
+ position: relative;
+ display: inline-flex;
+align-items: center;
+ width: 170px; /* default input width */
+ height: 32px;
+ border-radius: var(--Dash-Spacing);
+ border: 1px solid var(--Dash-Stroke-Strong);
+ box-sizing: border-box;
+ container-type: inline-size;
+ vertical-align: middle;
+}
+
+/* Input field styles */
+.dash-input-element {
+ padding: var(--Dash-Spacing) calc(2 * var(--Dash-Spacing));
+ background: var(--Dash-Fill-Inverse-strong);
+ border: none;
+ border-radius: var(--Dash-Spacing);
+ flex: 1 1 0;
+ min-width: 0;
+ height: 100%;
+ box-sizing: border-box;
+ z-index: 1;
+ order: 2;
+}
+
+/* Hide native steppers for number inputs */
+.dash-input-element[type='number'] {
+ -moz-appearance: textfield;
+}
+
+.dash-input-element[type='number']::-webkit-outer-spin-button,
+.dash-input-element[type='number']::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+/* Show native steppers when container is narrow and input is number type */
+@container (max-width: 99px) {
+ .dash-input-element[type='number'] {
+ -moz-appearance: number-input;
+ }
+
+ .dash-input-element[type='number']::-webkit-outer-spin-button,
+ .dash-input-element[type='number']::-webkit-inner-spin-button {
+ -webkit-appearance: inner-spin-button;
+ margin: 0;
+ }
+}
+
+/* Stepper button base styles */
+.dash-input-stepper {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 100%;
+ border: none;
+ background: var(--Dash-Fill-Inverse-strong);
+ cursor: pointer;
+ font-size: 16px;
+ font-weight: bold;
+ color: var(--Dash-Text-Primary);
+}
+
+.dash-input-stepper:hover {
+ background: var(--Dash-Fill-Primary-Hover);
+}
+
+.dash-input-stepper:active {
+ background: var(--Dash-Fill-Primary-Active);
+}
+
+.dash-input-stepper:disabled {
+ background: var(--Dash-Fill-Inverse-strong);
+ opacity: 0.5;
+ cursor: default;
+}
+
+@container (max-width: 99px) {
+ .dash-input-stepper {
+ display: none;
+ }
+}
+
+/* Decrement button specific styles */
+.dash-input-stepper.dash-stepper-decrement {
+ border-right: 1px solid var(--Dash-Stroke-Weak);
+ border-radius: var(--Dash-Spacing) 0 0 var(--Dash-Spacing);
+ order: 1;
+}
+
+/* Increment button specific styles */
+.dash-input-stepper.dash-stepper-increment {
+ border-left: 1px solid var(--Dash-Stroke-Weak);
+ border-radius: 0 var(--Dash-Spacing) var(--Dash-Spacing) 0;
+ order: 3;
+}
+
+/* Hidden input type */
+.dash-input-container.dash-input-hidden {
+ display: none;
+}
+
+input.dash-input-element:invalid {
outline: solid red;
}
-input.dash-input:valid {
+input.dash-input-element:valid {
outline: none black;
}
diff --git a/components/dash-core-components/src/components/css/react-select@1.0.0-rc.3.min.css b/components/dash-core-components/src/components/css/react-select@1.0.0-rc.3.min.css
index cfb7baee9a..5bab0df23c 100644
--- a/components/dash-core-components/src/components/css/react-select@1.0.0-rc.3.min.css
+++ b/components/dash-core-components/src/components/css/react-select@1.0.0-rc.3.min.css
@@ -1 +1 @@
-.Select,.Select-control{position:relative}.Select-control,.Select-input>input{width:100%;cursor:default;outline:0}.Select-arrow-zone,.Select-clear-zone,.Select-loading-zone{text-align:center;cursor:pointer}.Select,.Select div,.Select input,.Select span{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.Select.is-disabled>.Select-control{background-color:#f9f9f9}.Select.is-disabled>.Select-control:hover{box-shadow:none}.Select.is-disabled .Select-arrow-zone{cursor:default;pointer-events:none;opacity:.35}.Select-control{background-color:#fff;border-radius:4px;border:1px solid #ccc;color:#333;display:table;border-spacing:0;border-collapse:separate;height:36px;overflow:hidden}.is-searchable.is-focused:not(.is-open)>.Select-control,.is-searchable.is-open>.Select-control{cursor:text}.Select-control:hover{box-shadow:0 1px 0 rgba(0,0,0,.06)}.Select-control .Select-input:focus{outline:0}.is-open>.Select-control{border-bottom-right-radius:0;border-bottom-left-radius:0;background:#fff;border-color:#b3b3b3 #ccc #d9d9d9}.is-open>.Select-control .Select-arrow{top:-2px;border-color:transparent transparent #999;border-width:0 5px 5px}.is-focused:not(.is-open)>.Select-control{border-color:#007eff;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 0 3px rgba(0,126,255,.1)}.Select--single>.Select-control .Select-value,.Select-placeholder{bottom:0;color:#aaa;left:0;line-height:34px;padding-left:10px;padding-right:10px;position:absolute;right:0;top:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.has-value.Select--single>.Select-control .Select-value .Select-value-label,.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value .Select-value-label{color:#333}.has-value.Select--single>.Select-control .Select-value a.Select-value-label,.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value a.Select-value-label{cursor:pointer;text-decoration:none}.has-value.Select--single>.Select-control .Select-value a.Select-value-label:focus,.has-value.Select--single>.Select-control .Select-value a.Select-value-label:hover,.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value a.Select-value-label:focus,.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value a.Select-value-label:hover{color:#007eff;outline:0;text-decoration:underline}.Select-input{height:34px;padding-left:10px;padding-right:10px;vertical-align:middle}.Select-input>input{background:none;border:0;box-shadow:none;display:inline-block;font-family:inherit;font-size:inherit;margin:0;line-height:14px;padding:8px 0 12px;-webkit-appearance:none}.Select-loading,.Select-loading-zone{width:16px;position:relative;vertical-align:middle}.is-focused .Select-input>input{cursor:text}.has-value.is-pseudo-focused .Select-input{opacity:0}.Select-control:not(.is-searchable)>.Select-input{outline:0}.Select-loading-zone{display:table-cell}.Select-loading{-webkit-animation:Select-animation-spin .4s infinite linear;-o-animation:Select-animation-spin .4s infinite linear;animation:Select-animation-spin .4s infinite linear;height:16px;box-sizing:border-box;border-radius:50%;border:2px solid #ccc;border-right-color:#333;display:inline-block}.Select-clear-zone{-webkit-animation:Select-animation-fadeIn .2s;-o-animation:Select-animation-fadeIn .2s;animation:Select-animation-fadeIn .2s;color:#999;display:table-cell;position:relative;vertical-align:middle;width:17px}.Select-clear-zone:hover{color:#D0021B}.Select-clear{display:inline-block;font-size:18px;line-height:1}.Select--multi .Select-clear-zone{width:17px}.Select-arrow-zone{display:table-cell;position:relative;vertical-align:middle;width:25px;padding-right:5px}.Select--multi .Select-multi-value-wrapper,.Select-arrow{display:inline-block}.Select-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px;height:0;width:0;position:relative}.Select-arrow-zone:hover>.Select-arrow,.is-open .Select-arrow{border-top-color:#666}.Select .Select-aria-only{display:inline-block;height:1px;width:1px;margin:-1px;clip:rect(0,0,0,0);overflow:hidden;float:left}.Select-noresults,.Select-option{box-sizing:border-box;display:block;padding:8px 10px}@-webkit-keyframes Select-animation-fadeIn{from{opacity:0}to{opacity:1}}@keyframes Select-animation-fadeIn{from{opacity:0}to{opacity:1}}.Select-menu-outer{border-bottom-right-radius:4px;border-bottom-left-radius:4px;background-color:#fff;border:1px solid #ccc;border-top-color:#e6e6e6;box-shadow:0 1px 0 rgba(0,0,0,.06);box-sizing:border-box;margin-top:-1px;max-height:200px;position:absolute;top:100%;width:100%;z-index:1;-webkit-overflow-scrolling:touch}.Select-menu{max-height:198px;overflow-y:auto}.Select-option{background-color:#fff;color:#666;cursor:pointer}.Select-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.Select-option.is-selected{background-color:#f5faff;background-color:rgba(0,126,255,.04);color:#333}.Select-option.is-focused{background-color:#ebf5ff;background-color:rgba(0,126,255,.08);color:#333}.Select-option.is-disabled{color:#ccc;cursor:default}.Select-noresults{color:#999;cursor:default}.Select--multi .Select-input{vertical-align:middle;margin-left:10px;padding:0}.Select--multi.has-value .Select-input{margin-left:5px}.Select--multi .Select-value{background-color:#ebf5ff;background-color:rgba(0,126,255,.08);border-radius:2px;border:1px solid #c2e0ff;border:1px solid rgba(0,126,255,.24);color:#007eff;display:inline-block;font-size:.9em;line-height:1.4;margin-left:5px;margin-top:5px;vertical-align:top}.Select--multi .Select-value-icon,.Select--multi .Select-value-label{display:inline-block;vertical-align:middle}.Select--multi .Select-value-label{border-bottom-right-radius:2px;border-top-right-radius:2px;cursor:default;padding:2px 5px}.Select--multi a.Select-value-label{color:#007eff;cursor:pointer;text-decoration:none}.Select--multi a.Select-value-label:hover{text-decoration:underline}.Select--multi .Select-value-icon{cursor:pointer;border-bottom-left-radius:2px;border-top-left-radius:2px;border-right:1px solid #c2e0ff;border-right:1px solid rgba(0,126,255,.24);padding:1px 5px 3px}.Select--multi .Select-value-icon:focus,.Select--multi .Select-value-icon:hover{background-color:#d8eafd;background-color:rgba(0,113,230,.08);color:#0071e6}.Select--multi .Select-value-icon:active{background-color:#c2e0ff;background-color:rgba(0,126,255,.24)}.Select--multi.is-disabled .Select-value{background-color:#fcfcfc;border:1px solid #e3e3e3;color:#333}.Select--multi.is-disabled .Select-value-icon{cursor:not-allowed;border-right:1px solid #e3e3e3}.Select--multi.is-disabled .Select-value-icon:active,.Select--multi.is-disabled .Select-value-icon:focus,.Select--multi.is-disabled .Select-value-icon:hover{background-color:#fcfcfc}@keyframes Select-animation-spin{to{transform:rotate(1turn)}}@-webkit-keyframes Select-animation-spin{to{-webkit-transform:rotate(1turn)}}
\ No newline at end of file
+.Select,.Select-control{position:relative}.Select-control,.Select-input>input{width:100%;cursor:default;outline:0}.Select-arrow-zone,.Select-clear-zone,.Select-loading-zone{text-align:center;cursor:pointer}.Select,.Select div,.Select input,.Select span{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.Select.is-disabled>.Select-control{background-color:#f9f9f9}.Select.is-disabled>.Select-control:hover{box-shadow:none}.Select.is-disabled .Select-arrow-zone{cursor:default;pointer-events:none;opacity:.35}.Select-control{background-color:#fff;border-radius:4px;border:1px solid #ccc;color:#333;display:table;border-spacing:0;border-collapse:separate;height:36px;overflow:hidden}.is-searchable.is-focused:not(.is-open)>.Select-control,.is-searchable.is-open>.Select-control{cursor:text}.Select-control:hover{box-shadow:0 1px 0 rgba(0,0,0,.06)}.Select-control .Select-input:focus{outline:0}.is-open>.Select-control{border-bottom-right-radius:0;border-bottom-left-radius:0;background:#fff;border-color:#b3b3b3 #ccc #d9d9d9}.is-open>.Select-control .Select-arrow{top:-2px;border-color:transparent transparent #999;border-width:0 5px 5px}.is-focused:not(.is-open)>.Select-control{border-color:#007eff;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 0 3px rgba(0,126,255,.1)}.Select--single>.Select-control .Select-value,.Select-placeholder{bottom:0;color:#aaa;left:0;line-height:34px;padding-left:10px;padding-right:10px;position:absolute;right:0;top:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.has-value.Select--single>.Select-control .Select-value .Select-value-label,.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value .Select-value-label{color:#333}.has-value.Select--single>.Select-control .Select-value a.Select-value-label,.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value a.Select-value-label{cursor:pointer;text-decoration:none}.has-value.Select--single>.Select-control .Select-value a.Select-value-label:focus,.has-value.Select--single>.Select-control .Select-value a.Select-value-label:hover,.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value a.Select-value-label:focus,.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value a.Select-value-label:hover{color:#007eff;outline:0;text-decoration:underline}.Select-input{height:34px;padding-left:10px;padding-right:10px;vertical-align:middle}.Select-input>input{background:none;border:0;box-shadow:none;display:inline-block;font-family:inherit;font-size:inherit;margin:0;line-height:14px;padding:8px 0 12px;-webkit-appearance:none}.Select-loading,.Select-loading-zone{width:16px;position:relative;vertical-align:middle}.is-focused .Select-input>input{cursor:text}.has-value.is-pseudo-focused .Select-input{opacity:0}.Select-control:not(.is-searchable)>.Select-input{outline:0}.Select-loading-zone{display:table-cell}.Select-loading{-webkit-animation:Select-animation-spin .4s infinite linear;-o-animation:Select-animation-spin .4s infinite linear;animation:Select-animation-spin .4s infinite linear;height:16px;box-sizing:border-box;border-radius:50%;border:2px solid #ccc;border-right-color:#333;display:inline-block}.Select-clear-zone{-webkit-animation:Select-animation-fadeIn .2s;-o-animation:Select-animation-fadeIn .2s;animation:Select-animation-fadeIn .2s;color:#999;display:table-cell;position:relative;vertical-align:middle;width:17px}.Select-clear-zone:hover{color:#D0021B}.Select-clear{display:inline-block;font-size:18px;line-height:1}.Select--multi .Select-clear-zone{width:17px}.Select-arrow-zone{display:table-cell;position:relative;vertical-align:middle;width:25px;padding-right:5px}.Select--multi .Select-multi-value-wrapper,.Select-arrow{display:inline-block}.Select-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px;height:0;width:0;position:relative}.Select-arrow-zone:hover>.Select-arrow,.is-open .Select-arrow{border-top-color:#666}.Select .Select-aria-only{display:inline-block;height:1px;width:1px;margin:-1px;clip:rect(0,0,0,0);overflow:hidden;float:left}.Select-noresults,.Select-option{box-sizing:border-box;display:block;padding:8px 10px}@-webkit-keyframes Select-animation-fadeIn{from{opacity:0}to{opacity:1}}@keyframes Select-animation-fadeIn{from{opacity:0}to{opacity:1}}.Select-menu-outer{border-bottom-right-radius:4px;border-bottom-left-radius:4px;background-color:#fff;border:1px solid #ccc;border-top-color:#e6e6e6;box-shadow:0 1px 0 rgba(0,0,0,.06);box-sizing:border-box;margin-top:-1px;max-height:200px;position:absolute;top:100%;width:100%;z-index:1;-webkit-overflow-scrolling:touch}.Select-menu{max-height:198px;overflow-y:auto}.Select-option{background-color:#fff;color:#666;cursor:pointer}.Select-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.Select-option.is-selected{background-color:#f5faff;background-color:rgba(0,126,255,.04);color:#333}.Select-option.is-focused{background-color:#ebf5ff;background-color:rgba(0,126,255,.08);color:#333}.Select-option.is-disabled{color:#ccc;cursor:default}.Select-noresults{color:#999;cursor:default}.Select--multi .Select-input{vertical-align:middle;margin-left:10px;padding:0}.Select--multi.has-value .Select-input{margin-left:5px}.Select--multi .Select-value{background-color:#ebf5ff;background-color:rgba(0,126,255,.08);border-radius:2px;border:1px solid #c2e0ff;border:1px solid rgba(0,126,255,.24);color:#007eff;display:inline-block;font-size:.9em;line-height:1.4;margin-left:5px;margin-top:5px;vertical-align:top}.Select--multi .Select-value-icon,.Select--multi .Select-value-label{display:inline-block;vertical-align:middle}.Select--multi .Select-value-label{border-bottom-right-radius:2px;border-top-right-radius:2px;cursor:default;padding:2px 5px}.Select--multi a.Select-value-label{color:#007eff;cursor:pointer;text-decoration:none}.Select--multi a.Select-value-label:hover{text-decoration:underline}.Select--multi .Select-value-icon{cursor:pointer;border-bottom-left-radius:2px;border-top-left-radius:2px;border-right:1px solid #c2e0ff;border-right:1px solid rgba(0,126,255,.24);padding:1px 5px 3px}.Select--multi .Select-value-icon:focus,.Select--multi .Select-value-icon:hover{background-color:#d8eafd;background-color:rgba(0,113,230,.08);color:#0071e6}.Select--multi .Select-value-icon:active{background-color:#c2e0ff;background-color:rgba(0,126,255,.24)}.Select--multi.is-disabled .Select-value{background-color:#fcfcfc;border:1px solid #e3e3e3;color:#333}.Select--multi.is-disabled .Select-value-icon{cursor:not-allowed;border-right:1px solid #e3e3e3}.Select--multi.is-disabled .Select-value-icon:active,.Select--multi.is-disabled .Select-value-icon:focus,.Select--multi.is-disabled .Select-value-icon:hover{background-color:#fcfcfc}@keyframes Select-animation-spin{to{transform:rotate(1turn)}}@-webkit-keyframes Select-animation-spin{to{-webkit-transform:rotate(1turn)}}
diff --git a/components/dash-core-components/src/index.js b/components/dash-core-components/src/index.ts
similarity index 96%
rename from components/dash-core-components/src/index.js
rename to components/dash-core-components/src/index.ts
index f696898fc1..17fef8a7c3 100644
--- a/components/dash-core-components/src/index.js
+++ b/components/dash-core-components/src/index.ts
@@ -9,7 +9,7 @@ import Download from './components/Download.react';
import Dropdown from './components/Dropdown.react';
import Geolocation from './components/Geolocation.react';
import Graph from './components/Graph.react';
-import Input from './components/Input.react';
+import Input from './components/Input';
import Interval from './components/Interval.react';
import Link from './components/Link.react';
import Loading from './components/Loading.react';
@@ -25,6 +25,7 @@ import Textarea from './components/Textarea.react';
import Tooltip from './components/Tooltip.react';
import Upload from './components/Upload.react';
+import './components/css/dcc.css';
import 'react-dates/lib/css/_datepicker.css';
import './components/css/react-dates@20.1.0-fix.css';
@@ -39,8 +40,8 @@ export {
Dropdown,
Geolocation,
Graph,
- Input,
Interval,
+ Input,
Link,
Loading,
Location,
diff --git a/components/dash-core-components/src/utils/_LoadingElement.tsx b/components/dash-core-components/src/utils/_LoadingElement.tsx
new file mode 100644
index 0000000000..ec48cff765
--- /dev/null
+++ b/components/dash-core-components/src/utils/_LoadingElement.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+declare global {
+ interface Window {
+ dash_component_api: {
+ useDashContext: () => {
+ useLoading: () => boolean;
+ };
+ };
+ }
+}
+
+interface LoadingElementProps {
+ children: (props: Record