@pingux/astro 1.27.0-alpha.25 → 1.27.0-alpha.26

package/lib/cjs/components/NumberField/NumberField.js

@@ -0,0 +1,281 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+
+var _trim = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/trim"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _MenuUpIcon = _interopRequireDefault(require("mdi-react/MenuUpIcon"));
+
+var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
+
+var _numberfield = require("@react-aria/numberfield");
+
+var _numberfield2 = require("@react-stately/numberfield");
+
+var _i18n = require("@react-aria/i18n");
+
+var _utils = require("@react-aria/utils");
+
+var _omit = _interopRequireDefault(require("lodash/omit"));
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+var _index = require("../../index");
+
+var _hooks = require("../../hooks");
+
+var _react2 = require("@emotion/react");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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 ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/**
+ * Number fields allow users to enter a number, and increment or
+ * decrement the value using stepper buttons.
+ *
+ * Utilizes [useNumberField](https://react-spectrum.adobe.com/react-aria/useNumberField.html) from React Aria
+ * and [useNumberFieldState](https://react-spectrum.adobe.com/react-stately/useNumberFieldState.html) from
+ * React Stately.
+ */
+var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var helperText = props.helperText,
+      status = props.status;
+
+  var _useLocale = (0, _i18n.useLocale)(),
+      locale = _useLocale.locale;
+
+  var state = (0, _numberfield2.useNumberFieldState)(_objectSpread(_objectSpread({}, props), {}, {
+    locale: locale
+  }));
+
+  var inputRef = _react["default"].useRef();
+
+  var incrRef = _react["default"].useRef();
+
+  var decRef = _react["default"].useRef();
+
+  var _useNumberField = (0, _numberfield.useNumberField)(props, state, inputRef),
+      labelProps = _useNumberField.labelProps,
+      groupProps = _useNumberField.groupProps,
+      inputProps = _useNumberField.inputProps,
+      incrementButtonProps = _useNumberField.incrementButtonProps,
+      decrementButtonProps = _useNumberField.decrementButtonProps;
+
+  var _useField = (0, _hooks.useField)(props),
+      fieldContainerProps = _useField.fieldContainerProps,
+      fieldControlProps = _useField.fieldControlProps,
+      fieldLabelProps = _useField.fieldLabelProps;
+
+  (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
+  /* istanbul ignore next */
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return inputRef.current;
+  });
+  var ControlArrows = (0, _react2.jsx)(_index.Box, {
+    variant: "numberField.arrows"
+  }, (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({}, incrementButtonProps, {
+    ref: decRef,
+    tabIndex: "-1",
+    p: 0
+  }), (0, _react2.jsx)(_index.Icon, {
+    icon: _MenuUpIcon["default"],
+    size: 18
+  })), (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({}, decrementButtonProps, {
+    ref: incrRef,
+    tabIndex: "-1",
+    p: 0
+  }), (0, _react2.jsx)(_index.Icon, {
+    icon: _MenuDownIcon["default"],
+    size: 18
+  }))); // this needed to remove console warning in React 16
+  // I believe once we update to 17 - we can remove this
+
+  var onInputFocus = (0, _react.useCallback)(function (e) {
+    e.persist();
+    fieldControlProps.onFocus(e);
+    inputProps.onFocus(e);
+  }, [fieldControlProps, inputProps]);
+  var onInputBlur = (0, _react.useCallback)(function (e) {
+    e.persist();
+    fieldControlProps.onBlur(e);
+    inputProps.onBlur(e);
+  }, [fieldControlProps, inputProps]);
+  var updatedFieldControlProps = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({}, fieldControlProps), {}, {
+      onFocus: onInputFocus,
+      onBlur: onInputBlur
+    });
+  }, [fieldControlProps, onInputBlur, onInputFocus]);
+
+  var onInputChange = function onInputChange(e) {
+    var _context;
+
+    var minValue = props.minValue;
+    var trimmedInputValue = (0, _trim["default"])(_context = e.target.value).call(_context);
+
+    var trimmedValueEvent = _objectSpread(_objectSpread({}, e), {}, {
+      target: _objectSpread(_objectSpread({}, e.target), {}, {
+        value: trimmedInputValue
+      })
+    });
+
+    if (!trimmedInputValue && typeof minValue !== 'undefined') {
+      var minValueEvent = _objectSpread(_objectSpread({}, e), {}, {
+        target: _objectSpread(_objectSpread({}, e.target), {}, {
+          value: minValue.toString()
+        })
+      });
+
+      inputProps.onChange(minValueEvent);
+    } else {
+      inputProps.onChange(trimmedValueEvent);
+    }
+  };
+
+  inputProps['aria-roledescription'] = null;
+  return (0, _react2.jsx)(_index.Box, fieldContainerProps, (0, _react2.jsx)(_index.Label, (0, _utils.mergeProps)(fieldLabelProps, labelProps)), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    variant: "numberField.noDefaultArrows"
+  }, groupProps), (0, _react2.jsx)(_index.Box, {
+    variant: "numberField.arrowsWrapper",
+    className: fieldControlProps.className
+  }, (0, _react2.jsx)(_index.Input, (0, _extends2["default"])({
+    variant: "forms.input.numberField",
+    ref: inputRef // we don't want to merge this props, we want to
+    // overwrite them like defaultValue, value, ect.
+
+  }, updatedFieldControlProps, (0, _omit["default"])(inputProps, ['name', 'onFocus', 'onBlur']), {
+    onChange: onInputChange
+  })), ControlArrows), helperText && (0, _react2.jsx)(_index.FieldHelperText, {
+    status: status
+  }, helperText)));
+});
+var _default = NumberField;
+exports["default"] = _default;
+NumberField.propTypes = {
+  /** A custom aria-label for the decrement button.
+   * If not provided, the localized string "Decrement" is used. */
+  decrementAriaLabel: _propTypes["default"].string,
+
+  /** A custom aria-label for the increment button.
+   * If not provided, the localized string "Increment" is used. */
+  incrementAriaLabel: _propTypes["default"].string,
+
+  /** Formatting options for the value displayed in the number field.
+   * This also affects what characters are allowed to be typed by the user.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat)
+   * */
+  formatOptions: _propTypes["default"].shape({}),
+
+  /** Whether the input is disabled. */
+  isDisabled: _propTypes["default"].bool,
+
+  /** Whether the input can be selected but not changed by the user. */
+  isReadOnly: _propTypes["default"].bool,
+
+  /** Whether user input is required on the input before form submission. */
+  isRequired: _propTypes["default"].bool,
+
+  /** Whether the element should receive focus on render. */
+  hasAutoFocus: _propTypes["default"].bool,
+
+  /**
+   * Callback fired when focus is lost on the input element.
+   */
+  onBlur: _propTypes["default"].func,
+
+  /**
+   * Callback fired when focus is lost on the input element.
+   */
+  onFocus: _propTypes["default"].func,
+
+  /** Handler that is called when the element's focus status changes. */
+  onFocusChange: _propTypes["default"].func,
+
+  /** Handler that is called when a key is pressed. */
+  onKeyDown: _propTypes["default"].func,
+
+  /** Handler that is called when a key is released. */
+  onKeyUp: _propTypes["default"].func,
+
+  /** Temporary text that occupies the text input when it is empty. */
+  placeholder: _propTypes["default"].string,
+
+  /** The amount that the input value changes with each increment or decrement "tick".
+   * The step prop can be used to snap the value to certain increments.
+   * You can read more about this prop here
+   * [Step values](https://react-spectrum.adobe.com/react-aria/useNumberField.html#step-values)
+   * */
+  step: _propTypes["default"].number,
+
+  /** The smallest value allowed for the input. */
+  minValue: _propTypes["default"].number,
+
+  /** The largest value allowed for the input. */
+  maxValue: _propTypes["default"].number,
+
+  /** The rendered label for the field. */
+  label: _propTypes["default"].node,
+
+  /** Text rendered below the input. */
+  helperText: _propTypes["default"].node,
+
+  /** If present this prop will cause a help hint to render in the label of the field. */
+  hintText: _propTypes["default"].string,
+
+  /**
+   * Handler that is called when the value changes.
+   * (value: number) => void
+   */
+  onChange: _propTypes["default"].func,
+
+  /** Determines the input status indicator and helper text styling. */
+  status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"])),
+
+  /** The default value (uncontrolled). */
+  defaultValue: _propTypes["default"].number,
+
+  /** The current value (controlled). */
+  value: _propTypes["default"].number
+};

