@pingux/astro 2.52.0-alpha.1 → 2.52.0-alpha.3
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.
- package/lib/cjs/components/AccordionGroup/Accordion.styles.d.ts +3 -3
- package/lib/cjs/components/Breadcrumbs/Breadcrumb.styles.d.ts +3 -3
- package/lib/cjs/components/Button/Buttons.styles.d.ts +51 -51
- package/lib/cjs/components/FieldHelperText/FieldHelperText.styles.d.ts +3 -3
- package/lib/cjs/components/Label/Label.d.ts +13 -0
- package/lib/cjs/components/Label/Label.js +8 -26
- package/lib/cjs/components/Label/Label.stories.d.ts +7 -0
- package/lib/cjs/components/Label/Label.stories.js +3 -3
- package/lib/cjs/components/Label/Label.styles.d.ts +2 -0
- package/lib/cjs/components/Label/Label.test.d.ts +1 -0
- package/lib/cjs/components/Label/index.d.ts +1 -0
- package/lib/cjs/components/NumberField/NumberField.mdx +1 -1
- package/lib/cjs/components/SelectField/SelectField.stories.js +3 -3
- package/lib/cjs/components/SelectFieldBase/SelectFieldBase.js +3 -3
- package/lib/cjs/components/SelectFieldBase/SelectFieldBase.test.js +2 -2
- package/lib/cjs/components/Table/Table.styles.d.ts +6 -6
- package/lib/cjs/components/Text/Text.styles.d.ts +91 -90
- package/lib/cjs/components/TextAreaField/TextAreaField.stories.js +3 -3
- package/lib/cjs/components/TextField/TextField.stories.js +3 -3
- package/lib/cjs/hooks/useColumnStyles/useColumnStyles.d.ts +2 -2
- package/lib/cjs/hooks/useField/useField.d.ts +22 -21
- package/lib/cjs/hooks/useField/useField.js +3 -5
- package/lib/cjs/hooks/useField/useField.test.js +4 -4
- package/lib/cjs/hooks/useSelectField/useSelectField.d.ts +2 -3
- package/lib/cjs/hooks/useSelectField/useSelectField.js +2 -2
- package/lib/cjs/types/index.d.ts +1 -0
- package/lib/cjs/types/index.js +29 -18
- package/lib/cjs/types/label.d.ts +25 -0
- package/lib/cjs/types/label.js +6 -0
- package/lib/cjs/types/shared/style.d.ts +3 -0
- package/lib/cjs/utils/devUtils/constants/labelModes.d.ts +5 -0
- package/lib/components/Label/Label.js +6 -24
- package/lib/components/Label/Label.stories.js +1 -1
- package/lib/components/Label/Label.styles.js +1 -0
- package/lib/components/NumberField/NumberField.mdx +1 -1
- package/lib/components/SelectField/SelectField.stories.js +1 -1
- package/lib/components/SelectFieldBase/SelectFieldBase.js +1 -1
- package/lib/components/SelectFieldBase/SelectFieldBase.test.js +1 -1
- package/lib/components/TextAreaField/TextAreaField.stories.js +1 -1
- package/lib/components/TextField/TextField.stories.js +1 -1
- package/lib/hooks/useField/useField.js +1 -3
- package/lib/hooks/useField/useField.test.js +1 -1
- package/lib/hooks/useSelectField/useSelectField.js +1 -1
- package/lib/types/index.js +1 -0
- package/lib/types/label.js +1 -0
- package/package.json +1 -1
- /package/lib/cjs/{components/Label/constants.js → utils/devUtils/constants/labelModes.js} +0 -0
- /package/lib/{components/Label/constants.js → utils/devUtils/constants/labelModes.js} +0 -0
@@ -3,8 +3,7 @@ import { AriaButtonProps } from 'react-aria';
|
|
3
3
|
import { SelectState } from 'react-stately';
|
4
4
|
import { CollectionChildren } from '@react-types/shared';
|
5
5
|
import { LabelProps as ThemeUILabelProps } from 'theme-ui';
|
6
|
-
import { Axis, BoxProps, FocusableElement, ListBoxProps, PlacementAxis, ReactRef, StyleProps } from '../../types';
|
7
|
-
import { LabelMode } from '../useColumnStyles/useColumnStyles';
|
6
|
+
import { Axis, BoxProps, FocusableElement, LabelModeProps, ListBoxProps, PlacementAxis, ReactRef, StyleProps } from '../../types';
|
8
7
|
import { FieldControlInputProps } from '../useField/useField';
|
9
8
|
interface UseSelectFieldProps<T> {
|
10
9
|
children: CollectionChildren<T>;
|
@@ -35,7 +34,7 @@ interface UseSelectFieldProps<T> {
|
|
35
34
|
listBoxProps?: ListBoxProps;
|
36
35
|
labelProps?: ThemeUILabelProps;
|
37
36
|
containerProps?: BoxProps;
|
38
|
-
labelMode:
|
37
|
+
labelMode: LabelModeProps;
|
39
38
|
}
|
40
39
|
interface UseSelectFieldReturnProps {
|
41
40
|
columnStyleProps: StyleProps;
|
@@ -23,10 +23,10 @@ var _react = _interopRequireWildcard(require("react"));
|
|
23
23
|
var _reactAria = require("react-aria");
|
24
24
|
var _reactStately = require("react-stately");
|
25
25
|
var _utils = require("@react-aria/utils");
|
26
|
-
var _constants = require("../../components/Label/constants");
|
27
26
|
var _ListBox = _interopRequireDefault(require("../../components/ListBox/ListBox"));
|
28
27
|
var _PopoverContainer = _interopRequireDefault(require("../../components/PopoverContainer"));
|
29
28
|
var _ScrollBox = _interopRequireDefault(require("../../components/ScrollBox"));
|
29
|
+
var _labelModes = require("../../utils/devUtils/constants/labelModes");
|
30
30
|
var _ = require("..");
|
31
31
|
var _react2 = require("@emotion/react");
|
32
32
|
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); }
|
@@ -117,7 +117,7 @@ var useSelectField = function useSelectField(props, ref) {
|
|
117
117
|
delete menuProps.shouldFocusOnHover;
|
118
118
|
delete menuProps.disallowEmptySelection;
|
119
119
|
var _useField = (0, _.useField)(_objectSpread(_objectSpread({}, props), {}, {
|
120
|
-
placeholder: props.labelMode ===
|
120
|
+
placeholder: props.labelMode === _labelModes.modes.FLOAT ? '' : placeholder,
|
121
121
|
labelProps: _objectSpread(_objectSpread({}, props.labelProps), labelProps),
|
122
122
|
containerProps: _objectSpread({
|
123
123
|
isFloatLabelActive: !!state.selectedItem
|
package/lib/cjs/types/index.d.ts
CHANGED
package/lib/cjs/types/index.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31;
|
3
|
+
var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32;
|
4
4
|
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
5
5
|
var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
|
6
6
|
var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
|
@@ -161,8 +161,19 @@ _forEachInstanceProperty(_context14 = _Object$keys(_item)).call(_context14, func
|
|
161
161
|
}
|
162
162
|
});
|
163
163
|
});
|
164
|
+
var _label = require("./label");
|
165
|
+
_forEachInstanceProperty(_context15 = _Object$keys(_label)).call(_context15, function (key) {
|
166
|
+
if (key === "default" || key === "__esModule") return;
|
167
|
+
if (key in exports && exports[key] === _label[key]) return;
|
168
|
+
_Object$defineProperty(exports, key, {
|
169
|
+
enumerable: true,
|
170
|
+
get: function get() {
|
171
|
+
return _label[key];
|
172
|
+
}
|
173
|
+
});
|
174
|
+
});
|
164
175
|
var _link = require("./link");
|
165
|
-
_forEachInstanceProperty(
|
176
|
+
_forEachInstanceProperty(_context16 = _Object$keys(_link)).call(_context16, function (key) {
|
166
177
|
if (key === "default" || key === "__esModule") return;
|
167
178
|
if (key in exports && exports[key] === _link[key]) return;
|
168
179
|
_Object$defineProperty(exports, key, {
|
@@ -173,7 +184,7 @@ _forEachInstanceProperty(_context15 = _Object$keys(_link)).call(_context15, func
|
|
173
184
|
});
|
174
185
|
});
|
175
186
|
var _listBox = require("./listBox");
|
176
|
-
_forEachInstanceProperty(
|
187
|
+
_forEachInstanceProperty(_context17 = _Object$keys(_listBox)).call(_context17, function (key) {
|
177
188
|
if (key === "default" || key === "__esModule") return;
|
178
189
|
if (key in exports && exports[key] === _listBox[key]) return;
|
179
190
|
_Object$defineProperty(exports, key, {
|
@@ -184,7 +195,7 @@ _forEachInstanceProperty(_context16 = _Object$keys(_listBox)).call(_context16, f
|
|
184
195
|
});
|
185
196
|
});
|
186
197
|
var _listItem = require("./listItem");
|
187
|
-
_forEachInstanceProperty(
|
198
|
+
_forEachInstanceProperty(_context18 = _Object$keys(_listItem)).call(_context18, function (key) {
|
188
199
|
if (key === "default" || key === "__esModule") return;
|
189
200
|
if (key in exports && exports[key] === _listItem[key]) return;
|
190
201
|
_Object$defineProperty(exports, key, {
|
@@ -195,7 +206,7 @@ _forEachInstanceProperty(_context17 = _Object$keys(_listItem)).call(_context17,
|
|
195
206
|
});
|
196
207
|
});
|
197
208
|
var _loader = require("./loader");
|
198
|
-
_forEachInstanceProperty(
|
209
|
+
_forEachInstanceProperty(_context19 = _Object$keys(_loader)).call(_context19, function (key) {
|
199
210
|
if (key === "default" || key === "__esModule") return;
|
200
211
|
if (key in exports && exports[key] === _loader[key]) return;
|
201
212
|
_Object$defineProperty(exports, key, {
|
@@ -206,7 +217,7 @@ _forEachInstanceProperty(_context18 = _Object$keys(_loader)).call(_context18, fu
|
|
206
217
|
});
|
207
218
|
});
|
208
219
|
var _menu = require("./menu");
|
209
|
-
_forEachInstanceProperty(
|
220
|
+
_forEachInstanceProperty(_context20 = _Object$keys(_menu)).call(_context20, function (key) {
|
210
221
|
if (key === "default" || key === "__esModule") return;
|
211
222
|
if (key in exports && exports[key] === _menu[key]) return;
|
212
223
|
_Object$defineProperty(exports, key, {
|
@@ -217,7 +228,7 @@ _forEachInstanceProperty(_context19 = _Object$keys(_menu)).call(_context19, func
|
|
217
228
|
});
|
218
229
|
});
|
219
230
|
var _menuItem = require("./menuItem");
|
220
|
-
_forEachInstanceProperty(
|
231
|
+
_forEachInstanceProperty(_context21 = _Object$keys(_menuItem)).call(_context21, function (key) {
|
221
232
|
if (key === "default" || key === "__esModule") return;
|
222
233
|
if (key in exports && exports[key] === _menuItem[key]) return;
|
223
234
|
_Object$defineProperty(exports, key, {
|
@@ -228,7 +239,7 @@ _forEachInstanceProperty(_context20 = _Object$keys(_menuItem)).call(_context20,
|
|
228
239
|
});
|
229
240
|
});
|
230
241
|
var _overlayPanel = require("./overlayPanel");
|
231
|
-
_forEachInstanceProperty(
|
242
|
+
_forEachInstanceProperty(_context22 = _Object$keys(_overlayPanel)).call(_context22, function (key) {
|
232
243
|
if (key === "default" || key === "__esModule") return;
|
233
244
|
if (key in exports && exports[key] === _overlayPanel[key]) return;
|
234
245
|
_Object$defineProperty(exports, key, {
|
@@ -239,7 +250,7 @@ _forEachInstanceProperty(_context21 = _Object$keys(_overlayPanel)).call(_context
|
|
239
250
|
});
|
240
251
|
});
|
241
252
|
var _popoverContainer = require("./popoverContainer");
|
242
|
-
_forEachInstanceProperty(
|
253
|
+
_forEachInstanceProperty(_context23 = _Object$keys(_popoverContainer)).call(_context23, function (key) {
|
243
254
|
if (key === "default" || key === "__esModule") return;
|
244
255
|
if (key in exports && exports[key] === _popoverContainer[key]) return;
|
245
256
|
_Object$defineProperty(exports, key, {
|
@@ -250,7 +261,7 @@ _forEachInstanceProperty(_context22 = _Object$keys(_popoverContainer)).call(_con
|
|
250
261
|
});
|
251
262
|
});
|
252
263
|
var _popoverMenu = require("./popoverMenu");
|
253
|
-
_forEachInstanceProperty(
|
264
|
+
_forEachInstanceProperty(_context24 = _Object$keys(_popoverMenu)).call(_context24, function (key) {
|
254
265
|
if (key === "default" || key === "__esModule") return;
|
255
266
|
if (key in exports && exports[key] === _popoverMenu[key]) return;
|
256
267
|
_Object$defineProperty(exports, key, {
|
@@ -261,7 +272,7 @@ _forEachInstanceProperty(_context23 = _Object$keys(_popoverMenu)).call(_context2
|
|
261
272
|
});
|
262
273
|
});
|
263
274
|
var _requirementsList = require("./requirementsList");
|
264
|
-
_forEachInstanceProperty(
|
275
|
+
_forEachInstanceProperty(_context25 = _Object$keys(_requirementsList)).call(_context25, function (key) {
|
265
276
|
if (key === "default" || key === "__esModule") return;
|
266
277
|
if (key in exports && exports[key] === _requirementsList[key]) return;
|
267
278
|
_Object$defineProperty(exports, key, {
|
@@ -272,7 +283,7 @@ _forEachInstanceProperty(_context24 = _Object$keys(_requirementsList)).call(_con
|
|
272
283
|
});
|
273
284
|
});
|
274
285
|
var _rockerButtonGroup = require("./rockerButtonGroup");
|
275
|
-
_forEachInstanceProperty(
|
286
|
+
_forEachInstanceProperty(_context26 = _Object$keys(_rockerButtonGroup)).call(_context26, function (key) {
|
276
287
|
if (key === "default" || key === "__esModule") return;
|
277
288
|
if (key in exports && exports[key] === _rockerButtonGroup[key]) return;
|
278
289
|
_Object$defineProperty(exports, key, {
|
@@ -283,7 +294,7 @@ _forEachInstanceProperty(_context25 = _Object$keys(_rockerButtonGroup)).call(_co
|
|
283
294
|
});
|
284
295
|
});
|
285
296
|
var _scrollBox = require("./scrollBox");
|
286
|
-
_forEachInstanceProperty(
|
297
|
+
_forEachInstanceProperty(_context27 = _Object$keys(_scrollBox)).call(_context27, function (key) {
|
287
298
|
if (key === "default" || key === "__esModule") return;
|
288
299
|
if (key in exports && exports[key] === _scrollBox[key]) return;
|
289
300
|
_Object$defineProperty(exports, key, {
|
@@ -294,7 +305,7 @@ _forEachInstanceProperty(_context26 = _Object$keys(_scrollBox)).call(_context26,
|
|
294
305
|
});
|
295
306
|
});
|
296
307
|
var _separator = require("./separator");
|
297
|
-
_forEachInstanceProperty(
|
308
|
+
_forEachInstanceProperty(_context28 = _Object$keys(_separator)).call(_context28, function (key) {
|
298
309
|
if (key === "default" || key === "__esModule") return;
|
299
310
|
if (key in exports && exports[key] === _separator[key]) return;
|
300
311
|
_Object$defineProperty(exports, key, {
|
@@ -305,7 +316,7 @@ _forEachInstanceProperty(_context27 = _Object$keys(_separator)).call(_context27,
|
|
305
316
|
});
|
306
317
|
});
|
307
318
|
var _shared = require("./shared");
|
308
|
-
_forEachInstanceProperty(
|
319
|
+
_forEachInstanceProperty(_context29 = _Object$keys(_shared)).call(_context29, function (key) {
|
309
320
|
if (key === "default" || key === "__esModule") return;
|
310
321
|
if (key in exports && exports[key] === _shared[key]) return;
|
311
322
|
_Object$defineProperty(exports, key, {
|
@@ -316,7 +327,7 @@ _forEachInstanceProperty(_context28 = _Object$keys(_shared)).call(_context28, fu
|
|
316
327
|
});
|
317
328
|
});
|
318
329
|
var _table = require("./table");
|
319
|
-
_forEachInstanceProperty(
|
330
|
+
_forEachInstanceProperty(_context30 = _Object$keys(_table)).call(_context30, function (key) {
|
320
331
|
if (key === "default" || key === "__esModule") return;
|
321
332
|
if (key in exports && exports[key] === _table[key]) return;
|
322
333
|
_Object$defineProperty(exports, key, {
|
@@ -327,7 +338,7 @@ _forEachInstanceProperty(_context29 = _Object$keys(_table)).call(_context29, fun
|
|
327
338
|
});
|
328
339
|
});
|
329
340
|
var _text = require("./text");
|
330
|
-
_forEachInstanceProperty(
|
341
|
+
_forEachInstanceProperty(_context31 = _Object$keys(_text)).call(_context31, function (key) {
|
331
342
|
if (key === "default" || key === "__esModule") return;
|
332
343
|
if (key in exports && exports[key] === _text[key]) return;
|
333
344
|
_Object$defineProperty(exports, key, {
|
@@ -338,7 +349,7 @@ _forEachInstanceProperty(_context30 = _Object$keys(_text)).call(_context30, func
|
|
338
349
|
});
|
339
350
|
});
|
340
351
|
var _tooltipTrigger = require("./tooltipTrigger");
|
341
|
-
_forEachInstanceProperty(
|
352
|
+
_forEachInstanceProperty(_context32 = _Object$keys(_tooltipTrigger)).call(_context32, function (key) {
|
342
353
|
if (key === "default" || key === "__esModule") return;
|
343
354
|
if (key in exports && exports[key] === _tooltipTrigger[key]) return;
|
344
355
|
_Object$defineProperty(exports, key, {
|
@@ -0,0 +1,25 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { LabelProps as ThemeUILabelProps } from 'theme-ui';
|
3
|
+
import { TestingAttributes } from './shared/test';
|
4
|
+
import { HelpHintProps } from './helpHint';
|
5
|
+
export type LabelModeProps = 'default' | 'float' | 'left';
|
6
|
+
export interface LabelProps extends ThemeUILabelProps, TestingAttributes {
|
7
|
+
children?: React.ReactNode;
|
8
|
+
className?: string;
|
9
|
+
/** Whether the label has disabled styling applied. */
|
10
|
+
isDisabled?: boolean;
|
11
|
+
/** Whether the label has required indicator styling applied. */
|
12
|
+
isRequired?: boolean;
|
13
|
+
/** Determines the behavior pattern for the label. */
|
14
|
+
mode?: LabelModeProps;
|
15
|
+
labelMode?: LabelModeProps;
|
16
|
+
/** The visual component used to mark an input as required within the label. */
|
17
|
+
requiredIndicator?: React.ReactNode;
|
18
|
+
/** If present this prop will cause a help hint to render in the label. */
|
19
|
+
hintText?: string;
|
20
|
+
/** Props object that is spread directly into the helphint element. */
|
21
|
+
helpHintProps?: HelpHintProps;
|
22
|
+
statusClasses?: {
|
23
|
+
[className: string]: boolean;
|
24
|
+
};
|
25
|
+
}
|
@@ -20,4 +20,7 @@ export type PanelSize = 'small' | 'medium' | 'large' | 'full' | 'custom';
|
|
20
20
|
type IconTShirtSize = 'xs' | 'sm' | 'md';
|
21
21
|
type pixelSize = 'em' | 'px' | 'rem';
|
22
22
|
export type IconSize = IconTShirtSize | number | `${number}${pixelSize}`;
|
23
|
+
export type overflowWrap = 'normal' | 'break-word' | 'anywhere' | 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';
|
24
|
+
export type wordBreak = 'normal' | 'break-all' | 'keep-all' | 'break-word' | 'initial' | 'inherit';
|
25
|
+
export type wordWrap = 'normal' | 'break-word' | 'initial' | 'inherit';
|
23
26
|
export {};
|
@@ -2,22 +2,20 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
|
3
3
|
import _styled from "@emotion/styled/base";
|
4
4
|
var _excluded = ["children", "className", "isDisabled", "isRequired", "mode", "requiredIndicator", "hintText", "helpHintProps"];
|
5
|
-
import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
|
6
5
|
import React, { forwardRef } from 'react';
|
7
|
-
import PropTypes from 'prop-types';
|
8
6
|
import { flexbox, layout } from 'styled-system';
|
9
7
|
import { Label as ThemeUILabel } from 'theme-ui';
|
10
8
|
import { usePropWarning, useStatusClasses } from '../../hooks';
|
9
|
+
import { modes } from '../../utils/devUtils/constants/labelModes';
|
11
10
|
import Box from '../Box';
|
12
11
|
import HelpHint from '../HelpHint';
|
13
|
-
import { modes } from './constants';
|
14
12
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
15
13
|
var ExtendedLabel = /*#__PURE__*/_styled(ThemeUILabel, process.env.NODE_ENV === "production" ? {
|
16
|
-
target: "
|
14
|
+
target: "e19mxf30"
|
17
15
|
} : {
|
18
|
-
target: "
|
16
|
+
target: "e19mxf30",
|
19
17
|
label: "ExtendedLabel"
|
20
|
-
})(layout, flexbox, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
18
|
+
})(layout, flexbox, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xhYmVsL0xhYmVsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXc0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvTGFiZWwvTGFiZWwudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBmbGV4Ym94LCBsYXlvdXQgfSBmcm9tICdzdHlsZWQtc3lzdGVtJztcbmltcG9ydCB7IExhYmVsIGFzIFRoZW1lVUlMYWJlbCB9IGZyb20gJ3RoZW1lLXVpJztcblxuaW1wb3J0IHsgdXNlUHJvcFdhcm5pbmcsIHVzZVN0YXR1c0NsYXNzZXMgfSBmcm9tICcuLi8uLi9ob29rcyc7XG5pbXBvcnQgeyBMYWJlbE1vZGVQcm9wcywgTGFiZWxQcm9wcyB9IGZyb20gJy4uLy4uL3R5cGVzJztcbmltcG9ydCB7IG1vZGVzIH0gZnJvbSAnLi4vLi4vdXRpbHMvZGV2VXRpbHMvY29uc3RhbnRzL2xhYmVsTW9kZXMnO1xuaW1wb3J0IEJveCBmcm9tICcuLi9Cb3gnO1xuaW1wb3J0IEhlbHBIaW50IGZyb20gJy4uL0hlbHBIaW50JztcblxuY29uc3QgRXh0ZW5kZWRMYWJlbCA9IHN0eWxlZChUaGVtZVVJTGFiZWwpKGxheW91dCwgZmxleGJveCk7XG5cbmNvbnN0IGRlZmF1bHRJbmRpY2F0b3IgPSAoXG4gIDxCb3ggdmFyaWFudD1cImZvcm1zLmxhYmVsLmluZGljYXRvclwiPlxuICAgICpcbiAgPC9Cb3g+XG4pO1xuXG4vKipcbiAqIEJhc2UgbGFiZWwgZm9yIGFuIGlucHV0LlxuICpcbiAqIEFjY2VwdHMgbW9zdCBvZiB0aGUgc3R5bGluZyBwcm9wcyBmcm9tIFtzdHlsZWQtc3lzdGVtXShodHRwczovL3N0eWxlZC1zeXN0ZW0uY29tL3RhYmxlKS5cbiAqIEJ1aWx0IG9uIHRvcCBvZiB0aGUgW0xhYmVsIGZyb20gVGhlbWUtVUldKGh0dHBzOi8vdGhlbWUtdWkuY29tL2NvbXBvbmVudHMvbGFiZWwpLlxuICpcbiAqICoqTk9URSoqOiBTcGVjaWFsaXplZCBmaWVsZCBjb21wb25lbnRzIGNvbnRhaW4gYnVpbHQtaW4gc3VwcG9ydCBmb3IgbGFiZWxzLiBJdCdzXG4gKiByZWNvbW1lbmRlZCB0byB1c2UgdGhvc2UgaW5zdGVhZCBvZiBhIHN0YW5kYWxvbmUgYExhYmVsYC5cbiAqL1xuXG5jb25zdCBMYWJlbCA9IGZvcndhcmRSZWY8SFRNTExhYmVsRWxlbWVudCwgTGFiZWxQcm9wcz4oKHByb3BzLCByZWYpID0+IHtcbiAgY29uc3Qge1xuICAgIGNoaWxkcmVuLFxuICAgIGNsYXNzTmFtZSxcbiAgICBpc0Rpc2FibGVkLFxuICAgIGlzUmVxdWlyZWQsXG4gICAgbW9kZSA9IG1vZGVzLkRFRkFVTFQgYXMgTGFiZWxNb2RlUHJvcHMsXG4gICAgcmVxdWlyZWRJbmRpY2F0b3IsXG4gICAgaGludFRleHQsXG4gICAgaGVscEhpbnRQcm9wcyxcbiAgICAuLi5vdGhlcnNcbiAgfSA9IHByb3BzO1xuXG4gIHVzZVByb3BXYXJuaW5nKHByb3BzLCAnZGlzYWJsZWQnLCAnaXNEaXNhYmxlZCcpO1xuXG4gIGNvbnN0IHsgY2xhc3NOYW1lcyB9ID0gdXNlU3RhdHVzQ2xhc3NlcyhjbGFzc05hbWUsIHtcbiAgICBpc0Rpc2FibGVkLFxuICAgIGlzUmVxdWlyZWQsXG4gICAgaXNGbG9hdExhYmVsOiBtb2RlID09PSBtb2Rlcy5GTE9BVCxcbiAgICBpc0xlZnRMYWJlbDogbW9kZSA9PT0gbW9kZXMuTEVGVCxcbiAgfSk7XG5cbiAgcmV0dXJuIChcbiAgICA8RXh0ZW5kZWRMYWJlbFxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZXN9XG4gICAgICB7Li4ub3RoZXJzfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICAgIHtcbiAgICAgICAgaXNSZXF1aXJlZFxuICAgICAgICAmJiAocmVxdWlyZWRJbmRpY2F0b3IgfHwgZGVmYXVsdEluZGljYXRvcilcbiAgICAgIH1cbiAgICAgIHtcbiAgICAgICAgaGludFRleHRcbiAgICAgICAgJiYgPEhlbHBIaW50IHsuLi5oZWxwSGludFByb3BzfT57aGludFRleHR9PC9IZWxwSGludD5cbiAgICAgIH1cbiAgICA8L0V4dGVuZGVkTGFiZWw+XG4gICk7XG59KTtcblxuTGFiZWwuZGlzcGxheU5hbWUgPSAnTGFiZWwnO1xuZXhwb3J0IGRlZmF1bHQgTGFiZWw7XG4iXX0= */");
|
21
19
|
var defaultIndicator = ___EmotionJSX(Box, {
|
22
20
|
variant: "forms.label.indicator"
|
23
21
|
}, "*");
|
@@ -37,7 +35,8 @@ var Label = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
37
35
|
className = props.className,
|
38
36
|
isDisabled = props.isDisabled,
|
39
37
|
isRequired = props.isRequired,
|
40
|
-
mode = props.mode,
|
38
|
+
_props$mode = props.mode,
|
39
|
+
mode = _props$mode === void 0 ? modes.DEFAULT : _props$mode,
|
41
40
|
requiredIndicator = props.requiredIndicator,
|
42
41
|
hintText = props.hintText,
|
43
42
|
helpHintProps = props.helpHintProps,
|
@@ -56,22 +55,5 @@ var Label = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
56
55
|
className: classNames
|
57
56
|
}, others), children, isRequired && (requiredIndicator || defaultIndicator), hintText && ___EmotionJSX(HelpHint, helpHintProps, hintText));
|
58
57
|
});
|
59
|
-
Label.propTypes = {
|
60
|
-
/** Whether the label has disabled styling applied. */
|
61
|
-
isDisabled: PropTypes.bool,
|
62
|
-
/** Whether the label has required indicator styling applied. */
|
63
|
-
isRequired: PropTypes.bool,
|
64
|
-
/** Determines the behavior pattern for the label. */
|
65
|
-
mode: PropTypes.oneOf(_Object$values(modes)),
|
66
|
-
/** The visual component used to mark an input as required within the label. */
|
67
|
-
requiredIndicator: PropTypes.node,
|
68
|
-
/** If present this prop will cause a help hint to render in the label. */
|
69
|
-
hintText: PropTypes.string,
|
70
|
-
/** Props object that is spread directly into the helphint element. */
|
71
|
-
helpHintProps: PropTypes.shape({})
|
72
|
-
};
|
73
|
-
Label.defaultProps = {
|
74
|
-
mode: modes.DEFAULT
|
75
|
-
};
|
76
58
|
Label.displayName = 'Label';
|
77
59
|
export default Label;
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
2
2
|
import React from 'react';
|
3
3
|
import { Label } from '../../index';
|
4
|
-
import { modes } from '
|
4
|
+
import { modes } from '../../utils/devUtils/constants/labelModes';
|
5
5
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
6
6
|
export default {
|
7
7
|
title: 'Form/Base Components/Label',
|
@@ -10,6 +10,7 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
|
10
10
|
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; }
|
11
11
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
12
12
|
// Styles for default label and variants go here.
|
13
|
+
|
13
14
|
import { text } from '../Text/Text.styles';
|
14
15
|
var activeFloatLabel = {
|
15
16
|
fontWeight: 0,
|
@@ -13,7 +13,7 @@ The NumberFields should:
|
|
13
13
|
- Use formatOptions props to include unit symbols, as appropriate.
|
14
14
|
- Have a clear and concise label to specify what value the user should enter.
|
15
15
|
|
16
|
-
This component
|
16
|
+
This component should not be used with other digit-based values like date, telephone, and Zip code.
|
17
17
|
|
18
18
|
### Required components
|
19
19
|
|
@@ -31,10 +31,10 @@ import { OverlayProvider } from 'react-aria';
|
|
31
31
|
import { useAsyncList } from 'react-stately';
|
32
32
|
import DocsLayout from '../../../.storybook/storybookDocsLayout';
|
33
33
|
import { Item, Section, SelectField, Separator } from '../../index';
|
34
|
+
import { modes as labelModes } from '../../utils/devUtils/constants/labelModes';
|
34
35
|
import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
|
35
36
|
import { inputFieldAttributeBaseArgTypes } from '../../utils/docUtils/fieldAttributes';
|
36
37
|
import { statusArgTypes } from '../../utils/docUtils/statusProp';
|
37
|
-
import { modes as labelModes } from '../Label/constants';
|
38
38
|
import SelectFieldReadme from './SelectField.mdx';
|
39
39
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
40
40
|
var animals = [{
|
@@ -18,6 +18,7 @@ import { HiddenSelect } from 'react-aria';
|
|
18
18
|
import MenuDown from '@pingux/mdi-react/MenuDownIcon';
|
19
19
|
import PropTypes from 'prop-types';
|
20
20
|
import { v4 as uuid } from 'uuid';
|
21
|
+
import { modes } from '../../utils/devUtils/constants/labelModes';
|
21
22
|
import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
|
22
23
|
import { statusPropTypes } from '../../utils/docUtils/statusProp';
|
23
24
|
import Box from '../Box';
|
@@ -25,7 +26,6 @@ import Button from '../Button';
|
|
25
26
|
import FieldHelperText from '../FieldHelperText';
|
26
27
|
import Icon from '../Icon';
|
27
28
|
import Label from '../Label';
|
28
|
-
import { modes } from '../Label/constants';
|
29
29
|
import Loader from '../Loader';
|
30
30
|
import Text from '../Text';
|
31
31
|
|
@@ -5,10 +5,10 @@ import React, { forwardRef } from 'react';
|
|
5
5
|
import userEvent from '@testing-library/user-event';
|
6
6
|
import { useSelectField } from '../../hooks';
|
7
7
|
import { Item } from '../../index';
|
8
|
+
import { modes } from '../../utils/devUtils/constants/labelModes';
|
8
9
|
import statuses from '../../utils/devUtils/constants/statuses';
|
9
10
|
import { render, screen, within } from '../../utils/testUtils/testWrapper';
|
10
11
|
import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
|
11
|
-
import { modes } from '../Label/constants';
|
12
12
|
import SelectFieldBase from './SelectFieldBase';
|
13
13
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
14
14
|
var items = [{
|
@@ -16,10 +16,10 @@ import React, { useState } from 'react';
|
|
16
16
|
import SearchIcon from '@pingux/mdi-react/SearchIcon';
|
17
17
|
import DocsLayout from '../../../.storybook/storybookDocsLayout';
|
18
18
|
import { Box, Icon, TextAreaField } from '../../index';
|
19
|
+
import { modes as labelModes } from '../../utils/devUtils/constants/labelModes';
|
19
20
|
import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
|
20
21
|
import { inputFieldAttributeBaseArgTypes } from '../../utils/docUtils/fieldAttributes';
|
21
22
|
import { statusArgTypes } from '../../utils/docUtils/statusProp';
|
22
|
-
import { modes as labelModes } from '../Label/constants';
|
23
23
|
import TextAreaFieldReadme from './TextAreaField.mdx';
|
24
24
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
25
25
|
export default {
|
@@ -19,11 +19,11 @@ import isEmpty from 'lodash/isEmpty';
|
|
19
19
|
import DocsLayout from '../../../.storybook/storybookDocsLayout';
|
20
20
|
import useCopyToClipboard from '../../hooks/useCopyToClipboard';
|
21
21
|
import { Box, TextField } from '../../index';
|
22
|
+
import { modes as labelModes } from '../../utils/devUtils/constants/labelModes';
|
22
23
|
import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
|
23
24
|
import { inputFieldAttributeBaseArgTypes } from '../../utils/docUtils/fieldAttributes';
|
24
25
|
import { statusArgTypes } from '../../utils/docUtils/statusProp';
|
25
26
|
import CopyButton from '../CopyText/CopyButton';
|
26
|
-
import { modes as labelModes } from '../Label/constants';
|
27
27
|
import TextFieldReadme from './TextField.mdx';
|
28
28
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
29
29
|
export default {
|
@@ -19,7 +19,7 @@ import { useFocusWithin } from '@react-aria/interactions';
|
|
19
19
|
|
20
20
|
import noop from 'lodash/noop';
|
21
21
|
import omit from 'lodash/omit';
|
22
|
-
import { modes as labelModes } from '../../
|
22
|
+
import { modes as labelModes } from '../../utils/devUtils/constants/labelModes';
|
23
23
|
import statuses from '../../utils/devUtils/constants/statuses';
|
24
24
|
import { getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
|
25
25
|
import { useStatusClasses } from '..';
|
@@ -30,8 +30,6 @@ import { useStatusClasses } from '..';
|
|
30
30
|
* @returns {{}} Prop objects to be spread into field components.
|
31
31
|
*/
|
32
32
|
|
33
|
-
// TODO: replace with LabelProps instead of ThemeUILabelProps
|
34
|
-
// once Label component is rewritten to ts
|
35
33
|
var useField = function useField(props) {
|
36
34
|
var autocomplete = props.autocomplete,
|
37
35
|
autoComplete = props.autoComplete,
|
@@ -11,7 +11,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
|
|
11
11
|
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; }
|
12
12
|
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
13
13
|
import { act, renderHook } from '@testing-library/react-hooks';
|
14
|
-
import { modes as labelModes } from '../../
|
14
|
+
import { modes as labelModes } from '../../utils/devUtils/constants/labelModes';
|
15
15
|
import statuses from '../../utils/devUtils/constants/statuses';
|
16
16
|
import useField from './useField';
|
17
17
|
var defaultProps = {
|
@@ -18,10 +18,10 @@ import { useSelectState } from 'react-stately';
|
|
18
18
|
import { useResizeObserver } from '@react-aria/utils';
|
19
19
|
// eslint-disable-next-line import/no-unresolved
|
20
20
|
|
21
|
-
import { modes } from '../../components/Label/constants';
|
22
21
|
import ListBox from '../../components/ListBox/ListBox';
|
23
22
|
import PopoverContainer from '../../components/PopoverContainer';
|
24
23
|
import ScrollBox from '../../components/ScrollBox';
|
24
|
+
import { modes } from '../../utils/devUtils/constants/labelModes';
|
25
25
|
import { useColumnStyles, useDeprecationWarning, useField } from '..';
|
26
26
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
27
27
|
var useSelectField = function useSelectField(props, ref) {
|
package/lib/types/index.js
CHANGED
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
package/package.json
CHANGED
File without changes
|
File without changes
|