@televet/kibble-ui 1.14.8 → 1.14.10-beta.4738dbh.1
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/README.md +9 -192
- package/build/components/DataDisplay/Tag/tag.component.d.ts +2 -1
- package/build/components/Overlay/Menu/components/MenuItem/menuItem.argTypes.d.ts +1 -0
- package/build/components/Overlay/Menu/components/MenuItem/menuItem.component.d.ts +3 -1
- package/build/components/Overlay/Menu/menu.argTypes.d.ts +1 -0
- package/build/index.js +27 -20
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,207 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
Kibble is a React component library for use at TeleVet.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Installation
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
- [Create React App](https://github.com/facebook/create-react-app) - (CRA) template to build and publish NPM libraries with **rollup**, **eslint** and **stylelint** configurations.
|
|
10
|
-
- [Chakra UI](https://chakra-ui.com/) - Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
|
|
11
|
-
- [Styled Components](https://styled-components.com/docs) - Visual primitives for the component age.
|
|
12
|
-
- [rollup.js](https://rollupjs.org/guide/en/) - Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.
|
|
13
|
-
- [Storybook](https://storybook.js.org/docs/basics/introduction/) - Build bulletproof UI components faster.
|
|
14
|
-
- [Storybook DocsPage](https://github.com/storybookjs/storybook/tree/master/addons/docs#docspage) - DocsPage pulls information from your stories, components, source code, and story metadata to construct a sensible, zero-config default.
|
|
15
|
-
- [React Testing Library](https://testing-library.com/docs/intro) - Simple and complete testing utilities that encourage good testing practices
|
|
16
|
-
|
|
17
|
-
## Usage within a Televet Project
|
|
18
|
-
|
|
19
|
-
### New Project Setup
|
|
20
|
-
|
|
21
|
-
If your project does not include a `.npmrc`, create it and add the following:
|
|
22
|
-
|
|
23
|
-
`//registry.npmjs.org/:_authToken=${NPM_TOKEN}`
|
|
24
|
-
|
|
25
|
-
Then add the NPM_TOKEN environment variable to your .bash_profile or .zshrc
|
|
26
|
-
|
|
27
|
-
`export NPM_TOKEN=${SOME_TOKEN}`
|
|
28
|
-
|
|
29
|
-
Note: The NPM token can be found here in our [shared accounts table](https://www.notion.so/televet/Shared-Accounts-c691ae4e0dc8482c876aa0f4a56d8ea7)
|
|
30
|
-
|
|
31
|
-
### Install in project
|
|
32
|
-
|
|
33
|
-
`npm i --save @televet/kibble-ui`
|
|
34
|
-
|
|
35
|
-
```
|
|
36
|
-
import {
|
|
37
|
-
ThemeProvider,
|
|
38
|
-
theme,
|
|
39
|
-
Button,
|
|
40
|
-
.... and all other components
|
|
41
|
-
} from 'kibble-ui';
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
## Development Setup
|
|
45
|
-
|
|
46
|
-
### Linking Projects for Local Development
|
|
47
|
-
|
|
48
|
-
```
|
|
49
|
-
$ cd kibble-ui # navigate into the package directory
|
|
50
|
-
$ rm -rf node_modules # remove existing node_modules
|
|
51
|
-
$ npm run build # ensure there are build files available for the package to reference
|
|
52
|
-
|
|
53
|
-
# Update your library's package.json so that the following packages are pointing to your projects node_modules versions of these packages.
|
|
54
|
-
|
|
55
|
-
# "react": "../clinic-web/node_modules/react",
|
|
56
|
-
# "react-dom": "../clinic-web/node_modules/react-dom",
|
|
57
|
-
# "@chakra-ui/icons": "../clinic-web/node_modules/@chakra-ui/icons",
|
|
58
|
-
# "@chakra-ui/react": "../clinic-web/node_modules/@chakra-ui/react",
|
|
59
|
-
# "@emotion/react": "../clinic-web/node_modules/@emotion/react",
|
|
60
|
-
# "@emotion/styled": "../clinic-web/node_modules/@emotion/styled",
|
|
61
|
-
|
|
62
|
-
$ npm i # install packages
|
|
63
|
-
$ npm run start # start the development server
|
|
64
|
-
|
|
65
|
-
# Navigate to project directory and update package.json to point to your local copy of your library
|
|
66
|
-
# "@televet/kibble-ui": "./../kibble-ui"
|
|
67
|
-
|
|
68
|
-
$ cd clinic-web # go into a project directory
|
|
69
|
-
$ rm -rf node_modules # remove existing node_modules
|
|
70
|
-
$ npm install # fresh install with local version of kibble ui
|
|
71
|
-
$ npm run start # start the development server
|
|
72
|
-
|
|
73
|
-
# When linking local packages like this your text editor may display errors saying the package cannot be found, however, if you restart your editor these errors should dissapear.
|
|
74
|
-
```
|
|
75
|
-
|
|
76
|
-
### Unlinking Projects after Local Development is Complete
|
|
77
|
-
|
|
78
|
-
```
|
|
79
|
-
# Inside of library
|
|
80
|
-
$ git checkout package.json
|
|
81
|
-
$ rm -rf node_modules
|
|
82
|
-
$ npm install
|
|
83
|
-
|
|
84
|
-
# Inside of project
|
|
85
|
-
$ git checkout package.json
|
|
86
|
-
$ rm -rf node_modules
|
|
87
|
-
$ npm install
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
### `src` directory structure
|
|
91
|
-
|
|
92
|
-
Development takes place inside `src` directory. This is where your library code should live, this code will be bundled with rollup and published to NPM. Exports from `src/index.js` will be included in the library. Files with the `.stories.*` extension will be compiled and built to the `docs` folder and deployed with github pages.
|
|
7
|
+
We need to install private packages in this repo, so ensure that you have a `.npmrc` file with the following code in the root of your repository:
|
|
93
8
|
|
|
94
9
|
```bash
|
|
95
|
-
|
|
96
|
-
| |-- components
|
|
97
|
-
| | |-- ComponentName # Component will be exposed as a part of library
|
|
98
|
-
| | | |-- Component.spec.js # test file
|
|
99
|
-
| | | |-- __snapshots__
|
|
100
|
-
| | | | └── Component.spec.js.snap # test snapshot
|
|
101
|
-
| | | |-- Component.stories.tsx # storybook file
|
|
102
|
-
| | | └── index.tsx
|
|
103
|
-
| |-- providers
|
|
104
|
-
| | |-- ThemeProvider
|
|
105
|
-
| |-- theme
|
|
106
|
-
| | |-- blur.ts
|
|
107
|
-
| | |-- borders.ts
|
|
108
|
-
| | |-- breakpoints.ts
|
|
109
|
-
| | |-- colors.ts
|
|
110
|
-
| | |-- fonts.ts
|
|
111
|
-
| | |-- fontSizes.ts
|
|
112
|
-
| | |-- fontWeights.ts
|
|
113
|
-
| | |-- index.ts
|
|
114
|
-
| | |-- letterSpacings.ts
|
|
115
|
-
| | |-- lineHeights.ts
|
|
116
|
-
| | |-- radii.ts
|
|
117
|
-
| | |-- shadows.ts
|
|
118
|
-
| | |-- sizes.ts
|
|
119
|
-
| | |-- space.ts
|
|
120
|
-
| | |-- transitions.ts
|
|
121
|
-
| | |-- zIndeces.ts
|
|
122
|
-
| └── index.js # entry point for rollup build
|
|
123
|
-
└── setupTests.js
|
|
10
|
+
//registry.npmjs.org/:_authToken=${NPM_TOKEN}
|
|
124
11
|
```
|
|
125
12
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
This site uses [Storybook](https://storybook.js.org/) configuration to handle documentation and examples.
|
|
13
|
+
Also ensure that you have added the `NPM_TOKEN` environment variable to your `.bash_profile` or `.zshrc`
|
|
129
14
|
|
|
130
15
|
```bash
|
|
131
|
-
|
|
16
|
+
export NPM_TOKEN=${SOME_TOKEN}
|
|
132
17
|
```
|
|
133
18
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
## Deploy and Publish
|
|
137
|
-
|
|
138
|
-
1. Update npm version number with `npm version <patch, major, or minor>`. Read more about [the version options](https://docs.npmjs.com/updating-your-published-package-version-number) here.
|
|
139
|
-
2. Run `npm run build`
|
|
140
|
-
3. Commit changes to git.
|
|
141
|
-
4. When pushing to master, GitHub will publish the package to npm with latest changes.
|
|
142
|
-
|
|
143
|
-
This repository is using a [GitHub Worflow](https://docs.github.com/en/actions/using-workflows). See the `.github` folder for more information.
|
|
19
|
+
> _Note: The NPM token can be found here in our [shared accounts table](https://www.notion.so/televet/Shared-Accounts-c691ae4e0dc8482c876aa0f4a56d8ea7)_
|
|
144
20
|
|
|
145
|
-
|
|
21
|
+
Once these steps are complete you should be able to install the packages dependencies
|
|
146
22
|
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
`npm run test:watch` - Watch tests
|
|
150
|
-
|
|
151
|
-
## Lint
|
|
152
|
-
|
|
153
|
-
On commit, [husky](https://github.com/typicode/husky) will run [lint-staged](https://github.com/okonet/lint-staged) with `eslint --fix` command on staged files, preventing you from committing badly formatted code. You can change or disable this behavior inside `.linstagedrc` config file. Before each push tests will run in the same manner.
|
|
154
|
-
|
|
155
|
-
### Caveats
|
|
156
|
-
|
|
157
|
-
- If pre-commit hooks not work (e. g. your code is not linted after commit), run `yarn add husky` in your project folder.
|
|
158
|
-
|
|
159
|
-
#### eslint
|
|
160
|
-
|
|
161
|
-
```shell script
|
|
162
|
-
yarn lint:js # runs eslint in src directory
|
|
163
|
-
yarn fix:js # runs eslint in src directory with --fix parameter
|
|
164
|
-
```
|
|
165
|
-
|
|
166
|
-
Template extends [CRA eslint rules](https://github.com/facebook/create-react-app/tree/master/packages/eslint-config-react-app) with custom set, tailored for reasonable and clean development process. I added `prettier` to force consistent formatting and `eslint-plugin-fp` to avoid accidental mutations. Don't like trailing semicolons? Feel free to [tweak prettier rules](https://prettier.io/docs/en/configuration.html) inside `.prettierrc` file to match your code style.
|
|
167
|
-
|
|
168
|
-
#### stylelint
|
|
169
|
-
|
|
170
|
-
```shell script
|
|
171
|
-
yarn lint:style # runs stylelint in src directory
|
|
172
|
-
yarn fix:style # runs stylelint in src directory with --fix parameter
|
|
173
|
-
```
|
|
174
|
-
|
|
175
|
-
Template includes [stylelint](https://stylelint.io/), to check CSS/SASS/LESS files. We are using [`stylelint-config-standard`](https://github.com/stylelint/stylelint-config-standard) rule set extended with:
|
|
176
|
-
|
|
177
|
-
```js
|
|
178
|
-
// Check `calc` functions formatting, required for `calc` to work in IE11
|
|
179
|
-
"function-calc-no-unspaced-operator": true,
|
|
180
|
-
// Custom rules (aka CSS vars) should go first
|
|
181
|
-
"order/order": [
|
|
182
|
-
"custom-properties",
|
|
183
|
-
"declarations"
|
|
184
|
-
],
|
|
185
|
-
// Require rules to be in alphabetical order
|
|
186
|
-
"order/properties-alphabetical-order": true,
|
|
187
|
-
// Disallow vendor prefixes, since CRA has autoprefixer enabled
|
|
188
|
-
"property-no-vendor-prefix": true,
|
|
189
|
-
"media-feature-name-no-vendor-prefix": true,
|
|
190
|
-
"at-rule-no-vendor-prefix": true,
|
|
191
|
-
"selector-no-vendor-prefix": true,
|
|
192
|
-
// Limit rules nesting for readablity purposes
|
|
193
|
-
"max-nesting-depth": 3,
|
|
194
|
-
// Limit selector complexity for readablity purposes
|
|
195
|
-
"selector-max-compound-selectors": 5
|
|
196
|
-
```
|
|
197
|
-
|
|
198
|
-
Stylelint errors don't prevent build of application in development mode.
|
|
199
|
-
|
|
200
|
-
## Peer Dependencies
|
|
201
|
-
|
|
202
|
-
Please see below. These must be dependencies in your project to use this library
|
|
203
|
-
|
|
204
|
-
```
|
|
205
|
-
"react": ">=16.8.0",
|
|
206
|
-
"react-dom": ">=16.8.0",
|
|
207
|
-
"prop-types": ">=15.0.0"
|
|
23
|
+
```bash
|
|
24
|
+
$ npm install
|
|
208
25
|
```
|
|
@@ -8,5 +8,6 @@ export interface TagProps extends ChakraTagProps {
|
|
|
8
8
|
showCloseButton?: boolean;
|
|
9
9
|
size?: TagSize;
|
|
10
10
|
onClose?: React.MouseEventHandler<HTMLButtonElement>;
|
|
11
|
+
fontWeight?: 'regular' | 'semibold';
|
|
11
12
|
}
|
|
12
|
-
export declare const Tag: ({ leftElement, rightElement, label, showCloseButton, onClose, size, ...rest }: TagProps) => JSX.Element;
|
|
13
|
+
export declare const Tag: ({ leftElement, rightElement, label, showCloseButton, onClose, fontWeight, size, ...rest }: TagProps) => JSX.Element;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { ReactNode, MutableRefObject, KeyboardEvent } from 'react';
|
|
2
|
+
import { TextColor } from 'components/Typography';
|
|
2
3
|
export interface MenuItemProps {
|
|
3
4
|
canSelectAll?: boolean;
|
|
4
5
|
children?: ReactNode;
|
|
@@ -16,6 +17,7 @@ export interface MenuItemProps {
|
|
|
16
17
|
shouldRetainSelection?: boolean;
|
|
17
18
|
shouldTruncateText?: boolean;
|
|
18
19
|
value?: string;
|
|
20
|
+
colorToken?: TextColor;
|
|
19
21
|
}
|
|
20
|
-
declare const MenuItem: ({ isMultiSelect, canSelectAll, children, closeOnSelect, groupLabel, handleKeyboardNavigation, isDisabled, isSelected, itemIndex, label, leftElement, menuItemRefs, onSelect, shouldRetainSelection, shouldTruncateText, value, ...rest }: MenuItemProps) => JSX.Element;
|
|
22
|
+
declare const MenuItem: ({ isMultiSelect, canSelectAll, children, closeOnSelect, groupLabel, handleKeyboardNavigation, isDisabled, isSelected, itemIndex, label, leftElement, menuItemRefs, onSelect, shouldRetainSelection, shouldTruncateText, value, colorToken, ...rest }: MenuItemProps) => JSX.Element;
|
|
21
23
|
export default MenuItem;
|
package/build/index.js
CHANGED
|
@@ -105,11 +105,11 @@ var paddingRightBySize = {
|
|
|
105
105
|
lg: 1,
|
|
106
106
|
};
|
|
107
107
|
var Tag = function (_a) {
|
|
108
|
-
var leftElement = _a.leftElement, rightElement = _a.rightElement, label = _a.label, _b = _a.showCloseButton, showCloseButton = _b === void 0 ? false : _b, onClose = _a.onClose, _c = _a.size, size =
|
|
108
|
+
var leftElement = _a.leftElement, rightElement = _a.rightElement, label = _a.label, _b = _a.showCloseButton, showCloseButton = _b === void 0 ? false : _b, onClose = _a.onClose, _c = _a.fontWeight, fontWeight = _c === void 0 ? 'semibold' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, rest = __rest(_a, ["leftElement", "rightElement", "label", "showCloseButton", "onClose", "fontWeight", "size"]);
|
|
109
109
|
var labelStyle = __assign(__assign({}, (!!leftElement && { ml: 1 })), (!!rightElement && { mr: 1 }));
|
|
110
110
|
return (React__default["default"].createElement(react.Tag, __assign({}, rest, { size: size }, (showCloseButton && { pr: paddingRightBySize[size] })),
|
|
111
111
|
leftElement,
|
|
112
|
-
React__default["default"].createElement(react.TagLabel, __assign({}, labelStyle), label),
|
|
112
|
+
React__default["default"].createElement(react.TagLabel, __assign({}, labelStyle, { fontWeight: fontWeight }), label),
|
|
113
113
|
rightElement,
|
|
114
114
|
showCloseButton && !!onClose && React__default["default"].createElement(react.TagCloseButton, { onClick: onClose })));
|
|
115
115
|
};
|
|
@@ -1636,17 +1636,17 @@ var Button = React.forwardRef(function (props, ref) {
|
|
|
1636
1636
|
};
|
|
1637
1637
|
var iconName = p.iconName; p.darkMode; var iconPosition = p.iconPosition, domProps = __rest(p, ["iconName", "darkMode", "iconPosition"]);
|
|
1638
1638
|
if (iconName) {
|
|
1639
|
-
var ButtonIcon = React__default["default"].createElement(Icon, { size: p.size, name: iconName });
|
|
1639
|
+
var ButtonIcon = React__default["default"].createElement(Icon, { size: p.size || 'md', name: iconName });
|
|
1640
1640
|
if (!domProps.children) {
|
|
1641
1641
|
var label = camelCaseToLabel(iconName);
|
|
1642
|
-
return (React__default["default"].createElement(react.IconButton, __assign({ ref: ref, _hover: hoverClass, _active: activeClass, "aria-label": label, icon: ButtonIcon }, domProps)));
|
|
1642
|
+
return (React__default["default"].createElement(react.IconButton, __assign({ ref: ref, _hover: hoverClass, _active: activeClass, "aria-label": label, icon: ButtonIcon, size: p.size || 'md' }, domProps)));
|
|
1643
1643
|
}
|
|
1644
1644
|
else {
|
|
1645
1645
|
var position = iconPosition === 'right' ? 'rightIcon' : 'leftIcon';
|
|
1646
1646
|
domProps[position] = ButtonIcon;
|
|
1647
1647
|
}
|
|
1648
1648
|
}
|
|
1649
|
-
return (React__default["default"].createElement(react.Button, __assign({ fontWeight: fontWeights.semibold, ref: ref, _hover: hoverClass, _active: activeClass, iconSpacing: domProps.size === 'sm' || domProps.size === 'xs' ? '4px' : '8px', borderRadius: radii.base }, domProps), domProps.children));
|
|
1649
|
+
return (React__default["default"].createElement(react.Button, __assign({ fontWeight: fontWeights.semibold, ref: ref, _hover: hoverClass, _active: activeClass, size: p.size || 'md', iconSpacing: domProps.size === 'sm' || domProps.size === 'xs' ? '4px' : '8px', borderRadius: radii.base }, domProps), domProps.children));
|
|
1650
1650
|
});
|
|
1651
1651
|
Button.displayName = 'Button';
|
|
1652
1652
|
|
|
@@ -4394,9 +4394,10 @@ var MenuConfig = {
|
|
|
4394
4394
|
};
|
|
4395
4395
|
|
|
4396
4396
|
var MenuItem = function (_a) {
|
|
4397
|
-
var isMultiSelect = _a.isMultiSelect, canSelectAll = _a.canSelectAll, children = _a.children, _b = _a.closeOnSelect, closeOnSelect = _b === void 0 ? !isMultiSelect : _b; _a.groupLabel; var _c = _a.handleKeyboardNavigation, handleKeyboardNavigation = _c === void 0 ? function () { } : _c, isDisabled = _a.isDisabled, isSelected = _a.isSelected, _d = _a.itemIndex, itemIndex = _d === void 0 ? '0' : _d, label = _a.label, leftElement = _a.leftElement, menuItemRefs = _a.menuItemRefs, onSelect = _a.onSelect, shouldRetainSelection = _a.shouldRetainSelection, shouldTruncateText = _a.shouldTruncateText, value = _a.value, rest = __rest(_a, ["isMultiSelect", "canSelectAll", "children", "closeOnSelect", "groupLabel", "handleKeyboardNavigation", "isDisabled", "isSelected", "itemIndex", "label", "leftElement", "menuItemRefs", "onSelect", "shouldRetainSelection", "shouldTruncateText", "value"]);
|
|
4397
|
+
var isMultiSelect = _a.isMultiSelect, canSelectAll = _a.canSelectAll, children = _a.children, _b = _a.closeOnSelect, closeOnSelect = _b === void 0 ? !isMultiSelect : _b; _a.groupLabel; var _c = _a.handleKeyboardNavigation, handleKeyboardNavigation = _c === void 0 ? function () { } : _c, isDisabled = _a.isDisabled, isSelected = _a.isSelected, _d = _a.itemIndex, itemIndex = _d === void 0 ? '0' : _d, label = _a.label, leftElement = _a.leftElement, menuItemRefs = _a.menuItemRefs, onSelect = _a.onSelect, shouldRetainSelection = _a.shouldRetainSelection, shouldTruncateText = _a.shouldTruncateText, value = _a.value, colorToken = _a.colorToken, rest = __rest(_a, ["isMultiSelect", "canSelectAll", "children", "closeOnSelect", "groupLabel", "handleKeyboardNavigation", "isDisabled", "isSelected", "itemIndex", "label", "leftElement", "menuItemRefs", "onSelect", "shouldRetainSelection", "shouldTruncateText", "value", "colorToken"]);
|
|
4398
4398
|
var colors = useTheme().colors;
|
|
4399
4399
|
var onClose = react.useMenuState().onClose;
|
|
4400
|
+
var adaptiveColor = useAdaptiveColorMap(colors.text, colorToken ? colorToken : 'default');
|
|
4400
4401
|
var handleSelect = React.useCallback(function () {
|
|
4401
4402
|
if (isDisabled)
|
|
4402
4403
|
return;
|
|
@@ -4411,16 +4412,21 @@ var MenuItem = function (_a) {
|
|
|
4411
4412
|
onClose();
|
|
4412
4413
|
}
|
|
4413
4414
|
}, [value, onSelect, onClose, closeOnSelect, isDisabled, label, leftElement]);
|
|
4414
|
-
|
|
4415
|
+
var fontColor = React.useMemo(function () {
|
|
4416
|
+
if (colorToken) {
|
|
4417
|
+
return adaptiveColor;
|
|
4418
|
+
}
|
|
4419
|
+
return isSelected && shouldRetainSelection && !isMultiSelect ? colors.text.light.link : colors.text.light.default;
|
|
4420
|
+
}, [isSelected, shouldRetainSelection, isMultiSelect, adaptiveColor, colorToken, colors]);
|
|
4421
|
+
return (React__default["default"].createElement(react.Box, __assign({}, MenuItemConfig, { bg: isSelected && !isMultiSelect ? colors.background.hover : '', className: "MenuList__Item", onClick: handleSelect, onKeyDown: function (e) { return handleKeyboardNavigation(e, false); }, tabIndex: parseInt(canSelectAll ? (itemIndex += 2) : itemIndex), ref: function (el) {
|
|
4415
4422
|
return menuItemRefs && itemIndex ? (menuItemRefs.current[parseInt(itemIndex)] = el) : null;
|
|
4416
4423
|
},
|
|
4417
4424
|
// @ts-ignore
|
|
4418
|
-
disabled: isDisabled }, rest), children ? (children) : (React__default["default"].createElement(react.HStack, {
|
|
4425
|
+
disabled: isDisabled }, rest), children ? (children) : (React__default["default"].createElement(react.HStack, { align: "center", spacing: 3, minH: 5, color: fontColor },
|
|
4419
4426
|
isMultiSelect && (React__default["default"].createElement(react.Box, { className: "MenuList__ItemCheckbox" },
|
|
4420
4427
|
React__default["default"].createElement(Checkbox, { variant: "round", isChecked: isSelected, size: "sm" }))),
|
|
4421
|
-
React__default["default"].createElement(react.
|
|
4422
|
-
|
|
4423
|
-
React__default["default"].createElement(react.Box, { className: "MenuList__ItemLabel" }, shouldTruncateText ? React__default["default"].createElement(TruncatedText, { textContent: label || '', noOfLines: 1 }) : React__default["default"].createElement(Text, null, label)))))));
|
|
4428
|
+
leftElement && (React__default["default"].createElement(react.Flex, { align: "center", justify: "center", className: "MenuList__ItemLeftElement" }, leftElement)),
|
|
4429
|
+
React__default["default"].createElement(react.Box, { className: "MenuList__ItemLabel" }, shouldTruncateText ? React__default["default"].createElement(TruncatedText, { textContent: label || '', noOfLines: 1 }) : React__default["default"].createElement(Text, null, label))))));
|
|
4424
4430
|
};
|
|
4425
4431
|
|
|
4426
4432
|
var MenuSearchBar = function (_a) {
|
|
@@ -4578,7 +4584,7 @@ var MenuList = function (_a) {
|
|
|
4578
4584
|
}
|
|
4579
4585
|
}
|
|
4580
4586
|
}, [filteredMenuItems, isGrouped, setGroups]);
|
|
4581
|
-
var getMenuItem = React.useCallback(function (item, index) { return (React__default["default"].createElement(MenuItem, { handleKeyboardNavigation: handleKeyboardNavigation, isMultiSelect: isMultiSelect, canSelectAll: canSelectAll, isSelected: item.isSelected, isDisabled: item.isDisabled, itemIndex: index.toString(), key: item.value, label: item.label, leftElement: item.leftElement, menuItemRefs: menuItemRefs, onSelect: function (selectedItem) { return handleToggleSingleItem(selectedItem, item.onSelect); }, value: item.value, children: item.children, closeOnSelect: item.closeOnSelect, shouldRetainSelection: shouldRetainSelection, shouldTruncateText: shouldTruncateText })); }, [
|
|
4587
|
+
var getMenuItem = React.useCallback(function (item, index) { return (React__default["default"].createElement(MenuItem, { handleKeyboardNavigation: handleKeyboardNavigation, isMultiSelect: isMultiSelect, canSelectAll: canSelectAll, isSelected: item.isSelected, isDisabled: item.isDisabled, itemIndex: index.toString(), key: item.value, label: item.label, leftElement: item.leftElement, menuItemRefs: menuItemRefs, onSelect: function (selectedItem) { return handleToggleSingleItem(selectedItem, item.onSelect); }, value: item.value, children: item.children, closeOnSelect: item.closeOnSelect, shouldRetainSelection: shouldRetainSelection, shouldTruncateText: shouldTruncateText, colorToken: item.colorToken })); }, [
|
|
4582
4588
|
handleKeyboardNavigation,
|
|
4583
4589
|
handleToggleSingleItem,
|
|
4584
4590
|
isMultiSelect,
|
|
@@ -4594,15 +4600,15 @@ var MenuList = function (_a) {
|
|
|
4594
4600
|
if (children) {
|
|
4595
4601
|
return React__default["default"].createElement(react.MenuList, __assign({}, rest), children);
|
|
4596
4602
|
}
|
|
4597
|
-
return (React__default["default"].createElement(react.MenuList, __assign({ className: "MeuList" }, rest, { maxW: maxW, maxH: maxH, minW: minW, overflow: "hidden auto" }),
|
|
4603
|
+
return (React__default["default"].createElement(react.MenuList, __assign({ className: "MeuList" }, rest, { maxW: maxW || 'unset', maxH: maxH, minW: minW, overflow: "hidden auto" }),
|
|
4598
4604
|
(isSearchable || (canSelectAll && isMultiSelect)) && (React__default["default"].createElement(react.Box, { className: "MenuList__Header", m: "0 12px 8px" },
|
|
4599
4605
|
isSearchable && (React__default["default"].createElement(MenuSearchBar, { handleKeyboardNavigation: handleKeyboardNavigation, menuItems: menuItems || [], searchInputRef: searchInputRef, setFilteredMenuItems: setFilteredMenuItems, placeholder: searchPlaceholder })),
|
|
4600
4606
|
canSelectAll && isMultiSelect && (React__default["default"].createElement(MenuSelectAllButtons, { handleToggleAllItems: handleToggleAllItems, hasSelectedItems: Boolean(filteredMenuItems === null || filteredMenuItems === void 0 ? void 0 : filteredMenuItems.find(function (item) { return item.isSelected; })), isGrouped: false })))),
|
|
4601
|
-
React__default["default"].createElement(react.Box, { className: "MenuList__Body" }, !(filteredMenuItems === null || filteredMenuItems === void 0 ? void 0 : filteredMenuItems.length) ? (React__default["default"].createElement(react.Box, { textAlign: "center", display: "block", p:
|
|
4607
|
+
React__default["default"].createElement(react.Box, { className: "MenuList__Body" }, !(filteredMenuItems === null || filteredMenuItems === void 0 ? void 0 : filteredMenuItems.length) ? (React__default["default"].createElement(react.Box, { textAlign: "center", display: "block", p: 3 },
|
|
4602
4608
|
React__default["default"].createElement(Text, { size: "sm", colorToken: "subtle" }, "No results found"))) : isGrouped ? (groups === null || groups === void 0 ? void 0 : groups.map(function (groupName, index) {
|
|
4603
4609
|
var menuItems = filteredMenuItems === null || filteredMenuItems === void 0 ? void 0 : filteredMenuItems.filter(function (item) { return item.groupLabel === groupName; });
|
|
4604
4610
|
return (React__default["default"].createElement(react.Box, { className: "MenuList__Group", key: "".concat(groupName || 'noGroup', "-").concat(index) },
|
|
4605
|
-
groupName && (React__default["default"].createElement(react.Flex, { minH:
|
|
4611
|
+
groupName && (React__default["default"].createElement(react.Flex, { minH: 8, pt: 4, pr: 3, pb: 1, pl: 5, justify: "space-between", align: "center" },
|
|
4606
4612
|
React__default["default"].createElement(react.Box, { textAlign: "left", className: "MenuList__GroupTitle" },
|
|
4607
4613
|
React__default["default"].createElement(Heading, { size: "xs" }, groupName)),
|
|
4608
4614
|
isMultiSelect && canSelectGroups && (React__default["default"].createElement(MenuSelectAllButtons, { handleToggleAllItems: handleToggleAllItems, hasSelectedItems: Boolean(menuItems === null || menuItems === void 0 ? void 0 : menuItems.find(function (item) { return item.isSelected; })), isGrouped: true, groupName: groupName })))), menuItems === null || menuItems === void 0 ? void 0 :
|
|
@@ -4621,9 +4627,11 @@ var Select = function (_a) {
|
|
|
4621
4627
|
var _c = __read(React.useState({
|
|
4622
4628
|
label: placeholder,
|
|
4623
4629
|
value: '',
|
|
4630
|
+
colorToken: 'placeholder',
|
|
4624
4631
|
leftElement: null,
|
|
4625
4632
|
isPlaceholder: true,
|
|
4626
4633
|
}), 2), selectedOption = _c[0], setSelectedOption = _c[1];
|
|
4634
|
+
var adaptiveColor = useAdaptiveColorMap(colors.text, selectedOption.colorToken ? selectedOption.colorToken : 'default');
|
|
4627
4635
|
React.useEffect(function () {
|
|
4628
4636
|
if (value) {
|
|
4629
4637
|
var defaultValue = options.find(function (option) { return option.value === value; });
|
|
@@ -4659,12 +4667,12 @@ var Select = function (_a) {
|
|
|
4659
4667
|
listProps.onClose(selectedOption);
|
|
4660
4668
|
}
|
|
4661
4669
|
};
|
|
4662
|
-
var flexibleHeightProps = !shouldTruncateText ? { height: 'max-content', minH:
|
|
4670
|
+
var flexibleHeightProps = !shouldTruncateText ? { height: 'max-content', minH: 10 } : {};
|
|
4663
4671
|
return (React__default["default"].createElement(MenuProvider, { menuItems: options, onClose: handleMenuClose },
|
|
4664
4672
|
React__default["default"].createElement(MenuContainer, { matchWidth: true, isLazy: true },
|
|
4665
4673
|
React__default["default"].createElement(react.Select, __assign({ as: react.MenuButton, _focus: __assign({}, focusStyle), onClick: function (event) { return event.stopPropagation(); }, type: "button", className: "Select__MenuButton", ref: selectRef, size: size }, flexibleHeightProps, domProps),
|
|
4666
|
-
React__default["default"].createElement(react.Flex, { className: "Select__Container",
|
|
4667
|
-
(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.leftElement) ? (React__default["default"].createElement(react.
|
|
4674
|
+
React__default["default"].createElement(react.Flex, { className: "Select__Container", justify: "flex-start", align: "center", textAlign: "left", color: adaptiveColor },
|
|
4675
|
+
(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.leftElement) ? (React__default["default"].createElement(react.Flex, { align: "center", className: "Select__LeftElement", pr: 2 }, selectedOption.leftElement)) : (listProps === null || listProps === void 0 ? void 0 : listProps.defaultLeftElement) ? (React__default["default"].createElement(react.Flex, { align: "center", className: "Select__LeftElement", pr: 2 }, listProps.defaultLeftElement)) : null,
|
|
4668
4676
|
shouldTruncateText ? (React__default["default"].createElement(TruncatedText, { className: "Select__Text", textContent: selectedOption.label || '', noOfLines: 1 })) : (React__default["default"].createElement(Text, { className: "Select__Text" }, selectedOption.label)))),
|
|
4669
4677
|
React__default["default"].createElement(MenuList, __assign({ maxW: selectWidth || (listProps === null || listProps === void 0 ? void 0 : listProps.maxW) }, listProps, { shouldTruncateText: shouldTruncateText, shouldRetainSelection: true, menuItems: options.map(function (option) {
|
|
4670
4678
|
option.isSelected = option.value === selectedOption.value;
|
|
@@ -13079,10 +13087,9 @@ var Modal = function (_a) {
|
|
|
13079
13087
|
// Responsive values for full screen modals on phones.
|
|
13080
13088
|
var fullScreenMobileSize = react.useBreakpointValue({ base: 'full', md: size });
|
|
13081
13089
|
var fullScreenMobileBorderRadius = react.useBreakpointValue({ base: 0, md: radii.xl });
|
|
13082
|
-
var fullScreenMobileContentMargin = react.useBreakpointValue({ base: 0, md: 16 });
|
|
13083
13090
|
var Modal = (React__default["default"].createElement(react.Modal, __assign({ closeOnEsc: allowEscape, closeOnOverlayClick: allowEscape, autoFocus: !!initialFocusRef, isOpen: isOpen, onClose: onClose, scrollBehavior: scrollBehavior, isCentered: isCentered, size: useFullScreenMobile ? fullScreenMobileSize : size, motionPreset: "slideInBottom" }, rest),
|
|
13084
13091
|
React__default["default"].createElement(react.ModalOverlay, null),
|
|
13085
|
-
React__default["default"].createElement(react.ModalContent, { backgroundColor: backgroundColor, m: useFullScreenMobile ?
|
|
13092
|
+
React__default["default"].createElement(react.ModalContent, __assign({ backgroundColor: backgroundColor, m: useFullScreenMobile ? 0 : 16 }, (!useFullScreenMobile && { mx: 5 }), { borderRadius: useFullScreenMobile ? fullScreenMobileBorderRadius : radii.xl, minH: { base: '-webkit-fill-available', md: 'auto' } }), children)));
|
|
13086
13093
|
return withDarkMode$1(Modal, !!darkMode);
|
|
13087
13094
|
};
|
|
13088
13095
|
|