@pingux/astro 2.62.0 → 2.63.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -33,7 +33,7 @@ var _isValidPositiveInt = _interopRequireDefault(require("../../utils/devUtils/p
33
33
  var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
34
34
  var _statusProp = require("../../utils/docUtils/statusProp");
35
35
  var _react2 = require("@emotion/react");
36
- var _excluded = ["addButtonLabel", "defaultValue", "value", "label", "helperText", "status", "onAdd", "onChange", "onDelete", "renderField", "labelProps", "maxSize", "maxSizeText"],
36
+ var _excluded = ["addButtonLabel", "defaultValue", "fieldControlWrapperProps", "value", "label", "helperText", "status", "onAdd", "onChange", "onDelete", "renderField", "labelProps", "maxSize", "maxSizeText"],
37
37
  _excluded2 = ["id", "onComponentRender", "fieldValue"];
38
38
  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); }
39
39
  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; }
@@ -43,6 +43,7 @@ var ArrayField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
43
43
  var _context2;
44
44
  var addButtonLabel = props.addButtonLabel,
45
45
  defaultValue = props.defaultValue,
46
+ fieldControlWrapperProps = props.fieldControlWrapperProps,
46
47
  value = props.value,
47
48
  label = props.label,
48
49
  helperText = props.helperText,
@@ -139,7 +140,7 @@ var ArrayField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
139
140
  }))), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
140
141
  as: "ul",
141
142
  pl: "0"
142
- }, ariaProps), (0, _map["default"])(_context2 = value || fieldValues).call(_context2, function (_ref2) {
143
+ }, ariaProps, fieldControlWrapperProps), (0, _map["default"])(_context2 = value || fieldValues).call(_context2, function (_ref2) {
143
144
  var id = _ref2.id,
144
145
  onComponentRender = _ref2.onComponentRender,
145
146
  fieldValue = _ref2.fieldValue,
@@ -183,6 +184,8 @@ ArrayField.propTypes = _objectSpread(_objectSpread({
183
184
  label: _propTypes["default"].node,
184
185
  /** Props object that is spread directly into the label element. */
185
186
  labelProps: _propTypes["default"].shape({}),
187
+ /** Props object that is spread directly into the wrapper rendering the fields. */
188
+ fieldControlWrapperProps: _propTypes["default"].shape({}),
186
189
  /** Text to display before add button. Useful for errors or other info. */
187
190
  helperText: _propTypes["default"].node,
188
191
  /** Callback for changing array field data */
@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
12
12
  _Object$defineProperty(exports, "__esModule", {
13
13
  value: true
14
14
  });
15
- exports["default"] = exports.WithLimitedItemsNumber = exports.Uncontrolled = exports.Controlled = void 0;
15
+ exports["default"] = exports.WithLimitedItemsNumber = exports.Uncontrolled = exports.Customizations = exports.Controlled = void 0;
16
16
  var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
17
17
  var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
18
18
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
@@ -277,4 +277,43 @@ var WithLimitedItemsNumber = function WithLimitedItemsNumber(_ref4) {
277
277
  maxSize: 3
278
278
  }, args));
279
279
  };
280
- exports.WithLimitedItemsNumber = WithLimitedItemsNumber;
280
+ exports.WithLimitedItemsNumber = WithLimitedItemsNumber;
281
+ var Customizations = function Customizations(_ref5) {
282
+ var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref5), _ref5));
283
+ return (0, _react2.jsx)(_index.ArrayField, (0, _extends2["default"])({
284
+ fieldControlWrapperProps: {
285
+ overflowY: 'scroll',
286
+ maxHeight: '150px'
287
+ },
288
+ defaultValue: defaultData,
289
+ width: "450px",
290
+ labelProps: {
291
+ hintText: 'Example Hint',
292
+ isRequired: true,
293
+ helpHintProps: {
294
+ direction: 'top'
295
+ }
296
+ },
297
+ renderField: function renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
298
+ return (0, _react2.jsx)(_index.Box, {
299
+ width: "400px"
300
+ }, (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({
301
+ "aria-label": "Text field",
302
+ value: fieldValue,
303
+ onChange: function onChange(e) {
304
+ return onFieldValueChange(e, id);
305
+ },
306
+ mr: "xs",
307
+ slots: {
308
+ inContainer: (0, _react2.jsx)(_index.ArrayFieldDeleteButton, {
309
+ isDisabled: isDisabled,
310
+ onDelete: function onDelete() {
311
+ return onFieldDelete(id);
312
+ }
313
+ })
314
+ }
315
+ }, otherFieldProps)));
316
+ }
317
+ }, args));
318
+ };
319
+ exports.Customizations = Customizations;
@@ -87,13 +87,26 @@ var buttons = {
87
87
  };
