@economic/taco 2.45.0-alpha.0 → 2.45.0-alpha.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (31) hide show
  1. package/dist/components/Layout/components/Top.d.ts +3 -3
  2. package/dist/components/Select2/utilities.d.ts +2 -0
  3. package/dist/esm/packages/taco/src/components/Layout/components/Top.js +2 -2
  4. package/dist/esm/packages/taco/src/components/Layout/components/Top.js.map +1 -1
  5. package/dist/esm/packages/taco/src/components/Select2/Select2.js +29 -5
  6. package/dist/esm/packages/taco/src/components/Select2/Select2.js.map +1 -1
  7. package/dist/esm/packages/taco/src/components/Select2/components/Option.js +1 -1
  8. package/dist/esm/packages/taco/src/components/Select2/components/Option.js.map +1 -1
  9. package/dist/esm/packages/taco/src/components/Select2/components/Search.js +1 -1
  10. package/dist/esm/packages/taco/src/components/Select2/components/Search.js.map +1 -1
  11. package/dist/esm/packages/taco/src/components/Select2/hooks/useChildren.js +1 -10
  12. package/dist/esm/packages/taco/src/components/Select2/hooks/useChildren.js.map +1 -1
  13. package/dist/esm/packages/taco/src/components/Select2/utilities.js +11 -1
  14. package/dist/esm/packages/taco/src/components/Select2/utilities.js.map +1 -1
  15. package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/SaveStatus.js +1 -1
  16. package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/SaveStatus.js.map +1 -1
  17. package/dist/esm/packages/taco/src/primitives/Collection/components/Root.js +2 -4
  18. package/dist/esm/packages/taco/src/primitives/Collection/components/Root.js.map +1 -1
  19. package/dist/esm/packages/taco/src/primitives/Listbox2/components/Option.js +1 -0
  20. package/dist/esm/packages/taco/src/primitives/Listbox2/components/Option.js.map +1 -1
  21. package/dist/esm/packages/taco/src/primitives/Table/useTableManager/features/useTableSearch.js +3 -3
  22. package/dist/esm/packages/taco/src/primitives/Table/useTableManager/features/useTableSearch.js.map +1 -1
  23. package/dist/esm/packages/taco/src/utils/dom.js +3 -2
  24. package/dist/esm/packages/taco/src/utils/dom.js.map +1 -1
  25. package/dist/primitives/Collection/components/Root.d.ts +1 -1
  26. package/dist/primitives/Table/Core/components/Body/util.d.ts +4 -4
  27. package/dist/taco.cjs.development.js +51 -28
  28. package/dist/taco.cjs.development.js.map +1 -1
  29. package/dist/taco.cjs.production.min.js +1 -1
  30. package/dist/taco.cjs.production.min.js.map +1 -1
  31. package/package.json +3 -3
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  export declare type LayoutTopProps = {
3
- children: React.ReactNode | React.ReactNode[] | (({ toggleSidebar }: {
3
+ children: React.ReactNode | (({ toggleSidebar }: {
4
4
  toggleSidebar: () => void;
5
- }) => React.ReactNode | React.ReactNode[]);
5
+ }) => React.ReactNode);
6
6
  };
7
- export declare const Top: (props: LayoutTopProps) => React.ReactNode;
7
+ export declare const Top: (props: LayoutTopProps) => React.JSX.Element;
@@ -1,3 +1,5 @@
1
+ import { Select2OptionProps } from './components/Option';
1
2
  export declare const createOptionClassName: (shouldPauseHoverState?: boolean) => string;
2
3
  export declare const createCollectionClassName: () => string;
3
4
  export declare const getFontSize: (fontSize?: "small" | "medium" | "large" | undefined) => "text-xs" | "text-base" | "text-sm";
5
+ export declare const filterOption: (child: React.ReactElement<Select2OptionProps>, searchQuery: string) => boolean;
@@ -6,9 +6,9 @@ const Top = props => {
6
6
  setSidebarOpen
7
7
  } = React__default.useContext(LayoutContext);
8
8
  const toggleSidebar = () => setSidebarOpen(open => !open);
9
- return typeof props.children === 'function' ? props.children({
9
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, typeof props.children === 'function' ? props.children({
10
10
  toggleSidebar
11
- }) : props.children;
11
+ }) : props.children);
12
12
  };
13
13
 
14
14
  export { Top };
@@ -1 +1 @@
1
- {"version":3,"file":"Top.js","sources":["../../../../../../../../src/components/Layout/components/Top.tsx"],"sourcesContent":["import React from 'react';\nimport { LayoutContext } from './Context';\n\nexport type LayoutTopProps = {\n children:\n | React.ReactNode\n | React.ReactNode[]\n | (({ toggleSidebar }: { toggleSidebar: () => void }) => React.ReactNode | React.ReactNode[]);\n};\n\nexport const Top = (props: LayoutTopProps): React.ReactNode => {\n const { setSidebarOpen } = React.useContext(LayoutContext);\n const toggleSidebar = () => setSidebarOpen(open => !open);\n\n return typeof props.children === 'function' ? props.children({ toggleSidebar }) : props.children;\n};\n"],"names":["Top","props","setSidebarOpen","React","useContext","LayoutContext","toggleSidebar","open","children"],"mappings":";;;MAUaA,GAAG,GAAIC,KAAqB;EACrC,MAAM;IAAEC;GAAgB,GAAGC,cAAK,CAACC,UAAU,CAACC,aAAa,CAAC;EAC1D,MAAMC,aAAa,GAAGA,MAAMJ,cAAc,CAACK,IAAI,IAAI,CAACA,IAAI,CAAC;EAEzD,OAAO,OAAON,KAAK,CAACO,QAAQ,KAAK,UAAU,GAAGP,KAAK,CAACO,QAAQ,CAAC;IAAEF;GAAe,CAAC,GAAGL,KAAK,CAACO,QAAQ;AACpG;;;;"}
1
+ {"version":3,"file":"Top.js","sources":["../../../../../../../../src/components/Layout/components/Top.tsx"],"sourcesContent":["import React from 'react';\nimport { LayoutContext } from './Context';\n\nexport type LayoutTopProps = {\n children: React.ReactNode | (({ toggleSidebar }: { toggleSidebar: () => void }) => React.ReactNode);\n};\n\nexport const Top = (props: LayoutTopProps) => {\n const { setSidebarOpen } = React.useContext(LayoutContext);\n const toggleSidebar = () => setSidebarOpen(open => !open);\n\n return <>{typeof props.children === 'function' ? props.children({ toggleSidebar }) : props.children}</>;\n};\n"],"names":["Top","props","setSidebarOpen","React","useContext","LayoutContext","toggleSidebar","open","children"],"mappings":";;;MAOaA,GAAG,GAAIC,KAAqB;EACrC,MAAM;IAAEC;GAAgB,GAAGC,cAAK,CAACC,UAAU,CAACC,aAAa,CAAC;EAC1D,MAAMC,aAAa,GAAGA,MAAMJ,cAAc,CAACK,IAAI,IAAI,CAACA,IAAI,CAAC;EAEzD,oBAAOJ,4DAAG,OAAOF,KAAK,CAACO,QAAQ,KAAK,UAAU,GAAGP,KAAK,CAACO,QAAQ,CAAC;IAAEF;GAAe,CAAC,GAAGL,KAAK,CAACO,QAAQ,CAAI;AAC3G;;;;"}
@@ -6,6 +6,7 @@ import { useLocalization } from '../Provider/Localization.js';
6
6
  import { Button } from '../Button/Button.js';
7
7
  import { Spinner } from '../Spinner/Spinner.js';
8
8
  import { Root, Trigger, Portal, Content } from '@radix-ui/react-popover';
9
+ import { debounce } from '../../utils/debounce.js';
9
10
  import { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener.js';
10
11
  import { createCustomKeyboardEvent } from '../../utils/input.js';
11
12
  import { useControllableState } from '@radix-ui/react-use-controllable-state';
@@ -16,7 +17,7 @@ import { Root as Root$1, createListboxValueSetter } from '../../primitives/Listb
16
17
  import '../../primitives/Listbox2/components/Option.js';
17
18
  import '../../primitives/Listbox2/components/Group.js';
18
19
  import '../../primitives/Listbox2/components/Title.js';
19
- import { createCollectionClassName, getFontSize } from './utilities.js';
20
+ import { createCollectionClassName, getFontSize, filterOption } from './utilities.js';
20
21
  import { Select2Context } from './components/Context.js';
21
22
  import { Option } from './components/Option.js';
22
23
  import { Group } from './components/Group.js';
@@ -134,6 +135,26 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
134
135
  createDialog,
135
136
  createTriggerText
136
137
  };
138
+ const hasInlineCreation = onCreate && !createDialog;
139
+ const hasSearch = flattenedChildren.length > 5 || hasInlineCreation;
140
+ const visibleChildren = searchQuery === '' ? initialChildren : filteredChildren;
141
+ const selectOptions = searchQuery === '' ? flattenedChildren.map(child => child.props.value) : filteredChildren.map(child => isGroup(child) ? Array.isArray(child.props.children) && child.props.children.map(subChild => subChild.props.value) : child.props.value).flatMap(c => c) || [];
142
+ // support typeahead functionality when search isn't available
143
+ const queryTimeoutRef = React__default.useRef('');
144
+ const typeahead = debounce(function () {
145
+ if (!queryTimeoutRef.current) {
146
+ return;
147
+ }
148
+ const matchedValueIndex = visibleChildren.findIndex(child => filterOption(child, queryTimeoutRef.current));
149
+ if (matchedValueIndex > -1) {
150
+ setValue(selectOptions[matchedValueIndex]);
151
+ }
152
+ queryTimeoutRef.current = '';
153
+ }, 200);
154
+ const setValueIfMatched = query => {
155
+ queryTimeoutRef.current = queryTimeoutRef.current + query;
156
+ typeahead();
157
+ };
137
158
  const handleKeyDown = event => {
138
159
  var _listboxRef$current;
139
160
  if (open) {
@@ -142,6 +163,9 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
142
163
  return;
143
164
  } else if (!event.ctrlKey && !event.metaKey && (event.key === 'ArrowDown' || /^[a-z0-9]$/i.test(event.key))) {
144
165
  setOpen(true);
166
+ if (!hasSearch) {
167
+ setValueIfMatched(event.key);
168
+ }
145
169
  }
146
170
  // the focus should always remain on the input, so we forward events on to the listbox
147
171
  (_listboxRef$current = listboxRef.current) === null || _listboxRef$current === void 0 ? void 0 : _listboxRef$current.dispatchEvent(createCustomKeyboardEvent(event));
@@ -168,6 +192,9 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
168
192
  if (isAriaDirectionKey(event)) {
169
193
  setShouldPauseHoverState(true);
170
194
  }
195
+ if (!hasSearch && /^[a-z0-9]$/i.test(event.key)) {
196
+ setValueIfMatched(event.key);
197
+ }
171
198
  };
172
199
  const handleCloseAutoFocus = event => {
173
200
  event.preventDefault();
@@ -185,7 +212,6 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
185
212
  (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
186
213
  }
187
214
  };
188
- const selectOptions = searchQuery === '' ? flattenedChildren.map(child => child.props.value) : filteredChildren.map(child => isGroup(child) ? Array.isArray(child.props.children) && child.props.children.map(subChild => subChild.props.value) : child.props.value).flatMap(c => c) || [];
189
215
  const areAllSelected = Array.isArray(value) && selectOptions.every(option => value.includes(option));
