@instructure/ui-simple-select 10.26.1-snapshot-2 → 10.26.2
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/CHANGELOG.md +5 -18
- package/es/SimpleSelect/Group/index.js +2 -1
- package/es/SimpleSelect/Group/props.js +8 -1
- package/es/SimpleSelect/Option/index.js +2 -1
- package/es/SimpleSelect/Option/props.js +10 -1
- package/es/SimpleSelect/index.js +17 -21
- package/es/SimpleSelect/props.js +41 -1
- package/lib/SimpleSelect/Group/index.js +1 -0
- package/lib/SimpleSelect/Group/props.js +9 -1
- package/lib/SimpleSelect/Option/index.js +1 -0
- package/lib/SimpleSelect/Option/props.js +11 -1
- package/lib/SimpleSelect/index.js +16 -20
- package/lib/SimpleSelect/props.js +42 -1
- package/package.json +16 -13
- package/src/SimpleSelect/Group/index.tsx +2 -1
- package/src/SimpleSelect/Group/props.ts +16 -2
- package/src/SimpleSelect/Option/index.tsx +2 -1
- package/src/SimpleSelect/Option/props.ts +17 -2
- package/src/SimpleSelect/index.tsx +19 -26
- package/src/SimpleSelect/props.ts +46 -2
- package/tsconfig.build.json +2 -0
- package/tsconfig.build.tsbuildinfo +1 -1
- package/types/SimpleSelect/Group/index.d.ts +4 -0
- package/types/SimpleSelect/Group/index.d.ts.map +1 -1
- package/types/SimpleSelect/Group/props.d.ts +3 -2
- package/types/SimpleSelect/Group/props.d.ts.map +1 -1
- package/types/SimpleSelect/Option/index.d.ts +8 -0
- package/types/SimpleSelect/Option/index.d.ts.map +1 -1
- package/types/SimpleSelect/Option/props.d.ts +3 -2
- package/types/SimpleSelect/Option/props.d.ts.map +1 -1
- package/types/SimpleSelect/index.d.ts +26 -0
- package/types/SimpleSelect/index.d.ts.map +1 -1
- package/types/SimpleSelect/props.d.ts +3 -2
- package/types/SimpleSelect/props.d.ts.map +1 -1
package/CHANGELOG.md
CHANGED
@@ -3,30 +3,17 @@
|
|
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
|
-
## [10.26.
|
6
|
+
## [10.26.2](https://github.com/instructure/instructure-ui/compare/v10.26.1...v10.26.2) (2025-10-13)
|
7
7
|
|
8
|
+
**Note:** Version bump only for package @instructure/ui-simple-select
|
8
9
|
|
9
|
-
### Features
|
10
10
|
|
11
|
-
* **many:** instUI v11 release ([36f5438](https://github.com/instructure/instructure-ui/commit/36f54382669186227ba24798bbf7201ef2f5cd4c))
|
12
11
|
|
13
12
|
|
14
|
-
### BREAKING CHANGES
|
15
13
|
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
- remove `CodeEditor` component
|
20
|
-
- remove `@instui/theme-registry` package
|
21
|
-
- remove `@testable`, `@experimental`, `@hack` decorators
|
22
|
-
- InstUISettingsProvider's `as` prop is removed
|
23
|
-
- `canvas.use()`, `canvasHighContrast.use()` functions are removed
|
24
|
-
- `canvasThemeLocal`, `canvasHighContrastThemeLocal` are removed
|
25
|
-
- `variables` field on theme objects are removed
|
26
|
-
- remove deprecated props from Table: Row's `isStacked`, Body's
|
27
|
-
`isStacked`, `hover`, and `headers`
|
28
|
-
- `Table`'s `caption` prop is now required
|
29
|
-
- `ui-dom-utils`'s `getComputedStyle` can now return `undefined`
|
14
|
+
## [10.26.1](https://github.com/instructure/instructure-ui/compare/v10.26.0...v10.26.1) (2025-10-06)
|
15
|
+
|
16
|
+
**Note:** Version bump only for package @instructure/ui-simple-select
|
30
17
|
|
31
18
|
|
32
19
|
|
@@ -23,7 +23,7 @@
|
|
23
23
|
*/
|
24
24
|
|
25
25
|
import { Component } from 'react';
|
26
|
-
import { allowedProps } from './props';
|
26
|
+
import { allowedProps, propTypes } from './props';
|
27
27
|
|
28
28
|
/**
|
29
29
|
---
|
@@ -42,6 +42,7 @@ class Group extends Component {
|
|
42
42
|
Group.displayName = "Group";
|
43
43
|
Group.componentId = 'SimpleSelect.Group';
|
44
44
|
Group.allowedProps = allowedProps;
|
45
|
+
Group.propTypes = propTypes;
|
45
46
|
Group.defaultProps = {};
|
46
47
|
export default Group;
|
47
48
|
export { Group };
|
@@ -22,5 +22,12 @@
|
|
22
22
|
* SOFTWARE.
|
23
23
|
*/
|
24
24
|
|
25
|
+
import PropTypes from 'prop-types';
|
26
|
+
import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
|
27
|
+
import { Option } from '../Option';
|
28
|
+
const propTypes = {
|
29
|
+
renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
|
30
|
+
children: ChildrenPropTypes.oneOf([Option])
|
31
|
+
};
|
25
32
|
const allowedProps = ['renderLabel', 'children'];
|
26
|
-
export { allowedProps };
|
33
|
+
export { propTypes, allowedProps };
|
@@ -23,7 +23,7 @@
|
|
23
23
|
*/
|
24
24
|
|
25
25
|
import { Component } from 'react';
|
26
|
-
import { allowedProps } from './props';
|
26
|
+
import { allowedProps, propTypes } from './props';
|
27
27
|
|
28
28
|
/**
|
29
29
|
---
|
@@ -42,6 +42,7 @@ class Option extends Component {
|
|
42
42
|
Option.displayName = "Option";
|
43
43
|
Option.componentId = 'SimpleSelect.Option';
|
44
44
|
Option.allowedProps = allowedProps;
|
45
|
+
Option.propTypes = propTypes;
|
45
46
|
Option.defaultProps = {
|
46
47
|
isDisabled: false
|
47
48
|
};
|
@@ -22,5 +22,14 @@
|
|
22
22
|
* SOFTWARE.
|
23
23
|
*/
|
24
24
|
|
25
|
+
import PropTypes from 'prop-types';
|
26
|
+
const propTypes = {
|
27
|
+
id: PropTypes.string.isRequired,
|
28
|
+
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
|
29
|
+
isDisabled: PropTypes.bool,
|
30
|
+
renderBeforeLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
31
|
+
renderAfterLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
32
|
+
children: PropTypes.string
|
33
|
+
};
|
25
34
|
const allowedProps = ['id', 'value', 'isDisabled', 'renderBeforeLabel', 'renderAfterLabel', 'children'];
|
26
|
-
export { allowedProps };
|
35
|
+
export { propTypes, allowedProps };
|
package/es/SimpleSelect/index.js
CHANGED
@@ -2,7 +2,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
|
|
2
2
|
const _excluded = ["id", "value", "children", "renderBeforeLabel", "renderAfterLabel"],
|
3
3
|
_excluded2 = ["id", "renderLabel", "children"],
|
4
4
|
_excluded3 = ["renderLabel", "value", "defaultValue", "id", "size", "assistiveText", "placeholder", "interaction", "isRequired", "isInline", "width", "optionsMaxWidth", "optionsMaxHeight", "visibleOptionsCount", "messages", "placement", "constrain", "mountNode", "inputRef", "listRef", "renderEmptyOption", "renderBeforeInput", "renderAfterInput", "onFocus", "onBlur", "onShowOptions", "onHideOptions", "children", "layout"];
|
5
|
-
var _dec, _class, _SimpleSelect;
|
5
|
+
var _dec, _dec2, _class, _SimpleSelect;
|
6
6
|
/*
|
7
7
|
* The MIT License (MIT)
|
8
8
|
*
|
@@ -29,11 +29,12 @@ var _dec, _class, _SimpleSelect;
|
|
29
29
|
|
30
30
|
import { isValidElement, Component, Children } from 'react';
|
31
31
|
import * as utils from '@instructure/ui-utils';
|
32
|
+
import { testable } from '@instructure/ui-testable';
|
32
33
|
import { matchComponentTypes, passthroughProps, callRenderProp, getInteraction, withDeterministicId } from '@instructure/ui-react-utils';
|
33
34
|
import { Select } from '@instructure/ui-select';
|
34
35
|
import { Option } from './Option';
|
35
36
|
import { Group } from './Group';
|
36
|
-
import { allowedProps } from './props';
|
37
|
+
import { allowedProps, propTypes } from './props';
|
37
38
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
38
39
|
/**
|
39
40
|
---
|
@@ -41,7 +42,7 @@ category: components
|
|
41
42
|
tags: form, field, dropdown
|
42
43
|
---
|
43
44
|
**/
|
44
|
-
let SimpleSelect = (_dec = withDeterministicId(), _dec(_class = (_SimpleSelect = class SimpleSelect extends Component {
|
45
|
+
let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class = _dec2(_class = (_SimpleSelect = class SimpleSelect extends Component {
|
45
46
|
constructor(props) {
|
46
47
|
super(props);
|
47
48
|
this.ref = null;
|
@@ -313,7 +314,6 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec(_class = (_SimpleSelect =
|
|
313
314
|
});
|
314
315
|
}
|
315
316
|
renderOption(option) {
|
316
|
-
var _option$props$isDisab;
|
317
317
|
const _option$props = option.props,
|
318
318
|
id = _option$props.id,
|
319
319
|
value = _option$props.value,
|
@@ -321,28 +321,25 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec(_class = (_SimpleSelect =
|
|
321
321
|
renderBeforeLabel = _option$props.renderBeforeLabel,
|
322
322
|
renderAfterLabel = _option$props.renderAfterLabel,
|
323
323
|
rest = _objectWithoutProperties(_option$props, _excluded);
|
324
|
-
const isDisabled =
|
324
|
+
const isDisabled = option.props.isDisabled;
|
325
325
|
const isSelected = id === this.state.selectedOptionId;
|
326
326
|
const isHighlighted = id === this.state.highlightedOptionId;
|
327
327
|
const getRenderLabel = renderLabel => {
|
328
328
|
var _renderLabel$prototyp;
|
329
|
-
|
330
|
-
|
331
|
-
|
332
|
-
|
333
|
-
|
334
|
-
|
335
|
-
|
336
|
-
});
|
337
|
-
}
|
338
|
-
return renderLabel;
|
329
|
+
return typeof renderLabel === 'function' && !(renderLabel !== null && renderLabel !== void 0 && (_renderLabel$prototyp = renderLabel.prototype) !== null && _renderLabel$prototyp !== void 0 && _renderLabel$prototyp.isReactComponent) ? renderLabel.bind(null, {
|
330
|
+
id,
|
331
|
+
isDisabled,
|
332
|
+
isSelected,
|
333
|
+
isHighlighted,
|
334
|
+
children
|
335
|
+
}) : renderLabel;
|
339
336
|
};
|
340
337
|
return _jsx(Select.Option, {
|
341
338
|
id: id,
|
342
339
|
value: value,
|
343
|
-
isHighlighted:
|
344
|
-
isSelected:
|
345
|
-
isDisabled: isDisabled,
|
340
|
+
isHighlighted: id === this.state.highlightedOptionId,
|
341
|
+
isSelected: id === this.state.selectedOptionId,
|
342
|
+
isDisabled: option.props.isDisabled,
|
346
343
|
renderBeforeLabel: getRenderLabel(renderBeforeLabel),
|
347
344
|
renderAfterLabel: getRenderLabel(renderAfterLabel),
|
348
345
|
...passthroughProps(rest),
|
@@ -426,11 +423,10 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec(_class = (_SimpleSelect =
|
|
426
423
|
isOptionContentAppliedToInput: this.props.isOptionContentAppliedToInput,
|
427
424
|
layout: layout,
|
428
425
|
...passthroughProps(rest),
|
429
|
-
"data-cid": "SimpleSelect",
|
430
426
|
children: this.renderChildren()
|
431
427
|
});
|
432
428
|
}
|
433
|
-
}, _SimpleSelect.displayName = "SimpleSelect", _SimpleSelect.componentId = 'SimpleSelect', _SimpleSelect.Option = Option, _SimpleSelect.Group = Group, _SimpleSelect.allowedProps = allowedProps, _SimpleSelect.defaultProps = {
|
429
|
+
}, _SimpleSelect.displayName = "SimpleSelect", _SimpleSelect.componentId = 'SimpleSelect', _SimpleSelect.Option = Option, _SimpleSelect.Group = Group, _SimpleSelect.allowedProps = allowedProps, _SimpleSelect.propTypes = propTypes, _SimpleSelect.defaultProps = {
|
434
430
|
size: 'medium',
|
435
431
|
isRequired: false,
|
436
432
|
isInline: false,
|
@@ -439,6 +435,6 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec(_class = (_SimpleSelect =
|
|
439
435
|
constrain: 'window',
|
440
436
|
renderEmptyOption: '---',
|
441
437
|
isOptionContentAppliedToInput: false
|
442
|
-
}, _SimpleSelect)) || _class);
|
438
|
+
}, _SimpleSelect)) || _class) || _class);
|
443
439
|
export { SimpleSelect };
|
444
440
|
export default SimpleSelect;
|
package/es/SimpleSelect/props.js
CHANGED
@@ -22,5 +22,45 @@
|
|
22
22
|
* SOFTWARE.
|
23
23
|
*/
|
24
24
|
|
25
|
+
import PropTypes from 'prop-types';
|
26
|
+
import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
|
27
|
+
import { FormPropTypes } from '@instructure/ui-form-field';
|
28
|
+
import { PositionPropTypes } from '@instructure/ui-position';
|
29
|
+
import { Group } from './Group';
|
30
|
+
import { Option } from './Option';
|
31
|
+
const propTypes = {
|
32
|
+
renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
|
33
|
+
// TODO: it was using the "controllable" util, in the TS migration mimic that behaviour
|
34
|
+
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
35
|
+
defaultValue: PropTypes.string,
|
36
|
+
id: PropTypes.string,
|
37
|
+
size: PropTypes.oneOf(['small', 'medium', 'large']),
|
38
|
+
assistiveText: PropTypes.string,
|
39
|
+
placeholder: PropTypes.string,
|
40
|
+
interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
|
41
|
+
isRequired: PropTypes.bool,
|
42
|
+
isInline: PropTypes.bool,
|
43
|
+
width: PropTypes.string,
|
44
|
+
visibleOptionsCount: PropTypes.number,
|
45
|
+
optionsMaxHeight: PropTypes.string,
|
46
|
+
optionsMaxWidth: PropTypes.string,
|
47
|
+
messages: PropTypes.arrayOf(FormPropTypes.message),
|
48
|
+
placement: PositionPropTypes.placement,
|
49
|
+
constrain: PositionPropTypes.constrain,
|
50
|
+
mountNode: PositionPropTypes.mountNode,
|
51
|
+
onChange: PropTypes.func,
|
52
|
+
onFocus: PropTypes.func,
|
53
|
+
onBlur: PropTypes.func,
|
54
|
+
onShowOptions: PropTypes.func,
|
55
|
+
onHideOptions: PropTypes.func,
|
56
|
+
inputRef: PropTypes.func,
|
57
|
+
listRef: PropTypes.func,
|
58
|
+
renderEmptyOption: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
59
|
+
renderBeforeInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
60
|
+
renderAfterInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
61
|
+
children: ChildrenPropTypes.oneOf([Group, Option]),
|
62
|
+
isOptionContentAppliedToInput: PropTypes.bool,
|
63
|
+
layout: PropTypes.oneOf(['stacked', 'inline'])
|
64
|
+
};
|
25
65
|
const allowedProps = ['renderLabel', 'value', 'defaultValue', 'id', 'size', 'assistiveText', 'placeholder', 'interaction', 'isRequired', 'isInline', 'width', 'visibleOptionsCount', 'optionsMaxHeight', 'optionsMaxWidth', 'messages', 'placement', 'constrain', 'mountNode', 'onChange', 'onFocus', 'onBlur', 'onShowOptions', 'onHideOptions', 'inputRef', 'listRef', 'renderEmptyOption', 'renderBeforeInput', 'renderAfterInput', 'children', 'layout'];
|
26
|
-
export { allowedProps };
|
66
|
+
export { propTypes, allowedProps };
|
@@ -1,9 +1,13 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
4
5
|
value: true
|
5
6
|
});
|
6
|
-
exports.allowedProps = void 0;
|
7
|
+
exports.propTypes = exports.allowedProps = void 0;
|
8
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
9
|
+
var _Children = require("@instructure/ui-prop-types/lib/Children.js");
|
10
|
+
var _Option = require("../Option");
|
7
11
|
/*
|
8
12
|
* The MIT License (MIT)
|
9
13
|
*
|
@@ -28,4 +32,8 @@ exports.allowedProps = void 0;
|
|
28
32
|
* SOFTWARE.
|
29
33
|
*/
|
30
34
|
|
35
|
+
const propTypes = exports.propTypes = {
|
36
|
+
renderLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
|
37
|
+
children: _Children.Children.oneOf([_Option.Option])
|
38
|
+
};
|
31
39
|
const allowedProps = exports.allowedProps = ['renderLabel', 'children'];
|
@@ -1,9 +1,11 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
4
5
|
value: true
|
5
6
|
});
|
6
|
-
exports.allowedProps = void 0;
|
7
|
+
exports.propTypes = exports.allowedProps = void 0;
|
8
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
7
9
|
/*
|
8
10
|
* The MIT License (MIT)
|
9
11
|
*
|
@@ -28,4 +30,12 @@ exports.allowedProps = void 0;
|
|
28
30
|
* SOFTWARE.
|
29
31
|
*/
|
30
32
|
|
33
|
+
const propTypes = exports.propTypes = {
|
34
|
+
id: _propTypes.default.string.isRequired,
|
35
|
+
value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
|
36
|
+
isDisabled: _propTypes.default.bool,
|
37
|
+
renderBeforeLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
38
|
+
renderAfterLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
39
|
+
children: _propTypes.default.string
|
40
|
+
};
|
31
41
|
const allowedProps = exports.allowedProps = ['id', 'value', 'isDisabled', 'renderBeforeLabel', 'renderAfterLabel', 'children'];
|
@@ -9,6 +9,7 @@ exports.default = exports.SimpleSelect = void 0;
|
|
9
9
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
10
10
|
var _react = require("react");
|
11
11
|
var utils = _interopRequireWildcard(require("@instructure/ui-utils"));
|
12
|
+
var _testable = require("@instructure/ui-testable/lib/testable.js");
|
12
13
|
var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
|
13
14
|
var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
|
14
15
|
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
|
@@ -22,7 +23,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
22
23
|
const _excluded = ["id", "value", "children", "renderBeforeLabel", "renderAfterLabel"],
|
23
24
|
_excluded2 = ["id", "renderLabel", "children"],
|
24
25
|
_excluded3 = ["renderLabel", "value", "defaultValue", "id", "size", "assistiveText", "placeholder", "interaction", "isRequired", "isInline", "width", "optionsMaxWidth", "optionsMaxHeight", "visibleOptionsCount", "messages", "placement", "constrain", "mountNode", "inputRef", "listRef", "renderEmptyOption", "renderBeforeInput", "renderAfterInput", "onFocus", "onBlur", "onShowOptions", "onHideOptions", "children", "layout"];
|
25
|
-
var _dec, _class, _SimpleSelect;
|
26
|
+
var _dec, _dec2, _class, _SimpleSelect;
|
26
27
|
/*
|
27
28
|
* The MIT License (MIT)
|
28
29
|
*
|
@@ -52,7 +53,7 @@ category: components
|
|
52
53
|
tags: form, field, dropdown
|
53
54
|
---
|
54
55
|
**/
|
55
|
-
let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec(_class = (_SimpleSelect = class SimpleSelect extends _react.Component {
|
56
|
+
let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_SimpleSelect = class SimpleSelect extends _react.Component {
|
56
57
|
constructor(props) {
|
57
58
|
super(props);
|
58
59
|
this.ref = null;
|
@@ -324,7 +325,6 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
|
|
324
325
|
});
|
325
326
|
}
|
326
327
|
renderOption(option) {
|
327
|
-
var _option$props$isDisab;
|
328
328
|
const _option$props = option.props,
|
329
329
|
id = _option$props.id,
|
330
330
|
value = _option$props.value,
|
@@ -332,28 +332,25 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
|
|
332
332
|
renderBeforeLabel = _option$props.renderBeforeLabel,
|
333
333
|
renderAfterLabel = _option$props.renderAfterLabel,
|
334
334
|
rest = (0, _objectWithoutProperties2.default)(_option$props, _excluded);
|
335
|
-
const isDisabled =
|
335
|
+
const isDisabled = option.props.isDisabled;
|
336
336
|
const isSelected = id === this.state.selectedOptionId;
|
337
337
|
const isHighlighted = id === this.state.highlightedOptionId;
|
338
338
|
const getRenderLabel = renderLabel => {
|
339
339
|
var _renderLabel$prototyp;
|
340
|
-
|
341
|
-
|
342
|
-
|
343
|
-
|
344
|
-
|
345
|
-
|
346
|
-
|
347
|
-
});
|
348
|
-
}
|
349
|
-
return renderLabel;
|
340
|
+
return typeof renderLabel === 'function' && !(renderLabel !== null && renderLabel !== void 0 && (_renderLabel$prototyp = renderLabel.prototype) !== null && _renderLabel$prototyp !== void 0 && _renderLabel$prototyp.isReactComponent) ? renderLabel.bind(null, {
|
341
|
+
id,
|
342
|
+
isDisabled,
|
343
|
+
isSelected,
|
344
|
+
isHighlighted,
|
345
|
+
children
|
346
|
+
}) : renderLabel;
|
350
347
|
};
|
351
348
|
return (0, _jsxRuntime.jsx)(_Select.Select.Option, {
|
352
349
|
id: id,
|
353
350
|
value: value,
|
354
|
-
isHighlighted:
|
355
|
-
isSelected:
|
356
|
-
isDisabled: isDisabled,
|
351
|
+
isHighlighted: id === this.state.highlightedOptionId,
|
352
|
+
isSelected: id === this.state.selectedOptionId,
|
353
|
+
isDisabled: option.props.isDisabled,
|
357
354
|
renderBeforeLabel: getRenderLabel(renderBeforeLabel),
|
358
355
|
renderAfterLabel: getRenderLabel(renderAfterLabel),
|
359
356
|
...(0, _passthroughProps.passthroughProps)(rest),
|
@@ -437,11 +434,10 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
|
|
437
434
|
isOptionContentAppliedToInput: this.props.isOptionContentAppliedToInput,
|
438
435
|
layout: layout,
|
439
436
|
...(0, _passthroughProps.passthroughProps)(rest),
|
440
|
-
"data-cid": "SimpleSelect",
|
441
437
|
children: this.renderChildren()
|
442
438
|
});
|
443
439
|
}
|
444
|
-
}, _SimpleSelect.displayName = "SimpleSelect", _SimpleSelect.componentId = 'SimpleSelect', _SimpleSelect.Option = _Option.Option, _SimpleSelect.Group = _Group.Group, _SimpleSelect.allowedProps = _props.allowedProps, _SimpleSelect.defaultProps = {
|
440
|
+
}, _SimpleSelect.displayName = "SimpleSelect", _SimpleSelect.componentId = 'SimpleSelect', _SimpleSelect.Option = _Option.Option, _SimpleSelect.Group = _Group.Group, _SimpleSelect.allowedProps = _props.allowedProps, _SimpleSelect.propTypes = _props.propTypes, _SimpleSelect.defaultProps = {
|
445
441
|
size: 'medium',
|
446
442
|
isRequired: false,
|
447
443
|
isInline: false,
|
@@ -450,5 +446,5 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
|
|
450
446
|
constrain: 'window',
|
451
447
|
renderEmptyOption: '---',
|
452
448
|
isOptionContentAppliedToInput: false
|
453
|
-
}, _SimpleSelect)) || _class);
|
449
|
+
}, _SimpleSelect)) || _class) || _class);
|
454
450
|
var _default = exports.default = SimpleSelect;
|
@@ -1,9 +1,16 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
4
5
|
value: true
|
5
6
|
});
|
6
|
-
exports.allowedProps = void 0;
|
7
|
+
exports.propTypes = exports.allowedProps = void 0;
|
8
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
9
|
+
var _Children = require("@instructure/ui-prop-types/lib/Children.js");
|
10
|
+
var _FormPropTypes = require("@instructure/ui-form-field/lib/FormPropTypes.js");
|
11
|
+
var _PositionPropTypes = require("@instructure/ui-position/lib/PositionPropTypes.js");
|
12
|
+
var _Group = require("./Group");
|
13
|
+
var _Option = require("./Option");
|
7
14
|
/*
|
8
15
|
* The MIT License (MIT)
|
9
16
|
*
|
@@ -28,4 +35,38 @@ exports.allowedProps = void 0;
|
|
28
35
|
* SOFTWARE.
|
29
36
|
*/
|
30
37
|
|
38
|
+
const propTypes = exports.propTypes = {
|
39
|
+
renderLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
|
40
|
+
// TODO: it was using the "controllable" util, in the TS migration mimic that behaviour
|
41
|
+
value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
42
|
+
defaultValue: _propTypes.default.string,
|
43
|
+
id: _propTypes.default.string,
|
44
|
+
size: _propTypes.default.oneOf(['small', 'medium', 'large']),
|
45
|
+
assistiveText: _propTypes.default.string,
|
46
|
+
placeholder: _propTypes.default.string,
|
47
|
+
interaction: _propTypes.default.oneOf(['enabled', 'disabled', 'readonly']),
|
48
|
+
isRequired: _propTypes.default.bool,
|
49
|
+
isInline: _propTypes.default.bool,
|
50
|
+
width: _propTypes.default.string,
|
51
|
+
visibleOptionsCount: _propTypes.default.number,
|
52
|
+
optionsMaxHeight: _propTypes.default.string,
|
53
|
+
optionsMaxWidth: _propTypes.default.string,
|
54
|
+
messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message),
|
55
|
+
placement: _PositionPropTypes.PositionPropTypes.placement,
|
56
|
+
constrain: _PositionPropTypes.PositionPropTypes.constrain,
|
57
|
+
mountNode: _PositionPropTypes.PositionPropTypes.mountNode,
|
58
|
+
onChange: _propTypes.default.func,
|
59
|
+
onFocus: _propTypes.default.func,
|
60
|
+
onBlur: _propTypes.default.func,
|
61
|
+
onShowOptions: _propTypes.default.func,
|
62
|
+
onHideOptions: _propTypes.default.func,
|
63
|
+
inputRef: _propTypes.default.func,
|
64
|
+
listRef: _propTypes.default.func,
|
65
|
+
renderEmptyOption: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
66
|
+
renderBeforeInput: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
67
|
+
renderAfterInput: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
68
|
+
children: _Children.Children.oneOf([_Group.Group, _Option.Option]),
|
69
|
+
isOptionContentAppliedToInput: _propTypes.default.bool,
|
70
|
+
layout: _propTypes.default.oneOf(['stacked', 'inline'])
|
71
|
+
};
|
31
72
|
const allowedProps = exports.allowedProps = ['renderLabel', 'value', 'defaultValue', 'id', 'size', 'assistiveText', 'placeholder', 'interaction', 'isRequired', 'isInline', 'width', 'visibleOptionsCount', 'optionsMaxHeight', 'optionsMaxWidth', 'messages', 'placement', 'constrain', 'mountNode', 'onChange', 'onFocus', 'onBlur', 'onShowOptions', 'onHideOptions', 'inputRef', 'listRef', 'renderEmptyOption', 'renderBeforeInput', 'renderAfterInput', 'children', 'layout'];
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@instructure/ui-simple-select",
|
3
|
-
"version": "10.26.
|
3
|
+
"version": "10.26.2",
|
4
4
|
"description": "A component for standard select element behavior.",
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
6
6
|
"module": "./es/index.js",
|
@@ -24,25 +24,28 @@
|
|
24
24
|
"license": "MIT",
|
25
25
|
"dependencies": {
|
26
26
|
"@babel/runtime": "^7.27.6",
|
27
|
-
"@instructure/console": "10.26.
|
28
|
-
"@instructure/shared-types": "10.26.
|
29
|
-
"@instructure/ui-form-field": "10.26.
|
30
|
-
"@instructure/ui-position": "10.26.
|
31
|
-
"@instructure/ui-
|
32
|
-
"@instructure/ui-
|
27
|
+
"@instructure/console": "10.26.2",
|
28
|
+
"@instructure/shared-types": "10.26.2",
|
29
|
+
"@instructure/ui-form-field": "10.26.2",
|
30
|
+
"@instructure/ui-position": "10.26.2",
|
31
|
+
"@instructure/ui-prop-types": "10.26.2",
|
32
|
+
"@instructure/ui-react-utils": "10.26.2",
|
33
|
+
"@instructure/ui-select": "10.26.2",
|
34
|
+
"@instructure/ui-testable": "10.26.2",
|
35
|
+
"prop-types": "^15.8.1"
|
33
36
|
},
|
34
37
|
"devDependencies": {
|
35
|
-
"@instructure/ui-babel-preset": "10.26.
|
36
|
-
"@instructure/ui-color-utils": "10.26.
|
37
|
-
"@instructure/ui-icons": "10.26.
|
38
|
-
"@instructure/ui-utils": "10.26.
|
38
|
+
"@instructure/ui-babel-preset": "10.26.2",
|
39
|
+
"@instructure/ui-color-utils": "10.26.2",
|
40
|
+
"@instructure/ui-icons": "10.26.2",
|
41
|
+
"@instructure/ui-utils": "10.26.2",
|
39
42
|
"@testing-library/jest-dom": "^6.6.3",
|
40
|
-
"@testing-library/react": "
|
43
|
+
"@testing-library/react": "^16.0.1",
|
41
44
|
"@testing-library/user-event": "^14.6.1",
|
42
45
|
"vitest": "^3.2.2"
|
43
46
|
},
|
44
47
|
"peerDependencies": {
|
45
|
-
"react": ">=
|
48
|
+
"react": ">=16.14 <=18"
|
46
49
|
},
|
47
50
|
"publishConfig": {
|
48
51
|
"access": "public"
|
@@ -25,7 +25,7 @@
|
|
25
25
|
import { Component } from 'react'
|
26
26
|
|
27
27
|
import type { SimpleSelectGroupProps } from './props'
|
28
|
-
import { allowedProps } from './props'
|
28
|
+
import { allowedProps, propTypes } from './props'
|
29
29
|
|
30
30
|
/**
|
31
31
|
---
|
@@ -37,6 +37,7 @@ class Group extends Component<SimpleSelectGroupProps> {
|
|
37
37
|
static readonly componentId = 'SimpleSelect.Group'
|
38
38
|
|
39
39
|
static allowedProps = allowedProps
|
40
|
+
static propTypes = propTypes
|
40
41
|
static defaultProps = {}
|
41
42
|
|
42
43
|
/* istanbul ignore next */
|
@@ -23,8 +23,16 @@
|
|
23
23
|
*/
|
24
24
|
|
25
25
|
import React from 'react'
|
26
|
+
import PropTypes from 'prop-types'
|
26
27
|
|
27
|
-
import
|
28
|
+
import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
|
29
|
+
|
30
|
+
import { Option } from '../Option'
|
31
|
+
|
32
|
+
import type {
|
33
|
+
OtherHTMLAttributes,
|
34
|
+
PropValidators
|
35
|
+
} from '@instructure/shared-types'
|
28
36
|
|
29
37
|
type SimpleSelectGroupOwnProps = {
|
30
38
|
/**
|
@@ -43,7 +51,13 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
|
|
43
51
|
|
44
52
|
type SimpleSelectGroupProps = SimpleSelectGroupOwnProps &
|
45
53
|
OtherHTMLAttributes<SimpleSelectGroupOwnProps>
|
54
|
+
|
55
|
+
const propTypes: PropValidators<PropKeys> = {
|
56
|
+
renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
|
57
|
+
children: ChildrenPropTypes.oneOf([Option])
|
58
|
+
}
|
59
|
+
|
46
60
|
const allowedProps: AllowedPropKeys = ['renderLabel', 'children']
|
47
61
|
|
48
62
|
export type { SimpleSelectGroupProps }
|
49
|
-
export { allowedProps }
|
63
|
+
export { propTypes, allowedProps }
|
@@ -24,7 +24,7 @@
|
|
24
24
|
|
25
25
|
import { Component } from 'react'
|
26
26
|
import type { SimpleSelectOptionProps } from './props'
|
27
|
-
import { allowedProps } from './props'
|
27
|
+
import { allowedProps, propTypes } from './props'
|
28
28
|
|
29
29
|
/**
|
30
30
|
---
|
@@ -36,6 +36,7 @@ class Option extends Component<SimpleSelectOptionProps> {
|
|
36
36
|
static readonly componentId = 'SimpleSelect.Option'
|
37
37
|
|
38
38
|
static allowedProps = allowedProps
|
39
|
+
static propTypes = propTypes
|
39
40
|
static defaultProps = {
|
40
41
|
isDisabled: false
|
41
42
|
}
|
@@ -23,7 +23,12 @@
|
|
23
23
|
*/
|
24
24
|
|
25
25
|
import React from 'react'
|
26
|
-
import
|
26
|
+
import PropTypes from 'prop-types'
|
27
|
+
|
28
|
+
import type {
|
29
|
+
OtherHTMLAttributes,
|
30
|
+
PropValidators
|
31
|
+
} from '@instructure/shared-types'
|
27
32
|
import { Renderable } from '@instructure/shared-types'
|
28
33
|
|
29
34
|
type OptionProps = {
|
@@ -70,6 +75,16 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
|
|
70
75
|
|
71
76
|
type SimpleSelectOptionProps = SimpleSelectOptionOwnProps &
|
72
77
|
OtherHTMLAttributes<SimpleSelectOptionOwnProps>
|
78
|
+
|
79
|
+
const propTypes: PropValidators<PropKeys> = {
|
80
|
+
id: PropTypes.string.isRequired,
|
81
|
+
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
|
82
|
+
isDisabled: PropTypes.bool,
|
83
|
+
renderBeforeLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
84
|
+
renderAfterLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
85
|
+
children: PropTypes.string
|
86
|
+
}
|
87
|
+
|
73
88
|
const allowedProps: AllowedPropKeys = [
|
74
89
|
'id',
|
75
90
|
'value',
|
@@ -80,4 +95,4 @@ const allowedProps: AllowedPropKeys = [
|
|
80
95
|
]
|
81
96
|
|
82
97
|
export type { SimpleSelectOptionProps, RenderSimpleSelectOptionLabel }
|
83
|
-
export { allowedProps }
|
98
|
+
export { propTypes, allowedProps }
|