npm - @contentful/f36-multiselect - Versions diffs - 4.19.0 - Mend

@contentful/f36-multiselect 4.19.0

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.

Files changed (8) hide show

package/CHANGELOG.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ ## Change Log

package/README.mdx ADDED Viewed

@@ -0,0 +1,87 @@
+---
+title: 'Multiselect'
+type: 'component'
+status: 'alpha'
+section: 'formComponents'
+slug: /components/multiselect/
+github: 'https://github.com/contentful/forma-36/tree/main/packages/components/Multiselect'
+storybook: 'https://v4-f36-storybook.netlify.app/?path=/story/form-elements-multiselect--basic'
+typescript: ./Multiselect.tsx,./MultiselectOption.tsx
+---
+Multiselect allows users to make a multi selection from a list of options.
+It has multiple optional features like a search.
+## Import
+```jsx static=true
+import { Multiselect } from '@contentful/f36-components';
+// or
+import { Multiselect } from '@contentful/f36-multiselect';
+```
+## Examples
+### Basic usage
+The Multiselect is a fully controlled form element and expects the selectable items as children via the compound component Multiselect.Option.
+Properties are:
+For the multiselect itself:
+- currentSelection (optional but recommended): an array of the labels of selected options. This will give the user a hint that there are selected items. This is optional
+- placeholder (optional): Label of the trigger button without selected elements
+- startIcon (optional): Icon on the start of the trigger button
+- isLoading: enables showing a loading animation while searching or loading results
+Inherited propertys from Popover Component.
+- listWidth (optional): auto or full
+- listMaxHeight (optional): sets the maximum height of the list drawer, overflow will be scrolled
+It also accepts refs for the toggle button, the searchInput and the list.
+For the option:
+- itemId: identifier for the element, used to link the label with the checkbox
+- value: the actual value of the select option
+- label: displayed label
+- onSelectItem: This function is called when the user selects a option, it needs to be passed to the MultiselectOption
+- isChecked (optional): controlls if a element is initially selected
+- isDisabled (optional): controlls if a element is changeable
+```jsx file=./examples/MultiselectBasicUsageExample.tsx
+```
+### Searchable options
+One optional feature of the Multiselect component is to allow filtering the list via a search field.
+To make it work, the onSearchValueChange callback function needs to be provided.
+To enable searching the following properties have to be set.
+- onSearchValueChange: Callbackfunction which enables the search field. This function needs to provide the search /filter algorithm
+- searchPlaceholder (optional): placeholder for the search field
+- noMatchesMessage (optional): message shown when search result is empty
+```jsx file=./examples/MultiselectBasicUsageExample.tsx
+```
+## Props (API reference)
+<PropsTable of="Multiselect" />
+## Content guidelines
+- Multiselect placeholder should be short but descriptive.
+- Multiselect options can come from a simple array of strings or more complex objects.
+- Do not use the index position of the items in the filtered array for keys or ids, as they are going to change while filtering.
+- Use any algorithm you like in order to search and filter. Depending on your implementation you can also generate a new request to your dataset based on the users input.
+## Accessibility
+- When focussing the toggle button, the enter key opens it. The dropdown content automatically will be focussed
+- Pressing the space bar toggles the checked state of an option and will trigger the onSelectItem callback function

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,85 @@
+import React from 'react';
+import { CommonProps } from '@contentful/f36-core';
+import { PopoverProps } from '@contentful/f36-popover';
+interface MulitselectOptionProps {
+    label: string;
+    value: string;
+    itemId: string;
+    searchValue?: string;
+    onSelectItem: (event: React.ChangeEvent) => void;
+    isChecked?: boolean;
+    isDisabled?: boolean;
+}
+declare const MultiselectOption: ({ label, value, itemId, onSelectItem, searchValue, isChecked, isDisabled, ...rest }: MulitselectOptionProps) => JSX.Element;
+interface MultiselectProps extends CommonProps {
+    /** Select Options */
+    children?: React.ReactNode;
+    /**
+     * Set a custom icon for the text input
+     */
+    startIcon?: React.ReactElement;
+    /**
+     * Placeholder shown before selecting any elements. Defaults to 'Select one or more items'
+     */
+    placeholder?: string;
+    /**
+     * current Selected items, to be shown on the trigger button
+     */
+    currentSelection?: Array<string>;
+    /**
+     * Function called whenever the search input value changes
+     */
+    onSearchValueChange?: (event: React.ChangeEvent) => void | undefined;
+    /**
+     * This is the value will be passed to the `placeholder` prop of the input.
+     * @default "Search"
+     */
+    searchPlaceholder?: string;
+    /**
+     * A message that will be shown when it is not possible to find any option that matches the input value
+     * @default "No matches"
+     */
+    noMatchesMessage?: string;
+    /**
+     * Use this prop to get a ref to the input element of the component
+     */
+    searchInputRef?: React.Ref<HTMLInputElement>;
+    /**
+     * Sets the list to show its loading state
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Use this prop to get a ref to the toggle button of the component
+     */
+    toggleRef?: React.Ref<HTMLButtonElement>;
+    /**
+     * Props to pass to the Popover (Dropdown) component
+     */
+    popoverProps?: Partial<PopoverProps> & {
+        /**
+         * It sets the max-height, in pixels, of the list
+         * The default value is the height of 5 single line items
+         * @default 180
+         */
+        listMaxHeight?: number;
+        /**
+         * Use this prop to get a ref to the list of items of the component
+         */
+        listRef?: React.Ref<HTMLUListElement>;
+    };
+}
+/**
+ * The Multiselect is a component that will allow a user to select multiple items.
+ * It has an optional
+ */
+declare const Multiselect$1: React.ForwardRefExoticComponent<MultiselectProps & React.RefAttributes<HTMLDivElement>>;
+declare type CompoundMultiselect = typeof Multiselect$1 & {
+    Option: typeof MultiselectOption;
+};
+declare const Multiselect: CompoundMultiselect;
+export { MulitselectOptionProps, Multiselect, MultiselectOption, MultiselectProps };

