@onewelcome/react-lib-components 6.1.0 → 6.3.0

package/dist/esm/src/index.esm.js

@@ -1,2 +1,2 @@
-export{BaseStyling}from"../_BaseStyling_/BaseStyling.esm.js";export{Button}from"../Button/Button.esm.js";export{Breadcrumbs}from"../Breadcrumbs/Breadcrumbs.esm.js";export{ContextMenu}from"../ContextMenu/ContextMenu.esm.js";export{ContextMenuItem}from"../ContextMenu/ContextMenuItem.esm.js";export{Link}from"../Link/Link.esm.js";export{Icon,Icons}from"../Icon/Icon.esm.js";export{IconButton}from"../Button/IconButton.esm.js";export{Tab}from"../Tabs/Tab.esm.js";export{Tabs}from"../Tabs/Tabs.esm.js";export{Tag}from"../Tag/Tag.esm.js";export{TextEllipsis}from"../TextEllipsis/TextEllipsis.esm.js";export{Tile}from"../Tiles/Tile.esm.js";export{Tiles}from"../Tiles/Tiles.esm.js";export{Tooltip}from"../Tooltip/Tooltip.esm.js";export{Typography}from"../Typography/Typography.esm.js";export{ProgressBar}from"../ProgressBar/ProgressBar.esm.js";export{Skeleton}from"../Skeleton/Skeleton.esm.js";export{StatusIndicator}from"../StatusIndicator/StatusIndicator.esm.js";export{Stepper}from"../Stepper/Stepper.esm.js";export{Pagination}from"../Pagination/Pagination.esm.js";export{useRepeater}from"./hooks/useRepeater.esm.js";export{usePosition}from"./hooks/usePosition.esm.js";export{useDebouncedCallback}from"./hooks/useDebouncedCallback.esm.js";export{debounce,generateID,throttle}from"./util/helper.esm.js";export{BaseModal as Modal}from"../Notifications/BaseModal/BaseModal.esm.js";export{useSnackbar}from"../Notifications/Snackbar/useSnackbar.esm.js";export{Dialog}from"../Notifications/Dialog/Dialog.esm.js";export{DiscardChangesModal}from"../Notifications/DiscardChangesModal/DiscardChangesModal.esm.js";export{BaseModalActions as ModalActions}from"../Notifications/BaseModal/BaseModalActions/BaseModalActions.esm.js";export{BaseModalContent as ModalContent}from"../Notifications/BaseModal/BaseModalContent/BaseModalContent.esm.js";export{BaseModalHeader as ModalHeader}from"../Notifications/BaseModal/BaseModalHeader/BaseModalHeader.esm.js";export{NotificationProvider,useNotificationContext}from"../Notifications/NotificationProvider/NotificationContext.esm.js";export{SlideInModal}from"../Notifications/SlideInModal/SlideInModal.esm.js";export{SnackbarProvider}from"../Notifications/Snackbar/SnackbarProvider/SnackbarProvider.esm.js";export{Checkbox}from"../Form/Checkbox/Checkbox.esm.js";export{Fieldset}from"../Form/Fieldset/Fieldset.esm.js";export{Form}from"../Form/Form.esm.js";export{FormControl}from"../Form/FormControl/FormControl.esm.js";export{FormGroup}from"../Form/FormGroup/FormGroup.esm.js";export{FormHelperText}from"../Form/FormHelperText/FormHelperText.esm.js";export{Input}from"../Form/Input/Input.esm.js";export{InputWrapper}from"../Form/Wrapper/InputWrapper/InputWrapper.esm.js";export{Label}from"../Form/Label/Label.esm.js";export{Option}from"../Form/Select/Option.esm.js";export{Radio}from"../Form/Radio/Radio.esm.js";export{RadioWrapper}from"../Form/Wrapper/RadioWrapper/RadioWrapper.esm.js";export{Select}from"../Form/Select/Select.esm.js";export{Textarea}from"../Form/Textarea/Textarea.esm.js";export{Toggle}from"../Form/Toggle/Toggle.esm.js";export{CheckboxWrapper}from"../Form/Wrapper/CheckboxWrapper/CheckboxWrapper.esm.js";export{TextareaWrapper}from"../Form/Wrapper/TextareaWrapper/TextareaWrapper.esm.js";export{SelectWrapper}from"../Form/Wrapper/SelectWrapper/SelectWrapper.esm.js";export{Wizard}from"../Wizard/Wizard.esm.js";export{WizardActions}from"../Wizard/WizardActions/WizardActions.esm.js";export{WizardSteps}from"../Wizard/WizardSteps/WizardSteps.esm.js";export{BaseWizardSteps}from"../Wizard/BaseWizardSteps/BaseWizardSteps.esm.js";export{DataGrid}from"../DataGrid/DataGrid.esm.js";export{DataGridRow}from"../DataGrid/DataGridBody/DataGridRow.esm.js";export{DataGridCell}from"../DataGrid/DataGridBody/DataGridCell.esm.js";export{Banner}from"../Notifications/Banner/Banner.esm.js";
+export{BaseStyling}from"../_BaseStyling_/BaseStyling.esm.js";export{Button}from"../Button/Button.esm.js";export{Breadcrumbs}from"../Breadcrumbs/Breadcrumbs.esm.js";export{ContextMenu}from"../ContextMenu/ContextMenu.esm.js";export{ContextMenuItem}from"../ContextMenu/ContextMenuItem.esm.js";export{Link}from"../Link/Link.esm.js";export{Icon,Icons}from"../Icon/Icon.esm.js";export{IconButton}from"../Button/IconButton.esm.js";export{Tab}from"../Tabs/Tab.esm.js";export{Tabs}from"../Tabs/Tabs.esm.js";export{Tag}from"../Tag/Tag.esm.js";export{TextEllipsis}from"../TextEllipsis/TextEllipsis.esm.js";export{Tile}from"../Tiles/Tile.esm.js";export{Tiles}from"../Tiles/Tiles.esm.js";export{Tooltip}from"../Tooltip/Tooltip.esm.js";export{Typography}from"../Typography/Typography.esm.js";export{ProgressBar}from"../ProgressBar/ProgressBar.esm.js";export{Skeleton}from"../Skeleton/Skeleton.esm.js";export{StatusIndicator}from"../StatusIndicator/StatusIndicator.esm.js";export{Stepper}from"../Stepper/Stepper.esm.js";export{Pagination}from"../Pagination/Pagination.esm.js";export{useRepeater}from"./hooks/useRepeater.esm.js";export{usePosition}from"./hooks/usePosition.esm.js";export{useDebouncedCallback}from"./hooks/useDebouncedCallback.esm.js";export{debounce,generateID,throttle}from"./util/helper.esm.js";export{BaseModal as Modal}from"../Notifications/BaseModal/BaseModal.esm.js";export{useSnackbar}from"../Notifications/Snackbar/useSnackbar.esm.js";export{Dialog}from"../Notifications/Dialog/Dialog.esm.js";export{DiscardChangesModal}from"../Notifications/DiscardChangesModal/DiscardChangesModal.esm.js";export{BaseModalActions as ModalActions}from"../Notifications/BaseModal/BaseModalActions/BaseModalActions.esm.js";export{BaseModalContent as ModalContent}from"../Notifications/BaseModal/BaseModalContent/BaseModalContent.esm.js";export{BaseModalHeader as ModalHeader}from"../Notifications/BaseModal/BaseModalHeader/BaseModalHeader.esm.js";export{NotificationProvider,useNotificationContext}from"../Notifications/NotificationProvider/NotificationContext.esm.js";export{SlideInModal}from"../Notifications/SlideInModal/SlideInModal.esm.js";export{SnackbarProvider}from"../Notifications/Snackbar/SnackbarProvider/SnackbarProvider.esm.js";export{Checkbox}from"../Form/Checkbox/Checkbox.esm.js";export{Fieldset}from"../Form/Fieldset/Fieldset.esm.js";export{Form}from"../Form/Form.esm.js";export{FormControl}from"../Form/FormControl/FormControl.esm.js";export{FormGroup}from"../Form/FormGroup/FormGroup.esm.js";export{FormHelperText}from"../Form/FormHelperText/FormHelperText.esm.js";export{Input}from"../Form/Input/Input.esm.js";export{InputWrapper}from"../Form/Wrapper/InputWrapper/InputWrapper.esm.js";export{Label}from"../Form/Label/Label.esm.js";export{Radio}from"../Form/Radio/Radio.esm.js";export{RadioWrapper}from"../Form/Wrapper/RadioWrapper/RadioWrapper.esm.js";export{Select}from"../Form/Select/SingleSelect/Select.esm.js";export{MultiSelect}from"../Form/Select/MultiSelect/MultiSelect.esm.js";export{Option}from"../Form/Select/SingleSelect/Option.esm.js";export{MultiOption}from"../Form/Select/MultiSelect/MultiOption.esm.js";export{Textarea}from"../Form/Textarea/Textarea.esm.js";export{Toggle}from"../Form/Toggle/Toggle.esm.js";export{CheckboxWrapper}from"../Form/Wrapper/CheckboxWrapper/CheckboxWrapper.esm.js";export{TextareaWrapper}from"../Form/Wrapper/TextareaWrapper/TextareaWrapper.esm.js";export{SelectWrapper}from"../Form/Wrapper/SelectWrapper/SelectWrapper.esm.js";export{Wizard}from"../Wizard/Wizard.esm.js";export{WizardActions}from"../Wizard/WizardActions/WizardActions.esm.js";export{WizardSteps}from"../Wizard/WizardSteps/WizardSteps.esm.js";export{BaseWizardSteps}from"../Wizard/BaseWizardSteps/BaseWizardSteps.esm.js";export{DataGrid}from"../DataGrid/DataGrid.esm.js";export{DataGridRow}from"../DataGrid/DataGridBody/DataGridRow.esm.js";export{DataGridCell}from"../DataGrid/DataGridBody/DataGridCell.esm.js";export{Banner}from"../Notifications/Banner/Banner.esm.js";
 //# sourceMappingURL=index.esm.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "6.1.0",