88
88
  var forms = {
89
89
  input: {
90
+ '&[type=password]': {
91
+ backgroundColor: 'white !important',
92
+ borderColor: '#caced3 !important'
93
+ },
94
+ '&[type=password]:focus': {
95
+ outline: '1px solid',
96
+ outlineColor: 'accent.60',
97
+ outlineOffset: '0px',
98
+ borderColor: '#4462ED !important'
99
+ },
90
100
  numberField: _objectSpread(_objectSpread(_objectSpread({}, _theme["default"].input), _theme["default"].numberFieldStyles), {}, {
91
101
  '&[type=text]': _objectSpread(_objectSpread({}, _theme["default"].text.inputValue), {}, {
92
102
  backgroundColor: 'white',
93
103
  borderColor: 'neutral.80'
94
104
  }),
95
105
  '&[type=text]:focus': {
96
- borderColor: 'neutral.80'
106
+ outline: '1px solid',
107
+ outlineColor: 'accent.60',
108
+ outlineOffset: '0px',
109
+ borderColor: '#4462ED !important'
97
110
  }
98
111
  })
99
112
  },
@@ -114,7 +127,10 @@ var forms = {
114
127
  })
115
128
  }),
116
129
  '& input[type=search]:focus': {
117
- borderColor: 'neutral.80'
130
+ outline: '1px solid',
131
+ outlineColor: 'accent.60',
132
+ outlineOffset: '0px',
133
+ borderColor: '#4462ED !important'
118
134
  }
119
135
  }
120
136
  },
@@ -9,7 +9,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
9
9
  import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
10
10
  import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
11
11
  import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
12
- var _excluded = ["addButtonLabel", "defaultValue", "value", "label", "helperText", "status", "onAdd", "onChange", "onDelete", "renderField", "labelProps", "maxSize", "maxSizeText"],
12
+ var _excluded = ["addButtonLabel", "defaultValue", "fieldControlWrapperProps", "value", "label", "helperText", "status", "onAdd", "onChange", "onDelete", "renderField", "labelProps", "maxSize", "maxSizeText"],
13
13
  _excluded2 = ["id", "onComponentRender", "fieldValue"];
14
14
  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; }