package/dist/index.js ADDED Viewed

@@ -0,0 +1,26 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+var e = require('react');
+var f36Forms = require('@contentful/f36-forms');
+var f36Typography = require('@contentful/f36-typography');
+var emotion = require('emotion');
+var i = require('@contentful/f36-tokens');
+var f36Utils = require('@contentful/f36-utils');
+var f36Core = require('@contentful/f36-core');
+var f36Button = require('@contentful/f36-button');
+var f36Icons = require('@contentful/f36-icons');
+var f36Skeleton = require('@contentful/f36-skeleton');
+var f36Popover = require('@contentful/f36-popover');
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+var e__default = /*#__PURE__*/_interopDefaultLegacy(e);
+var i__default = /*#__PURE__*/_interopDefaultLegacy(i);
+var J=Object.defineProperty;var M=Object.getOwnPropertySymbols;var L=Object.prototype.hasOwnProperty,N=Object.prototype.propertyIsEnumerable;var H=(t,n,o)=>n in t?J(t,n,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[n]=o,v=(t,n)=>{for(var o in n||(n={}))L.call(n,o)&&H(t,o,n[o]);if(M)for(var o of M(n))N.call(n,o)&&H(t,o,n[o]);return t};var B=(t,n)=>{var o={};for(var r in t)L.call(t,r)&&n.indexOf(r)<0&&(o[r]=t[r]);if(t!=null&&M)for(var r of M(t))n.indexOf(r)<0&&N.call(t,r)&&(o[r]=t[r]);return o};var b=()=>({multiselect:emotion.css({position:"relative",width:"100%"}),currentSelection:emotion.css({width:"50%",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",verticalAlign:"bottom",marginRight:i__default["default"].spacing2Xs}),inputField:emotion.css({paddingRight:i__default["default"].spacingXl,textOverflow:"ellipsis",whiteSpace:"nowrap"}),toggleButton:emotion.css({position:"absolute",top:"1px",right:"1px",zIndex:i__default["default"].zIndexDefault,padding:i__default["default"].spacing2Xs,height:i__default["default"].spacingXl}),content:t=>emotion.css({overflow:"auto",maxHeight:`${t}px`}),list:emotion.css({listStyle:"none",padding:`${i__default["default"].spacingXs} 0`,margin:0}),groupTitle:emotion.css({padding:`${i__default["default"].spacingXs} ${i__default["default"].spacingM}`,lineHeight:i__default["default"].lineHeightM}),noMatchesTitle:emotion.css({color:i__default["default"].gray500,margin:i__default["default"].spacingM}),item:emotion.css({padding:`${i__default["default"].spacingXs} ${i__default["default"].spacingM}`,wordBreak:"break-word",whiteSpace:"break-spaces",hyphens:"auto",display:"flex",flexDirection:"row",alignItems:"center","&:focus, &:hover":{backgroundColor:i__default["default"].gray100},"&:active":{backgroundColor:i__default["default"].gray200},"&:focus":{boxShadow:i__default["default"].glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:i__default["default"].glowPrimary}}),disabled:emotion.css({opacity:.5,cursor:"not-allowed"})});var C=w=>{var f=w,{label:t,value:n,itemId:o,onSelectItem:r,searchValue:m,isChecked:u=!1,isDisabled:c=!1}=f,S=B(f,["label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled"]);let h=b();return e__default["default"].createElement("li",v({},S),e__default["default"].createElement("label",{htmlFor:o,className:emotion.cx(h.item,c&&h.disabled)},e__default["default"].createElement(f36Forms.Checkbox,{id:o,value:n,onChange:d=>r(d),isChecked:u,isDisabled:c}),e__default["default"].createElement(f36Typography.Text,{"data-test-id":`cf-multiselect-list-item-${o}`},e__default["default"].createElement(V,{item:t,inputValue:m}))))};function V({item:t,inputValue:n=""}){let{before:o,match:r,after:m}=f36Utils.getStringMatch(t,n);return e__default["default"].createElement(e__default["default"].Fragment,null,o,e__default["default"].createElement("b",{"data-test-id":"cf-multiselect-item-match"},r),m)}V.displayName="HighlightedItem";function me(t,n){let{className:o,startIcon:r,placeholder:m="Select one or more Items",currentSelection:u=[],onSearchValueChange:c,searchPlaceholder:S="Search",searchInputRef:w,noMatchesMessage:f="No matches found",toggleRef:h,isLoading:d=!1,testId:F="cf-multiselect",popoverProps:P={},children:x}=t,{listMaxHeight:A=180,listRef:j}=P,a=b(),[g,O]=e.useState(""),[k,T]=e.useState(!1),y=e.useRef(null),U=typeof c=="function",W=e.useCallback(l=>{O(l.target.value),c==null||c(l);},[c,O]),_=()=>{Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(y.current,"");let G=new Event("change",{bubbles:!0});y.current.dispatchEvent(G);},q=e.useCallback(()=>{if(u.length===0)return e__default["default"].createElement(e__default["default"].Fragment,null,m);let l=u.length-1;return l===0?e__default["default"].createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:a.currentSelection},u[0]):e__default["default"].createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:a.currentSelection},u[0]," and ",l," more"," ")},[u,m,a.currentSelection]),E=e.useMemo(()=>e__default["default"].Children.count(x),[x]);return e__default["default"].createElement("div",{"data-test-id":F,className:emotion.cx(a.multiselect,o),ref:n},e__default["default"].createElement(f36Popover.Popover,v({isOpen:k,onClose:()=>T(!1),renderOnlyWhenOpen:!1},P),e__default["default"].createElement(f36Popover.Popover.Trigger,null,e__default["default"].createElement(f36Button.Button,{"aria-label":"Toggle Multiselect",ref:h,onClick:()=>T(!k),startIcon:r,endIcon:e__default["default"].createElement(f36Icons.ChevronDownIcon,null)},q())),e__default["default"].createElement(f36Popover.Popover.Content,{ref:j,className:a.content(A),testId:"cf-multiselect-container"},e__default["default"].createElement(e__default["default"].Fragment,null,U&&e__default["default"].createElement(e__default["default"].Fragment,null,e__default["default"].createElement(f36Forms.TextInput,{"aria-label":"Search",type:"text",value:g,className:a.inputField,testId:"cf-multiselect-search",placeholder:S,onChange:W,ref:f36Core.mergeRefs(w,y)}),e__default["default"].createElement(f36Button.IconButton,{"aria-label":g?"Clear search":"Search",className:a.toggleButton,variant:"transparent",icon:g?e__default["default"].createElement(f36Icons.CloseIcon,{variant:"muted"}):e__default["default"].createElement(f36Icons.SearchIcon,{variant:"muted"}),onClick:()=>{g&&_();},isDisabled:!g,size:"small"})),d&&e__default["default"].createElement(ge,null),!d&&E>0&&e__default["default"].createElement("ul",{className:a.list,"data-test-id":"cf-multiselect-items"},e__default["default"].Children.map(x,l=>e__default["default"].isValidElement(l)?e__default["default"].cloneElement(l,{searchValue:g}):l)),!d&&E===0&&e__default["default"].createElement(f36Typography.Subheading,{className:a.noMatchesTitle},f)))))}var ge=()=>e__default["default"].createElement(f36Skeleton.SkeletonContainer,{svgHeight:16},e__default["default"].createElement(f36Skeleton.SkeletonBodyText,{numberOfLines:1})),$=e__default["default"].forwardRef(me);var z=$;z.Option=C;
+exports.Multiselect = z;
+exports.MultiselectOption = C;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/MultiselectOption.tsx","../src/Multiselect.styles.ts","../src/Multiselect.tsx","../src/CompoundMultiselect.tsx"],"names":["React","Checkbox","Text","css","tokens","getMultiselectStyles","listMaxHeight","getStringMatch","cx","MultiselectOption","_a","_b","label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","rest","__objRest","styles","__spreadValues","event","HighlightedItem","item","inputValue","before","match","after","useRef","useState","useCallback","useMemo","mergeRefs","Button","IconButton","TextInput","CloseIcon","ChevronDownIcon","SearchIcon","SkeletonContainer","SkeletonBodyText","Popover","Subheading","_Multiselect","props","ref","className","startIcon","placeholder","currentSelection","onSearchValueChange","searchPlaceholder","searchInputRef","noMatchesMessage","toggleRef","isLoading","testId","popoverProps","children","listRef","setSearchValue","isOpen","setIsOpen","internalSearchInputRef","hasSearch","handleSearchChange","resetSearch","forcedEvent","renderMultiselectLabel","leftoverCount","childrenLength","ListItemLoadingState","child","Multiselect"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Checkbox } from '@contentful/f36-forms';\nimport { Text } from '@contentful/f36-typography';\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { getStringMatch } from '@contentful/f36-utils';\nimport { cx } from 'emotion';\n\nexport interface MulitselectOptionProps {\n label: string;\n value: string;\n itemId: string;\n searchValue?: string;\n onSelectItem: (event: React.ChangeEvent) => void;\n isChecked?: boolean;\n isDisabled?: boolean;\n}\n\nexport const MultiselectOption = ({\n label,\n value,\n itemId,\n onSelectItem,\n searchValue,\n isChecked = false,\n isDisabled = false,\n ...rest\n}: MulitselectOptionProps) => {\n const styles = getMultiselectStyles();\n\n return (\n <li {...rest}>\n <label\n htmlFor={itemId}\n className={cx(styles.item, isDisabled && styles.disabled)}\n >\n <Checkbox\n id={itemId}\n value={value}\n onChange={(event) => onSelectItem(event)}\n isChecked={isChecked}\n isDisabled={isDisabled}\n />\n <Text data-test-id={`cf-multiselect-list-item-${itemId}`}>\n <HighlightedItem item={label} inputValue={searchValue} />\n </Text>\n </label>\n </li>\n );\n};\n\nfunction HighlightedItem({\n item,\n inputValue = '',\n}: {\n item: string;\n inputValue?: string;\n}) {\n const { before, match, after } = getStringMatch(item, inputValue);\n return (\n <>\n {before}\n <b data-test-id=\"cf-multiselect-item-match\">{match}</b>\n {after}\n </>\n );\n}\n\nHighlightedItem.displayName = 'HighlightedItem';\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getMultiselectStyles = () => ({\n multiselect: css({\n position: 'relative',\n width: '100%',\n }),\n currentSelection: css({\n width: '50%',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n verticalAlign: 'bottom',\n marginRight: tokens.spacing2Xs,\n }),\n inputField: css({\n paddingRight: tokens.spacingXl,\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }),\n toggleButton: css({\n position: 'absolute',\n top: '1px',\n right: '1px',\n zIndex: tokens.zIndexDefault,\n padding: tokens.spacing2Xs,\n height: tokens.spacingXl,\n }),\n content: (listMaxHeight: number) =>\n css({\n overflow: 'auto',\n maxHeight: `${listMaxHeight}px`,\n }),\n list: css({\n listStyle: 'none',\n padding: `${tokens.spacingXs} 0`,\n margin: 0,\n }),\n groupTitle: css({\n padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n lineHeight: tokens.lineHeightM,\n }),\n noMatchesTitle: css({\n color: tokens.gray500,\n margin: tokens.spacingM,\n }),\n item: css({\n padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n wordBreak: 'break-word',\n whiteSpace: 'break-spaces',\n hyphens: 'auto',\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n '&:focus, &:hover': {\n backgroundColor: tokens.gray100,\n },\n '&:active': {\n backgroundColor: tokens.gray200,\n },\n '&:focus': {\n boxShadow: tokens.glowPrimary,\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n boxShadow: tokens.glowPrimary,\n },\n }),\n disabled: css({\n opacity: 0.5,\n cursor: 'not-allowed',\n }),\n});\n","import React, { useRef, useState, useCallback, useMemo } from 'react';\nimport { cx } from 'emotion';\n\nimport { mergeRefs, type CommonProps } from '@contentful/f36-core';\nimport { Button, IconButton } from '@contentful/f36-button';\nimport { TextInput } from '@contentful/f36-forms';\nimport { CloseIcon, ChevronDownIcon, SearchIcon } from '@contentful/f36-icons';\nimport { SkeletonContainer, SkeletonBodyText } from '@contentful/f36-skeleton';\nimport { Popover, type PopoverProps } from '@contentful/f36-popover';\nimport { Subheading } from '@contentful/f36-typography';\n\nimport { getMultiselectStyles } from './Multiselect.styles';\n\nexport interface MultiselectProps extends CommonProps {\n /** Select Options */\n children?: React.ReactNode;\n\n /**\n * Set a custom icon for the text input\n */\n startIcon?: React.ReactElement;\n\n /**\n * Placeholder shown before selecting any elements. Defaults to 'Select one or more items'\n */\n placeholder?: string;\n\n /**\n * current Selected items, to be shown on the trigger button\n */\n currentSelection?: Array<string>;\n\n /**\n * Function called whenever the search input value changes\n */\n onSearchValueChange?: (event: React.ChangeEvent) => void | undefined;\n\n /**\n * This is the value will be passed to the `placeholder` prop of the input.\n * @default \"Search\"\n */\n searchPlaceholder?: string;\n\n /**\n * A message that will be shown when it is not possible to find any option that matches the input value\n * @default \"No matches\"\n */\n noMatchesMessage?: string;\n\n /**\n * Use this prop to get a ref to the input element of the component\n */\n searchInputRef?: React.Ref<HTMLInputElement>;\n\n /**\n * Sets the list to show its loading state\n * @default false\n */\n isLoading?: boolean;\n\n /**\n * Use this prop to get a ref to the toggle button of the component\n */\n toggleRef?: React.Ref<HTMLButtonElement>;\n\n /**\n * Props to pass to the Popover (Dropdown) component\n */\n popoverProps?: Partial<PopoverProps> & {\n /**\n * It sets the max-height, in pixels, of the list\n * The default value is the height of 5 single line items\n * @default 180\n */\n listMaxHeight?: number;\n\n /**\n * Use this prop to get a ref to the list of items of the component\n */\n listRef?: React.Ref<HTMLUListElement>;\n };\n}\n\nfunction _Multiselect(props: MultiselectProps, ref: React.Ref<HTMLDivElement>) {\n const {\n className,\n startIcon,\n placeholder = 'Select one or more Items',\n currentSelection = [],\n onSearchValueChange,\n searchPlaceholder = 'Search',\n searchInputRef,\n noMatchesMessage = 'No matches found',\n toggleRef,\n isLoading = false,\n testId = 'cf-multiselect',\n popoverProps = {},\n children,\n } = props;\n\n const { listMaxHeight = 180, listRef } = popoverProps;\n\n const styles = getMultiselectStyles();\n\n const [searchValue, setSearchValue] = useState('');\n const [isOpen, setIsOpen] = useState(false);\n\n const internalSearchInputRef = useRef(null);\n\n const hasSearch = typeof onSearchValueChange === 'function';\n\n const handleSearchChange = useCallback(\n (event) => {\n setSearchValue(event.target.value);\n onSearchValueChange?.(event);\n },\n [onSearchValueChange, setSearchValue],\n );\n\n const resetSearch = () => {\n // this looks a bit hacky, but is the official way of externally triggering the onChange handler for an input\n // https://stackoverflow.com/a/46012210/17269164\n\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n 'value',\n ).set;\n nativeInputValueSetter.call(internalSearchInputRef.current, '');\n const forcedEvent = new Event('change', { bubbles: true });\n internalSearchInputRef.current.dispatchEvent(forcedEvent);\n };\n\n const renderMultiselectLabel = useCallback(() => {\n if (currentSelection.length === 0) {\n return <>{placeholder}</>;\n }\n const leftoverCount = currentSelection.length - 1;\n if (leftoverCount === 0) {\n return (\n <span\n data-test-id=\"cf-multiselect-current-selection\"\n className={styles.currentSelection}\n >\n {currentSelection[0]}\n </span>\n );\n }\n return (\n <span\n data-test-id=\"cf-multiselect-current-selection\"\n className={styles.currentSelection}\n >\n {currentSelection[0]} and {leftoverCount} more{' '}\n </span>\n );\n }, [currentSelection, placeholder, styles.currentSelection]);\n\n const childrenLength = useMemo(\n () => React.Children.count(children),\n [children],\n );\n\n return (\n <div\n data-test-id={testId}\n className={cx(styles.multiselect, className)}\n ref={ref}\n >\n <Popover\n isOpen={isOpen}\n onClose={() => setIsOpen(false)}\n renderOnlyWhenOpen={false}\n {...popoverProps}\n >\n <Popover.Trigger>\n <Button\n aria-label=\"Toggle Multiselect\"\n ref={toggleRef}\n onClick={() => setIsOpen(!isOpen)}\n startIcon={startIcon}\n endIcon={<ChevronDownIcon />}\n >\n {renderMultiselectLabel()}\n </Button>\n </Popover.Trigger>\n <Popover.Content\n ref={listRef}\n className={styles.content(listMaxHeight)}\n testId=\"cf-multiselect-container\"\n >\n <>\n {hasSearch && (\n <>\n <TextInput\n aria-label=\"Search\"\n type=\"text\"\n value={searchValue}\n className={styles.inputField}\n testId=\"cf-multiselect-search\"\n placeholder={searchPlaceholder}\n onChange={handleSearchChange}\n ref={mergeRefs(searchInputRef, internalSearchInputRef)}\n />\n <IconButton\n aria-label={searchValue ? 'Clear search' : 'Search'}\n className={styles.toggleButton}\n variant=\"transparent\"\n icon={\n searchValue ? (\n <CloseIcon variant=\"muted\" />\n ) : (\n <SearchIcon variant=\"muted\" />\n )\n }\n onClick={() => {\n if (searchValue) {\n resetSearch();\n }\n }}\n isDisabled={!searchValue}\n size=\"small\"\n />\n </>\n )}\n {isLoading && <ListItemLoadingState />}\n\n {!isLoading && childrenLength > 0 && (\n <ul className={styles.list} data-test-id=\"cf-multiselect-items\">\n {React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n searchValue,\n });\n }\n return child;\n })}\n </ul>\n )}\n\n {!isLoading && childrenLength === 0 && (\n <Subheading className={styles.noMatchesTitle}>\n {noMatchesMessage}\n </Subheading>\n )}\n </>\n </Popover.Content>\n </Popover>\n </div>\n );\n}\n\nconst ListItemLoadingState = () => {\n return (\n <SkeletonContainer svgHeight={16}>\n <SkeletonBodyText numberOfLines={1} />\n </SkeletonContainer>\n );\n};\n\n/**\n * The Multiselect is a component that will allow a user to select multiple items.\n * It has an optional\n */\nexport const Multiselect = React.forwardRef(_Multiselect);\n","import { Multiselect as OriginalMultiSelect } from './Multiselect';\nimport { MultiselectOption } from './MultiselectOption';\n\ntype CompoundMultiselect = typeof OriginalMultiSelect & {\n Option: typeof MultiselectOption;\n};\n\nexport const Multiselect = OriginalMultiSelect as CompoundMultiselect;\nMultiselect.Option = MultiselectOption;\n"]}

package/dist/index.mjs ADDED Viewed

@@ -0,0 +1,16 @@
+import e, { useState, useRef, useCallback, useMemo } from 'react';
+import { Checkbox, TextInput } from '@contentful/f36-forms';
+import { Text, Subheading } from '@contentful/f36-typography';
+import { cx, css } from 'emotion';
+import i from '@contentful/f36-tokens';
+import { getStringMatch } from '@contentful/f36-utils';
+import { mergeRefs } from '@contentful/f36-core';
+import { Button, IconButton } from '@contentful/f36-button';
+import { ChevronDownIcon, CloseIcon, SearchIcon } from '@contentful/f36-icons';
+import { SkeletonContainer, SkeletonBodyText } from '@contentful/f36-skeleton';
+import { Popover } from '@contentful/f36-popover';
+var J=Object.defineProperty;var M=Object.getOwnPropertySymbols;var L=Object.prototype.hasOwnProperty,N=Object.prototype.propertyIsEnumerable;var H=(t,n,o)=>n in t?J(t,n,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[n]=o,v=(t,n)=>{for(var o in n||(n={}))L.call(n,o)&&H(t,o,n[o]);if(M)for(var o of M(n))N.call(n,o)&&H(t,o,n[o]);return t};var B=(t,n)=>{var o={};for(var r in t)L.call(t,r)&&n.indexOf(r)<0&&(o[r]=t[r]);if(t!=null&&M)for(var r of M(t))n.indexOf(r)<0&&N.call(t,r)&&(o[r]=t[r]);return o};var b=()=>({multiselect:css({position:"relative",width:"100%"}),currentSelection:css({width:"50%",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",verticalAlign:"bottom",marginRight:i.spacing2Xs}),inputField:css({paddingRight:i.spacingXl,textOverflow:"ellipsis",whiteSpace:"nowrap"}),toggleButton:css({position:"absolute",top:"1px",right:"1px",zIndex:i.zIndexDefault,padding:i.spacing2Xs,height:i.spacingXl}),content:t=>css({overflow:"auto",maxHeight:`${t}px`}),list:css({listStyle:"none",padding:`${i.spacingXs} 0`,margin:0}),groupTitle:css({padding:`${i.spacingXs} ${i.spacingM}`,lineHeight:i.lineHeightM}),noMatchesTitle:css({color:i.gray500,margin:i.spacingM}),item:css({padding:`${i.spacingXs} ${i.spacingM}`,wordBreak:"break-word",whiteSpace:"break-spaces",hyphens:"auto",display:"flex",flexDirection:"row",alignItems:"center","&:focus, &:hover":{backgroundColor:i.gray100},"&:active":{backgroundColor:i.gray200},"&:focus":{boxShadow:i.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:i.glowPrimary}}),disabled:css({opacity:.5,cursor:"not-allowed"})});var C=w=>{var f=w,{label:t,value:n,itemId:o,onSelectItem:r,searchValue:m,isChecked:u=!1,isDisabled:c=!1}=f,S=B(f,["label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled"]);let h=b();return e.createElement("li",v({},S),e.createElement("label",{htmlFor:o,className:cx(h.item,c&&h.disabled)},e.createElement(Checkbox,{id:o,value:n,onChange:d=>r(d),isChecked:u,isDisabled:c}),e.createElement(Text,{"data-test-id":`cf-multiselect-list-item-${o}`},e.createElement(V,{item:t,inputValue:m}))))};function V({item:t,inputValue:n=""}){let{before:o,match:r,after:m}=getStringMatch(t,n);return e.createElement(e.Fragment,null,o,e.createElement("b",{"data-test-id":"cf-multiselect-item-match"},r),m)}V.displayName="HighlightedItem";function me(t,n){let{className:o,startIcon:r,placeholder:m="Select one or more Items",currentSelection:u=[],onSearchValueChange:c,searchPlaceholder:S="Search",searchInputRef:w,noMatchesMessage:f="No matches found",toggleRef:h,isLoading:d=!1,testId:F="cf-multiselect",popoverProps:P={},children:x}=t,{listMaxHeight:A=180,listRef:j}=P,a=b(),[g,O]=useState(""),[k,T]=useState(!1),y=useRef(null),U=typeof c=="function",W=useCallback(l=>{O(l.target.value),c==null||c(l);},[c,O]),_=()=>{Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(y.current,"");let G=new Event("change",{bubbles:!0});y.current.dispatchEvent(G);},q=useCallback(()=>{if(u.length===0)return e.createElement(e.Fragment,null,m);let l=u.length-1;return l===0?e.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:a.currentSelection},u[0]):e.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:a.currentSelection},u[0]," and ",l," more"," ")},[u,m,a.currentSelection]),E=useMemo(()=>e.Children.count(x),[x]);return e.createElement("div",{"data-test-id":F,className:cx(a.multiselect,o),ref:n},e.createElement(Popover,v({isOpen:k,onClose:()=>T(!1),renderOnlyWhenOpen:!1},P),e.createElement(Popover.Trigger,null,e.createElement(Button,{"aria-label":"Toggle Multiselect",ref:h,onClick:()=>T(!k),startIcon:r,endIcon:e.createElement(ChevronDownIcon,null)},q())),e.createElement(Popover.Content,{ref:j,className:a.content(A),testId:"cf-multiselect-container"},e.createElement(e.Fragment,null,U&&e.createElement(e.Fragment,null,e.createElement(TextInput,{"aria-label":"Search",type:"text",value:g,className:a.inputField,testId:"cf-multiselect-search",placeholder:S,onChange:W,ref:mergeRefs(w,y)}),e.createElement(IconButton,{"aria-label":g?"Clear search":"Search",className:a.toggleButton,variant:"transparent",icon:g?e.createElement(CloseIcon,{variant:"muted"}):e.createElement(SearchIcon,{variant:"muted"}),onClick:()=>{g&&_();},isDisabled:!g,size:"small"})),d&&e.createElement(ge,null),!d&&E>0&&e.createElement("ul",{className:a.list,"data-test-id":"cf-multiselect-items"},e.Children.map(x,l=>e.isValidElement(l)?e.cloneElement(l,{searchValue:g}):l)),!d&&E===0&&e.createElement(Subheading,{className:a.noMatchesTitle},f)))))}var ge=()=>e.createElement(SkeletonContainer,{svgHeight:16},e.createElement(SkeletonBodyText,{numberOfLines:1})),$=e.forwardRef(me);var z=$;z.Option=C;
+export { z as Multiselect, C as MultiselectOption };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,45 @@
+{
+  "name": "@contentful/f36-multiselect",
+  "version": "4.19.0",
+  "description": "Forma 36: Multiselect Component",
+  "scripts": {
+    "build": "tsup"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.6.2",
+    "@contentful/f36-button": "^4.18.0",
+    "@contentful/f36-core": "^4.18.0",
+    "@contentful/f36-icons": "^4.18.0",
+    "@contentful/f36-skeleton": "^4.18.0",
+    "@contentful/f36-tokens": "^4.0.1",
+    "@contentful/f36-typography": "^4.18.0",
+    "@contentful/f36-popover": "^4.18.0",
+    "@contentful/f36-utils": "^4.18.0",
+    "@contentful/f36-forms": "^4.18.0",
+    "emotion": "^10.0.17"
+  },
+  "peerDependencies": {
+    "react": ">=16.8"
+  },
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "source": "src/index.ts",
+  "sideEffects": false,
+  "browserslist": "extends @contentful/browserslist-config",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/contentful/forma-36"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "formik": "^2.2.9",
+    "react-hook-form": "^7.15.0"
+  }
+}