@pingux/astro 1.3.2-alpha.2 → 1.4.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.
Files changed (8) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/lib/cjs/recipes/EditableInput.stories.js +347 -0
  3. package/lib/cjs/recipes/MaskedValue.stories.js +17 -35
  4. package/lib/cjs/styles/variants/text.js +10 -0
  5. package/lib/recipes/EditableInput.stories.js +314 -0
  6. package/lib/recipes/MaskedValue.stories.js +13 -24
  7. package/lib/styles/variants/text.js +10 -0
  8. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,24 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [1.4.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.3.1...@pingux/astro@1.4.0) (2022-03-15)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * [UIP-5211] Update Masked Value Recipe ([5c030f7](https://gitlab.corp.pingidentity.com/ux/pingux/commit/5c030f7782ce061702a5e94c3cf065d2384dbd46))
12
+ * [UIP-5243] SelectField Float Label Issue ([a69a569](https://gitlab.corp.pingidentity.com/ux/pingux/commit/a69a569fc297110f46b924e6fe1f1f5fcf450c57))
13
+ * [UIP-5306] Unable to get custom values from MultivaluesField ([d9cb8cc](https://gitlab.corp.pingidentity.com/ux/pingux/commit/d9cb8cc63e16e700ec6b0363794215e26b217b51))
14
+
15
+
16
+ ### Features
17
+
18
+ * [UIP-5038] Inline edit recipe using TextAreaField component ([b01b3cd](https://gitlab.corp.pingidentity.com/ux/pingux/commit/b01b3cd5de24ceee174a98da745d6e9d35b3f3f7))
19
+
20
+
21
+
22
+
23
+
6
24
  ## [1.3.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.3.0...@pingux/astro@1.3.1) (2022-03-01)
7
25
 
8
26
 
package/lib/cjs/recipes/EditableInput.stories.js ADDED
@@ -0,0 +1,347 @@
1
+ "use strict";
2
+
3
+ var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
4
+
5
+ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
6
+
7
+ var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
8
+
9
+ _Object$defineProperty2(exports, "__esModule", {
10
+ value: true
11
+ });
12
+
13
+ exports.Default = exports["default"] = void 0;
14
+
15
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
16
+
17
+ var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
18
+
19
+ var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
20
+
21
+ var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
22
+
23
+ var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
24
+
25
+ var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
26
+
27
+ var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
28
+
29
+ var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
30
+
31
+ var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
32
+
33
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
34
+
35
+ var _react = _interopRequireWildcard(require("react"));
36
+
37
+ var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
38
+
39
+ var _CheckIcon = _interopRequireDefault(require("mdi-react/CheckIcon"));
40
+
41
+ var _index = require("../index");
42
+
43
+ var _react2 = require("@emotion/react");
44
+
45
+ function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
46
+
47
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
48
+
49
+ var _default = {
50
+ title: 'Recipes/EditableInput'
51
+ };
52
+ exports["default"] = _default;
53
+ var EditableAreaContext = /*#__PURE__*/(0, _react.createContext)();
54
+ var EditableAreaProvider = EditableAreaContext.Provider;
55
+ var controlProps = {
56
+ confirmBtn: {
57
+ ariaLabel: 'Confirm',
58
+ variant: 'invertedSquare'
59
+ },
60
+ cancelBtn: {
61
+ ariaLabel: 'Cancel',
62
+ variant: 'square'
63
+ }
64
+ };
65
+ var inputProps = {
66
+ label: 'Example label',
67
+ ariaLabel: 'Example aria label'
68
+ };
69
+
70
+ var Default = function Default() {
71
+ return (0, _react2.jsx)(Editable, {
72
+ value: "Some value..."
73
+ }, (0, _react2.jsx)(EditablePreview, null), (0, _react2.jsx)(EditableInput, {
74
+ inputProps: inputProps
75
+ }), (0, _react2.jsx)(EditableControl, {
76
+ controlProps: controlProps
77
+ }));
78
+ };
79
+ /**
80
+ * Editable
81
+ * Wrapper component that provides context value for all editable components
82
+ */
83
+
84
+
85
+ exports.Default = Default;
86
+
87
+ var Editable = function Editable(props) {
88
+ var value = props.value,
89
+ isEditing = props.isEditing;
90
+ var editableContextValue = {
91
+ isEditing: isEditing || false,
92
+ prevValue: '',
93
+ value: value || ''
94
+ };
95
+
96
+ var _useState = (0, _react.useState)(editableContextValue),
97
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
98
+ editableContext = _useState2[0],
99
+ setEditableContext = _useState2[1];
100
+
101
+ return (0, _react2.jsx)(_index.Box, {
102
+ sx: {
103
+ position: 'relative'
104
+ }
105
+ }, (0, _react2.jsx)(EditableAreaProvider, {
106
+ value: [editableContext, setEditableContext]
107
+ }, props.children));
108
+ };
109
+ /**
110
+ * Editable preview
111
+ * Read-only view of the component
112
+ */
113
+
114
+
115
+ var EditablePreview = function EditablePreview() {
116
+ var _useContext = (0, _react.useContext)(EditableAreaContext),
117
+ _useContext2 = (0, _slicedToArray2["default"])(_useContext, 2),
118
+ editableContext = _useContext2[0],
119
+ setEditableContext = _useContext2[1];
120
+
121
+ var _useState3 = (0, _react.useState)(false),
122
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
123
+ hasFocus = _useState4[0],
124
+ setFocus = _useState4[1];
125
+
126
+ (0, _react.useEffect)(function () {
127
+ if (hasFocus && editableContext.isEditing) {
128
+ setFocus(false);
129
+ }
130
+ }, [hasFocus, editableContext.isEditing]);
131
+
132
+ var handleClick = function handleClick() {
133
+ setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
134
+ isEditing: true
135
+ }));
136
+ };
137
+
138
+ var handleKeyDown = function handleKeyDown(e) {
139
+ if (e.key === 'Enter') {
140
+ setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
141
+ isEditing: true
142
+ }));
143
+ }
144
+ };
145
+
146
+ return (0, _react2.jsx)(_index.Box, {
147
+ tabIndex: 0,
148
+ hidden: editableContext.isEditing,
149
+ "aria-hidden": editableContext.isEditing,
150
+ onClick: handleClick,
151
+ onKeyDown: handleKeyDown,
152
+ "aria-readonly": "false",
153
+ "aria-label": "Inline editable text field",
154
+ onFocus: function onFocus() {
155
+ return setFocus(true);
156
+ },
157
+ onBlur: function onBlur() {
158
+ return setFocus(false);
159
+ },
160
+ placeholder: "Click or press enter to edit text",
161
+ sx: {
162
+ whiteSpace: 'pre-line',
163
+ backgroundColor: hasFocus ? 'accent.95' : 'white',
164
+ width: '100%',
165
+ overflowWrap: 'break-word',
166
+ minHeight: '45px',
167
+ paddingLeft: 'xs',
168
+ justifyContent: 'flex-end',
169
+ paddingBottom: 'xs',
170
+ borderBottom: editableContext.isEditing ? '0px' : '1px dashed',
171
+ borderBottomColor: 'active',
172
+ color: 'neutral.10',
173
+ fontSize: 'md',
174
+ fontWeight: 1,
175
+ lineHeight: '18px',
176
+ '&:hover': {
177
+ background: editableContext.isEditing ? 'white' : 'accent.95'
178
+ },
179
+ '&:focus': {
180
+ outline: 'none',
181
+ boxShadow: 'focus',
182
+ borderColor: 'active',
183
+ borderWidth: '1px',
184
+ borderStyle: 'solid'
185
+ }
186
+ }
187
+ }, editableContext.value);
188
+ };
189
+ /**
190
+ * Editable input
191
+ * Swappable with TextField and TextAreaField component
192
+ * Input view of the component
193
+ */
194
+
195
+
196
+ var EditableInput = function EditableInput(props) {
197
+ var ariaLabel = props.inputProps.ariaLabel;
198
+ var editableInput = (0, _react.useRef)(null);
199
+
200
+ var _useContext3 = (0, _react.useContext)(EditableAreaContext),
201
+ _useContext4 = (0, _slicedToArray2["default"])(_useContext3, 2),
202
+ editableContext = _useContext4[0],
203
+ setEditableContext = _useContext4[1];
204
+
205
+ var _useState5 = (0, _react.useState)(editableContext.value || ''),
206
+ _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
207
+ prevValue = _useState6[0],
208
+ setPrevValue = _useState6[1];
209
+
210
+ var _useState7 = (0, _react.useState)(editableContext.value || ''),
211
+ _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
212
+ editingValue = _useState8[0],
213
+ setEditingValue = _useState8[1];
214
+
215
+ (0, _react.useEffect)(function () {
216
+ setEditingValue(editableContext.value);
217
+ }, [editableContext.value]);
218
+ (0, _react.useEffect)(function () {
219
+ if (editableContext.isEditing) {
220
+ editableInput.current.focus();
221
+ }
222
+ }, [editableContext.isEditing]);
223
+
224
+ var handleChange = function handleChange(e) {
225
+ setEditingValue(e.target.value);
226
+ setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
227
+ value: e.target.value
228
+ }));
229
+ };
230
+
231
+ var handleKeyDown = function handleKeyDown(e) {
232
+ if (e.key === 'Escape') {
233
+ setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
234
+ prevValue: prevValue,
235
+ value: prevValue,
236
+ isEditing: false
237
+ }));
238
+ } else if (e.key === 'Enter') {
239
+ if (e.shiftKey) {
240
+ return;
241
+ }
242
+
243
+ setPrevValue(editableContext.value);
244
+ setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
245
+ prevValue: editableContext.value,
246
+ value: editableContext.value,
247
+ isEditing: false
248
+ }));
249
+ }
250
+ };
251
+
252
+ return (0, _react2.jsx)(_index.Box, {
253
+ hidden: !editableContext.isEditing,
254
+ "aria-hidden": !editableContext.isEditing,
255
+ sx: {
256
+ marginRight: '30px',
257
+ flexGrow: 1
258
+ }
259
+ }, (0, _react2.jsx)(_index.TextAreaField, {
260
+ rows: 1,
261
+ ref: editableInput,
262
+ role: "textbox",
263
+ contenteditable: "true",
264
+ "aria-multiline": "true",
265
+ onChange: handleChange,
266
+ onKeyDown: handleKeyDown,
267
+ value: editingValue,
268
+ "aria-label": ariaLabel,
269
+ sx: {
270
+ maxHeight: '150px'
271
+ },
272
+ isUnresizable: true
273
+ }));
274
+ };
275
+ /**
276
+ * Editable controls
277
+ * Use css to position buttons
278
+ * Extend with more button controls as needed
279
+ */
280
+
281
+
282
+ var EditableControl = function EditableControl(props) {
283
+ var confirmBtn = props.controlProps.confirmBtn,
284
+ cancelBtn = props.controlProps.cancelBtn,
285
+ onPress = props.onPress;
286
+
287
+ var _useContext5 = (0, _react.useContext)(EditableAreaContext),
288
+ _useContext6 = (0, _slicedToArray2["default"])(_useContext5, 2),
289
+ editableContext = _useContext6[0],
290
+ setEditableContext = _useContext6[1];
291
+
292
+ var _useState9 = (0, _react.useState)(editableContext.value || ''),
293
+ _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
294
+ prevValue = _useState10[0],
295
+ setPrevValue = _useState10[1];
296
+
297
+ var handleCancel = function handleCancel() {
298
+ setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
299
+ prevValue: prevValue,
300
+ value: prevValue,
301
+ isEditing: false
302
+ }));
303
+ };
304
+
305
+ var handleSubmit = function handleSubmit() {
306
+ setPrevValue(editableContext.value);
307
+ setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
308
+ prevValue: editableContext.value,
309
+ value: editableContext.value,
310
+ isEditing: false
311
+ }));
312
+
313
+ if (onPress) {
314
+ onPress();
315
+ }
316
+ };
317
+
318
+ return (0, _react2.jsx)(_index.Box, {
319
+ hidden: !editableContext.isEditing,
320
+ "aria-hidden": !editableContext.isEditing,
321
+ isRow: true,
322
+ sx: {
323
+ position: 'absolute',
324
+ right: '0',
325
+ top: '27.5%',
326
+ alignItems: 'center',
327
+ justifyContent: 'space-between'
328
+ }
329
+ }, (0, _react2.jsx)(_index.IconButton, {
330
+ onPress: handleSubmit,
331
+ "aria-label": confirmBtn.ariaLabel,
332
+ variant: confirmBtn.variant,
333
+ mr: "15px",
334
+ sx: {
335
+ width: '20px',
336
+ height: '20px'
337
+ }
338
+ }, (0, _react2.jsx)(_index.Icon, {
339
+ icon: _CheckIcon["default"]
340
+ })), (0, _react2.jsx)(_index.IconButton, {
341
+ "aria-label": cancelBtn.ariaLabel,
342
+ onPress: handleCancel,
343
+ variant: cancelBtn.variant
344
+ }, (0, _react2.jsx)(_index.Icon, {
345
+ icon: _CloseIcon["default"]
346
+ })));
347
+ };
package/lib/cjs/recipes/MaskedValue.stories.js CHANGED
@@ -4,49 +4,29 @@ var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopReq
4
4
 