package/lib/cjs/components/NumberField/NumberField.stories.js

@@ -0,0 +1,251 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.WithHelperText = exports.Units = exports.StepValues = exports.MinimumAndMaximumValues = exports.DisabledAndReadOnly = exports.Default = exports.Decimals = exports.CurrencyValues = exports.ControlledState = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _NumberField = _interopRequireDefault(require("./NumberField"));
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+var _react2 = require("@emotion/react");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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; }
+
+var _default = {
+  title: 'Form/NumberField',
+  component: _NumberField["default"],
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control: {
+        type: 'text'
+      },
+      defaultValue: 'Example Label'
+    },
+    hintText: {
+      control: {
+        type: 'text'
+      }
+    },
+    helperText: {
+      control: {
+        type: 'text'
+      }
+    },
+    status: {
+      control: {
+        type: 'select',
+        options: _statuses["default"]
+      },
+      defaultValue: _statuses["default"].DEFAULT
+    },
+    value: {
+      control: {
+        type: 'none'
+      }
+    },
+    step: {
+      control: {
+        type: 'number'
+      },
+      defaultValue: 1
+    },
+    defaultValue: {
+      control: {
+        type: 'none'
+      },
+      defaultValue: 17
+    },
+    formatOptions: {
+      control: {
+        type: 'none'
+      }
+    },
+    placeholder: {
+      control: {
+        type: 'string'
+      }
+    },
+    decrementAriaLabel: {
+      control: {
+        type: 'none'
+      },
+      defaultValue: 'decrement-button'
+    },
+    incrementAriaLabel: {
+      control: {
+        type: 'none'
+      },
+      defaultValue: 'increment-button'
+    },
+    minValue: {
+      control: {
+        type: 'none'
+      }
+    },
+    maxValue: {
+      control: {
+        type: 'none'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_NumberField["default"], args);
+};
+
+exports.Default = Default;
+
+var Decimals = function Decimals() {
+  return (0, _react2.jsx)(_NumberField["default"], {
+    label: "Adjust exposure",
+    defaultValue: 0,
+    formatOptions: {
+      signDisplay: 'exceptZero',
+      minimumFractionDigits: 1,
+      maximumFractionDigits: 2
+    }
+  });
+};
+
+exports.Decimals = Decimals;
+
+var ControlledState = function ControlledState() {
+  var _useState = (0, _react.useState)(12),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  return (0, _react2.jsx)(_NumberField["default"], {
+    label: "Controlled State",
+    value: value,
+    onChange: setValue
+  });
+};
+
+exports.ControlledState = ControlledState;
+
+var CurrencyValues = function CurrencyValues() {
+  return (0, _react2.jsx)(_NumberField["default"], {
+    label: "Transaction amount",
+    defaultValue: 45,
+    formatOptions: {
+      style: 'currency',
+      currency: 'EUR',
+      currencyDisplay: 'code',
+      currencySign: 'accounting'
+    }
+  });
+};
+
+exports.CurrencyValues = CurrencyValues;
+
+var DisabledAndReadOnly = function DisabledAndReadOnly() {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_NumberField["default"], {
+    label: "Disabled",
+    isDisabled: true,
+    value: 25
+  }), (0, _react2.jsx)(_NumberField["default"], {
+    label: "Read only",
+    isReadOnly: true,
+    value: 32,
+    containerProps: {
+      sx: {
+        marginTop: '15px'
+      }
+    }
+  }));
+};
+
+exports.DisabledAndReadOnly = DisabledAndReadOnly;
+
+var MinimumAndMaximumValues = function MinimumAndMaximumValues() {
+  return (0, _react2.jsx)(_NumberField["default"], {
+    label: "Enter your age",
+    minValue: 0
+  });
+};
+
+exports.MinimumAndMaximumValues = MinimumAndMaximumValues;
+
+var StepValues = function StepValues() {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_NumberField["default"], {
+    label: "Step",
+    step: 10
+  }), (0, _react2.jsx)(_NumberField["default"], {
+    label: "Step + minValue",
+    minValue: 2,
+    step: 3,
+    containerProps: {
+      sx: {
+        marginTop: '15px'
+      }
+    }
+  }), (0, _react2.jsx)(_NumberField["default"], {
+    label: "Step + minValue + maxValue",
+    minValue: 2,
+    maxValue: 21,
+    step: 3,
+    sx: {
+      marginTop: '5px'
+    },
+    containerProps: {
+      sx: {
+        marginTop: '15px'
+      }
+    }
+  }));
+};
+
+exports.StepValues = StepValues;
+
+var WithHelperText = function WithHelperText() {
+  return (0, _react2.jsx)(_NumberField["default"], {
+    label: "Helper Text",
+    defaultValue: 88,
+    helperText: "Useful Text"
+  });
+};
+
+exports.WithHelperText = WithHelperText;
+
+var Units = function Units() {
+  return (0, _react2.jsx)(_NumberField["default"], {
+    label: "Package width",
+    defaultValue: 4,
+    formatOptions: {
+      style: 'unit',
+      unit: 'inch',
+      unitDisplay: 'long'
+    }
+  });
+};
+
+exports.Units = Units;