190
216
  const selectAllText = React__default.useMemo(() => {
191
217
  if (searchQuery === '') {
@@ -217,8 +243,6 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
217
243
  setValue(nextValue);
218
244
  }
219
245
  };
220
- const hasInlineCreation = onCreate && !createDialog;
221
- const hasSearch = flattenedChildren.length > 5 || hasInlineCreation;
222
246
  const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md ', {
223
247
  'focus-within:yt-focus': !hasSearch,
224
248
  'outline-none': hasSearch
@@ -285,7 +309,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
285
309
  ref: listboxRef,
286
310
  setValue: setValue,
287
311
  value: value
288
- }, searchQuery === '' ? (/*#__PURE__*/React__default.createElement(Collection, null, initialChildren)) : (/*#__PURE__*/React__default.createElement(Collection, null, filteredChildren)), onCreate ? /*#__PURE__*/React__default.createElement(Create, {
312
+ }, /*#__PURE__*/React__default.createElement(Collection, null, visibleChildren), onCreate ? /*#__PURE__*/React__default.createElement(Create, {
289
313
  onCreate: onCreate,
290
314
  options: flattenedChildren
291
315
  }) : null))))), /*#__PURE__*/React__default.createElement(ControlledHiddenField, {
@@ -1 +1 @@
1
- {"version":3,"file":"Select2.js","sources":["../../../../../../../src/components/Select2/Select2.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport * as ListboxPrimitive from '../../primitives/Listbox2/Listbox2';\nimport {\n Select2Children,\n Select2CreateHandler,\n Select2CreateDialogRenderer,\n Select2DeleteHandler,\n Select2EditHandler,\n Select2OptionValue,\n Select2Value,\n} from './types';\nimport { Option, Select2OptionProps } from './components/Option';\nimport { Group, Select2GroupProps } from './components/Group';\nimport { Select2TitleProps, Title } from './components/Title';\nimport { Select2Context } from './components/Context';\nimport { createCollectionClassName, getFontSize } from './utilities';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport { Trigger } from './components/Trigger';\nimport { useIsFormControl } from '../../hooks/useIsFormControl';\nimport { BubbleSelect } from '../../primitives/BubbleSelect';\nimport { Search } from './components/Search';\nimport { isGroup, useChildren } from './hooks/useChildren';\n\nimport { Create } from './components/Create';\nimport { Collection } from './components/Collection';\nimport { CollectionRef } from '../../primitives/Collection/Collection';\nimport { useLocalization } from '../Provider/Localization';\nimport { useIsHoverStatePaused } from '../../hooks/useIsHoverStatePaused';\nimport { isAriaDirectionKey } from '../../utils/aria';\nimport { getNextFocussableElement, isElementInsideTable3OrReport } from '../../utils/dom';\nimport { FontSize, FontSizes } from '../../types';\nimport { Button } from '../Button/Button';\nimport { Spinner } from '../Spinner/Spinner';\n\ntype Select2Texts = {\n allSelect: string;\n allDeselect: string;\n cancel: string;\n chooseColor: string;\n create: string;\n delete: string;\n save: string;\n search: string;\n searchOrCreate: string;\n selectAll: string;\n selectAllResults: string;\n deselectAll: string;\n deselectAllResults: string;\n};\n\ntype Select2Props = Omit<React.HTMLAttributes<HTMLButtonElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\n /** Autofocus Select2 when loaded **/\n autoFocus?: boolean;\n /** Array of options in Select2 */\n children: Select2Children;\n /** Initial value of the input in Select2 */\n defaultValue?: Select2Value;\n /** Set what value should have an empty option in Select2 */\n emptyValue?: Select2OptionValue;\n /** Whether the Select2 is in a disabled state **/\n disabled?: boolean;\n /** Font size of text in Select2 **/\n fontSize?: FontSize;\n /** Draws attention to the Select2 by changing its style and making it visually prominent */\n highlighted?: boolean;\n /** Whether the Select2 is in an invalid state **/\n invalid?: boolean;\n /** Whether the Select2 is loading the data **/\n loading?: boolean;\n /** Whether the Select2 allows selecting multiple values **/\n multiple?: boolean;\n /** Whether the Select2 is in an invalid state **/\n name?: string;\n /** Handler called when user chooses an option from the provided options **/\n onChange?: (value: Select2Value) => void;\n /** Handler called when user creates a new option **/\n onCreate?: Select2CreateHandler;\n /** Handler called when user deletes an option **/\n onDelete?: Select2DeleteHandler;\n /** Handler called when user edits an option **/\n onEdit?: Select2EditHandler;\n /** Placeholder showed when nothing is selected **/\n placeholder?: string;\n /** Whether the Select2 is in a readonly state **/\n readOnly?: boolean;\n required?: boolean;\n /** Renders select options as tags **/\n tags?: boolean;\n /** Value of the input in select2 */\n value?: Select2Value;\n /** Create dialog component, if specified, then create button will become always visible in the bottom of options dropdown,\n * when clicked, it will open create dialog and wait for 'onCreate' handler to be triggered from the dialog */\n createDialog?: Select2CreateDialogRenderer;\n /** Create button text */\n createTriggerText?: string;\n};\ntype Select2PropsWithStatics = React.ForwardRefExoticComponent<Select2Props & React.RefAttributes<HTMLButtonElement>> & {\n Option: React.ForwardRefExoticComponent<Select2OptionProps>;\n Group: React.ForwardRefExoticComponent<Select2GroupProps>;\n Title: React.ForwardRefExoticComponent<Select2TitleProps>;\n};\n\nconst Select2 = React.forwardRef<HTMLButtonElement, Select2Props>(function Select2(props, ref) {\n const {\n children: initChildren,\n defaultValue: defaultProp,\n disabled = false,\n emptyValue = undefined,\n fontSize,\n highlighted = false,\n invalid = false,\n loading,\n multiple = false,\n name,\n onChange,\n onCreate,\n onDelete,\n onEdit,\n placeholder,\n readOnly = false,\n tags = false,\n value: prop,\n createDialog,\n createTriggerText,\n ...otherProps\n } = props;\n\n const emptyOption: React.ReactElement<Select2OptionProps> | undefined = React.useMemo(() => {\n if (emptyValue !== undefined && !multiple) {\n // Empty option has 0px height, because it's empty, so need to apply height manually\n return <Option key=\"__empty\" children=\"\" value={emptyValue} className=\"h-8\" />;\n }\n return;\n }, [emptyValue, multiple]);\n\n const initialChildren = React.useMemo(() => {\n if (emptyOption) {\n return [emptyOption, ...initChildren] as Select2Children;\n }\n return initChildren;\n }, [emptyOption, initChildren]);\n\n // refs\n const internalRef = useMergedRef<HTMLButtonElement>(ref);\n const listboxRef = React.useRef<CollectionRef>(null);\n const searchRef = React.useRef<HTMLInputElement>(null);\n const { texts } = useLocalization();\n // align the listbox min width with the width of the input - it should never be smaller\n const dimensions = useBoundingClientRectListener(internalRef);\n\n // state\n const [tabTriggeredClose, setTabTriggeredClose] = React.useState(false);\n const [open, setOpen] = React.useState(false);\n const [value, _setValue] = useControllableState<Select2Value>({\n // uncontrolled\n defaultProp,\n // controlled\n onChange,\n prop,\n });\n const setValue = ListboxPrimitive.createListboxValueSetter(multiple, _setValue);\n const [validationError, setValidationError] = React.useState<Error | undefined>();\n const [shouldPauseHoverState, setShouldPauseHoverState] = useIsHoverStatePaused();\n\n const { flattenedChildren, filteredChildren, searchQuery, setSearchQuery } = useChildren({\n children: initialChildren,\n emptyValue,\n multiple,\n open,\n setValue,\n value,\n });\n\n // context\n const context = {\n disabled,\n highlighted,\n invalid,\n listboxRef,\n multiple,\n onCreate,\n onDelete,\n onEdit,\n open,\n readOnly,\n ref: internalRef,\n searchQuery,\n searchRef,\n setOpen,\n setSearchQuery,\n setValidationError,\n setValue,\n shouldPauseHoverState,\n setShouldPauseHoverState,\n tags,\n fontSize,\n validationError,\n value,\n createDialog,\n createTriggerText,\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n if (open) {\n event.preventDefault();\n } else if (isElementInsideTable3OrReport(event.currentTarget)) {\n return;\n } else if (!event.ctrlKey && !event.metaKey && (event.key === 'ArrowDown' || /^[a-z0-9]$/i.test(event.key))) {\n setOpen(true);\n }\n\n // the focus should always remain on the input, so we forward events on to the listbox\n listboxRef.current?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n };\n\n let handleBlur;\n\n if (otherProps.onBlur) {\n // we might be focusing on an input or something inside the dropdown that was triggered by the select\n // so see if the element gaining focus is inside a portal and look up its controller\n // if we don't do this, things like validate on blur occur while simply opening the select\n handleBlur = (event: React.FocusEvent<HTMLButtonElement>) => {\n const elementGainingFocus = event.relatedTarget;\n\n if (elementGainingFocus === undefined) {\n return;\n }\n\n const portalId = elementGainingFocus?.closest('[data-radix-popper-content-wrapper] > :first-child')?.id;\n\n if (!portalId || event.currentTarget.getAttribute(`aria-controls`) !== portalId) {\n otherProps.onBlur?.(event);\n }\n };\n }\n\n const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n if (isAriaDirectionKey(event)) {\n setShouldPauseHoverState(true);\n }\n };\n\n const handleCloseAutoFocus = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (tabTriggeredClose) {\n const nextFocussableElement = getNextFocussableElement(internalRef.current);\n\n if (nextFocussableElement) {\n // UX requirement: move focus to the next focussable element when tab key is pressed to select the value\n nextFocussableElement.focus();\n // Reset the tabTriggeredClose state\n setTabTriggeredClose(false);\n }\n } else {\n internalRef.current?.focus();\n }\n };\n\n const selectOptions =\n searchQuery === ''\n ? flattenedChildren.map(child => child.props.value)\n : filteredChildren\n .map(child =>\n isGroup(child)\n ? Array.isArray(child.props.children) && child.props.children.map(subChild => subChild.props.value)\n : child.props.value\n )\n .flatMap(c => c) || [];\n\n const areAllSelected = Array.isArray(value) && selectOptions.every(option => value.includes(option as string));\n\n const selectAllText = React.useMemo(() => {\n if (searchQuery === '') {\n if (areAllSelected) {\n return texts.select2.deselectAll;\n } else {\n return texts.select2.selectAll;\n }\n } else if (areAllSelected) {\n return texts.select2.deselectAllResults;\n } else {\n return texts.select2.selectAllResults;\n }\n }, [areAllSelected, searchQuery]);\n\n const selectAll = () => {\n if (!Array.isArray(value) || value.length === 0) {\n setValue(selectOptions);\n } else {\n // array of all available options which are not selected\n const preselectedValues = selectOptions.filter(option => !value.includes(option));\n setValue([...value, ...preselectedValues]);\n }\n };\n\n const deselectAll = () => {\n if (searchQuery === '') {\n setValue([]);\n } else {\n const nextValue = Array.isArray(value) && value.filter(subValue => !selectOptions.includes(subValue as string));\n setValue(nextValue);\n }\n };\n\n const hasInlineCreation = onCreate && !createDialog;\n const hasSearch = flattenedChildren.length > 5 || hasInlineCreation;\n const className = cn(\n 'border-grey-300 rounded border bg-white py-1.5 shadow-md ',\n {\n 'focus-within:yt-focus': !hasSearch,\n 'outline-none': hasSearch,\n },\n createCollectionClassName()\n );\n\n return (\n <Select2Context.Provider value={context}>\n <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n <PopoverPrimitive.Trigger asChild data-taco=\"Select2\">\n <Trigger\n {...otherProps}\n aria-haspopup=\"listbox\"\n emptyValue={emptyValue}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n ref={internalRef}>\n {flattenedChildren}\n </Trigger>\n </PopoverPrimitive.Trigger>\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Content\n asChild\n align=\"start\"\n onOpenAutoFocus={() => {\n internalRef.current?.focus();\n }}\n onCloseAutoFocus={handleCloseAutoFocus}\n sideOffset={4}\n tabIndex={-1}>\n <div className={className} style={{ minWidth: dimensions?.width ? `${dimensions.width}px` : undefined }}>\n {hasSearch ? (\n <>\n <Search\n placeholder={hasInlineCreation ? texts.select2.searchOrCreate : texts.select2.search}\n ref={searchRef}\n onTabKeyPress={() => setTabTriggeredClose(true)}\n />\n {multiple && selectOptions.length > 1 && (\n <>\n <Button\n className=\"!justify-start\"\n appearance=\"discrete\"\n onClick={areAllSelected ? deselectAll : selectAll}>\n {selectAllText}\n </Button>\n <div className=\"border-grey-300 mx-3 rounded border-t\" />\n </>\n )}\n </>\n ) : null}\n {loading ? (\n <span className={cn('text-grey-700 flex items-center italic', fontSize && getFontSize(fontSize))}>\n <span>\n <Spinner\n delay={0}\n className={cn('ml-3 mr-2 mt-1.5 h-5 w-5', {\n '!mt-1 !h-3.5 !w-3.5': fontSize === FontSizes.small,\n '!h-4 !w-4': fontSize === FontSizes.medium,\n '!h-5 !w-5': fontSize === FontSizes.large,\n })}\n />\n </span>\n <span>{texts.listbox.loading}</span>\n </span>\n ) : flattenedChildren.length <= 0 ? (\n <div className=\"text-grey-700 -mt-0.5 flex h-8 items-center px-2\" role=\"presentation\">\n {texts.listbox.empty}\n </div>\n ) : (\n <ListboxPrimitive.Root\n className=\"flex flex-col gap-0.5 focus-visible:outline-none\"\n customSelector=\":scope > button\"\n disabled={disabled}\n multiple={multiple}\n onKeyDown={handleListboxKeyDown}\n readOnly={readOnly}\n ref={listboxRef}\n setValue={setValue}\n value={value}>\n {searchQuery === '' ? (\n <Collection>{initialChildren}</Collection>\n ) : (\n <Collection>{filteredChildren}</Collection>\n )}\n {onCreate ? <Create onCreate={onCreate} options={flattenedChildren} /> : null}\n </ListboxPrimitive.Root>\n )}\n </div>\n </PopoverPrimitive.Content>\n </PopoverPrimitive.Portal>\n <ControlledHiddenField\n emptyValue={emptyValue}\n multiple={multiple || tags}\n name={name}\n options={flattenedChildren.map(child => child.props.value)}\n parentRef={internalRef}\n setValue={setValue}\n value={value}\n />\n </PopoverPrimitive.Root>\n </Select2Context.Provider>\n );\n}) as Select2PropsWithStatics;\nSelect2.Option = Option;\nSelect2.Group = Group;\nSelect2.Title = Title;\n\ntype ControlledHiddenFieldProps = {\n emptyValue: ListboxPrimitive.Listbox2OptionValue | undefined;\n multiple: boolean;\n name: string | undefined;\n options: Array<any>;\n parentRef: React.RefObject<HTMLButtonElement>;\n setValue: (nextValue: any) => void;\n value: Select2Value | undefined;\n};\n\nconst ControlledHiddenField = (props: ControlledHiddenFieldProps) => {\n const { emptyValue, multiple, name, options, parentRef, value, setValue } = props;\n const isFormControl = useIsFormControl(parentRef, () => setValue(multiple ? [] : undefined));\n\n let bubbleValue;\n\n if (isFormControl) {\n if (value !== undefined) {\n if (multiple) {\n bubbleValue = Array.isArray(value) ? value.map(String) : [value === null ? '' : String(value)];\n } else {\n bubbleValue = value === null ? '' : String(value);\n }\n }\n\n return (\n <BubbleSelect aria-hidden key={String(bubbleValue)} multiple={multiple} name={name} value={bubbleValue}>\n {emptyValue !== undefined ? <option value={emptyValue as string} /> : null}\n {options.map(option => (\n <option key={String(option)} value={String(option)} />\n ))}\n </BubbleSelect>\n );\n }\n\n return null;\n};\nSelect2.displayName = 'Select2';\n\nexport { Select2 };\n\nexport type {\n Select2Texts,\n Select2GroupProps,\n Select2OptionProps,\n Select2OptionValue,\n Select2Value,\n Select2Props,\n Select2TitleProps,\n};\n"],"names":["Select2","React","forwardRef","props","ref","children","initChildren","defaultValue","defaultProp","disabled","emptyValue","undefined","fontSize","highlighted","invalid","loading","multiple","name","onChange","onCreate","onDelete","onEdit","placeholder","readOnly","tags","value","prop","createDialog","createTriggerText","otherProps","emptyOption","useMemo","Option","key","className","initialChildren","internalRef","useMergedRef","listboxRef","useRef","searchRef","texts","useLocalization","dimensions","useBoundingClientRectListener","tabTriggeredClose","setTabTriggeredClose","useState","open","setOpen","_setValue","useControllableState","setValue","ListboxPrimitive","validationError","setValidationError","shouldPauseHoverState","setShouldPauseHoverState","useIsHoverStatePaused","flattenedChildren","filteredChildren","searchQuery","setSearchQuery","useChildren","context","handleKeyDown","event","preventDefault","isElementInsideTable3OrReport","currentTarget","ctrlKey","metaKey","test","_listboxRef$current","current","dispatchEvent","createCustomKeyboardEvent","handleBlur","onBlur","elementGainingFocus","relatedTarget","portalId","_elementGainingFocus$","closest","id","getAttribute","_otherProps$onBlur","call","handleListboxKeyDown","isAriaDirectionKey","handleCloseAutoFocus","stopPropagation","nextFocussableElement","getNextFocussableElement","focus","_internalRef$current","selectOptions","map","child","isGroup","Array","isArray","subChild","flatMap","c","areAllSelected","every","option","includes","selectAllText","select2","deselectAll","selectAll","deselectAllResults","selectAllResults","length","preselectedValues","filter","nextValue","subValue","hasInlineCreation","hasSearch","cn","createCollectionClassName","Select2Context","Provider","PopoverPrimitive","onOpenChange","asChild","Trigger","onKeyDown","align","onOpenAutoFocus","_internalRef$current2","onCloseAutoFocus","sideOffset","tabIndex","style","minWidth","width","Search","searchOrCreate","search","onTabKeyPress","Button","appearance","onClick","getFontSize","Spinner","delay","FontSizes","small","medium","large","listbox","role","empty","customSelector","Collection","Create","options","ControlledHiddenField","parentRef","Group","Title","isFormControl","useIsFormControl","bubbleValue","String","BubbleSelect","displayName"],"mappings":"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"}
1
+ {"version":3,"file":"Select2.js","sources":["../../../../../../../src/components/Select2/Select2.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport * as ListboxPrimitive from '../../primitives/Listbox2/Listbox2';\nimport {\n Select2Children,\n Select2CreateHandler,\n Select2CreateDialogRenderer,\n Select2DeleteHandler,\n Select2EditHandler,\n Select2OptionValue,\n Select2Value,\n} from './types';\nimport { Option, Select2OptionProps } from './components/Option';\nimport { Group, Select2GroupProps } from './components/Group';\nimport { Select2TitleProps, Title } from './components/Title';\nimport { Select2Context } from './components/Context';\nimport { createCollectionClassName, filterOption, getFontSize } from './utilities';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport { Trigger } from './components/Trigger';\nimport { useIsFormControl } from '../../hooks/useIsFormControl';\nimport { BubbleSelect } from '../../primitives/BubbleSelect';\nimport { Search } from './components/Search';\nimport { isGroup, useChildren } from './hooks/useChildren';\n\nimport { Create } from './components/Create';\nimport { Collection } from './components/Collection';\nimport { CollectionRef } from '../../primitives/Collection/Collection';\nimport { useLocalization } from '../Provider/Localization';\nimport { useIsHoverStatePaused } from '../../hooks/useIsHoverStatePaused';\nimport { isAriaDirectionKey } from '../../utils/aria';\nimport { getNextFocussableElement, isElementInsideTable3OrReport } from '../../utils/dom';\nimport { FontSize, FontSizes } from '../../types';\nimport { Button } from '../Button/Button';\nimport { Spinner } from '../Spinner/Spinner';\nimport { debounce } from '../../utils/debounce';\n\ntype Select2Texts = {\n allSelect: string;\n allDeselect: string;\n cancel: string;\n chooseColor: string;\n create: string;\n delete: string;\n save: string;\n search: string;\n searchOrCreate: string;\n selectAll: string;\n selectAllResults: string;\n deselectAll: string;\n deselectAllResults: string;\n};\n\ntype Select2Props = Omit<React.HTMLAttributes<HTMLButtonElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\n /** Autofocus Select2 when loaded **/\n autoFocus?: boolean;\n /** Array of options in Select2 */\n children: Select2Children;\n /** Initial value of the input in Select2 */\n defaultValue?: Select2Value;\n /** Set what value should have an empty option in Select2 */\n emptyValue?: Select2OptionValue;\n /** Whether the Select2 is in a disabled state **/\n disabled?: boolean;\n /** Font size of text in Select2 **/\n fontSize?: FontSize;\n /** Draws attention to the Select2 by changing its style and making it visually prominent */\n highlighted?: boolean;\n /** Whether the Select2 is in an invalid state **/\n invalid?: boolean;\n /** Whether the Select2 is loading the data **/\n loading?: boolean;\n /** Whether the Select2 allows selecting multiple values **/\n multiple?: boolean;\n /** Whether the Select2 is in an invalid state **/\n name?: string;\n /** Handler called when user chooses an option from the provided options **/\n onChange?: (value: Select2Value) => void;\n /** Handler called when user creates a new option **/\n onCreate?: Select2CreateHandler;\n /** Handler called when user deletes an option **/\n onDelete?: Select2DeleteHandler;\n /** Handler called when user edits an option **/\n onEdit?: Select2EditHandler;\n /** Placeholder showed when nothing is selected **/\n placeholder?: string;\n /** Whether the Select2 is in a readonly state **/\n readOnly?: boolean;\n required?: boolean;\n /** Renders select options as tags **/\n tags?: boolean;\n /** Value of the input in select2 */\n value?: Select2Value;\n /** Create dialog component, if specified, then create button will become always visible in the bottom of options dropdown,\n * when clicked, it will open create dialog and wait for 'onCreate' handler to be triggered from the dialog */\n createDialog?: Select2CreateDialogRenderer;\n /** Create button text */\n createTriggerText?: string;\n};\ntype Select2PropsWithStatics = React.ForwardRefExoticComponent<Select2Props & React.RefAttributes<HTMLButtonElement>> & {\n Option: React.ForwardRefExoticComponent<Select2OptionProps>;\n Group: React.ForwardRefExoticComponent<Select2GroupProps>;\n Title: React.ForwardRefExoticComponent<Select2TitleProps>;\n};\n\nconst Select2 = React.forwardRef<HTMLButtonElement, Select2Props>(function Select2(props, ref) {\n const {\n children: initChildren,\n defaultValue: defaultProp,\n disabled = false,\n emptyValue = undefined,\n fontSize,\n highlighted = false,\n invalid = false,\n loading,\n multiple = false,\n name,\n onChange,\n onCreate,\n onDelete,\n onEdit,\n placeholder,\n readOnly = false,\n tags = false,\n value: prop,\n createDialog,\n createTriggerText,\n ...otherProps\n } = props;\n\n const emptyOption: React.ReactElement<Select2OptionProps> | undefined = React.useMemo(() => {\n if (emptyValue !== undefined && !multiple) {\n // Empty option has 0px height, because it's empty, so need to apply height manually\n return <Option key=\"__empty\" children=\"\" value={emptyValue} className=\"h-8\" />;\n }\n return;\n }, [emptyValue, multiple]);\n\n const initialChildren = React.useMemo(() => {\n if (emptyOption) {\n return [emptyOption, ...initChildren] as Select2Children;\n }\n return initChildren;\n }, [emptyOption, initChildren]);\n\n // refs\n const internalRef = useMergedRef<HTMLButtonElement>(ref);\n const listboxRef = React.useRef<CollectionRef>(null);\n const searchRef = React.useRef<HTMLInputElement>(null);\n const { texts } = useLocalization();\n // align the listbox min width with the width of the input - it should never be smaller\n const dimensions = useBoundingClientRectListener(internalRef);\n\n // state\n const [tabTriggeredClose, setTabTriggeredClose] = React.useState(false);\n const [open, setOpen] = React.useState(false);\n const [value, _setValue] = useControllableState<Select2Value>({\n // uncontrolled\n defaultProp,\n // controlled\n onChange,\n prop,\n });\n const setValue = ListboxPrimitive.createListboxValueSetter(multiple, _setValue);\n const [validationError, setValidationError] = React.useState<Error | undefined>();\n const [shouldPauseHoverState, setShouldPauseHoverState] = useIsHoverStatePaused();\n\n const { flattenedChildren, filteredChildren, searchQuery, setSearchQuery } = useChildren({\n children: initialChildren,\n emptyValue,\n multiple,\n open,\n setValue,\n value,\n });\n\n // context\n const context = {\n disabled,\n highlighted,\n invalid,\n listboxRef,\n multiple,\n onCreate,\n onDelete,\n onEdit,\n open,\n readOnly,\n ref: internalRef,\n searchQuery,\n searchRef,\n setOpen,\n setSearchQuery,\n setValidationError,\n setValue,\n shouldPauseHoverState,\n setShouldPauseHoverState,\n tags,\n fontSize,\n validationError,\n value,\n createDialog,\n createTriggerText,\n };\n\n const hasInlineCreation = onCreate && !createDialog;\n const hasSearch = flattenedChildren.length > 5 || hasInlineCreation;\n const visibleChildren = searchQuery === '' ? initialChildren : filteredChildren;\n const selectOptions =\n searchQuery === ''\n ? flattenedChildren.map(child => child.props.value)\n : filteredChildren\n .map(child =>\n isGroup(child)\n ? Array.isArray(child.props.children) && child.props.children.map(subChild => subChild.props.value)\n : child.props.value\n )\n .flatMap(c => c) || [];\n\n // support typeahead functionality when search isn't available\n const queryTimeoutRef = React.useRef('');\n\n const typeahead = debounce(function () {\n if (!queryTimeoutRef.current) {\n return;\n }\n\n const matchedValueIndex = visibleChildren.findIndex(child =>\n filterOption(child as React.ReactElement<Select2OptionProps>, queryTimeoutRef.current)\n );\n\n if (matchedValueIndex > -1) {\n setValue(selectOptions[matchedValueIndex]);\n }\n\n queryTimeoutRef.current = '';\n }, 200);\n\n const setValueIfMatched = (query: string) => {\n queryTimeoutRef.current = queryTimeoutRef.current + query;\n typeahead();\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n if (open) {\n event.preventDefault();\n } else if (isElementInsideTable3OrReport(event.currentTarget)) {\n return;\n } else if (!event.ctrlKey && !event.metaKey && (event.key === 'ArrowDown' || /^[a-z0-9]$/i.test(event.key))) {\n setOpen(true);\n\n if (!hasSearch) {\n setValueIfMatched(event.key);\n }\n }\n\n // the focus should always remain on the input, so we forward events on to the listbox\n listboxRef.current?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n };\n\n let handleBlur;\n\n if (otherProps.onBlur) {\n // we might be focusing on an input or something inside the dropdown that was triggered by the select\n // so see if the element gaining focus is inside a portal and look up its controller\n // if we don't do this, things like validate on blur occur while simply opening the select\n handleBlur = (event: React.FocusEvent<HTMLButtonElement>) => {\n const elementGainingFocus = event.relatedTarget;\n\n if (elementGainingFocus === undefined) {\n return;\n }\n\n const portalId = elementGainingFocus?.closest('[data-radix-popper-content-wrapper] > :first-child')?.id;\n\n if (!portalId || event.currentTarget.getAttribute(`aria-controls`) !== portalId) {\n otherProps.onBlur?.(event);\n }\n };\n }\n\n const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n if (isAriaDirectionKey(event)) {\n setShouldPauseHoverState(true);\n }\n\n if (!hasSearch && /^[a-z0-9]$/i.test(event.key)) {\n setValueIfMatched(event.key);\n }\n };\n\n const handleCloseAutoFocus = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (tabTriggeredClose) {\n const nextFocussableElement = getNextFocussableElement(internalRef.current);\n\n if (nextFocussableElement) {\n // UX requirement: move focus to the next focussable element when tab key is pressed to select the value\n nextFocussableElement.focus();\n // Reset the tabTriggeredClose state\n setTabTriggeredClose(false);\n }\n } else {\n internalRef.current?.focus();\n }\n };\n\n const areAllSelected = Array.isArray(value) && selectOptions.every(option => value.includes(option as string));\n\n const selectAllText = React.useMemo(() => {\n if (searchQuery === '') {\n if (areAllSelected) {\n return texts.select2.deselectAll;\n } else {\n return texts.select2.selectAll;\n }\n } else if (areAllSelected) {\n return texts.select2.deselectAllResults;\n } else {\n return texts.select2.selectAllResults;\n }\n }, [areAllSelected, searchQuery]);\n\n const selectAll = () => {\n if (!Array.isArray(value) || value.length === 0) {\n setValue(selectOptions);\n } else {\n // array of all available options which are not selected\n const preselectedValues = selectOptions.filter(option => !value.includes(option));\n setValue([...value, ...preselectedValues]);\n }\n };\n\n const deselectAll = () => {\n if (searchQuery === '') {\n setValue([]);\n } else {\n const nextValue = Array.isArray(value) && value.filter(subValue => !selectOptions.includes(subValue as string));\n setValue(nextValue);\n }\n };\n\n const className = cn(\n 'border-grey-300 rounded border bg-white py-1.5 shadow-md ',\n {\n 'focus-within:yt-focus': !hasSearch,\n 'outline-none': hasSearch,\n },\n createCollectionClassName()\n );\n\n return (\n <Select2Context.Provider value={context}>\n <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n <PopoverPrimitive.Trigger asChild data-taco=\"Select2\">\n <Trigger\n {...otherProps}\n aria-haspopup=\"listbox\"\n emptyValue={emptyValue}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n ref={internalRef}>\n {flattenedChildren}\n </Trigger>\n </PopoverPrimitive.Trigger>\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Content\n asChild\n align=\"start\"\n onOpenAutoFocus={() => {\n internalRef.current?.focus();\n }}\n onCloseAutoFocus={handleCloseAutoFocus}\n sideOffset={4}\n tabIndex={-1}>\n <div className={className} style={{ minWidth: dimensions?.width ? `${dimensions.width}px` : undefined }}>\n {hasSearch ? (\n <>\n <Search\n placeholder={hasInlineCreation ? texts.select2.searchOrCreate : texts.select2.search}\n ref={searchRef}\n onTabKeyPress={() => setTabTriggeredClose(true)}\n />\n {multiple && selectOptions.length > 1 && (\n <>\n <Button\n className=\"!justify-start\"\n appearance=\"discrete\"\n onClick={areAllSelected ? deselectAll : selectAll}>\n {selectAllText}\n </Button>\n <div className=\"border-grey-300 mx-3 rounded border-t\" />\n </>\n )}\n </>\n ) : null}\n {loading ? (\n <span className={cn('text-grey-700 flex items-center italic', fontSize && getFontSize(fontSize))}>\n <span>\n <Spinner\n delay={0}\n className={cn('ml-3 mr-2 mt-1.5 h-5 w-5', {\n '!mt-1 !h-3.5 !w-3.5': fontSize === FontSizes.small,\n '!h-4 !w-4': fontSize === FontSizes.medium,\n '!h-5 !w-5': fontSize === FontSizes.large,\n })}\n />\n </span>\n <span>{texts.listbox.loading}</span>\n </span>\n ) : flattenedChildren.length <= 0 ? (\n <div className=\"text-grey-700 -mt-0.5 flex h-8 items-center px-2\" role=\"presentation\">\n {texts.listbox.empty}\n </div>\n ) : (\n <ListboxPrimitive.Root\n className=\"flex flex-col gap-0.5 focus-visible:outline-none\"\n customSelector=\":scope > button\"\n disabled={disabled}\n multiple={multiple}\n onKeyDown={handleListboxKeyDown}\n readOnly={readOnly}\n ref={listboxRef}\n setValue={setValue}\n value={value}>\n <Collection>{visibleChildren}</Collection>\n {onCreate ? <Create onCreate={onCreate} options={flattenedChildren} /> : null}\n </ListboxPrimitive.Root>\n )}\n </div>\n </PopoverPrimitive.Content>\n </PopoverPrimitive.Portal>\n <ControlledHiddenField\n emptyValue={emptyValue}\n multiple={multiple || tags}\n name={name}\n options={flattenedChildren.map(child => child.props.value)}\n parentRef={internalRef}\n setValue={setValue}\n value={value}\n />\n </PopoverPrimitive.Root>\n </Select2Context.Provider>\n );\n}) as Select2PropsWithStatics;\nSelect2.Option = Option;\nSelect2.Group = Group;\nSelect2.Title = Title;\n\ntype ControlledHiddenFieldProps = {\n emptyValue: ListboxPrimitive.Listbox2OptionValue | undefined;\n multiple: boolean;\n name: string | undefined;\n options: Array<any>;\n parentRef: React.RefObject<HTMLButtonElement>;\n setValue: (nextValue: any) => void;\n value: Select2Value | undefined;\n};\n\nconst ControlledHiddenField = (props: ControlledHiddenFieldProps) => {\n const { emptyValue, multiple, name, options, parentRef, value, setValue } = props;\n const isFormControl = useIsFormControl(parentRef, () => setValue(multiple ? [] : undefined));\n\n let bubbleValue;\n\n if (isFormControl) {\n if (value !== undefined) {\n if (multiple) {\n bubbleValue = Array.isArray(value) ? value.map(String) : [value === null ? '' : String(value)];\n } else {\n bubbleValue = value === null ? '' : String(value);\n }\n }\n\n return (\n <BubbleSelect aria-hidden key={String(bubbleValue)} multiple={multiple} name={name} value={bubbleValue}>\n {emptyValue !== undefined ? <option value={emptyValue as string} /> : null}\n {options.map(option => (\n <option key={String(option)} value={String(option)} />\n ))}\n </BubbleSelect>\n );\n }\n\n return null;\n};\nSelect2.displayName = 'Select2';\n\nexport { Select2 };\n\nexport type {\n Select2Texts,\n Select2GroupProps,\n Select2OptionProps,\n Select2OptionValue,\n Select2Value,\n Select2Props,\n Select2TitleProps,\n};\n"],"names":["Select2","React","forwardRef","props","ref","children","initChildren","defaultValue","defaultProp","disabled","emptyValue","undefined","fontSize","highlighted","invalid","loading","multiple","name","onChange","onCreate","onDelete","onEdit","placeholder","readOnly","tags","value","prop","createDialog","createTriggerText","otherProps","emptyOption","useMemo","Option","key","className","initialChildren","internalRef","useMergedRef","listboxRef","useRef","searchRef","texts","useLocalization","dimensions","useBoundingClientRectListener","tabTriggeredClose","setTabTriggeredClose","useState","open","setOpen","_setValue","useControllableState","setValue","ListboxPrimitive","validationError","setValidationError","shouldPauseHoverState","setShouldPauseHoverState","useIsHoverStatePaused","flattenedChildren","filteredChildren","searchQuery","setSearchQuery","useChildren","context","hasInlineCreation","hasSearch","length","visibleChildren","selectOptions","map","child","isGroup","Array","isArray","subChild","flatMap","c","queryTimeoutRef","typeahead","debounce","current","matchedValueIndex","findIndex","filterOption","setValueIfMatched","query","handleKeyDown","event","preventDefault","isElementInsideTable3OrReport","currentTarget","ctrlKey","metaKey","test","_listboxRef$current","dispatchEvent","createCustomKeyboardEvent","handleBlur","onBlur","elementGainingFocus","relatedTarget","portalId","_elementGainingFocus$","closest","id","getAttribute","_otherProps$onBlur","call","handleListboxKeyDown","isAriaDirectionKey","handleCloseAutoFocus","stopPropagation","nextFocussableElement","getNextFocussableElement","focus","_internalRef$current","areAllSelected","every","option","includes","selectAllText","select2","deselectAll","selectAll","deselectAllResults","selectAllResults","preselectedValues","filter","nextValue","subValue","cn","createCollectionClassName","Select2Context","Provider","PopoverPrimitive","onOpenChange","asChild","Trigger","onKeyDown","align","onOpenAutoFocus","_internalRef$current2","onCloseAutoFocus","sideOffset","tabIndex","style","minWidth","width","Search","searchOrCreate","search","onTabKeyPress","Button","appearance","onClick","getFontSize","Spinner","delay","FontSizes","small","medium","large","listbox","role","empty","customSelector","Collection","Create","options","ControlledHiddenField","parentRef","Group","Title","isFormControl","useIsFormControl","bubbleValue","String","BubbleSelect","displayName"],"mappings":"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"}
@@ -97,7 +97,7 @@ const Option = /*#__PURE__*/React__default.forwardRef(function Select2Option(pro
97
97
  onClick: event => {
98
98
  var _listboxRef$current;
99
99
  event.stopPropagation();
100
- listboxRef === null || listboxRef === void 0 ? void 0 : (_listboxRef$current = listboxRef.current) === null || _listboxRef$current === void 0 ? void 0 : _listboxRef$current.setActiveIndex(event.currentTarget.parentElement);
100
+ listboxRef === null || listboxRef === void 0 ? void 0 : (_listboxRef$current = listboxRef.current) === null || _listboxRef$current === void 0 ? void 0 : _listboxRef$current.setActiveIndexByElement(event.currentTarget.parentElement);
101
101
  },
102
102
  popover: popover,
103
103
  tabIndex: -1
@@ -1 +1 @@
1
- {"version":3,"file":"Option.js","sources":["../../../../../../../../src/components/Select2/components/Option.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { Tag } from '../../Tag/Tag';\nimport { isAriaSelectionKey } from '../../../utils/aria';\nimport * as ListboxPrimitive from '../../../primitives/Listbox2/Listbox2';\nimport { createOptionClassName, getFontSize } from '../utilities';\nimport { useSelect2Context } from './Context';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { EditPopover, EditPopoverProps } from './Edit';\nimport { isMobileDevice } from '../../../utils/device';\nimport { Color } from '../../../types';\nimport { FontSize } from '../../../types';\n\nexport type Select2OptionProps = Omit<ListboxPrimitive.Listbox2OptionProps, 'children' | 'prefix'> & {\n children: string;\n color?: Color;\n description?: string;\n fontSize?: FontSize;\n prefix?: IconName | JSX.Element;\n postfix?: IconName | JSX.Element;\n textValue?: string;\n};\n\nexport const Option = React.forwardRef<HTMLDivElement, Select2OptionProps>(function Select2Option(props, ref) {\n const { children, color, description, prefix, postfix, className: cName, ...otherProps } = props;\n const {\n fontSize,\n listboxRef,\n multiple,\n onDelete,\n onEdit,\n ref: selectRef,\n setOpen,\n shouldPauseHoverState,\n tags,\n value,\n } = useSelect2Context();\n const className = cn(createOptionClassName(shouldPauseHoverState), getFontSize(fontSize), cName);\n\n const hasValue = Array.isArray(value) ? !!value.length : value !== undefined;\n const isTag = tags && !!color;\n\n const handleClick = () => {\n if (!multiple) {\n setOpen(false);\n } else {\n selectRef.current?.focus();\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (isAriaSelectionKey(event)) {\n if (!multiple || event.key === 'Tab') {\n setOpen(false);\n }\n }\n };\n\n const isEmptyOption = children !== '';\n\n const popover =\n isEmptyOption && (onEdit || onDelete)\n ? (popoverProps: Partial<EditPopoverProps>) => (\n <EditPopover\n {...popoverProps}\n color={props.color}\n key={props.textValue ?? String(props.children)}\n text={props.textValue ?? String(props.children)}\n value={props.value}\n />\n )\n : undefined;\n\n return (\n <ListboxPrimitive.Option {...otherProps} className={className} onClick={handleClick} onKeyDown={handleKeyDown} ref={ref}>\n {hasValue ? (\n <Icon name=\"tick\" className=\"pointer-events-none invisible -mx-0.5 !h-4 !w-4 group-aria-selected:visible\" />\n ) : null}\n\n {isTag ? (\n <Tag className=\"pointer-events-none my-1\" color={color} icon={prefix}>\n {children}\n </Tag>\n ) : (\n <>\n {prefix ? typeof prefix === 'string' ? <Icon name={prefix} /> : prefix : null}\n <span className=\"flex w-full justify-between\">\n <span className=\"flex flex-col\">\n <span>{children}</span>\n {description ? <span className=\"text-grey-700 -mt-1.5 mb-1.5 text-xs\">{description}</span> : null}\n </span>\n <span className=\"flex flex-col self-center\">\n {postfix ? typeof postfix === 'string' ? <Icon name={postfix} /> : postfix : null}\n </span>\n </span>\n </>\n )}\n {popover ? (\n <IconButton\n icon=\"ellipsis-vertical\"\n appearance=\"discrete\"\n className={cn(\n 'group-aria-current:visible invisible -mr-1 ml-auto !h-5 min-h-[theme(spacing.6)] !w-5 min-w-[theme(spacing.6)] hover:!bg-black/[.08] focus:!shadow-none group-hover:visible',\n {\n '!visible': isMobileDevice(window?.navigator),\n }\n )}\n onClick={event => {\n event.stopPropagation();\n listboxRef?.current?.setActiveIndex(event.currentTarget.parentElement as HTMLDivElement);\n }}\n popover={popover}\n tabIndex={-1}\n />\n ) : null}\n </ListboxPrimitive.Option>\n );\n});\n"],"names":["Option","React","forwardRef","Select2Option","props","ref","children","color","description","prefix","postfix","className","cName","otherProps","fontSize","listboxRef","multiple","onDelete","onEdit","selectRef","setOpen","shouldPauseHoverState","tags","value","useSelect2Context","cn","createOptionClassName","getFontSize","hasValue","Array","isArray","length","undefined","isTag","handleClick","_selectRef$current","current","focus","handleKeyDown","event","isAriaSelectionKey","key","isEmptyOption","popover","popoverProps","_props$textValue","_props$textValue2","EditPopover","textValue","String","text","ListboxPrimitive","onClick","onKeyDown","Icon","name","Tag","icon","IconButton","appearance","isMobileDevice","_window","window","navigator","stopPropagation","_listboxRef$current","setActiveIndex","currentTarget","parentElement","tabIndex"],"mappings":"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"}
1
+ {"version":3,"file":"Option.js","sources":["../../../../../../../../src/components/Select2/components/Option.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { Tag } from '../../Tag/Tag';\nimport { isAriaSelectionKey } from '../../../utils/aria';\nimport * as ListboxPrimitive from '../../../primitives/Listbox2/Listbox2';\nimport { createOptionClassName, getFontSize } from '../utilities';\nimport { useSelect2Context } from './Context';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { EditPopover, EditPopoverProps } from './Edit';\nimport { isMobileDevice } from '../../../utils/device';\nimport { Color } from '../../../types';\nimport { FontSize } from '../../../types';\n\nexport type Select2OptionProps = Omit<ListboxPrimitive.Listbox2OptionProps, 'children' | 'prefix'> & {\n children: string;\n color?: Color;\n description?: string;\n fontSize?: FontSize;\n prefix?: IconName | JSX.Element;\n postfix?: IconName | JSX.Element;\n textValue?: string;\n};\n\nexport const Option = React.forwardRef<HTMLDivElement, Select2OptionProps>(function Select2Option(props, ref) {\n const { children, color, description, prefix, postfix, className: cName, ...otherProps } = props;\n const {\n fontSize,\n listboxRef,\n multiple,\n onDelete,\n onEdit,\n ref: selectRef,\n setOpen,\n shouldPauseHoverState,\n tags,\n value,\n } = useSelect2Context();\n const className = cn(createOptionClassName(shouldPauseHoverState), getFontSize(fontSize), cName);\n\n const hasValue = Array.isArray(value) ? !!value.length : value !== undefined;\n const isTag = tags && !!color;\n\n const handleClick = () => {\n if (!multiple) {\n setOpen(false);\n } else {\n selectRef.current?.focus();\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (isAriaSelectionKey(event)) {\n if (!multiple || event.key === 'Tab') {\n setOpen(false);\n }\n }\n };\n\n const isEmptyOption = children !== '';\n\n const popover =\n isEmptyOption && (onEdit || onDelete)\n ? (popoverProps: Partial<EditPopoverProps>) => (\n <EditPopover\n {...popoverProps}\n color={props.color}\n key={props.textValue ?? String(props.children)}\n text={props.textValue ?? String(props.children)}\n value={props.value}\n />\n )\n : undefined;\n\n return (\n <ListboxPrimitive.Option {...otherProps} className={className} onClick={handleClick} onKeyDown={handleKeyDown} ref={ref}>\n {hasValue ? (\n <Icon name=\"tick\" className=\"pointer-events-none invisible -mx-0.5 !h-4 !w-4 group-aria-selected:visible\" />\n ) : null}\n\n {isTag ? (\n <Tag className=\"pointer-events-none my-1\" color={color} icon={prefix}>\n {children}\n </Tag>\n ) : (\n <>\n {prefix ? typeof prefix === 'string' ? <Icon name={prefix} /> : prefix : null}\n <span className=\"flex w-full justify-between\">\n <span className=\"flex flex-col\">\n <span>{children}</span>\n {description ? <span className=\"text-grey-700 -mt-1.5 mb-1.5 text-xs\">{description}</span> : null}\n </span>\n <span className=\"flex flex-col self-center\">\n {postfix ? typeof postfix === 'string' ? <Icon name={postfix} /> : postfix : null}\n </span>\n </span>\n </>\n )}\n {popover ? (\n <IconButton\n icon=\"ellipsis-vertical\"\n appearance=\"discrete\"\n className={cn(\n 'group-aria-current:visible invisible -mr-1 ml-auto !h-5 min-h-[theme(spacing.6)] !w-5 min-w-[theme(spacing.6)] hover:!bg-black/[.08] focus:!shadow-none group-hover:visible',\n {\n '!visible': isMobileDevice(window?.navigator),\n }\n )}\n onClick={event => {\n event.stopPropagation();\n listboxRef?.current?.setActiveIndexByElement(event.currentTarget.parentElement as HTMLDivElement);\n }}\n popover={popover}\n tabIndex={-1}\n />\n ) : null}\n </ListboxPrimitive.Option>\n );\n});\n"],"names":["Option","React","forwardRef","Select2Option","props","ref","children","color","description","prefix","postfix","className","cName","otherProps","fontSize","listboxRef","multiple","onDelete","onEdit","selectRef","setOpen","shouldPauseHoverState","tags","value","useSelect2Context","cn","createOptionClassName","getFontSize","hasValue","Array","isArray","length","undefined","isTag","handleClick","_selectRef$current","current","focus","handleKeyDown","event","isAriaSelectionKey","key","isEmptyOption","popover","popoverProps","_props$textValue","_props$textValue2","EditPopover","textValue","String","text","ListboxPrimitive","onClick","onKeyDown","Icon","name","Tag","icon","IconButton","appearance","isMobileDevice","_window","window","navigator","stopPropagation","_listboxRef$current","setActiveIndexByElement","currentTarget","parentElement","tabIndex"],"mappings":"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"}
@@ -44,7 +44,7 @@ const Search = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(pro
44
44
  }
45
45
  };
46
46
  return /*#__PURE__*/React__default.createElement(Field, {
47
- className: cn('mx-1.5 mb-1.5 !min-h-fit ', {
47
+ className: cn('mx-1.5 mb-1.5 !min-h-fit', {
48
48
  '!pb-0': !validationError
49
49
  }),
50
50
  invalid: !!validationError,
@@ -1 +1 @@
1
- {"version":3,"file":"Search.js","sources":["../../../../../../../../src/components/Select2/components/Search.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { createCustomKeyboardEvent } from '../../../utils/input';\nimport { Input, InputProps } from '../../Input/Input';\nimport { useSelect2Context } from './Context';\nimport { Field } from '../../Field/Field';\nimport { isAriaSelectionKey } from '../../../utils/aria';\n\nexport type Select2SearchProps = InputProps & {\n onTabKeyPress: () => void;\n};\n\nexport const Search = React.forwardRef<HTMLInputElement, Select2SearchProps>(function ListboxSearch(props, ref) {\n const { onTabKeyPress, ...otherProps } = props;\n const { listboxRef, searchQuery, setSearchQuery, setValidationError, validationError, setOpen } = useSelect2Context();\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (validationError) {\n setValidationError(undefined);\n }\n\n setSearchQuery(event.target.value);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n // space is an aria selection key, so we have to remove it to allow spaces\n if (event.key === ' ') {\n return;\n }\n\n // Select2 should close dropdown and receive focus, when user press Tab while searching (UX requirement to support better keyboard navigation)\n if (event.key === 'Tab') {\n setOpen(false);\n onTabKeyPress();\n }\n\n if (isAriaSelectionKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n event.preventDefault();\n // forward navigation events onto the underlying collection - we want arrow keys to work from inside the filter input\n listboxRef?.current?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n return;\n }\n };\n\n return (\n <Field\n className={cn('mx-1.5 mb-1.5 !min-h-fit ', { '!pb-0': !validationError })}\n invalid={!!validationError}\n message={validationError?.message}>\n <Input\n {...otherProps}\n autoFocus\n invalid={!!validationError}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n ref={ref}\n value={searchQuery}\n />\n </Field>\n );\n});\n"],"names":["Search","React","forwardRef","ListboxSearch","props","ref","onTabKeyPress","otherProps","listboxRef","searchQuery","setSearchQuery","setValidationError","validationError","setOpen","useSelect2Context","handleChange","event","undefined","target","value","handleKeyDown","key","isAriaSelectionKey","_listboxRef$current","preventDefault","current","dispatchEvent","createCustomKeyboardEvent","Field","className","cn","invalid","message","Input","autoFocus","onChange","onKeyDown"],"mappings":";;;;;;;;MAYaA,MAAM,gBAAGC,cAAK,CAACC,UAAU,CAAuC,SAASC,aAAaA,CAACC,KAAK,EAAEC,GAAG;EAC1G,MAAM;IAAEC,aAAa;IAAE,GAAGC;GAAY,GAAGH,KAAK;EAC9C,MAAM;IAAEI,UAAU;IAAEC,WAAW;IAAEC,cAAc;IAAEC,kBAAkB;IAAEC,eAAe;IAAEC;GAAS,GAAGC,iBAAiB,EAAE;EAErH,MAAMC,YAAY,GAAIC,KAA0C;IAC5D,IAAIJ,eAAe,EAAE;MACjBD,kBAAkB,CAACM,SAAS,CAAC;;IAGjCP,cAAc,CAACM,KAAK,CAACE,MAAM,CAACC,KAAK,CAAC;GACrC;EAED,MAAMC,aAAa,GAAIJ,KAA0B;;IAE7C,IAAIA,KAAK,CAACK,GAAG,KAAK,GAAG,EAAE;MACnB;;;IAIJ,IAAIL,KAAK,CAACK,GAAG,KAAK,KAAK,EAAE;MACrBR,OAAO,CAAC,KAAK,CAAC;MACdP,aAAa,EAAE;;IAGnB,IAAIgB,kBAAkB,CAACN,KAAK,CAAC,IAAIA,KAAK,CAACK,GAAG,KAAK,WAAW,IAAIL,KAAK,CAACK,GAAG,KAAK,SAAS,EAAE;MAAA,IAAAE,mBAAA;MACnFP,KAAK,CAACQ,cAAc,EAAE;;MAEtBhB,UAAU,aAAVA,UAAU,wBAAAe,mBAAA,GAAVf,UAAU,CAAEiB,OAAO,cAAAF,mBAAA,uBAAnBA,mBAAA,CAAqBG,aAAa,CAACC,yBAAyB,CAACX,KAA8C,CAAC,CAAC;MAC7G;;GAEP;EAED,oBACIf,6BAAC2B,KAAK;IACFC,SAAS,EAAEC,EAAE,CAAC,2BAA2B,EAAE;MAAE,OAAO,EAAE,CAAClB;KAAiB,CAAC;IACzEmB,OAAO,EAAE,CAAC,CAACnB,eAAe;IAC1BoB,OAAO,EAAEpB,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEoB;kBAC1B/B,6BAACgC,KAAK,oBACE1B,UAAU;IACd2B,SAAS;IACTH,OAAO,EAAE,CAAC,CAACnB,eAAe;IAC1BuB,QAAQ,EAAEpB,YAAY;IACtBqB,SAAS,EAAEhB,aAAa;IACxBf,GAAG,EAAEA,GAAG;IACRc,KAAK,EAAEV;KACT,CACE;AAEhB,CAAC;;;;"}
1
+ {"version":3,"file":"Search.js","sources":["../../../../../../../../src/components/Select2/components/Search.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { createCustomKeyboardEvent } from '../../../utils/input';\nimport { Input, InputProps } from '../../Input/Input';\nimport { useSelect2Context } from './Context';\nimport { Field } from '../../Field/Field';\nimport { isAriaSelectionKey } from '../../../utils/aria';\n\nexport type Select2SearchProps = InputProps & {\n onTabKeyPress: () => void;\n};\n\nexport const Search = React.forwardRef<HTMLInputElement, Select2SearchProps>(function ListboxSearch(props, ref) {\n const { onTabKeyPress, ...otherProps } = props;\n const { listboxRef, searchQuery, setSearchQuery, setValidationError, validationError, setOpen } = useSelect2Context();\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (validationError) {\n setValidationError(undefined);\n }\n\n setSearchQuery(event.target.value);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n // space is an aria selection key, so we have to remove it to allow spaces\n if (event.key === ' ') {\n return;\n }\n\n // Select2 should close dropdown and receive focus, when user press Tab while searching (UX requirement to support better keyboard navigation)\n if (event.key === 'Tab') {\n setOpen(false);\n onTabKeyPress();\n }\n\n if (isAriaSelectionKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n event.preventDefault();\n // forward navigation events onto the underlying collection - we want arrow keys to work from inside the filter input\n listboxRef?.current?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n return;\n }\n };\n\n return (\n <Field\n className={cn('mx-1.5 mb-1.5 !min-h-fit', { '!pb-0': !validationError })}\n invalid={!!validationError}\n message={validationError?.message}>\n <Input\n {...otherProps}\n autoFocus\n invalid={!!validationError}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n ref={ref}\n value={searchQuery}\n />\n </Field>\n );\n});\n"],"names":["Search","React","forwardRef","ListboxSearch","props","ref","onTabKeyPress","otherProps","listboxRef","searchQuery","setSearchQuery","setValidationError","validationError","setOpen","useSelect2Context","handleChange","event","undefined","target","value","handleKeyDown","key","isAriaSelectionKey","_listboxRef$current","preventDefault","current","dispatchEvent","createCustomKeyboardEvent","Field","className","cn","invalid","message","Input","autoFocus","onChange","onKeyDown"],"mappings":";;;;;;;;MAYaA,MAAM,gBAAGC,cAAK,CAACC,UAAU,CAAuC,SAASC,aAAaA,CAACC,KAAK,EAAEC,GAAG;EAC1G,MAAM;IAAEC,aAAa;IAAE,GAAGC;GAAY,GAAGH,KAAK;EAC9C,MAAM;IAAEI,UAAU;IAAEC,WAAW;IAAEC,cAAc;IAAEC,kBAAkB;IAAEC,eAAe;IAAEC;GAAS,GAAGC,iBAAiB,EAAE;EAErH,MAAMC,YAAY,GAAIC,KAA0C;IAC5D,IAAIJ,eAAe,EAAE;MACjBD,kBAAkB,CAACM,SAAS,CAAC;;IAGjCP,cAAc,CAACM,KAAK,CAACE,MAAM,CAACC,KAAK,CAAC;GACrC;EAED,MAAMC,aAAa,GAAIJ,KAA0B;;IAE7C,IAAIA,KAAK,CAACK,GAAG,KAAK,GAAG,EAAE;MACnB;;;IAIJ,IAAIL,KAAK,CAACK,GAAG,KAAK,KAAK,EAAE;MACrBR,OAAO,CAAC,KAAK,CAAC;MACdP,aAAa,EAAE;;IAGnB,IAAIgB,kBAAkB,CAACN,KAAK,CAAC,IAAIA,KAAK,CAACK,GAAG,KAAK,WAAW,IAAIL,KAAK,CAACK,GAAG,KAAK,SAAS,EAAE;MAAA,IAAAE,mBAAA;MACnFP,KAAK,CAACQ,cAAc,EAAE;;MAEtBhB,UAAU,aAAVA,UAAU,wBAAAe,mBAAA,GAAVf,UAAU,CAAEiB,OAAO,cAAAF,mBAAA,uBAAnBA,mBAAA,CAAqBG,aAAa,CAACC,yBAAyB,CAACX,KAA8C,CAAC,CAAC;MAC7G;;GAEP;EAED,oBACIf,6BAAC2B,KAAK;IACFC,SAAS,EAAEC,EAAE,CAAC,0BAA0B,EAAE;MAAE,OAAO,EAAE,CAAClB;KAAiB,CAAC;IACxEmB,OAAO,EAAE,CAAC,CAACnB,eAAe;IAC1BoB,OAAO,EAAEpB,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEoB;kBAC1B/B,6BAACgC,KAAK,oBACE1B,UAAU;IACd2B,SAAS;IACTH,OAAO,EAAE,CAAC,CAACnB,eAAe;IAC1BuB,QAAQ,EAAEpB,YAAY;IACtBqB,SAAS,EAAEhB,aAAa;IACxBf,GAAG,EAAEA,GAAG;IACRc,KAAK,EAAEV;KACT,CACE;AAEhB,CAAC;;;;"}
@@ -1,4 +1,5 @@
1
1
  import React__default from 'react';
2
+ import { filterOption } from '../utilities.js';
2
3
 
3
4
  const isGroup = child => !!child.props.heading || !!child.props.hasSeparator;
4
5
  const useChildren = ({
@@ -51,16 +52,6 @@ const useChildren = ({
51
52
  setSearchQuery
52
53
  };
53
54
  };
54
- const filterOption = (child, searchQuery) => {
55
- var _child$props$textValu, _child$props$descript;
56
- if ((_child$props$textValu = child.props.textValue) !== null && _child$props$textValu !== void 0 && _child$props$textValu.toLowerCase().includes(searchQuery.toLowerCase())) {
57
- return true;
58
- }
59
- if ((_child$props$descript = child.props.description) !== null && _child$props$descript !== void 0 && _child$props$descript.toLowerCase().includes(searchQuery.toLowerCase())) {
60
- return true;
61
- }
62
- return String(child.props.children).toLowerCase().includes(searchQuery.toLowerCase());
63
- };
64
55
 
65
56
  export { isGroup, useChildren };
66
57
  //# sourceMappingURL=useChildren.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useChildren.js","sources":["../../../../../../../../src/components/Select2/hooks/useChildren.tsx"],"sourcesContent":["import React from 'react';\nimport { Select2OptionProps } from '../components/Option';\nimport { Select2GroupProps } from '../Select2';\nimport { Select2Children, Select2OptionValue, Select2Value } from '../types';\n\nexport const isGroup = (\n child: React.ReactElement<Select2OptionProps> | React.ReactElement<Select2GroupProps>\n): child is React.ReactElement<Select2GroupProps> =>\n !!(child.props as Select2GroupProps).heading || !!(child.props as Select2GroupProps).hasSeparator;\n\nexport type useChildrenArgs = {\n children: Select2Children;\n emptyValue?: Select2OptionValue;\n multiple?: boolean;\n open?: boolean;\n setValue: (nextValue: Select2OptionValue) => void;\n value?: Select2Value;\n};\nexport const useChildren = ({ children: initialChildren, emptyValue, multiple, open, setValue, value }: useChildrenArgs) => {\n const [searchQuery, setSearchQuery] = React.useState<string>('');\n\n // flatten children that might be inside groups\n // support empty value - probably a more elegant way to achieve this\n const flattenedChildren: React.ReactElement<Select2OptionProps>[] = React.useMemo(() => {\n const initial: React.ReactElement<Select2OptionProps>[] =\n initialChildren\n ?.map(child => {\n if (isGroup(child)) {\n return (child as React.ReactElement<Select2GroupProps>).props.children;\n }\n // Since we are filtering out groups just above, then casting child to React.ReactElement<Select2OptionProps>, to avoid type inconsistency errors.\n return child as React.ReactElement<Select2OptionProps>;\n })\n .flatMap(c => c) || [];\n\n return initial;\n }, [initialChildren]);\n\n // set an initial value if none is set, we have to trigger state updates for controlled components\n React.useEffect(() => {\n if (!multiple && emptyValue === undefined && value === undefined) {\n setValue(flattenedChildren?.[0]?.props.value);\n }\n }, []);\n\n React.useEffect(() => {\n if (!open) {\n setSearchQuery('');\n }\n }, [open]);\n\n // apply filtering\n const filteredChildren = React.useMemo(() => {\n return initialChildren\n .map(child => {\n if (isGroup(child)) {\n const filteredGroupChildren = (child as React.ReactElement<Select2GroupProps>).props.children.filter(\n groupChild => filterOption(groupChild as React.ReactElement<Select2OptionProps>, searchQuery)\n );\n return filteredGroupChildren.length ? React.cloneElement(child, {}, filteredGroupChildren) : null;\n }\n\n return filterOption(child as React.ReactElement<Select2OptionProps>, searchQuery) ? child : null;\n })\n .filter(child => !!child) as Select2Children;\n }, [flattenedChildren, searchQuery]);\n\n return {\n flattenedChildren,\n filteredChildren,\n searchQuery,\n setSearchQuery,\n };\n};\n\nconst filterOption = (child: React.ReactElement<Select2OptionProps>, searchQuery: string) => {\n if (child.props.textValue?.toLowerCase().includes(searchQuery.toLowerCase())) {\n return true;\n }\n\n if (child.props.description?.toLowerCase().includes(searchQuery.toLowerCase())) {\n return true;\n }\n\n return String(child.props.children).toLowerCase().includes(searchQuery.toLowerCase());\n};\n"],"names":["isGroup","child","props","heading","hasSeparator","useChildren","children","initialChildren","emptyValue","multiple","open","setValue","value","searchQuery","setSearchQuery","React","useState","flattenedChildren","useMemo","initial","map","flatMap","c","useEffect","undefined","_flattenedChildren$","filteredChildren","filteredGroupChildren","filter","groupChild","filterOption","length","cloneElement","_child$props$textValu","textValue","toLowerCase","includes","_child$props$descript","description","String"],"mappings":"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"}
1
+ {"version":3,"file":"useChildren.js","sources":["../../../../../../../../src/components/Select2/hooks/useChildren.tsx"],"sourcesContent":["import React from 'react';\nimport { Select2OptionProps } from '../components/Option';\nimport { Select2GroupProps } from '../Select2';\nimport { Select2Children, Select2OptionValue, Select2Value } from '../types';\nimport { filterOption } from '../utilities';\n\nexport const isGroup = (\n child: React.ReactElement<Select2OptionProps> | React.ReactElement<Select2GroupProps>\n): child is React.ReactElement<Select2GroupProps> =>\n !!(child.props as Select2GroupProps).heading || !!(child.props as Select2GroupProps).hasSeparator;\n\nexport type useChildrenArgs = {\n children: Select2Children;\n emptyValue?: Select2OptionValue;\n multiple?: boolean;\n open?: boolean;\n setValue: (nextValue: Select2OptionValue) => void;\n value?: Select2Value;\n};\nexport const useChildren = ({ children: initialChildren, emptyValue, multiple, open, setValue, value }: useChildrenArgs) => {\n const [searchQuery, setSearchQuery] = React.useState<string>('');\n\n // flatten children that might be inside groups\n // support empty value - probably a more elegant way to achieve this\n const flattenedChildren: React.ReactElement<Select2OptionProps>[] = React.useMemo(() => {\n const initial: React.ReactElement<Select2OptionProps>[] =\n initialChildren\n ?.map(child => {\n if (isGroup(child)) {\n return (child as React.ReactElement<Select2GroupProps>).props.children;\n }\n // Since we are filtering out groups just above, then casting child to React.ReactElement<Select2OptionProps>, to avoid type inconsistency errors.\n return child as React.ReactElement<Select2OptionProps>;\n })\n .flatMap(c => c) || [];\n\n return initial;\n }, [initialChildren]);\n\n // set an initial value if none is set, we have to trigger state updates for controlled components\n React.useEffect(() => {\n if (!multiple && emptyValue === undefined && value === undefined) {\n setValue(flattenedChildren?.[0]?.props.value);\n }\n }, []);\n\n React.useEffect(() => {\n if (!open) {\n setSearchQuery('');\n }\n }, [open]);\n\n // apply filtering\n const filteredChildren = React.useMemo(() => {\n return initialChildren\n .map(child => {\n if (isGroup(child)) {\n const filteredGroupChildren = (child as React.ReactElement<Select2GroupProps>).props.children.filter(\n groupChild => filterOption(groupChild as React.ReactElement<Select2OptionProps>, searchQuery)\n );\n return filteredGroupChildren.length ? React.cloneElement(child, {}, filteredGroupChildren) : null;\n }\n\n return filterOption(child as React.ReactElement<Select2OptionProps>, searchQuery) ? child : null;\n })\n .filter(child => !!child) as Select2Children;\n }, [flattenedChildren, searchQuery]);\n\n return {\n flattenedChildren,\n filteredChildren,\n searchQuery,\n setSearchQuery,\n };\n};\n"],"names":["isGroup","child","props","heading","hasSeparator","useChildren","children","initialChildren","emptyValue","multiple","open","setValue","value","searchQuery","setSearchQuery","React","useState","flattenedChildren","useMemo","initial","map","flatMap","c","useEffect","undefined","_flattenedChildren$","filteredChildren","filteredGroupChildren","filter","groupChild","filterOption","length","cloneElement"],"mappings":";;;MAMaA,OAAO,GAChBC,KAAqF,IAErF,CAAC,CAAEA,KAAK,CAACC,KAA2B,CAACC,OAAO,IAAI,CAAC,CAAEF,KAAK,CAACC,KAA2B,CAACE;MAU5EC,WAAW,GAAGA,CAAC;EAAEC,QAAQ,EAAEC,eAAe;EAAEC,UAAU;EAAEC,QAAQ;EAAEC,IAAI;EAAEC,QAAQ;EAAEC;CAAwB;EACnH,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAS,EAAE,CAAC;;;EAIhE,MAAMC,iBAAiB,GAA6CF,cAAK,CAACG,OAAO,CAAC;IAC9E,MAAMC,OAAO,GACT,CAAAZ,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CACTa,GAAG,CAACnB,KAAK;MACP,IAAID,OAAO,CAACC,KAAK,CAAC,EAAE;QAChB,OAAQA,KAA+C,CAACC,KAAK,CAACI,QAAQ;;;MAG1E,OAAOL,KAA+C;KACzD,CAAC,CACDoB,OAAO,CAACC,CAAC,IAAIA,CAAC,CAAC,KAAI,EAAE;IAE9B,OAAOH,OAAO;GACjB,EAAE,CAACZ,eAAe,CAAC,CAAC;;EAGrBQ,cAAK,CAACQ,SAAS,CAAC;IACZ,IAAI,CAACd,QAAQ,IAAID,UAAU,KAAKgB,SAAS,IAAIZ,KAAK,KAAKY,SAAS,EAAE;MAAA,IAAAC,mBAAA;MAC9Dd,QAAQ,CAACM,iBAAiB,aAAjBA,iBAAiB,wBAAAQ,mBAAA,GAAjBR,iBAAiB,CAAG,CAAC,CAAC,cAAAQ,mBAAA,uBAAtBA,mBAAA,CAAwBvB,KAAK,CAACU,KAAK,CAAC;;GAEpD,EAAE,EAAE,CAAC;EAENG,cAAK,CAACQ,SAAS,CAAC;IACZ,IAAI,CAACb,IAAI,EAAE;MACPI,cAAc,CAAC,EAAE,CAAC;;GAEzB,EAAE,CAACJ,IAAI,CAAC,CAAC;;EAGV,MAAMgB,gBAAgB,GAAGX,cAAK,CAACG,OAAO,CAAC;IACnC,OAAOX,eAAe,CACjBa,GAAG,CAACnB,KAAK;MACN,IAAID,OAAO,CAACC,KAAK,CAAC,EAAE;QAChB,MAAM0B,qBAAqB,GAAI1B,KAA+C,CAACC,KAAK,CAACI,QAAQ,CAACsB,MAAM,CAChGC,UAAU,IAAIC,YAAY,CAACD,UAAoD,EAAEhB,WAAW,CAAC,CAChG;QACD,OAAOc,qBAAqB,CAACI,MAAM,gBAAGhB,cAAK,CAACiB,YAAY,CAAC/B,KAAK,EAAE,EAAE,EAAE0B,qBAAqB,CAAC,GAAG,IAAI;;MAGrG,OAAOG,YAAY,CAAC7B,KAA+C,EAAEY,WAAW,CAAC,GAAGZ,KAAK,GAAG,IAAI;KACnG,CAAC,CACD2B,MAAM,CAAC3B,KAAK,IAAI,CAAC,CAACA,KAAK,CAAoB;GACnD,EAAE,CAACgB,iBAAiB,EAAEJ,WAAW,CAAC,CAAC;EAEpC,OAAO;IACHI,iBAAiB;IACjBS,gBAAgB;IAChBb,WAAW;IACXC;GACH;AACL;;;;"}
@@ -16,6 +16,16 @@ const getFontSize = fontSize => {
16
16
  return 'text-sm';
17
17
  }
18
18
  };
19
+ const filterOption = (child, searchQuery) => {
20
+ var _child$props$textValu, _child$props$descript;
21
+ if ((_child$props$textValu = child.props.textValue) !== null && _child$props$textValu !== void 0 && _child$props$textValu.toLowerCase().includes(searchQuery.toLowerCase())) {
22
+ return true;
23
+ }
24
+ if ((_child$props$descript = child.props.description) !== null && _child$props$descript !== void 0 && _child$props$descript.toLowerCase().includes(searchQuery.toLowerCase())) {
25
+ return true;
26
+ }
27
+ return String(child.props.children).toLowerCase().includes(searchQuery.toLowerCase());
28
+ };
19
29
 
20
- export { createCollectionClassName, createOptionClassName, getFontSize };
30
+ export { createCollectionClassName, createOptionClassName, filterOption, getFontSize };
21
31
  //# sourceMappingURL=utilities.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"utilities.js","sources":["../../../../../../../src/components/Select2/utilities.ts"],"sourcesContent":["import cn from 'clsx';\nimport { FontSize, FontSizes } from '../../types';\n\nexport const createOptionClassName = (shouldPauseHoverState = false) =>\n cn(\n 'group mb-px flex w-full text-sm flex-shrink-0 font-normal cursor-pointer items-center rounded bg-white px-2 leading-8 text-black aria-hidden:hidden gap-1.5 bg-white aria-current:wcag-grey-200 aria-disabled:text-black/25 aria-disabled:pointer-events-none !justify-normal',\n\n {\n 'hover:wcag-grey-200': !shouldPauseHoverState,\n }\n );\n\nexport const createCollectionClassName = () => 'flex flex-col gap-px';\n\nexport const getFontSize = (fontSize?: FontSize) => {\n switch (fontSize) {\n case FontSizes.small:\n return 'text-xs';\n\n case FontSizes.large:\n return 'text-base';\n\n case FontSizes.medium:\n default:\n return 'text-sm';\n }\n};\n"],"names":["createOptionClassName","shouldPauseHoverState","cn","createCollectionClassName","getFontSize","fontSize","FontSizes","small","large","medium"],"mappings":";;;MAGaA,qBAAqB,GAAGA,CAACC,qBAAqB,GAAG,KAAK,KAC/DC,EAAE,CACE,+QAA+Q,EAE/Q;EACI,qBAAqB,EAAE,CAACD;CAC3B;MAGIE,yBAAyB,GAAGA,MAAM;MAElCC,WAAW,GAAIC,QAAmB;EAC3C,QAAQA,QAAQ;IACZ,KAAKC,SAAS,CAACC,KAAK;MAChB,OAAO,SAAS;IAEpB,KAAKD,SAAS,CAACE,KAAK;MAChB,OAAO,WAAW;IAEtB,KAAKF,SAAS,CAACG,MAAM;IACrB;MACI,OAAO,SAAS;;AAE5B;;;;"}
1
+ {"version":3,"file":"utilities.js","sources":["../../../../../../../src/components/Select2/utilities.ts"],"sourcesContent":["import cn from 'clsx';\nimport { FontSize, FontSizes } from '../../types';\nimport { Select2OptionProps } from './components/Option';\n\nexport const createOptionClassName = (shouldPauseHoverState = false) =>\n cn(\n 'group mb-px flex w-full text-sm flex-shrink-0 font-normal cursor-pointer items-center rounded bg-white px-2 leading-8 text-black aria-hidden:hidden gap-1.5 bg-white aria-current:wcag-grey-200 aria-disabled:text-black/25 aria-disabled:pointer-events-none !justify-normal',\n\n {\n 'hover:wcag-grey-200': !shouldPauseHoverState,\n }\n );\n\nexport const createCollectionClassName = () => 'flex flex-col gap-px';\n\nexport const getFontSize = (fontSize?: FontSize) => {\n switch (fontSize) {\n case FontSizes.small:\n return 'text-xs';\n\n case FontSizes.large:\n return 'text-base';\n\n case FontSizes.medium:\n default:\n return 'text-sm';\n }\n};\n\nexport const filterOption = (child: React.ReactElement<Select2OptionProps>, searchQuery: string) => {\n if (child.props.textValue?.toLowerCase().includes(searchQuery.toLowerCase())) {\n return true;\n }\n\n if (child.props.description?.toLowerCase().includes(searchQuery.toLowerCase())) {\n return true;\n }\n\n return String(child.props.children).toLowerCase().includes(searchQuery.toLowerCase());\n};\n"],"names":["createOptionClassName","shouldPauseHoverState","cn","createCollectionClassName","getFontSize","fontSize","FontSizes","small","large","medium","filterOption","child","searchQuery","_child$props$textValu","props","textValue","toLowerCase","includes","_child$props$descript","description","String","children"],"mappings":";;;MAIaA,qBAAqB,GAAGA,CAACC,qBAAqB,GAAG,KAAK,KAC/DC,EAAE,CACE,+QAA+Q,EAE/Q;EACI,qBAAqB,EAAE,CAACD;CAC3B;MAGIE,yBAAyB,GAAGA,MAAM;MAElCC,WAAW,GAAIC,QAAmB;EAC3C,QAAQA,QAAQ;IACZ,KAAKC,SAAS,CAACC,KAAK;MAChB,OAAO,SAAS;IAEpB,KAAKD,SAAS,CAACE,KAAK;MAChB,OAAO,WAAW;IAEtB,KAAKF,SAAS,CAACG,MAAM;IACrB;MACI,OAAO,SAAS;;AAE5B;MAEaC,YAAY,GAAGA,CAACC,KAA6C,EAAEC,WAAmB;;EAC3F,KAAAC,qBAAA,GAAIF,KAAK,CAACG,KAAK,CAACC,SAAS,cAAAF,qBAAA,eAArBA,qBAAA,CAAuBG,WAAW,EAAE,CAACC,QAAQ,CAACL,WAAW,CAACI,WAAW,EAAE,CAAC,EAAE;IAC1E,OAAO,IAAI;;EAGf,KAAAE,qBAAA,GAAIP,KAAK,CAACG,KAAK,CAACK,WAAW,cAAAD,qBAAA,eAAvBA,qBAAA,CAAyBF,WAAW,EAAE,CAACC,QAAQ,CAACL,WAAW,CAACI,WAAW,EAAE,CAAC,EAAE;IAC5E,OAAO,IAAI;;EAGf,OAAOI,MAAM,CAACT,KAAK,CAACG,KAAK,CAACO,QAAQ,CAAC,CAACL,WAAW,EAAE,CAACC,QAAQ,CAACL,WAAW,CAACI,WAAW,EAAE,CAAC;AACzF;;;;"}
@@ -19,7 +19,7 @@ function SaveStatus(props) {
19
19
  React__default.useEffect(() => {
20
20
  let timeout;
21
21
  if (status === 'complete') {
22
- timeout = setTimeout(() => {
22
+ timeout = window.setTimeout(() => {
23
23
  tableMeta.editing.setRowSaveStatus(rowId, undefined);
24
24
  }, COMPLETE_INDICATOR_DELAY);
25
25
  }
@@ -1 +1 @@
1
- {"version":3,"file":"SaveStatus.js","sources":["../../../../../../../../../../src/components/Table3/components/Row/Editing/SaveStatus.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { BadgeIcon } from '../../../../BadgeIcon/BadgeIcon';\nimport { Spinner } from '../../../../Spinner/Spinner';\n\nconst COMPLETE_INDICATOR_DELAY = 3000;\n\ntype SaveStatusProps<TType = unknown> = {\n rowId: string;\n table: ReactTable<TType>;\n};\n\nexport function SaveStatus<TType = unknown>(props: SaveStatusProps<TType>) {\n const { rowId, table } = props;\n const { texts } = useLocalization();\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const status = tableMeta.editing.getRowSaveStatus(rowId);\n\n React.useEffect(() => {\n let timeout: NodeJS.Timeout;\n\n if (status === 'complete') {\n timeout = setTimeout(() => {\n tableMeta.editing.setRowSaveStatus(rowId, undefined);\n }, COMPLETE_INDICATOR_DELAY);\n }\n\n return () => {\n clearTimeout(timeout);\n };\n }, [status]);\n\n const className = clsx(\n 'col-span-full sticky ml-auto right-0 top-0 -mb-[100%] z-10 h-8 bg-[inherit] flex items-center px-1.5 shadow-[-6px_0px_6px_var(--table-row-actions-shadow)]',\n {\n 'mt-0.5': tableMeta.rowHeight.height === 'short',\n 'mt-1': tableMeta.rowHeight.height === 'medium',\n 'mt-1.5': tableMeta.rowHeight.height === 'tall',\n 'mt-2': tableMeta.rowHeight.height === 'extra-tall',\n }\n );\n\n return (\n <td className=\"!contents\">\n <span className={className}>\n {status === 'pending' ? (\n <Tooltip title={texts.table3.editing.saving.progress}>\n <Spinner delay={0} className=\"mr-1 !h-5 !w-5\" />\n </Tooltip>\n ) : (\n <Tooltip title={texts.table3.editing.saving.complete}>\n <BadgeIcon icon=\"tick\" color=\"green\" subtle className=\"mr-1\" />\n </Tooltip>\n )}\n </span>\n </td>\n );\n}\n"],"names":["COMPLETE_INDICATOR_DELAY","SaveStatus","props","rowId","table","texts","useLocalization","tableMeta","options","meta","status","editing","getRowSaveStatus","React","useEffect","timeout","setTimeout","setRowSaveStatus","undefined","clearTimeout","className","clsx","rowHeight","height","Tooltip","title","table3","saving","progress","Spinner","delay","complete","BadgeIcon","icon","color","subtle"],"mappings":";;;;;;;AAQA,MAAMA,wBAAwB,GAAG,IAAI;SAOrBC,UAAUA,CAAkBC,KAA6B;EACrE,MAAM;IAAEC,KAAK;IAAEC;GAAO,GAAGF,KAAK;EAC9B,MAAM;IAAEG;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,SAAS,GAAGH,KAAK,CAACI,OAAO,CAACC,IAA6B;EAC7D,MAAMC,MAAM,GAAGH,SAAS,CAACI,OAAO,CAACC,gBAAgB,CAACT,KAAK,CAAC;EAExDU,cAAK,CAACC,SAAS,CAAC;IACZ,IAAIC,OAAuB;IAE3B,IAAIL,MAAM,KAAK,UAAU,EAAE;MACvBK,OAAO,GAAGC,UAAU,CAAC;QACjBT,SAAS,CAACI,OAAO,CAACM,gBAAgB,CAACd,KAAK,EAAEe,SAAS,CAAC;OACvD,EAAElB,wBAAwB,CAAC;;IAGhC,OAAO;MACHmB,YAAY,CAACJ,OAAO,CAAC;KACxB;GACJ,EAAE,CAACL,MAAM,CAAC,CAAC;EAEZ,MAAMU,SAAS,GAAGC,EAAI,CAClB,4JAA4J,EAC5J;IACI,QAAQ,EAAEd,SAAS,CAACe,SAAS,CAACC,MAAM,KAAK,OAAO;IAChD,MAAM,EAAEhB,SAAS,CAACe,SAAS,CAACC,MAAM,KAAK,QAAQ;IAC/C,QAAQ,EAAEhB,SAAS,CAACe,SAAS,CAACC,MAAM,KAAK,MAAM;IAC/C,MAAM,EAAEhB,SAAS,CAACe,SAAS,CAACC,MAAM,KAAK;GAC1C,CACJ;EAED,oBACIV;IAAIO,SAAS,EAAC;kBACVP;IAAMO,SAAS,EAAEA;KACZV,MAAM,KAAK,SAAS,iBACjBG,6BAACW,OAAO;IAACC,KAAK,EAAEpB,KAAK,CAACqB,MAAM,CAACf,OAAO,CAACgB,MAAM,CAACC;kBACxCf,6BAACgB,OAAO;IAACC,KAAK,EAAE,CAAC;IAAEV,SAAS,EAAC;IAAmB,CAC1C,kBAEVP,6BAACW,OAAO;IAACC,KAAK,EAAEpB,KAAK,CAACqB,MAAM,CAACf,OAAO,CAACgB,MAAM,CAACI;kBACxClB,6BAACmB,SAAS;IAACC,IAAI,EAAC,MAAM;IAACC,KAAK,EAAC,OAAO;IAACC,MAAM;IAACf,SAAS,EAAC;IAAS,CACzD,CACb,CACE,CACN;AAEb;;;;"}
1
+ {"version":3,"file":"SaveStatus.js","sources":["../../../../../../../../../../src/components/Table3/components/Row/Editing/SaveStatus.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { BadgeIcon } from '../../../../BadgeIcon/BadgeIcon';\nimport { Spinner } from '../../../../Spinner/Spinner';\n\nconst COMPLETE_INDICATOR_DELAY = 3000;\n\ntype SaveStatusProps<TType = unknown> = {\n rowId: string;\n table: ReactTable<TType>;\n};\n\nexport function SaveStatus<TType = unknown>(props: SaveStatusProps<TType>) {\n const { rowId, table } = props;\n const { texts } = useLocalization();\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const status = tableMeta.editing.getRowSaveStatus(rowId);\n\n React.useEffect(() => {\n let timeout: number;\n\n if (status === 'complete') {\n timeout = window.setTimeout(() => {\n tableMeta.editing.setRowSaveStatus(rowId, undefined);\n }, COMPLETE_INDICATOR_DELAY);\n }\n\n return () => {\n clearTimeout(timeout);\n };\n }, [status]);\n\n const className = clsx(\n 'col-span-full sticky ml-auto right-0 top-0 -mb-[100%] z-10 h-8 bg-[inherit] flex items-center px-1.5 shadow-[-6px_0px_6px_var(--table-row-actions-shadow)]',\n {\n 'mt-0.5': tableMeta.rowHeight.height === 'short',\n 'mt-1': tableMeta.rowHeight.height === 'medium',\n 'mt-1.5': tableMeta.rowHeight.height === 'tall',\n 'mt-2': tableMeta.rowHeight.height === 'extra-tall',\n }\n );\n\n return (\n <td className=\"!contents\">\n <span className={className}>\n {status === 'pending' ? (\n <Tooltip title={texts.table3.editing.saving.progress}>\n <Spinner delay={0} className=\"mr-1 !h-5 !w-5\" />\n </Tooltip>\n ) : (\n <Tooltip title={texts.table3.editing.saving.complete}>\n <BadgeIcon icon=\"tick\" color=\"green\" subtle className=\"mr-1\" />\n </Tooltip>\n )}\n </span>\n </td>\n );\n}\n"],"names":["COMPLETE_INDICATOR_DELAY","SaveStatus","props","rowId","table","texts","useLocalization","tableMeta","options","meta","status","editing","getRowSaveStatus","React","useEffect","timeout","window","setTimeout","setRowSaveStatus","undefined","clearTimeout","className","clsx","rowHeight","height","Tooltip","title","table3","saving","progress","Spinner","delay","complete","BadgeIcon","icon","color","subtle"],"mappings":";;;;;;;AAQA,MAAMA,wBAAwB,GAAG,IAAI;SAOrBC,UAAUA,CAAkBC,KAA6B;EACrE,MAAM;IAAEC,KAAK;IAAEC;GAAO,GAAGF,KAAK;EAC9B,MAAM;IAAEG;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,SAAS,GAAGH,KAAK,CAACI,OAAO,CAACC,IAA6B;EAC7D,MAAMC,MAAM,GAAGH,SAAS,CAACI,OAAO,CAACC,gBAAgB,CAACT,KAAK,CAAC;EAExDU,cAAK,CAACC,SAAS,CAAC;IACZ,IAAIC,OAAe;IAEnB,IAAIL,MAAM,KAAK,UAAU,EAAE;MACvBK,OAAO,GAAGC,MAAM,CAACC,UAAU,CAAC;QACxBV,SAAS,CAACI,OAAO,CAACO,gBAAgB,CAACf,KAAK,EAAEgB,SAAS,CAAC;OACvD,EAAEnB,wBAAwB,CAAC;;IAGhC,OAAO;MACHoB,YAAY,CAACL,OAAO,CAAC;KACxB;GACJ,EAAE,CAACL,MAAM,CAAC,CAAC;EAEZ,MAAMW,SAAS,GAAGC,EAAI,CAClB,4JAA4J,EAC5J;IACI,QAAQ,EAAEf,SAAS,CAACgB,SAAS,CAACC,MAAM,KAAK,OAAO;IAChD,MAAM,EAAEjB,SAAS,CAACgB,SAAS,CAACC,MAAM,KAAK,QAAQ;IAC/C,QAAQ,EAAEjB,SAAS,CAACgB,SAAS,CAACC,MAAM,KAAK,MAAM;IAC/C,MAAM,EAAEjB,SAAS,CAACgB,SAAS,CAACC,MAAM,KAAK;GAC1C,CACJ;EAED,oBACIX;IAAIQ,SAAS,EAAC;kBACVR;IAAMQ,SAAS,EAAEA;KACZX,MAAM,KAAK,SAAS,iBACjBG,6BAACY,OAAO;IAACC,KAAK,EAAErB,KAAK,CAACsB,MAAM,CAAChB,OAAO,CAACiB,MAAM,CAACC;kBACxChB,6BAACiB,OAAO;IAACC,KAAK,EAAE,CAAC;IAAEV,SAAS,EAAC;IAAmB,CAC1C,kBAEVR,6BAACY,OAAO;IAACC,KAAK,EAAErB,KAAK,CAACsB,MAAM,CAAChB,OAAO,CAACiB,MAAM,CAACI;kBACxCnB,6BAACoB,SAAS;IAACC,IAAI,EAAC,MAAM;IAACC,KAAK,EAAC,OAAO;IAACC,MAAM;IAACf,SAAS,EAAC;IAAS,CACzD,CACb,CACE,CACN;AAEb;;;;"}
@@ -15,7 +15,6 @@ const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(prop
15
15
  } = props;
16
16
  const internalRef = useMergedRef(ref);
17
17
  const [activeIndex, setActiveIndex] = React__default.useState();
18
- const lastLengthRef = React__default.useRef(0);
19
18
  const setActiveOption = (index, collection, option) => {
20
19
  var _collection$querySele;
21
20
  (_collection$querySele = collection.querySelector(`[aria-current]`)) === null || _collection$querySele === void 0 ? void 0 : _collection$querySele.removeAttribute('aria-current');
@@ -38,13 +37,13 @@ const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(prop
38
37
  }, [internalRef.current, querySelector]);
39
38
  React__default.useEffect(() => {
40
39
  if (internalRef.current) {
41
- internalRef.current.setActiveIndex = setActiveIndexByElement;
40
+ internalRef.current.setActiveIndexByElement = setActiveIndexByElement;
42
41
  }
43
42
  }, [internalRef.current]);
44
43
  React__default.useEffect(() => {
45
44
  if (internalRef.current) {
46
45
  const options = getOptionsFromCollection(internalRef.current, querySelector);
47
- if (options.length && options.length !== lastLengthRef.current) {
46
+ if (options.length) {
48
47
  let selected = internalRef.current.querySelectorAll(`[aria-current="true"]`);
49
48
  if (selected.length === 0) {
50
49
  selected = internalRef.current.querySelectorAll(`[aria-selected]`);
@@ -62,7 +61,6 @@ const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(prop
62
61
  setActiveOption(0, internalRef.current, options.item(0));
63
62
  }
64
63
  }
65
- lastLengthRef.current = options.length;
66
64
  }
67
65
  }, [props.children]);
68
66
  const handleClick = event => {