+  "version": "6.3.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/cjs/src/index.cjs.js",
@@ -58,74 +58,74 @@
     "@babel/preset-typescript": "^7.23.3",
     "@mdx-js/react": "^3.0.0",
     "@onewelcome/eslint-config-shared-codestyle": "^9.1.0",
-    "@onewelcome/storybook-addon-basestyling": "^1.0.0",
+    "@onewelcome/storybook-addon-basestyling": "^1.0.1",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-a11y": "^7.6.10",
-    "@storybook/addon-actions": "^7.6.10",
-    "@storybook/addon-docs": "^7.6.10",
-    "@storybook/addon-essentials": "^7.6.10",
-    "@storybook/addon-interactions": "^7.6.10",
-    "@storybook/addon-links": "^7.6.10",
-    "@storybook/blocks": "^7.6.10",
-    "@storybook/components": "^7.6.10",
+    "@storybook/addon-a11y": "^7.6.14",
+    "@storybook/addon-actions": "^7.6.14",
+    "@storybook/addon-docs": "^7.6.14",
+    "@storybook/addon-essentials": "^7.6.14",
+    "@storybook/addon-interactions": "^7.6.14",
+    "@storybook/addon-links": "^7.6.14",
+    "@storybook/blocks": "^7.6.14",
+    "@storybook/components": "^7.6.14",
     "@storybook/jest": "^0.2.3",
