@wireapp/react-ui-kit 9.53.0 → 9.54.1

package/lib/Form/Select/SelectValueContainer/SelectValueContainer.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectValueContainer = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_select_1 = require("react-select");
+const SelectValueContainer = ({ children, ...restProps }) => ((0, jsx_runtime_1.jsxs)(react_select_1.components.ValueContainer, { ...restProps, children: [renderValue(children[0]), " ", children[1]] }));
+exports.SelectValueContainer = SelectValueContainer;
+const renderValue = (value) => {
+    if (Array.isArray(value)) {
+        const currentValue = (i) => value[i].props.children;
+        return ((0, jsx_runtime_1.jsx)("div", { css: {
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                minWidth: 0,
+                paddingRight: 14,
+                gridArea: '1/1/2/3',
+            }, children: currentValue(0) }));
+    }
+    return value;
+};

package/lib/Form/index.d.ts

@@ -11,7 +11,8 @@ export * from './InputBlock';
 export * from './InputSubmitCombo';
 export * from './RangeInput';
 export * from './RoundIconButton';
-export * from './Select';
+export * from './Select/Select';
+export * from './Select/ComboboxSelect/ComboboxSelect';
 export * from './ShakeBox';
 export * from './Switch';
 export * from './TextArea';

package/lib/Form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Form/index.ts"],"names":[],"mappings":"AAmBA,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Form/index.ts"],"names":[],"mappings":"AAmBA,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wCAAwC,CAAC;AACvD,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,6BAA6B,CAAC"}

package/lib/Form/index.js

@@ -45,7 +45,8 @@ __exportStar(require("./InputBlock"), exports);
 __exportStar(require("./InputSubmitCombo"), exports);
 __exportStar(require("./RangeInput"), exports);
 __exportStar(require("./RoundIconButton"), exports);
-__exportStar(require("./Select"), exports);
+__exportStar(require("./Select/Select"), exports);
+__exportStar(require("./Select/ComboboxSelect/ComboboxSelect"), exports);
 __exportStar(require("./ShakeBox"), exports);
 __exportStar(require("./Switch"), exports);
 __exportStar(require("./TextArea"), exports);

package/package.json

@@ -12,7 +12,7 @@
     "@types/color": "3.0.6",
     "color": "4.2.3",
     "emotion-normalize": "11.0.1",
-    "react-select": "5.7.7",
+    "react-select": "5.10.1",
     "react-transition-group": "4.4.5"
   },
   "devDependencies": {
@@ -78,6 +78,6 @@
     "test:watch": "jest --watch",
     "test:update": "jest --updateSnapshot"
   },
-  "version": "9.53.0",
-  "gitHead": "2c0176605d098e616d7b0be09bf417ca4683c615"
+  "version": "9.54.1",
+  "gitHead": "9a03e450b8c2608ec02c595d7b39fb5cfa260c74"
 }

package/lib/Form/Select.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Form/Select.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,YAAY,EAAC,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAC,SAAS,EAAW,MAAM,gBAAgB,CAAC;AACnD,OAAoB,EAAC,SAAS,EAAe,MAAM,cAAc,CAAC;AAClE,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,iDAAiD,CAAC;AAkBvF,MAAM,MAAM,MAAM,GAAG;IACnB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,WAAW,CAAC,OAAO,SAAS,OAAO,EAAE,KAAK,SAAS,SAAS,CAAC,MAAM,CAAC,CACnF,SAAQ,iBAAiB,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC;IACjD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,MAAM,GAAI,OAAO,SAAS,OAAO,UAAU,KAAK,SAAS,SAAS,CAAC,MAAM,CAAC,yOAmBpF,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,qDAuE7B,CAAC"}

package/lib/Form/Select.stories.d.ts

@@ -1,16 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: <IsMulti extends boolean = false, Group extends import("react-select").GroupBase<import("./Select").Option> = import("react-select").GroupBase<import("./Select").Option>>({ id, label, error, helperText, disabled, dataUieName, options, isMulti, wrapperCSS, menuCSS, selectControlCSS, selectContainerCSS, markInvalid, required, isSearchable, overlayMenu, menuListHeading, ...props }: import("./Select").SelectProps<IsMulti, Group>) => import("@emotion/react/jsx-runtime").JSX.Element;
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-export declare const WithLabel: Story;
-export declare const Invalid: Story;
-export declare const Disabled: Story;
-//# sourceMappingURL=Select.stories.d.ts.map

package/lib/Form/Select.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../src/Form/Select.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAWrD,QAAA,MAAM,IAAI;;;;;;;CAOqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC"}

package/lib/Form/SelectComponents.d.ts