5
5
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
6
6
 
7
- var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
7
+ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
8
8
 
9
- _Object$defineProperty2(exports, "__esModule", {
9
+ _Object$defineProperty(exports, "__esModule", {
10
10
  value: true
11
11
  });
12
12
 
13
13
  exports.Default = exports["default"] = void 0;
14
14
 
15
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
16
-
17
- var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
18
-
19
- var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
20
-
21
- var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
22
-
23
- var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
24
-
25
- var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
26
-
27
- var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
28
-
29
- var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
30
-
31
15
  var _repeat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/repeat"));
32
16
 
33
- var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
34
-
35
17
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
36
18
 
37
19
  var _react = _interopRequireWildcard(require("react"));
38
20
 
39
- var _EyeIcon = _interopRequireDefault(require("mdi-react/EyeIcon"));
21
+ var _EyeOutlineIcon = _interopRequireDefault(require("mdi-react/EyeOutlineIcon"));
40
22
 
41
- var _EyeOffIcon = _interopRequireDefault(require("mdi-react/EyeOffIcon"));
23
+ var _EyeOffOutlineIcon = _interopRequireDefault(require("mdi-react/EyeOffOutlineIcon"));
42
24
 
43
25
  var _index = require("../index");
44
26
 
45
- var _react2 = require("@emotion/react");
46
-
47
- function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
27
+ var _hooks = require("../hooks");
48
28
 
49
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context3; (0, _forEach["default"])(_context3 = ownKeys(Object(source))).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
29
+ var _react2 = require("@emotion/react");
50
30
 
51
31
  var _default = {
52
32
  title: 'Recipes/MaskedValues',
@@ -61,7 +41,7 @@ var _default = {
61
41
  control: {
62
42
  type: 'text'
63
43
  },
64
- defaultValue: 'very-secret-information.?1234512345'
44
+ defaultValue: 'A secret piece of text'
65
45
  }
66
46
  }
67
47
  };
@@ -78,19 +58,21 @@ var Default = function Default(_ref) {
78
58
  isMasked = _useState2[0],
79
59
  setIsMasked = _useState2[1];
80
60
 
61
+ var _useStatusClasses = (0, _hooks.useStatusClasses)(null, {
62
+ isMasked: isMasked
63
+ }),
64
+ classNames = _useStatusClasses.classNames;
65
+
81
66
  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
82
67
  variant: "label"
83
68
  }, dataTitle), (0, _react2.jsx)(_index.Box, {
84
69
  isRow: true,
85
70
  alignItems: "center"
86
71
  }, (0, _react2.jsx)(_index.Text, {
87
- sx: _objectSpread({
88
- width: 255,
89
- wordBreak: 'break-all'
90
- }, isMasked && {
91
- letterSpacing: 2
92
- })
93
- }, isMasked ? (0, _repeat["default"])(_context = '•').call(_context, secretData === null || secretData === void 0 ? void 0 : secretData.length) : secretData), (0, _react2.jsx)(_index.IconButton, {
72
+ variant: "maskedValue",
73
+ className: classNames
74
+ }, isMasked ? (0, _repeat["default"])(_context = '•').call(_context, 99) : secretData), (0, _react2.jsx)(_index.IconButton, {
75
+ "aria-label": isMasked ? 'Show content' : 'Hide content',
94
76
  onPress: function onPress() {
95
77
  return setIsMasked(!isMasked);
96
78
  },
@@ -100,7 +82,7 @@ var Default = function Default(_ref) {
100
82
  alignSelf: 'auto'
101
83
  }
102
84
  }, (0, _react2.jsx)(_index.Icon, {
103
- icon: isMasked ? _EyeOffIcon["default"] : _EyeIcon["default"]
85
+ icon: isMasked ? _EyeOffOutlineIcon["default"] : _EyeOutlineIcon["default"]
104
86
  }))));