-    "@storybook/manager-api": "^7.6.10",
-    "@storybook/react": "^7.6.10",
-    "@storybook/react-webpack5": "^7.6.10",
+    "@storybook/manager-api": "^7.6.14",
+    "@storybook/react": "^7.6.14",
+    "@storybook/react-webpack5": "^7.6.14",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.6.10",
+    "@storybook/theming": "^7.6.14",
     "@testing-library/dom": "^9.3.4",
-    "@testing-library/jest-dom": "^6.3.0",
-    "@testing-library/react": "^14.1.2",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.11",
-    "@types/mdx": "^2.0.10",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
+    "@types/jest": "^29.5.12",
+    "@types/mdx": "^2.0.11",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^6.19.1",
-    "@typescript-eslint/parser": "^6.19.1",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
     "babel-loader": "^9.1.3",
-    "chromatic": "^10.6.0",
-    "css-loader": "^6.9.1",
+    "chromatic": "^10.9.3",
+    "css-loader": "^6.10.0",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-cypress": "^2.15.1",
-    "eslint-plugin-export-scope": "^2.0.3",
+    "eslint-plugin-export-scope": "^2.0.5",
     "eslint-plugin-jest": "^27.6.3",
     "eslint-plugin-license-header": "^0.6.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.15",
-    "husky": "^9.0.6",
+    "husky": "^9.0.10",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-junit": "^16.0.0",
     "jest-sonar-reporter": "^2.0.0",