@@ -1,16 +0,0 @@
-import { CSSObject } from '@emotion/react';
-import { ContainerProps, DropdownIndicatorProps, OptionProps, ValueContainerProps, IndicatorsContainerProps, MenuProps, GroupBase, OptionsOrGroups, MenuListProps } from 'react-select';
-import { Option } from './Select';
-export declare const SelectContainer: (props: ContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const isGroup: (options: OptionsOrGroups<Option, GroupBase<Option>>) => options is GroupBase<Option>[];
-export declare const DropdownIndicator: (props: DropdownIndicatorProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const CustomOption: (dataUieName: string) => (props: OptionProps<Option>) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const Menu: (dataUieName: string, css?: CSSObject) => (props: MenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const MenuList: {
-    (menuListHeading: string, dataUieName: string): (props: MenuListProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export declare const renderValue: (value: any) => any;
-export declare const ValueContainer: ({ children, ...restProps }: ValueContainerProps<Option>) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const IndicatorsContainer: ({ children, ...restProps }: IndicatorsContainerProps<Option>) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=SelectComponents.d.ts.map

package/lib/Form/SelectComponents.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectComponents.d.ts","sourceRoot":"","sources":["../../src/Form/SelectComponents.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAEL,cAAc,EACd,sBAAsB,EACtB,WAAW,EACX,mBAAmB,EACnB,wBAAwB,EACxB,SAAS,EACT,SAAS,EACT,eAAe,EACf,aAAa,EACd,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAShC,eAAO,MAAM,eAAe,UAAW,cAAc,qDAMpD,CAAC;AAEF,eAAO,MAAM,OAAO,YAAa,eAAe,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,KAAG,OAAO,IAAI,SAAS,CAAC,MAAM,CAAC,EAEzG,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,qDAS9D,CAAC;AAGF,eAAO,MAAM,YAAY,gBAAiB,MAAM,aAAa,WAAW,CAAC,MAAM,CAAC,qDAsD/E,CAAC;AAGF,eAAO,MAAM,IAAI,gBAAiB,MAAM,QAAQ,SAAS,aAAa,SAAS,qDAc9E,CAAC;AAGF,eAAO,MAAM,QAAQ;sBAAqB,MAAM,eAAe,MAAM,WAAa,aAAa;;CA0B9F,CAAC;AAGF,eAAO,MAAM,WAAW,qBAqBvB,CAAC;AAEF,eAAO,MAAM,cAAc,+BAA8B,mBAAmB,CAAC,MAAM,CAAC,qDAInF,CAAC;AAEF,eAAO,MAAM,mBAAmB,+BAA8B,wBAAwB,CAAC,MAAM,CAAC,qDAW7F,CAAC"}

package/lib/Form/SelectComponents.js

@@ -1,93 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IndicatorsContainer = exports.ValueContainer = exports.renderValue = exports.MenuList = exports.Menu = exports.CustomOption = exports.DropdownIndicator = exports.isGroup = exports.SelectContainer = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_select_1 = require("react-select");
-const SelectComponents_styles_1 = require("./SelectComponents.styles");
-const Icon_1 = require("../Icon");
-const ArrowDown_1 = require("../Icon/ArrowDown");
-const enums_1 = require("../types/enums");
-// SelectContainer
-const SelectContainer = (props) => {
-    return ((0, jsx_runtime_1.jsx)(react_select_1.components.SelectContainer, { ...props, children: (0, jsx_runtime_1.jsx)("div", { tabIndex: enums_1.TabIndex.FOCUSABLE, children: props.children }) }));
-};
-exports.SelectContainer = SelectContainer;
-const isGroup = (options) => {
-    return options?.length > 0 && 'options' in options[0];
-};
-exports.isGroup = isGroup;
-const DropdownIndicator = (props) => {
-    const { menuIsOpen } = props.selectProps;
-    return ((0, jsx_runtime_1.jsx)(react_select_1.components.DropdownIndicator, { ...props, children: (0, jsx_runtime_1.jsx)(ArrowDown_1.ArrowDown, { css: { ...(menuIsOpen ? { transform: 'rotateX(180deg)', marginTop: 2 } : { marginTop: 4 }) } }) }));
-};
-exports.DropdownIndicator = DropdownIndicator;
-// eslint-disable-next-line react/display-name
-const CustomOption = (dataUieName) => (props) => {
-    const { children, data, isMulti, isSelected, options } = props;
-    return ((0, jsx_runtime_1.jsx)(react_select_1.components.Option, { ...props, children: (0, jsx_runtime_1.jsxs)("div", { css: {
-                ...((isMulti || (0, exports.isGroup)(options)) && {
-                    display: 'grid',
-                    gridTemplateAreas: `"checkbox label"
-                                ". description"`,
-                    gridTemplateColumns: '22px 1fr',
-                    columnGap: (0, exports.isGroup)(options) ? '5px' : '10px',
-                }),
-            }, ...(dataUieName && {
-                'data-uie-name': `option-${dataUieName}`,
-                'data-uie-value': options.find(option => option.label === children)?.value,
-                'data-uie-selected': isSelected,
-            }), children: [isMulti && ((0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: isSelected, onChange: () => null, css: { gridArea: 'checkbox', width: 22, height: 22, cursor: 'pointer', placeSelf: 'center' } })), (0, exports.isGroup)(options) && (
-                //includes a checkmark character if it is selected and a group
-                (0, jsx_runtime_1.jsx)("div", { css: { width: 22, height: 22, cursor: 'pointer', placeSelf: 'center' }, children: isSelected ? (0, jsx_runtime_1.jsx)(Icon_1.CheckIcon, {}) : null })), (0, jsx_runtime_1.jsx)("div", { css: { gridArea: 'label', overflowWrap: 'break-word', overflow: 'hidden' }, children: children }), data && data.description && ((0, jsx_runtime_1.jsx)("p", { css: (theme) => ({
-                        marginBottom: 0,
-                        fontSize: theme.fontSizes.medium,
-                        color: isSelected ? theme.Select.focusedDescriptionColor : theme.Input.labelColor,
-                        gridArea: 'description',
-                    }), children: data.description }))] }) }));
-};
-exports.CustomOption = CustomOption;
-// eslint-disable-next-line react/display-name
-const Menu = (dataUieName, css) => (props) => {
-    const { children } = props;
-    return ((0, jsx_runtime_1.jsx)(react_select_1.components.Menu, { ...props, css: css, children: (0, jsx_runtime_1.jsx)("div", { ...(dataUieName && {
-                'data-uie-name': `dropdown-${dataUieName}`,
-            }), children: children }) }));
-};
-exports.Menu = Menu;
-// eslint-disable-next-line react/display-name
-const MenuList = (menuListHeading, dataUieName) => (props) => {
-    const { selectProps, children } = props;
-    const handleClose = () => {
-        if (selectProps && selectProps.onMenuClose) {
-            selectProps.onMenuClose();
-        }
-    };
-    return ((0, jsx_runtime_1.jsx)(react_select_1.components.MenuList, { ...props, children: (0, jsx_runtime_1.jsxs)("div", { ...(dataUieName && {
-                'data-uie-name': `menu-list-${dataUieName}`,
-            }), children: [(0, jsx_runtime_1.jsxs)("div", { css: (theme) => (0, SelectComponents_styles_1.menuListHeadingContainerStyles)(theme), children: [menuListHeading, (0, jsx_runtime_1.jsx)("button", { onClick: handleClose, css: SelectComponents_styles_1.menuListCloseButtonStyles, "aria-label": `Close: ${menuListHeading}`, children: (0, jsx_runtime_1.jsx)(Icon_1.CloseIcon, { width: 16, height: 16 }) })] }), children] }) }));
-};
-exports.MenuList = MenuList;
-exports.MenuList.displayName = 'MenuList';
-const renderValue = value => {
-    if (Array.isArray(value)) {
-        const currentValue = (i) => value[i].props.children;
-        return ((0, jsx_runtime_1.jsx)("div", { css: {
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                minWidth: 0,
-                paddingRight: 14,
-                gridArea: '1/1/2/3',
-            }, children: currentValue(0) }));
-    }
-    return value;
-};
-exports.renderValue = renderValue;
-const ValueContainer = ({ children, ...restProps }) => ((0, jsx_runtime_1.jsxs)(react_select_1.components.ValueContainer, { ...restProps, children: [(0, exports.renderValue)(children[0]), " ", children[1]] }));
-exports.ValueContainer = ValueContainer;
-const IndicatorsContainer = ({ children, ...restProps }) => {
-    const value = restProps.getValue();
-    const displaySelectedOptionsCount = Array.isArray(value) && value.length > 1;
-    return ((0, jsx_runtime_1.jsxs)(react_select_1.components.IndicatorsContainer, { ...restProps, children: [displaySelectedOptionsCount && (0, jsx_runtime_1.jsxs)("div", { css: { fontWeight: 600 }, children: ["(+", value.length - 1, ")"] }), children] }));
-};
-exports.IndicatorsContainer = IndicatorsContainer;

package/lib/Form/SelectComponents.styles.d.ts

@@ -1,5 +0,0 @@
-import { CSSObject } from '@emotion/react';
-import { Theme } from '../Theme/Theme';
-export declare const menuListHeadingContainerStyles: (theme: Theme) => CSSObject;
-export declare const menuListCloseButtonStyles: CSSObject;
-//# sourceMappingURL=SelectComponents.styles.d.ts.map

package/lib/Form/SelectComponents.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectComponents.styles.d.ts","sourceRoot":"","sources":["../../src/Form/SelectComponents.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAC,KAAK,EAAC,MAAM,gBAAgB,CAAC;AAErC,eAAO,MAAM,8BAA8B,UAAW,KAAK,KAAG,SAO5D,CAAC;AAEH,eAAO,MAAM,yBAAyB,EAAE,SAOvC,CAAC"}