@economic/taco 1.1.5-alpha.1 → 1.1.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/Icon/components/LogOut.d.ts +3 -0
- package/dist/components/Icon/components/Menu.d.ts +3 -0
- package/dist/components/Icon/components/Profile.d.ts +3 -0
- package/dist/components/Icon/components/index.d.ts +1 -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/esm/components/Card/Card.js +12 -14
- package/dist/esm/components/Card/Card.js.map +1 -1
- package/dist/esm/components/Checkbox/Checkbox.js +18 -15
- package/dist/esm/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/esm/components/Combobox/Combobox.js +25 -23
- package/dist/esm/components/Combobox/Combobox.js.map +1 -1
- package/dist/esm/components/Datepicker/Datepicker.js +52 -48
- package/dist/esm/components/Datepicker/Datepicker.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.js +58 -39
- package/dist/esm/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/components/Field/Field.js +12 -10
- package/dist/esm/components/Field/Field.js.map +1 -1
- package/dist/esm/components/Form/Form.js +8 -6
- package/dist/esm/components/Form/Form.js.map +1 -1
- package/dist/esm/components/Group/Group.js +8 -6
- package/dist/esm/components/Group/Group.js.map +1 -1
- package/dist/esm/components/Hanger/Hanger.js +35 -27
- package/dist/esm/components/Hanger/Hanger.js.map +1 -1
- package/dist/esm/components/HoverCard/HoverCard.js +9 -8
- package/dist/esm/components/HoverCard/HoverCard.js.map +1 -1
- package/dist/esm/components/Icon/Icon.js +8 -7
- package/dist/esm/components/Icon/Icon.js.map +1 -1
- package/dist/esm/components/Icon/components/LogOut.js +20 -0
- package/dist/esm/components/Icon/components/LogOut.js.map +1 -0
- package/dist/esm/components/Icon/components/Menu.js +18 -0
- package/dist/esm/components/Icon/components/Menu.js.map +1 -0
- package/dist/esm/components/Icon/components/Profile.js +20 -0
- package/dist/esm/components/Icon/components/Profile.js.map +1 -0
- package/dist/esm/components/Icon/components/index.js +6 -0
- package/dist/esm/components/Icon/components/index.js.map +1 -1
- package/dist/esm/components/IconButton/IconButton.js +11 -9
- package/dist/esm/components/IconButton/IconButton.js.map +1 -1
- package/dist/esm/components/Input/Input.js +25 -25
- package/dist/esm/components/Input/Input.js.map +1 -1
- package/dist/esm/components/Listbox/Listbox.js +25 -24
- package/dist/esm/components/Listbox/Listbox.js.map +1 -1
- package/dist/esm/components/Menu/Menu.js +34 -16
- package/dist/esm/components/Menu/Menu.js.map +1 -1
- package/dist/esm/components/Navigation/Navigation.js +44 -35
- package/dist/esm/components/Navigation/Navigation.js.map +1 -1
- package/dist/esm/components/Pagination/Pagination.js +56 -39
- package/dist/esm/components/Pagination/Pagination.js.map +1 -1
- package/dist/esm/components/Popover/Popover.js +34 -29
- package/dist/esm/components/Popover/Popover.js.map +1 -1
- package/dist/esm/components/Progress/Progress.js +15 -11
- package/dist/esm/components/Progress/Progress.js.map +1 -1
- package/dist/esm/components/Provider/Provider.js +18 -13
- package/dist/esm/components/Provider/Provider.js.map +1 -1
- package/dist/esm/components/RadioGroup/RadioGroup.js +57 -45
- package/dist/esm/components/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/esm/components/SearchInput/SearchInput.js +11 -11
- package/dist/esm/components/SearchInput/SearchInput.js.map +1 -1
- package/dist/esm/components/Select/Select.js +31 -30
- package/dist/esm/components/Select/Select.js.map +1 -1
- package/dist/esm/components/Spinner/Spinner.js +19 -12
- package/dist/esm/components/Spinner/Spinner.js.map +1 -1
- package/dist/esm/components/Switch/Switch.js +10 -9
- package/dist/esm/components/Switch/Switch.js.map +1 -1
- package/dist/esm/components/Tabs/Tabs.js +27 -25
- package/dist/esm/components/Tabs/Tabs.js.map +1 -1
- package/dist/esm/components/Textarea/Textarea.js +9 -11
- package/dist/esm/components/Textarea/Textarea.js.map +1 -1
- package/dist/esm/components/Toast/Toaster.js +118 -88
- package/dist/esm/components/Toast/Toaster.js.map +1 -1
- package/dist/esm/components/Tooltip/Tooltip.js +8 -7
- package/dist/esm/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/esm/components/Tour/Tour.js +50 -44
- package/dist/esm/components/Tour/Tour.js.map +1 -1
- package/dist/esm/components/Treeview/Treeview.js +36 -26
- package/dist/esm/components/Treeview/Treeview.js.map +1 -1
- package/dist/esm/components/VisuallyHidden/VisuallyHidden.js +1 -1
- package/dist/esm/components/VisuallyHidden/VisuallyHidden.js.map +1 -1
- package/dist/esm/index.js +0 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/utils/hooks/useProxiedRef.js +3 -3
- package/dist/esm/utils/hooks/useProxiedRef.js.map +1 -1
- package/dist/index.d.ts +0 -1
- package/dist/taco.cjs.development.js +913 -724
- 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/tailwind.d.ts +1 -1
- package/package.json +4 -5
- package/tailwind.config.js +0 -5
- package/types.json +5 -2
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Tour.js","sources":["../../../../src/components/Tour/Tour.tsx"],"sourcesContent":["import keycode from 'keycode';\r\nimport * as React from 'react';\r\nimport Joyride, { Step, CallBackProps, ACTIONS, LIFECYCLE, Placement, EVENTS, TooltipRenderProps } from 'react-joyride';\r\n\r\nimport { Button } from '../Button/Button';\r\nimport { Group } from '../Group/Group';\r\nimport { IconButton } from '../IconButton/IconButton';\r\nimport { useLocalization } from '../Provider/Provider';\r\n\r\nexport type TourTexts = {\r\n /** Text for back action button */\r\n back: string;\r\n /**\r\n * Text for close button.\r\n * This button is displayed if tour is not continuous - replacing the `Next` button.\r\n * It will pause the flow of the tour and close the tooltip\r\n */\r\n close: string;\r\n /**\r\n * Aria-label and title for close icon button in each step.\r\n * This button skips and completes the flow entirely\r\n */\r\n skip: string;\r\n /**\r\n * Text for last action button.\r\n * This button is displayed when user is on the last step of the tour\r\n */\r\n last: string;\r\n /**\r\n * Text for next action button.\r\n * This button is displayed if tour has more than one steps and is continuous\r\n */\r\n next: string;\r\n /** Aria label and title for beacon that will open the tour step */\r\n open: string;\r\n};\r\n\r\nexport type TourStepProps = {\r\n /** Content can be any valid react node, for e.g. a `div` */\r\n children: React.ReactNode;\r\n /** Define the position of the tour's popup relative to the element is presenting */\r\n position?: Placement;\r\n /** The css selector of the html element you want to include in a tour */\r\n selector: string;\r\n /**\r\n * Show beacon for step.\r\n * A beacon is a styled component which indicates the current element to be presented.\r\n * For more informations about how to create a beacon, read [Joyride](https://docs.react-joyride.com) docs\r\n */\r\n showBeacon?: boolean;\r\n /** Text displayed above the children/content of the popup */\r\n title: string;\r\n};\r\n\r\nconst Tooltip = ({\r\n continuous,\r\n index,\r\n isLastStep,\r\n step,\r\n backProps,\r\n primaryProps,\r\n skipProps,\r\n tooltipProps,\r\n size,\r\n locale,\r\n disableTourSkipOnEsc,\r\n}: TooltipRenderProps & { locale: TourTexts; disableTourSkipOnEsc?: boolean }) => {\r\n const skipButtonRef = React.useRef<HTMLButtonElement>(null);\r\n\r\n React.useEffect(() => {\r\n const onWindowKeyDown = (event: KeyboardEvent): void => {\r\n if (!disableTourSkipOnEsc) {\r\n if (event.keyCode === keycode('esc') && skipButtonRef.current !== null) {\r\n event.preventDefault();\r\n skipButtonRef.current.click();\r\n return;\r\n }\r\n }\r\n };\r\n\r\n window.addEventListener('keydown', onWindowKeyDown);\r\n\r\n return () => {\r\n window.removeEventListener('keydown', onWindowKeyDown);\r\n };\r\n }, []);\r\n\r\n return (\r\n <div {...tooltipProps} className=\"yt-tour__step w-88 relative rounded bg-white p-4\">\r\n <IconButton\r\n {...skipProps}\r\n ref={skipButtonRef}\r\n appearance=\"discrete\"\r\n icon=\"close\"\r\n title={locale.skip}\r\n aria-label={locale.skip}\r\n className=\"absolute top-0 right-0 mt-1 mr-1\"\r\n />\r\n {step.title && <h5>{step.title}</h5>}\r\n {step.content}\r\n <Group className=\"mt-4 justify-end\">\r\n {index > 0 && (\r\n <Button {...backProps} appearance=\"discrete\">\r\n {locale.back}\r\n </Button>\r\n )}\r\n <Button {...primaryProps} appearance=\"primary\">\r\n {continuous\r\n ? isLastStep\r\n ? `${locale.last} (${index + 1}/${size})`\r\n : `${locale.next} (${index + 1}/${size})`\r\n : locale.close}\r\n </Button>\r\n </Group>\r\n </div>\r\n );\r\n};\r\n\r\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\r\nexport const TourStep = (_props: TourStepProps): null => null;\r\n\r\nexport type TourProps = {\r\n /** Controls if [Joyride](https://docs.react-joyride.com) is active */\r\n autoStart?: boolean;\r\n /** Children should be one or more `Tour.Step` components */\r\n children: any;\r\n /** Are there more than one steps and should you be able to navigate between them using `Next` and `Previous` buttons */\r\n continuous?: boolean;\r\n /** Disable closing of tour when click on `Escape` */\r\n disableCloseOnEsc?: boolean;\r\n /** Don't close the presenting popup of the tour step when clicking outside it */\r\n disableOverlayClose?: boolean;\r\n /** Allows user to interact with the presented components (mouse and touch events) when the popup is visible */\r\n disableScrolling?: boolean;\r\n /* When user clicks on the close icon button, which will close the tour and complete the flow */\r\n onClose?: (step: TourStepProps) => void;\r\n /* When user completes the entire flow */\r\n onComplete?: Function;\r\n /** When step is ready */\r\n onReady?: (step: TourStepProps) => void;\r\n /* Allow mouse and touch events through the spotlight */\r\n spotlightClicks?: boolean;\r\n /* Stops the injection of custom overflow styles on parent container. Can be used to prevent remaining overflow styles after tour is done. */\r\n disableScrollParentFix?: boolean;\r\n};\r\n\r\nexport const Tour = (props: TourProps) => {\r\n const {\r\n texts: { tour },\r\n } = useLocalization();\r\n\r\n const {\r\n autoStart: run,\r\n onComplete,\r\n onClose,\r\n onReady,\r\n spotlightClicks,\r\n disableCloseOnEsc: disableTourSkipOnEsc,\r\n disableScrollParentFix = false,\r\n ...rest\r\n } = props;\r\n\r\n const steps = React.useMemo(() => {\r\n return React.Children.map(props.children, child => {\r\n const step: Step = {\r\n disableBeacon: !child.props.showBeacon,\r\n target: child.props.selector,\r\n placement: child.props.position,\r\n title: child.props.title,\r\n content: child.props.children,\r\n };\r\n return step;\r\n });\r\n }, [props.children]);\r\n\r\n const getStep = React.useCallback(\r\n (selector: string | HTMLElement) => props.children.find((child: any) => child.props.selector === selector)?.props,\r\n [props.children]\r\n );\r\n\r\n function callback(state: CallBackProps) {\r\n if (state.action === ACTIONS.SKIP && state.lifecycle === LIFECYCLE.COMPLETE) {\r\n if (onClose) {\r\n onClose(getStep(state.step.target));\r\n }\r\n }\r\n\r\n if (state.type === EVENTS.TOUR_END) {\r\n if (onComplete) {\r\n onComplete();\r\n }\r\n }\r\n\r\n if (state.lifecycle === LIFECYCLE.READY) {\r\n if (onReady) {\r\n onReady(getStep(state.step.target));\r\n }\r\n }\r\n }\r\n\r\n return (\r\n <Joyride\r\n {...rest}\r\n run={run}\r\n steps={steps}\r\n showProgress\r\n floaterProps={{\r\n disableAnimation: true,\r\n }}\r\n tooltipComponent={tooltipProps => (\r\n <Tooltip {...tooltipProps} locale={tour} disableTourSkipOnEsc={disableTourSkipOnEsc} />\r\n )}\r\n locale={tour}\r\n spotlightPadding={8}\r\n spotlightClicks={spotlightClicks}\r\n disableScrollParentFix={disableScrollParentFix}\r\n callback={callback}\r\n styles={{\r\n /** style beacon */\r\n options: {\r\n // tailwind.theme.colors.blue.light\r\n primaryColor: '#6ba4ff',\r\n },\r\n }}\r\n disableCloseOnEsc\r\n />\r\n );\r\n};\r\n\r\nTour.Step = TourStep;\r\n"],"names":["Tooltip","continuous","index","isLastStep","step","backProps","primaryProps","skipProps","tooltipProps","size","locale","disableTourSkipOnEsc","skipButtonRef","React","onWindowKeyDown","event","keyCode","keycode","current","preventDefault","click","window","addEventListener","removeEventListener","className","IconButton","ref","appearance","icon","title","skip","content","Group","Button","back","last","next","close","TourStep","_props","Tour","props","texts","tour","useLocalization","autoStart","run","onComplete","onClose","onReady","spotlightClicks","disableCloseOnEsc","disableScrollParentFix","rest","steps","map","children","child","disableBeacon","showBeacon","target","selector","placement","position","getStep","find","callback","state","action","ACTIONS","SKIP","lifecycle","LIFECYCLE","COMPLETE","type","EVENTS","TOUR_END","READY","Joyride","showProgress","floaterProps","disableAnimation","tooltipComponent","spotlightPadding","styles","options","primaryColor","Step"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"Tour.js","sources":["../../../../src/components/Tour/Tour.tsx"],"sourcesContent":["import keycode from 'keycode';\r\nimport * as React from 'react';\r\nimport Joyride, { Step, CallBackProps, ACTIONS, LIFECYCLE, Placement, EVENTS, TooltipRenderProps } from 'react-joyride';\r\n\r\nimport { Button } from '../Button/Button';\r\nimport { Group } from '../Group/Group';\r\nimport { IconButton } from '../IconButton/IconButton';\r\nimport { useLocalization } from '../Provider/Provider';\r\n\r\nexport type TourTexts = {\r\n /** Text for back action button */\r\n back: string;\r\n /**\r\n * Text for close button.\r\n * This button is displayed if tour is not continuous - replacing the `Next` button.\r\n * It will pause the flow of the tour and close the tooltip\r\n */\r\n close: string;\r\n /**\r\n * Aria-label and title for close icon button in each step.\r\n * This button skips and completes the flow entirely\r\n */\r\n skip: string;\r\n /**\r\n * Text for last action button.\r\n * This button is displayed when user is on the last step of the tour\r\n */\r\n last: string;\r\n /**\r\n * Text for next action button.\r\n * This button is displayed if tour has more than one steps and is continuous\r\n */\r\n next: string;\r\n /** Aria label and title for beacon that will open the tour step */\r\n open: string;\r\n};\r\n\r\nexport type TourStepProps = {\r\n /** Content can be any valid react node, for e.g. a `div` */\r\n children: React.ReactNode;\r\n /** Define the position of the tour's popup relative to the element is presenting */\r\n position?: Placement;\r\n /** The css selector of the html element you want to include in a tour */\r\n selector: string;\r\n /**\r\n * Show beacon for step.\r\n * A beacon is a styled component which indicates the current element to be presented.\r\n * For more informations about how to create a beacon, read [Joyride](https://docs.react-joyride.com) docs\r\n */\r\n showBeacon?: boolean;\r\n /** Text displayed above the children/content of the popup */\r\n title: string;\r\n};\r\n\r\nconst Tooltip = ({\r\n continuous,\r\n index,\r\n isLastStep,\r\n step,\r\n backProps,\r\n primaryProps,\r\n skipProps,\r\n tooltipProps,\r\n size,\r\n locale,\r\n disableTourSkipOnEsc,\r\n}: TooltipRenderProps & { locale: TourTexts; disableTourSkipOnEsc?: boolean }) => {\r\n const skipButtonRef = React.useRef<HTMLButtonElement>(null);\r\n\r\n React.useEffect(() => {\r\n const onWindowKeyDown = (event: KeyboardEvent): void => {\r\n if (!disableTourSkipOnEsc) {\r\n if (event.keyCode === keycode('esc') && skipButtonRef.current !== null) {\r\n event.preventDefault();\r\n skipButtonRef.current.click();\r\n return;\r\n }\r\n }\r\n };\r\n\r\n window.addEventListener('keydown', onWindowKeyDown);\r\n\r\n return () => {\r\n window.removeEventListener('keydown', onWindowKeyDown);\r\n };\r\n }, []);\r\n\r\n return (\r\n <div {...tooltipProps} className=\"yt-tour__step w-88 relative rounded bg-white p-4\">\r\n <IconButton\r\n {...skipProps}\r\n ref={skipButtonRef}\r\n appearance=\"discrete\"\r\n icon=\"close\"\r\n title={locale.skip}\r\n aria-label={locale.skip}\r\n className=\"absolute top-0 right-0 mt-1 mr-1\"\r\n />\r\n {step.title && <h5>{step.title}</h5>}\r\n {step.content}\r\n <Group className=\"mt-4 justify-end\">\r\n {index > 0 && (\r\n <Button {...backProps} appearance=\"discrete\">\r\n {locale.back}\r\n </Button>\r\n )}\r\n <Button {...primaryProps} appearance=\"primary\">\r\n {continuous\r\n ? isLastStep\r\n ? `${locale.last} (${index + 1}/${size})`\r\n : `${locale.next} (${index + 1}/${size})`\r\n : locale.close}\r\n </Button>\r\n </Group>\r\n </div>\r\n );\r\n};\r\n\r\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\r\nexport const TourStep = (_props: TourStepProps): null => null;\r\n\r\nexport type TourProps = {\r\n /** Controls if [Joyride](https://docs.react-joyride.com) is active */\r\n autoStart?: boolean;\r\n /** Children should be one or more `Tour.Step` components */\r\n children: any;\r\n /** Are there more than one steps and should you be able to navigate between them using `Next` and `Previous` buttons */\r\n continuous?: boolean;\r\n /** Disable closing of tour when click on `Escape` */\r\n disableCloseOnEsc?: boolean;\r\n /** Don't close the presenting popup of the tour step when clicking outside it */\r\n disableOverlayClose?: boolean;\r\n /** Allows user to interact with the presented components (mouse and touch events) when the popup is visible */\r\n disableScrolling?: boolean;\r\n /* When user clicks on the close icon button, which will close the tour and complete the flow */\r\n onClose?: (step: TourStepProps) => void;\r\n /* When user completes the entire flow */\r\n onComplete?: Function;\r\n /** When step is ready */\r\n onReady?: (step: TourStepProps) => void;\r\n /* Allow mouse and touch events through the spotlight */\r\n spotlightClicks?: boolean;\r\n /* Stops the injection of custom overflow styles on parent container. Can be used to prevent remaining overflow styles after tour is done. */\r\n disableScrollParentFix?: boolean;\r\n};\r\n\r\nexport const Tour = (props: TourProps) => {\r\n const {\r\n texts: { tour },\r\n } = useLocalization();\r\n\r\n const {\r\n autoStart: run,\r\n onComplete,\r\n onClose,\r\n onReady,\r\n spotlightClicks,\r\n disableCloseOnEsc: disableTourSkipOnEsc,\r\n disableScrollParentFix = false,\r\n ...rest\r\n } = props;\r\n\r\n const steps = React.useMemo(() => {\r\n return React.Children.map(props.children, child => {\r\n const step: Step = {\r\n disableBeacon: !child.props.showBeacon,\r\n target: child.props.selector,\r\n placement: child.props.position,\r\n title: child.props.title,\r\n content: child.props.children,\r\n };\r\n return step;\r\n });\r\n }, [props.children]);\r\n\r\n const getStep = React.useCallback(\r\n (selector: string | HTMLElement) => props.children.find((child: any) => child.props.selector === selector)?.props,\r\n [props.children]\r\n );\r\n\r\n function callback(state: CallBackProps) {\r\n if (state.action === ACTIONS.SKIP && state.lifecycle === LIFECYCLE.COMPLETE) {\r\n if (onClose) {\r\n onClose(getStep(state.step.target));\r\n }\r\n }\r\n\r\n if (state.type === EVENTS.TOUR_END) {\r\n if (onComplete) {\r\n onComplete();\r\n }\r\n }\r\n\r\n if (state.lifecycle === LIFECYCLE.READY) {\r\n if (onReady) {\r\n onReady(getStep(state.step.target));\r\n }\r\n }\r\n }\r\n\r\n return (\r\n <Joyride\r\n {...rest}\r\n run={run}\r\n steps={steps}\r\n showProgress\r\n floaterProps={{\r\n disableAnimation: true,\r\n }}\r\n tooltipComponent={tooltipProps => (\r\n <Tooltip {...tooltipProps} locale={tour} disableTourSkipOnEsc={disableTourSkipOnEsc} />\r\n )}\r\n locale={tour}\r\n spotlightPadding={8}\r\n spotlightClicks={spotlightClicks}\r\n disableScrollParentFix={disableScrollParentFix}\r\n callback={callback}\r\n styles={{\r\n /** style beacon */\r\n options: {\r\n // tailwind.theme.colors.blue.light\r\n primaryColor: '#6ba4ff',\r\n },\r\n }}\r\n disableCloseOnEsc\r\n />\r\n );\r\n};\r\n\r\nTour.Step = TourStep;\r\n"],"names":["Tooltip","continuous","index","isLastStep","step","backProps","primaryProps","skipProps","tooltipProps","size","locale","disableTourSkipOnEsc","skipButtonRef","React","onWindowKeyDown","event","keyCode","keycode","current","preventDefault","click","window","addEventListener","removeEventListener","className","IconButton","ref","appearance","icon","title","skip","content","Group","Button","back","last","next","close","TourStep","_props","Tour","props","useLocalization","tour","texts","run","autoStart","onComplete","onClose","onReady","spotlightClicks","disableCloseOnEsc","disableScrollParentFix","rest","steps","map","children","child","disableBeacon","showBeacon","target","selector","placement","position","getStep","find","callback","state","action","ACTIONS","SKIP","lifecycle","LIFECYCLE","COMPLETE","type","EVENTS","TOUR_END","READY","Joyride","showProgress","floaterProps","disableAnimation","tooltipComponent","spotlightPadding","styles","options","primaryColor","Step"],"mappings":"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"}
|
@@ -1,39 +1,45 @@
|
|
1
|
+
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
1
2
|
import React__default from 'react';
|
2
3
|
import cn from 'classnames';
|
3
4
|
|
4
|
-
|
5
|
+
var _excluded = ["children", "className", "expanded", "title", "fixed", "onClick"];
|
6
|
+
var TreeviewItem = /*#__PURE__*/React__default.forwardRef(function TreeviewItem(props, ref) {
|
5
7
|
return React__default.createElement("a", Object.assign({}, props, {
|
6
8
|
ref: ref
|
7
9
|
}));
|
8
10
|
});
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
11
|
+
var TreeviewGroup = /*#__PURE__*/React__default.forwardRef(function TreeviewGroup(props, ref) {
|
12
|
+
var children = props.children,
|
13
|
+
externalClassName = props.className,
|
14
|
+
_props$expanded = props.expanded,
|
15
|
+
initialExpanded = _props$expanded === void 0 ? false : _props$expanded,
|
16
|
+
title = props.title,
|
17
|
+
fixed = props.fixed,
|
18
|
+
onClick = props.onClick,
|
19
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded);
|
20
|
+
|
21
|
+
var _React$useState = React__default.useState(fixed || initialExpanded),
|
22
|
+
expanded = _React$useState[0],
|
23
|
+
setExpanded = _React$useState[1];
|
24
|
+
|
25
|
+
React__default.useEffect(function () {
|
21
26
|
if (!fixed) {
|
22
27
|
setExpanded(fixed || initialExpanded);
|
23
28
|
}
|
24
29
|
}, [fixed, initialExpanded]);
|
25
|
-
|
30
|
+
var listClassName = cn('flex-col mb-0', {
|
26
31
|
flex: expanded,
|
27
32
|
hidden: !expanded
|
28
33
|
});
|
29
|
-
|
34
|
+
|
35
|
+
var itemProps = _extends({}, otherProps, {
|
30
36
|
'aria-expanded': expanded,
|
31
37
|
role: 'treeitem',
|
32
38
|
tabIndex: -1
|
33
|
-
};
|
39
|
+
});
|
34
40
|
|
35
|
-
|
36
|
-
|
41
|
+
var handleClick = function handleClick(event) {
|
42
|
+
var nextState = !expanded;
|
37
43
|
|
38
44
|
if (!fixed) {
|
39
45
|
setExpanded(nextState);
|
@@ -44,7 +50,7 @@ const TreeviewGroup = /*#__PURE__*/React__default.forwardRef(function TreeviewGr
|
|
44
50
|
}
|
45
51
|
};
|
46
52
|
|
47
|
-
|
53
|
+
var className = typeof externalClassName === 'function' ? externalClassName(expanded) : externalClassName;
|
48
54
|
return React__default.createElement("div", Object.assign({}, itemProps, {
|
49
55
|
className: className,
|
50
56
|
ref: ref
|
@@ -53,14 +59,18 @@ const TreeviewGroup = /*#__PURE__*/React__default.forwardRef(function TreeviewGr
|
|
53
59
|
}, typeof title === 'function' ? title(expanded) : title), React__default.createElement("ul", {
|
54
60
|
role: "group",
|
55
61
|
className: listClassName
|
56
|
-
}, React__default.Children.toArray(children).filter(
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
+
}, React__default.Children.toArray(children).filter(function (item) {
|
63
|
+
return !!item;
|
64
|
+
}).map(function (item, i) {
|
65
|
+
return React__default.createElement("li", {
|
66
|
+
key: i,
|
67
|
+
role: "none"
|
68
|
+
}, React__default.cloneElement(item, {
|
69
|
+
role: 'treeitem'
|
70
|
+
}));
|
71
|
+
})));
|
62
72
|
});
|
63
|
-
|
73
|
+
var Treeview = /*#__PURE__*/React__default.forwardRef(function Treeview(props, ref) {
|
64
74
|
return React__default.createElement("div", Object.assign({}, props, {
|
65
75
|
ref: ref,
|
66
76
|
role: "tree"
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Treeview.js","sources":["../../../../src/components/Treeview/Treeview.tsx"],"sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\n\r\nexport type TreeviewItemProps = React.LinkHTMLAttributes<HTMLAnchorElement>;\r\n\r\nconst TreeviewItem = React.forwardRef(function TreeviewItem(props: TreeviewItemProps, ref: React.Ref<HTMLAnchorElement>) {\r\n return <a {...props} ref={ref} />;\r\n});\r\n\r\nexport type TreeviewGroupProps = Omit<React.LinkHTMLAttributes<HTMLDivElement>, 'className' | 'onClick' | 'title'> & {\r\n /** Add a classname to the treeview */\r\n className?: string | ((expanded: boolean) => string);\r\n /**\r\n * Set wheter the region is expanded, showing the children, or collapsed.\r\n * Default value is `false`\r\n */\r\n expanded?: boolean;\r\n /** Region is expanded at mount and can't be collapsed */\r\n fixed?: boolean;\r\n /** Handler called when user clicks the title of the group */\r\n onClick?: (event: React.MouseEvent<HTMLDivElement>, expanded: boolean) => void;\r\n /** Text displayed in the group's header */\r\n title: React.ReactNode | ((expanded: boolean) => React.ReactNode);\r\n};\r\n\r\nconst TreeviewGroup = React.forwardRef(function TreeviewGroup(props: TreeviewGroupProps, ref: React.Ref<HTMLDivElement>) {\r\n const {\r\n children,\r\n className: externalClassName,\r\n expanded: initialExpanded = false,\r\n title,\r\n fixed,\r\n onClick,\r\n ...otherProps\r\n } = props;\r\n const [expanded, setExpanded] = React.useState(fixed || initialExpanded);\r\n\r\n React.useEffect(() => {\r\n if (!fixed) {\r\n setExpanded(fixed || initialExpanded);\r\n }\r\n }, [fixed, initialExpanded]);\r\n\r\n const listClassName = cn('flex-col mb-0', {\r\n flex: expanded,\r\n hidden: !expanded,\r\n });\r\n\r\n const itemProps = {\r\n ...otherProps,\r\n 'aria-expanded': expanded,\r\n role: 'treeitem',\r\n tabIndex: -1,\r\n };\r\n\r\n const handleClick = (event: React.MouseEvent<HTMLDivElement>): void => {\r\n const nextState = !expanded;\r\n\r\n if (!fixed) {\r\n setExpanded(nextState);\r\n }\r\n\r\n if (onClick) {\r\n onClick(event, nextState);\r\n }\r\n };\r\n\r\n const className = typeof externalClassName === 'function' ? externalClassName(expanded) : externalClassName;\r\n\r\n return (\r\n <div {...itemProps} className={className} ref={ref}>\r\n <div onClick={handleClick}>{typeof title === 'function' ? title(expanded) : title}</div>\r\n <ul role=\"group\" className={listClassName}>\r\n {React.Children.toArray(children)\r\n .filter(item => !!item)\r\n .map((item, i) => (\r\n <li key={i} role=\"none\">\r\n {React.cloneElement(item as React.ReactElement<any>, { role: 'treeitem' })}\r\n </li>\r\n ))}\r\n </ul>\r\n </div>\r\n );\r\n});\r\n\r\nexport type TreeviewProps = React.HTMLAttributes<HTMLDivElement>;\r\n\r\nexport type ForwardedTreeviewWithStatics = React.ForwardRefExoticComponent<\r\n TreeviewProps & React.RefAttributes<HTMLDivElement>\r\n> & {\r\n /** Navigable link */\r\n Item: React.ForwardRefExoticComponent<TreeviewItemProps & React.RefAttributes<HTMLAnchorElement>>;\r\n /** Container for a set of related links, usually expandable */\r\n Group: React.ForwardRefExoticComponent<TreeviewGroupProps & React.RefAttributes<HTMLDivElement>>;\r\n};\r\n\r\nexport const Treeview = React.forwardRef(function Treeview(props: TreeviewProps, ref: React.Ref<HTMLDivElement>) {\r\n return <div {...props} ref={ref} role=\"tree\" />;\r\n}) as ForwardedTreeviewWithStatics;\r\n\r\nTreeview.Group = TreeviewGroup;\r\nTreeview.Item = TreeviewItem;\r\n"],"names":["TreeviewItem","React","forwardRef","props","ref","TreeviewGroup","children","
|
1
|
+
{"version":3,"file":"Treeview.js","sources":["../../../../src/components/Treeview/Treeview.tsx"],"sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\n\r\nexport type TreeviewItemProps = React.LinkHTMLAttributes<HTMLAnchorElement>;\r\n\r\nconst TreeviewItem = React.forwardRef(function TreeviewItem(props: TreeviewItemProps, ref: React.Ref<HTMLAnchorElement>) {\r\n return <a {...props} ref={ref} />;\r\n});\r\n\r\nexport type TreeviewGroupProps = Omit<React.LinkHTMLAttributes<HTMLDivElement>, 'className' | 'onClick' | 'title'> & {\r\n /** Add a classname to the treeview */\r\n className?: string | ((expanded: boolean) => string);\r\n /**\r\n * Set wheter the region is expanded, showing the children, or collapsed.\r\n * Default value is `false`\r\n */\r\n expanded?: boolean;\r\n /** Region is expanded at mount and can't be collapsed */\r\n fixed?: boolean;\r\n /** Handler called when user clicks the title of the group */\r\n onClick?: (event: React.MouseEvent<HTMLDivElement>, expanded: boolean) => void;\r\n /** Text displayed in the group's header */\r\n title: React.ReactNode | ((expanded: boolean) => React.ReactNode);\r\n};\r\n\r\nconst TreeviewGroup = React.forwardRef(function TreeviewGroup(props: TreeviewGroupProps, ref: React.Ref<HTMLDivElement>) {\r\n const {\r\n children,\r\n className: externalClassName,\r\n expanded: initialExpanded = false,\r\n title,\r\n fixed,\r\n onClick,\r\n ...otherProps\r\n } = props;\r\n const [expanded, setExpanded] = React.useState(fixed || initialExpanded);\r\n\r\n React.useEffect(() => {\r\n if (!fixed) {\r\n setExpanded(fixed || initialExpanded);\r\n }\r\n }, [fixed, initialExpanded]);\r\n\r\n const listClassName = cn('flex-col mb-0', {\r\n flex: expanded,\r\n hidden: !expanded,\r\n });\r\n\r\n const itemProps = {\r\n ...otherProps,\r\n 'aria-expanded': expanded,\r\n role: 'treeitem',\r\n tabIndex: -1,\r\n };\r\n\r\n const handleClick = (event: React.MouseEvent<HTMLDivElement>): void => {\r\n const nextState = !expanded;\r\n\r\n if (!fixed) {\r\n setExpanded(nextState);\r\n }\r\n\r\n if (onClick) {\r\n onClick(event, nextState);\r\n }\r\n };\r\n\r\n const className = typeof externalClassName === 'function' ? externalClassName(expanded) : externalClassName;\r\n\r\n return (\r\n <div {...itemProps} className={className} ref={ref}>\r\n <div onClick={handleClick}>{typeof title === 'function' ? title(expanded) : title}</div>\r\n <ul role=\"group\" className={listClassName}>\r\n {React.Children.toArray(children)\r\n .filter(item => !!item)\r\n .map((item, i) => (\r\n <li key={i} role=\"none\">\r\n {React.cloneElement(item as React.ReactElement<any>, { role: 'treeitem' })}\r\n </li>\r\n ))}\r\n </ul>\r\n </div>\r\n );\r\n});\r\n\r\nexport type TreeviewProps = React.HTMLAttributes<HTMLDivElement>;\r\n\r\nexport type ForwardedTreeviewWithStatics = React.ForwardRefExoticComponent<\r\n TreeviewProps & React.RefAttributes<HTMLDivElement>\r\n> & {\r\n /** Navigable link */\r\n Item: React.ForwardRefExoticComponent<TreeviewItemProps & React.RefAttributes<HTMLAnchorElement>>;\r\n /** Container for a set of related links, usually expandable */\r\n Group: React.ForwardRefExoticComponent<TreeviewGroupProps & React.RefAttributes<HTMLDivElement>>;\r\n};\r\n\r\nexport const Treeview = React.forwardRef(function Treeview(props: TreeviewProps, ref: React.Ref<HTMLDivElement>) {\r\n return <div {...props} ref={ref} role=\"tree\" />;\r\n}) as ForwardedTreeviewWithStatics;\r\n\r\nTreeview.Group = TreeviewGroup;\r\nTreeview.Item = TreeviewItem;\r\n"],"names":["TreeviewItem","React","forwardRef","props","ref","TreeviewGroup","children","externalClassName","className","expanded","initialExpanded","title","fixed","onClick","otherProps","useState","setExpanded","useEffect","listClassName","cn","flex","hidden","itemProps","role","tabIndex","handleClick","event","nextState","Children","toArray","filter","item","map","i","key","cloneElement","Treeview","Group","Item"],"mappings":";;;;;AAKA,IAAMA,YAAY,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,YAAT,CAAsBG,KAAtB,EAAgDC,GAAhD;EAClC,OAAOH,4BAAA,IAAA,oBAAOE;IAAOC,GAAG,EAAEA;IAAnB,CAAP;AACH,CAFoB,CAArB;AAoBA,IAAMC,aAAa,gBAAGJ,cAAK,CAACC,UAAN,CAAiB,SAASG,aAAT,CAAuBF,KAAvB,EAAkDC,GAAlD;EACnC,IACIE,QADJ,GAQIH,KARJ,CACIG,QADJ;MAEeC,iBAFf,GAQIJ,KARJ,CAEIK,SAFJ;wBAQIL,KARJ,CAGIM,QAHJ;MAGcC,eAHd,gCAGgC,KAHhC;MAIIC,KAJJ,GAQIR,KARJ,CAIIQ,KAJJ;MAKIC,KALJ,GAQIT,KARJ,CAKIS,KALJ;MAMIC,OANJ,GAQIV,KARJ,CAMIU,OANJ;MAOOC,UAPP,iCAQIX,KARJ;;EASA,sBAAgCF,cAAK,CAACc,QAAN,CAAeH,KAAK,IAAIF,eAAxB,CAAhC;MAAOD,QAAP;MAAiBO,WAAjB;;EAEAf,cAAK,CAACgB,SAAN,CAAgB;IACZ,IAAI,CAACL,KAAL,EAAY;MACRI,WAAW,CAACJ,KAAK,IAAIF,eAAV,CAAX;;GAFR,EAIG,CAACE,KAAD,EAAQF,eAAR,CAJH;EAMA,IAAMQ,aAAa,GAAGC,EAAE,CAAC,eAAD,EAAkB;IACtCC,IAAI,EAAEX,QADgC;IAEtCY,MAAM,EAAE,CAACZ;GAFW,CAAxB;;EAKA,IAAMa,SAAS,gBACRR,UADQ;IAEX,iBAAiBL,QAFN;IAGXc,IAAI,EAAE,UAHK;IAIXC,QAAQ,EAAE,CAAC;IAJf;;EAOA,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACC,KAAD;IAChB,IAAMC,SAAS,GAAG,CAAClB,QAAnB;;IAEA,IAAI,CAACG,KAAL,EAAY;MACRI,WAAW,CAACW,SAAD,CAAX;;;IAGJ,IAAId,OAAJ,EAAa;MACTA,OAAO,CAACa,KAAD,EAAQC,SAAR,CAAP;;GARR;;EAYA,IAAMnB,SAAS,GAAG,OAAOD,iBAAP,KAA6B,UAA7B,GAA0CA,iBAAiB,CAACE,QAAD,CAA3D,GAAwEF,iBAA1F;EAEA,OACIN,4BAAA,MAAA,oBAASqB;IAAWd,SAAS,EAAEA;IAAWJ,GAAG,EAAEA;IAA/C,EACIH,4BAAA,MAAA;IAAKY,OAAO,EAAEY;GAAd,EAA4B,OAAOd,KAAP,KAAiB,UAAjB,GAA8BA,KAAK,CAACF,QAAD,CAAnC,GAAgDE,KAA5E,CADJ,EAEIV,4BAAA,KAAA;IAAIsB,IAAI,EAAC;IAAQf,SAAS,EAAEU;GAA5B,EACKjB,cAAK,CAAC2B,QAAN,CAAeC,OAAf,CAAuBvB,QAAvB,EACIwB,MADJ,CACW,UAAAC,IAAI;IAAA,OAAI,CAAC,CAACA,IAAN;GADf,EAEIC,GAFJ,CAEQ,UAACD,IAAD,EAAOE,CAAP;IAAA,OACDhC,4BAAA,KAAA;MAAIiC,GAAG,EAAED;MAAGV,IAAI,EAAC;KAAjB,EACKtB,cAAK,CAACkC,YAAN,CAAmBJ,IAAnB,EAAoD;MAAER,IAAI,EAAE;KAA5D,CADL,CADC;GAFR,CADL,CAFJ,CADJ;AAcH,CA1DqB,CAAtB;IAuEaa,QAAQ,gBAAGnC,cAAK,CAACC,UAAN,CAAiB,SAASkC,QAAT,CAAkBjC,KAAlB,EAAwCC,GAAxC;EACrC,OAAOH,4BAAA,MAAA,oBAASE;IAAOC,GAAG,EAAEA;IAAKmB,IAAI,EAAC;IAA/B,CAAP;AACH,CAFuB;AAIxBa,QAAQ,CAACC,KAAT,GAAiBhC,aAAjB;AACA+B,QAAQ,CAACE,IAAT,GAAgBtC,YAAhB;;;;"}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { forwardRef, createElement } from 'react';
|
2
2
|
|
3
|
-
|
3
|
+
var VisuallyHidden = /*#__PURE__*/forwardRef(function VisuallyHidden(props, ref) {
|
4
4
|
return createElement("span", Object.assign({}, props, {
|
5
5
|
className: "sr-only",
|
6
6
|
ref: ref
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"VisuallyHidden.js","sources":["../../../../src/components/VisuallyHidden/VisuallyHidden.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\ntype Props = React.HTMLAttributes<HTMLSpanElement>;\r\n\r\nexport const VisuallyHidden = React.forwardRef(function VisuallyHidden(props: Props, ref: React.Ref<HTMLSpanElement>) {\r\n return <span {...props} className=\"sr-only\" ref={ref} />;\r\n});\r\n"],"names":["VisuallyHidden","React","props","ref","className"],"mappings":";;
|
1
|
+
{"version":3,"file":"VisuallyHidden.js","sources":["../../../../src/components/VisuallyHidden/VisuallyHidden.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\ntype Props = React.HTMLAttributes<HTMLSpanElement>;\r\n\r\nexport const VisuallyHidden = React.forwardRef(function VisuallyHidden(props: Props, ref: React.Ref<HTMLSpanElement>) {\r\n return <span {...props} className=\"sr-only\" ref={ref} />;\r\n});\r\n"],"names":["VisuallyHidden","React","props","ref","className"],"mappings":";;IAIaA,cAAc,gBAAGC,UAAA,CAAiB,SAASD,cAAT,CAAwBE,KAAxB,EAAsCC,GAAtC;EAC3C,OAAOF,aAAA,OAAA,oBAAUC;IAAOE,SAAS,EAAC;IAAUD,GAAG,EAAEA;IAA1C,CAAP;AACH,CAF6B;;;;"}
|
package/dist/esm/index.js
CHANGED
@@ -13,7 +13,6 @@ export { ToastProvider, useToast } from './components/Toast/Toaster.js';
|
|
13
13
|
export { Provider, defaultLocalisationTexts, useLocalization, useTaco } from './components/Provider/Provider.js';
|
14
14
|
export { Calendar } from './components/Calendar/Calendar.js';
|
15
15
|
export { Checkbox } from './components/Checkbox/Checkbox.js';
|
16
|
-
export { useProxiedRef } from './utils/hooks/useProxiedRef.js';
|
17
16
|
export { Input } from './components/Input/Input.js';
|
18
17
|
export { getNextIndexFromKeycode, useListKeyboardNavigation } from './utils/hooks/useListKeyboardNavigation.js';
|
19
18
|
export { useListScrollTo } from './utils/hooks/useListScrollTo.js';
|
package/dist/esm/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
@@ -1,8 +1,8 @@
|
|
1
1
|
import { useRef, useEffect } from 'react';
|
2
2
|
|
3
|
-
|
4
|
-
|
5
|
-
useEffect(
|
3
|
+
const useProxiedRef = ref => {
|
4
|
+
const internalRef = useRef(null);
|
5
|
+
useEffect(() => {
|
6
6
|
if (ref) {
|
7
7
|
if (typeof ref === 'function') {
|
8
8
|
ref(internalRef.current);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useProxiedRef.js","sources":["../../../../src/utils/hooks/useProxiedRef.ts"],"sourcesContent":["import * as React from 'react';\r\n\r\nexport const useProxiedRef = <T extends HTMLElement>(ref: React.Ref<HTMLElement>): React.RefObject<T> => {\r\n const internalRef = React.useRef<T>(null);\r\n\r\n React.useEffect(() => {\r\n if (ref) {\r\n if (typeof ref === 'function') {\r\n ref(internalRef.current);\r\n } else {\r\n (ref as React.MutableRefObject<HTMLElement | null>).current = internalRef.current;\r\n }\r\n }\r\n }, [ref]);\r\n\r\n return internalRef;\r\n};\r\n"],"names":["useProxiedRef","ref","internalRef","React","current"],"mappings":";;
|
1
|
+
{"version":3,"file":"useProxiedRef.js","sources":["../../../../src/utils/hooks/useProxiedRef.ts"],"sourcesContent":["import * as React from 'react';\r\n\r\nexport const useProxiedRef = <T extends HTMLElement>(ref: React.Ref<HTMLElement>): React.RefObject<T> => {\r\n const internalRef = React.useRef<T>(null);\r\n\r\n React.useEffect(() => {\r\n if (ref) {\r\n if (typeof ref === 'function') {\r\n ref(internalRef.current);\r\n } else {\r\n (ref as React.MutableRefObject<HTMLElement | null>).current = internalRef.current;\r\n }\r\n }\r\n }, [ref]);\r\n\r\n return internalRef;\r\n};\r\n"],"names":["useProxiedRef","ref","internalRef","React","current"],"mappings":";;MAEaA,aAAa,GAA2BC,GAAxB;EACzB,MAAMC,WAAW,GAAGC,MAAA,CAAgB,IAAhB,CAApB;EAEAA,SAAA,CAAgB;IACZ,IAAIF,GAAJ,EAAS;MACL,IAAI,OAAOA,GAAP,KAAe,UAAnB,EAA+B;QAC3BA,GAAG,CAACC,WAAW,CAACE,OAAb,CAAH;OADJ,MAEO;QACFH,GAAkD,CAACG,OAAnD,GAA6DF,WAAW,CAACE,OAAzE;;;GALb,EAQG,CAACH,GAAD,CARH;EAUA,OAAOC,WAAP;AACH;;;;"}
|
package/dist/index.d.ts
CHANGED
@@ -43,5 +43,4 @@ export * from './utils/hooks/useBoundingClientRectListener';
|
|
43
43
|
export * from './utils/hooks/useListKeyboardNavigation';
|
44
44
|
export * from './utils/hooks/useOnClickOutside';
|
45
45
|
export * from './utils/hooks/useListScrollTo';
|
46
|
-
export * from './utils/hooks/useProxiedRef';
|
47
46
|
export * from './types';
|