@transferwise/components 46.87.2 → 46.88.0
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/build/avatarLayout/AvatarLayout.js +9 -2
- package/build/avatarLayout/AvatarLayout.js.map +1 -1
- package/build/avatarLayout/AvatarLayout.mjs +9 -2
- package/build/avatarLayout/AvatarLayout.mjs.map +1 -1
- package/build/button/Button.js +92 -79
- package/build/button/Button.js.map +1 -1
- package/build/button/Button.mjs +93 -80
- package/build/button/Button.mjs.map +1 -1
- package/build/button/Button.resolver.js +74 -0
- package/build/button/Button.resolver.js.map +1 -0
- package/build/button/Button.resolver.mjs +72 -0
- package/build/button/Button.resolver.mjs.map +1 -0
- package/build/button/LegacyButton.js +114 -0
- package/build/button/LegacyButton.js.map +1 -0
- package/build/button/LegacyButton.mjs +112 -0
- package/build/button/LegacyButton.mjs.map +1 -0
- package/build/circularButton/CircularButton.js.map +1 -1
- package/build/circularButton/CircularButton.mjs.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.js +2 -2
- package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.mjs +1 -1
- package/build/header/Header.js +2 -2
- package/build/header/Header.js.map +1 -1
- package/build/header/Header.mjs +1 -1
- package/build/index.js +2 -2
- package/build/index.mjs +1 -1
- package/build/link/Link.js +8 -3
- package/build/link/Link.js.map +1 -1
- package/build/link/Link.mjs +8 -3
- package/build/link/Link.mjs.map +1 -1
- package/build/main.css +247 -0
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js +2 -4
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js.map +1 -1
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs +2 -4
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs.map +1 -1
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.js +3 -5
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.js.map +1 -1
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs +3 -5
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs.map +1 -1
- package/build/select/Select.js +2 -2
- package/build/select/Select.js.map +1 -1
- package/build/select/Select.mjs +1 -1
- package/build/styles/avatarLayout/AvatarLayout.css +11 -0
- package/build/styles/button/Button.css +228 -15
- package/build/styles/button/Button.vars.css +46 -0
- package/build/styles/button/LegacyButton.css +23 -0
- package/build/styles/main.css +247 -0
- package/build/types/avatarLayout/AvatarLayout.d.ts.map +1 -1
- package/build/types/button/Button.d.ts +2 -23
- package/build/types/button/Button.d.ts.map +1 -1
- package/build/types/button/Button.resolver.d.ts +35 -0
- package/build/types/button/Button.resolver.d.ts.map +1 -0
- package/build/types/button/Button.types.d.ts +70 -0
- package/build/types/button/Button.types.d.ts.map +1 -0
- package/build/types/button/LegacyButton.d.ts +44 -0
- package/build/types/button/LegacyButton.d.ts.map +1 -0
- package/build/types/button/index.d.ts +2 -2
- package/build/types/button/index.d.ts.map +1 -1
- package/build/types/circularButton/CircularButton.d.ts.map +1 -1
- package/build/types/link/Link.d.ts +2 -2
- package/build/types/link/Link.d.ts.map +1 -1
- package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.d.ts.map +1 -1
- package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts +6 -2
- package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts.map +1 -1
- package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.d.ts.map +1 -1
- package/build/types/test-utils/story-config.d.ts +1 -1
- package/build/types/test-utils/story-config.d.ts.map +1 -1
- package/build/upload/steps/completeStep/completeStep.js +2 -2
- package/build/upload/steps/completeStep/completeStep.js.map +1 -1
- package/build/upload/steps/completeStep/completeStep.mjs +1 -1
- package/build/upload/steps/processingStep/processingStep.js +2 -2
- package/build/upload/steps/processingStep/processingStep.js.map +1 -1
- package/build/upload/steps/processingStep/processingStep.mjs +1 -1
- package/build/uploadInput/UploadInput.js +3 -3
- package/build/uploadInput/UploadInput.js.map +1 -1
- package/build/uploadInput/UploadInput.mjs +1 -1
- package/package.json +3 -3
- package/src/alert/Alert.tests.story.tsx +1 -1
- package/src/avatar/Avatar.story.tsx +1 -1
- package/src/avatarLayout/AvatarLayout.css +11 -0
- package/src/avatarLayout/AvatarLayout.less +18 -1
- package/src/avatarLayout/AvatarLayout.tsx +10 -2
- package/src/avatarWrapper/AvatarWrapper.story.tsx +1 -1
- package/src/badge/Badge.story.tsx +1 -1
- package/src/button/Button.accessibility.docs.mdx +103 -0
- package/src/button/Button.css +228 -15
- package/src/button/Button.less +242 -14
- package/src/button/Button.resolver.tsx +73 -0
- package/src/button/Button.spec.tsx +329 -213
- package/src/button/Button.story.tsx +782 -134
- package/src/button/Button.tests.story.tsx +27 -0
- package/src/button/Button.tsx +103 -132
- package/src/button/Button.types.ts +92 -0
- package/src/button/Button.vars.css +46 -0
- package/src/button/Button.vars.less +59 -0
- package/src/button/LegacyButton.css +23 -0
- package/src/button/LegacyButton.less +24 -0
- package/src/button/LegacyButton.spec.tsx +147 -0
- package/src/button/LegacyButton.story.tsx +228 -0
- package/src/button/LegacyButton.tsx +177 -0
- package/src/button/index.ts +2 -3
- package/src/card/Card.story.tsx +6 -1
- package/src/circularButton/CircularButton.tsx +1 -0
- package/src/field/Field.story.tsx +1 -1
- package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +1 -2
- package/src/inputs/SelectInput.story.tsx +1 -1
- package/src/label/Label.story.tsx +1 -1
- package/src/link/Link.tsx +15 -6
- package/src/main.css +247 -0
- package/src/main.less +1 -0
- package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx +2 -8
- package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.ts +7 -2
- package/src/primitives/PrimitiveAnchor/test/PrimitiveAnchor.spec.tsx +1 -3
- package/src/primitives/PrimitiveButton/src/PrimitiveButton.tsx +4 -12
- package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx +16 -13
- package/src/select/Select.story.tsx +4 -1
- package/src/test-utils/Parameters.d.ts +9 -1
- package/src/test-utils/story-config.ts +10 -1
- package/src/button/__snapshots__/Button.spec.tsx.snap +0 -309
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrimitiveButton.mjs","sources":["../../../../src/primitives/PrimitiveButton/src/PrimitiveButton.tsx"],"sourcesContent":["/* eslint-disable react/button-has-type */\nimport React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport { useIntl, MessageDescriptor } from 'react-intl';\nimport messages from '../../../i18n/commonMessages/Button.messages';\nimport type { PrimitiveButtonProps } from '..';\n\n/**\n * The Primitive `PrimitiveButton` component can be used in various parts the Wise Design\n * System internally. It supports different states such as disabled and loading,\n * and provides event handlers for common interactions like click, focus, blur,\n * mouse enter, mouse leave, and keydown.\n *\n * @see {@link PrimitiveButton} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-button--docs|Storybook Wise Design}\n */\nconst PrimitiveButton = forwardRef<HTMLButtonElement, PrimitiveButtonProps>(\n (\n {\n children,\n className,\n id,\n disabled = false,\n loading = false,\n testId,\n type = 'button',\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const intl = useIntl();\n const classNames = clsx(
|
|
1
|
+
{"version":3,"file":"PrimitiveButton.mjs","sources":["../../../../src/primitives/PrimitiveButton/src/PrimitiveButton.tsx"],"sourcesContent":["/* eslint-disable react/button-has-type */\nimport React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport { useIntl, MessageDescriptor } from 'react-intl';\nimport messages from '../../../i18n/commonMessages/Button.messages';\nimport type { PrimitiveButtonProps } from '..';\n\n/**\n * The Primitive `PrimitiveButton` component can be used in various parts the Wise Design\n * System internally. It supports different states such as disabled and loading,\n * and provides event handlers for common interactions like click, focus, blur,\n * mouse enter, mouse leave, and keydown.\n *\n * @see {@link PrimitiveButton} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-button--docs|Storybook Wise Design}\n */\nconst PrimitiveButton = forwardRef<HTMLButtonElement, PrimitiveButtonProps>(\n (\n {\n children,\n className,\n id,\n disabled = false,\n loading = false,\n testId,\n type = 'button',\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const intl = useIntl();\n const classNames = clsx(className);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled || loading) {\n event.preventDefault();\n } else {\n onClick?.(event);\n }\n },\n [disabled, loading, onClick],\n );\n\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n onFocus?.(event);\n },\n [onFocus],\n );\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n onBlur?.(event);\n },\n [onBlur],\n );\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n onMouseEnter?.(event);\n },\n [onMouseEnter],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n onMouseLeave?.(event);\n },\n [onMouseLeave],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLButtonElement>) => {\n onKeyDown?.(event);\n },\n [onKeyDown],\n );\n\n /**\n * The following props are used to manage the `disabled` and `loading`\n * states for the button:\n *\n * - `aria-disabled`: Communicates to assistive technologies that the button\n * is disabled when it is either disabled or loading.\n * - `aria-label`: Provides an accessible label for the button, using a\n * localized loading message when the button is in a loading state.\n * - `aria-live`: Ensures that updates to the button's content are announced\n * by assistive technologies, set to 'polite' during loading.\n */\n const buttonProps = {\n 'aria-disabled': loading || undefined,\n 'aria-busy': loading || undefined,\n 'aria-label': loading ? intl.formatMessage(messages.loadingAriaLabel) : props['aria-label'],\n 'aria-live': (loading ? 'polite' : 'off') as 'polite' | 'off' | 'assertive' | undefined,\n className: classNames,\n 'data-testid': testId,\n disabled,\n id,\n ref,\n type,\n onBlur: handleBlur,\n onClick: handleClick,\n onFocus: handleFocus,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onKeyDown: handleKeyDown,\n ...props,\n };\n\n return <button {...buttonProps}>{children}</button>;\n },\n);\n\nPrimitiveButton.displayName = 'PrimitiveButton';\n\nexport default PrimitiveButton;\n"],"names":["PrimitiveButton","forwardRef","children","className","id","disabled","loading","testId","type","onClick","onFocus","onBlur","onMouseEnter","onMouseLeave","onKeyDown","props","ref","intl","useIntl","classNames","clsx","handleClick","useCallback","event","preventDefault","handleFocus","handleBlur","handleMouseEnter","handleMouseLeave","handleKeyDown","buttonProps","undefined","formatMessage","messages","loadingAriaLabel","_jsx","displayName"],"mappings":";;;;;;AAAA;AAgBA,MAAMA,eAAe,gBAAGC,UAAU,CAChC,CACE;EACEC,QAAQ;EACRC,SAAS;EACTC,EAAE;AACFC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,OAAO,GAAG,KAAK;EACfC,MAAM;AACNC,EAAAA,IAAI,GAAG,QAAQ;EACfC,OAAO;EACPC,OAAO;EACPC,MAAM;EACNC,YAAY;EACZC,YAAY;EACZC,SAAS;EACT,GAAGC,KAAAA;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;AACtB,EAAA,MAAMC,UAAU,GAAGC,IAAI,CAACjB,SAAS,CAAC,CAAA;AAElC,EAAA,MAAMkB,WAAW,GAAGC,WAAW,CAC5BC,KAA0C,IAAI;IAC7C,IAAIlB,QAAQ,IAAIC,OAAO,EAAE;MACvBiB,KAAK,CAACC,cAAc,EAAE,CAAA;AACxB,KAAC,MAAM;MACLf,OAAO,GAAGc,KAAK,CAAC,CAAA;AAClB,KAAA;GACD,EACD,CAAClB,QAAQ,EAAEC,OAAO,EAAEG,OAAO,CAAC,CAC7B,CAAA;AAED,EAAA,MAAMgB,WAAW,GAAGH,WAAW,CAC5BC,KAA0C,IAAI;IAC7Cb,OAAO,GAAGa,KAAK,CAAC,CAAA;AAClB,GAAC,EACD,CAACb,OAAO,CAAC,CACV,CAAA;AAED,EAAA,MAAMgB,UAAU,GAAGJ,WAAW,CAC3BC,KAA0C,IAAI;IAC7CZ,MAAM,GAAGY,KAAK,CAAC,CAAA;AACjB,GAAC,EACD,CAACZ,MAAM,CAAC,CACT,CAAA;AAED,EAAA,MAAMgB,gBAAgB,GAAGL,WAAW,CACjCC,KAA0C,IAAI;IAC7CX,YAAY,GAAGW,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACX,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMgB,gBAAgB,GAAGN,WAAW,CACjCC,KAA0C,IAAI;IAC7CV,YAAY,GAAGU,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACV,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMgB,aAAa,GAAGP,WAAW,CAC9BC,KAA6C,IAAI;IAChDT,SAAS,GAAGS,KAAK,CAAC,CAAA;AACpB,GAAC,EACD,CAACT,SAAS,CAAC,CACZ,CAAA;AAED;;;;;;;;;;AAUG;AACH,EAAA,MAAMgB,WAAW,GAAG;IAClB,eAAe,EAAExB,OAAO,IAAIyB,SAAS;IACrC,WAAW,EAAEzB,OAAO,IAAIyB,SAAS;AACjC,IAAA,YAAY,EAAEzB,OAAO,GAAGW,IAAI,CAACe,aAAa,CAACC,QAAQ,CAACC,gBAAgB,CAAC,GAAGnB,KAAK,CAAC,YAAY,CAAC;AAC3F,IAAA,WAAW,EAAGT,OAAO,GAAG,QAAQ,GAAG,KAAoD;AACvFH,IAAAA,SAAS,EAAEgB,UAAU;AACrB,IAAA,aAAa,EAAEZ,MAAM;IACrBF,QAAQ;IACRD,EAAE;IACFY,GAAG;IACHR,IAAI;AACJG,IAAAA,MAAM,EAAEe,UAAU;AAClBjB,IAAAA,OAAO,EAAEY,WAAW;AACpBX,IAAAA,OAAO,EAAEe,WAAW;AACpBb,IAAAA,YAAY,EAAEe,gBAAgB;AAC9Bd,IAAAA,YAAY,EAAEe,gBAAgB;AAC9Bd,IAAAA,SAAS,EAAEe,aAAa;IACxB,GAAGd,KAAAA;GACJ,CAAA;AAED,EAAA,oBAAOoB,GAAA,CAAA,QAAA,EAAA;AAAA,IAAA,GAAYL,WAAW;AAAA5B,IAAAA,QAAA,EAAGA,QAAAA;AAAQ,GAAS,CAAC,CAAA;AACrD,CAAC,EACF;AAEDF,eAAe,CAACoC,WAAW,GAAG,iBAAiB;;;;"}
|
package/build/select/Select.js
CHANGED
|
@@ -4,7 +4,7 @@ var componentsTheming = require('@wise/components-theming');
|
|
|
4
4
|
var clsx = require('clsx');
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var reactIntl = require('react-intl');
|
|
7
|
-
var
|
|
7
|
+
var Button_resolver = require('../button/Button.resolver.js');
|
|
8
8
|
var Chevron = require('../chevron/Chevron.js');
|
|
9
9
|
var documentIosClick = require('../common/domHelpers/documentIosClick.js');
|
|
10
10
|
require('../common/theme.js');
|
|
@@ -456,7 +456,7 @@ function Select({
|
|
|
456
456
|
onTouchMove: handleTouchStart,
|
|
457
457
|
onFocus: handleOnFocus,
|
|
458
458
|
onBlur: handleOnBlur,
|
|
459
|
-
children: [/*#__PURE__*/jsxRuntime.jsxs(
|
|
459
|
+
children: [/*#__PURE__*/jsxRuntime.jsxs(Button_resolver, {
|
|
460
460
|
ref: dropdownButtonReference,
|
|
461
461
|
...inputAttributes,
|
|
462
462
|
id: computedId,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sources":["../../src/select/Select.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useState, useEffect, useRef, useMemo, useId } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Button, { ButtonProps } from '../button';\nimport Chevron from '../chevron';\nimport { Position, Size } from '../common';\nimport BottomSheet from '../common/bottomSheet';\nimport { stopPropagation } from '../common/domHelpers';\nimport { useLayout } from '../common/hooks';\nimport Panel from '../common/panel';\nimport Drawer from '../drawer';\nimport { useInputAttributes } from '../inputs/contexts';\n\nimport messages from './Select.messages';\nimport Option from './option';\nimport SearchBox from './searchBox';\n\nconst DEFAULT_SEARCH_VALUE = '';\nconst DEFAULT_OPTIONS_PAGE_SIZE = 1000;\n\nconst includesString = (string1: string, string2: string) =>\n string1.toLowerCase().includes(string2.toLowerCase());\n\nexport interface SelectOptionItem {\n value: any;\n label?: React.ReactNode;\n icon?: React.ReactNode;\n currency?: string;\n note?: React.ReactNode;\n secondary?: React.ReactNode;\n}\n\nexport interface SelectItem extends Partial<SelectOptionItem> {\n header?: React.ReactNode;\n separator?: boolean;\n disabled?: boolean;\n searchStrings?: string[];\n}\n\nexport interface SelectItemWithPlaceholder extends SelectItem {\n placeholder?: string;\n}\n\nfunction defaultFilterFunction(option: SelectItemWithPlaceholder, searchValue: string) {\n if (isPlaceholderOption(option)) {\n return true;\n }\n const { label, note, secondary, currency, searchStrings } = option;\n return (\n (typeof label === 'string' && includesString(label, searchValue)) ||\n (typeof note === 'string' && includesString(note, searchValue)) ||\n (typeof secondary === 'string' && includesString(secondary, searchValue)) ||\n (!!currency && includesString(currency, searchValue)) ||\n (!!searchStrings && searchStrings.some((string) => includesString(string, searchValue)))\n );\n}\n\nfunction isActionableOption(option: SelectItem) {\n return !option.header && !option.separator && !option.disabled;\n}\n\nfunction isHeaderOption(option: SelectItem | null) {\n return option != null && 'header' in option;\n}\n\nfunction isSeparatorOption(option: SelectItem | null) {\n return option != null && 'separator' in option;\n}\n\nfunction clamp(from: number, to: number, value: number) {\n return Math.max(Math.min(to, value), from);\n}\n\n/**\n * No option or placeholder option is selected\n */\nconst DEFAULT_SELECTED_OPTION = null;\n\nfunction isPlaceholderOption(option: SelectItemWithPlaceholder | null) {\n return option === DEFAULT_SELECTED_OPTION || 'placeholder' in option;\n}\n\nfunction isSearchableOption(option: SelectItemWithPlaceholder | null) {\n return !isHeaderOption(option) && !isSeparatorOption(option) && !isPlaceholderOption(option);\n}\n\nconst getUniqueIdForOption = (parentId: string | undefined, option: SelectItem | null) => {\n if (option == null) {\n return undefined;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const uniqueOptionId =\n option.value || (typeof option.label === 'string' ? option.label.replace(/\\s/g, '') : '');\n\n return `option-${parentId ?? ''}-${uniqueOptionId}`;\n};\n\nexport interface SelectProps {\n placeholder?: string;\n id?: string;\n required?: boolean;\n disabled?: boolean;\n inverse?: boolean;\n dropdownRight?: `${Size.EXTRA_SMALL | Size.SMALL | Size.MEDIUM | Size.LARGE | Size.EXTRA_LARGE}`;\n dropdownWidth?: `${Size.SMALL | Size.MEDIUM | Size.LARGE}`;\n size?: `${Size.SMALL | Size.MEDIUM | Size.LARGE}`;\n block?: boolean;\n selected?: SelectOptionItem;\n /**\n * Search toggle\n * if `true` default search functionality being enabled (not case sensitive search in option labels & currency props)\n * if `function` you can define your own search function to implement custom search experience. This search function used while filtering the options array.\n */\n search?: boolean | ((option: SelectItemWithPlaceholder, searchValue: string) => boolean);\n options: SelectItem[];\n searchValue?: string;\n searchPlaceholder?: string;\n classNames?: Record<string, string>;\n dropdownUp?: boolean;\n buttonProps?: Extract<ButtonProps, { as?: 'button' }>;\n dropdownProps?: React.ComponentPropsWithoutRef<'ul'>;\n onChange: (value: SelectItem | typeof DEFAULT_SELECTED_OPTION) => void;\n onFocus?: React.FocusEventHandler<HTMLDivElement>;\n onBlur?: React.FocusEventHandler<HTMLDivElement>;\n /**\n * To have full control of your search value and response use `onSearchChange` function combined with `searchValue` and custom filtering on the options array.\n * DO NOT USE TOGETHER WITH `search` PROPERTY\n */\n onSearchChange?: (value: string) => void;\n}\n\nconst defaultClassNames = {};\n\n/**\n * @deprecated Use `SelectInput` instead (https://neptune.wise.design/blog/2023-11-28-adopting-our-new-selectinput)\n */\nexport default function Select({\n placeholder,\n id,\n required,\n disabled,\n inverse,\n dropdownWidth,\n size = 'md',\n block = true,\n selected,\n search,\n onChange,\n onFocus,\n onBlur,\n options: defaultOptions,\n onSearchChange,\n searchValue: initSearchValue = '',\n searchPlaceholder,\n classNames: classNamesProp = defaultClassNames,\n dropdownUp,\n dropdownProps,\n buttonProps,\n}: SelectProps) {\n const inputAttributes = useInputAttributes();\n\n const { formatMessage } = useIntl();\n const { isModern } = useTheme();\n const s = (className: string) => classNamesProp[className] || className;\n const [open, setOpen] = useState(false);\n const [searchValue, setSearchValue] = useState(DEFAULT_SEARCH_VALUE);\n const [keyboardFocusedOptionIndex, setKeyboardFocusedOptionIndex] = useState(-1);\n const keyboardFocusedReference = useRef<HTMLLIElement>(null);\n const previousKeyboardFocusedOptionIndex = useRef(-1);\n const [numberOfOptionsShown, setNumberOfOptionsShown] = useState(DEFAULT_OPTIONS_PAGE_SIZE);\n const searchBoxReference = useRef<HTMLInputElement>(null);\n const selectReference = useRef<HTMLDivElement>(null);\n const dropdownButtonReference = useRef<HTMLButtonElement>(null);\n const optionsListReference = useRef<HTMLUListElement>(null);\n const isSearchEnabled = !!onSearchChange || !!search;\n const isDropdownAutoWidth = dropdownWidth == null;\n\n const options = useMemo(() => {\n if (!search || !searchValue) {\n return defaultOptions;\n }\n\n return defaultOptions.filter(isSearchableOption).filter((option) => {\n if (typeof search === 'function') {\n return search(option, searchValue);\n }\n return defaultFilterFunction(option, searchValue);\n });\n }, [defaultOptions, search, searchValue]);\n\n const selectableOptions = useMemo(() => options.filter(isActionableOption), [options]);\n const focusedOption = selectableOptions[keyboardFocusedOptionIndex];\n\n const fallbackButtonId = useId();\n const computedId = id || inputAttributes.id || fallbackButtonId;\n const listboxId = `${computedId}-listbox`;\n const searchBoxId = `${computedId}-searchbox`;\n\n const { isMobile } = useLayout();\n\n useEffect(() => {\n let cancelled = false;\n\n if (keyboardFocusedOptionIndex >= 0) {\n requestAnimationFrame(() => {\n if (!cancelled) {\n if (isSearchEnabled) {\n keyboardFocusedReference.current?.scrollIntoView?.({ block: 'center' });\n } else {\n keyboardFocusedReference.current?.focus();\n }\n }\n });\n\n return () => {\n cancelled = true;\n };\n }\n }, [keyboardFocusedOptionIndex, isSearchEnabled]);\n\n const handleOnClick = () => {\n setOpen(true);\n };\n\n const handleTouchStart: React.TouchEventHandler<HTMLDivElement> = (event) => {\n if (event.currentTarget === event.target && open) {\n handleCloseOptions();\n }\n };\n\n const handleOnFocus: React.FocusEventHandler<HTMLDivElement> = (event) => {\n onFocus?.(event);\n };\n\n const handleOnBlur: React.FocusEventHandler<HTMLDivElement> = (event) => {\n const { nativeEvent } = event;\n if (nativeEvent) {\n const elementReceivingFocus = nativeEvent.relatedTarget;\n const select = event.currentTarget;\n if (\n select &&\n elementReceivingFocus instanceof Node &&\n select.contains(elementReceivingFocus)\n ) {\n return;\n }\n }\n\n onBlur?.(event);\n };\n\n const handleSearchChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n setNumberOfOptionsShown(DEFAULT_OPTIONS_PAGE_SIZE);\n setSearchValue(event.target.value);\n onSearchChange?.(event.target.value);\n };\n\n const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {\n switch (event.key) {\n case 'ArrowUp':\n case 'ArrowDown':\n if (open) {\n moveFocusWithDifference(event.key === 'ArrowUp' ? -1 : 1);\n } else {\n setOpen(true);\n }\n stopPropagation(event);\n break;\n case ' ':\n if (event.target !== searchBoxReference.current) {\n if (open) {\n selectKeyboardFocusedOption();\n } else {\n setOpen(true);\n }\n stopPropagation(event);\n }\n break;\n case 'Enter':\n if (open) {\n selectKeyboardFocusedOption();\n } else {\n setOpen(true);\n }\n stopPropagation(event);\n break;\n case 'Escape':\n handleCloseOptions();\n stopPropagation(event);\n break;\n case 'Tab':\n if (open) {\n selectKeyboardFocusedOption();\n }\n break;\n default:\n break;\n }\n };\n\n function selectKeyboardFocusedOption() {\n if (keyboardFocusedOptionIndex >= 0 && selectableOptions.length > 0) {\n selectOption(selectableOptions[keyboardFocusedOptionIndex]);\n }\n }\n\n function moveFocusWithDifference(difference: number) {\n const selectedOptionIndex = selectableOptions.reduce((optionIndex, current, index) => {\n if (optionIndex >= 0) {\n return optionIndex;\n }\n if (isOptionSelected(selected, current)) {\n return index;\n }\n return -1;\n }, -1);\n const previousFocusedIndex = previousKeyboardFocusedOptionIndex.current;\n let indexToStartMovingFrom = previousFocusedIndex;\n if (previousFocusedIndex < 0) {\n if (selectedOptionIndex < 0) {\n setKeyboardFocusedOptionIndex(0);\n } else {\n indexToStartMovingFrom = selectedOptionIndex;\n }\n }\n\n const unClampedNewIndex = indexToStartMovingFrom + difference;\n const newIndex = clamp(0, selectableOptions.length - 1, unClampedNewIndex);\n\n setKeyboardFocusedOptionIndex(newIndex);\n }\n\n useEffect(() => {\n if (open) {\n if (!isMobile || searchValue) {\n if (isSearchEnabled && searchBoxReference.current) {\n searchBoxReference.current.focus();\n }\n if (\n !isSearchEnabled &&\n optionsListReference.current &&\n previousKeyboardFocusedOptionIndex.current < 0\n ) {\n optionsListReference.current.focus();\n }\n }\n\n previousKeyboardFocusedOptionIndex.current = keyboardFocusedOptionIndex;\n } else {\n previousKeyboardFocusedOptionIndex.current = -1;\n }\n }, [open, searchValue, isSearchEnabled, isMobile, keyboardFocusedOptionIndex]);\n\n const handleCloseOptions = () => {\n setOpen(false);\n setKeyboardFocusedOptionIndex(-1);\n if (dropdownButtonReference.current) {\n dropdownButtonReference.current.focus();\n }\n };\n\n function createSelectHandlerForOption(option: SelectItemWithPlaceholder) {\n return (event: React.SyntheticEvent) => {\n stopPropagation(event);\n selectOption(option);\n };\n }\n\n function selectOption(option: SelectItemWithPlaceholder) {\n onChange(isPlaceholderOption(option) ? DEFAULT_SELECTED_OPTION : option);\n handleCloseOptions();\n }\n\n function renderOptionsList({ className = '' } = {}) {\n const dropdownClass = clsx(\n s('np-dropdown-menu'),\n {\n [s('np-dropdown-menu-desktop')]: !isMobile,\n [s(`np-dropdown-menu-${dropdownWidth}`)]: !isMobile && !isDropdownAutoWidth,\n },\n s(className),\n );\n\n const showPlaceholder = !required && !isSearchEnabled && Boolean(placeholder);\n return (\n <ul\n ref={optionsListReference}\n id={listboxId}\n role=\"listbox\"\n aria-orientation=\"vertical\"\n aria-activedescendant={getUniqueIdForOption(id, selected ?? null)}\n tabIndex={-1}\n className={dropdownClass}\n {...dropdownProps}\n >\n {showPlaceholder && <PlaceHolderOption />}\n {isSearchEnabled && (\n <SearchBox\n ref={searchBoxReference}\n id={searchBoxId}\n classNames={classNamesProp}\n value={initSearchValue || searchValue}\n placeholder={searchPlaceholder || formatMessage(messages.searchPlaceholder)}\n focusedOptionId={getUniqueIdForOption(id, focusedOption)}\n onChange={handleSearchChange}\n onClick={stopPropagation}\n />\n )}\n {options.slice(0, numberOfOptionsShown).map(renderOption)}\n {numberOfOptionsShown < options.length && <ShowMoreOption />}\n </ul>\n );\n }\n\n function ShowMoreOption() {\n function handleOnClick(event: React.SyntheticEvent<HTMLLIElement>) {\n stopPropagation(event);\n setNumberOfOptionsShown(numberOfOptionsShown + DEFAULT_OPTIONS_PAGE_SIZE);\n }\n return (\n /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */\n <li\n className={clsx(s('clickable'), s('border-bottom'), s('show-more'))}\n onClick={handleOnClick}\n onKeyPress={handleOnClick}\n >\n {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}\n <a>...</a>\n </li>\n );\n }\n\n function PlaceHolderOption() {\n const placeholderOption = { placeholder };\n return (\n /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */\n <li\n className={clsx(s('clickable'), s('border-bottom'))}\n onClick={createSelectHandlerForOption(placeholderOption)}\n onKeyPress={createSelectHandlerForOption(placeholderOption)}\n >\n {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}\n <a>{placeholder}</a>\n </li>\n );\n }\n\n // eslint-disable-next-line react/prop-types\n function SeparatorOption() {\n return <li className={s('np-separator')} aria-hidden />;\n }\n\n // eslint-disable-next-line react/prop-types\n function HeaderOption({ children }: { children?: React.ReactNode }) {\n return (\n <li // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions\n className={clsx(s('np-dropdown-header'), s('np-text-title-group'))}\n onClick={stopPropagation}\n onKeyPress={stopPropagation}\n >\n {children}\n </li>\n );\n }\n\n function isOptionSelected(selected: SelectOptionItem | undefined, option: SelectItem) {\n return selected?.value === option?.value;\n }\n\n const renderOption = (option: SelectItem, index: number) => {\n const separatorOption = option;\n if (isSeparatorOption(separatorOption) && separatorOption?.separator) {\n return <SeparatorOption key={index} />;\n }\n const headerOption = option;\n if (isHeaderOption(headerOption) && headerOption.header) {\n return <HeaderOption key={index}>{headerOption.header}</HeaderOption>;\n }\n\n const isActive = isOptionSelected(selected, option);\n const selectOption = option;\n const isFocusedWithKeyboard =\n !selectOption.disabled &&\n keyboardFocusedOptionIndex === getIndexWithoutHeadersForIndexWithHeaders(index);\n\n const className = clsx(\n s('np-dropdown-item'),\n selectOption.disabled ? [s('disabled')] : s('clickable'),\n {\n [s('active')]: isActive,\n [s('np-dropdown-item--focused')]: isFocusedWithKeyboard,\n },\n );\n\n const handleOnClick = selectOption.disabled\n ? stopPropagation\n : createSelectHandlerForOption(selectOption);\n\n return (\n /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */\n <li\n ref={isFocusedWithKeyboard ? keyboardFocusedReference : undefined}\n key={index}\n id={getUniqueIdForOption(id, option)}\n aria-selected={isActive}\n aria-disabled={option.disabled}\n role=\"option\"\n tabIndex={-1}\n className={className}\n onClick={handleOnClick}\n onKeyPress={handleOnClick}\n >\n {/* @ts-expect-error options needs DOM refactoring */}\n <a disabled={selectOption.disabled}>\n <Option\n label={undefined}\n value={undefined}\n {...selectOption}\n classNames={classNamesProp}\n />\n </a>\n </li>\n );\n };\n\n function getIndexWithoutHeadersForIndexWithHeaders(index: number) {\n return options.reduce((sum, option, currentIndex) => {\n if (currentIndex < index && isActionableOption(option)) {\n return sum + 1;\n }\n return sum;\n }, 0);\n }\n\n const hasActiveOptions = !!defaultOptions.length;\n if (open && (initSearchValue || searchValue)) {\n if (hasActiveOptions && keyboardFocusedOptionIndex < 0) {\n setKeyboardFocusedOptionIndex(0);\n }\n if (!hasActiveOptions && keyboardFocusedOptionIndex >= 0) {\n setKeyboardFocusedOptionIndex(-1);\n }\n }\n\n return (\n <div // eslint-disable-line jsx-a11y/no-static-element-interactions\n ref={selectReference}\n className={clsx(s('np-select'), block ? s('btn-block') : null, s('btn-group'))}\n onKeyDown={handleKeyDown}\n onTouchMove={handleTouchStart}\n onFocus={handleOnFocus}\n onBlur={handleOnBlur}\n >\n <Button\n ref={dropdownButtonReference}\n {...inputAttributes}\n id={computedId}\n block={block}\n size={size}\n htmlType=\"button\"\n className={clsx(\n s('np-dropdown-toggle'),\n s('np-text-body-large'),\n inverse ? s('np-dropdown-toggle-navy') : null,\n )}\n // reset Button's styles\n type={null}\n priority={null}\n disabled={disabled}\n aria-controls={listboxId}\n aria-expanded={open}\n onClick={handleOnClick}\n {...buttonProps}\n >\n {selected ? (\n <Option label={undefined} {...selected} classNames={classNamesProp} selected />\n ) : (\n <span className={s('form-control-placeholder')}>{placeholder}</span>\n )}\n <Chevron\n // disabled={disabled}\n className={clsx(\n s('tw-icon'),\n s('tw-chevron-up-icon'),\n s('tw-chevron'),\n s('bottom'),\n s('np-select-chevron'),\n )}\n />\n </Button>\n {isMobile ? (\n isSearchEnabled ? (\n <Drawer\n open={open}\n headerTitle={searchPlaceholder || formatMessage(messages.searchPlaceholder)}\n onClose={handleCloseOptions}\n >\n {renderOptionsList()}\n </Drawer>\n ) : (\n <BottomSheet open={open} onClose={handleCloseOptions}>\n {renderOptionsList({ className: isModern ? '' : 'p-a-1' })}\n </BottomSheet>\n )\n ) : (\n <Panel\n open={open}\n flip={false}\n altAxis\n anchorRef={selectReference}\n anchorWidth={isDropdownAutoWidth}\n position={dropdownUp ? Position.TOP : Position.BOTTOM}\n onClose={handleCloseOptions}\n >\n {renderOptionsList({ className: 'p-a-1' })}\n </Panel>\n )}\n </div>\n );\n}\n"],"names":["DEFAULT_SEARCH_VALUE","DEFAULT_OPTIONS_PAGE_SIZE","includesString","string1","string2","toLowerCase","includes","defaultFilterFunction","option","searchValue","isPlaceholderOption","label","note","secondary","currency","searchStrings","some","string","isActionableOption","header","separator","disabled","isHeaderOption","isSeparatorOption","clamp","from","to","value","Math","max","min","DEFAULT_SELECTED_OPTION","isSearchableOption","getUniqueIdForOption","parentId","undefined","uniqueOptionId","replace","defaultClassNames","Select","placeholder","id","required","inverse","dropdownWidth","size","block","selected","search","onChange","onFocus","onBlur","options","defaultOptions","onSearchChange","initSearchValue","searchPlaceholder","classNames","classNamesProp","dropdownUp","dropdownProps","buttonProps","inputAttributes","useInputAttributes","formatMessage","useIntl","isModern","useTheme","s","className","open","setOpen","useState","setSearchValue","keyboardFocusedOptionIndex","setKeyboardFocusedOptionIndex","keyboardFocusedReference","useRef","previousKeyboardFocusedOptionIndex","numberOfOptionsShown","setNumberOfOptionsShown","searchBoxReference","selectReference","dropdownButtonReference","optionsListReference","isSearchEnabled","isDropdownAutoWidth","useMemo","filter","selectableOptions","focusedOption","fallbackButtonId","useId","computedId","listboxId","searchBoxId","isMobile","useLayout","useEffect","cancelled","requestAnimationFrame","current","scrollIntoView","focus","handleOnClick","handleTouchStart","event","currentTarget","target","handleCloseOptions","handleOnFocus","handleOnBlur","nativeEvent","elementReceivingFocus","relatedTarget","select","Node","contains","handleSearchChange","handleKeyDown","key","moveFocusWithDifference","stopPropagation","selectKeyboardFocusedOption","length","selectOption","difference","selectedOptionIndex","reduce","optionIndex","index","isOptionSelected","previousFocusedIndex","indexToStartMovingFrom","unClampedNewIndex","newIndex","createSelectHandlerForOption","renderOptionsList","dropdownClass","clsx","showPlaceholder","Boolean","_jsxs","ref","role","tabIndex","children","_jsx","PlaceHolderOption","SearchBox","messages","focusedOptionId","onClick","slice","map","renderOption","ShowMoreOption","onKeyPress","placeholderOption","SeparatorOption","HeaderOption","separatorOption","headerOption","isActive","isFocusedWithKeyboard","getIndexWithoutHeadersForIndexWithHeaders","Option","sum","currentIndex","hasActiveOptions","onKeyDown","onTouchMove","Button","htmlType","type","priority","Chevron","Drawer","headerTitle","onClose","BottomSheet","Panel","flip","altAxis","anchorRef","anchorWidth","position","Position","TOP","BOTTOM"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Select.js","sources":["../../src/select/Select.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useState, useEffect, useRef, useMemo, useId } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Button, { ButtonProps } from '../button';\nimport Chevron from '../chevron';\nimport { Position, Size } from '../common';\nimport BottomSheet from '../common/bottomSheet';\nimport { stopPropagation } from '../common/domHelpers';\nimport { useLayout } from '../common/hooks';\nimport Panel from '../common/panel';\nimport Drawer from '../drawer';\nimport { useInputAttributes } from '../inputs/contexts';\n\nimport messages from './Select.messages';\nimport Option from './option';\nimport SearchBox from './searchBox';\n\nconst DEFAULT_SEARCH_VALUE = '';\nconst DEFAULT_OPTIONS_PAGE_SIZE = 1000;\n\nconst includesString = (string1: string, string2: string) =>\n string1.toLowerCase().includes(string2.toLowerCase());\n\nexport interface SelectOptionItem {\n value: any;\n label?: React.ReactNode;\n icon?: React.ReactNode;\n currency?: string;\n note?: React.ReactNode;\n secondary?: React.ReactNode;\n}\n\nexport interface SelectItem extends Partial<SelectOptionItem> {\n header?: React.ReactNode;\n separator?: boolean;\n disabled?: boolean;\n searchStrings?: string[];\n}\n\nexport interface SelectItemWithPlaceholder extends SelectItem {\n placeholder?: string;\n}\n\nfunction defaultFilterFunction(option: SelectItemWithPlaceholder, searchValue: string) {\n if (isPlaceholderOption(option)) {\n return true;\n }\n const { label, note, secondary, currency, searchStrings } = option;\n return (\n (typeof label === 'string' && includesString(label, searchValue)) ||\n (typeof note === 'string' && includesString(note, searchValue)) ||\n (typeof secondary === 'string' && includesString(secondary, searchValue)) ||\n (!!currency && includesString(currency, searchValue)) ||\n (!!searchStrings && searchStrings.some((string) => includesString(string, searchValue)))\n );\n}\n\nfunction isActionableOption(option: SelectItem) {\n return !option.header && !option.separator && !option.disabled;\n}\n\nfunction isHeaderOption(option: SelectItem | null) {\n return option != null && 'header' in option;\n}\n\nfunction isSeparatorOption(option: SelectItem | null) {\n return option != null && 'separator' in option;\n}\n\nfunction clamp(from: number, to: number, value: number) {\n return Math.max(Math.min(to, value), from);\n}\n\n/**\n * No option or placeholder option is selected\n */\nconst DEFAULT_SELECTED_OPTION = null;\n\nfunction isPlaceholderOption(option: SelectItemWithPlaceholder | null) {\n return option === DEFAULT_SELECTED_OPTION || 'placeholder' in option;\n}\n\nfunction isSearchableOption(option: SelectItemWithPlaceholder | null) {\n return !isHeaderOption(option) && !isSeparatorOption(option) && !isPlaceholderOption(option);\n}\n\nconst getUniqueIdForOption = (parentId: string | undefined, option: SelectItem | null) => {\n if (option == null) {\n return undefined;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const uniqueOptionId =\n option.value || (typeof option.label === 'string' ? option.label.replace(/\\s/g, '') : '');\n\n return `option-${parentId ?? ''}-${uniqueOptionId}`;\n};\n\nexport interface SelectProps {\n placeholder?: string;\n id?: string;\n required?: boolean;\n disabled?: boolean;\n inverse?: boolean;\n dropdownRight?: `${Size.EXTRA_SMALL | Size.SMALL | Size.MEDIUM | Size.LARGE | Size.EXTRA_LARGE}`;\n dropdownWidth?: `${Size.SMALL | Size.MEDIUM | Size.LARGE}`;\n size?: `${Size.SMALL | Size.MEDIUM | Size.LARGE}`;\n block?: boolean;\n selected?: SelectOptionItem;\n /**\n * Search toggle\n * if `true` default search functionality being enabled (not case sensitive search in option labels & currency props)\n * if `function` you can define your own search function to implement custom search experience. This search function used while filtering the options array.\n */\n search?: boolean | ((option: SelectItemWithPlaceholder, searchValue: string) => boolean);\n options: SelectItem[];\n searchValue?: string;\n searchPlaceholder?: string;\n classNames?: Record<string, string>;\n dropdownUp?: boolean;\n buttonProps?: Extract<ButtonProps, { as?: 'button' }>;\n dropdownProps?: React.ComponentPropsWithoutRef<'ul'>;\n onChange: (value: SelectItem | typeof DEFAULT_SELECTED_OPTION) => void;\n onFocus?: React.FocusEventHandler<HTMLDivElement>;\n onBlur?: React.FocusEventHandler<HTMLDivElement>;\n /**\n * To have full control of your search value and response use `onSearchChange` function combined with `searchValue` and custom filtering on the options array.\n * DO NOT USE TOGETHER WITH `search` PROPERTY\n */\n onSearchChange?: (value: string) => void;\n}\n\nconst defaultClassNames = {};\n\n/**\n * @deprecated Use `SelectInput` instead (https://neptune.wise.design/blog/2023-11-28-adopting-our-new-selectinput)\n */\nexport default function Select({\n placeholder,\n id,\n required,\n disabled,\n inverse,\n dropdownWidth,\n size = 'md',\n block = true,\n selected,\n search,\n onChange,\n onFocus,\n onBlur,\n options: defaultOptions,\n onSearchChange,\n searchValue: initSearchValue = '',\n searchPlaceholder,\n classNames: classNamesProp = defaultClassNames,\n dropdownUp,\n dropdownProps,\n buttonProps,\n}: SelectProps) {\n const inputAttributes = useInputAttributes();\n\n const { formatMessage } = useIntl();\n const { isModern } = useTheme();\n const s = (className: string) => classNamesProp[className] || className;\n const [open, setOpen] = useState(false);\n const [searchValue, setSearchValue] = useState(DEFAULT_SEARCH_VALUE);\n const [keyboardFocusedOptionIndex, setKeyboardFocusedOptionIndex] = useState(-1);\n const keyboardFocusedReference = useRef<HTMLLIElement>(null);\n const previousKeyboardFocusedOptionIndex = useRef(-1);\n const [numberOfOptionsShown, setNumberOfOptionsShown] = useState(DEFAULT_OPTIONS_PAGE_SIZE);\n const searchBoxReference = useRef<HTMLInputElement>(null);\n const selectReference = useRef<HTMLDivElement>(null);\n const dropdownButtonReference = useRef<HTMLButtonElement>(null);\n const optionsListReference = useRef<HTMLUListElement>(null);\n const isSearchEnabled = !!onSearchChange || !!search;\n const isDropdownAutoWidth = dropdownWidth == null;\n\n const options = useMemo(() => {\n if (!search || !searchValue) {\n return defaultOptions;\n }\n\n return defaultOptions.filter(isSearchableOption).filter((option) => {\n if (typeof search === 'function') {\n return search(option, searchValue);\n }\n return defaultFilterFunction(option, searchValue);\n });\n }, [defaultOptions, search, searchValue]);\n\n const selectableOptions = useMemo(() => options.filter(isActionableOption), [options]);\n const focusedOption = selectableOptions[keyboardFocusedOptionIndex];\n\n const fallbackButtonId = useId();\n const computedId = id || inputAttributes.id || fallbackButtonId;\n const listboxId = `${computedId}-listbox`;\n const searchBoxId = `${computedId}-searchbox`;\n\n const { isMobile } = useLayout();\n\n useEffect(() => {\n let cancelled = false;\n\n if (keyboardFocusedOptionIndex >= 0) {\n requestAnimationFrame(() => {\n if (!cancelled) {\n if (isSearchEnabled) {\n keyboardFocusedReference.current?.scrollIntoView?.({ block: 'center' });\n } else {\n keyboardFocusedReference.current?.focus();\n }\n }\n });\n\n return () => {\n cancelled = true;\n };\n }\n }, [keyboardFocusedOptionIndex, isSearchEnabled]);\n\n const handleOnClick = () => {\n setOpen(true);\n };\n\n const handleTouchStart: React.TouchEventHandler<HTMLDivElement> = (event) => {\n if (event.currentTarget === event.target && open) {\n handleCloseOptions();\n }\n };\n\n const handleOnFocus: React.FocusEventHandler<HTMLDivElement> = (event) => {\n onFocus?.(event);\n };\n\n const handleOnBlur: React.FocusEventHandler<HTMLDivElement> = (event) => {\n const { nativeEvent } = event;\n if (nativeEvent) {\n const elementReceivingFocus = nativeEvent.relatedTarget;\n const select = event.currentTarget;\n if (\n select &&\n elementReceivingFocus instanceof Node &&\n select.contains(elementReceivingFocus)\n ) {\n return;\n }\n }\n\n onBlur?.(event);\n };\n\n const handleSearchChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n setNumberOfOptionsShown(DEFAULT_OPTIONS_PAGE_SIZE);\n setSearchValue(event.target.value);\n onSearchChange?.(event.target.value);\n };\n\n const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {\n switch (event.key) {\n case 'ArrowUp':\n case 'ArrowDown':\n if (open) {\n moveFocusWithDifference(event.key === 'ArrowUp' ? -1 : 1);\n } else {\n setOpen(true);\n }\n stopPropagation(event);\n break;\n case ' ':\n if (event.target !== searchBoxReference.current) {\n if (open) {\n selectKeyboardFocusedOption();\n } else {\n setOpen(true);\n }\n stopPropagation(event);\n }\n break;\n case 'Enter':\n if (open) {\n selectKeyboardFocusedOption();\n } else {\n setOpen(true);\n }\n stopPropagation(event);\n break;\n case 'Escape':\n handleCloseOptions();\n stopPropagation(event);\n break;\n case 'Tab':\n if (open) {\n selectKeyboardFocusedOption();\n }\n break;\n default:\n break;\n }\n };\n\n function selectKeyboardFocusedOption() {\n if (keyboardFocusedOptionIndex >= 0 && selectableOptions.length > 0) {\n selectOption(selectableOptions[keyboardFocusedOptionIndex]);\n }\n }\n\n function moveFocusWithDifference(difference: number) {\n const selectedOptionIndex = selectableOptions.reduce((optionIndex, current, index) => {\n if (optionIndex >= 0) {\n return optionIndex;\n }\n if (isOptionSelected(selected, current)) {\n return index;\n }\n return -1;\n }, -1);\n const previousFocusedIndex = previousKeyboardFocusedOptionIndex.current;\n let indexToStartMovingFrom = previousFocusedIndex;\n if (previousFocusedIndex < 0) {\n if (selectedOptionIndex < 0) {\n setKeyboardFocusedOptionIndex(0);\n } else {\n indexToStartMovingFrom = selectedOptionIndex;\n }\n }\n\n const unClampedNewIndex = indexToStartMovingFrom + difference;\n const newIndex = clamp(0, selectableOptions.length - 1, unClampedNewIndex);\n\n setKeyboardFocusedOptionIndex(newIndex);\n }\n\n useEffect(() => {\n if (open) {\n if (!isMobile || searchValue) {\n if (isSearchEnabled && searchBoxReference.current) {\n searchBoxReference.current.focus();\n }\n if (\n !isSearchEnabled &&\n optionsListReference.current &&\n previousKeyboardFocusedOptionIndex.current < 0\n ) {\n optionsListReference.current.focus();\n }\n }\n\n previousKeyboardFocusedOptionIndex.current = keyboardFocusedOptionIndex;\n } else {\n previousKeyboardFocusedOptionIndex.current = -1;\n }\n }, [open, searchValue, isSearchEnabled, isMobile, keyboardFocusedOptionIndex]);\n\n const handleCloseOptions = () => {\n setOpen(false);\n setKeyboardFocusedOptionIndex(-1);\n if (dropdownButtonReference.current) {\n dropdownButtonReference.current.focus();\n }\n };\n\n function createSelectHandlerForOption(option: SelectItemWithPlaceholder) {\n return (event: React.SyntheticEvent) => {\n stopPropagation(event);\n selectOption(option);\n };\n }\n\n function selectOption(option: SelectItemWithPlaceholder) {\n onChange(isPlaceholderOption(option) ? DEFAULT_SELECTED_OPTION : option);\n handleCloseOptions();\n }\n\n function renderOptionsList({ className = '' } = {}) {\n const dropdownClass = clsx(\n s('np-dropdown-menu'),\n {\n [s('np-dropdown-menu-desktop')]: !isMobile,\n [s(`np-dropdown-menu-${dropdownWidth}`)]: !isMobile && !isDropdownAutoWidth,\n },\n s(className),\n );\n\n const showPlaceholder = !required && !isSearchEnabled && Boolean(placeholder);\n return (\n <ul\n ref={optionsListReference}\n id={listboxId}\n role=\"listbox\"\n aria-orientation=\"vertical\"\n aria-activedescendant={getUniqueIdForOption(id, selected ?? null)}\n tabIndex={-1}\n className={dropdownClass}\n {...dropdownProps}\n >\n {showPlaceholder && <PlaceHolderOption />}\n {isSearchEnabled && (\n <SearchBox\n ref={searchBoxReference}\n id={searchBoxId}\n classNames={classNamesProp}\n value={initSearchValue || searchValue}\n placeholder={searchPlaceholder || formatMessage(messages.searchPlaceholder)}\n focusedOptionId={getUniqueIdForOption(id, focusedOption)}\n onChange={handleSearchChange}\n onClick={stopPropagation}\n />\n )}\n {options.slice(0, numberOfOptionsShown).map(renderOption)}\n {numberOfOptionsShown < options.length && <ShowMoreOption />}\n </ul>\n );\n }\n\n function ShowMoreOption() {\n function handleOnClick(event: React.SyntheticEvent<HTMLLIElement>) {\n stopPropagation(event);\n setNumberOfOptionsShown(numberOfOptionsShown + DEFAULT_OPTIONS_PAGE_SIZE);\n }\n return (\n /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */\n <li\n className={clsx(s('clickable'), s('border-bottom'), s('show-more'))}\n onClick={handleOnClick}\n onKeyPress={handleOnClick}\n >\n {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}\n <a>...</a>\n </li>\n );\n }\n\n function PlaceHolderOption() {\n const placeholderOption = { placeholder };\n return (\n /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */\n <li\n className={clsx(s('clickable'), s('border-bottom'))}\n onClick={createSelectHandlerForOption(placeholderOption)}\n onKeyPress={createSelectHandlerForOption(placeholderOption)}\n >\n {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}\n <a>{placeholder}</a>\n </li>\n );\n }\n\n // eslint-disable-next-line react/prop-types\n function SeparatorOption() {\n return <li className={s('np-separator')} aria-hidden />;\n }\n\n // eslint-disable-next-line react/prop-types\n function HeaderOption({ children }: { children?: React.ReactNode }) {\n return (\n <li // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions\n className={clsx(s('np-dropdown-header'), s('np-text-title-group'))}\n onClick={stopPropagation}\n onKeyPress={stopPropagation}\n >\n {children}\n </li>\n );\n }\n\n function isOptionSelected(selected: SelectOptionItem | undefined, option: SelectItem) {\n return selected?.value === option?.value;\n }\n\n const renderOption = (option: SelectItem, index: number) => {\n const separatorOption = option;\n if (isSeparatorOption(separatorOption) && separatorOption?.separator) {\n return <SeparatorOption key={index} />;\n }\n const headerOption = option;\n if (isHeaderOption(headerOption) && headerOption.header) {\n return <HeaderOption key={index}>{headerOption.header}</HeaderOption>;\n }\n\n const isActive = isOptionSelected(selected, option);\n const selectOption = option;\n const isFocusedWithKeyboard =\n !selectOption.disabled &&\n keyboardFocusedOptionIndex === getIndexWithoutHeadersForIndexWithHeaders(index);\n\n const className = clsx(\n s('np-dropdown-item'),\n selectOption.disabled ? [s('disabled')] : s('clickable'),\n {\n [s('active')]: isActive,\n [s('np-dropdown-item--focused')]: isFocusedWithKeyboard,\n },\n );\n\n const handleOnClick = selectOption.disabled\n ? stopPropagation\n : createSelectHandlerForOption(selectOption);\n\n return (\n /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */\n <li\n ref={isFocusedWithKeyboard ? keyboardFocusedReference : undefined}\n key={index}\n id={getUniqueIdForOption(id, option)}\n aria-selected={isActive}\n aria-disabled={option.disabled}\n role=\"option\"\n tabIndex={-1}\n className={className}\n onClick={handleOnClick}\n onKeyPress={handleOnClick}\n >\n {/* @ts-expect-error options needs DOM refactoring */}\n <a disabled={selectOption.disabled}>\n <Option\n label={undefined}\n value={undefined}\n {...selectOption}\n classNames={classNamesProp}\n />\n </a>\n </li>\n );\n };\n\n function getIndexWithoutHeadersForIndexWithHeaders(index: number) {\n return options.reduce((sum, option, currentIndex) => {\n if (currentIndex < index && isActionableOption(option)) {\n return sum + 1;\n }\n return sum;\n }, 0);\n }\n\n const hasActiveOptions = !!defaultOptions.length;\n if (open && (initSearchValue || searchValue)) {\n if (hasActiveOptions && keyboardFocusedOptionIndex < 0) {\n setKeyboardFocusedOptionIndex(0);\n }\n if (!hasActiveOptions && keyboardFocusedOptionIndex >= 0) {\n setKeyboardFocusedOptionIndex(-1);\n }\n }\n\n return (\n <div // eslint-disable-line jsx-a11y/no-static-element-interactions\n ref={selectReference}\n className={clsx(s('np-select'), block ? s('btn-block') : null, s('btn-group'))}\n onKeyDown={handleKeyDown}\n onTouchMove={handleTouchStart}\n onFocus={handleOnFocus}\n onBlur={handleOnBlur}\n >\n <Button\n ref={dropdownButtonReference}\n {...inputAttributes}\n id={computedId}\n block={block}\n size={size}\n htmlType=\"button\"\n className={clsx(\n s('np-dropdown-toggle'),\n s('np-text-body-large'),\n inverse ? s('np-dropdown-toggle-navy') : null,\n )}\n // reset Button's styles\n type={null}\n priority={null}\n disabled={disabled}\n aria-controls={listboxId}\n aria-expanded={open}\n onClick={handleOnClick}\n {...buttonProps}\n >\n {selected ? (\n <Option label={undefined} {...selected} classNames={classNamesProp} selected />\n ) : (\n <span className={s('form-control-placeholder')}>{placeholder}</span>\n )}\n <Chevron\n // disabled={disabled}\n className={clsx(\n s('tw-icon'),\n s('tw-chevron-up-icon'),\n s('tw-chevron'),\n s('bottom'),\n s('np-select-chevron'),\n )}\n />\n </Button>\n {isMobile ? (\n isSearchEnabled ? (\n <Drawer\n open={open}\n headerTitle={searchPlaceholder || formatMessage(messages.searchPlaceholder)}\n onClose={handleCloseOptions}\n >\n {renderOptionsList()}\n </Drawer>\n ) : (\n <BottomSheet open={open} onClose={handleCloseOptions}>\n {renderOptionsList({ className: isModern ? '' : 'p-a-1' })}\n </BottomSheet>\n )\n ) : (\n <Panel\n open={open}\n flip={false}\n altAxis\n anchorRef={selectReference}\n anchorWidth={isDropdownAutoWidth}\n position={dropdownUp ? Position.TOP : Position.BOTTOM}\n onClose={handleCloseOptions}\n >\n {renderOptionsList({ className: 'p-a-1' })}\n </Panel>\n )}\n </div>\n );\n}\n"],"names":["DEFAULT_SEARCH_VALUE","DEFAULT_OPTIONS_PAGE_SIZE","includesString","string1","string2","toLowerCase","includes","defaultFilterFunction","option","searchValue","isPlaceholderOption","label","note","secondary","currency","searchStrings","some","string","isActionableOption","header","separator","disabled","isHeaderOption","isSeparatorOption","clamp","from","to","value","Math","max","min","DEFAULT_SELECTED_OPTION","isSearchableOption","getUniqueIdForOption","parentId","undefined","uniqueOptionId","replace","defaultClassNames","Select","placeholder","id","required","inverse","dropdownWidth","size","block","selected","search","onChange","onFocus","onBlur","options","defaultOptions","onSearchChange","initSearchValue","searchPlaceholder","classNames","classNamesProp","dropdownUp","dropdownProps","buttonProps","inputAttributes","useInputAttributes","formatMessage","useIntl","isModern","useTheme","s","className","open","setOpen","useState","setSearchValue","keyboardFocusedOptionIndex","setKeyboardFocusedOptionIndex","keyboardFocusedReference","useRef","previousKeyboardFocusedOptionIndex","numberOfOptionsShown","setNumberOfOptionsShown","searchBoxReference","selectReference","dropdownButtonReference","optionsListReference","isSearchEnabled","isDropdownAutoWidth","useMemo","filter","selectableOptions","focusedOption","fallbackButtonId","useId","computedId","listboxId","searchBoxId","isMobile","useLayout","useEffect","cancelled","requestAnimationFrame","current","scrollIntoView","focus","handleOnClick","handleTouchStart","event","currentTarget","target","handleCloseOptions","handleOnFocus","handleOnBlur","nativeEvent","elementReceivingFocus","relatedTarget","select","Node","contains","handleSearchChange","handleKeyDown","key","moveFocusWithDifference","stopPropagation","selectKeyboardFocusedOption","length","selectOption","difference","selectedOptionIndex","reduce","optionIndex","index","isOptionSelected","previousFocusedIndex","indexToStartMovingFrom","unClampedNewIndex","newIndex","createSelectHandlerForOption","renderOptionsList","dropdownClass","clsx","showPlaceholder","Boolean","_jsxs","ref","role","tabIndex","children","_jsx","PlaceHolderOption","SearchBox","messages","focusedOptionId","onClick","slice","map","renderOption","ShowMoreOption","onKeyPress","placeholderOption","SeparatorOption","HeaderOption","separatorOption","headerOption","isActive","isFocusedWithKeyboard","getIndexWithoutHeadersForIndexWithHeaders","Option","sum","currentIndex","hasActiveOptions","onKeyDown","onTouchMove","Button","htmlType","type","priority","Chevron","Drawer","headerTitle","onClose","BottomSheet","Panel","flip","altAxis","anchorRef","anchorWidth","position","Position","TOP","BOTTOM"],"mappings":"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"}
|
package/build/select/Select.mjs
CHANGED
|
@@ -2,7 +2,7 @@ import { useTheme } from '@wise/components-theming';
|
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
3
|
import { useState, useRef, useMemo, useId, useEffect } from 'react';
|
|
4
4
|
import { useIntl } from 'react-intl';
|
|
5
|
-
import Button from '../button/Button.mjs';
|
|
5
|
+
import Button from '../button/Button.resolver.mjs';
|
|
6
6
|
import Chevron from '../chevron/Chevron.mjs';
|
|
7
7
|
import { stopPropagation } from '../common/domHelpers/documentIosClick.mjs';
|
|
8
8
|
import '../common/theme.mjs';
|
|
@@ -11,10 +11,18 @@
|
|
|
11
11
|
-webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
|
|
12
12
|
mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
|
|
13
13
|
}
|
|
14
|
+
[dir="rtl"] .np-avatar-layout-diagonal-mask {
|
|
15
|
+
-webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
|
|
16
|
+
mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
|
|
17
|
+
}
|
|
14
18
|
.np-avatar-layout-diagonal-child {
|
|
15
19
|
margin-left: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
|
|
16
20
|
margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
|
|
17
21
|
}
|
|
22
|
+
[dir="rtl"] .np-avatar-layout-diagonal-child {
|
|
23
|
+
margin-left: 0;
|
|
24
|
+
margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
|
|
25
|
+
}
|
|
18
26
|
.np-avatar-layout-horizontal {
|
|
19
27
|
width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
|
|
20
28
|
width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
|
|
@@ -29,3 +37,6 @@
|
|
|
29
37
|
.np-avatar-layout-horizontal-child {
|
|
30
38
|
margin-left: calc(var(--np-avatar-offset) * -1);
|
|
31
39
|
}
|
|
40
|
+
[dir="rtl"] .np-avatar-layout-horizontal-child {
|
|
41
|
+
margin-right: calc(var(--np-avatar-offset) * -1);
|
|
42
|
+
}
|
|
@@ -1,23 +1,236 @@
|
|
|
1
|
-
.
|
|
1
|
+
.wds-Button {
|
|
2
|
+
--Button-background: var(--color-interactive-accent);
|
|
3
|
+
--Button-background-hover: var(--color-interactive-accent-hover);
|
|
4
|
+
--Button-background-active: var(--color-interactive-accent-active);
|
|
5
|
+
--Button-color: var(--color-interactive-control);
|
|
6
|
+
--Button-border-radius: var(--radius-full);
|
|
7
|
+
--Button-label-gap: var(--size-4);
|
|
8
|
+
--Button-large-padding: var(--size-12) var(--size-16);
|
|
9
|
+
--Button-medium-padding: var(--size-8) var(--size-12);
|
|
10
|
+
--Button-small-padding: var(--size-5) var(--size-12);
|
|
11
|
+
--Button-avatar-border-color: var(--color-border-neutral);
|
|
12
|
+
--Button-transition-duration: 150ms;
|
|
13
|
+
--Button-transition-easing: ease-in-out;
|
|
14
|
+
--Button-secondary-background: var(--color-interactive-neutral);
|
|
15
|
+
--Button-secondary-background-hover: var(--color-interactive-neutral-hover);
|
|
16
|
+
--Button-secondary-background-active: var(--color-interactive-neutral-active);
|
|
17
|
+
--Button-secondary-color: var(--color-interactive-primary);
|
|
18
|
+
--Button-secondary-neutral-background: var(--color-background-neutral);
|
|
19
|
+
--Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
|
|
20
|
+
--Button-secondary-neutral-background-active: var(--color-background-neutral-active);
|
|
21
|
+
--Button-secondary-neutral-color: var(--color-content-primary);
|
|
22
|
+
--Button-tertiary-background: transparent;
|
|
23
|
+
--Button-tertiary-background-hover: var(--color-background-screen-hover);
|
|
24
|
+
--Button-tertiary-background-active: var(--color-background-screen-active);
|
|
25
|
+
--Button-tertiary-color: var(--color-interactive-primary);
|
|
26
|
+
--Button-primary-negative-background: var(--color-sentiment-negative-primary);
|
|
27
|
+
--Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
|
|
28
|
+
--Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
|
|
29
|
+
--Button-primary-negative-color: var(--color-contrast-overlay);
|
|
30
|
+
--Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
|
|
31
|
+
--Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
|
|
32
|
+
--Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
|
|
33
|
+
--Button-secondary-negative-color: var(--color-sentiment-negative-primary);
|
|
34
|
+
}
|
|
35
|
+
.np-theme-personal--bright-green .wds-Button {
|
|
36
|
+
--Button-primary-negative-color: var(--color-white);
|
|
37
|
+
--Button-secondary-color: var(--color-interactive-control);
|
|
38
|
+
--Button-secondary-negative-color: var(--color-white);
|
|
39
|
+
}
|
|
40
|
+
.np-theme-personal--forest-green .wds-Button {
|
|
41
|
+
--Button-secondary-background: var(--color-interactive-neutral);
|
|
42
|
+
--Button-secondary-negative-background: var(--color-sentiment-negative-primary);
|
|
43
|
+
--Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
|
|
44
|
+
--Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
|
|
45
|
+
--Button-secondary-negative-color: var(--color-contrast-overlay);
|
|
46
|
+
}
|
|
47
|
+
/* Button Styles */
|
|
48
|
+
.wds-Button {
|
|
49
|
+
display: inline-flex;
|
|
50
|
+
flex: none;
|
|
51
|
+
width: auto;
|
|
52
|
+
align-items: center;
|
|
53
|
+
justify-content: center;
|
|
54
|
+
vertical-align: middle;
|
|
55
|
+
text-align: center;
|
|
56
|
+
white-space: nowrap;
|
|
57
|
+
word-wrap: break-word;
|
|
58
|
+
-webkit-appearance: none;
|
|
59
|
+
-moz-appearance: none;
|
|
60
|
+
appearance: none;
|
|
61
|
+
background-color: var(--Button-background);
|
|
62
|
+
border: none;
|
|
63
|
+
border-radius: var(--Button-border-radius);
|
|
64
|
+
color: var(--Button-color);
|
|
65
|
+
cursor: pointer;
|
|
66
|
+
transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
|
|
67
|
+
}
|
|
68
|
+
.wds-Button,
|
|
69
|
+
.wds-Button:hover,
|
|
70
|
+
.wds-Button:active,
|
|
71
|
+
.wds-Button:focus {
|
|
72
|
+
-webkit-text-decoration: none;
|
|
73
|
+
text-decoration: none;
|
|
74
|
+
color: var(--Button-color);
|
|
75
|
+
}
|
|
76
|
+
.wds-Button:hover {
|
|
77
|
+
background-color: var(--Button-background-hover);
|
|
78
|
+
}
|
|
79
|
+
.wds-Button:active {
|
|
80
|
+
background-color: var(--Button-background-active);
|
|
81
|
+
}
|
|
82
|
+
.wds-Button.wds-Button--disabled,
|
|
83
|
+
.wds-Button:disabled {
|
|
84
|
+
filter: none;
|
|
85
|
+
mix-blend-mode: luminosity;
|
|
86
|
+
opacity: 0.45;
|
|
87
|
+
cursor: not-allowed;
|
|
88
|
+
}
|
|
89
|
+
.wds-Button.wds-Button--disabled,
|
|
90
|
+
.wds-Button:disabled,
|
|
91
|
+
.wds-Button.wds-Button--disabled:hover,
|
|
92
|
+
.wds-Button:disabled:hover,
|
|
93
|
+
.wds-Button.wds-Button--disabled:active,
|
|
94
|
+
.wds-Button:disabled:active {
|
|
95
|
+
background-color: var(--Button-background);
|
|
96
|
+
}
|
|
97
|
+
.wds-Button--secondary {
|
|
98
|
+
--Button-background: var(--Button-secondary-background);
|
|
99
|
+
--Button-background-hover: var(--Button-secondary-background-hover);
|
|
100
|
+
--Button-background-active: var(--Button-secondary-background-active);
|
|
101
|
+
--Button-color: var(--Button-secondary-color);
|
|
102
|
+
}
|
|
103
|
+
.wds-Button--secondary-neutral {
|
|
104
|
+
--Button-background: var(--Button-secondary-neutral-background);
|
|
105
|
+
--Button-background-hover: var(--Button-secondary-neutral-background-hover);
|
|
106
|
+
--Button-background-active: var(--Button-secondary-neutral-background-active);
|
|
107
|
+
--Button-color: var(--Button-secondary-neutral-color);
|
|
108
|
+
}
|
|
109
|
+
.wds-Button--secondary-neutral .wds-Button-icon--end {
|
|
110
|
+
color: var(--color-interactive-primary);
|
|
111
|
+
}
|
|
112
|
+
.wds-Button--tertiary {
|
|
113
|
+
--Button-background: var(--Button-tertiary-background);
|
|
114
|
+
--Button-background-hover: var(--Button-tertiary-background-hover);
|
|
115
|
+
--Button-background-active: var(--Button-tertiary-background-active);
|
|
116
|
+
--Button-color: var(--Button-tertiary-color);
|
|
117
|
+
}
|
|
118
|
+
.wds-Button--tertiary .wds-Button-labelText,
|
|
119
|
+
.wds-Button--tertiary:hover .wds-Button-labelText,
|
|
120
|
+
.wds-Button--tertiary:active .wds-Button-labelText,
|
|
121
|
+
.wds-Button--tertiary:focus .wds-Button-labelText {
|
|
122
|
+
-webkit-text-decoration: underline;
|
|
123
|
+
text-decoration: underline;
|
|
124
|
+
text-underline-offset: 3px;
|
|
125
|
+
text-decoration-thickness: 1px;
|
|
126
|
+
}
|
|
127
|
+
.wds-Button--negative.wds-Button--primary {
|
|
128
|
+
--Button-background: var(--Button-primary-negative-background);
|
|
129
|
+
--Button-background-hover: var(--Button-primary-negative-background-hover);
|
|
130
|
+
--Button-background-active: var(--Button-primary-negative-background-active);
|
|
131
|
+
--Button-color: var(--Button-primary-negative-color);
|
|
132
|
+
}
|
|
133
|
+
.wds-Button--negative.wds-Button--secondary {
|
|
134
|
+
--Button-background: var(--Button-secondary-negative-background);
|
|
135
|
+
--Button-background-hover: var(--Button-secondary-negative-background-hover);
|
|
136
|
+
--Button-background-active: var(--Button-secondary-negative-background-active);
|
|
137
|
+
--Button-color: var(--Button-secondary-negative-color);
|
|
138
|
+
}
|
|
139
|
+
.wds-Button--large {
|
|
140
|
+
padding: var(--Button-large-padding);
|
|
141
|
+
}
|
|
142
|
+
.wds-Button--medium {
|
|
143
|
+
padding: var(--Button-medium-padding);
|
|
144
|
+
}
|
|
145
|
+
.wds-Button--medium:has(.wds-Button-avatars) {
|
|
146
|
+
padding-inline-start: 8px;
|
|
147
|
+
padding-inline-start: var(--size-8);
|
|
148
|
+
}
|
|
149
|
+
.wds-Button--medium:has(.wds-Button-icon--end) {
|
|
150
|
+
padding-inline-end: 8px;
|
|
151
|
+
padding-inline-end: var(--size-8);
|
|
152
|
+
}
|
|
153
|
+
.wds-Button--medium .wds-Button-icon--start {
|
|
154
|
+
margin-inline-end: var(--Button-label-gap);
|
|
155
|
+
}
|
|
156
|
+
.wds-Button--small {
|
|
157
|
+
padding: var(--Button-small-padding);
|
|
158
|
+
}
|
|
159
|
+
.wds-Button--small:has(.wds-Button-icon--start) {
|
|
160
|
+
padding-inline-start: 8px;
|
|
161
|
+
padding-inline-start: var(--size-8);
|
|
162
|
+
}
|
|
163
|
+
.wds-Button--small:has(.wds-Button-icon--end) {
|
|
164
|
+
padding-inline-end: 8px;
|
|
165
|
+
padding-inline-end: var(--size-8);
|
|
166
|
+
}
|
|
167
|
+
.wds-Button--block {
|
|
168
|
+
width: 100%;
|
|
169
|
+
}
|
|
170
|
+
.wds-Button-avatars {
|
|
171
|
+
display: inline-flex;
|
|
172
|
+
}
|
|
173
|
+
.wds-Button-avatars .np-avatar-view .np-avatar-view-content {
|
|
174
|
+
color: var(--Button-color);
|
|
175
|
+
}
|
|
176
|
+
.wds-Button-icon {
|
|
177
|
+
display: inline-block;
|
|
178
|
+
}
|
|
179
|
+
.wds-Button-icon--md {
|
|
180
|
+
--Button-iconSize: calc(var(--size-10) + var(--size-8));
|
|
181
|
+
}
|
|
182
|
+
.wds-Button-icon--sm {
|
|
183
|
+
--Button-iconSize: var(--size-16);
|
|
184
|
+
}
|
|
185
|
+
.wds-Button-icon svg {
|
|
186
|
+
width: var(--Button-iconSize);
|
|
187
|
+
height: var(--Button-iconSize);
|
|
188
|
+
}
|
|
189
|
+
.wds-Button-content {
|
|
2
190
|
position: relative;
|
|
3
191
|
}
|
|
4
|
-
.
|
|
192
|
+
.wds-Button-content--loading .wds-Button-label,
|
|
193
|
+
.wds-Button-content--loading .wds-Button-media,
|
|
194
|
+
.wds-Button-content--loading .wds-Button-icon {
|
|
195
|
+
visibility: hidden;
|
|
196
|
+
opacity: 0;
|
|
197
|
+
}
|
|
198
|
+
.wds-Button-label {
|
|
199
|
+
display: flex;
|
|
200
|
+
justify-content: center;
|
|
201
|
+
align-items: center;
|
|
202
|
+
gap: var(--Button-label-gap);
|
|
203
|
+
position: relative;
|
|
204
|
+
}
|
|
205
|
+
.wds-Button-loader {
|
|
5
206
|
position: absolute;
|
|
6
|
-
|
|
7
|
-
|
|
207
|
+
width: 100%;
|
|
208
|
+
height: 100%;
|
|
209
|
+
}
|
|
210
|
+
.wds-Button-loader .process-circle {
|
|
211
|
+
stroke: var(--Button-color);
|
|
212
|
+
}
|
|
213
|
+
/* Avatar border transparency */
|
|
214
|
+
/* dark buttons get 20% transparency, light buttons get 12% */
|
|
215
|
+
.wds-Button-avatars .np-circle {
|
|
216
|
+
--circle-border-color: color-mix(in srgb, var(--Button-color) 20%, transparent);
|
|
8
217
|
}
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
218
|
+
.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
|
|
219
|
+
.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
|
|
220
|
+
.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary-neutral .wds-Button-avatars .np-circle,
|
|
221
|
+
.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle {
|
|
222
|
+
--circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
|
|
14
223
|
}
|
|
15
|
-
.np-
|
|
16
|
-
|
|
224
|
+
.np-theme-personal--dark .wds-Button--primary .wds-Button-avatars .np-circle,
|
|
225
|
+
.np-theme-personal--dark .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle,
|
|
226
|
+
.np-theme-personal--forest-green .wds-Button--primary .wds-Button-avatars .np-circle,
|
|
227
|
+
.np-theme-personal--forest-green .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle {
|
|
228
|
+
--circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
|
|
17
229
|
}
|
|
18
|
-
.np-
|
|
19
|
-
|
|
230
|
+
.np-theme-personal--bright-green .wds-Button--tertiary .wds-Button-avatars .np-circle,
|
|
231
|
+
.np-theme-personal--bright-green .wds-Button--secondary-neutral .wds-Button-avatars .np-circle {
|
|
232
|
+
--circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
|
|
20
233
|
}
|
|
21
|
-
.
|
|
22
|
-
|
|
234
|
+
[dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right,[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-down,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-up,[dir="rtl"] .wds-Button .tw-icon-list,[dir="rtl"] .wds-Button .tw-icon-activity {
|
|
235
|
+
scale: -1 1;
|
|
23
236
|
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
.wds-Button {
|
|
2
|
+
--Button-background: var(--color-interactive-accent);
|
|
3
|
+
--Button-background-hover: var(--color-interactive-accent-hover);
|
|
4
|
+
--Button-background-active: var(--color-interactive-accent-active);
|
|
5
|
+
--Button-color: var(--color-interactive-control);
|
|
6
|
+
--Button-border-radius: var(--radius-full);
|
|
7
|
+
--Button-label-gap: var(--size-4);
|
|
8
|
+
--Button-large-padding: var(--size-12) var(--size-16);
|
|
9
|
+
--Button-medium-padding: var(--size-8) var(--size-12);
|
|
10
|
+
--Button-small-padding: var(--size-5) var(--size-12);
|
|
11
|
+
--Button-avatar-border-color: var(--color-border-neutral);
|
|
12
|
+
--Button-transition-duration: 150ms;
|
|
13
|
+
--Button-transition-easing: ease-in-out;
|
|
14
|
+
--Button-secondary-background: var(--color-interactive-neutral);
|
|
15
|
+
--Button-secondary-background-hover: var(--color-interactive-neutral-hover);
|
|
16
|
+
--Button-secondary-background-active: var(--color-interactive-neutral-active);
|
|
17
|
+
--Button-secondary-color: var(--color-interactive-primary);
|
|
18
|
+
--Button-secondary-neutral-background: var(--color-background-neutral);
|
|
19
|
+
--Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
|
|
20
|
+
--Button-secondary-neutral-background-active: var(--color-background-neutral-active);
|
|
21
|
+
--Button-secondary-neutral-color: var(--color-content-primary);
|
|
22
|
+
--Button-tertiary-background: transparent;
|
|
23
|
+
--Button-tertiary-background-hover: var(--color-background-screen-hover);
|
|
24
|
+
--Button-tertiary-background-active: var(--color-background-screen-active);
|
|
25
|
+
--Button-tertiary-color: var(--color-interactive-primary);
|
|
26
|
+
--Button-primary-negative-background: var(--color-sentiment-negative-primary);
|
|
27
|
+
--Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
|
|
28
|
+
--Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
|
|
29
|
+
--Button-primary-negative-color: var(--color-contrast-overlay);
|
|
30
|
+
--Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
|
|
31
|
+
--Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
|
|
32
|
+
--Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
|
|
33
|
+
--Button-secondary-negative-color: var(--color-sentiment-negative-primary);
|
|
34
|
+
}
|
|
35
|
+
.np-theme-personal--bright-green .wds-Button {
|
|
36
|
+
--Button-primary-negative-color: var(--color-white);
|
|
37
|
+
--Button-secondary-color: var(--color-interactive-control);
|
|
38
|
+
--Button-secondary-negative-color: var(--color-white);
|
|
39
|
+
}
|
|
40
|
+
.np-theme-personal--forest-green .wds-Button {
|
|
41
|
+
--Button-secondary-background: var(--color-interactive-neutral);
|
|
42
|
+
--Button-secondary-negative-background: var(--color-sentiment-negative-primary);
|
|
43
|
+
--Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
|
|
44
|
+
--Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
|
|
45
|
+
--Button-secondary-negative-color: var(--color-contrast-overlay);
|
|
46
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
.np-btn {
|
|
2
|
+
position: relative;
|
|
3
|
+
}
|
|
4
|
+
.np-btn.np-btn-block > span.btn-loader {
|
|
5
|
+
position: absolute;
|
|
6
|
+
left: 24px;
|
|
7
|
+
left: var(--size-24);
|
|
8
|
+
}
|
|
9
|
+
[dir="rtl"] .np-btn.np-btn-block > span.btn-loader {
|
|
10
|
+
right: 24px;
|
|
11
|
+
right: var(--size-24);
|
|
12
|
+
left: auto;
|
|
13
|
+
left: initial;
|
|
14
|
+
}
|
|
15
|
+
.np-btn.np-btn-xs > span.btn-loader {
|
|
16
|
+
background-size: 16px 16px;
|
|
17
|
+
}
|
|
18
|
+
.np-btn.np-btn-xs.btn-block > span.btn-loader {
|
|
19
|
+
top: 0;
|
|
20
|
+
}
|
|
21
|
+
.np-btn.disabled[class] {
|
|
22
|
+
pointer-events: auto;
|
|
23
|
+
}
|