bright-components 9.31.0 → 10.0.0

package/dist/components/Time/OverlayBase/index.js

@@ -31,137 +31,129 @@ var _UnitInput = _interopRequireDefault(require("./UnitInput"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n\tbackground-color: #fafdff;\n\tborder-top: 1px solid #0a223333;\n\tmargin: 0;\n\tpadding: ", " ", " 0;\n\tjustify-content: space-between;\n\n\t@media (min-width: ", ") {\n\t\tpadding: ", " ", " ", ";\n\t}\n\n\t@media (max-width: ", ") {\n\t\tbutton {\n\t\t\tmargin-bottom: ", ";\n\t\t}\n\t}\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-direction: row;\n\tbackground-color: white;\n\tpadding: ", ";\n\talign-items: center;\n\tjustify-content: center;\n\n\t@media (min-width: ", ") {\n\t\tpadding: ", ";\n\t}\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\tposition: absolute;\n\ttop: 50px;\n\tz-index: ", ";\n\twidth: 220px;\n\tbox-shadow: ", ";\n\tborder: 2px solid ", ";\n\tborder-radius: ", ";\n\n\t@media (min-width: ", ") {\n\t\twidth: 320px;\n\t}\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tpadding: ", " ", ";\n\tfont-size: ", ";\n\tdisplay: inline-block;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var Separator = _styledComponents.default.span(_templateObject(), _spacing.default.s2, _spacing.default.s3, _spacing.default.s3);
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const Separator = _styledComponents.default.span`
+	padding: ${_spacing.default.s2} ${_spacing.default.s3};
+	font-size: ${_spacing.default.s3};
+	display: inline-block;
+`;
 Separator.displayName = 'Separator';
-
-var Overlay = _styledComponents.default.div(_templateObject2(), _zIndex.default.OVERLAY, _vars.default.boxShadow, _colors.default.borderFocus, _vars.default.borderRadius, _breakpoints.default.tablet);
-
+const Overlay = _styledComponents.default.div`
+	position: absolute;
+	top: 50px;
+	z-index: ${_zIndex.default.OVERLAY};
+	width: 220px;
+	box-shadow: ${_vars.default.boxShadow};
+	border: 2px solid ${_colors.default.borderFocus};
+	border-radius: ${_vars.default.borderRadius};
+
+	@media (min-width: ${_breakpoints.default.tablet}) {
+		width: 320px;
+	}
+`;
 Overlay.displayName = 'Overlay';
-
-var Content = _styledComponents.default.div(_templateObject3(), _spacing.default.s2, _breakpoints.default.tablet, _spacing.default.s3);
-
+const Content = _styledComponents.default.div`
+	display: flex;
+	flex-direction: row;
+	background-color: white;
+	padding: ${_spacing.default.s2};
+	align-items: center;
+	justify-content: center;
+
+	@media (min-width: ${_breakpoints.default.tablet}) {
+		padding: ${_spacing.default.s3};
+	}
+`;
 Content.displayName = 'Content';
-var DialogButtonGroup = (0, _styledComponents.default)(_ButtonGroup.default)(_templateObject4(), _spacing.default.s1, _spacing.default.s1, _breakpoints.default.tablet, _spacing.default.s2, _spacing.default.s2, _spacing.default.s1, _breakpoints.default.tablet, _spacing.default.s1);
+const DialogButtonGroup = (0, _styledComponents.default)(_ButtonGroup.default)`
+	background-color: #fafdff;
+	border-top: 1px solid #0a223333;
+	margin: 0;
+	padding: ${_spacing.default.s1} ${_spacing.default.s1} 0;
+	justify-content: space-between;
+
+	@media (min-width: ${_breakpoints.default.tablet}) {
+		padding: ${_spacing.default.s2} ${_spacing.default.s2} ${_spacing.default.s1};
+	}
+
+	@media (max-width: ${_breakpoints.default.tablet}) {
+		button {
+			margin-bottom: ${_spacing.default.s1};
+		}
+	}
+`;
 DialogButtonGroup.displayName = 'DialogButtonGroup';
-var OverlayBase = (0, _react.forwardRef)(function (_ref, ref) {
-  var value = _ref.value,
-      onHide = _ref.onHide,
-      hourIncrements = _ref.hourIncrements,
-      minuteIncrements = _ref.minuteIncrements,
-      GA = _ref.GA,
-      _onIncrement = _ref.onIncrement,
-      _onChange = _ref.onChange,
-      onApply = _ref.onApply;
-  var hideCallback = (0, _react.useCallback)(onHide, [onHide]);
-  (0, _react.useEffect)(function () {
-    var handleEsc = function handleEsc(e) {
+const OverlayBase = (0, _react.forwardRef)((_ref, ref) => {
+  let {
+    value,
+    onHide,
+    hourIncrements,
+    minuteIncrements,
+    GA,
+    onIncrement,
+    onChange,
+    onApply
+  } = _ref;
+  const hideCallback = (0, _react.useCallback)(onHide, [onHide]);
+  (0, _react.useEffect)(() => {
+    const handleEsc = e => {
       if (e.keyCode === 27) {
         hideCallback();
       }
     };
 
     window.addEventListener('keydown', handleEsc);
-    return function () {
+    return () => {
       window.removeEventListener('keydown', handleEsc);
     };
   }, [hideCallback]);
-  var hours = value.hours,
-      minutes = value.minutes;
+  const {
+    hours,
+    minutes
+  } = value;
   return _react.default.createElement(Overlay, {
     ref: ref
   }, _react.default.createElement(Content, null, _react.default.createElement(_UnitInput.default, {
     unit: "hours",
     value: hours,
-    onChange: function onChange(newValue, shouldApply) {
-      return _onChange(newValue, 'hours', shouldApply);
-    },
-    onIncrement: function onIncrement(i) {
-      return _onIncrement(i, 'hours');
-    },
+    onChange: (newValue, shouldApply) => onChange(newValue, 'hours', shouldApply),
+    onIncrement: i => onIncrement(i, 'hours'),
     increment: hourIncrements
   }), _react.default.createElement(Separator, null, ":"), _react.default.createElement(_UnitInput.default, {
     unit: "minutes",
     value: minutes,
-    onChange: function onChange(newValue, shouldApply) {
-      return _onChange(newValue, 'minutes', shouldApply);
-    },
-    onIncrement: function onIncrement(i) {
-      return _onIncrement(i, 'minutes');
-    },
+    onChange: (newValue, shouldApply) => onChange(newValue, 'minutes', shouldApply),
+    onIncrement: i => onIncrement(i, 'minutes'),
     showLargeIncrements: minuteIncrements <= 15,
     increment: minuteIncrements
   })), _react.default.createElement(DialogButtonGroup, {
     reverseColumnOrder: true
   }, _react.default.createElement(_OutlineButton.default, {
     type: "button",
-    onClick: function onClick() {
+    onClick: () => {
       onHide();
 
       if (GA) {
         (0, _reactGa.event)({
           category: GA.category,
-          action: GA.action + " (Cancel)"
+          action: `${GA.action} (Cancel)`
         });
       }
     }
   }, "Cancel"), _react.default.createElement(_BrandButton.default, {
     type: "button",
-    onClick: function onClick() {
+    onClick: () => {
       onApply(value);
       onHide();
 
       if (GA) {
         (0, _reactGa.event)({
           category: GA.category,
-          action: GA.action + " (Apply)",
-          label: hours + " hrs " + minutes + " mins"
+          action: `${GA.action} (Apply)`,
+          label: `${hours} hrs ${minutes} mins`
         });
       }
     },

package/dist/components/Time/TimePicker/TimeOverlay/UnitInput/index.js

@@ -17,121 +17,92 @@ var _vars = _interopRequireDefault(require("../../../../../constants/vars"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n\t", "\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: ", "px;\n\tcursor: pointer;\n\tuser-select: none;\n"]);
+const buildValues = (unit, increment, min, max) => {
+  const values = [];
 
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n\twidth: 90px;\n\theight: 206px;\n\toverflow-y: scroll;\n\tborder: 1px solid ", ";\n\tpadding: 1px ", ";\n\n\t& ::-webkit-scrollbar-track {\n\t\tcolor: white;\n\t}\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\tmargin: 0 0 ", " 0;\n\tfont-family: ", ";\n\ttext-align: center;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tpadding: 0 ", ";\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var buildValues = function buildValues(unit, increment, min, max) {
-  var values = [];
-
-  for (var i = min; i <= max; i += increment) {
+  for (let i = min; i <= max; i += increment) {
     values.push(i);
   }
 
   return values;
 };
 
-var Container = _styledComponents.default.div(_templateObject(), _spacing.default.s3);
-
+const Container = _styledComponents.default.div`
+	padding: 0 ${_spacing.default.s3};
+`;
 Container.displayName = 'Container';
-
-var Heading = _styledComponents.default.h4(_templateObject2(), _spacing.default.s1, _vars.default.fontStackBold);
-
+const Heading = _styledComponents.default.h4`
+	margin: 0 0 ${_spacing.default.s1} 0;
+	font-family: ${_vars.default.fontStackBold};
+	text-align: center;
+`;
 Heading.displayName = 'Heading';
-
-var ListBox = _styledComponents.default.div(_templateObject3(), _colors.default.greyPale, _spacing.default.s1);
-
+const ListBox = _styledComponents.default.div`
+	width: 90px;
+	height: 206px;
+	overflow-y: scroll;
+	border: 1px solid ${_colors.default.greyPale};
+	padding: 1px ${_spacing.default.s1};
+
+	& ::-webkit-scrollbar-track {
+		color: white;
+	}
+`;
 ListBox.displayName = 'ListBox';
-var itemHeight = 40;
-
-var ListBoxOption = _styledComponents.default.div(_templateObject4(), function (props) {
-  return props.selected && "\n\t\tbackground-color: " + _colors.default.primary + ";\n\t\tcolor: " + _colors.default.white + ";\n\t\tborder-radius: " + _vars.default.borderRadius + ";\n\t";
-}, itemHeight);
-
+const itemHeight = 40;
+const ListBoxOption = _styledComponents.default.div`
+	${props => props.selected && `
+		background-color: ${_colors.default.primary};
+		color: ${_colors.default.white};
+		border-radius: ${_vars.default.borderRadius};
+	`}
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: ${itemHeight}px;
+	cursor: pointer;
+	user-select: none;
+`;
 ListBoxOption.displayName = 'ListBoxOption';
 
-var formatNumber = function formatNumber(v) {
-  return v.toString().padStart(2, '0');
-};
-
-var UnitInput = function UnitInput(_ref) {
-  var value = _ref.value,
-      unit = _ref.unit,
-      onChange = _ref.onChange,
-      increment = _ref.increment,
-      min = _ref.min,
-      max = _ref.max;
-  var listBoxRef = (0, _react.useRef)();
-  var options = buildValues(unit, increment, min, max);
-  (0, _react.useEffect)(function () {
+const formatNumber = v => v.toString().padStart(2, '0');
+
+const UnitInput = _ref => {
+  let {
+    value,
+    unit,
+    onChange,
+    increment,
+    min,
+    max
+  } = _ref;
+  const listBoxRef = (0, _react.useRef)();
+  const options = buildValues(unit, increment, min, max);
+  (0, _react.useEffect)(() => {
     /* istanbul ignore next */
     if (listBoxRef && listBoxRef.current && listBoxRef.current.scrollTo) {
       // when opened, ensure the selected value is in the ListBox viewport
-      var index = options.findIndex(function (option) {
-        return option === value;
-      });
-      var scrollIndex = itemHeight * (index - 2);
+      const index = options.findIndex(option => option === value);
+      const scrollIndex = itemHeight * (index - 2);
       listBoxRef.current.scrollTo(0, scrollIndex);
     }
   }, []);
-  var heading = unit === 'hours' ? 'Hour' : 'Minute';
+  const heading = unit === 'hours' ? 'Hour' : 'Minute';
   return _react.default.createElement(Container, null, _react.default.createElement(Heading, null, heading), _react.default.createElement(ListBox, {
     ref: listBoxRef,
     role: "listbox",
     "aria-label": heading
-  }, options.map(function (opt) {
-    return _react.default.createElement(ListBoxOption, {
-      role: "option",
-      selected: opt === value,
-      "aria-selected": opt === value,
-      onClick: function onClick() {
-        return onChange(opt);
-      },
-      key: unit + "_" + opt
-    }, formatNumber(opt));
-  })));
+  }, options.map(opt => _react.default.createElement(ListBoxOption, {
+    role: "option",
+    selected: opt === value,
+    "aria-selected": opt === value,
+    onClick: () => onChange(opt),
+    key: `${unit}_${opt}`
+  }, formatNumber(opt)))));
 };
 
 UnitInput.propTypes = {