105
87
  };
106
88
 
package/lib/cjs/styles/variants/text.js CHANGED
@@ -161,6 +161,15 @@ var navBarHeaderText = _objectSpread(_objectSpread({}, wordWrap), {}, {
161
161
  fontWeight: 1
162
162
  });
163
163
 
164
+ var maskedValue = {
165
+ width: 252,
166
+ wordBreak: 'break-all',
167
+ '&.is-masked': {
168
+ whiteSpace: 'nowrap',
169
+ overflow: 'hidden',
170
+ fontWeight: 700
171
+ }
172
+ };
164
173
  var text = {
165
174
  base: base,
166
175
  bodyStrong: _objectSpread(_objectSpread({}, wordWrap), {}, {
@@ -238,6 +247,7 @@ var text = {
238
247
  overflow: 'hidden',
239
248
  textOverflow: 'ellipsis'
240
249
  }),
250
+ maskedValue: maskedValue,
241
251
  expandableRow: expandableRow,
242
252
  navBarHeaderText: navBarHeaderText,
243
253
  navBarSubtitle: navBarSubtitle,
package/lib/recipes/EditableInput.stories.js ADDED
@@ -0,0 +1,314 @@
1
+ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
2
+ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
3
+ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
4
+ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
5
+ import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
6
+ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
7
+ import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
8
+ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
9
+ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
10
+ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
11
+
12
+ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
13
+
14
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
15
+
16
+ import React, { createContext, useContext, useRef, useState, useEffect } from 'react';
17
+ import CloseIcon from 'mdi-react/CloseIcon';
18
+ import CheckIcon from 'mdi-react/CheckIcon';
19
+ import { TextAreaField, IconButton, Icon, Box } from '../index';
20
+ import { jsx as ___EmotionJSX } from "@emotion/react";
21
+ export default {
22
+ title: 'Recipes/EditableInput'
23
+ };
24
+ var EditableAreaContext = /*#__PURE__*/createContext();
25
+ var EditableAreaProvider = EditableAreaContext.Provider;
26
+ var controlProps = {
27
+ confirmBtn: {
28
+ ariaLabel: 'Confirm',
29
+ variant: 'invertedSquare'
30
+ },
31
+ cancelBtn: {
32
+ ariaLabel: 'Cancel',
33
+ variant: 'square'
34
+ }
35
+ };
36
+ var inputProps = {
37
+ label: 'Example label',
38
+ ariaLabel: 'Example aria label'
39
+ };
40
+ export var Default = function Default() {
41
+ return ___EmotionJSX(Editable, {
42
+ value: "Some value..."
43
+ }, ___EmotionJSX(EditablePreview, null), ___EmotionJSX(EditableInput, {
44
+ inputProps: inputProps
45
+ }), ___EmotionJSX(EditableControl, {
46
+ controlProps: controlProps
47
+ }));
48
+ };
49
+ /**
50
+ * Editable
51
+ * Wrapper component that provides context value for all editable components
52
+ */
53
+
54
+ var Editable = function Editable(props) {
55
+ var value = props.value,
56
+ isEditing = props.isEditing;
57
+ var editableContextValue = {
58
+ isEditing: isEditing || false,
59
+ prevValue: '',
60
+ value: value || ''
61
+ };
62
+
63
+ var _useState = useState(editableContextValue),
64
+ _useState2 = _slicedToArray(_useState, 2),
65
+ editableContext = _useState2[0],
66
+ setEditableContext = _useState2[1];
67
+
68
+ return ___EmotionJSX(Box, {
69
+ sx: {
70
+ position: 'relative'
71
+ }
72
+ }, ___EmotionJSX(EditableAreaProvider, {
73
+ value: [editableContext, setEditableContext]
74
+ }, props.children));
75
+ };
76
+ /**
77
+ * Editable preview
78
+ * Read-only view of the component
79
+ */
80
+
81
+
82
+ var EditablePreview = function EditablePreview() {
83
+ var _useContext = useContext(EditableAreaContext),
84
+ _useContext2 = _slicedToArray(_useContext, 2),
85
+ editableContext = _useContext2[0],
86
+ setEditableContext = _useContext2[1];
87
+
88
+ var _useState3 = useState(false),
89
+ _useState4 = _slicedToArray(_useState3, 2),
90
+ hasFocus = _useState4[0],
91
+ setFocus = _useState4[1];
92
+
93
+ useEffect(function () {
94
+ if (hasFocus && editableContext.isEditing) {
95
+ setFocus(false);
96
+ }
97
+ }, [hasFocus, editableContext.isEditing]);
98
+
99
+ var handleClick = function handleClick() {
100
+ setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
101
+ isEditing: true
102
+ }));
103
+ };
104
+
105
+ var handleKeyDown = function handleKeyDown(e) {
106
+ if (e.key === 'Enter') {
107
+ setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
108
+ isEditing: true
109
+ }));
110
+ }
111
+ };
112
+
113
+ return ___EmotionJSX(Box, {
114
+ tabIndex: 0,
115
+ hidden: editableContext.isEditing,
116
+ "aria-hidden": editableContext.isEditing,
117
+ onClick: handleClick,
118
+ onKeyDown: handleKeyDown,
119
+ "aria-readonly": "false",
120
+ "aria-label": "Inline editable text field",
121
+ onFocus: function onFocus() {
122
+ return setFocus(true);
123
+ },
124
+ onBlur: function onBlur() {
125
+ return setFocus(false);
126
+ },
127
+ placeholder: "Click or press enter to edit text",
128
+ sx: {
129
+ whiteSpace: 'pre-line',
130
+ backgroundColor: hasFocus ? 'accent.95' : 'white',
131
+ width: '100%',
132
+ overflowWrap: 'break-word',
133
+ minHeight: '45px',
134
+ paddingLeft: 'xs',
135
+ justifyContent: 'flex-end',
136
+ paddingBottom: 'xs',
137
+ borderBottom: editableContext.isEditing ? '0px' : '1px dashed',
138
+ borderBottomColor: 'active',
139
+ color: 'neutral.10',
140
+ fontSize: 'md',
141
+ fontWeight: 1,
142
+ lineHeight: '18px',
143
+ '&:hover': {
144
+ background: editableContext.isEditing ? 'white' : 'accent.95'
145
+ },
146
+ '&:focus': {
147
+ outline: 'none',
148
+ boxShadow: 'focus',
149
+ borderColor: 'active',
150
+ borderWidth: '1px',
151
+ borderStyle: 'solid'
152
+ }
153
+ }
154
+ }, editableContext.value);
155
+ };
156
+ /**
157
+ * Editable input
158
+ * Swappable with TextField and TextAreaField component
159
+ * Input view of the component
160
+ */
161
+
162
+
163
+ var EditableInput = function EditableInput(props) {
164
+ var ariaLabel = props.inputProps.ariaLabel;
165
+ var editableInput = useRef(null);
166
+
167
+ var _useContext3 = useContext(EditableAreaContext),
168
+ _useContext4 = _slicedToArray(_useContext3, 2),
169
+ editableContext = _useContext4[0],
170
+ setEditableContext = _useContext4[1];
171
+
172
+ var _useState5 = useState(editableContext.value || ''),
173
+ _useState6 = _slicedToArray(_useState5, 2),
174
+ prevValue = _useState6[0],
175
+ setPrevValue = _useState6[1];
176
+
177
+ var _useState7 = useState(editableContext.value || ''),
178
+ _useState8 = _slicedToArray(_useState7, 2),
179
+ editingValue = _useState8[0],
180
+ setEditingValue = _useState8[1];
181
+
182
+ useEffect(function () {
183
+ setEditingValue(editableContext.value);
184
+ }, [editableContext.value]);
185
+ useEffect(function () {
186
+ if (editableContext.isEditing) {
187
+ editableInput.current.focus();
188
+ }
189
+ }, [editableContext.isEditing]);
190
+
191
+ var handleChange = function handleChange(e) {
192
+ setEditingValue(e.target.value);
193
+ setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
194
+ value: e.target.value
195
+ }));
196
+ };
197
+
198
+ var handleKeyDown = function handleKeyDown(e) {
199
+ if (e.key === 'Escape') {
200
+ setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
201
+ prevValue: prevValue,
202
+ value: prevValue,
203
+ isEditing: false
204
+ }));
205
+ } else if (e.key === 'Enter') {
206
+ if (e.shiftKey) {
207
+ return;
208
+ }
209
+
210
+ setPrevValue(editableContext.value);
211
+ setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
212
+ prevValue: editableContext.value,
213
+ value: editableContext.value,
214
+ isEditing: false
215
+ }));
216
+ }
217
+ };
218
+
219
+ return ___EmotionJSX(Box, {
220
+ hidden: !editableContext.isEditing,
221
+ "aria-hidden": !editableContext.isEditing,
222
+ sx: {
223
+ marginRight: '30px',
224
+ flexGrow: 1
225
+ }
226
+ }, ___EmotionJSX(TextAreaField, {
227
+ rows: 1,
228
+ ref: editableInput,
229
+ role: "textbox",
230
+ contenteditable: "true",
231
+ "aria-multiline": "true",
232
+ onChange: handleChange,
233
+ onKeyDown: handleKeyDown,
234
+ value: editingValue,
235
+ "aria-label": ariaLabel,
236
+ sx: {
237
+ maxHeight: '150px'
238
+ },
239
+ isUnresizable: true
240
+ }));
241
+ };
242
+ /**
243
+ * Editable controls
244
+ * Use css to position buttons
245
+ * Extend with more button controls as needed
246
+ */
247
+
248
+
249
+ var EditableControl = function EditableControl(props) {
250
+ var confirmBtn = props.controlProps.confirmBtn,
251
+ cancelBtn = props.controlProps.cancelBtn,
252
+ onPress = props.onPress;
253
+
254
+ var _useContext5 = useContext(EditableAreaContext),
255
+ _useContext6 = _slicedToArray(_useContext5, 2),
256
+ editableContext = _useContext6[0],
257
+ setEditableContext = _useContext6[1];
258
+
259
+ var _useState9 = useState(editableContext.value || ''),
260
+ _useState10 = _slicedToArray(_useState9, 2),
261
+ prevValue = _useState10[0],
262
+ setPrevValue = _useState10[1];
263
+
264
+ var handleCancel = function handleCancel() {
265
+ setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
266
+ prevValue: prevValue,
267
+ value: prevValue,
268
+ isEditing: false
269
+ }));
270
+ };
271
+
272
+ var handleSubmit = function handleSubmit() {
273
+ setPrevValue(editableContext.value);
274
+ setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
275
+ prevValue: editableContext.value,
276
+ value: editableContext.value,
277
+ isEditing: false
278
+ }));
279
+
280
+ if (onPress) {
281
+ onPress();
282
+ }
283
+ };
284
+
285
+ return ___EmotionJSX(Box, {
286
+ hidden: !editableContext.isEditing,
287
+ "aria-hidden": !editableContext.isEditing,
288
+ isRow: true,
289
+ sx: {
290
+ position: 'absolute',
291
+ right: '0',
292
+ top: '27.5%',
293
+ alignItems: 'center',
294
+ justifyContent: 'space-between'
295
+ }
296
+ }, ___EmotionJSX(IconButton, {
297
+ onPress: handleSubmit,
298
+ "aria-label": confirmBtn.ariaLabel,
299
+ variant: confirmBtn.variant,
300
+ mr: "15px",
301
+ sx: {
302
+ width: '20px',
303
+ height: '20px'
304
+ }
305
+ }, ___EmotionJSX(Icon, {
306
+ icon: CheckIcon
307
+ })), ___EmotionJSX(IconButton, {
308
+ "aria-label": cancelBtn.ariaLabel,
309
+ onPress: handleCancel,
310
+ variant: cancelBtn.variant
311
+ }, ___EmotionJSX(Icon, {
312
+ icon: CloseIcon
313
+ })));
314
+ };
package/lib/recipes/MaskedValue.stories.js CHANGED
@@ -1,23 +1,10 @@
1
- import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
2
- import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
3
- import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
4
- import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
5
- import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
6
- import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
7
- import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
8
- import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
9
1
  import _repeatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/repeat";
