@pingux/astro 2.200.3-alpha.0 → 2.200.5-alpha.0

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

@@ -20,8 +20,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
-var _MenuDownIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuDownIcon"));
-var _MenuUpIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuUpIcon"));
 var _i18n = require("@react-aria/i18n");
 var _omit = _interopRequireDefault(require("lodash/omit"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -42,7 +40,11 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useLocale = (0, _i18n.useLocale)(),
     locale = _useLocale.locale;
   var _useGetTheme = (0, _hooks.useGetTheme)(),
+    icons = _useGetTheme.icons,
+    numberFieldArrowSize = _useGetTheme.numberFieldArrowSize,
     isOnyx = _useGetTheme.themeState.isOnyx;
+  var MenuDown = icons.MenuDown,
+    MenuUp = icons.MenuUp;
   var state = (0, _reactStately.useNumberFieldState)(_objectSpread(_objectSpread({}, props), {}, {
     locale: locale
   }));
@@ -70,10 +72,10 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({}, incrementButtonProps, {
     ref: decRef,
     tabIndex: "0",
-    p: 0
+    p: !isOnyx && 0
   }), (0, _react2.jsx)(_.Icon, {
-    icon: _MenuUpIcon["default"],
-    size: isOnyx ? 'sm' : 18,
+    icon: MenuUp,
+    size: numberFieldArrowSize,
     title: {
       name: ''
     },
@@ -81,10 +83,10 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   })), (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({}, decrementButtonProps, {
     ref: incrRef,
     tabIndex: "0",
-    p: 0
+    p: !isOnyx && 0
   }), (0, _react2.jsx)(_.Icon, {
-    icon: _MenuDownIcon["default"],
-    size: isOnyx ? 'sm' : 18,
+    icon: MenuDown,
+    size: numberFieldArrowSize,
     title: {
       name: ''
     },

package/lib/cjs/hooks/useGetTheme/useGetTheme.d.ts

@@ -100,6 +100,7 @@ declare const useGetTheme: () => {
         greyText: string;
     };
     linkSelectFieldWidth: string;
+    numberFieldArrowSize: import("../..").IconSize;
     badgeTextFontSize: string;
     modalCloseIconSize: import("../..").IconSize;
     linkSelectFieldIcon: import("../..").IconSize;
@@ -173,6 +174,7 @@ declare const useGetTheme: () => {
     pageHeaderAddIconMargin: string;
     pageHeaderAddIconSize: string;
     defaultLoaderSize: number;
+    numberFieldArrowSize: import("../..").IconSize;
     modalCloseIconSize: import("../..").IconSize;
     linkSelectFieldIcon: import("../..").IconSize;
     accordionHoveredState: {

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/customProperties/index.d.ts

@@ -61,6 +61,7 @@ export declare const nextGenDarkThemeValues: {
     pageHeaderAddIconMargin: string;
     pageHeaderAddIconSize: string;
     defaultLoaderSize: number;
+    numberFieldArrowSize: import("../../../..").IconSize;
     modalCloseIconSize: import("../../../..").IconSize;
     linkSelectFieldIcon: import("../../../..").IconSize;
     accordionHoveredState: {

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/forms.d.ts

@@ -93,5 +93,25 @@ declare const _default: {
             };
         };
     };
+    numberField: {
+        arrowsWrapper: {
+            '&.is-disabled': {
+                '> input': {
+                    backgroundColor: any;
+                    borderColor: any;
+                };
+            };
+            '&.is-read-only': {
+                '> input': {
+                    backgroundColor: any;
+                    borderColor: any;
+                };
+            };
+            '> textarea': {
+                borderColor: string;
+                backgroundColor: string;
+            };
+        };
+    };
 };
 export default _default;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/forms.js

@@ -80,6 +80,22 @@ var search = {
     fill: "".concat(_onyxTokens.astroTokensDark.color.font.base, " !important")
   }
 };
+var numberField = {
+  arrowsWrapper: _objectSpread(_objectSpread({}, _input.fieldControlWrapper), {}, {
+    '&.is-disabled': {
+      '> input': {
+        backgroundColor: _onyxTokens.astroTokensDark.color.input['readonly-bg'],
+        borderColor: _onyxTokens.astroTokensDark.color.input.border
+      }
+    },
+    '&.is-read-only': {
+      '> input': {
+        backgroundColor: _onyxTokens.astroTokensDark.color.input['readonly-bg'],
+        borderColor: _onyxTokens.astroTokensDark.color.input.border
+      }
+    }
+  })
+};
 var _default = exports["default"] = {
   input: _input.input,
   checkbox: checkbox,
@@ -90,5 +106,6 @@ var _default = exports["default"] = {
     option: _objectSpread({}, selectOption)
   }),
   "switch": switchable,
-  comboBox: _comboBox["default"]
+  comboBox: _comboBox["default"],
+  numberField: numberField
 };

package/lib/cjs/styles/themes/astro/customProperties/index.d.ts

@@ -94,6 +94,7 @@ export declare const astroThemeValues: {
         greyText: string;
     };
     linkSelectFieldWidth: string;
+    numberFieldArrowSize: IconSize;
     badgeTextFontSize: string;
     modalCloseIconSize: IconSize;
     linkSelectFieldIcon: IconSize;

package/lib/cjs/styles/themes/astro/customProperties/index.js

@@ -34,6 +34,7 @@ var defaultIconSize = 'sm';
 var linkSelectFieldWidth = '10em';
 var calendarIconSize = 25;
 var navBarIconSize = 18;
+var numberFieldArrowSize = 18;
 var badgeTextFontSize = '';
 var modalCloseIconSize = 'sm';
 var linkSelectFieldIcon = 'sm';
@@ -69,6 +70,7 @@ var astroThemeValues = exports.astroThemeValues = {
     greyText: '#FFFFFF'
   },
   linkSelectFieldWidth: linkSelectFieldWidth,
+  numberFieldArrowSize: numberFieldArrowSize,
   badgeTextFontSize: badgeTextFontSize,
   modalCloseIconSize: modalCloseIconSize,
   linkSelectFieldIcon: linkSelectFieldIcon

package/lib/cjs/styles/themes/next-gen/colors/colors.js

@@ -95,7 +95,7 @@ var text = {
   primary: _onyxTokens.astroTokens.color.font.base,
   secondary: _onyxTokens.astroTokens.color.font.light,
   message: _onyxTokens.astroTokens.color.gray[700],
-  fieldHelper: _onyxTokens.astroTokens.color.gray[500]
+  fieldHelper: _onyxTokens.astroTokens.color.font.light
 };
 var border = {
   base: _onyxTokens.astroTokens.color.gray[300],

package/lib/cjs/styles/themes/next-gen/customProperties/customSizes.d.ts

@@ -8,6 +8,7 @@ declare const _default: {
     pageHeaderAddIconMargin: string;
     pageHeaderAddIconSize: string;
     defaultLoaderSize: number;
+    numberFieldArrowSize: IconSize;
     modalCloseIconSize: IconSize;
     linkSelectFieldIcon: IconSize;
 };

package/lib/cjs/styles/themes/next-gen/customProperties/customSizes.js

@@ -13,6 +13,7 @@ var pageHeaderTitleMargin = 'sm';
 var pageHeaderAddIconMargin = 'md';
 var pageHeaderAddIconSize = 'md';
 var defaultLoaderSize = 32;
+var numberFieldArrowSize = 'xs';
 var modalCloseIconSize = 'md';
 var linkSelectFieldIcon = 'sm';
 var _default = exports["default"] = {
@@ -24,6 +25,7 @@ var _default = exports["default"] = {
   pageHeaderAddIconMargin: pageHeaderAddIconMargin,
   pageHeaderAddIconSize: pageHeaderAddIconSize,
   defaultLoaderSize: defaultLoaderSize,
+  numberFieldArrowSize: numberFieldArrowSize,
   modalCloseIconSize: modalCloseIconSize,
   linkSelectFieldIcon: linkSelectFieldIcon
 };

package/lib/cjs/styles/themes/next-gen/customProperties/index.d.ts

@@ -9,6 +9,7 @@ export declare const nextGenThemeValues: {
     pageHeaderAddIconMargin: string;
     pageHeaderAddIconSize: string;
     defaultLoaderSize: number;
+    numberFieldArrowSize: IconSize;
     modalCloseIconSize: IconSize;
     linkSelectFieldIcon: IconSize;
     accordionHoveredState: {

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -5447,6 +5447,7 @@ declare const _default: {
                 '&.is-circle': {
                     borderRadius: string;
                 };
+                display: string;
                 borderRadius: string;
                 minHeight: string;
                 minWidth: string;
@@ -5460,6 +5461,7 @@ declare const _default: {
                 '&.is-circle': {
                     borderRadius: string;
                 };
+                display: string;
                 borderRadius: string;
                 minHeight: string;
                 minWidth: string;
@@ -5473,6 +5475,7 @@ declare const _default: {
                 '&.is-circle': {
                     borderRadius: string;
                 };
+                display: string;
                 borderRadius: string;
                 minHeight: string;
                 minWidth: string;
@@ -5486,6 +5489,7 @@ declare const _default: {
                 '&.is-circle': {
                     borderRadius: string;
                 };
+                display: string;
                 borderRadius: string;
                 minHeight: string;
                 minWidth: string;
@@ -5499,6 +5503,7 @@ declare const _default: {
                 '&.is-circle': {
                     borderRadius: string;
                 };
+                display: string;
                 borderRadius: string;
                 minHeight: string;
                 minWidth: string;

package/lib/cjs/styles/themes/next-gen/variants/iconWrapper.d.ts

@@ -5,6 +5,7 @@ declare const _default: {
         '&.is-circle': {
             borderRadius: string;
         };
+        display: string;
         borderRadius: string;
         minHeight: string;
         minWidth: string;
@@ -18,6 +19,7 @@ declare const _default: {
         '&.is-circle': {
             borderRadius: string;
         };
+        display: string;
         borderRadius: string;
         minHeight: string;
         minWidth: string;
@@ -31,6 +33,7 @@ declare const _default: {
         '&.is-circle': {
             borderRadius: string;
         };
+        display: string;
         borderRadius: string;
         minHeight: string;
         minWidth: string;
@@ -44,6 +47,7 @@ declare const _default: {
         '&.is-circle': {
             borderRadius: string;
         };
+        display: string;
         borderRadius: string;
         minHeight: string;
         minWidth: string;
@@ -57,6 +61,7 @@ declare const _default: {
         '&.is-circle': {
             borderRadius: string;
         };
+        display: string;
         borderRadius: string;
         minHeight: string;
         minWidth: string;

package/lib/cjs/styles/themes/next-gen/variants/iconWrapper.js

@@ -24,46 +24,51 @@ var circle = {
     borderRadius: '50%'
   }
 };
+var centered = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+};
 var iconWrapper = {
-  xs: _objectSpread({
+  xs: _objectSpread(_objectSpread({
     borderRadius: '.25rem',
     minHeight: _sizes["default"].avatar.xs,
     minWidth: _sizes["default"].avatar.xs,
     height: _sizes["default"].avatar.xs,
     width: _sizes["default"].avatar.xs,
     fontSize: _sizes["default"].avatarFontSize.xs
-  }, circle),
-  sm: _objectSpread({
+  }, centered), circle),
+  sm: _objectSpread(_objectSpread({
     borderRadius: '.25rem',
     minHeight: _sizes["default"].avatar.sm,
     minWidth: _sizes["default"].avatar.sm,
     height: _sizes["default"].avatar.sm,
     width: _sizes["default"].avatar.sm,
     fontSize: _sizes["default"].avatarFontSize.sm
-  }, circle),
-  md: _objectSpread({
+  }, centered), circle),
+  md: _objectSpread(_objectSpread({
     borderRadius: '.25rem',
     minHeight: _sizes["default"].avatar.md,
     minWidth: _sizes["default"].avatar.md,
     height: _sizes["default"].avatar.md,
     width: _sizes["default"].avatar.md,
     fontSize: _sizes["default"].avatarFontSize.md
-  }, circle),
-  lg: _objectSpread({
+  }, centered), circle),
+  lg: _objectSpread(_objectSpread({
     borderRadius: '.25rem',
     minHeight: _sizes["default"].avatar.lg,
     minWidth: _sizes["default"].avatar.lg,
     height: _sizes["default"].avatar.lg,
     width: _sizes["default"].avatar.lg,
     fontSize: _sizes["default"].avatarFontSize.lg
-  }, circle),
-  xl: _objectSpread({
+  }, centered), circle),
+  xl: _objectSpread(_objectSpread({
     borderRadius: '.25rem',
     minHeight: _sizes["default"].avatar.xl,
     minWidth: _sizes["default"].avatar.xl,
     height: _sizes["default"].avatar.xl,
     width: _sizes["default"].avatar.xl,
     fontSize: _sizes["default"].avatarFontSize.xl
-  }, circle)
+  }, centered), circle)
 };
 var _default = exports["default"] = _objectSpread({}, iconWrapper);

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -762,6 +762,7 @@ declare const _default: {
             '&.is-circle': {
                 borderRadius: string;
             };
+            display: string;
             borderRadius: string;
             minHeight: string;
             minWidth: string;
@@ -775,6 +776,7 @@ declare const _default: {
             '&.is-circle': {
                 borderRadius: string;
             };
+            display: string;
             borderRadius: string;
             minHeight: string;
             minWidth: string;
@@ -788,6 +790,7 @@ declare const _default: {
             '&.is-circle': {
                 borderRadius: string;
             };
+            display: string;
             borderRadius: string;
             minHeight: string;
             minWidth: string;
@@ -801,6 +804,7 @@ declare const _default: {
             '&.is-circle': {
                 borderRadius: string;
             };
+            display: string;
             borderRadius: string;
             minHeight: string;
             minWidth: string;
@@ -814,6 +818,7 @@ declare const _default: {
             '&.is-circle': {
                 borderRadius: string;
             };
+            display: string;
             borderRadius: string;
             minHeight: string;
             minWidth: string;

package/lib/components/NumberField/NumberField.js

@@ -13,8 +13,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _co
 import React, { forwardRef, useImperativeHandle } from 'react';
 import { mergeProps, useNumberField } from 'react-aria';
 import { useNumberFieldState } from 'react-stately';
-import MenuDown from '@pingux/mdi-react/MenuDownIcon';
-import MenuUp from '@pingux/mdi-react/MenuUpIcon';
 import { useLocale } from '@react-aria/i18n';
 import omit from 'lodash/omit';
 import PropTypes from 'prop-types';
@@ -32,7 +30,11 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useLocale = useLocale(),
     locale = _useLocale.locale;
   var _useGetTheme = useGetTheme(),
+    icons = _useGetTheme.icons,
+    numberFieldArrowSize = _useGetTheme.numberFieldArrowSize,
     isOnyx = _useGetTheme.themeState.isOnyx;
+  var MenuDown = icons.MenuDown,
+    MenuUp = icons.MenuUp;
   var state = useNumberFieldState(_objectSpread(_objectSpread({}, props), {}, {
     locale: locale
   }));
@@ -60,10 +62,10 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, ___EmotionJSX(IconButton, _extends({}, incrementButtonProps, {
     ref: decRef,
     tabIndex: "0",
-    p: 0
+    p: !isOnyx && 0
   }), ___EmotionJSX(Icon, {
     icon: MenuUp,
-    size: isOnyx ? 'sm' : 18,
+    size: numberFieldArrowSize,
     title: {
       name: ''
     },
@@ -71,10 +73,10 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
   })), ___EmotionJSX(IconButton, _extends({}, decrementButtonProps, {
     ref: incrRef,
     tabIndex: "0",
-    p: 0
+    p: !isOnyx && 0
   }), ___EmotionJSX(Icon, {
     icon: MenuDown,
-    size: isOnyx ? 'sm' : 18,
+    size: numberFieldArrowSize,
     title: {
       name: ''
     },

package/lib/styles/themeOverrides/nextGenDarkMode/variants/forms.js

@@ -11,7 +11,7 @@ function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymb
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { astroTokensDark } from '@pingux/onyx-tokens';
 import comboBox from './comboBox';
-import { input } from './input';
+import { fieldControlWrapper, input } from './input';
 export var select = {
   backgroundColor: 'backgroundBase',
   borderRadius: astroTokensDark.radius.input,
@@ -73,6 +73,22 @@ var search = {
     fill: "".concat(astroTokensDark.color.font.base, " !important")
   }
 };
+var numberField = {
+  arrowsWrapper: _objectSpread(_objectSpread({}, fieldControlWrapper), {}, {
+    '&.is-disabled': {
+      '> input': {
+        backgroundColor: astroTokensDark.color.input['readonly-bg'],
+        borderColor: astroTokensDark.color.input.border
+      }
+    },
+    '&.is-read-only': {
+      '> input': {
+        backgroundColor: astroTokensDark.color.input['readonly-bg'],
+        borderColor: astroTokensDark.color.input.border
+      }
+    }
+  })
+};
 export default {
   input: input,
   checkbox: checkbox,
@@ -83,5 +99,6 @@ export default {
     option: _objectSpread({}, selectOption)
   }),
   "switch": switchable,
-  comboBox: comboBox
+  comboBox: comboBox,
+  numberField: numberField
 };

package/lib/styles/themes/astro/customProperties/index.js

@@ -22,6 +22,7 @@ var defaultIconSize = 'sm';
 var linkSelectFieldWidth = '10em';
 var calendarIconSize = 25;
 var navBarIconSize = 18;
+var numberFieldArrowSize = 18;
 var badgeTextFontSize = '';
 var modalCloseIconSize = 'sm';
 var linkSelectFieldIcon = 'sm';
@@ -57,6 +58,7 @@ export var astroThemeValues = {
     greyText: '#FFFFFF'
   },
   linkSelectFieldWidth: linkSelectFieldWidth,
+  numberFieldArrowSize: numberFieldArrowSize,
   badgeTextFontSize: badgeTextFontSize,
   modalCloseIconSize: modalCloseIconSize,
   linkSelectFieldIcon: linkSelectFieldIcon

package/lib/styles/themes/next-gen/colors/colors.js

@@ -88,7 +88,7 @@ var text = {
   primary: astroTokens.color.font.base,
   secondary: astroTokens.color.font.light,
   message: astroTokens.color.gray[700],
-  fieldHelper: astroTokens.color.gray[500]
+  fieldHelper: astroTokens.color.font.light
 };
 var border = {
   base: astroTokens.color.gray[300],

package/lib/styles/themes/next-gen/customProperties/customSizes.js

@@ -6,6 +6,7 @@ var pageHeaderTitleMargin = 'sm';
 var pageHeaderAddIconMargin = 'md';
 var pageHeaderAddIconSize = 'md';
 var defaultLoaderSize = 32;
+var numberFieldArrowSize = 'xs';
 var modalCloseIconSize = 'md';
 var linkSelectFieldIcon = 'sm';
 export default {
@@ -17,6 +18,7 @@ export default {
   pageHeaderAddIconMargin: pageHeaderAddIconMargin,
   pageHeaderAddIconSize: pageHeaderAddIconSize,
   defaultLoaderSize: defaultLoaderSize,
+  numberFieldArrowSize: numberFieldArrowSize,
   modalCloseIconSize: modalCloseIconSize,
   linkSelectFieldIcon: linkSelectFieldIcon
 };

package/lib/styles/themes/next-gen/variants/iconWrapper.js

@@ -17,46 +17,51 @@ var circle = {
     borderRadius: '50%'
   }
 };
+var centered = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+};
 var iconWrapper = {
-  xs: _objectSpread({
+  xs: _objectSpread(_objectSpread({
     borderRadius: '.25rem',
     minHeight: sizes.avatar.xs,
     minWidth: sizes.avatar.xs,
     height: sizes.avatar.xs,
     width: sizes.avatar.xs,
     fontSize: sizes.avatarFontSize.xs
-  }, circle),
-  sm: _objectSpread({
+  }, centered), circle),
+  sm: _objectSpread(_objectSpread({
     borderRadius: '.25rem',
     minHeight: sizes.avatar.sm,
     minWidth: sizes.avatar.sm,
     height: sizes.avatar.sm,
     width: sizes.avatar.sm,
     fontSize: sizes.avatarFontSize.sm
-  }, circle),
-  md: _objectSpread({
+  }, centered), circle),
+  md: _objectSpread(_objectSpread({
     borderRadius: '.25rem',
     minHeight: sizes.avatar.md,
     minWidth: sizes.avatar.md,
     height: sizes.avatar.md,
     width: sizes.avatar.md,
     fontSize: sizes.avatarFontSize.md
-  }, circle),
-  lg: _objectSpread({
+  }, centered), circle),
+  lg: _objectSpread(_objectSpread({
     borderRadius: '.25rem',
     minHeight: sizes.avatar.lg,
     minWidth: sizes.avatar.lg,
     height: sizes.avatar.lg,
     width: sizes.avatar.lg,
     fontSize: sizes.avatarFontSize.lg
-  }, circle),
-  xl: _objectSpread({
+  }, centered), circle),
+  xl: _objectSpread(_objectSpread({
     borderRadius: '.25rem',
     minHeight: sizes.avatar.xl,
     minWidth: sizes.avatar.xl,
     height: sizes.avatar.xl,
     width: sizes.avatar.xl,
     fontSize: sizes.avatarFontSize.xl
-  }, circle)
+  }, centered), circle)
 };
 export default _objectSpread({}, iconWrapper);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.200.3-alpha.0",
+  "version": "2.200.5-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",