@economic/taco 0.0.1-alpha.1533 → 0.0.1-alpha.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Backdrop/Backdrop.d.ts +3 -0
- package/dist/components/Button/Button.d.ts +39 -1
- package/dist/components/Button/util.d.ts +2 -0
- package/dist/components/Checkbox/Checkbox.d.ts +1 -1
- package/dist/components/Dialog/Context.d.ts +1 -0
- package/dist/components/Dialog/Dialog.d.ts +14 -12
- package/dist/components/Hanger/Hanger.d.ts +4 -9
- package/dist/components/Icon/components/MatchEntries.d.ts +3 -0
- package/dist/components/Icon/components/index.d.ts +1 -1
- package/dist/components/IconButton/IconButton.d.ts +38 -1
- package/dist/components/Input/Input.d.ts +1 -1
- package/dist/components/Menu/Menu.d.ts +2 -2
- package/dist/components/Menu/components/Item.d.ts +1 -1
- package/dist/components/Menu/components/Link.d.ts +1 -1
- package/dist/components/Navigation/Navigation.d.ts +4 -4
- package/dist/components/Popover/Popover.d.ts +5 -9
- package/dist/components/RadioGroup/RadioGroup.d.ts +2 -2
- package/dist/components/Select/Select.d.ts +4 -0
- package/dist/components/Select/useSelect.d.ts +1 -1
- package/dist/components/Table/Table.storyexample.d.ts +1 -1
- package/dist/components/Table/components/PaginatedTable.d.ts +2 -2
- package/dist/components/Table/components/Table.d.ts +2 -2
- package/dist/components/Table/components/WindowedTable.d.ts +2 -2
- package/dist/components/Table/types.d.ts +2 -2
- package/dist/components/Tabs/Tabs.d.ts +2 -2
- package/dist/components/Tooltip/Tooltip.d.ts +11 -1
- package/dist/components/Treeview/Treeview.d.ts +2 -2
- package/dist/esm/index.css +96 -119
- package/dist/esm/src/components/Backdrop/Backdrop.js +12 -0
- package/dist/esm/src/components/Backdrop/Backdrop.js.map +1 -0
- package/dist/esm/src/components/Button/Button.js +6 -9
- package/dist/esm/src/components/Button/Button.js.map +1 -1
- package/dist/esm/src/components/Button/util.js +42 -1
- package/dist/esm/src/components/Button/util.js.map +1 -1
- package/dist/esm/src/components/Calendar/Calendar.js +1 -1
- package/dist/esm/src/components/Checkbox/Checkbox.js +9 -1
- package/dist/esm/src/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/esm/src/components/Combobox/useCombobox.js +1 -1
- package/dist/esm/src/components/Datepicker/Datepicker.js +2 -2
- package/dist/esm/src/components/Dialog/Context.js +1 -0
- package/dist/esm/src/components/Dialog/Context.js.map +1 -1
- package/dist/esm/src/components/Dialog/Dialog.js +5 -4
- package/dist/esm/src/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/src/components/Dialog/components/Content.js +13 -13
- package/dist/esm/src/components/Dialog/components/Content.js.map +1 -1
- package/dist/esm/src/components/Dialog/components/Drawer.js +2 -1
- package/dist/esm/src/components/Dialog/components/Drawer.js.map +1 -1
- package/dist/esm/src/components/Dialog/components/Extra.js +2 -1
- package/dist/esm/src/components/Dialog/components/Extra.js.map +1 -1
- package/dist/esm/src/components/Dialog/components/Trigger.js +2 -1
- package/dist/esm/src/components/Dialog/components/Trigger.js.map +1 -1
- package/dist/esm/src/components/Hanger/Hanger.js +12 -9
- package/dist/esm/src/components/Hanger/Hanger.js.map +1 -1
- package/dist/esm/src/components/Icon/components/MatchEntries.js +18 -0
- package/dist/esm/src/components/Icon/components/MatchEntries.js.map +1 -0
- package/dist/esm/src/components/Icon/components/index.js +2 -0
- package/dist/esm/src/components/Icon/components/index.js.map +1 -1
- package/dist/esm/src/components/IconButton/IconButton.js +9 -11
- package/dist/esm/src/components/IconButton/IconButton.js.map +1 -1
- package/dist/esm/src/components/Input/util.js +6 -6
- package/dist/esm/src/components/Input/util.js.map +1 -1
- package/dist/esm/src/components/Listbox/ScrollableList.js +1 -1
- package/dist/esm/src/components/Navigation/Navigation.js +5 -4
- package/dist/esm/src/components/Navigation/Navigation.js.map +1 -1
- package/dist/esm/src/components/Pagination/PageNumbers.js +1 -1
- package/dist/esm/src/components/Pagination/Pagination.js +2 -1
- package/dist/esm/src/components/Pagination/Pagination.js.map +1 -1
- package/dist/esm/src/components/Popover/Popover.js +9 -6
- package/dist/esm/src/components/Popover/Popover.js.map +1 -1
- package/dist/esm/src/components/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/esm/src/components/SearchInput/SearchInput.js +8 -7
- package/dist/esm/src/components/SearchInput/SearchInput.js.map +1 -1
- package/dist/esm/src/components/Select/Select.js +2 -1
- package/dist/esm/src/components/Select/Select.js.map +1 -1
- package/dist/esm/src/components/Select/useSelect.js +12 -5
- package/dist/esm/src/components/Select/useSelect.js.map +1 -1
- package/dist/esm/src/components/Table/components/PaginatedTable.js.map +1 -1
- package/dist/esm/src/components/Table/components/Table.js.map +1 -1
- package/dist/esm/src/components/Table/components/WindowedTable.js.map +1 -1
- package/dist/esm/src/components/Table/hooks/plugins/useRowActions.js +11 -5
- package/dist/esm/src/components/Table/hooks/plugins/useRowActions.js.map +1 -1
- package/dist/esm/src/components/Table/hooks/plugins/useRowSelect.js +3 -3
- package/dist/esm/src/components/Table/hooks/plugins/useRowSelect.js.map +1 -1
- package/dist/esm/src/components/Table/util/renderColumn.js +4 -3
- package/dist/esm/src/components/Table/util/renderColumn.js.map +1 -1
- package/dist/esm/src/components/Table/util/renderRow.js +4 -3
- package/dist/esm/src/components/Table/util/renderRow.js.map +1 -1
- package/dist/esm/src/components/Tabs/Tabs.js.map +1 -1
- package/dist/esm/src/components/Toast/Toast.js +1 -1
- package/dist/esm/src/components/Tooltip/Tooltip.js +11 -10
- package/dist/esm/src/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/esm/src/components/Tour/Tour.js +2 -2
- package/dist/esm/src/components/Treeview/Treeview.js.map +1 -1
- package/dist/esm/src/index.js +8 -7
- package/dist/esm/src/index.js.map +1 -1
- package/dist/esm/src/primitives/Button.js +2 -12
- package/dist/esm/src/primitives/Button.js.map +1 -1
- package/dist/esm/src/utils/mergeRefs.js +14 -0
- package/dist/esm/src/utils/mergeRefs.js.map +1 -0
- package/dist/index.css +96 -119
- package/dist/index.d.ts +1 -0
- package/dist/primitives/Button.d.ts +0 -4
- package/dist/taco.cjs.development.js +1660 -1570
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/dist/utils/mergeRefs.d.ts +2 -0
- package/dist/utils/tailwind.d.ts +1 -1
- package/package.json +5 -3
- package/plugins/tailwindcss-aria-attributes.js +73 -0
- package/types.json +7310 -0
@@ -1,17 +1,19 @@
|
|
1
1
|
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../_virtual/_rollupPluginBabelHelpers.js';
|
2
|
-
import { useMemo, createElement, createContext,
|
2
|
+
import { forwardRef, useMemo, createElement, createContext, useContext } from 'react';
|
3
3
|
import cn from 'classnames';
|
4
4
|
import { Root, Trigger as Trigger$1, Close as Close$1 } from '@radix-ui/react-popover';
|
5
5
|
import { UnstyledContent, UnstyledArrow } from './Primitives.js';
|
6
|
+
import mergeRefs from '../../utils/mergeRefs.js';
|
6
7
|
|
7
8
|
var _excluded = ["children"];
|
8
9
|
var PopoverContext = /*#__PURE__*/createContext({
|
9
|
-
props: {}
|
10
|
+
props: {},
|
11
|
+
ref: null
|
10
12
|
});
|
11
13
|
var Trigger = /*#__PURE__*/forwardRef(function (props, ref) {
|
12
14
|
var context = useContext(PopoverContext);
|
13
15
|
return createElement(Trigger$1, Object.assign({}, context.props, props, {
|
14
|
-
ref: ref,
|
16
|
+
ref: mergeRefs([context.ref, ref]),
|
15
17
|
asChild: true
|
16
18
|
}));
|
17
19
|
});
|
@@ -54,13 +56,14 @@ var Close = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
54
56
|
asChild: true
|
55
57
|
}));
|
56
58
|
});
|
57
|
-
var Popover = function
|
59
|
+
var Popover = /*#__PURE__*/forwardRef(function (props, ref) {
|
58
60
|
var children = props.children,
|
59
61
|
otherProps = _objectWithoutPropertiesLoose(props, _excluded);
|
60
62
|
|
61
63
|
var context = useMemo(function () {
|
62
64
|
return {
|
63
|
-
props: otherProps
|
65
|
+
props: otherProps,
|
66
|
+
ref: ref
|
64
67
|
};
|
65
68
|
}, [otherProps]);
|
66
69
|
return createElement(PopoverContext.Provider, {
|
@@ -68,7 +71,7 @@ var Popover = function Popover(props) {
|
|
68
71
|
}, createElement(Root, {
|
69
72
|
children: children
|
70
73
|
}));
|
71
|
-
};
|
74
|
+
});
|
72
75
|
Popover.Trigger = Trigger;
|
73
76
|
Popover.Content = Content;
|
74
77
|
Popover.Close = Close;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Popover.js","sources":["../../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Placement } from '../..';\nimport { UnstyledArrow, UnstyledContent } from './Primitives';\n\nconst PopoverContext = React.createContext({\n props: {},\n});\n\nexport type PopoverTriggerProps = React.HTMLAttributes<HTMLButtonElement>;\nconst Trigger = React.forwardRef((props: PopoverTriggerProps, ref: React.Ref<HTMLButtonElement>) => {\n const context = React.useContext(PopoverContext);\n return <PopoverPrimitive.Trigger {...context.props} {...props} ref={ref} asChild />;\n});\nconst RenderPropWrapper = React.forwardRef(({ children, onClick }: any, ref) => {\n const close = () => {\n onClick(new CustomEvent('hide'));\n };\n\n return children({ close, ref });\n});\n\nexport type PopoverContentRenderProps = { close: () => void };\nexport type PopoverContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n children: React.ReactNode | ((props: PopoverContentRenderProps) => React.ReactNode);\n /** Set the position of the Popover relative to its trigger. Default value is `bottom` */\n placement?: Placement;\n};\nconst Content = React.forwardRef((props: PopoverContentProps, ref: React.Ref<HTMLDivElement>) => {\n const className = cn('bg-white focus:border-blue-light', props.className);\n\n let output;\n\n if (typeof props.children === 'function') {\n output = (\n <PopoverPrimitive.Close asChild>\n <RenderPropWrapper>{props.children}</RenderPropWrapper>\n </PopoverPrimitive.Close>\n );\n } else {\n output = props.children;\n }\n\n return (\n <UnstyledContent className={className} placement={props.placement} ref={ref}>\n {output}\n <UnstyledArrow className=\"text-white\" />\n </UnstyledContent>\n );\n});\n\nexport type PopoverCloseProps = React.HTMLAttributes<HTMLButtonElement>;\nconst Close = React.forwardRef(\n (props: PopoverCloseProps, ref: React.Ref<HTMLButtonElement>): JSX.Element => (\n <PopoverPrimitive.Close {...props} ref={ref} asChild />\n )\n);\n\nexport type PopoverProps = React.PropsWithChildren<{}>;\nexport const Popover = (props: PopoverProps): JSX.Element => {\n const { children, ...otherProps } = props;\n\n const context = React.useMemo(() => ({ props: otherProps }), [otherProps]);\n\n return (\n <PopoverContext.Provider value={context}>\n <PopoverPrimitive.Root children={children} />\n </PopoverContext.Provider>\n );\n};\nPopover.Trigger = Trigger;\nPopover.Content = Content;\nPopover.Close = Close;\n"],"names":["PopoverContext","React","props","
|
1
|
+
{"version":3,"file":"Popover.js","sources":["../../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Placement } from '../..';\nimport { UnstyledArrow, UnstyledContent } from './Primitives';\nimport mergeRefs from '../../utils/mergeRefs';\n\ntype PopoverContextValue = { props: any; ref: React.Ref<HTMLElement> };\n\nconst PopoverContext = React.createContext<PopoverContextValue>({\n props: {},\n ref: null,\n});\n\nexport type PopoverTriggerProps = React.HTMLAttributes<HTMLButtonElement>;\nconst Trigger = React.forwardRef((props: PopoverTriggerProps, ref: React.Ref<HTMLButtonElement>) => {\n const context = React.useContext(PopoverContext);\n return <PopoverPrimitive.Trigger {...context.props} {...props} ref={mergeRefs([context.ref, ref])} asChild />;\n});\nconst RenderPropWrapper = React.forwardRef(({ children, onClick }: any, ref) => {\n const close = () => {\n onClick(new CustomEvent('hide'));\n };\n\n return children({ close, ref });\n});\n\nexport type PopoverContentRenderProps = { close: () => void };\nexport type PopoverContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n children: React.ReactNode | ((props: PopoverContentRenderProps) => React.ReactNode);\n /** Set the position of the Popover relative to its trigger. Default value is `bottom` */\n placement?: Placement;\n};\nconst Content = React.forwardRef((props: PopoverContentProps, ref: React.Ref<HTMLDivElement>) => {\n const className = cn('bg-white focus:border-blue-light', props.className);\n\n let output;\n\n if (typeof props.children === 'function') {\n output = (\n <PopoverPrimitive.Close asChild>\n <RenderPropWrapper>{props.children}</RenderPropWrapper>\n </PopoverPrimitive.Close>\n );\n } else {\n output = props.children;\n }\n\n return (\n <UnstyledContent className={className} placement={props.placement} ref={ref}>\n {output}\n <UnstyledArrow className=\"text-white\" />\n </UnstyledContent>\n );\n});\n\nexport type PopoverCloseProps = React.HTMLAttributes<HTMLButtonElement>;\nconst Close = React.forwardRef(\n (props: PopoverCloseProps, ref: React.Ref<HTMLButtonElement>): JSX.Element => (\n <PopoverPrimitive.Close {...props} ref={ref} asChild />\n )\n);\n\nexport type PopoverProps = React.PropsWithChildren<{}>;\nexport type ForwardedPopoverWithStatics = React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLElement>> & {\n Trigger: React.ForwardRefExoticComponent<PopoverTriggerProps>;\n Content: React.ForwardRefExoticComponent<PopoverContentProps>;\n Close: React.ForwardRefExoticComponent<PopoverCloseProps>;\n};\n\nexport const Popover = React.forwardRef((props: PopoverProps, ref: React.Ref<HTMLElement>): JSX.Element => {\n const { children, ...otherProps } = props;\n\n const context = React.useMemo(() => ({ props: otherProps, ref }), [otherProps]);\n\n return (\n <PopoverContext.Provider value={context}>\n <PopoverPrimitive.Root children={children} />\n </PopoverContext.Provider>\n );\n}) as ForwardedPopoverWithStatics;\nPopover.Trigger = Trigger;\nPopover.Content = Content;\nPopover.Close = Close;\n"],"names":["PopoverContext","React","props","ref","Trigger","context","PopoverPrimitive","mergeRefs","asChild","RenderPropWrapper","children","onClick","close","CustomEvent","Content","className","cn","output","UnstyledContent","placement","UnstyledArrow","Close","Popover","otherProps","Provider","value"],"mappings":";;;;;;;;AASA,IAAMA,cAAc,gBAAGC,aAAA,CAAyC;AAC5DC,EAAAA,KAAK,EAAE,EADqD;AAE5DC,EAAAA,GAAG,EAAE;AAFuD,CAAzC,CAAvB;AAMA,IAAMC,OAAO,gBAAGH,UAAA,CAAiB,UAACC,KAAD,EAA6BC,GAA7B;AAC7B,MAAME,OAAO,GAAGJ,UAAA,CAAiBD,cAAjB,CAAhB;AACA,SAAOC,aAAA,CAACK,SAAD,oBAA8BD,OAAO,CAACH,OAAWA;AAAOC,IAAAA,GAAG,EAAEI,SAAS,CAAC,CAACF,OAAO,CAACF,GAAT,EAAcA,GAAd,CAAD;AAAsBK,IAAAA,OAAO;IAAnG,CAAP;AACH,CAHe,CAAhB;AAIA,IAAMC,iBAAiB,gBAAGR,UAAA,CAAiB,gBAA6BE,GAA7B;MAAGO,gBAAAA;MAAUC,eAAAA;;AACpD,MAAMC,KAAK,GAAG,SAARA,KAAQ;AACVD,IAAAA,OAAO,CAAC,IAAIE,WAAJ,CAAgB,MAAhB,CAAD,CAAP;AACH,GAFD;;AAIA,SAAOH,QAAQ,CAAC;AAAEE,IAAAA,KAAK,EAALA,KAAF;AAAST,IAAAA,GAAG,EAAHA;AAAT,GAAD,CAAf;AACH,CANyB,CAA1B;AAcA,IAAMW,OAAO,gBAAGb,UAAA,CAAiB,UAACC,KAAD,EAA6BC,GAA7B;AAC7B,MAAMY,SAAS,GAAGC,EAAE,CAAC,kCAAD,EAAqCd,KAAK,CAACa,SAA3C,CAApB;AAEA,MAAIE,MAAJ;;AAEA,MAAI,OAAOf,KAAK,CAACQ,QAAb,KAA0B,UAA9B,EAA0C;AACtCO,IAAAA,MAAM,GACFhB,aAAA,CAACK,OAAD;AAAwBE,MAAAA,OAAO;KAA/B,EACIP,aAAA,CAACQ,iBAAD,MAAA,EAAoBP,KAAK,CAACQ,QAA1B,CADJ,CADJ;AAKH,GAND,MAMO;AACHO,IAAAA,MAAM,GAAGf,KAAK,CAACQ,QAAf;AACH;;AAED,SACIT,aAAA,CAACiB,eAAD;AAAiBH,IAAAA,SAAS,EAAEA;AAAWI,IAAAA,SAAS,EAAEjB,KAAK,CAACiB;AAAWhB,IAAAA,GAAG,EAAEA;GAAxE,EACKc,MADL,EAEIhB,aAAA,CAACmB,aAAD;AAAeL,IAAAA,SAAS,EAAC;GAAzB,CAFJ,CADJ;AAMH,CArBe,CAAhB;AAwBA,IAAMM,KAAK,gBAAGpB,UAAA,CACV,UAACC,KAAD,EAA2BC,GAA3B;AAAA,SACIF,aAAA,CAACK,OAAD,oBAA4BJ;AAAOC,IAAAA,GAAG,EAAEA;AAAKK,IAAAA,OAAO;IAApD,CADJ;AAAA,CADU,CAAd;IAaac,OAAO,gBAAGrB,UAAA,CAAiB,UAACC,KAAD,EAAsBC,GAAtB;AACpC,MAAQO,QAAR,GAAoCR,KAApC,CAAQQ,QAAR;AAAA,MAAqBa,UAArB,iCAAoCrB,KAApC;;AAEA,MAAMG,OAAO,GAAGJ,OAAA,CAAc;AAAA,WAAO;AAAEC,MAAAA,KAAK,EAAEqB,UAAT;AAAqBpB,MAAAA,GAAG,EAAHA;AAArB,KAAP;AAAA,GAAd,EAAkD,CAACoB,UAAD,CAAlD,CAAhB;AAEA,SACItB,aAAA,CAACD,cAAc,CAACwB,QAAhB;AAAyBC,IAAAA,KAAK,EAAEpB;GAAhC,EACIJ,aAAA,CAACK,IAAD;AAAuBI,IAAAA,QAAQ,EAAEA;GAAjC,CADJ,CADJ;AAKH,CAVsB;AAWvBY,OAAO,CAAClB,OAAR,GAAkBA,OAAlB;AACAkB,OAAO,CAACR,OAAR,GAAkBA,OAAlB;AACAQ,OAAO,CAACD,KAAR,GAAgBA,KAAhB;;;;"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","sources":["../../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group';\nimport { Orientation } from '../../types';\n\nexport type RadioGroupItemValue = string | number | boolean | undefined;\n\nexport const getRadioGroupItemValueAsString = (value: RadioGroupItemValue): string =>\n value === undefined || value === null ? '' : String(value);\n\nexport const findByValue = (values: RadioGroupItemValue[], valueAsString: string): RadioGroupItemValue | undefined =>\n values.find(value => getRadioGroupItemValueAsString(value) === valueAsString);\n\nconst RadioGroupContext = React.createContext({ disabled: false, invalid: false });\n\nexport type RadioGroupItemProps<T = HTMLButtonElement> = Omit<\n React.ButtonHTMLAttributes<T>,\n 'children' | 'onSelect' | 'value'\n> & {\n /** Label for the radio group item */\n children: React.ReactNode;\n /* Whether the radio group item is disabled */\n disabled?: boolean;\n /** Value of the radio button */\n value: RadioGroupItemValue;\n};\n\nconst RadioGroupItem = React.forwardRef(function RadioGroupItem(props: RadioGroupItemProps, ref: React.Ref<HTMLButtonElement>) {\n const context = React.useContext(RadioGroupContext);\n const { children, value, ...otherProps } = props;\n\n const disabled = context.disabled || props.disabled;\n\n const className = cn('flex items-center justify-center h-4 w-4 mr-2 rounded-full bg-white border-2 ', {\n 'border-grey-dark focus:border-blue focus:yt-focus aria-checked:bg-blue aria-checked:border-blue':\n !disabled && !context.invalid,\n 'border-grey cursor-not-allowed aria-checked:bg-grey-dark aria-checked:border-grey-dark': disabled,\n 'border-red text-red focus:border-red focus:yt-focus-red aria-checked:bg-red aria-checked:border-red':\n context.invalid && !disabled,\n });\n const labelClassName = cn('flex items-center cursor-pointer', {\n 'cursor-not-allowed text-grey-dark': disabled,\n });\n\n return (\n <label className={labelClassName}>\n <RadioGroupPrimitive.Item\n {...otherProps}\n className={className}\n disabled={disabled}\n ref={ref}\n value={getRadioGroupItemValueAsString(value)}\n >\n <RadioGroupPrimitive.Indicator className=\"h-2 w-2 rounded-full bg-white\" />\n </RadioGroupPrimitive.Item>\n {children}\n </label>\n );\n});\n\ntype RadioGroupBaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\n children: React.ReactElement<RadioGroupItemProps>[];\n /* Whether the radio group is disabled */\n disabled?: boolean;\n /* Whether the radio group is in an invalid state */\n invalid?: boolean;\n /** The name of the radio group, used when submitting an HTML form */\n name?: string;\n /**\n * Orientation of the radio group\n * @defaultValue vertical\n */\n orientation?: Orientation;\n /* Whether the radio group requires user input */\n required?: boolean;\n};\n\ninterface UncontrolledRadioGroupProps extends RadioGroupBaseProps {\n /* The default value (uncontrolled) */\n defaultValue?: RadioGroupItemValue;\n onChange?: never;\n value?: never;\n}\n\ninterface ControlledRadioGroupProps extends RadioGroupBaseProps {\n defaultValue?: never;\n /** Handler called when the value changes */\n onChange: (value: RadioGroupItemValue) => void;\n /** The current value (controlled) */\n value: RadioGroupItemValue;\n}\n\nexport type RadioGroupProps = UncontrolledRadioGroupProps | ControlledRadioGroupProps;\n\nexport type
|
1
|
+
{"version":3,"file":"RadioGroup.js","sources":["../../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group';\nimport { Orientation } from '../../types';\n\nexport type RadioGroupItemValue = string | number | boolean | undefined;\n\nexport const getRadioGroupItemValueAsString = (value: RadioGroupItemValue): string =>\n value === undefined || value === null ? '' : String(value);\n\nexport const findByValue = (values: RadioGroupItemValue[], valueAsString: string): RadioGroupItemValue | undefined =>\n values.find(value => getRadioGroupItemValueAsString(value) === valueAsString);\n\nconst RadioGroupContext = React.createContext({ disabled: false, invalid: false });\n\nexport type RadioGroupItemProps<T = HTMLButtonElement> = Omit<\n React.ButtonHTMLAttributes<T>,\n 'children' | 'onSelect' | 'value'\n> & {\n /** Label for the radio group item */\n children: React.ReactNode;\n /* Whether the radio group item is disabled */\n disabled?: boolean;\n /** Value of the radio button */\n value: RadioGroupItemValue;\n};\n\nconst RadioGroupItem = React.forwardRef(function RadioGroupItem(props: RadioGroupItemProps, ref: React.Ref<HTMLButtonElement>) {\n const context = React.useContext(RadioGroupContext);\n const { children, value, ...otherProps } = props;\n\n const disabled = context.disabled || props.disabled;\n\n const className = cn('flex items-center justify-center h-4 w-4 mr-2 rounded-full bg-white border-2 ', {\n 'border-grey-dark focus:border-blue focus:yt-focus aria-checked:bg-blue aria-checked:border-blue':\n !disabled && !context.invalid,\n 'border-grey cursor-not-allowed aria-checked:bg-grey-dark aria-checked:border-grey-dark': disabled,\n 'border-red text-red focus:border-red focus:yt-focus-red aria-checked:bg-red aria-checked:border-red':\n context.invalid && !disabled,\n });\n const labelClassName = cn('flex items-center cursor-pointer', {\n 'cursor-not-allowed text-grey-dark': disabled,\n });\n\n return (\n <label className={labelClassName}>\n <RadioGroupPrimitive.Item\n {...otherProps}\n className={className}\n disabled={disabled}\n ref={ref}\n value={getRadioGroupItemValueAsString(value)}\n >\n <RadioGroupPrimitive.Indicator className=\"h-2 w-2 rounded-full bg-white\" />\n </RadioGroupPrimitive.Item>\n {children}\n </label>\n );\n});\n\ntype RadioGroupBaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\n children: React.ReactElement<RadioGroupItemProps>[];\n /* Whether the radio group is disabled */\n disabled?: boolean;\n /* Whether the radio group is in an invalid state */\n invalid?: boolean;\n /** The name of the radio group, used when submitting an HTML form */\n name?: string;\n /**\n * Orientation of the radio group\n * @defaultValue vertical\n */\n orientation?: Orientation;\n /* Whether the radio group requires user input */\n required?: boolean;\n};\n\ninterface UncontrolledRadioGroupProps extends RadioGroupBaseProps {\n /* The default value (uncontrolled) */\n defaultValue?: RadioGroupItemValue;\n onChange?: never;\n value?: never;\n}\n\ninterface ControlledRadioGroupProps extends RadioGroupBaseProps {\n defaultValue?: never;\n /** Handler called when the value changes */\n onChange: (value: RadioGroupItemValue) => void;\n /** The current value (controlled) */\n value: RadioGroupItemValue;\n}\n\nexport type RadioGroupProps = UncontrolledRadioGroupProps | ControlledRadioGroupProps;\n\nexport type ForwardedRadioGroupWithStatics = React.ForwardRefExoticComponent<\n RadioGroupProps & React.RefAttributes<HTMLDivElement>\n> & {\n /** Item component rendered in a `RadioGroup` component */\n Item: React.ForwardRefExoticComponent<RadioGroupItemProps>;\n};\n\nexport const useRadioGroup = (props: RadioGroupProps) => {\n const { children, defaultValue, disabled, invalid, onChange, orientation = 'vertical', value, ...otherProps } = props;\n\n const values = React.useMemo<RadioGroupItemValue[]>(\n () => React.Children.map(children, (child: React.ReactElement<RadioGroupItemProps>) => child.props.value) ?? [],\n [children]\n );\n\n const context = React.useMemo(() => ({ disabled: disabled ?? false, invalid: invalid ?? false }), [disabled, invalid]);\n\n let valueProps;\n\n if (defaultValue) {\n valueProps = {\n defaultValue: getRadioGroupItemValueAsString(defaultValue) || undefined,\n };\n } else {\n const handleChange = onChange ? (value: string): void => onChange(findByValue(values, value)) : undefined;\n\n valueProps = {\n onValueChange: handleChange,\n value: getRadioGroupItemValueAsString(value) || undefined,\n };\n }\n\n return {\n context,\n props: {\n ...otherProps,\n ...valueProps,\n children,\n orientation,\n },\n };\n};\n\nexport const RadioGroup = React.forwardRef(function RadioGroup(props: RadioGroupProps, ref: React.Ref<HTMLDivElement>) {\n const { context, props: otherProps } = useRadioGroup(props);\n const className = cn(\n 'flex items-start',\n {\n 'flex-wrap space-x-4': props.orientation === 'horizontal',\n 'flex-col space-y-2': props.orientation === 'vertical',\n },\n props.className\n );\n\n return (\n <RadioGroupContext.Provider value={context}>\n <RadioGroupPrimitive.Root {...otherProps} className={className} data-taco=\"radio-group\" ref={ref} />\n </RadioGroupContext.Provider>\n );\n}) as ForwardedRadioGroupWithStatics;\nRadioGroup.Item = RadioGroupItem;\n"],"names":["getRadioGroupItemValueAsString","value","undefined","String","findByValue","values","valueAsString","find","RadioGroupContext","React","disabled","invalid","RadioGroupItem","props","ref","context","children","otherProps","className","cn","labelClassName","RadioGroupPrimitive","useRadioGroup","defaultValue","onChange","orientation","map","child","valueProps","handleChange","onValueChange","RadioGroup","Provider","Item"],"mappings":"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"}
|
@@ -3,15 +3,20 @@ import { forwardRef, createElement } from 'react';
|
|
3
3
|
import '../Icon/components/index.js';
|
4
4
|
import '../Icon/Icon.js';
|
5
5
|
import '../Accordion/Accordion.js';
|
6
|
+
import '../Backdrop/Backdrop.js';
|
6
7
|
import '../VisuallyHidden/VisuallyHidden.js';
|
7
8
|
import '../Badge/Badge.js';
|
8
9
|
import '../Tooltip/Tooltip.js';
|
9
|
-
import { IconButton } from '../IconButton/IconButton.js';
|
10
|
-
import '../Banner/Banner.js';
|
11
|
-
import '../Button/Button.js';
|
12
10
|
import '../Spinner/Spinner.js';
|
13
11
|
import '../Toast/Toaster.js';
|
14
12
|
import { useLocalization } from '../Provider/Provider.js';
|
13
|
+
import '../Hanger/Hanger.js';
|
14
|
+
import '../Group/Group.js';
|
15
|
+
import '../Dialog/Dialog.js';
|
16
|
+
import '../Popover/Popover.js';
|
17
|
+
import { IconButton } from '../IconButton/IconButton.js';
|
18
|
+
import '../Banner/Banner.js';
|
19
|
+
import '../Button/Button.js';
|
15
20
|
import '../Calendar/Calendar.js';
|
16
21
|
import '../Checkbox/Checkbox.js';
|
17
22
|
import { Input } from '../Input/Input.js';
|
@@ -20,12 +25,8 @@ import '../../utils/hooks/useListKeyboardNavigation.js';
|
|
20
25
|
import '../../utils/hooks/useListScrollTo.js';
|
21
26
|
import '../Combobox/Combobox.js';
|
22
27
|
import '../../utils/date.js';
|
23
|
-
import '../Popover/Popover.js';
|
24
28
|
import '../Datepicker/Datepicker.js';
|
25
|
-
import '../Group/Group.js';
|
26
|
-
import '../Dialog/Dialog.js';
|
27
29
|
import '../Form/Form.js';
|
28
|
-
import '../Hanger/Hanger.js';
|
29
30
|
import '../Label/Label.js';
|
30
31
|
import '../Listbox/Listbox.js';
|
31
32
|
import '../RadioGroup/RadioGroup.js';
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SearchInput.js","sources":["../../../../../src/components/SearchInput/SearchInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport keycode from 'keycode';\nimport { Input, InputProps, useLocalization, IconButton } from '../..';\n\nexport type SearchInputTexts = {\n /**\n * aria-label text for input\n */\n inputLabel: string;\n};\n\nexport type SearchInputProps = Omit<InputProps, 'icon'> & {\n /** Current input value will be passed to the method. In order to get the value, the component must be controlled otherwise value will always be undefined */\n onSearch?: (value: string | number | readonly string[] | undefined) => void;\n};\n\nexport const SearchInput = React.forwardRef(function SearchInput(\n { onSearch, ...props }: SearchInputProps,\n ref: React.Ref<HTMLInputElement>\n) {\n const { texts } = useLocalization();\n\n const handleClick = (): void => {\n if (!props.disabled) {\n onSearch?.(props.value);\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n const isEnterKeyPressed = event.keyCode === keycode('enter');\n\n if (isEnterKeyPressed) {\n handleClick();\n }\n };\n\n return (\n <Input\n aria-label={texts.searchInput.inputLabel}\n {...props}\n button={\n <IconButton\n icon=\"search\"\n className=\"!bg-transparent !border-transparent\"\n disabled={props.disabled}\n onClick={handleClick}\n />\n }\n onKeyDown={handleKeyDown}\n ref={ref}\n />\n );\n});\n"],"names":["SearchInput","React","ref","onSearch","props","useLocalization","texts","handleClick","disabled","value","handleKeyDown","event","isEnterKeyPressed","keyCode","keycode","Input","searchInput","inputLabel","button","IconButton","icon","className","onClick","onKeyDown"],"mappings":"
|
1
|
+
{"version":3,"file":"SearchInput.js","sources":["../../../../../src/components/SearchInput/SearchInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport keycode from 'keycode';\nimport { Input, InputProps, useLocalization, IconButton } from '../..';\n\nexport type SearchInputTexts = {\n /**\n * aria-label text for input\n */\n inputLabel: string;\n};\n\nexport type SearchInputProps = Omit<InputProps, 'icon'> & {\n /** Current input value will be passed to the method. In order to get the value, the component must be controlled otherwise value will always be undefined */\n onSearch?: (value: string | number | readonly string[] | undefined) => void;\n};\n\nexport const SearchInput = React.forwardRef(function SearchInput(\n { onSearch, ...props }: SearchInputProps,\n ref: React.Ref<HTMLInputElement>\n) {\n const { texts } = useLocalization();\n\n const handleClick = (): void => {\n if (!props.disabled) {\n onSearch?.(props.value);\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n const isEnterKeyPressed = event.keyCode === keycode('enter');\n\n if (isEnterKeyPressed) {\n handleClick();\n }\n };\n\n return (\n <Input\n aria-label={texts.searchInput.inputLabel}\n {...props}\n button={\n <IconButton\n icon=\"search\"\n className=\"!bg-transparent !border-transparent\"\n disabled={props.disabled}\n onClick={handleClick}\n />\n }\n onKeyDown={handleKeyDown}\n ref={ref}\n />\n );\n});\n"],"names":["SearchInput","React","ref","onSearch","props","useLocalization","texts","handleClick","disabled","value","handleKeyDown","event","isEnterKeyPressed","keyCode","keycode","Input","searchInput","inputLabel","button","IconButton","icon","className","onClick","onKeyDown"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgBaA,WAAW,gBAAGC,UAAA,CAAiB,SAASD,WAAT,OAExCE,GAFwC;MACtCC,gBAAAA;MAAaC;;AAGf,yBAAkBC,eAAe,EAAjC;AAAA,MAAQC,KAAR,oBAAQA,KAAR;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc;AAChB,QAAI,CAACH,KAAK,CAACI,QAAX,EAAqB;AACjBL,MAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGC,KAAK,CAACK,KAAT,CAAR;AACH;AACJ,GAJD;;AAMA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD;AAClB,QAAMC,iBAAiB,GAAGD,KAAK,CAACE,OAAN,KAAkBC,OAAO,CAAC,OAAD,CAAnD;;AAEA,QAAIF,iBAAJ,EAAuB;AACnBL,MAAAA,WAAW;AACd;AACJ,GAND;;AAQA,SACIN,aAAA,CAACc,KAAD;kBACgBT,KAAK,CAACU,WAAN,CAAkBC;KAC1Bb;AACJc,IAAAA,MAAM,EACFjB,aAAA,CAACkB,UAAD;AACIC,MAAAA,IAAI,EAAC;AACLC,MAAAA,SAAS,EAAC;AACVb,MAAAA,QAAQ,EAAEJ,KAAK,CAACI;AAChBc,MAAAA,OAAO,EAAEf;KAJb;AAOJgB,IAAAA,SAAS,EAAEb;AACXR,IAAAA,GAAG,EAAEA;IAZT,CADJ;AAgBH,CApC0B;;;;"}
|
@@ -71,8 +71,9 @@ var BaseSelect = /*#__PURE__*/forwardRef(function BaseSelect(props, ref) {
|
|
71
71
|
}), props.multiselect ? renderMultiSelection() : createElement("span", {
|
72
72
|
className: "flex-grow"
|
73
73
|
}, text), createElement("span", {
|
74
|
-
className: "h-8 w-8
|
74
|
+
className: "flex h-8 w-8 items-center justify-center"
|
75
75
|
}, createElement(Icon, {
|
76
|
+
className: "group-hover:text-grey-darkest text-black",
|
76
77
|
name: popover.visible ? 'chevron-up' : 'chevron-down'
|
77
78
|
})));
|
78
79
|
}), !otherProps.disabled && createElement(Popover, Object.assign({}, base, container), props.multiselect ? createElement(MultiListbox, Object.assign({}, commonListboxProps)) : createElement(Listbox, Object.assign({}, commonListboxProps))));
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Select.js","sources":["../../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Popover as BasePopover, PopoverDisclosure } from 'reakit/Popover';\n\nimport { Icon } from '../Icon/Icon';\nimport { Listbox, MultiListbox, ListboxProps } from '../Listbox/Listbox';\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\nimport { useSelect } from './useSelect';\nimport { Combobox, ComboboxProps } from '../Combobox/Combobox';\nimport './Select.css';\nimport { Badge } from '../Badge/Badge';\nimport { getInputClasses } from '../Input/util';\n\nexport type SelectTexts = {\n /**\n * The text displayed when all options are selected when multiselect mode in on.\n */\n allOptionsSelected: string;\n};\n\nexport type BaseSelectProps = ListboxProps &\n Omit<ComboboxProps, 'inline'> & {\n /**\n * Allows to select multiple values.\n * All the selected values will be combined in a comma-seperated string as the value of the input.\n */\n multiselect?: boolean;\n };\n\nexport type SelectProps = BaseSelectProps & {\n /**\n * Creates an editable select.\n * Setting this will render a inline Combobox which will display the provided data on click/focus,\n * even if there is no value in the input.\n * After user starts typing, matching data will be displayed.\n */\n editable?: boolean;\n};\n\nconst BaseSelect = React.forwardRef(function BaseSelect(props: BaseSelectProps, ref: React.Ref<HTMLInputElement>) {\n const { autoFocus, className: externalClassName, highlighted, style, ...otherProps } = props;\n const { button, listbox, popover, text, more = 0 } = useSelect(otherProps, ref);\n const { container, ...base } = popover;\n const internalRef = React.useRef<HTMLButtonElement>(null);\n const selectDimensions = useBoundingClientRectListener(internalRef);\n const className = cn('inline-flex relative w-full', { 'yt-select--readonly': props.readOnly }, externalClassName);\n const inputClassname = cn(getInputClasses(props), 'text-left pr-0');\n\n React.useEffect(() => {\n if (autoFocus && internalRef.current) {\n internalRef.current.focus();\n }\n }, []);\n\n const renderMultiSelection = (): React.ReactNode => {\n return (\n <>\n <span>{text}</span>\n {more > 0 && <Badge className=\"ml-2\">{`+${more}`}</Badge>}\n </>\n );\n };\n\n const commonListboxProps = {\n ...listbox,\n className: 'w-auto',\n style: { minWidth: selectDimensions?.width },\n tabIndex: popover.visible ? 0 : -1,\n };\n\n return (\n <span className={className} data-taco=\"select\" style={style}>\n <PopoverDisclosure {...base} ref={internalRef}>\n {({ ref: disclosureRef }) => (\n <button ref={disclosureRef} {...button} className={inputClassname}>\n {props.multiselect ? renderMultiSelection() : <span className=\"flex-grow\">{text}</span>}\n <span className=\"h-8 w-8
|
1
|
+
{"version":3,"file":"Select.js","sources":["../../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Popover as BasePopover, PopoverDisclosure } from 'reakit/Popover';\n\nimport { Icon } from '../Icon/Icon';\nimport { Listbox, MultiListbox, ListboxProps } from '../Listbox/Listbox';\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\nimport { useSelect } from './useSelect';\nimport { Combobox, ComboboxProps } from '../Combobox/Combobox';\nimport './Select.css';\nimport { Badge } from '../Badge/Badge';\nimport { getInputClasses } from '../Input/util';\n\nexport type SelectTexts = {\n /**\n * The text displayed when all options are selected when multiselect mode in on.\n */\n allOptionsSelected: string;\n};\n\nexport type BaseSelectProps = ListboxProps &\n Omit<ComboboxProps, 'inline'> & {\n /**\n * Allows to select multiple values.\n * All the selected values will be combined in a comma-seperated string as the value of the input.\n */\n multiselect?: boolean;\n /** Optionally shows the icon for the selected option */\n showSelectedIcon?: boolean;\n };\n\nexport type SelectProps = BaseSelectProps & {\n /**\n * Creates an editable select.\n * Setting this will render a inline Combobox which will display the provided data on click/focus,\n * even if there is no value in the input.\n * After user starts typing, matching data will be displayed.\n */\n editable?: boolean;\n};\n\nconst BaseSelect = React.forwardRef(function BaseSelect(props: BaseSelectProps, ref: React.Ref<HTMLInputElement>) {\n const { autoFocus, className: externalClassName, highlighted, style, ...otherProps } = props;\n const { button, listbox, popover, text, more = 0 } = useSelect(otherProps, ref);\n const { container, ...base } = popover;\n const internalRef = React.useRef<HTMLButtonElement>(null);\n const selectDimensions = useBoundingClientRectListener(internalRef);\n const className = cn('inline-flex relative w-full', { 'yt-select--readonly': props.readOnly }, externalClassName);\n const inputClassname = cn(getInputClasses(props), 'text-left pr-0');\n\n React.useEffect(() => {\n if (autoFocus && internalRef.current) {\n internalRef.current.focus();\n }\n }, []);\n\n const renderMultiSelection = (): React.ReactNode => {\n return (\n <>\n <span>{text}</span>\n {more > 0 && <Badge className=\"ml-2\">{`+${more}`}</Badge>}\n </>\n );\n };\n\n const commonListboxProps = {\n ...listbox,\n className: 'w-auto',\n style: { minWidth: selectDimensions?.width },\n tabIndex: popover.visible ? 0 : -1,\n };\n\n return (\n <span className={className} data-taco=\"select\" style={style}>\n <PopoverDisclosure {...base} ref={internalRef}>\n {({ ref: disclosureRef }) => (\n <button ref={disclosureRef} {...button} className={inputClassname}>\n {props.multiselect ? renderMultiSelection() : <span className=\"flex-grow\">{text}</span>}\n <span className=\"flex h-8 w-8 items-center justify-center\">\n <Icon\n className=\"group-hover:text-grey-darkest text-black\"\n name={popover.visible ? 'chevron-up' : 'chevron-down'}\n />\n </span>\n </button>\n )}\n </PopoverDisclosure>\n {!otherProps.disabled && (\n <BasePopover {...base} {...container}>\n {props.multiselect ? <MultiListbox {...commonListboxProps} /> : <Listbox {...commonListboxProps} />}\n </BasePopover>\n )}\n </span>\n );\n});\n\nexport const Select = React.forwardRef(function Select(props: SelectProps, ref: React.Ref<HTMLInputElement>) {\n const { editable, ...otherProps } = props;\n\n if (editable) {\n return <Combobox {...otherProps} inline ref={ref} />;\n }\n\n return <BaseSelect {...otherProps} ref={ref} />;\n});\n"],"names":["BaseSelect","React","props","ref","autoFocus","externalClassName","className","style","otherProps","useSelect","button","listbox","popover","text","more","container","base","internalRef","selectDimensions","useBoundingClientRectListener","cn","readOnly","inputClassname","getInputClasses","current","focus","renderMultiSelection","Badge","commonListboxProps","minWidth","width","tabIndex","visible","PopoverDisclosure","disclosureRef","multiselect","Icon","name","disabled","BasePopover","MultiListbox","Listbox","Select","editable","Combobox","inline"],"mappings":"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"}
|
@@ -1,13 +1,14 @@
|
|
1
1
|
import { extends as _extends, objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../_virtual/_rollupPluginBabelHelpers.js';
|
2
|
-
import { useMemo, useState, useEffect } from 'react';
|
2
|
+
import { useMemo, useState, useEffect, createElement, Fragment, cloneElement } from 'react';
|
3
|
+
import cn from 'classnames';
|
3
4
|
import { v4 } from 'uuid';
|
4
5
|
import { useLocalization } from '../Provider/Provider.js';
|
5
|
-
import { usePopoverState } from 'reakit/Popover';
|
6
6
|
import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
|
7
|
+
import { usePopoverState } from 'reakit/Popover';
|
7
8
|
import keycode from 'keycode';
|
8
9
|
import { useFlattenedData, findByValue, setInputValueByRef } from '../Listbox/util.js';
|
9
10
|
|
10
|
-
var _excluded = ["aria-label", "aria-labelledby", "data", "disabled", "emptyValue", "id", "multiselect", "onClick", "readOnly", "value"];
|
11
|
+
var _excluded = ["aria-label", "aria-labelledby", "data", "disabled", "emptyValue", "id", "multiselect", "onClick", "readOnly", "showSelectedIcon", "value"];
|
11
12
|
var useSelect = function useSelect(_ref, ref) {
|
12
13
|
var ariaLabel = _ref['aria-label'],
|
13
14
|
ariaLabelledBy = _ref['aria-labelledby'],
|
@@ -19,6 +20,8 @@ var useSelect = function useSelect(_ref, ref) {
|
|
19
20
|
multiselect = _ref.multiselect,
|
20
21
|
onClick = _ref.onClick,
|
21
22
|
readOnly = _ref.readOnly,
|
23
|
+
_ref$showSelectedIcon = _ref.showSelectedIcon,
|
24
|
+
showSelectedIcon = _ref$showSelectedIcon === void 0 ? false : _ref$showSelectedIcon,
|
22
25
|
_ref$value = _ref.value,
|
23
26
|
value = _ref$value === void 0 ? emptyValue : _ref$value,
|
24
27
|
otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
|
@@ -118,9 +121,13 @@ var useSelect = function useSelect(_ref, ref) {
|
|
118
121
|
more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;
|
119
122
|
}
|
120
123
|
} else {
|
121
|
-
var
|
124
|
+
var item = findByValue(searchData, value);
|
122
125
|
|
123
|
-
|
126
|
+
if (item) {
|
127
|
+
text = showSelectedIcon && item.icon ? createElement(Fragment, null, cloneElement(item.icon, {
|
128
|
+
className: cn(item.icon.props.className, 'mr-1')
|
129
|
+
}), item.text) : item.text;
|
130
|
+
}
|
124
131
|
}
|
125
132
|
}
|
126
133
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useSelect.js","sources":["../../../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport keycode from 'keycode';\nimport { v4 as uuid } from 'uuid';\nimport { useLocalization } from '../Provider/Provider';\nimport { SelectProps } from './Select';\nimport { ListboxProps } from '../Listbox/Listbox';\nimport { usePopoverState, PopoverStateReturn, PopoverHTMLProps } from 'reakit/Popover';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { setInputValueByRef, findByValue, useFlattenedData } from '../Listbox/util';\nimport { ScrollableListItemValue } from '../Listbox/ScrollableList';\n\ntype useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {\n button: React.ButtonHTMLAttributes<HTMLButtonElement>;\n listbox: ListboxProps;\n popover: PopoverStateReturn & { container: PopoverHTMLProps };\n text: string | JSX.Element;\n more?: number;\n};\n\nexport const useSelect = (\n {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data = [],\n disabled,\n emptyValue,\n id: nativeId,\n multiselect,\n onClick,\n readOnly,\n value = emptyValue,\n ...otherProps\n }: SelectProps,\n ref: React.Ref<HTMLInputElement>\n): useSelect => {\n const { texts } = useLocalization();\n const searchData = useFlattenedData(data);\n const inputRef = useProxiedRef<HTMLInputElement>(ref);\n const popover = usePopoverState({ gutter: 4, placement: 'bottom-start' });\n const id = React.useMemo(() => nativeId || `select_${uuid()}`, [nativeId]);\n const buttonId = `${id}-button`;\n // support 'escape' resetting to the value that was set when the listbox opened\n const [lastValue, setLastValue] = React.useState<ScrollableListItemValue | undefined>(value);\n\n React.useEffect(() => {\n setLastValue(value);\n }, [popover.visible]);\n\n // event handlers\n const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>): void => {\n popover.toggle();\n\n if (onClick) {\n event.persist();\n onClick(event);\n }\n };\n\n const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {\n event.preventDefault();\n popover.toggle();\n }\n };\n\n const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n switch (event.keyCode) {\n case keycode('escape'): {\n event.preventDefault();\n if (lastValue !== undefined) {\n setInputValueByRef(inputRef.current, lastValue);\n }\n\n popover.hide();\n break;\n }\n\n case keycode('tab'):\n case keycode('enter'): {\n if (event.keyCode !== keycode('tab')) {\n event.preventDefault();\n }\n popover.hide();\n break;\n }\n\n default:\n }\n\n if (otherProps.onKeyDown) {\n otherProps.onKeyDown(event);\n }\n };\n\n const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n event.preventDefault();\n if (!multiselect) {\n popover.hide();\n }\n };\n\n let text: string | JSX.Element = '';\n let more = 0;\n\n if (value !== undefined) {\n if (multiselect) {\n const selectedValues = value?.toString().split(',') || [];\n\n if (selectedValues.length === searchData.filter(item => !item.disabled).length) {\n text = texts.select.allOptionsSelected;\n } else {\n text = findByValue(searchData, selectedValues[0])?.text ?? '';\n more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n }\n } else {\n text = findByValue(searchData, value)?.text || '';\n }\n }\n\n const button: React.ButtonHTMLAttributes<HTMLButtonElement> = {\n 'aria-expanded': popover.visible,\n 'aria-haspopup': 'listbox' as const,\n 'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n 'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n disabled,\n id: buttonId,\n onClick: !disabled && !readOnly ? handleButtonClick : undefined,\n onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n type: 'button',\n };\n\n const listbox = {\n ...otherProps,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data,\n disabled,\n emptyValue,\n onClick: handleListboxClick,\n onKeyDown: handleListboxKeyDown,\n ref: inputRef,\n value,\n multiselect,\n };\n\n return {\n button,\n listbox,\n popover: {\n ...popover,\n container: {\n tabIndex: -1,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n },\n },\n text,\n more,\n };\n};\n"],"names":["useSelect","ref","ariaLabel","ariaLabelledBy","data","disabled","emptyValue","nativeId","id","multiselect","onClick","readOnly","value","otherProps","useLocalization","texts","searchData","useFlattenedData","inputRef","useProxiedRef","popover","usePopoverState","gutter","placement","React","uuid","buttonId","lastValue","setLastValue","visible","handleButtonClick","event","toggle","persist","handleButtonKeyDown","keyCode","keycode","preventDefault","handleListboxKeyDown","undefined","setInputValueByRef","current","hide","onKeyDown","handleListboxClick","text","more","selectedValues","toString","split","length","filter","item","select","allOptionsSelected","findByValue","button","type","listbox","container","tabIndex"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"useSelect.js","sources":["../../../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport keycode from 'keycode';\nimport cn from 'classnames';\nimport { v4 as uuid } from 'uuid';\nimport { useLocalization } from '../Provider/Provider';\nimport { SelectProps } from './Select';\nimport { ListboxProps } from '../Listbox/Listbox';\nimport { usePopoverState, PopoverStateReturn, PopoverHTMLProps } from 'reakit/Popover';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { setInputValueByRef, findByValue, useFlattenedData } from '../Listbox/util';\nimport { ScrollableListItemValue } from '../Listbox/ScrollableList';\n\ntype useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {\n button: React.ButtonHTMLAttributes<HTMLButtonElement>;\n listbox: ListboxProps;\n popover: PopoverStateReturn & { container: PopoverHTMLProps };\n text: string | JSX.Element;\n more?: number;\n};\n\nexport const useSelect = (\n {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data = [],\n disabled,\n emptyValue,\n id: nativeId,\n multiselect,\n onClick,\n readOnly,\n showSelectedIcon = false,\n value = emptyValue,\n ...otherProps\n }: SelectProps,\n ref: React.Ref<HTMLInputElement>\n): useSelect => {\n const { texts } = useLocalization();\n const searchData = useFlattenedData(data);\n const inputRef = useProxiedRef<HTMLInputElement>(ref);\n const popover = usePopoverState({ gutter: 4, placement: 'bottom-start' });\n const id = React.useMemo(() => nativeId || `select_${uuid()}`, [nativeId]);\n const buttonId = `${id}-button`;\n // support 'escape' resetting to the value that was set when the listbox opened\n const [lastValue, setLastValue] = React.useState<ScrollableListItemValue | undefined>(value);\n\n React.useEffect(() => {\n setLastValue(value);\n }, [popover.visible]);\n\n // event handlers\n const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>): void => {\n popover.toggle();\n\n if (onClick) {\n event.persist();\n onClick(event);\n }\n };\n\n const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {\n event.preventDefault();\n popover.toggle();\n }\n };\n\n const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n switch (event.keyCode) {\n case keycode('escape'): {\n event.preventDefault();\n if (lastValue !== undefined) {\n setInputValueByRef(inputRef.current, lastValue);\n }\n\n popover.hide();\n break;\n }\n\n case keycode('tab'):\n case keycode('enter'): {\n if (event.keyCode !== keycode('tab')) {\n event.preventDefault();\n }\n popover.hide();\n break;\n }\n\n default:\n }\n\n if (otherProps.onKeyDown) {\n otherProps.onKeyDown(event);\n }\n };\n\n const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n event.preventDefault();\n if (!multiselect) {\n popover.hide();\n }\n };\n\n let text: string | JSX.Element = '';\n let more = 0;\n\n if (value !== undefined) {\n if (multiselect) {\n const selectedValues = value?.toString().split(',') || [];\n\n if (selectedValues.length === searchData.filter(item => !item.disabled).length) {\n text = texts.select.allOptionsSelected;\n } else {\n text = findByValue(searchData, selectedValues[0])?.text ?? '';\n more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n }\n } else {\n const item = findByValue(searchData, value);\n\n if (item) {\n text =\n showSelectedIcon && item.icon ? (\n <>\n {React.cloneElement(item.icon, {\n className: cn(item.icon.props.className, 'mr-1'),\n })}\n {item.text}\n </>\n ) : (\n item.text\n );\n }\n }\n }\n\n const button: React.ButtonHTMLAttributes<HTMLButtonElement> = {\n 'aria-expanded': popover.visible,\n 'aria-haspopup': 'listbox' as const,\n 'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n 'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n disabled,\n id: buttonId,\n onClick: !disabled && !readOnly ? handleButtonClick : undefined,\n onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n type: 'button',\n };\n\n const listbox = {\n ...otherProps,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data,\n disabled,\n emptyValue,\n onClick: handleListboxClick,\n onKeyDown: handleListboxKeyDown,\n ref: inputRef,\n value,\n multiselect,\n };\n\n return {\n button,\n listbox,\n popover: {\n ...popover,\n container: {\n tabIndex: -1,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n },\n },\n text,\n more,\n };\n};\n"],"names":["useSelect","ref","ariaLabel","ariaLabelledBy","data","disabled","emptyValue","nativeId","id","multiselect","onClick","readOnly","showSelectedIcon","value","otherProps","useLocalization","texts","searchData","useFlattenedData","inputRef","useProxiedRef","popover","usePopoverState","gutter","placement","React","uuid","buttonId","lastValue","setLastValue","visible","handleButtonClick","event","toggle","persist","handleButtonKeyDown","keyCode","keycode","preventDefault","handleListboxKeyDown","undefined","setInputValueByRef","current","hide","onKeyDown","handleListboxClick","text","more","selectedValues","toString","split","length","filter","item","select","allOptionsSelected","findByValue","icon","className","cn","props","button","type","listbox","container","tabIndex"],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"PaginatedTable.js","sources":["../../../../../../src/components/Table/components/PaginatedTable.tsx"],"sourcesContent":["import React from 'react';\nimport {
|
1
|
+
{"version":3,"file":"PaginatedTable.js","sources":["../../../../../../src/components/Table/components/PaginatedTable.tsx"],"sourcesContent":["import React from 'react';\nimport { ForwardedGenericTableWithStatics, TableProps, TableRef } from '../types';\nimport { Table } from './Table';\n\nexport const PaginatedTable = React.forwardRef(function PaginatedTable<T>(props: TableProps<T>, ref: React.Ref<TableRef>) {\n return <Table {...props} disablePagination={false} ref={ref} />;\n}) as ForwardedGenericTableWithStatics;\n\nPaginatedTable.Column = () => null;\nPaginatedTable.Group = () => null;\n"],"names":["PaginatedTable","React","forwardRef","props","ref","Table","disablePagination","Column","Group"],"mappings":";;;IAIaA,cAAc,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,cAAT,CAA2BG,KAA3B,EAAiDC,GAAjD;AAC3C,SAAOH,4BAAA,CAACI,KAAD,oBAAWF;AAAOG,IAAAA,iBAAiB,EAAE;AAAOF,IAAAA,GAAG,EAAEA;IAAjD,CAAP;AACH,CAF6B;;AAI9BJ,cAAc,CAACO,MAAf,GAAwB;AAAA,SAAM,IAAN;AAAA,CAAxB;;AACAP,cAAc,CAACQ,KAAf,GAAuB;AAAA,SAAM,IAAN;AAAA,CAAvB;;;;"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Table.js","sources":["../../../../../../src/components/Table/components/Table.tsx"],"sourcesContent":["import React from 'react';\nimport { PluginHook } from 'react-table';\nimport { TableProps, InternalTableRow,
|
1
|
+
{"version":3,"file":"Table.js","sources":["../../../../../../src/components/Table/components/Table.tsx"],"sourcesContent":["import React from 'react';\nimport { PluginHook } from 'react-table';\nimport { TableProps, InternalTableRow, ForwardedGenericTableWithStatics, TableRef } from '../types';\nimport { useTable } from '../hooks/useTable';\nimport { Pagination } from '../../Pagination/Pagination';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { Row } from '../util/renderRow';\nimport { DefaultEmptyState, BaseTable } from './BaseTable';\n\nexport const Table = React.forwardRef(function Table<T>(\n props: TableProps<T> & { plugins: PluginHook<{}>[] },\n ref: React.Ref<TableRef>\n) {\n const { emptyStateRenderer = DefaultEmptyState, ...otherProps } = props;\n const tableRef: any = useProxiedRef<HTMLDivElement>(ref);\n const { rowProps, tableProps, rows, prepareRow, pagination, instance } = useTable(otherProps, tableRef);\n\n let paginationElement;\n\n if (pagination) {\n paginationElement = (\n <Pagination\n className=\"my-4 w-full\"\n length={pagination.length}\n pageIndex={pagination.pageIndex}\n pageSize={pagination.pageSize}\n setPageIndex={pagination.setPageIndex}\n setPageSize={pagination.setPageSize}\n showPageControls={pagination.length > pagination.pageSize}\n dangerouslyHijackGlobalKeyboardNavigation={props.dangerouslyHijackGlobalKeyboardNavigation}\n />\n );\n }\n\n return (\n <>\n {paginationElement}\n <BaseTable {...tableProps} ref={tableRef} tabIndex={0}>\n {rows.length\n ? rows.map((row: InternalTableRow, index: number) => {\n prepareRow(row, index);\n return (\n <Row\n {...rowProps}\n key={index}\n index={index}\n row={row}\n instance={instance}\n headerGroups={tableProps.headerGroups}\n />\n );\n })\n : emptyStateRenderer()}\n </BaseTable>\n {paginationElement}\n </>\n );\n}) as ForwardedGenericTableWithStatics;\n\nTable.Column = () => null;\nTable.Group = () => null;\n"],"names":["Table","React","forwardRef","props","ref","emptyStateRenderer","DefaultEmptyState","otherProps","tableRef","useProxiedRef","useTable","rowProps","tableProps","rows","prepareRow","pagination","instance","paginationElement","Pagination","className","length","pageIndex","pageSize","setPageIndex","setPageSize","showPageControls","dangerouslyHijackGlobalKeyboardNavigation","BaseTable","tabIndex","map","row","index","Row","key","headerGroups","Column","Group"],"mappings":";;;;;;;;;IASaA,KAAK,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,KAAT,CAClCG,KADkC,EAElCC,GAFkC;AAIlC,8BAAkED,KAAlE,CAAQE,kBAAR;AAAA,MAAQA,kBAAR,sCAA6BC,iBAA7B;AAAA,MAAmDC,UAAnD,iCAAkEJ,KAAlE;;AACA,MAAMK,QAAQ,GAAQC,aAAa,CAAiBL,GAAjB,CAAnC;;AACA,kBAAyEM,QAAQ,CAACH,UAAD,EAAaC,QAAb,CAAjF;AAAA,MAAQG,QAAR,aAAQA,QAAR;AAAA,MAAkBC,UAAlB,aAAkBA,UAAlB;AAAA,MAA8BC,IAA9B,aAA8BA,IAA9B;AAAA,MAAoCC,UAApC,aAAoCA,UAApC;AAAA,MAAgDC,UAAhD,aAAgDA,UAAhD;AAAA,MAA4DC,QAA5D,aAA4DA,QAA5D;;AAEA,MAAIC,iBAAJ;;AAEA,MAAIF,UAAJ,EAAgB;AACZE,IAAAA,iBAAiB,GACbhB,4BAAA,CAACiB,UAAD;AACIC,MAAAA,SAAS,EAAC;AACVC,MAAAA,MAAM,EAAEL,UAAU,CAACK;AACnBC,MAAAA,SAAS,EAAEN,UAAU,CAACM;AACtBC,MAAAA,QAAQ,EAAEP,UAAU,CAACO;AACrBC,MAAAA,YAAY,EAAER,UAAU,CAACQ;AACzBC,MAAAA,WAAW,EAAET,UAAU,CAACS;AACxBC,MAAAA,gBAAgB,EAAEV,UAAU,CAACK,MAAX,GAAoBL,UAAU,CAACO;AACjDI,MAAAA,yCAAyC,EAAEvB,KAAK,CAACuB;KARrD,CADJ;AAYH;;AAED,SACIzB,4BAAA,wBAAA,MAAA,EACKgB,iBADL,EAEIhB,4BAAA,CAAC0B,SAAD,oBAAef;AAAYR,IAAAA,GAAG,EAAEI;AAAUoB,IAAAA,QAAQ,EAAE;IAApD,EACKf,IAAI,CAACO,MAAL,GACKP,IAAI,CAACgB,GAAL,CAAS,UAACC,GAAD,EAAwBC,KAAxB;AACLjB,IAAAA,UAAU,CAACgB,GAAD,EAAMC,KAAN,CAAV;AACA,WACI9B,4BAAA,CAAC+B,GAAD,oBACQrB;AACJsB,MAAAA,GAAG,EAAEF;AACLA,MAAAA,KAAK,EAAEA;AACPD,MAAAA,GAAG,EAAEA;AACLd,MAAAA,QAAQ,EAAEA;AACVkB,MAAAA,YAAY,EAAEtB,UAAU,CAACsB;MAN7B,CADJ;AAUH,GAZD,CADL,GAcK7B,kBAAkB,EAf5B,CAFJ,EAmBKY,iBAnBL,CADJ;AAuBH,CAhDoB;;AAkDrBjB,KAAK,CAACmC,MAAN,GAAe;AAAA,SAAM,IAAN;AAAA,CAAf;;AACAnC,KAAK,CAACoC,KAAN,GAAc;AAAA,SAAM,IAAN;AAAA,CAAd;;;;"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"WindowedTable.js","sources":["../../../../../../src/components/Table/components/WindowedTable.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { PluginHook } from 'react-table';\nimport { areEqual, VariableSizeList } from 'react-window';\nimport InfiniteLoader from 'react-window-infinite-loader';\nimport { TableProps, FowardedGenericTableWithStatics, TableRef } from '../types';\nimport { useTable } from '../hooks/useTable';\nimport { useBoundingClientRectListener } from '../../../utils/hooks/useBoundingClientRectListener';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { Row } from '../util/renderRow';\nimport { DefaultEmptyState, BaseTable } from './BaseTable';\nimport { useLocalization } from '../../Provider/Provider';\n\nconst ROW_HEIGHT = 40;\n\nconst VariableRow = React.memo(({ data, index, style: { height: _, ...style } }: any) => {\n const { texts } = useLocalization();\n const { rows, setRowHeight, rowProps, tableProps, instance, prepareRow, rowHeights } = data;\n const row = rows[index];\n const ref = React.useRef<HTMLDivElement>(null);\n\n React.useEffect(() => {\n if (ref?.current) {\n setRowHeight(index, ref.current.getBoundingClientRect().height);\n }\n }, [rowHeights[index]]);\n\n if (row) {\n prepareRow(row, index);\n\n return (\n <Row\n {...rowProps}\n style={style}\n key={index}\n index={index}\n row={row}\n instance={instance}\n headerGroups={tableProps.headerGroups}\n setRowHeight={setRowHeight}\n ref={ref}\n />\n );\n }\n\n return (\n <div className=\"yt-table__row\" role=\"row\" style={style}>\n <div className=\"yt-table__cell text-grey-dark\">{texts.table.loading}</div>\n </div>\n );\n}, areEqual);\n\nconst getAverageRowHeight = (rowHeights = {}) => {\n const keys = Object.keys(rowHeights);\n const estimatedHeight = keys.reduce((p, i) => p + rowHeights[i], 0);\n return estimatedHeight / keys.length;\n};\n\nexport const WindowedTable = React.forwardRef(function WindowedTable<T>(\n props: TableProps<T> & { plugins: PluginHook<{}>[] },\n ref: React.Ref<TableRef>\n) {\n const tableRef: any = useProxiedRef<HTMLDivElement>(ref);\n const { emptyStateRenderer = DefaultEmptyState, length, loadMore, ...otherProps } = props;\n const { rowProps, tableProps, rows, prepareRow, instance, state } = useTable<T>({ ...otherProps, windowed: true }, tableRef);\n\n // determine heights for windowing calculations\n const headerRef = React.useRef<HTMLDivElement>(null);\n const rowsRef = React.useRef<any>(null);\n const tableDimensions = useBoundingClientRectListener(tableRef);\n const headerDimensions = useBoundingClientRectListener(headerRef);\n const height = tableDimensions && headerDimensions ? tableDimensions.height - headerDimensions.height : null;\n\n // variable row height calculations\n const estimatedRowHeight = rowProps.rowHeight || ROW_HEIGHT;\n const rowHeights = React.useRef<Record<string, number>>({});\n const setRowHeight = React.useCallback((index: number, size: number) => {\n if (rowHeights.current[index] !== size) {\n rowHeights.current = {\n ...rowHeights.current,\n [index]: size,\n };\n\n if (rowsRef.current) {\n rowsRef.current.resetAfterIndex(0);\n }\n }\n }, []);\n const getRowHeight = React.useCallback(index => rowHeights.current[index] || estimatedRowHeight, []);\n\n React.useEffect(() => {\n if (rowsRef && rowsRef.current && rowProps.activeIndex !== undefined) {\n rowsRef.current.scrollToItem(rowProps.activeIndex);\n }\n }, [rowProps.activeIndex]);\n\n // trigger recalculation of variable row heights if the data changes\n React.useEffect(() => {\n rowHeights.current = {};\n\n if (rowsRef.current) {\n rowsRef.current.resetAfterIndex(0);\n }\n }, [rows.length]);\n\n const contentHeight = estimatedRowHeight * props.data.length || 0;\n const isScrollbarVisible = height !== null ? contentHeight > height : false;\n\n const className = cn(tableProps.className, 'yt-table--windowed', { 'table-with-scrollbar': isScrollbarVisible });\n\n let list;\n\n const itemData = {\n rows,\n setRowHeight,\n rowProps,\n tableProps,\n instance,\n prepareRow,\n state,\n rowHeights: rowHeights.current,\n };\n\n if (height && rows.length) {\n const listProps = {\n height,\n itemData,\n estimatedItemSize: getAverageRowHeight(rowHeights.current),\n itemSize: getRowHeight,\n width: '100%',\n };\n\n if (loadMore && length) {\n const isLoaded = (index: number) => !!rows[index];\n\n list = (\n <InfiniteLoader isItemLoaded={isLoaded} itemCount={length} loadMoreItems={loadMore as any}>\n {({ onItemsRendered, ref }: any) => (\n <VariableSizeList\n {...listProps}\n itemCount={length}\n onItemsRendered={onItemsRendered}\n ref={list => {\n ref(list);\n rowsRef.current = list;\n }}\n >\n {VariableRow}\n </VariableSizeList>\n )}\n </InfiniteLoader>\n );\n } else {\n list = (\n <VariableSizeList {...listProps} itemCount={rows.length} ref={rowsRef}>\n {VariableRow}\n </VariableSizeList>\n );\n }\n }\n\n return (\n <BaseTable {...tableProps} className={className} headerRef={headerRef} tabIndex={0} ref={tableRef}>\n {list ? list : emptyStateRenderer()}\n </BaseTable>\n );\n}) as FowardedGenericTableWithStatics;\n\nWindowedTable.Column = () => null;\nWindowedTable.Group = () => null;\n"],"names":["ROW_HEIGHT","VariableRow","React","memo","data","index","style","useLocalization","texts","rows","setRowHeight","rowProps","tableProps","instance","prepareRow","rowHeights","row","ref","useRef","useEffect","current","getBoundingClientRect","height","Row","key","headerGroups","className","role","table","loading","areEqual","getAverageRowHeight","keys","Object","estimatedHeight","reduce","p","i","length","WindowedTable","forwardRef","props","tableRef","useProxiedRef","emptyStateRenderer","DefaultEmptyState","loadMore","otherProps","useTable","windowed","state","headerRef","rowsRef","tableDimensions","useBoundingClientRectListener","headerDimensions","estimatedRowHeight","rowHeight","useCallback","size","resetAfterIndex","getRowHeight","activeIndex","undefined","scrollToItem","contentHeight","isScrollbarVisible","cn","list","itemData","listProps","estimatedItemSize","itemSize","width","isLoaded","InfiniteLoader","isItemLoaded","itemCount","loadMoreItems","onItemsRendered","VariableSizeList","BaseTable","tabIndex","Column","Group"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"WindowedTable.js","sources":["../../../../../../src/components/Table/components/WindowedTable.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { PluginHook } from 'react-table';\nimport { areEqual, VariableSizeList } from 'react-window';\nimport InfiniteLoader from 'react-window-infinite-loader';\nimport { TableProps, ForwardedGenericTableWithStatics, TableRef } from '../types';\nimport { useTable } from '../hooks/useTable';\nimport { useBoundingClientRectListener } from '../../../utils/hooks/useBoundingClientRectListener';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { Row } from '../util/renderRow';\nimport { DefaultEmptyState, BaseTable } from './BaseTable';\nimport { useLocalization } from '../../Provider/Provider';\n\nconst ROW_HEIGHT = 40;\n\nconst VariableRow = React.memo(({ data, index, style: { height: _, ...style } }: any) => {\n const { texts } = useLocalization();\n const { rows, setRowHeight, rowProps, tableProps, instance, prepareRow, rowHeights } = data;\n const row = rows[index];\n const ref = React.useRef<HTMLDivElement>(null);\n\n React.useEffect(() => {\n if (ref?.current) {\n setRowHeight(index, ref.current.getBoundingClientRect().height);\n }\n }, [rowHeights[index]]);\n\n if (row) {\n prepareRow(row, index);\n\n return (\n <Row\n {...rowProps}\n style={style}\n key={index}\n index={index}\n row={row}\n instance={instance}\n headerGroups={tableProps.headerGroups}\n setRowHeight={setRowHeight}\n ref={ref}\n />\n );\n }\n\n return (\n <div className=\"yt-table__row\" role=\"row\" style={style}>\n <div className=\"yt-table__cell text-grey-dark\">{texts.table.loading}</div>\n </div>\n );\n}, areEqual);\n\nconst getAverageRowHeight = (rowHeights = {}) => {\n const keys = Object.keys(rowHeights);\n const estimatedHeight = keys.reduce((p, i) => p + rowHeights[i], 0);\n return estimatedHeight / keys.length;\n};\n\nexport const WindowedTable = React.forwardRef(function WindowedTable<T>(\n props: TableProps<T> & { plugins: PluginHook<{}>[] },\n ref: React.Ref<TableRef>\n) {\n const tableRef: any = useProxiedRef<HTMLDivElement>(ref);\n const { emptyStateRenderer = DefaultEmptyState, length, loadMore, ...otherProps } = props;\n const { rowProps, tableProps, rows, prepareRow, instance, state } = useTable<T>({ ...otherProps, windowed: true }, tableRef);\n\n // determine heights for windowing calculations\n const headerRef = React.useRef<HTMLDivElement>(null);\n const rowsRef = React.useRef<any>(null);\n const tableDimensions = useBoundingClientRectListener(tableRef);\n const headerDimensions = useBoundingClientRectListener(headerRef);\n const height = tableDimensions && headerDimensions ? tableDimensions.height - headerDimensions.height : null;\n\n // variable row height calculations\n const estimatedRowHeight = rowProps.rowHeight || ROW_HEIGHT;\n const rowHeights = React.useRef<Record<string, number>>({});\n const setRowHeight = React.useCallback((index: number, size: number) => {\n if (rowHeights.current[index] !== size) {\n rowHeights.current = {\n ...rowHeights.current,\n [index]: size,\n };\n\n if (rowsRef.current) {\n rowsRef.current.resetAfterIndex(0);\n }\n }\n }, []);\n const getRowHeight = React.useCallback(index => rowHeights.current[index] || estimatedRowHeight, []);\n\n React.useEffect(() => {\n if (rowsRef && rowsRef.current && rowProps.activeIndex !== undefined) {\n rowsRef.current.scrollToItem(rowProps.activeIndex);\n }\n }, [rowProps.activeIndex]);\n\n // trigger recalculation of variable row heights if the data changes\n React.useEffect(() => {\n rowHeights.current = {};\n\n if (rowsRef.current) {\n rowsRef.current.resetAfterIndex(0);\n }\n }, [rows.length]);\n\n const contentHeight = estimatedRowHeight * props.data.length || 0;\n const isScrollbarVisible = height !== null ? contentHeight > height : false;\n\n const className = cn(tableProps.className, 'yt-table--windowed', { 'table-with-scrollbar': isScrollbarVisible });\n\n let list;\n\n const itemData = {\n rows,\n setRowHeight,\n rowProps,\n tableProps,\n instance,\n prepareRow,\n state,\n rowHeights: rowHeights.current,\n };\n\n if (height && rows.length) {\n const listProps = {\n height,\n itemData,\n estimatedItemSize: getAverageRowHeight(rowHeights.current),\n itemSize: getRowHeight,\n width: '100%',\n };\n\n if (loadMore && length) {\n const isLoaded = (index: number) => !!rows[index];\n\n list = (\n <InfiniteLoader isItemLoaded={isLoaded} itemCount={length} loadMoreItems={loadMore as any}>\n {({ onItemsRendered, ref }: any) => (\n <VariableSizeList\n {...listProps}\n itemCount={length}\n onItemsRendered={onItemsRendered}\n ref={list => {\n ref(list);\n rowsRef.current = list;\n }}\n >\n {VariableRow}\n </VariableSizeList>\n )}\n </InfiniteLoader>\n );\n } else {\n list = (\n <VariableSizeList {...listProps} itemCount={rows.length} ref={rowsRef}>\n {VariableRow}\n </VariableSizeList>\n );\n }\n }\n\n return (\n <BaseTable {...tableProps} className={className} headerRef={headerRef} tabIndex={0} ref={tableRef}>\n {list ? list : emptyStateRenderer()}\n </BaseTable>\n );\n}) as ForwardedGenericTableWithStatics;\n\nWindowedTable.Column = () => null;\nWindowedTable.Group = () => null;\n"],"names":["ROW_HEIGHT","VariableRow","React","memo","data","index","style","useLocalization","texts","rows","setRowHeight","rowProps","tableProps","instance","prepareRow","rowHeights","row","ref","useRef","useEffect","current","getBoundingClientRect","height","Row","key","headerGroups","className","role","table","loading","areEqual","getAverageRowHeight","keys","Object","estimatedHeight","reduce","p","i","length","WindowedTable","forwardRef","props","tableRef","useProxiedRef","emptyStateRenderer","DefaultEmptyState","loadMore","otherProps","useTable","windowed","state","headerRef","rowsRef","tableDimensions","useBoundingClientRectListener","headerDimensions","estimatedRowHeight","rowHeight","useCallback","size","resetAfterIndex","getRowHeight","activeIndex","undefined","scrollToItem","contentHeight","isScrollbarVisible","cn","list","itemData","listProps","estimatedItemSize","itemSize","width","isLoaded","InfiniteLoader","isItemLoaded","itemCount","loadMoreItems","onItemsRendered","VariableSizeList","BaseTable","tabIndex","Column","Group"],"mappings":"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"}
|
@@ -1,11 +1,12 @@
|
|
1
1
|
import React__default from 'react';
|
2
2
|
import { IconButton } from '../../../IconButton/IconButton.js';
|
3
3
|
import keycode from 'keycode';
|
4
|
-
import { Group } from '../../../Group/Group.js';
|
5
4
|
import { Menu } from '../../../Menu/Menu.js';
|
6
5
|
import { sanitizeRowProps } from '../../util.js';
|
7
6
|
import { InView } from 'react-intersection-observer';
|
8
7
|
|
8
|
+
var actionGroupClassName = '-mt-1 -mb-1 h-8 flex';
|
9
|
+
|
9
10
|
var hasActions = function hasActions(inlineEditingUniqueId, handlers, actions) {
|
10
11
|
return !!actions || handlers.onRowCreate || handlers.onRowCopy || handlers.onRowDelete || !!inlineEditingUniqueId || handlers.onRowEdit;
|
11
12
|
};
|
@@ -106,7 +107,9 @@ var EditModeActions = function EditModeActions() {
|
|
106
107
|
document.removeEventListener('keydown', listener);
|
107
108
|
};
|
108
109
|
}, []);
|
109
|
-
return React__default.createElement(
|
110
|
+
return React__default.createElement("div", {
|
111
|
+
className: actionGroupClassName
|
112
|
+
}, React__default.createElement(IconButton, {
|
110
113
|
appearance: "primary",
|
111
114
|
icon: "tick",
|
112
115
|
type: "submit",
|
@@ -131,7 +134,7 @@ var useRowActions = function useRowActions(inlineEditingUniqueId, handlers, acti
|
|
131
134
|
hooks.visibleColumns.push(function (columns) {
|
132
135
|
return [].concat(columns, [{
|
133
136
|
id: '_actions',
|
134
|
-
className: '
|
137
|
+
className: 'flex justify-end px-1 overflow-visible',
|
135
138
|
flex: "0 0 calc((" + actionsLength + " * 2rem) + .5rem)",
|
136
139
|
Cell: function Cell(_ref) {
|
137
140
|
var row = _ref.row;
|
@@ -229,7 +232,9 @@ var useRowActions = function useRowActions(inlineEditingUniqueId, handlers, acti
|
|
229
232
|
}))) : null);
|
230
233
|
|
231
234
|
if (windowed) {
|
232
|
-
return React__default.createElement(
|
235
|
+
return React__default.createElement("div", {
|
236
|
+
className: actionGroupClassName
|
237
|
+
}, output);
|
233
238
|
}
|
234
239
|
|
235
240
|
return React__default.createElement(InView, {
|
@@ -237,7 +242,8 @@ var useRowActions = function useRowActions(inlineEditingUniqueId, handlers, acti
|
|
237
242
|
}, function (_ref2) {
|
238
243
|
var inView = _ref2.inView,
|
239
244
|
ref = _ref2.ref;
|
240
|
-
return React__default.createElement(
|
245
|
+
return React__default.createElement("div", {
|
246
|
+
className: actionGroupClassName,
|
241
247
|
ref: ref
|
242
248
|
}, inView ? output : null);
|
243
249
|
});
|