10
- import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
11
2
  import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
12
-
13
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
14
-
15
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context3; _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
16
-
17
3
  import React, { useState } from 'react';
18
- import EyeIcon from 'mdi-react/EyeIcon';
19
- import EyeOffIcon from 'mdi-react/EyeOffIcon';
4
+ import EyeIcon from 'mdi-react/EyeOutlineIcon';
5
+ import EyeOffIcon from 'mdi-react/EyeOffOutlineIcon';
20
6
  import { Box, Icon, IconButton, Text } from '../index';
7
+ import { useStatusClasses } from '../hooks';
21
8
  import { jsx as ___EmotionJSX } from "@emotion/react";
22
9
  export default {
23
10
  title: 'Recipes/MaskedValues',
@@ -32,7 +19,7 @@ export default {
32
19
  control: {
33
20
  type: 'text'
34
21
  },
35
- defaultValue: 'very-secret-information.?1234512345'
22
+ defaultValue: 'A secret piece of text'
36
23
  }
37
24
  }
38
25
  };
@@ -47,19 +34,21 @@ export var Default = function Default(_ref) {
47
34
  isMasked = _useState2[0],
48
35
  setIsMasked = _useState2[1];
49
36
 
37
+ var _useStatusClasses = useStatusClasses(null, {
38
+ isMasked: isMasked
39
+ }),
40
+ classNames = _useStatusClasses.classNames;
41
+
50
42
  return ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
51
43
  variant: "label"
52
44
  }, dataTitle), ___EmotionJSX(Box, {
53
45
  isRow: true,
54
46
  alignItems: "center"
55
47
  }, ___EmotionJSX(Text, {
56
- sx: _objectSpread({
57
- width: 255,
58
- wordBreak: 'break-all'
59
- }, isMasked && {
60
- letterSpacing: 2
61
- })
62
- }, isMasked ? _repeatInstanceProperty(_context = '•').call(_context, secretData === null || secretData === void 0 ? void 0 : secretData.length) : secretData), ___EmotionJSX(IconButton, {
48
+ variant: "maskedValue",
49
+ className: classNames
50
+ }, isMasked ? _repeatInstanceProperty(_context = '•').call(_context, 99) : secretData), ___EmotionJSX(IconButton, {
51
+ "aria-label": isMasked ? 'Show content' : 'Hide content',
63
52
  onPress: function onPress() {
64
53
  return setIsMasked(!isMasked);
65
54
  },
package/lib/styles/variants/text.js CHANGED
@@ -141,6 +141,15 @@ var navBarHeaderText = _objectSpread(_objectSpread({}, wordWrap), {}, {
141
141
  fontWeight: 1
142
142
  });
143
143
 
144
+ var maskedValue = {
145
+ width: 252,
146
+ wordBreak: 'break-all',
147
+ '&.is-masked': {
148
+ whiteSpace: 'nowrap',
149
+ overflow: 'hidden',
150
+ fontWeight: 700
151
+ }
152
+ };
144
153
  export var text = {
145
154
  base: base,
146
155
  bodyStrong: _objectSpread(_objectSpread({}, wordWrap), {}, {
@@ -218,6 +227,7 @@ export var text = {
218
227
  overflow: 'hidden',
219
228
  textOverflow: 'ellipsis'
220
229
  }),
230
+ maskedValue: maskedValue,
221
231
  expandableRow: expandableRow,
222
232
  navBarHeaderText: navBarHeaderText,
223
233
  navBarSubtitle: navBarSubtitle,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "1.3.2-alpha.2",
3
+ "version": "1.4.0",
4
4
  "description": "PingUX themeable React component library",
5
5
  "author": "ux-development@pingidentity.com",
6
6
  "license": "Apache-2.0",