-    "lint-staged": "^15.2.0",
-    "mini-css-extract-plugin": "^2.7.7",
+    "lint-staged": "^15.2.2",
+    "mini-css-extract-plugin": "^2.8.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.33",
+    "postcss": "^8.4.35",
     "postcss-modules": "^6.0.0",
     "postcss-url": "^10.1.3",
-    "prettier": "^3.2.4",
+    "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "react-router-dom": "^6.21.3",
+    "react-router-dom": "^6.22.0",
     "remark-gfm": "^4.0.0",
     "rollup": "^2.79.1",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.70.0",
-    "sass-loader": "^14.0.0",
+    "sass-loader": "^14.1.0",
     "size-limit": "^11.0.2",
-    "storybook": "^7.6.10",
+    "storybook": "^7.6.14",
     "storybook-addon-pseudo-states": "^2.1.2",
     "style-loader": "^3.3.4",
     "ts-jest": "^29.1.2",

package/src/components/Form/Fieldset/Fieldset.tsx

@@ -19,7 +19,8 @@ import readyclasses from "../../../readyclasses.module.scss";
 import classes from "./Fieldset.module.scss";
 import { Typography, Variant } from "../../Typography/Typography";
 import { Input } from "../Input/Input";
-import { Select } from "../Select/Select";
+import { Select } from "../Select/SingleSelect/Select";
+import { MultiSelect } from "../Select/MultiSelect/MultiSelect";
 import { Radio } from "../Radio/Radio";
 import { Checkbox } from "../Checkbox/Checkbox";
 import { Textarea } from "../Textarea/Textarea";