15
15
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -31,6 +31,7 @@ var ArrayField = /*#__PURE__*/forwardRef(function (props, ref) {
31
31
  var _context2;
32
32
  var addButtonLabel = props.addButtonLabel,
33
33
  defaultValue = props.defaultValue,
34
+ fieldControlWrapperProps = props.fieldControlWrapperProps,
34
35
  value = props.value,
35
36
  label = props.label,
36
37
  helperText = props.helperText,
@@ -127,7 +128,7 @@ var ArrayField = /*#__PURE__*/forwardRef(function (props, ref) {
127
128
  }))), ___EmotionJSX(Box, _extends({
128
129
  as: "ul",
129
130
  pl: "0"
130
- }, ariaProps), _mapInstanceProperty(_context2 = value || fieldValues).call(_context2, function (_ref2) {
131
+ }, ariaProps, fieldControlWrapperProps), _mapInstanceProperty(_context2 = value || fieldValues).call(_context2, function (_ref2) {
131
132
  var id = _ref2.id,
132
133
  onComponentRender = _ref2.onComponentRender,
133
134
  fieldValue = _ref2.fieldValue,
@@ -171,6 +172,8 @@ ArrayField.propTypes = _objectSpread(_objectSpread({
171
172
  label: PropTypes.node,
172
173
  /** Props object that is spread directly into the label element. */
173
174
  labelProps: PropTypes.shape({}),
175
+ /** Props object that is spread directly into the wrapper rendering the fields. */
176
+ fieldControlWrapperProps: PropTypes.shape({}),
174
177
  /** Text to display before add button. Useful for errors or other info. */
175
178
  helperText: PropTypes.node,
176
179
  /** Callback for changing array field data */
@@ -17,7 +17,7 @@ import React from 'react';
17
17
  import { OverlayProvider } from 'react-aria';
18
18
  import { v4 as uuid } from 'uuid';
19
19
  import DocsLayout from '../../../.storybook/storybookDocsLayout';
20
- import { ArrayField, ArrayFieldDeleteButton, Item, SelectField, TextField } from '../../index';
20
+ import { ArrayField, ArrayFieldDeleteButton, Box, Item, SelectField, TextField } from '../../index';
21
21
  import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
22
22
  import ArrayFieldReadme from './ArrayField.mdx';
23
23
  import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -265,4 +265,42 @@ export var WithLimitedItemsNumber = function WithLimitedItemsNumber(_ref4) {
265
265
  },
266
266
  maxSize: 3
267
267
  }, args));
268
+ };
269
+ export var Customizations = function Customizations(_ref5) {
270
+ var args = _extends({}, (_objectDestructuringEmpty(_ref5), _ref5));
271
+ return ___EmotionJSX(ArrayField, _extends({
272
+ fieldControlWrapperProps: {
273
+ overflowY: 'scroll',
274
+ maxHeight: '150px'
275
+ },
276
+ defaultValue: defaultData,
277
+ width: "450px",
278
+ labelProps: {
279
+ hintText: 'Example Hint',
280
+ isRequired: true,
281
+ helpHintProps: {
282
+ direction: 'top'
283
+ }
284
+ },
285
+ renderField: function renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
286
+ return ___EmotionJSX(Box, {
287
+ width: "400px"
288
+ }, ___EmotionJSX(TextField, _extends({
289
+ "aria-label": "Text field",
290
+ value: fieldValue,
291
+ onChange: function onChange(e) {
292
+ return onFieldValueChange(e, id);
293
+ },
294
+ mr: "xs",
295
+ slots: {
296
+ inContainer: ___EmotionJSX(ArrayFieldDeleteButton, {
297
+ isDisabled: isDisabled,
298
+ onDelete: function onDelete() {
299
+ return onFieldDelete(id);
300
+ }
301
+ })
302
+ }
303
+ }, otherFieldProps)));
304
+ }
305
+ }, args));
268
306
  };
@@ -80,13 +80,26 @@ var buttons = {
80
80
  };
81
81
  var forms = {
82
82
  input: {
83
+ '&[type=password]': {
84
+ backgroundColor: 'white !important',
85
+ borderColor: '#caced3 !important'
86
+ },
87
+ '&[type=password]:focus': {
88
+ outline: '1px solid',
89
+ outlineColor: 'accent.60',
90
+ outlineOffset: '0px',
91
+ borderColor: '#4462ED !important'
92
+ },
83
93
  numberField: _objectSpread(_objectSpread(_objectSpread({}, theme.input), theme.numberFieldStyles), {}, {
84
94
  '&[type=text]': _objectSpread(_objectSpread({}, theme.text.inputValue), {}, {
85
95
  backgroundColor: 'white',
86
96
  borderColor: 'neutral.80'
87
97
  }),
88
98
  '&[type=text]:focus': {
89
- borderColor: 'neutral.80'
99
+ outline: '1px solid',
100
+ outlineColor: 'accent.60',
101
+ outlineOffset: '0px',
102
+ borderColor: '#4462ED !important'
90
103
  }
91
104
  })
92
105
  },
@@ -107,7 +120,10 @@ var forms = {
107
120
  })
108
121
  }),
109
122
  '& input[type=search]:focus': {
110
- borderColor: 'neutral.80'
123
+ outline: '1px solid',
124
+ outlineColor: 'accent.60',
125
+ outlineOffset: '0px',
126
+ borderColor: '#4462ED !important'
111
127
  }
112
128
  }
113
129
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.62.0",
3
+ "version": "2.63.0-alpha.0",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",