@doist/reactist 11.6.0 → 12.0.3
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/reactist.cjs.development.js +1334 -1494
- package/dist/reactist.cjs.development.js.map +1 -1
- package/dist/reactist.cjs.production.min.js +1 -1
- package/dist/reactist.cjs.production.min.js.map +1 -1
- package/es/_virtual/_rollupPluginBabelHelpers.js +18 -21
- package/es/_virtual/_rollupPluginBabelHelpers.js.map +1 -1
- package/es/components/checkbox/checkbox.js +7 -9
- package/es/components/checkbox/checkbox.js.map +1 -1
- package/es/components/color-picker/color-picker.js +24 -28
- package/es/components/color-picker/color-picker.js.map +1 -1
- package/es/components/deprecated-button/deprecated-button.js +16 -18
- package/es/components/deprecated-button/deprecated-button.js.map +1 -1
- package/es/components/deprecated-loading/deprecated-loading.js +7 -10
- package/es/components/deprecated-loading/deprecated-loading.js.map +1 -1
- package/es/components/deprecated-modal/deprecated-modal.js +69 -101
- package/es/components/deprecated-modal/deprecated-modal.js.map +1 -1
- package/es/components/deprecated-modal/index.js +4 -4
- package/es/components/deprecated-modal/index.js.map +1 -1
- package/es/components/dropdown/dropdown.js +86 -85
- package/es/components/dropdown/dropdown.js.map +1 -1
- package/es/components/icons/CloseIcon.svg.js +9 -11
- package/es/components/icons/CloseIcon.svg.js.map +1 -1
- package/es/components/input/input.js +4 -3
- package/es/components/input/input.js.map +1 -1
- package/es/components/key-capturer/key-capturer.js +22 -19
- package/es/components/key-capturer/key-capturer.js.map +1 -1
- package/es/components/keyboard-shortcut/keyboard-shortcut.js +20 -26
- package/es/components/keyboard-shortcut/keyboard-shortcut.js.map +1 -1
- package/es/components/menu/menu.js +114 -143
- package/es/components/menu/menu.js.map +1 -1
- package/es/components/notification/notification.js +32 -32
- package/es/components/notification/notification.js.map +1 -1
- package/es/components/popover/popover.js +85 -91
- package/es/components/popover/popover.js.map +1 -1
- package/es/components/popover/positioning-utils.js +49 -65
- package/es/components/popover/positioning-utils.js.map +1 -1
- package/es/components/progress-bar/progress-bar.js +8 -8
- package/es/components/progress-bar/progress-bar.js.map +1 -1
- package/es/components/select/select.js +20 -25
- package/es/components/select/select.js.map +1 -1
- package/es/components/time/time-utils.js +30 -47
- package/es/components/time/time-utils.js.map +1 -1
- package/es/components/time/time.js +43 -56
- package/es/components/time/time.js.map +1 -1
- package/es/components/tooltip/tooltip.js +40 -46
- package/es/components/tooltip/tooltip.js.map +1 -1
- package/es/hooks/use-previous/use-previous.js +2 -2
- package/es/hooks/use-previous/use-previous.js.map +1 -1
- package/es/new-components/alert/alert.js +7 -6
- package/es/new-components/alert/alert.js.map +1 -1
- package/es/new-components/avatar/avatar.js +19 -18
- package/es/new-components/avatar/avatar.js.map +1 -1
- package/es/new-components/avatar/utils.js +12 -9
- package/es/new-components/avatar/utils.js.map +1 -1
- package/es/new-components/base-button/base-button.js +25 -29
- package/es/new-components/base-button/base-button.js.map +1 -1
- package/es/new-components/base-field/base-field.js +20 -18
- package/es/new-components/base-field/base-field.js.map +1 -1
- package/es/new-components/box/box.js +51 -52
- package/es/new-components/box/box.js.map +1 -1
- package/es/new-components/button/button.js +13 -15
- package/es/new-components/button/button.js.map +1 -1
- package/es/new-components/button-link/button-link.js +13 -15
- package/es/new-components/button-link/button-link.js.map +1 -1
- package/es/new-components/checkbox-field/checkbox-field.js +25 -33
- package/es/new-components/checkbox-field/checkbox-field.js.map +1 -1
- package/es/new-components/checkbox-field/checkbox-icon.js +21 -19
- package/es/new-components/checkbox-field/checkbox-icon.js.map +1 -1
- package/es/new-components/columns/columns.js +24 -27
- package/es/new-components/columns/columns.js.map +1 -1
- package/es/new-components/common-helpers.js +3 -3
- package/es/new-components/common-helpers.js.map +1 -1
- package/es/new-components/divider/divider.js +7 -6
- package/es/new-components/divider/divider.js.map +1 -1
- package/es/new-components/heading/heading.js +17 -17
- package/es/new-components/heading/heading.js.map +1 -1
- package/es/new-components/hidden/hidden.js +14 -13
- package/es/new-components/hidden/hidden.js.map +1 -1
- package/es/new-components/hidden-visually/hidden-visually.js +3 -2
- package/es/new-components/hidden-visually/hidden-visually.js.map +1 -1
- package/es/new-components/icons/alert-icon.js +13 -11
- package/es/new-components/icons/alert-icon.js.map +1 -1
- package/es/new-components/icons/close-icon.js +2 -1
- package/es/new-components/icons/close-icon.js.map +1 -1
- package/es/new-components/icons/password-hidden-icon.js +2 -1
- package/es/new-components/icons/password-hidden-icon.js.map +1 -1
- package/es/new-components/icons/password-visible-icon.js +2 -1
- package/es/new-components/icons/password-visible-icon.js.map +1 -1
- package/es/new-components/inline/inline.js +15 -19
- package/es/new-components/inline/inline.js.map +1 -1
- package/es/new-components/loading/loading.js +11 -10
- package/es/new-components/loading/loading.js.map +1 -1
- package/es/new-components/modal/modal.js +60 -64
- package/es/new-components/modal/modal.js.map +1 -1
- package/es/new-components/notice/notice.js +5 -4
- package/es/new-components/notice/notice.js.map +1 -1
- package/es/new-components/password-field/password-field.js +40 -46
- package/es/new-components/password-field/password-field.js.map +1 -1
- package/es/new-components/responsive-props.js +5 -5
- package/es/new-components/responsive-props.js.map +1 -1
- package/es/new-components/select-field/select-field.js +23 -23
- package/es/new-components/select-field/select-field.js.map +1 -1
- package/es/new-components/spinner/spinner.js +3 -3
- package/es/new-components/spinner/spinner.js.map +1 -1
- package/es/new-components/stack/stack.js +18 -22
- package/es/new-components/stack/stack.js.map +1 -1
- package/es/new-components/switch-field/switch-field.js +31 -41
- package/es/new-components/switch-field/switch-field.js.map +1 -1
- package/es/new-components/tabs/tabs.js +92 -78
- package/es/new-components/tabs/tabs.js.map +1 -1
- package/es/new-components/tabs/tabs.module.css.js +1 -1
- package/es/new-components/text/text.js +16 -17
- package/es/new-components/text/text.js.map +1 -1
- package/es/new-components/text-area/text-area.js +14 -14
- package/es/new-components/text-area/text-area.js.map +1 -1
- package/es/new-components/text-field/text-field.js +21 -22
- package/es/new-components/text-field/text-field.js.map +1 -1
- package/es/new-components/text-link/text-link.js +10 -10
- package/es/new-components/text-link/text-link.js.map +1 -1
- package/es/utils/polymorphism.js.map +1 -1
- package/lib/_virtual/_rollupPluginBabelHelpers.js +1 -1
- package/lib/components/checkbox/checkbox.js +1 -1
- package/lib/components/checkbox/checkbox.js.map +1 -1
- package/lib/components/color-picker/color-picker.js +1 -1
- package/lib/components/color-picker/color-picker.js.map +1 -1
- package/lib/components/deprecated-button/deprecated-button.d.ts +3 -3
- package/lib/components/deprecated-button/deprecated-button.js +1 -1
- package/lib/components/deprecated-button/deprecated-button.js.map +1 -1
- package/lib/components/deprecated-loading/deprecated-loading.js +1 -1
- package/lib/components/deprecated-loading/deprecated-loading.js.map +1 -1
- package/lib/components/deprecated-modal/deprecated-modal.d.ts +2 -2
- package/lib/components/deprecated-modal/deprecated-modal.js +1 -1
- package/lib/components/deprecated-modal/deprecated-modal.js.map +1 -1
- package/lib/components/deprecated-modal/index.js.map +1 -1
- package/lib/components/dropdown/dropdown.d.ts +5 -2
- package/lib/components/dropdown/dropdown.js +1 -1
- package/lib/components/dropdown/dropdown.js.map +1 -1
- package/lib/components/icons/CloseIcon.svg.js +1 -1
- package/lib/components/icons/CloseIcon.svg.js.map +1 -1
- package/lib/components/input/input.js +1 -1
- package/lib/components/input/input.js.map +1 -1
- package/lib/components/key-capturer/key-capturer.d.ts +1 -1
- package/lib/components/key-capturer/key-capturer.js +1 -1
- package/lib/components/key-capturer/key-capturer.js.map +1 -1
- package/lib/components/keyboard-shortcut/keyboard-shortcut.js +1 -1
- package/lib/components/keyboard-shortcut/keyboard-shortcut.js.map +1 -1
- package/lib/components/menu/menu.d.ts +9 -8
- package/lib/components/menu/menu.js +1 -1
- package/lib/components/menu/menu.js.map +1 -1
- package/lib/components/notification/notification.js +1 -1
- package/lib/components/notification/notification.js.map +1 -1
- package/lib/components/popover/popover.d.ts +1 -1
- package/lib/components/popover/popover.js +1 -1
- package/lib/components/popover/popover.js.map +1 -1
- package/lib/components/popover/positioning-utils.js +1 -1
- package/lib/components/popover/positioning-utils.js.map +1 -1
- package/lib/components/progress-bar/progress-bar.js +1 -1
- package/lib/components/progress-bar/progress-bar.js.map +1 -1
- package/lib/components/select/select.js +1 -1
- package/lib/components/select/select.js.map +1 -1
- package/lib/components/time/time-utils.js +1 -1
- package/lib/components/time/time-utils.js.map +1 -1
- package/lib/components/time/time.js +1 -1
- package/lib/components/time/time.js.map +1 -1
- package/lib/components/tooltip/index.d.ts +1 -2
- package/lib/components/tooltip/tooltip.d.ts +3 -3
- package/lib/components/tooltip/tooltip.js +1 -1
- package/lib/components/tooltip/tooltip.js.map +1 -1
- package/lib/hooks/use-previous/use-previous.js +1 -1
- package/lib/hooks/use-previous/use-previous.js.map +1 -1
- package/lib/index.d.ts +2 -1
- package/lib/new-components/alert/alert.d.ts +1 -1
- package/lib/new-components/alert/alert.js +1 -1
- package/lib/new-components/alert/alert.js.map +1 -1
- package/lib/new-components/avatar/avatar.js +1 -1
- package/lib/new-components/avatar/avatar.js.map +1 -1
- package/lib/new-components/avatar/utils.d.ts +1 -1
- package/lib/new-components/avatar/utils.js +1 -1
- package/lib/new-components/avatar/utils.js.map +1 -1
- package/lib/new-components/base-button/base-button.js +1 -1
- package/lib/new-components/base-button/base-button.js.map +1 -1
- package/lib/new-components/base-field/base-field.d.ts +1 -1
- package/lib/new-components/base-field/base-field.js +1 -1
- package/lib/new-components/base-field/base-field.js.map +1 -1
- package/lib/new-components/box/box.js +1 -1
- package/lib/new-components/box/box.js.map +1 -1
- package/lib/new-components/button/button.d.ts +1 -58
- package/lib/new-components/button/button.js +1 -1
- package/lib/new-components/button/button.js.map +1 -1
- package/lib/new-components/button-link/button-link.js +1 -1
- package/lib/new-components/button-link/button-link.js.map +1 -1
- package/lib/new-components/checkbox-field/checkbox-field.d.ts +1 -1
- package/lib/new-components/checkbox-field/checkbox-field.js +1 -1
- package/lib/new-components/checkbox-field/checkbox-field.js.map +1 -1
- package/lib/new-components/checkbox-field/checkbox-icon.js +1 -1
- package/lib/new-components/checkbox-field/checkbox-icon.js.map +1 -1
- package/lib/new-components/columns/columns.js +1 -1
- package/lib/new-components/columns/columns.js.map +1 -1
- package/lib/new-components/common-helpers.js +1 -1
- package/lib/new-components/common-helpers.js.map +1 -1
- package/lib/new-components/common-types.d.ts +1 -1
- package/lib/new-components/divider/divider.js +1 -1
- package/lib/new-components/divider/divider.js.map +1 -1
- package/lib/new-components/heading/heading.d.ts +2 -2
- package/lib/new-components/heading/heading.js +1 -1
- package/lib/new-components/heading/heading.js.map +1 -1
- package/lib/new-components/hidden/hidden.js +1 -1
- package/lib/new-components/hidden/hidden.js.map +1 -1
- package/lib/new-components/hidden-visually/hidden-visually.js +1 -1
- package/lib/new-components/hidden-visually/hidden-visually.js.map +1 -1
- package/lib/new-components/icons/alert-icon.d.ts +1 -1
- package/lib/new-components/icons/alert-icon.js +1 -1
- package/lib/new-components/icons/alert-icon.js.map +1 -1
- package/lib/new-components/icons/close-icon.js +1 -1
- package/lib/new-components/icons/close-icon.js.map +1 -1
- package/lib/new-components/icons/password-hidden-icon.js +1 -1
- package/lib/new-components/icons/password-hidden-icon.js.map +1 -1
- package/lib/new-components/icons/password-visible-icon.js +1 -1
- package/lib/new-components/icons/password-visible-icon.js.map +1 -1
- package/lib/new-components/inline/inline.js +1 -1
- package/lib/new-components/inline/inline.js.map +1 -1
- package/lib/new-components/loading/loading.js +1 -1
- package/lib/new-components/loading/loading.js.map +1 -1
- package/lib/new-components/modal/modal.js +1 -1
- package/lib/new-components/modal/modal.js.map +1 -1
- package/lib/new-components/notice/notice.d.ts +1 -1
- package/lib/new-components/notice/notice.js +1 -1
- package/lib/new-components/notice/notice.js.map +1 -1
- package/lib/new-components/password-field/password-field.d.ts +1 -1
- package/lib/new-components/password-field/password-field.js +1 -1
- package/lib/new-components/password-field/password-field.js.map +1 -1
- package/lib/new-components/responsive-props.d.ts +1 -1
- package/lib/new-components/responsive-props.js +1 -1
- package/lib/new-components/responsive-props.js.map +1 -1
- package/lib/new-components/select-field/select-field.d.ts +1 -1
- package/lib/new-components/select-field/select-field.js +1 -1
- package/lib/new-components/select-field/select-field.js.map +1 -1
- package/lib/new-components/spinner/spinner.js +1 -1
- package/lib/new-components/spinner/spinner.js.map +1 -1
- package/lib/new-components/stack/stack.js +1 -1
- package/lib/new-components/stack/stack.js.map +1 -1
- package/lib/new-components/switch-field/switch-field.d.ts +1 -1
- package/lib/new-components/switch-field/switch-field.js +1 -1
- package/lib/new-components/switch-field/switch-field.js.map +1 -1
- package/lib/new-components/tabs/tabs.d.ts +13 -3
- package/lib/new-components/tabs/tabs.js +1 -1
- package/lib/new-components/tabs/tabs.js.map +1 -1
- package/lib/new-components/tabs/tabs.module.css.js +1 -1
- package/lib/new-components/test-helpers.d.ts +4 -3
- package/lib/new-components/text/text.js +1 -1
- package/lib/new-components/text/text.js.map +1 -1
- package/lib/new-components/text-area/text-area.js +1 -1
- package/lib/new-components/text-area/text-area.js.map +1 -1
- package/lib/new-components/text-field/text-field.d.ts +1 -1
- package/lib/new-components/text-field/text-field.js +1 -1
- package/lib/new-components/text-field/text-field.js.map +1 -1
- package/lib/new-components/text-link/text-link.js +1 -1
- package/lib/new-components/text-link/text-link.js.map +1 -1
- package/lib/utils/polymorphism.js.map +1 -1
- package/package.json +45 -38
- package/styles/menu.css +1 -1
- package/styles/reactist.css +2 -2
- package/styles/tabs.css +1 -1
- package/styles/tabs.module.css.css +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { TooltipProps as
|
|
3
|
-
import { PopoverState } from '
|
|
2
|
+
import { TooltipProps as AriakitTooltipProps } from 'ariakit/tooltip';
|
|
3
|
+
import type { PopoverState } from 'ariakit/popover';
|
|
4
4
|
import './tooltip.less';
|
|
5
|
-
declare type TooltipProps = Omit<
|
|
5
|
+
declare type TooltipProps = Omit<AriakitTooltipProps, 'children' | 'state'> & {
|
|
6
6
|
children: React.ReactNode;
|
|
7
7
|
content: React.ReactNode | (() => React.ReactNode);
|
|
8
8
|
position?: PopoverState['placement'];
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),
|
|
1
|
+
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),o=e(require("react")),n=e(require("classnames")),r=require("ariakit/tooltip");const c=["children","content","position","gapSize","className"];exports.HIDE_DELAY=100,exports.SHOW_DELAY=500,exports.Tooltip=function(e){let{children:u,content:l,position:s="top",gapSize:a=3,className:i}=e,p=t.objectWithoutProperties(e,c);const f=function(e){const n=r.useTooltipState(e),c=function(){const e=o.useRef(),t=o.useCallback((function(){null!=e.current&&clearTimeout(e.current)}),[]);return o.useEffect(()=>t,[t]),o.useCallback((function(o,n){return()=>{t(),e.current=setTimeout(o,n)}}),[t])}();return o.useMemo(()=>t.objectSpread2(t.objectSpread2({},n),{},{show:c(()=>n.show(),500),hide:c(()=>n.hide(),100)}),[c,n])}({placement:s,gutter:a}),d=o.Children.only(u);return l?o.createElement(o.Fragment,null,o.createElement(r.TooltipAnchor,t.objectSpread2(t.objectSpread2({state:f},d.props),{},{ref:d.ref,onFocus:function(e){var t;e.currentTarget.addEventListener("keyup",(function(e){const t=e.key;"Escape"!==t&&"Enter"!==t&&"Space"!==t&&f.show()}),{once:!0}),e.preventDefault(),null==d||null==(t=d.props)||null==t.onFocus||t.onFocus(e)}}),e=>o.cloneElement(d,e)),f.visible?o.createElement(r.Tooltip,t.objectSpread2(t.objectSpread2({},p),{},{state:f,className:n("reactist_tooltip",i)}),"function"==typeof l?l():l):null):d};
|
|
2
2
|
//# sourceMappingURL=tooltip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.js","sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport {\n useTooltipState,\n
|
|
1
|
+
{"version":3,"file":"tooltip.js","sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport {\n useTooltipState as useAriakitTooltipState,\n TooltipStateProps as AriakitTooltipStateProps,\n Tooltip as AriakitTooltip,\n TooltipProps as AriakitTooltipProps,\n TooltipAnchor,\n TooltipAnchorProps,\n} from 'ariakit/tooltip'\nimport type { PopoverState } from 'ariakit/popover'\n\nimport './tooltip.less'\n\ntype TooltipProps = Omit<AriakitTooltipProps, 'children' | 'state'> & {\n children: React.ReactNode\n content: React.ReactNode | (() => React.ReactNode)\n position?: PopoverState['placement']\n gapSize?: number\n}\n\n// These are exported to be used in the tests, they are not meant to be exported publicly\nexport const SHOW_DELAY = 500\nexport const HIDE_DELAY = 100\n\nfunction useDelayedTooltipState(initialState: AriakitTooltipStateProps) {\n const tooltipState = useAriakitTooltipState(initialState)\n const delay = useDelay()\n return React.useMemo(\n () => ({\n ...tooltipState,\n show: delay(() => tooltipState.show(), SHOW_DELAY),\n hide: delay(() => tooltipState.hide(), HIDE_DELAY),\n }),\n [delay, tooltipState],\n )\n}\n\nfunction Tooltip({\n children,\n content,\n position = 'top',\n gapSize = 3,\n className,\n ...props\n}: TooltipProps) {\n const state = useDelayedTooltipState({ placement: position, gutter: gapSize })\n\n const child = React.Children.only(\n children as React.FunctionComponentElement<JSX.IntrinsicElements['div'] | null>,\n )\n if (!content) {\n return child\n }\n\n /**\n * Prevents the tooltip from automatically firing on focus all the time. This is to prevent\n * tooltips from showing when the trigger element is focused back after a popover or dialog that\n * it opened was closed. See link below for more details.\n * @see https://github.com/reakit/reakit/discussions/749\n */\n function handleFocus(event: React.FocusEvent<HTMLDivElement>) {\n // If focus is not followed by a key up event, does it mean that it's not\n // an intentional keyboard focus? Not sure but it seems to work.\n // This may be resolved soon in an upcoming version of reakit:\n // https://github.com/reakit/reakit/issues/750\n function handleKeyUp(e: Event) {\n const eventKey = (e as KeyboardEvent).key\n if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {\n state.show()\n }\n }\n event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n // Prevent tooltip.show from being called by TooltipReference\n event.preventDefault()\n child?.props?.onFocus?.(event)\n }\n\n return (\n <>\n <TooltipAnchor state={state} {...child.props} ref={child.ref} onFocus={handleFocus}>\n {(anchorProps: TooltipAnchorProps) => {\n return React.cloneElement(child, anchorProps)\n }}\n </TooltipAnchor>\n {state.visible ? (\n <AriakitTooltip\n {...props}\n state={state}\n className={classNames('reactist_tooltip', className)}\n >\n {typeof content === 'function' ? content() : content}\n </AriakitTooltip>\n ) : null}\n </>\n )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n\n//\n// Internal helpers\n//\n\n/**\n * Returns a function offering the same interface as setTimeout, but cleans up on unmount.\n *\n * The timeout state is shared, and only one delayed function can be active at any given time. If\n * a new delayed function is called while another one was waiting for its time to run, that older\n * invocation is cleared and it never runs.\n *\n * This is suitable for our use case here, but probably not the most intuitive thing in general.\n * That's why this is not made a shared util or something like it.\n */\nfunction useDelay() {\n const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>()\n\n const clearTimeouts = React.useCallback(function clearTimeouts() {\n if (timeoutRef.current != null) {\n clearTimeout(timeoutRef.current)\n }\n }, [])\n\n // Runs clearTimeouts when the component is unmounted\n React.useEffect(() => clearTimeouts, [clearTimeouts])\n\n return React.useCallback(\n function delay(fn: () => void, delay: number) {\n return () => {\n clearTimeouts()\n timeoutRef.current = setTimeout(fn, delay)\n }\n },\n [clearTimeouts],\n )\n}\n"],"names":["children","content","position","gapSize","className","props","state","initialState","tooltipState","useAriakitTooltipState","delay","timeoutRef","React","useRef","clearTimeouts","useCallback","current","clearTimeout","useEffect","fn","setTimeout","useDelay","useMemo","show","hide","useDelayedTooltipState","placement","gutter","child","Children","only","TooltipAnchor","ref","onFocus","event","currentTarget","addEventListener","e","eventKey","key","once","preventDefault","anchorProps","cloneElement","visible","AriakitTooltip","classNames"],"mappings":"wWAwB0B,uBADA,oBAgB1B,gBAAiBA,SACbA,EADaC,QAEbA,EAFaC,SAGbA,EAAW,MAHEC,QAIbA,EAAU,EAJGC,UAKbA,KACGC,iCAEH,MAAMC,EArBV,SAAgCC,GAC5B,MAAMC,EAAeC,kBAAuBF,GACtCG,EAwFV,WACI,MAAMC,EAAaC,EAAMC,SAEnBC,EAAgBF,EAAMG,aAAY,WACV,MAAtBJ,EAAWK,SACXC,aAAaN,EAAWK,WAE7B,IAKH,OAFAJ,EAAMM,UAAU,IAAMJ,EAAe,CAACA,IAE/BF,EAAMG,aACT,SAAeI,EAAgBT,GAC3B,MAAO,KACHI,IACAH,EAAWK,QAAUI,WAAWD,EAAIT,MAG5C,CAACI,IA3GSO,GACd,OAAOT,EAAMU,QACT,uCACOd,OACHe,KAAMb,EAAM,IAAMF,EAAae,OATjB,KAUdC,KAAMd,EAAM,IAAMF,EAAagB,OATjB,OAWlB,CAACd,EAAOF,IAYEiB,CAAuB,CAAEC,UAAWxB,EAAUyB,OAAQxB,IAE9DyB,EAAQhB,EAAMiB,SAASC,KACzB9B,GAEJ,OAAKC,EA4BDW,gCACIA,gBAACmB,iDAAczB,MAAOA,GAAWsB,EAAMvB,WAAO2B,IAAKJ,EAAMI,IAAKC,QAnBtE,SAAqBC,SAWjBA,EAAMC,cAAcC,iBAAiB,SANrC,SAAqBC,GACjB,MAAMC,EAAYD,EAAoBE,IACrB,WAAbD,GAAsC,UAAbA,GAAqC,UAAbA,GACjDhC,EAAMiB,SAG6C,CAAEiB,MAAM,IAEnEN,EAAMO,uBACNb,YAAAA,EAAOvB,gBAAO4B,WAAAA,QAAUC,MAMdQ,GACS9B,EAAM+B,aAAaf,EAAOc,IAGxCpC,EAAMsC,QACHhC,gBAACiC,6CACOxC,OACJC,MAAOA,EACPF,UAAW0C,EAAW,mBAAoB1C,KAEtB,mBAAZH,EAAyBA,IAAYA,GAEjD,MAzCD2B"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.usePrevious=function(r){
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.usePrevious=function(r){const t=e.useRef(null);return e.useEffect(()=>{t.current=r},[r]),t.current};
|
|
2
2
|
//# sourceMappingURL=use-previous.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-previous.js","sources":["../../../src/hooks/use-previous/use-previous.ts"],"sourcesContent":["import * as React from 'react'\n\n/**\n * usePrevious tracks the change of the given value -\n * when a given value has been changed from a previous call,\n * it will return the value prior to the change.\n *\n * Example:\n *\n * const [x, setX] = useState(1)\n * const prevX = usePrevious(x)\n *\n * Suppose `setX(2)` is called, then in the next component render\n * x = 2 and prevX = 1\n */\nfunction usePrevious<T>(value: T): T | null {\n const ref = React.useRef<T | null>(null)\n\n React.useEffect(() => {\n ref.current = value\n }, [value])\n\n return ref.current\n}\n\nexport { usePrevious }\n"],"names":["value","ref","React","current"],"mappings":"+GAeA,SAAwBA,
|
|
1
|
+
{"version":3,"file":"use-previous.js","sources":["../../../src/hooks/use-previous/use-previous.ts"],"sourcesContent":["import * as React from 'react'\n\n/**\n * usePrevious tracks the change of the given value -\n * when a given value has been changed from a previous call,\n * it will return the value prior to the change.\n *\n * Example:\n *\n * const [x, setX] = useState(1)\n * const prevX = usePrevious(x)\n *\n * Suppose `setX(2)` is called, then in the next component render\n * x = 2 and prevX = 1\n */\nfunction usePrevious<T>(value: T): T | null {\n const ref = React.useRef<T | null>(null)\n\n React.useEffect(() => {\n ref.current = value\n }, [value])\n\n return ref.current\n}\n\nexport { usePrevious }\n"],"names":["value","ref","React","current"],"mappings":"+GAeA,SAAwBA,GACpB,MAAMC,EAAMC,SAAuB,MAMnC,OAJAA,YAAgB,KACZD,EAAIE,QAAUH,GACf,CAACA,IAEGC,EAAIE"}
|
package/lib/index.d.ts
CHANGED
|
@@ -35,7 +35,8 @@ export { default as ProgressBar } from './components/progress-bar';
|
|
|
35
35
|
export { default as Select } from './components/select';
|
|
36
36
|
export { default as Time } from './components/time';
|
|
37
37
|
export { Notification } from './components/notification/notification';
|
|
38
|
-
export { Tooltip
|
|
38
|
+
export { Tooltip } from './components/tooltip';
|
|
39
|
+
export type { TooltipProps } from './components/tooltip';
|
|
39
40
|
export * from './components/menu';
|
|
40
41
|
export { default as DeprecatedButton } from './components/deprecated-button';
|
|
41
42
|
export { default as DeprecatedModal } from './components/deprecated-modal';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),l=require("../responsive-props.js"),t=require("../box/box.js"),n=require("../columns/columns.js"),r=require("../button/button.js"),a=require("../icons/alert-icon.js"),o=require("../icons/close-icon.js"),s=require("./alert.module.css.js");exports.Alert=function(
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),l=require("../responsive-props.js"),t=require("../box/box.js"),n=require("../columns/columns.js"),r=require("../button/button.js"),a=require("../icons/alert-icon.js"),o=require("../icons/close-icon.js"),s=require("./alert.module.css.js");exports.Alert=function({id:i,children:u,tone:c,closeLabel:m,onClose:d}){return e.createElement(t.Box,{id:i,role:"alert","aria-live":"polite",borderRadius:"standard",className:[s.default.container,l.getClassNames(s.default,"tone",c)]},e.createElement(n.Columns,{space:"small",alignY:"top"},e.createElement(n.Column,{width:"content"},e.createElement(a.AlertIcon,{tone:c})),e.createElement(n.Column,null,e.createElement(t.Box,{paddingY:"xsmall",paddingRight:null!=d&&null!=m?void 0:"small"},u)),null!=d&&null!=m?e.createElement(n.Column,{width:"content"},e.createElement(r.Button,{variant:"quaternary",size:"small",onClick:d,"aria-label":m,icon:e.createElement(o.CloseIcon,null),style:{"--reactist-btn-hover-fill":"transparent"}})):null))};
|
|
2
2
|
//# sourceMappingURL=alert.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert.js","sources":["../../../src/new-components/alert/alert.tsx"],"sourcesContent":["import * as React from 'react'\nimport {
|
|
1
|
+
{"version":3,"file":"alert.js","sources":["../../../src/new-components/alert/alert.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../responsive-props'\nimport { Box } from '../box'\nimport { Button } from '../button'\nimport { Columns, Column } from '../columns'\n\nimport { AlertIcon } from '../icons/alert-icon'\nimport { CloseIcon } from '../icons/close-icon'\n\nimport styles from './alert.module.css'\n\nimport type { AlertTone } from '../common-types'\n\ntype AllOrNone<T> = T | { [K in keyof T]?: never }\n\ntype AlertCloseProps = AllOrNone<{\n closeLabel: string\n onClose: () => void\n}>\n\ntype AlertProps = {\n id?: string\n children: React.ReactNode\n tone: AlertTone\n} & AlertCloseProps\n\nfunction Alert({ id, children, tone, closeLabel, onClose }: AlertProps) {\n return (\n <Box\n id={id}\n role=\"alert\"\n aria-live=\"polite\"\n borderRadius=\"standard\"\n className={[styles.container, getClassNames(styles, 'tone', tone)]}\n >\n <Columns space=\"small\" alignY=\"top\">\n <Column width=\"content\">\n <AlertIcon tone={tone} />\n </Column>\n <Column>\n <Box\n paddingY=\"xsmall\"\n paddingRight={onClose != null && closeLabel != null ? undefined : 'small'}\n >\n {children}\n </Box>\n </Column>\n {onClose != null && closeLabel != null ? (\n <Column width=\"content\">\n <Button\n variant=\"quaternary\"\n size=\"small\"\n onClick={onClose}\n aria-label={closeLabel}\n icon={<CloseIcon />}\n style={{\n // @ts-expect-error not sure how to make TypeScript understand custom CSS properties\n '--reactist-btn-hover-fill': 'transparent',\n }}\n />\n </Column>\n ) : null}\n </Columns>\n </Box>\n )\n}\n\nexport { Alert }\nexport type { AlertProps }\n"],"names":["id","children","tone","closeLabel","onClose","React","Box","role","borderRadius","className","styles","container","getClassNames","Columns","space","alignY","Column","width","AlertIcon","paddingY","paddingRight","undefined","Button","variant","size","onClick","icon","CloseIcon","style","--reactist-btn-hover-fill"],"mappings":"uVA0BA,UAAeA,GAAEA,EAAFC,SAAMA,EAANC,KAAgBA,EAAhBC,WAAsBA,EAAtBC,QAAkCA,IAC7C,OACIC,gBAACC,OACGN,GAAIA,EACJO,KAAK,oBACK,SACVC,aAAa,WACbC,UAAW,CAACC,UAAOC,UAAWC,gBAAcF,UAAQ,OAAQR,KAE5DG,gBAACQ,WAAQC,MAAM,QAAQC,OAAO,OAC1BV,gBAACW,UAAOC,MAAM,WACVZ,gBAACa,aAAUhB,KAAMA,KAErBG,gBAACW,cACGX,gBAACC,OACGa,SAAS,SACTC,aAAyB,MAAXhB,GAAiC,MAAdD,OAAqBkB,EAAY,SAEjEpB,IAGG,MAAXG,GAAiC,MAAdD,EAChBE,gBAACW,UAAOC,MAAM,WACVZ,gBAACiB,UACGC,QAAQ,aACRC,KAAK,QACLC,QAASrB,eACGD,EACZuB,KAAMrB,gBAACsB,kBACPC,MAAO,CAEHC,4BAA6B,kBAIzC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,a=require("../../_virtual/_rollupPluginBabelHelpers.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,a=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,r=require("../responsive-props.js"),s=require("../box/box.js"),l=require("./utils.js"),i=require("./avatar.module.css.js");const o=["user","avatarUrl","size","className","colorList","exceptionallySetClassName"],c=["#fcc652","#e9952c","#e16b2d","#d84b40","#e8435a","#e5198a","#ad3889","#86389c","#a8a8a8","#98be2f","#5d9d50","#5f9f85","#5bbcb6","#32a3bf","#2bafeb","#2d88c3","#3863cc","#5e5e5e"];function u(e){let{user:u,avatarUrl:n,size:d="l",className:b,colorList:p=c,exceptionallySetClassName:m}=e,f=a.objectWithoutProperties(e,o);const v=l.getInitials(u.name)||l.getInitials(u.email),x=d||"l",j=n?{backgroundImage:"url("+n+")",textIndent:"-9999px"}:{backgroundColor:p[l.emailToIndex(u.email,p.length)]},g=r.getClassNames(i.default,"size",x);return t.createElement(s.Box,a.objectSpread2({className:[b,i.default.avatar,g,m],style:j},f),v)}u.displayName="Avatar",exports.Avatar=u;
|
|
2
2
|
//# sourceMappingURL=avatar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.js","sources":["../../../src/new-components/avatar/avatar.tsx"],"sourcesContent":["import React from 'react'\n\nimport { getInitials, emailToIndex } from './utils'\n\nimport { getClassNames, ResponsiveProp } from '../responsive-props'\nimport styles from './avatar.module.css'\nimport { Box } from '../box'\n\nconst AVATAR_COLORS = [\n '#fcc652',\n '#e9952c',\n '#e16b2d',\n '#d84b40',\n '#e8435a',\n '#e5198a',\n '#ad3889',\n '#86389c',\n '#a8a8a8',\n '#98be2f',\n '#5d9d50',\n '#5f9f85',\n '#5bbcb6',\n '#32a3bf',\n '#2bafeb',\n '#2d88c3',\n '#3863cc',\n '#5e5e5e',\n]\n\ntype AvatarSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl'\n\ntype Props = {\n /** @deprecated Please use `exceptionallySetClassName` */\n className?: string\n exceptionallySetClassName?: string\n /** @deprecated */\n colorList?: string[]\n size?: ResponsiveProp<AvatarSize>\n avatarUrl?: string\n user: { name?: string; email: string }\n}\n\nfunction Avatar({\n user,\n avatarUrl,\n size = 'l',\n className,\n colorList = AVATAR_COLORS,\n exceptionallySetClassName,\n ...props\n}: Props) {\n const userInitials = getInitials(user.name) || getInitials(user.email)\n const avatarSize = size ? size : 'l'\n\n const style = avatarUrl\n ? {\n backgroundImage: `url(${avatarUrl})`,\n textIndent: '-9999px', // hide the initials\n }\n : {\n backgroundColor: colorList[emailToIndex(user.email, colorList.length)],\n }\n\n const sizeClassName = getClassNames(styles, 'size', avatarSize)\n\n return (\n <Box\n className={[className, styles.avatar, sizeClassName, exceptionallySetClassName]}\n style={style}\n {...props}\n >\n {userInitials}\n </Box>\n )\n}\nAvatar.displayName = 'Avatar'\n\nexport { Avatar }\n"],"names":["AVATAR_COLORS","Avatar","user","avatarUrl","size","className","colorList","exceptionallySetClassName","props","userInitials","getInitials","name","email","avatarSize","style","backgroundImage","textIndent","backgroundColor","emailToIndex","length","sizeClassName","getClassNames","styles","React","Box","avatar","displayName"],"mappings":"
|
|
1
|
+
{"version":3,"file":"avatar.js","sources":["../../../src/new-components/avatar/avatar.tsx"],"sourcesContent":["import React from 'react'\n\nimport { getInitials, emailToIndex } from './utils'\n\nimport { getClassNames, ResponsiveProp } from '../responsive-props'\nimport styles from './avatar.module.css'\nimport { Box } from '../box'\n\nconst AVATAR_COLORS = [\n '#fcc652',\n '#e9952c',\n '#e16b2d',\n '#d84b40',\n '#e8435a',\n '#e5198a',\n '#ad3889',\n '#86389c',\n '#a8a8a8',\n '#98be2f',\n '#5d9d50',\n '#5f9f85',\n '#5bbcb6',\n '#32a3bf',\n '#2bafeb',\n '#2d88c3',\n '#3863cc',\n '#5e5e5e',\n]\n\ntype AvatarSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl'\n\ntype Props = {\n /** @deprecated Please use `exceptionallySetClassName` */\n className?: string\n exceptionallySetClassName?: string\n /** @deprecated */\n colorList?: string[]\n size?: ResponsiveProp<AvatarSize>\n avatarUrl?: string\n user: { name?: string; email: string }\n}\n\nfunction Avatar({\n user,\n avatarUrl,\n size = 'l',\n className,\n colorList = AVATAR_COLORS,\n exceptionallySetClassName,\n ...props\n}: Props) {\n const userInitials = getInitials(user.name) || getInitials(user.email)\n const avatarSize = size ? size : 'l'\n\n const style = avatarUrl\n ? {\n backgroundImage: `url(${avatarUrl})`,\n textIndent: '-9999px', // hide the initials\n }\n : {\n backgroundColor: colorList[emailToIndex(user.email, colorList.length)],\n }\n\n const sizeClassName = getClassNames(styles, 'size', avatarSize)\n\n return (\n <Box\n className={[className, styles.avatar, sizeClassName, exceptionallySetClassName]}\n style={style}\n {...props}\n >\n {userInitials}\n </Box>\n )\n}\nAvatar.displayName = 'Avatar'\n\nexport { Avatar }\n"],"names":["AVATAR_COLORS","Avatar","user","avatarUrl","size","className","colorList","exceptionallySetClassName","props","userInitials","getInitials","name","email","avatarSize","style","backgroundImage","textIndent","backgroundColor","emailToIndex","length","sizeClassName","getClassNames","styles","React","Box","avatar","displayName"],"mappings":"4ZAQMA,EAAgB,CAClB,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,WAgBJ,SAASC,SAAOC,KACZA,EADYC,UAEZA,EAFYC,KAGZA,EAAO,IAHKC,UAIZA,EAJYC,UAKZA,EAAYN,EALAO,0BAMZA,KACGC,iCAEH,MAAMC,EAAeC,cAAYR,EAAKS,OAASD,cAAYR,EAAKU,OAC1DC,EAAaT,GAAc,IAE3BU,EAAQX,EACR,CACIY,uBAAwBZ,MACxBa,WAAY,WAEhB,CACIC,gBAAiBX,EAAUY,eAAahB,EAAKU,MAAON,EAAUa,UAGlEC,EAAgBC,gBAAcC,UAAQ,OAAQT,GAEpD,OACIU,gBAACC,uBACGnB,UAAW,CAACA,EAAWiB,UAAOG,OAAQL,EAAeb,GACrDO,MAAOA,GACHN,GAEHC,GAIbR,EAAOyB,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.emailToIndex=function(e
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.emailToIndex=function(t,e){const l=t.split("@")[0];return(l&&l.charCodeAt(0)+l.charCodeAt(l.length-1)||0)%e},exports.getInitials=function(t){var e;if(!t)return"";const l=t.trim().split(" "),n=l[0],r=l[l.length-1];let o=null==n?void 0:n[0];return null!=n&&null!=r&&null!=o&&n[0]!==r[0]&&(o+=r[0]),null==(e=o)?void 0:e.toUpperCase()};
|
|
2
2
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../../src/new-components/avatar/utils.ts"],"sourcesContent":["function getInitials(name?: string) {\n if (!name) {\n return ''\n }\n\n const seed = name.trim().split(' ')\n const firstInitial = seed[0]\n const lastInitial = seed[seed.length - 1]\n\n let initials = firstInitial[0]\n // Better readable this way.\n
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../src/new-components/avatar/utils.ts"],"sourcesContent":["function getInitials(name?: string) {\n if (!name) {\n return ''\n }\n\n const seed = name.trim().split(' ')\n const firstInitial = seed[0]\n const lastInitial = seed[seed.length - 1]\n\n let initials = firstInitial?.[0]\n if (\n firstInitial != null &&\n lastInitial != null &&\n initials != null &&\n // Better readable this way.\n // eslint-disable-next-line @typescript-eslint/prefer-string-starts-ends-with\n firstInitial[0] !== lastInitial[0]\n ) {\n initials += lastInitial[0]\n }\n return initials?.toUpperCase()\n}\n\nfunction emailToIndex(email: string, maxIndex: number) {\n const seed = email.split('@')[0]\n const hash = seed ? seed.charCodeAt(0) + seed.charCodeAt(seed.length - 1) || 0 : 0\n return hash % maxIndex\n}\n\nexport { getInitials, emailToIndex }\n"],"names":["email","maxIndex","seed","split","charCodeAt","length","name","trim","firstInitial","lastInitial","initials","_initials","toUpperCase"],"mappings":"yFAuBA,SAAsBA,EAAeC,GACjC,MAAMC,EAAOF,EAAMG,MAAM,KAAK,GAE9B,OADaD,GAAOA,EAAKE,WAAW,GAAKF,EAAKE,WAAWF,EAAKG,OAAS,IAAU,GACnEJ,uBA1BlB,SAAqBK,SACjB,IAAKA,EACD,MAAO,GAGX,MAAMJ,EAAOI,EAAKC,OAAOJ,MAAM,KACzBK,EAAeN,EAAK,GACpBO,EAAcP,EAAKA,EAAKG,OAAS,GAEvC,IAAIK,QAAWF,SAAAA,EAAe,GAW9B,OAToB,MAAhBA,GACe,MAAfC,GACY,MAAZC,GAGAF,EAAa,KAAOC,EAAY,KAEhCC,GAAYD,EAAY,aAErBC,UAAAC,EAAUC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),t=require("../../utils/polymorphism.js"),n=require("../box/box.js"),a=require("../../components/tooltip/tooltip.js"),i=require("../spinner/spinner.js"),o=require("./base-button.module.css.js")
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),t=require("../../utils/polymorphism.js"),n=require("../box/box.js"),a=require("../../components/tooltip/tooltip.js"),i=require("../spinner/spinner.js"),o=require("./base-button.module.css.js");const r=["as","variant","tone","size","disabled","loading","tooltip","tooltipGapSize","onClick","exceptionallySetClassName","children","startIcon","endIcon","icon","width","align"];function s(e){e.preventDefault()}exports.BaseButton=t.polymorphicComponent((function(t,u){let{as:c="div",variant:d,tone:p="normal",size:m="normal",disabled:f=!1,loading:b=!1,tooltip:x,tooltipGapSize:h,onClick:j,exceptionallySetClassName:S,children:v,startIcon:E,endIcon:g,icon:B,width:q="auto",align:y}=t,z=e.objectWithoutProperties(t,r);const C=b||f,I=l.createElement(n.Box,e.objectSpread2(e.objectSpread2({},z),{},{as:c,ref:u,"aria-disabled":C,onClick:C?s:j,width:B?void 0:q,className:[S,o.default.baseButton,o.default["variant-"+d],o.default["tone-"+p],o.default["size-"+m],"auto"!==q&&null==B&&null!=y?o.default["align-"+y]:null,B?o.default.iconButton:null,f?o.default.disabled:null]}),B?b&&l.createElement(i.Spinner,null)||B:l.createElement(l.Fragment,null,E?l.createElement(n.Box,{display:"flex",className:o.default.startIcon,"aria-hidden":!0},b&&!g?l.createElement(i.Spinner,null):E):null,v?l.createElement("span",{className:o.default.label},v):null,g||b&&!E?l.createElement(n.Box,{display:"flex",className:o.default.endIcon,"aria-hidden":!0},b?l.createElement(i.Spinner,null):g):null)),N=B?null!=x?x:z["aria-label"]:x;return N?l.createElement(a.Tooltip,{content:N,gapSize:h},I):I}));
|
|
2
2
|
//# sourceMappingURL=base-button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-button.js","sources":["../../../src/new-components/base-button/base-button.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Tooltip, TooltipProps } from '../../components/tooltip'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\nimport styles from './base-button.module.css'\n\nfunction preventDefault(event: React.SyntheticEvent) {\n event.preventDefault()\n}\n\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary'\ntype ButtonTone = 'normal' | 'destructive'\ntype ButtonSize = 'small' | 'normal' | 'large'\ntype IconElement = React.ReactChild\n\ntype CommonProps = {\n /**\n * The button's variant.\n */\n variant: ButtonVariant\n /**\n * The button's tone.\n * @default 'normal'\n */\n tone?: ButtonTone\n /**\n * The button's size.\n * @default 'normal'\n */\n size?: ButtonSize\n /**\n * Whether the button is disabled or not.\n * @default false\n */\n disabled?: boolean\n /**\n * Whether the button is busy/loading.\n *\n * A button in this state is functionally and semantically disabled. Visually is does not look\n * dimmed (as disabled buttons normally do), but it shows a loading spinner instead.\n *\n * @default false\n */\n loading?: boolean\n /**\n * A tooltip linked to the button element.\n */\n tooltip?: TooltipProps['content']\n /**\n * The distance between the button element and the linked tooltip.\n */\n tooltipGapSize?: TooltipProps['gapSize']\n}\n\ntype AlignmentProps = {\n width: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full'\n align?: 'start' | 'center' | 'end'\n}\n\ntype AutoWidthProps = {\n width?: 'auto'\n align?: never\n}\n\ntype IconButtonProps = {\n icon: IconElement\n 'aria-label': string\n children?: never\n startIcon?: never\n endIcon?: never\n width?: never\n align?: never\n}\n\ntype LabelledButtonProps = {\n children: NonNullable<React.ReactNode>\n startIcon?: IconElement\n endIcon?: IconElement\n icon?: never\n} & (AutoWidthProps | AlignmentProps)\n\nexport type BaseButtonProps = CommonProps & (IconButtonProps | LabelledButtonProps)\n\n/**\n * The component that powers `Button` and `ButtonLink`, where the button styling logic and some\n * common functionality resides. This component is internal to Reactist.\n *\n * @see Button\n * @see ButtonLink\n */\nexport const BaseButton = polymorphicComponent<'div', BaseButtonProps>(function BaseButton(\n {\n as = 'div',\n variant,\n tone = 'normal',\n size = 'normal',\n disabled = false,\n loading = false,\n tooltip,\n tooltipGapSize,\n onClick,\n exceptionallySetClassName,\n children,\n startIcon,\n endIcon,\n icon,\n width = 'auto',\n align,\n ...props\n },\n ref,\n) {\n const isDisabled = loading || disabled\n const buttonElement = (\n <Box\n {...props}\n as={as}\n ref={ref}\n aria-disabled={isDisabled}\n onClick={isDisabled ? preventDefault : onClick}\n width={icon ? undefined : width}\n className={[\n exceptionallySetClassName,\n styles.baseButton,\n styles[`variant-${variant}`],\n styles[`tone-${tone}`],\n styles[`size-${size}`],\n width !== 'auto' && icon == null && align != null ? styles[`align-${align}`] : null,\n icon ? styles.iconButton : null,\n disabled ? styles.disabled : null,\n ]}\n >\n {icon ? (\n (loading && <Spinner />) || icon\n ) : (\n <>\n {startIcon ? (\n <Box display=\"flex\" className={styles.startIcon} aria-hidden>\n {loading && !endIcon ? <Spinner /> : startIcon}\n </Box>\n ) : null}\n {children ? <span className={styles.label}>{children}</span> : null}\n {endIcon || (loading && !startIcon) ? (\n <Box display=\"flex\" className={styles.endIcon} aria-hidden>\n {loading ? <Spinner /> : endIcon}\n </Box>\n ) : null}\n </>\n )}\n </Box>\n )\n\n // If it's an icon-only button, make sure it uses the aria-label as tooltip if no tooltip was provided\n const tooltipContent = icon ? tooltip ?? props['aria-label'] : tooltip\n return tooltipContent ? (\n <Tooltip content={tooltipContent} gapSize={tooltipGapSize}>\n {buttonElement}\n </Tooltip>\n ) : (\n buttonElement\n )\n})\n"],"names":["preventDefault","event","polymorphicComponent","ref","as","variant","tone","size","disabled","loading","tooltip","tooltipGapSize","onClick","exceptionallySetClassName","children","startIcon","endIcon","icon","width","align","props","isDisabled","buttonElement","React","Box","undefined","className","styles","baseButton","iconButton","Spinner","display","label","tooltipContent","Tooltip","content","gapSize"],"mappings":"
|
|
1
|
+
{"version":3,"file":"base-button.js","sources":["../../../src/new-components/base-button/base-button.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Tooltip, TooltipProps } from '../../components/tooltip'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\nimport styles from './base-button.module.css'\n\nfunction preventDefault(event: React.SyntheticEvent) {\n event.preventDefault()\n}\n\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary'\ntype ButtonTone = 'normal' | 'destructive'\ntype ButtonSize = 'small' | 'normal' | 'large'\ntype IconElement = React.ReactChild\n\ntype CommonProps = {\n /**\n * The button's variant.\n */\n variant: ButtonVariant\n /**\n * The button's tone.\n * @default 'normal'\n */\n tone?: ButtonTone\n /**\n * The button's size.\n * @default 'normal'\n */\n size?: ButtonSize\n /**\n * Whether the button is disabled or not.\n * @default false\n */\n disabled?: boolean\n /**\n * Whether the button is busy/loading.\n *\n * A button in this state is functionally and semantically disabled. Visually is does not look\n * dimmed (as disabled buttons normally do), but it shows a loading spinner instead.\n *\n * @default false\n */\n loading?: boolean\n /**\n * A tooltip linked to the button element.\n */\n tooltip?: TooltipProps['content']\n /**\n * The distance between the button element and the linked tooltip.\n */\n tooltipGapSize?: TooltipProps['gapSize']\n}\n\ntype AlignmentProps = {\n width: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full'\n align?: 'start' | 'center' | 'end'\n}\n\ntype AutoWidthProps = {\n width?: 'auto'\n align?: never\n}\n\ntype IconButtonProps = {\n icon: IconElement\n 'aria-label': string\n children?: never\n startIcon?: never\n endIcon?: never\n width?: never\n align?: never\n}\n\ntype LabelledButtonProps = {\n children: NonNullable<React.ReactNode>\n startIcon?: IconElement\n endIcon?: IconElement\n icon?: never\n} & (AutoWidthProps | AlignmentProps)\n\nexport type BaseButtonProps = CommonProps & (IconButtonProps | LabelledButtonProps)\n\n/**\n * The component that powers `Button` and `ButtonLink`, where the button styling logic and some\n * common functionality resides. This component is internal to Reactist.\n *\n * @see Button\n * @see ButtonLink\n */\nexport const BaseButton = polymorphicComponent<'div', BaseButtonProps>(function BaseButton(\n {\n as = 'div',\n variant,\n tone = 'normal',\n size = 'normal',\n disabled = false,\n loading = false,\n tooltip,\n tooltipGapSize,\n onClick,\n exceptionallySetClassName,\n children,\n startIcon,\n endIcon,\n icon,\n width = 'auto',\n align,\n ...props\n },\n ref,\n) {\n const isDisabled = loading || disabled\n const buttonElement = (\n <Box\n {...props}\n as={as}\n ref={ref}\n aria-disabled={isDisabled}\n onClick={isDisabled ? preventDefault : onClick}\n width={icon ? undefined : width}\n className={[\n exceptionallySetClassName,\n styles.baseButton,\n styles[`variant-${variant}`],\n styles[`tone-${tone}`],\n styles[`size-${size}`],\n width !== 'auto' && icon == null && align != null ? styles[`align-${align}`] : null,\n icon ? styles.iconButton : null,\n disabled ? styles.disabled : null,\n ]}\n >\n {icon ? (\n (loading && <Spinner />) || icon\n ) : (\n <>\n {startIcon ? (\n <Box display=\"flex\" className={styles.startIcon} aria-hidden>\n {loading && !endIcon ? <Spinner /> : startIcon}\n </Box>\n ) : null}\n {children ? <span className={styles.label}>{children}</span> : null}\n {endIcon || (loading && !startIcon) ? (\n <Box display=\"flex\" className={styles.endIcon} aria-hidden>\n {loading ? <Spinner /> : endIcon}\n </Box>\n ) : null}\n </>\n )}\n </Box>\n )\n\n // If it's an icon-only button, make sure it uses the aria-label as tooltip if no tooltip was provided\n const tooltipContent = icon ? tooltip ?? props['aria-label'] : tooltip\n return tooltipContent ? (\n <Tooltip content={tooltipContent} gapSize={tooltipGapSize}>\n {buttonElement}\n </Tooltip>\n ) : (\n buttonElement\n )\n})\n"],"names":["preventDefault","event","polymorphicComponent","ref","as","variant","tone","size","disabled","loading","tooltip","tooltipGapSize","onClick","exceptionallySetClassName","children","startIcon","endIcon","icon","width","align","props","isDisabled","buttonElement","React","Box","undefined","className","styles","baseButton","iconButton","Spinner","display","label","tooltipContent","Tooltip","content","gapSize"],"mappings":"0gBAOA,SAASA,EAAeC,GACpBA,EAAMD,oCAmFgBE,wBAA6C,WAoBnEC,OAnBAC,GACIA,EAAK,MADTC,QAEIA,EAFJC,KAGIA,EAAO,SAHXC,KAIIA,EAAO,SAJXC,SAKIA,GAAW,EALfC,QAMIA,GAAU,UACVC,EAPJC,eAQIA,EARJC,QASIA,EATJC,0BAUIA,EAVJC,SAWIA,EAXJC,UAYIA,EAZJC,QAaIA,EAbJC,KAcIA,EAdJC,MAeIA,EAAQ,OAfZC,MAgBIA,KACGC,iCAIP,MAAMC,EAAaZ,GAAWD,EACxBc,EACFC,gBAACC,yCACOJ,OACJhB,GAAIA,EACJD,IAAKA,kBACUkB,EACfT,QAASS,EAAarB,EAAiBY,EACvCM,MAAOD,OAAOQ,EAAYP,EAC1BQ,UAAW,CACPb,EACAc,UAAOC,WACPD,qBAAkBtB,GAClBsB,kBAAerB,GACfqB,kBAAepB,GACL,SAAVW,GAA4B,MAARD,GAAyB,MAATE,EAAgBQ,mBAAgBR,GAAW,KAC/EF,EAAOU,UAAOE,WAAa,KAC3BrB,EAAWmB,UAAOnB,SAAW,QAGhCS,EACIR,GAAWc,gBAACO,iBAAeb,EAE5BM,gCACKR,EACGQ,gBAACC,OAAIO,QAAQ,OAAOL,UAAWC,UAAOZ,4BACjCN,IAAYO,EAAUO,gBAACO,gBAAaf,GAEzC,KACHD,EAAWS,wBAAMG,UAAWC,UAAOK,OAAQlB,GAAmB,KAC9DE,GAAYP,IAAYM,EACrBQ,gBAACC,OAAIO,QAAQ,OAAOL,UAAWC,UAAOX,0BACjCP,EAAUc,gBAACO,gBAAad,GAE7B,OAOdiB,EAAiBhB,QAAOP,EAAAA,EAAWU,EAAM,cAAgBV,EAC/D,OAAOuB,EACHV,gBAACW,WAAQC,QAASF,EAAgBG,QAASzB,GACtCW,GAGLA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { BoxProps } from '../box';
|
|
3
|
-
import { WithEnhancedClassName } from '../common-types';
|
|
3
|
+
import type { WithEnhancedClassName } from '../common-types';
|
|
4
4
|
declare type FieldHintProps = {
|
|
5
5
|
id: string;
|
|
6
6
|
children: React.ReactNode;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),l=require("../box/box.js"),t=require("../stack/stack.js"),r=require("../text/text.js"),s=require("../common-helpers.js"),i=require("./base-field.module.css.js");function n(l){return a.createElement(r.Text,e.objectSpread2({as:"p",tone:"secondary",size:"copy"},l))}exports.BaseField=function({label:e,secondaryLabel:d,auxiliaryLabel:c,hint:u,className:o,children:m,maxWidth:p,hidden:b,"aria-describedby":x,id:y}){const f=s.useId(y),E=s.useId(),h=null!=x?x:u?E:void 0;return a.createElement(t.Stack,{space:"small"},a.createElement(l.Box,{className:[o,i.default.container],maxWidth:p,hidden:b},a.createElement(l.Box,{as:"span",display:"flex",justifyContent:"spaceBetween",alignItems:"flexEnd",paddingBottom:"small"},a.createElement(r.Text,{size:"body",as:"label",htmlFor:f},e?a.createElement("span",{className:i.default.primaryLabel},e):null,d?a.createElement("span",{className:i.default.secondaryLabel}," (",d,")"):null),c?a.createElement(l.Box,{className:i.default.auxiliaryLabel,paddingLeft:"small"},c):null),m(h?{id:f,"aria-describedby":h}:{id:f})),u?a.createElement(n,{hidden:b,id:E},u):null)},exports.FieldHint=n;
|
|
2
2
|
//# sourceMappingURL=base-field.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-field.js","sources":["../../../src/new-components/base-field/base-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box, BoxProps } from '../box'\nimport { useId } from '../common-helpers'\nimport { Text } from '../text'\nimport
|
|
1
|
+
{"version":3,"file":"base-field.js","sources":["../../../src/new-components/base-field/base-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box, BoxProps } from '../box'\nimport { useId } from '../common-helpers'\nimport { Text } from '../text'\nimport styles from './base-field.module.css'\nimport { Stack } from '../stack'\n\nimport type { WithEnhancedClassName } from '../common-types'\n\ntype FieldHintProps = {\n id: string\n children: React.ReactNode\n hidden?: boolean\n}\n\nfunction FieldHint(props: FieldHintProps) {\n return <Text as=\"p\" tone=\"secondary\" size=\"copy\" {...props} />\n}\n\n//\n// BaseField\n//\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n React.InputHTMLAttributes<T>,\n T\n>\n\ntype BaseFieldProps = WithEnhancedClassName &\n Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'aria-describedby'> & {\n /**\n * The main label for this field element.\n *\n * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n *\n * @see secondaryLabel\n * @see auxiliaryLabel\n */\n label: React.ReactNode\n /**\n * An optional secondary label for this field element. It is combined with the `label` to\n * form the field's entire accessible name (unless the field label is overriden by using\n * `aria-label` or `aria-labelledby`).\n *\n * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n *\n * @see label\n * @see auxiliaryLabel\n */\n secondaryLabel?: React.ReactNode\n /**\n * An optional extra element to be placed to the right of the main and secondary labels.\n *\n * This extra element is not included in the accessible name of the field element. Its only\n * purpose is either visual, or functional (if you include interactive elements in it).\n *\n * @see label\n * @see secondaryLabel\n */\n auxiliaryLabel?: React.ReactNode\n /**\n * A hint or help-like content associated as the accessible description of the field. It is\n * generally rendered below it, and with a visual style that reduces its prominence (i.e.\n * as secondary text).\n */\n hint?: React.ReactNode\n /**\n * The maximum width that the input field can expand to.\n */\n maxWidth?: BoxProps['maxWidth']\n /**\n * Used internally by components composed using `BaseField`. It is not exposed as part of\n * the public props of such components.\n */\n children: (props: { id: string; 'aria-describedby'?: string }) => React.ReactNode\n }\n\ntype FieldComponentProps<T extends HTMLElement> = Omit<BaseFieldProps, 'children' | 'className'> &\n Omit<HtmlInputProps<T>, 'className' | 'style'>\n\nfunction BaseField({\n label,\n secondaryLabel,\n auxiliaryLabel,\n hint,\n className,\n children,\n maxWidth,\n hidden,\n 'aria-describedby': originalAriaDescribedBy,\n id: originalId,\n}: BaseFieldProps & WithEnhancedClassName) {\n const id = useId(originalId)\n const hintId = useId()\n\n const ariaDescribedBy = originalAriaDescribedBy ?? (hint ? hintId : undefined)\n\n return (\n <Stack space=\"small\">\n <Box className={[className, styles.container]} maxWidth={maxWidth} hidden={hidden}>\n <Box\n as=\"span\"\n display=\"flex\"\n justifyContent=\"spaceBetween\"\n alignItems=\"flexEnd\"\n paddingBottom=\"small\"\n >\n <Text size=\"body\" as=\"label\" htmlFor={id}>\n {label ? <span className={styles.primaryLabel}>{label}</span> : null}\n {secondaryLabel ? (\n <span className={styles.secondaryLabel}> ({secondaryLabel})</span>\n ) : null}\n </Text>\n {auxiliaryLabel ? (\n <Box className={styles.auxiliaryLabel} paddingLeft=\"small\">\n {auxiliaryLabel}\n </Box>\n ) : null}\n </Box>\n {children(ariaDescribedBy ? { id, 'aria-describedby': ariaDescribedBy } : { id })}\n </Box>\n {hint ? (\n <FieldHint hidden={hidden} id={hintId}>\n {hint}\n </FieldHint>\n ) : null}\n </Stack>\n )\n}\n\nexport { BaseField, FieldHint }\nexport type { FieldComponentProps }\n"],"names":["FieldHint","props","React","Text","as","tone","size","label","secondaryLabel","auxiliaryLabel","hint","className","children","maxWidth","hidden","aria-describedby","originalAriaDescribedBy","id","originalId","useId","hintId","ariaDescribedBy","undefined","Stack","space","Box","styles","container","display","justifyContent","alignItems","paddingBottom","htmlFor","primaryLabel","paddingLeft"],"mappings":"qTAeA,SAASA,EAAUC,GACf,OAAOC,gBAACC,wBAAKC,GAAG,IAAIC,KAAK,YAAYC,KAAK,QAAWL,sBAgEzD,UAAmBM,MACfA,EADeC,eAEfA,EAFeC,eAGfA,EAHeC,KAIfA,EAJeC,UAKfA,EALeC,SAMfA,EANeC,SAOfA,EAPeC,OAQfA,EACAC,mBAAoBC,EACpBC,GAAIC,IAEJ,MAAMD,EAAKE,QAAMD,GACXE,EAASD,UAETE,QAAkBL,EAAAA,EAA4BN,EAAOU,OAASE,EAEpE,OACIpB,gBAACqB,SAAMC,MAAM,SACTtB,gBAACuB,OAAId,UAAW,CAACA,EAAWe,UAAOC,WAAYd,SAAUA,EAAUC,OAAQA,GACvEZ,gBAACuB,OACGrB,GAAG,OACHwB,QAAQ,OACRC,eAAe,eACfC,WAAW,UACXC,cAAc,SAEd7B,gBAACC,QAAKG,KAAK,OAAOF,GAAG,QAAQ4B,QAASf,GACjCV,EAAQL,wBAAMS,UAAWe,UAAOO,cAAe1B,GAAgB,KAC/DC,EACGN,wBAAMS,UAAWe,UAAOlB,qBAAwBA,OAChD,MAEPC,EACGP,gBAACuB,OAAId,UAAWe,UAAOjB,eAAgByB,YAAY,SAC9CzB,GAEL,MAEPG,EAASS,EAAkB,CAAEJ,GAAAA,EAAIF,mBAAoBM,GAAoB,CAAEJ,GAAAA,KAE/EP,EACGR,gBAACF,GAAUc,OAAQA,EAAQG,GAAIG,GAC1BV,GAEL"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var l=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),t=(e(a),e(require("classnames"))),
|
|
1
|
+
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var l=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),t=(e(a),e(require("classnames"))),s=require("../../utils/polymorphism.js"),n=require("../responsive-props.js"),i=require("./box.module.css.js"),d=require("./padding.module.css.js"),r=require("./margin.module.css.js"),u=require("./width.module.css.js");const g=["as","position","display","flexDirection","flexWrap","flexGrow","flexShrink","alignItems","justifyContent","alignSelf","overflow","width","height","background","border","borderRadius","minWidth","maxWidth","textAlign","padding","paddingY","paddingX","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginY","marginX","marginTop","marginRight","marginBottom","marginLeft","className","children"];exports.Box=s.polymorphicComponent((function(e,s){var o,m,f,p,c,h,C,N;let{as:x="div",position:b="static",display:j,flexDirection:S="row",flexWrap:w,flexGrow:y,flexShrink:v,alignItems:W,justifyContent:q,alignSelf:R,overflow:B,width:L,height:T,background:k,border:X,borderRadius:Y,minWidth:_,maxWidth:A,textAlign:D,padding:G,paddingY:I,paddingX:P,paddingTop:E,paddingRight:F,paddingBottom:H,paddingLeft:M,margin:O,marginY:z,marginX:J,marginTop:K,marginRight:Q,marginBottom:U,marginLeft:V,className:Z,children:$}=e,ee=l.objectWithoutProperties(e,g);const le=null!=(o=null!=E?E:I)?o:G,ae=null!=(m=null!=F?F:P)?m:G,te=null!=(f=null!=H?H:I)?f:G,se=null!=(p=null!=M?M:P)?p:G,ne=null!=(c=null!=K?K:z)?c:O,ie=null!=(h=null!=Q?Q:J)?h:O,de=null!=(C=null!=U?U:z)?C:O,re=null!=(N=null!=V?V:J)?N:O,ue=!j||"string"==typeof j&&"flex"!==j&&"inlineFlex"!==j;return a.createElement(x,l.objectSpread2(l.objectSpread2({},ee),{},{className:t(Z,i.default.box,j?n.getClassNames(i.default,"display",j):null,"static"!==b?n.getClassNames(i.default,"position",b):null,null!=_?n.getClassNames(u.default,"minWidth",String(_)):null,n.getClassNames(u.default,"maxWidth",A),n.getClassNames(i.default,"textAlign",D),n.getClassNames(d.default,"paddingTop",le),n.getClassNames(d.default,"paddingRight",ae),n.getClassNames(d.default,"paddingBottom",te),n.getClassNames(d.default,"paddingLeft",se),n.getClassNames(r.default,"marginTop",ne),n.getClassNames(r.default,"marginRight",ie),n.getClassNames(r.default,"marginBottom",de),n.getClassNames(r.default,"marginLeft",re),ue?null:n.getClassNames(i.default,"flexDirection",S),ue?null:n.getClassNames(i.default,"flexWrap",w),ue?null:n.getClassNames(i.default,"alignItems",W),ue?null:n.getClassNames(i.default,"justifyContent",q),null!=R?n.getClassNames(i.default,"alignSelf",R):null,null!=v?n.getClassNames(i.default,"flexShrink",String(v)):null,null!=y?n.getClassNames(i.default,"flexGrow",String(y)):null,n.getClassNames(i.default,"overflow",B),null!=L?n.getClassNames(u.default,"width",String(L)):null,n.getClassNames(i.default,"height",T),n.getClassNames(i.default,"bg",k),"none"!==Y?n.getClassNames(i.default,"borderRadius",Y):null,"none"!==X?n.getClassNames(i.default,"border",X):null)||void 0,ref:s}),$)}));
|
|
2
2
|
//# sourceMappingURL=box.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"box.js","sources":["../../../src/new-components/box/box.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { getClassNames } from '../responsive-props'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type {\n DividerWeight,\n Space,\n SpaceWithNegatives,\n WithEnhancedClassName,\n} from '../common-types'\n\nimport styles from './box.module.css'\nimport paddingStyles from './padding.module.css'\nimport marginStyles from './margin.module.css'\nimport widthStyles from './width.module.css'\n\ninterface BoxPaddingProps {\n padding?: ResponsiveProp<Space>\n paddingX?: ResponsiveProp<Space>\n paddingY?: ResponsiveProp<Space>\n paddingTop?: ResponsiveProp<Space>\n paddingRight?: ResponsiveProp<Space>\n paddingBottom?: ResponsiveProp<Space>\n paddingLeft?: ResponsiveProp<Space>\n}\n\ninterface BoxMarginProps {\n margin?: ResponsiveProp<SpaceWithNegatives>\n marginX?: ResponsiveProp<SpaceWithNegatives>\n marginY?: ResponsiveProp<SpaceWithNegatives>\n marginTop?: ResponsiveProp<SpaceWithNegatives>\n marginRight?: ResponsiveProp<SpaceWithNegatives>\n marginBottom?: ResponsiveProp<SpaceWithNegatives>\n marginLeft?: ResponsiveProp<SpaceWithNegatives>\n}\n\ntype BoxDisplay = 'block' | 'flex' | 'inline' | 'inlineBlock' | 'inlineFlex' | 'none'\ntype BoxFlexDirection = 'column' | 'row'\ntype BoxFlexWrap = 'nowrap' | 'wrap'\ntype BoxAlignItems = 'center' | 'flexEnd' | 'flexStart' | 'baseline'\ntype BoxJustifyContent =\n | 'center'\n | 'flexEnd'\n | 'flexStart'\n | 'spaceAround'\n | 'spaceBetween'\n | 'spaceEvenly'\ntype BoxAlignSelf = 'flexStart' | 'flexEnd' | 'center' | 'baseline' | 'stretch'\ntype BoxOverflow = 'hidden' | 'auto' | 'visible' | 'scroll'\n\ntype BoxMaxMinWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'\ntype BoxMinWidth = 0 | BoxMaxMinWidth\ntype BoxMaxWidth = BoxMaxMinWidth | 'full'\ntype BoxWidth = 0 | BoxMaxMinWidth | 'full' | 'auto' | 'maxContent' | 'minContent' | 'fitContent'\n\ninterface BorderProps {\n borderRadius?: 'standard' | 'none' | 'full'\n border?: DividerWeight\n}\n\ninterface ReusableBoxProps extends BorderProps, BoxPaddingProps {\n minWidth?: BoxMinWidth\n maxWidth?: BoxMaxWidth\n width?: BoxWidth\n background?: 'default' | 'aside' | 'highlight' | 'selected'\n flexGrow?: 0 | 1\n flexShrink?: 0\n}\n\ntype BoxPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'\ntype BoxTextAlign = 'start' | 'center' | 'end' | 'justify'\n\ninterface BoxProps extends WithEnhancedClassName, ReusableBoxProps, BoxMarginProps {\n position?: ResponsiveProp<BoxPosition>\n display?: ResponsiveProp<BoxDisplay>\n flexDirection?: ResponsiveProp<BoxFlexDirection>\n flexWrap?: BoxFlexWrap\n alignItems?: ResponsiveProp<BoxAlignItems>\n alignSelf?: ResponsiveProp<BoxAlignSelf>\n justifyContent?: ResponsiveProp<BoxJustifyContent>\n overflow?: BoxOverflow\n height?: 'full'\n textAlign?: ResponsiveProp<BoxTextAlign>\n}\n\nconst Box = polymorphicComponent<'div', BoxProps, 'keepClassName'>(function Box(\n {\n as: component = 'div',\n position = 'static',\n display,\n flexDirection = 'row',\n flexWrap,\n flexGrow,\n flexShrink,\n alignItems,\n justifyContent,\n alignSelf,\n overflow,\n width,\n height,\n background,\n border,\n borderRadius,\n minWidth,\n maxWidth,\n textAlign,\n padding,\n paddingY,\n paddingX,\n paddingTop,\n paddingRight,\n paddingBottom,\n paddingLeft,\n margin,\n marginY,\n marginX,\n marginTop,\n marginRight,\n marginBottom,\n marginLeft,\n className,\n children,\n ...props\n },\n ref,\n) {\n const resolvedPaddingTop = paddingTop ?? paddingY ?? padding\n const resolvedPaddingRight = paddingRight ?? paddingX ?? padding\n const resolvedPaddingBottom = paddingBottom ?? paddingY ?? padding\n const resolvedPaddingLeft = paddingLeft ?? paddingX ?? padding\n\n const resolvedMarginTop = marginTop ?? marginY ?? margin\n const resolvedMarginRight = marginRight ?? marginX ?? margin\n const resolvedMarginBottom = marginBottom ?? marginY ?? margin\n const resolvedMarginLeft = marginLeft ?? marginX ?? margin\n\n const omitFlex =\n !display || (typeof display === 'string' && display !== 'flex' && display !== 'inlineFlex')\n\n return React.createElement(\n component,\n {\n ...props,\n className:\n classNames(\n className,\n styles.box,\n display ? getClassNames(styles, 'display', display) : null,\n position !== 'static' ? getClassNames(styles, 'position', position) : null,\n minWidth != null\n ? getClassNames(widthStyles, 'minWidth', String(minWidth))\n : null,\n getClassNames(widthStyles, 'maxWidth', maxWidth),\n getClassNames(styles, 'textAlign', textAlign),\n // padding\n getClassNames(paddingStyles, 'paddingTop', resolvedPaddingTop),\n getClassNames(paddingStyles, 'paddingRight', resolvedPaddingRight),\n getClassNames(paddingStyles, 'paddingBottom', resolvedPaddingBottom),\n getClassNames(paddingStyles, 'paddingLeft', resolvedPaddingLeft),\n // margin\n getClassNames(marginStyles, 'marginTop', resolvedMarginTop),\n getClassNames(marginStyles, 'marginRight', resolvedMarginRight),\n getClassNames(marginStyles, 'marginBottom', resolvedMarginBottom),\n getClassNames(marginStyles, 'marginLeft', resolvedMarginLeft),\n // flex props\n omitFlex ? null : getClassNames(styles, 'flexDirection', flexDirection),\n omitFlex ? null : getClassNames(styles, 'flexWrap', flexWrap),\n omitFlex ? null : getClassNames(styles, 'alignItems', alignItems),\n omitFlex ? null : getClassNames(styles, 'justifyContent', justifyContent),\n alignSelf != null ? getClassNames(styles, 'alignSelf', alignSelf) : null,\n flexShrink != null\n ? getClassNames(styles, 'flexShrink', String(flexShrink))\n : null,\n flexGrow != null ? getClassNames(styles, 'flexGrow', String(flexGrow)) : null,\n // other props\n getClassNames(styles, 'overflow', overflow),\n width != null ? getClassNames(widthStyles, 'width', String(width)) : null,\n getClassNames(styles, 'height', height),\n getClassNames(styles, 'bg', background),\n borderRadius !== 'none'\n ? getClassNames(styles, 'borderRadius', borderRadius)\n : null,\n border !== 'none' ? getClassNames(styles, 'border', border) : null,\n ) || undefined,\n ref,\n },\n children,\n )\n})\n\nexport type {\n BoxProps,\n BoxPaddingProps,\n BoxMarginProps,\n ReusableBoxProps,\n BoxMinWidth,\n BoxMaxWidth,\n BoxDisplay,\n BoxPosition,\n BoxFlexDirection,\n BoxFlexWrap,\n BoxAlignItems,\n BoxJustifyContent,\n BoxOverflow,\n BoxTextAlign,\n}\n\nexport { Box }\n"],"names":["polymorphicComponent","ref","as","component","position","display","flexDirection","flexWrap","flexGrow","flexShrink","alignItems","justifyContent","alignSelf","overflow","width","height","background","border","borderRadius","minWidth","maxWidth","textAlign","padding","paddingY","paddingX","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginY","marginX","marginTop","marginRight","marginBottom","marginLeft","className","children","props","resolvedPaddingTop","resolvedPaddingRight","resolvedPaddingBottom","resolvedPaddingLeft","resolvedMarginTop","resolvedMarginRight","resolvedMarginBottom","resolvedMarginLeft","omitFlex","React","classNames","styles","box","getClassNames","widthStyles","String","paddingStyles","marginStyles","undefined"],"mappings":"o4BAuFYA,wBAAuD,WAuC/DC,2BArCIC,GAAIC,aAAY,YAChBC,SAAAA,aAAW,WACXC,IAAAA,YACAC,cAAAA,aAAgB,QAChBC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,WACAC,IAAAA,WACAC,IAAAA,eACAC,IAAAA,UACAC,IAAAA,SACAC,IAAAA,MACAC,IAAAA,OACAC,IAAAA,WACAC,IAAAA,OACAC,IAAAA,aACAC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,UACAC,IAAAA,QACAC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,WACAC,IAAAA,aACAC,IAAAA,cACAC,IAAAA,YACAC,IAAAA,OACAC,IAAAA,QACAC,IAAAA,QACAC,IAAAA,UACAC,IAAAA,YACAC,IAAAA,aACAC,KAAAA,WACAC,KAAAA,UACAC,KAAAA,SACGC,uCAIDC,aAAqBd,MAAAA,EAAAA,EAAcF,iBAAYD,EAC/CkB,aAAuBd,MAAAA,EAAAA,EAAgBF,iBAAYF,EACnDmB,aAAwBd,MAAAA,EAAAA,EAAiBJ,iBAAYD,EACrDoB,aAAsBd,MAAAA,EAAAA,EAAeJ,iBAAYF,EAEjDqB,aAAoBX,MAAAA,EAAAA,EAAaF,iBAAWD,EAC5Ce,aAAsBX,MAAAA,EAAAA,EAAeF,iBAAWF,EAChDgB,aAAuBX,MAAAA,EAAAA,EAAgBJ,iBAAWD,EAClDiB,aAAqBX,MAAAA,GAAAA,GAAcJ,iBAAWF,EAE9CkB,IACD1C,GAA+B,iBAAZA,GAAoC,SAAZA,GAAkC,eAAZA,SAE/D2C,gBACH7C,qCAEOmC,QACHF,UACIa,EACIb,GACAc,UAAOC,IACP9C,EAAU+C,gBAAcF,UAAQ,UAAW7C,GAAW,KACzC,WAAbD,EAAwBgD,gBAAcF,UAAQ,WAAY9C,GAAY,KAC1D,MAAZe,EACMiC,gBAAcC,UAAa,WAAYC,OAAOnC,IAC9C,KACNiC,gBAAcC,UAAa,WAAYjC,GACvCgC,gBAAcF,UAAQ,YAAa7B,GAEnC+B,gBAAcG,UAAe,aAAchB,IAC3Ca,gBAAcG,UAAe,eAAgBf,IAC7CY,gBAAcG,UAAe,gBAAiBd,IAC9CW,gBAAcG,UAAe,cAAeb,IAE5CU,gBAAcI,UAAc,YAAab,IACzCS,gBAAcI,UAAc,cAAeZ,IAC3CQ,gBAAcI,UAAc,eAAgBX,IAC5CO,gBAAcI,UAAc,aAAcV,IAE1CC,GAAW,KAAOK,gBAAcF,UAAQ,gBAAiB5C,GACzDyC,GAAW,KAAOK,gBAAcF,UAAQ,WAAY3C,GACpDwC,GAAW,KAAOK,gBAAcF,UAAQ,aAAcxC,GACtDqC,GAAW,KAAOK,gBAAcF,UAAQ,iBAAkBvC,GAC7C,MAAbC,EAAoBwC,gBAAcF,UAAQ,YAAatC,GAAa,KACtD,MAAdH,EACM2C,gBAAcF,UAAQ,aAAcI,OAAO7C,IAC3C,KACM,MAAZD,EAAmB4C,gBAAcF,UAAQ,WAAYI,OAAO9C,IAAa,KAEzE4C,gBAAcF,UAAQ,WAAYrC,GACzB,MAATC,EAAgBsC,gBAAcC,UAAa,QAASC,OAAOxC,IAAU,KACrEsC,gBAAcF,UAAQ,SAAUnC,GAChCqC,gBAAcF,UAAQ,KAAMlC,GACX,SAAjBE,EACMkC,gBAAcF,UAAQ,eAAgBhC,GACtC,KACK,SAAXD,EAAoBmC,gBAAcF,UAAQ,SAAUjC,GAAU,YAC7DwC,EACTxD,IAAAA,IAEJoC"}
|
|
1
|
+
{"version":3,"file":"box.js","sources":["../../../src/new-components/box/box.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { getClassNames } from '../responsive-props'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type {\n DividerWeight,\n Space,\n SpaceWithNegatives,\n WithEnhancedClassName,\n} from '../common-types'\n\nimport styles from './box.module.css'\nimport paddingStyles from './padding.module.css'\nimport marginStyles from './margin.module.css'\nimport widthStyles from './width.module.css'\n\ninterface BoxPaddingProps {\n padding?: ResponsiveProp<Space>\n paddingX?: ResponsiveProp<Space>\n paddingY?: ResponsiveProp<Space>\n paddingTop?: ResponsiveProp<Space>\n paddingRight?: ResponsiveProp<Space>\n paddingBottom?: ResponsiveProp<Space>\n paddingLeft?: ResponsiveProp<Space>\n}\n\ninterface BoxMarginProps {\n margin?: ResponsiveProp<SpaceWithNegatives>\n marginX?: ResponsiveProp<SpaceWithNegatives>\n marginY?: ResponsiveProp<SpaceWithNegatives>\n marginTop?: ResponsiveProp<SpaceWithNegatives>\n marginRight?: ResponsiveProp<SpaceWithNegatives>\n marginBottom?: ResponsiveProp<SpaceWithNegatives>\n marginLeft?: ResponsiveProp<SpaceWithNegatives>\n}\n\ntype BoxDisplay = 'block' | 'flex' | 'inline' | 'inlineBlock' | 'inlineFlex' | 'none'\ntype BoxFlexDirection = 'column' | 'row'\ntype BoxFlexWrap = 'nowrap' | 'wrap'\ntype BoxAlignItems = 'center' | 'flexEnd' | 'flexStart' | 'baseline'\ntype BoxJustifyContent =\n | 'center'\n | 'flexEnd'\n | 'flexStart'\n | 'spaceAround'\n | 'spaceBetween'\n | 'spaceEvenly'\ntype BoxAlignSelf = 'flexStart' | 'flexEnd' | 'center' | 'baseline' | 'stretch'\ntype BoxOverflow = 'hidden' | 'auto' | 'visible' | 'scroll'\n\ntype BoxMaxMinWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'\ntype BoxMinWidth = 0 | BoxMaxMinWidth\ntype BoxMaxWidth = BoxMaxMinWidth | 'full'\ntype BoxWidth = 0 | BoxMaxMinWidth | 'full' | 'auto' | 'maxContent' | 'minContent' | 'fitContent'\n\ninterface BorderProps {\n borderRadius?: 'standard' | 'none' | 'full'\n border?: DividerWeight\n}\n\ninterface ReusableBoxProps extends BorderProps, BoxPaddingProps {\n minWidth?: BoxMinWidth\n maxWidth?: BoxMaxWidth\n width?: BoxWidth\n background?: 'default' | 'aside' | 'highlight' | 'selected'\n flexGrow?: 0 | 1\n flexShrink?: 0\n}\n\ntype BoxPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'\ntype BoxTextAlign = 'start' | 'center' | 'end' | 'justify'\n\ninterface BoxProps extends WithEnhancedClassName, ReusableBoxProps, BoxMarginProps {\n position?: ResponsiveProp<BoxPosition>\n display?: ResponsiveProp<BoxDisplay>\n flexDirection?: ResponsiveProp<BoxFlexDirection>\n flexWrap?: BoxFlexWrap\n alignItems?: ResponsiveProp<BoxAlignItems>\n alignSelf?: ResponsiveProp<BoxAlignSelf>\n justifyContent?: ResponsiveProp<BoxJustifyContent>\n overflow?: BoxOverflow\n height?: 'full'\n textAlign?: ResponsiveProp<BoxTextAlign>\n}\n\nconst Box = polymorphicComponent<'div', BoxProps, 'keepClassName'>(function Box(\n {\n as: component = 'div',\n position = 'static',\n display,\n flexDirection = 'row',\n flexWrap,\n flexGrow,\n flexShrink,\n alignItems,\n justifyContent,\n alignSelf,\n overflow,\n width,\n height,\n background,\n border,\n borderRadius,\n minWidth,\n maxWidth,\n textAlign,\n padding,\n paddingY,\n paddingX,\n paddingTop,\n paddingRight,\n paddingBottom,\n paddingLeft,\n margin,\n marginY,\n marginX,\n marginTop,\n marginRight,\n marginBottom,\n marginLeft,\n className,\n children,\n ...props\n },\n ref,\n) {\n const resolvedPaddingTop = paddingTop ?? paddingY ?? padding\n const resolvedPaddingRight = paddingRight ?? paddingX ?? padding\n const resolvedPaddingBottom = paddingBottom ?? paddingY ?? padding\n const resolvedPaddingLeft = paddingLeft ?? paddingX ?? padding\n\n const resolvedMarginTop = marginTop ?? marginY ?? margin\n const resolvedMarginRight = marginRight ?? marginX ?? margin\n const resolvedMarginBottom = marginBottom ?? marginY ?? margin\n const resolvedMarginLeft = marginLeft ?? marginX ?? margin\n\n const omitFlex =\n !display || (typeof display === 'string' && display !== 'flex' && display !== 'inlineFlex')\n\n return React.createElement(\n component,\n {\n ...props,\n className:\n classNames(\n className,\n styles.box,\n display ? getClassNames(styles, 'display', display) : null,\n position !== 'static' ? getClassNames(styles, 'position', position) : null,\n minWidth != null\n ? getClassNames(widthStyles, 'minWidth', String(minWidth))\n : null,\n getClassNames(widthStyles, 'maxWidth', maxWidth),\n getClassNames(styles, 'textAlign', textAlign),\n // padding\n getClassNames(paddingStyles, 'paddingTop', resolvedPaddingTop),\n getClassNames(paddingStyles, 'paddingRight', resolvedPaddingRight),\n getClassNames(paddingStyles, 'paddingBottom', resolvedPaddingBottom),\n getClassNames(paddingStyles, 'paddingLeft', resolvedPaddingLeft),\n // margin\n getClassNames(marginStyles, 'marginTop', resolvedMarginTop),\n getClassNames(marginStyles, 'marginRight', resolvedMarginRight),\n getClassNames(marginStyles, 'marginBottom', resolvedMarginBottom),\n getClassNames(marginStyles, 'marginLeft', resolvedMarginLeft),\n // flex props\n omitFlex ? null : getClassNames(styles, 'flexDirection', flexDirection),\n omitFlex ? null : getClassNames(styles, 'flexWrap', flexWrap),\n omitFlex ? null : getClassNames(styles, 'alignItems', alignItems),\n omitFlex ? null : getClassNames(styles, 'justifyContent', justifyContent),\n alignSelf != null ? getClassNames(styles, 'alignSelf', alignSelf) : null,\n flexShrink != null\n ? getClassNames(styles, 'flexShrink', String(flexShrink))\n : null,\n flexGrow != null ? getClassNames(styles, 'flexGrow', String(flexGrow)) : null,\n // other props\n getClassNames(styles, 'overflow', overflow),\n width != null ? getClassNames(widthStyles, 'width', String(width)) : null,\n getClassNames(styles, 'height', height),\n getClassNames(styles, 'bg', background),\n borderRadius !== 'none'\n ? getClassNames(styles, 'borderRadius', borderRadius)\n : null,\n border !== 'none' ? getClassNames(styles, 'border', border) : null,\n ) || undefined,\n ref,\n },\n children,\n )\n})\n\nexport type {\n BoxProps,\n BoxPaddingProps,\n BoxMarginProps,\n ReusableBoxProps,\n BoxMinWidth,\n BoxMaxWidth,\n BoxDisplay,\n BoxPosition,\n BoxFlexDirection,\n BoxFlexWrap,\n BoxAlignItems,\n BoxJustifyContent,\n BoxOverflow,\n BoxTextAlign,\n}\n\nexport { Box }\n"],"names":["polymorphicComponent","ref","as","component","position","display","flexDirection","flexWrap","flexGrow","flexShrink","alignItems","justifyContent","alignSelf","overflow","width","height","background","border","borderRadius","minWidth","maxWidth","textAlign","padding","paddingY","paddingX","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginY","marginX","marginTop","marginRight","marginBottom","marginLeft","className","children","props","resolvedPaddingTop","resolvedPaddingRight","resolvedPaddingBottom","resolvedPaddingLeft","resolvedMarginTop","resolvedMarginRight","resolvedMarginBottom","resolvedMarginLeft","omitFlex","React","classNames","styles","box","getClassNames","widthStyles","String","paddingStyles","marginStyles","undefined"],"mappings":"04BAuFYA,wBAAuD,WAuC/DC,2BArCIC,GAAIC,EAAY,MADpBC,SAEIA,EAAW,SAFfC,QAGIA,EAHJC,cAIIA,EAAgB,MAJpBC,SAKIA,EALJC,SAMIA,EANJC,WAOIA,EAPJC,WAQIA,EARJC,eASIA,EATJC,UAUIA,EAVJC,SAWIA,EAXJC,MAYIA,EAZJC,OAaIA,EAbJC,WAcIA,EAdJC,OAeIA,EAfJC,aAgBIA,EAhBJC,SAiBIA,EAjBJC,SAkBIA,EAlBJC,UAmBIA,EAnBJC,QAoBIA,EApBJC,SAqBIA,EArBJC,SAsBIA,EAtBJC,WAuBIA,EAvBJC,aAwBIA,EAxBJC,cAyBIA,EAzBJC,YA0BIA,EA1BJC,OA2BIA,EA3BJC,QA4BIA,EA5BJC,QA6BIA,EA7BJC,UA8BIA,EA9BJC,YA+BIA,EA/BJC,aAgCIA,EAhCJC,WAiCIA,EAjCJC,UAkCIA,EAlCJC,SAmCIA,KACGC,kCAIP,MAAMC,kBAAqBd,EAAAA,EAAcF,KAAYD,EAC/CkB,kBAAuBd,EAAAA,EAAgBF,KAAYF,EACnDmB,kBAAwBd,EAAAA,EAAiBJ,KAAYD,EACrDoB,kBAAsBd,EAAAA,EAAeJ,KAAYF,EAEjDqB,kBAAoBX,EAAAA,EAAaF,KAAWD,EAC5Ce,kBAAsBX,EAAAA,EAAeF,KAAWF,EAChDgB,kBAAuBX,EAAAA,EAAgBJ,KAAWD,EAClDiB,kBAAqBX,EAAAA,EAAcJ,KAAWF,EAE9CkB,IACD1C,GAA+B,iBAAZA,GAAoC,SAAZA,GAAkC,eAAZA,EAEtE,OAAO2C,gBACH7C,qCAEOmC,QACHF,UACIa,EACIb,EACAc,UAAOC,IACP9C,EAAU+C,gBAAcF,UAAQ,UAAW7C,GAAW,KACzC,WAAbD,EAAwBgD,gBAAcF,UAAQ,WAAY9C,GAAY,KAC1D,MAAZe,EACMiC,gBAAcC,UAAa,WAAYC,OAAOnC,IAC9C,KACNiC,gBAAcC,UAAa,WAAYjC,GACvCgC,gBAAcF,UAAQ,YAAa7B,GAEnC+B,gBAAcG,UAAe,aAAchB,IAC3Ca,gBAAcG,UAAe,eAAgBf,IAC7CY,gBAAcG,UAAe,gBAAiBd,IAC9CW,gBAAcG,UAAe,cAAeb,IAE5CU,gBAAcI,UAAc,YAAab,IACzCS,gBAAcI,UAAc,cAAeZ,IAC3CQ,gBAAcI,UAAc,eAAgBX,IAC5CO,gBAAcI,UAAc,aAAcV,IAE1CC,GAAW,KAAOK,gBAAcF,UAAQ,gBAAiB5C,GACzDyC,GAAW,KAAOK,gBAAcF,UAAQ,WAAY3C,GACpDwC,GAAW,KAAOK,gBAAcF,UAAQ,aAAcxC,GACtDqC,GAAW,KAAOK,gBAAcF,UAAQ,iBAAkBvC,GAC7C,MAAbC,EAAoBwC,gBAAcF,UAAQ,YAAatC,GAAa,KACtD,MAAdH,EACM2C,gBAAcF,UAAQ,aAAcI,OAAO7C,IAC3C,KACM,MAAZD,EAAmB4C,gBAAcF,UAAQ,WAAYI,OAAO9C,IAAa,KAEzE4C,gBAAcF,UAAQ,WAAYrC,GACzB,MAATC,EAAgBsC,gBAAcC,UAAa,QAASC,OAAOxC,IAAU,KACrEsC,gBAAcF,UAAQ,SAAUnC,GAChCqC,gBAAcF,UAAQ,KAAMlC,GACX,SAAjBE,EACMkC,gBAAcF,UAAQ,eAAgBhC,GACtC,KACK,SAAXD,EAAoBmC,gBAAcF,UAAQ,SAAUjC,GAAU,YAC7DwC,EACTxD,IAAAA,IAEJoC"}
|
|
@@ -11,62 +11,5 @@ export declare type ButtonProps = NativeButtonProps & BaseButtonProps & {
|
|
|
11
11
|
*
|
|
12
12
|
* @see ButtonLink
|
|
13
13
|
*/
|
|
14
|
-
export declare const Button: React.ForwardRefExoticComponent<
|
|
15
|
-
variant: "primary" | "secondary" | "tertiary" | "quaternary";
|
|
16
|
-
tone?: "normal" | "destructive" | undefined;
|
|
17
|
-
size?: "normal" | "small" | "large" | undefined;
|
|
18
|
-
disabled?: boolean | undefined;
|
|
19
|
-
loading?: boolean | undefined;
|
|
20
|
-
tooltip?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | (() => React.ReactNode) | null | undefined;
|
|
21
|
-
tooltipGapSize?: number | undefined;
|
|
22
|
-
} & {
|
|
23
|
-
icon: React.ReactChild;
|
|
24
|
-
'aria-label': string;
|
|
25
|
-
children?: undefined;
|
|
26
|
-
startIcon?: undefined;
|
|
27
|
-
endIcon?: undefined;
|
|
28
|
-
width?: undefined;
|
|
29
|
-
align?: undefined;
|
|
30
|
-
} & {
|
|
31
|
-
type?: "button" | "submit" | "reset" | undefined;
|
|
32
|
-
exceptionallySetClassName?: string | undefined;
|
|
33
|
-
} & React.RefAttributes<HTMLButtonElement>) | (Pick<React.AllHTMLAttributes<HTMLButtonElement>, "aria-label" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
|
|
34
|
-
variant: "primary" | "secondary" | "tertiary" | "quaternary";
|
|
35
|
-
tone?: "normal" | "destructive" | undefined;
|
|
36
|
-
size?: "normal" | "small" | "large" | undefined;
|
|
37
|
-
disabled?: boolean | undefined;
|
|
38
|
-
loading?: boolean | undefined;
|
|
39
|
-
tooltip?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | (() => React.ReactNode) | null | undefined;
|
|
40
|
-
tooltipGapSize?: number | undefined;
|
|
41
|
-
} & {
|
|
42
|
-
children: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal;
|
|
43
|
-
startIcon?: string | number | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
|
|
44
|
-
endIcon?: string | number | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
|
|
45
|
-
icon?: undefined;
|
|
46
|
-
} & {
|
|
47
|
-
width?: "auto" | undefined;
|
|
48
|
-
align?: undefined;
|
|
49
|
-
} & {
|
|
50
|
-
type?: "button" | "submit" | "reset" | undefined;
|
|
51
|
-
exceptionallySetClassName?: string | undefined;
|
|
52
|
-
} & React.RefAttributes<HTMLButtonElement>) | (Pick<React.AllHTMLAttributes<HTMLButtonElement>, "aria-label" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
|
|
53
|
-
variant: "primary" | "secondary" | "tertiary" | "quaternary";
|
|
54
|
-
tone?: "normal" | "destructive" | undefined;
|
|
55
|
-
size?: "normal" | "small" | "large" | undefined;
|
|
56
|
-
disabled?: boolean | undefined;
|
|
57
|
-
loading?: boolean | undefined;
|
|
58
|
-
tooltip?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | (() => React.ReactNode) | null | undefined;
|
|
59
|
-
tooltipGapSize?: number | undefined;
|
|
60
|
-
} & {
|
|
61
|
-
children: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal;
|
|
62
|
-
startIcon?: string | number | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
|
|
63
|
-
endIcon?: string | number | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
|
|
64
|
-
icon?: undefined;
|
|
65
|
-
} & {
|
|
66
|
-
width: "small" | "large" | "xsmall" | "medium" | "xlarge" | "full";
|
|
67
|
-
align?: "start" | "center" | "end" | undefined;
|
|
68
|
-
} & {
|
|
69
|
-
type?: "button" | "submit" | "reset" | undefined;
|
|
70
|
-
exceptionallySetClassName?: string | undefined;
|
|
71
|
-
} & React.RefAttributes<HTMLButtonElement>)>;
|
|
14
|
+
export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
72
15
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),a=require("../base-button/base-button.js")
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),a=require("../base-button/base-button.js");const r=["variant","tone","size","type","disabled","exceptionallySetClassName"];exports.Button=t.forwardRef((function(o,s){let{variant:l,tone:n="normal",size:i="normal",type:u="button",disabled:b=!1,exceptionallySetClassName:p}=o,c=e.objectWithoutProperties(o,r);return t.createElement(a.BaseButton,e.objectSpread2(e.objectSpread2({},c),{},{as:"button",ref:s,variant:l,tone:n,size:i,type:u,disabled:b,exceptionallySetClassName:p}))}));
|
|
2
2
|
//# sourceMappingURL=button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sources":["../../../src/new-components/button/button.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseButton } from '../base-button'\nimport type { BaseButtonProps } from '../base-button'\n\ntype NativeButtonProps = Omit<\n React.AllHTMLAttributes<HTMLButtonElement>,\n 'aria-disabled' | 'className' | keyof BaseButtonProps\n>\n\nexport type ButtonProps = NativeButtonProps &\n BaseButtonProps & {\n type?: 'button' | 'submit' | 'reset'\n exceptionallySetClassName?: string\n }\n\n/**\n * A semantic button that also looks like a button, and provides all the necessary visual variants.\n * It follows the [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).\n *\n * @see ButtonLink\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n {\n variant,\n tone = 'normal',\n size = 'normal',\n type = 'button',\n disabled = false,\n exceptionallySetClassName,\n ...props\n },\n ref,\n) {\n return (\n <BaseButton\n {...props}\n as=\"button\"\n ref={ref}\n variant={variant}\n tone={tone}\n size={size}\n type={type}\n disabled={disabled}\n exceptionallySetClassName={exceptionallySetClassName}\n />\n )\n})\n"],"names":["React","ref","variant","tone","size","type","disabled","exceptionallySetClassName","props","BaseButton","as"],"mappings":"
|
|
1
|
+
{"version":3,"file":"button.js","sources":["../../../src/new-components/button/button.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseButton } from '../base-button'\nimport type { BaseButtonProps } from '../base-button'\n\ntype NativeButtonProps = Omit<\n React.AllHTMLAttributes<HTMLButtonElement>,\n 'aria-disabled' | 'className' | keyof BaseButtonProps\n>\n\nexport type ButtonProps = NativeButtonProps &\n BaseButtonProps & {\n type?: 'button' | 'submit' | 'reset'\n exceptionallySetClassName?: string\n }\n\n/**\n * A semantic button that also looks like a button, and provides all the necessary visual variants.\n * It follows the [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).\n *\n * @see ButtonLink\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n {\n variant,\n tone = 'normal',\n size = 'normal',\n type = 'button',\n disabled = false,\n exceptionallySetClassName,\n ...props\n },\n ref,\n) {\n return (\n <BaseButton\n {...props}\n as=\"button\"\n ref={ref}\n variant={variant}\n tone={tone}\n size={size}\n type={type}\n disabled={disabled}\n exceptionallySetClassName={exceptionallySetClassName}\n />\n )\n})\n"],"names":["React","ref","variant","tone","size","type","disabled","exceptionallySetClassName","props","BaseButton","as"],"mappings":"8RAqBsBA,cAAiD,WAUnEC,OATAC,QACIA,EADJC,KAEIA,EAAO,SAFXC,KAGIA,EAAO,SAHXC,KAIIA,EAAO,SAJXC,SAKIA,GAAW,EALfC,0BAMIA,KACGC,iCAIP,OACIR,gBAACS,gDACOD,OACJE,GAAG,SACHT,IAAKA,EACLC,QAASA,EACTC,KAAMA,EACNC,KAAMA,EACNC,KAAMA,EACNC,SAAUA,EACVC,0BAA2BA"}
|