@@ -73,6 +74,7 @@ const FieldsetComponent: ForwardRefRenderFunction<HTMLFieldSetElement, Props> =
     const allowedComponents: React.ComponentPropsWithRef<any>[] = [
       Input,
       Select,
+      MultiSelect,
       Radio,
       Checkbox,
       Textarea,

package/src/components/Form/Select/MultiSelect/MultiOption.tsx

@@ -0,0 +1,31 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { ForwardRefRenderFunction } from "react";
+import { Props as SelectOptionProps, Option as SelectOption } from "../SingleSelect/Option";
+
+export interface Props extends SelectOptionProps {
+  fixed?: boolean;
+}
+
+const MultiOptionComponent: ForwardRefRenderFunction<HTMLLIElement, Props> = (
+  { fixed: _fixed, ...rest }: Props,
+  ref
+) => {
+  return <SelectOption ref={ref} {...rest} />;
+};
+
+export const MultiOption = React.forwardRef(MultiOptionComponent);

package/src/components/Form/Select/MultiSelect/MultiSelect.module.scss

@@ -0,0 +1,244 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+@use "src/mixins.module";
+@use "src/variables";
+
+$listItemHeight: 2.5rem;
+
+.select {
+  position: relative;
+  box-sizing: border-box;
+  @include mixins.transition(all, 0.2s, ease-in-out);
+  border: 0;
+  border-radius: var(--input-border-radius);
+  background-color: var(--input-background-color);
+  font-size: var(--form-control-font-size);
+
+  [data-display] {
+    color: var(--color-default);
+    font-family: var(--font-family);
+  }
+
+  &.expanded {
+    .list-wrapper {
+      background: var(--light);
+    }
+  }
+
+  &:not(.expanded) {
+    .custom-select:focus:not(.error) {
+      border: var(--input-border-width-focus) solid var(--color-focus);
+      padding: 0
+        calc(variables.$form-element-horizontal-padding-mobile - var(--input-border-width-focus));
+    }
+  }
+
+  &:hover:not(.disabled):not(.expanded):not(.error) {
+    .custom-select:not(:focus) {
+      border-color: var(--default);
+      border-width: var(--input-border-width);
+      background-color: var(--color-blue-grey25);
+    }
+  }
+
+  .custom-select {
+    box-sizing: border-box;
+    width: 100%;
+    min-height: calc(2.625rem - (2 * var(--input-border-width)));
+    padding: 0 calc(variables.$form-element-horizontal-padding-mobile - var(--input-border-width));
+    background-color: transparent;
+    border-color: var(--color-blue-grey500);
+    border-style: var(--input-border-style);
+    border-width: var(--input-border-width);
+    border-radius: var(--input-border-radius);
+    font-size: var(--form-control-font-size);
+    @include mixins.transition(all, 0.2s, ease-in-out);
+
+    &:focus {
+      outline: 0;
+    }
+
+    &.error {
+      border-color: var(--error);
+    }
+
+    &.error:focus {
+      border-width: var(--input-border-width-focus);
+    }
+
+    &.disabled {
+      border-color: var(--color-disabled);
+      pointer-events: none;
+    }
+
+    .display-container {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      padding: 0.1875rem 0;
+    }
+  }
+
+  .list-wrapper {
+    border-color: var(--light-grey-border);
+    border-style: var(--input-border-style);
+    border-width: var(--input-border-width);
+    border-radius: var(--input-border-radius);
+    box-shadow: 0px 4px 5px 0px #01053233;
+    box-shadow: 0px 3px 14px 0px #0105321f;
+    box-shadow: 0px 8px 10px 0px #01053224;
+    position: absolute;
+    z-index: variables.$select-z-index;
+    top: 44px;
+    left: 0;
+    width: 100%;
+    overflow: auto;
+  }
+
+  ul {
+    box-sizing: border-box;
+    padding: 0.25rem 0;
+    width: 100%;
+    margin: 0;
+    list-style: none;
+    background-color: var(--light);
+    border-radius: var(--input-border-radius);
+    color: var(--default);
+    text-align: left;
+    overflow: auto;
+    max-height: calc($listItemHeight * 10);
+
+    li {
+      padding: 0.62rem 0.75rem;
+      font-size: var(--form-control-font-size);
+      margin: 0;
+      position: relative;
+      line-height: 1.25rem;
+      box-sizing: border-box;
+      min-height: $listItemHeight;
+      cursor: pointer;
+
+      &:after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-color: transparent;
+        width: 100%;
+        height: 100%;
+        opacity: 0.05;
+      }
+
+      &:focus {
+        outline: var(--input-border-width-focus) solid var(--color-primary300);
+        outline-offset: -var(--input-border-width-focus);
+      }
+
+      &:hover:after,
+      &:active:after {
+        background-color: var(--color-primary);
+      }
+
+      &:active:after {
+        opacity: 0.1;
+      }
+
+      &.disabled {
+        color: var(--greyed-out);
+        background-color: var(--disabled);
+        pointer-events: none;
+      }
+    }
+  }
+}
+
+.selected-option {
+  &:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    border-top-right-radius: 0.125rem;
+    border-bottom-right-radius: 0.125rem;
+    border-left: 0.25rem solid var(--color-primary);
+  }
+  color: var(--color-primary);
+}
+
+.status {
+  padding: 0.3125rem;
+  display: flex;
+  align-items: center;
+
+  [data-icon-status="success"] {
+    color: var(--success);
+    font-size: 1.25rem;
+  }
+
+  [data-icon-status="error"] {
+    color: var(--error);
+    font-size: 1.25rem;
+  }
+
+  .chevron-icon {
+    color: var(--default);
+    font-size: 0.625rem;
+  }
+
+  * + * {
+    margin-left: 1.25rem;
+  }
+}
+
+.placeholder {
+  color: var(--greyed-out);
+}
+
+.select-search {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.disabled {
+  cursor: not-allowed;
+  color: var(--greyed-out);
+  background-color: var(--color-blue-grey25);
+
+  > * {
+    pointer-events: none;
+  }
+}
+
+@media only screen and (min-width: 30em) {
+  .select {
+    .custom-select {
+      padding: 0
+        calc(variables.$form-element-horizontal-padding-desktop - var(--input-border-width));
+    }
+
+    &:not(.expanded) {
+      .custom-select:focus:not(.error) {
+        padding: 0
+          calc(variables.$form-element-horizontal-padding-desktop - var(--input-border-width-focus));
+      }
+    }
+  }
+}