@frontify/fondue 12.0.0-beta.127 → 12.0.0-beta.129
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/DatePicker/DatePicker.d.ts +6 -2
- package/dist/components/DatePicker/DatePicker.es.js +118 -111
- package/dist/components/DatePicker/DatePicker.es.js.map +1 -1
- package/dist/components/DatePicker/DatePickerTrigger.es.js +15 -15
- package/dist/components/DatePicker/DatePickerTrigger.es.js.map +1 -1
- package/dist/components/Textarea/Textarea.es.js +47 -43
- package/dist/components/Textarea/Textarea.es.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.es.js +51 -51
- package/dist/components/Tooltip/Tooltip.es.js.map +1 -1
- package/dist/components/Tree/TreeItem.es.js +7 -7
- package/dist/components/Tree/TreeItem.es.js.map +1 -1
- package/dist/components/Trigger/Trigger.es.js +35 -31
- package/dist/components/Trigger/Trigger.es.js.map +1 -1
- package/dist/extractedThirdPartyStyles.css +5 -1
- package/dist/index.cjs.js +12 -12
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.umd.js +7 -7
- package/dist/index.umd.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Trigger.es.js","sources":["../../../src/components/Trigger/Trigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCross, IconExclamationMarkTriangle, IconTrashBin } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE, FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport React, { FC, HTMLAttributes } from 'react';\n\nexport enum TriggerSize {\n Small = 'Small',\n Large = 'Large',\n}\n\nexport enum TriggerEmphasis {\n Default = 'Default',\n Weak = 'Weak',\n}\n\nexport type TriggerProps = {\n disabled?: boolean;\n isOpen?: boolean;\n onClear?: () => void;\n onDelete?: () => void;\n buttonProps?: HTMLAttributes<HTMLElement>;\n isFocusVisible?: boolean;\n size?: TriggerSize;\n showClear?: boolean;\n validation?: Validation;\n emphasis?: TriggerEmphasis;\n};\n\nconst getTriggerClassNames = (\n isFocusVisible: boolean,\n disabled: boolean,\n isOpen: boolean,\n emphasis: TriggerEmphasis,\n validation: Validation,\n) =>\n merge([\n 'tw-group tw-relative tw-flex tw-w-full tw-items-center tw-justify-between tw-border tw-rounded tw-transition-colors tw-min-h-[36px]',\n isFocusVisible && FOCUS_STYLE,\n disabled\n ? 'tw-border-black-5 tw-bg-black-5 tw-pointer-events-none'\n : merge([\n 'hover:tw-border-line-xx-strong',\n emphasis === TriggerEmphasis.Weak ? '' : 'tw-bg-base',\n isOpen ? 'tw-border-line-xx-strong' : 'tw-border-line',\n emphasis === TriggerEmphasis.Weak\n ? 'tw-border-0 hover:tw-outline hover:tw-outline-1'\n : validationClassMap[validation],\n ]),\n ]);\n\nexport const Trigger: FC<TriggerProps> = ({\n buttonProps,\n onClear,\n onDelete,\n children,\n disabled = false,\n isOpen = false,\n isFocusVisible = false,\n size = TriggerSize.Small,\n showClear = false,\n validation = Validation.Default,\n emphasis = TriggerEmphasis.Default,\n}) => {\n const { focusProps: clearableFocusProps, isFocusVisible: isClearFocusVisible } = useFocusRing();\n const { focusProps: onDeleteFocusProps, isFocusVisible: isOnDeleteFocusVisible } = useFocusRing();\n\n return (\n <div\n data-test-id=\"trigger\"\n className={getTriggerClassNames(isFocusVisible, disabled, isOpen, emphasis, validation)}\n >\n {children}\n <div\n className={merge([\n 'tw-flex-none tw-flex tw-items-center tw-absolute',\n size === TriggerSize.Large ? 'tw-right-5 tw-gap-1.5' : 'tw-right-3 tw-gap-1',\n ])}\n >\n {showClear && (\n <button\n {...clearableFocusProps}\n data-test-id=\"dropdown-clear-button\"\n aria-label=\"Clear selection\"\n type=\"button\"\n className={merge([\n isClearFocusVisible && FOCUS_STYLE,\n disabled ? 'tw-pointer-events-none tw-text-black-40' : 'tw-text-black-80',\n ])}\n onClick={() => !!onClear && onClear()}\n >\n <IconCross size={IconSize.Size12} />\n </button>\n )}\n {!!onDelete && (\n <button\n {...onDeleteFocusProps}\n data-test-id=\"dropdown-delete-button\"\n aria-label=\"Delete selection\"\n type=\"button\"\n className={merge([\n 'tw-rounded',\n isOnDeleteFocusVisible && FOCUS_STYLE,\n disabled ? 'tw-pointer-events-none tw-text-black-40' : 'tw-text-black-80',\n ])}\n onClick={onDelete}\n >\n <IconTrashBin size={IconSize.Size12} />\n </button>\n )}\n <button\n {...buttonProps}\n aria-hidden=\"true\"\n type=\"button\"\n disabled={disabled}\n className={merge([\n 'tw-rounded',\n disabled\n ? 'tw-pointer-events-none tw-text-black-40'\n : merge([\n 'group-hover:tw-text-black ',\n isOpen ? 'tw-text-black-100' : 'tw-text-black-80',\n FOCUS_VISIBLE_STYLE,\n ]),\n ])}\n >\n <div className={merge(['tw-transition-transform', isOpen && 'tw-rotate-180'])}>\n <IconCaretDown size={IconSize.Size16} />\n </div>\n </button>\n {validation === Validation.Error && (\n <span\n className
|
|
1
|
+
{"version":3,"file":"Trigger.es.js","sources":["../../../src/components/Trigger/Trigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCross, IconExclamationMarkTriangle, IconTrashBin } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE, FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport React, { FC, HTMLAttributes } from 'react';\n\nexport enum TriggerSize {\n Small = 'Small',\n Large = 'Large',\n}\n\nexport enum TriggerEmphasis {\n Default = 'Default',\n Weak = 'Weak',\n}\n\nexport type TriggerProps = {\n disabled?: boolean;\n isOpen?: boolean;\n onClear?: () => void;\n onDelete?: () => void;\n buttonProps?: HTMLAttributes<HTMLElement>;\n isFocusVisible?: boolean;\n size?: TriggerSize;\n showClear?: boolean;\n validation?: Validation;\n emphasis?: TriggerEmphasis;\n};\n\nconst getTriggerClassNames = (\n isFocusVisible: boolean,\n disabled: boolean,\n isOpen: boolean,\n emphasis: TriggerEmphasis,\n validation: Validation,\n) =>\n merge([\n 'tw-group tw-relative tw-flex tw-w-full tw-items-center tw-justify-between tw-border tw-rounded tw-transition-colors tw-min-h-[36px]',\n isFocusVisible && FOCUS_STYLE,\n disabled\n ? 'tw-border-black-5 tw-bg-black-5 tw-pointer-events-none'\n : merge([\n 'hover:tw-border-line-xx-strong',\n emphasis === TriggerEmphasis.Weak ? '' : 'tw-bg-base',\n isOpen ? 'tw-border-line-xx-strong' : 'tw-border-line',\n emphasis === TriggerEmphasis.Weak\n ? 'tw-border-0 hover:tw-outline hover:tw-outline-1'\n : validationClassMap[validation],\n ]),\n ]);\n\nexport const Trigger: FC<TriggerProps> = ({\n buttonProps,\n onClear,\n onDelete,\n children,\n disabled = false,\n isOpen = false,\n isFocusVisible = false,\n size = TriggerSize.Small,\n showClear = false,\n validation = Validation.Default,\n emphasis = TriggerEmphasis.Default,\n}) => {\n const { focusProps: clearableFocusProps, isFocusVisible: isClearFocusVisible } = useFocusRing();\n const { focusProps: onDeleteFocusProps, isFocusVisible: isOnDeleteFocusVisible } = useFocusRing();\n\n return (\n <div\n data-test-id=\"trigger\"\n className={getTriggerClassNames(isFocusVisible, disabled, isOpen, emphasis, validation)}\n >\n {children}\n <div\n className={merge([\n 'tw-flex-none tw-flex tw-items-center tw-absolute',\n size === TriggerSize.Large ? 'tw-right-5 tw-gap-1.5' : 'tw-right-3 tw-gap-1',\n ])}\n >\n {showClear && (\n <button\n {...clearableFocusProps}\n data-test-id=\"dropdown-clear-button\"\n aria-label=\"Clear selection\"\n type=\"button\"\n className={merge([\n isClearFocusVisible && FOCUS_STYLE,\n disabled ? 'tw-pointer-events-none tw-text-black-40' : 'tw-text-black-80',\n ])}\n onClick={() => !!onClear && onClear()}\n >\n <IconCross size={IconSize.Size12} />\n </button>\n )}\n {!!onDelete && (\n <button\n {...onDeleteFocusProps}\n data-test-id=\"dropdown-delete-button\"\n aria-label=\"Delete selection\"\n type=\"button\"\n className={merge([\n 'tw-rounded',\n isOnDeleteFocusVisible && FOCUS_STYLE,\n disabled ? 'tw-pointer-events-none tw-text-black-40' : 'tw-text-black-80',\n ])}\n onClick={onDelete}\n >\n <IconTrashBin size={IconSize.Size12} />\n </button>\n )}\n <button\n {...buttonProps}\n aria-hidden=\"true\"\n type=\"button\"\n disabled={disabled}\n className={merge([\n 'tw-rounded',\n disabled\n ? 'tw-pointer-events-none tw-text-black-40'\n : merge([\n 'group-hover:tw-text-black ',\n isOpen ? 'tw-text-black-100' : 'tw-text-black-80',\n FOCUS_VISIBLE_STYLE,\n ]),\n ])}\n >\n <div className={merge(['tw-transition-transform', isOpen && 'tw-rotate-180'])}>\n <IconCaretDown size={IconSize.Size16} />\n </div>\n </button>\n {(validation === Validation.Error || validation === Validation.Warning) && (\n <span\n className={merge([\n 'tw-flex tw-items-center tw-justify-center',\n validation === Validation.Error && 'tw-text-text-negative',\n validation === Validation.Warning && 'tw-text-text-warning',\n ])}\n data-test-id=\"error-state-exclamation-mark-icon\"\n >\n <IconExclamationMarkTriangle />\n </span>\n )}\n </div>\n </div>\n );\n};\nTrigger.displayName = 'FondueTrigger';\n"],"names":["TriggerSize","TriggerEmphasis","getTriggerClassNames","isFocusVisible","disabled","isOpen","emphasis","validation","merge","FOCUS_STYLE","validationClassMap","Trigger","buttonProps","onClear","onDelete","children","size","showClear","Validation","clearableFocusProps","isClearFocusVisible","useFocusRing","onDeleteFocusProps","isOnDeleteFocusVisible","React","IconCross","IconSize","IconTrashBin","FOCUS_VISIBLE_STYLE","IconCaretDown","IconExclamationMarkTriangle"],"mappings":"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"}
|
|
@@ -84,14 +84,18 @@
|
|
|
84
84
|
font-weight: normal;
|
|
85
85
|
}
|
|
86
86
|
|
|
87
|
+
|
|
87
88
|
.react-datepicker-wrap .react-datepicker__day--keyboard-selected,
|
|
88
89
|
.react-datepicker .react-datepicker__day--selected,
|
|
89
90
|
.react-datepicker .react-datepicker__day--selected:hover,
|
|
91
|
+
.react-datepicker__day.react-datepicker__day--in-range.react-datepicker__day--range-start.range-day:focus-visible,
|
|
92
|
+
.react-datepicker__day.react-datepicker__day--in-range.react-datepicker__day--range-end.range-day:focus-visible,
|
|
93
|
+
.react-datepicker__day--keyboard-selected.react-datepicker__day.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-start.range-day,
|
|
90
94
|
.react-datepicker .react-datepicker__day:focus-visible {
|
|
91
95
|
background-color: var(--box-selected-strong-color);
|
|
92
96
|
border-radius: 0;
|
|
93
97
|
border: none;
|
|
94
|
-
outline-color:
|
|
98
|
+
outline-color: #5e9ed6;
|
|
95
99
|
color: var(--base-color);
|
|
96
100
|
}
|
|
97
101
|
|