@staffbase/design 18.3.0 → 18.6.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/dist/components.css +13 -1
- package/dist/fonts/epilogue-OFL.txt +93 -0
- package/dist/fonts/epilogue.css +12 -0
- package/dist/fonts/inter-OFL.txt +92 -0
- package/dist/fonts/inter.css +12 -0
- package/dist/hooks.cjs +12 -1
- package/dist/hooks.cjs.map +1 -1
- package/dist/hooks.js +12 -0
- package/dist/hooks.js.map +1 -1
- package/dist/main.cjs +51 -52
- package/dist/main.cjs.map +1 -1
- package/dist/main.d.ts +3 -3
- package/dist/main.js +51 -51
- package/dist/main.js.map +1 -1
- package/dist/theme.css +54 -42
- package/dist/tokens/component.css +12 -0
- package/dist/tokens/primitive.css +12 -0
- package/dist/tokens/semantic.css +13 -0
- package/package.json +28 -27
package/dist/main.d.ts
CHANGED
|
@@ -40,7 +40,7 @@ import { HTMLProps } from 'react';
|
|
|
40
40
|
import { Input } from '@base-ui/react/input';
|
|
41
41
|
import { InputHTMLAttributes } from 'react';
|
|
42
42
|
import { InputProps as InputProps_2 } from '@base-ui/react';
|
|
43
|
-
import { JSX } from 'react
|
|
43
|
+
import { JSX } from 'react';
|
|
44
44
|
import { Menu as Menu_2 } from '@base-ui/react/menu';
|
|
45
45
|
import { MouseEvent as MouseEvent_2 } from 'react';
|
|
46
46
|
import { MutableRefObject } from 'react';
|
|
@@ -79,7 +79,7 @@ export declare type ActionItemVariant = 'default' | 'critical';
|
|
|
79
79
|
/** @deprecated use Menu component instead */
|
|
80
80
|
export declare function ActionMenu({ children, ...options }: {
|
|
81
81
|
children: ReactNode;
|
|
82
|
-
} & Omit<ActionMenuOptions, 'listRef'>): JSX.Element;
|
|
82
|
+
} & Omit<ActionMenuOptions, 'listRef'>): default_2.JSX.Element;
|
|
83
83
|
|
|
84
84
|
export declare namespace ActionMenu {
|
|
85
85
|
var displayName: string;
|
|
@@ -1445,7 +1445,7 @@ export declare const PieChartIcon: default_2.NamedExoticComponent<default_2.SVGA
|
|
|
1445
1445
|
export declare const Pill: ForwardRefExoticComponent<Omit<PillProps, "ref"> & RefAttributes<HTMLDivElement>>;
|
|
1446
1446
|
|
|
1447
1447
|
declare interface PillProps extends ComponentProps<'div'> {
|
|
1448
|
-
color?: 'critical' | 'warning' | 'primary' | 'success' | 'neutral' | 'purple' | 'cyan' | 'pink' | 'teal';
|
|
1448
|
+
color?: 'critical' | 'warning' | 'primary' | 'success' | 'neutral' | 'purple' | 'cyan' | 'pink' | 'teal' | 'yellow';
|
|
1449
1449
|
variant?: 'solid' | 'outline';
|
|
1450
1450
|
children: ReactNode;
|
|
1451
1451
|
}
|
package/dist/main.js
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Copyright 2026, Staffbase SE and contributors.
|
|
3
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
you may not use this file except in compliance with the License.
|
|
5
|
+
You may obtain a copy of the License at
|
|
6
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
+
Unless required by applicable law or agreed to in writing, software
|
|
8
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
9
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
10
|
+
See the License for the specific language governing permissions and
|
|
11
|
+
limitations under the License.
|
|
12
|
+
*/
|
|
1
13
|
import { FloatingFocusManager, FloatingList, FloatingOverlay, FloatingPortal, autoUpdate, flip, offset, shift, useClick, useDismiss, useFloating, useFocus, useHover, useInteractions, useListItem, useListNavigation, useMergeRefs, useRole, useTransitionStatus, useTransitionStyles } from "@floating-ui/react";
|
|
2
14
|
import clsx$1, { clsx } from "clsx";
|
|
3
15
|
import React, { cloneElement, createContext, createElement, forwardRef, isValidElement, memo, useCallback, useContext, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
|
|
@@ -122,7 +134,6 @@ var ActionMenuContent = React.forwardRef(function ActionMenuContent(props, propR
|
|
|
122
134
|
modal: false,
|
|
123
135
|
initialFocus: -1,
|
|
124
136
|
children: /* @__PURE__ */ jsx("div", {
|
|
125
|
-
"data-c13y-component": "action-menu-content",
|
|
126
137
|
className: clsx$1("ds-action-menu", className),
|
|
127
138
|
ref: forkedRef,
|
|
128
139
|
style: {
|
|
@@ -157,7 +168,6 @@ var ActionMenuItem = React.forwardRef(function ActionMenuItem(props, ref) {
|
|
|
157
168
|
const itemRef = useMergeRefs([ref, listItemRef]);
|
|
158
169
|
return /* @__PURE__ */ jsxs("button", {
|
|
159
170
|
role: "menuitem",
|
|
160
|
-
"data-c13y-component": "action-menu-item",
|
|
161
171
|
className: clsx$1("ds-action-menu__item", `ds-action-menu__item--${variant}`, "ds-action-menu__basic-item", `ds-action-menu__basic-item--${variant}`, className),
|
|
162
172
|
...rest,
|
|
163
173
|
...context.getItemProps({
|
|
@@ -192,7 +202,6 @@ var ActionMenuLinkItem = React.forwardRef(function ActionMenuLinkItem(props, ref
|
|
|
192
202
|
const itemRef = useMergeRefs([ref, listItemRef]);
|
|
193
203
|
return /* @__PURE__ */ jsxs("a", {
|
|
194
204
|
role: "menuitem",
|
|
195
|
-
"data-c13y-component": "action-menu-link-item",
|
|
196
205
|
className: clsx$1("ds-action-menu__item", `ds-action-menu__item--${variant}`, "ds-action-menu__link-item", className),
|
|
197
206
|
...rest,
|
|
198
207
|
...context.getItemProps({
|
|
@@ -9072,7 +9081,6 @@ function getDividerStyles(props) {
|
|
|
9072
9081
|
function Divider(props) {
|
|
9073
9082
|
const { dividerPosition = "horizontal", className = "", fullWidth = false, ...otherProps } = props;
|
|
9074
9083
|
return /* @__PURE__ */ jsx("hr", {
|
|
9075
|
-
"data-c13y-component": "divider",
|
|
9076
9084
|
className: clsx$1("ds-divider", `ds-divider--${dividerPosition}`, className),
|
|
9077
9085
|
style: getDividerStyles({
|
|
9078
9086
|
dividerPosition,
|
|
@@ -9826,6 +9834,30 @@ var HelpButton = forwardRef(function HelpButton(props, ref) {
|
|
|
9826
9834
|
});
|
|
9827
9835
|
HelpButton.displayName = "HelpButton";
|
|
9828
9836
|
//#endregion
|
|
9837
|
+
//#region src/utils/splitC13yProps.ts
|
|
9838
|
+
/**
|
|
9839
|
+
* Splits a props object into its `data-c13y-*` customizability attributes and
|
|
9840
|
+
* everything else.
|
|
9841
|
+
*
|
|
9842
|
+
* Portalled overlays render a positioner wrapper around the visible popup. The
|
|
9843
|
+
* public prop type extends the positioner's props, so a consumer-supplied
|
|
9844
|
+
* `data-c13y-region` / `data-c13y-purpose` / `data-c13y-id` would otherwise land
|
|
9845
|
+
* on the invisible positioner instead of the visible popup that carries
|
|
9846
|
+
* `data-c13y-component`. Use this to forward the customizability attributes onto
|
|
9847
|
+
* the popup while keeping positioner props (`align`, `sideOffset`, …) on the
|
|
9848
|
+
* positioner.
|
|
9849
|
+
*/
|
|
9850
|
+
function splitC13yProps(props) {
|
|
9851
|
+
const c13y = {};
|
|
9852
|
+
const rest = {};
|
|
9853
|
+
for (const key of Object.keys(props)) if (key.startsWith("data-c13y-")) c13y[key] = props[key];
|
|
9854
|
+
else rest[key] = props[key];
|
|
9855
|
+
return {
|
|
9856
|
+
c13y,
|
|
9857
|
+
rest
|
|
9858
|
+
};
|
|
9859
|
+
}
|
|
9860
|
+
//#endregion
|
|
9829
9861
|
//#region src/components/menu/Menu.tsx
|
|
9830
9862
|
var Root$6 = (props) => {
|
|
9831
9863
|
return /* @__PURE__ */ jsx(Menu$1.Root, {
|
|
@@ -9843,14 +9875,16 @@ var Trigger$4 = (props) => {
|
|
|
9843
9875
|
};
|
|
9844
9876
|
var Popup$3 = forwardRef((props, ref) => {
|
|
9845
9877
|
const { className, children, container, ...rest } = props;
|
|
9878
|
+
const { c13y, rest: positionerProps } = splitC13yProps(rest);
|
|
9846
9879
|
return /* @__PURE__ */ jsx(Menu$1.Portal, {
|
|
9847
9880
|
container,
|
|
9848
9881
|
children: /* @__PURE__ */ jsx(Menu$1.Positioner, {
|
|
9849
9882
|
align: "end",
|
|
9850
9883
|
sideOffset: 4,
|
|
9851
9884
|
ref,
|
|
9852
|
-
...
|
|
9885
|
+
...positionerProps,
|
|
9853
9886
|
children: /* @__PURE__ */ jsx(Menu$1.Popup, {
|
|
9887
|
+
...c13y,
|
|
9854
9888
|
"data-c13y-component": "menu-popover",
|
|
9855
9889
|
className: clsx$1("ds-menu__popup", className),
|
|
9856
9890
|
children,
|
|
@@ -10003,21 +10037,18 @@ var ModalHeader = forwardRef(function ModalHeader(props, ref) {
|
|
|
10003
10037
|
const { title, titleAddon, showCancelButton = false, cancelButtonText, onCancel, showHeaderButton = false, headerButtonIsGhost = true, onHeaderButtonClick, headerButtonText } = props;
|
|
10004
10038
|
let headerButton;
|
|
10005
10039
|
if (showHeaderButton && onHeaderButtonClick && headerButtonText) if (headerButtonIsGhost) headerButton = /* @__PURE__ */ jsx(GhostButton, {
|
|
10006
|
-
"data-c13y-purpose": "accept",
|
|
10007
10040
|
className: clsx$1("ds-modal__ghost-button--accept"),
|
|
10008
10041
|
variant: "primary",
|
|
10009
10042
|
onClick: () => onHeaderButtonClick(),
|
|
10010
10043
|
children: headerButtonText
|
|
10011
10044
|
});
|
|
10012
10045
|
else headerButton = /* @__PURE__ */ jsx(Button, {
|
|
10013
|
-
"data-c13y-purpose": "accept",
|
|
10014
10046
|
className: clsx$1("ds-modal__button--accept"),
|
|
10015
10047
|
variant: "primary",
|
|
10016
10048
|
onClick: () => onHeaderButtonClick(),
|
|
10017
10049
|
children: headerButtonText
|
|
10018
10050
|
});
|
|
10019
10051
|
return /* @__PURE__ */ jsxs("div", {
|
|
10020
|
-
"data-c13y-component": "modal-header",
|
|
10021
10052
|
className: clsx$1("ds-modal__header"),
|
|
10022
10053
|
ref,
|
|
10023
10054
|
children: [/* @__PURE__ */ jsxs("div", {
|
|
@@ -10031,7 +10062,6 @@ var ModalHeader = forwardRef(function ModalHeader(props, ref) {
|
|
|
10031
10062
|
}), /* @__PURE__ */ jsxs("div", {
|
|
10032
10063
|
className: "ds-modal__header-buttons",
|
|
10033
10064
|
children: [!!headerButton && headerButton, showCancelButton && cancelButtonText && /* @__PURE__ */ jsx(IconGhostButton, {
|
|
10034
|
-
"data-c13y-purpose": "cancel",
|
|
10035
10065
|
className: clsx$1("ds-modal__ghost-button--cancel"),
|
|
10036
10066
|
variant: "secondary",
|
|
10037
10067
|
style: { padding: "10px" },
|
|
@@ -10045,7 +10075,6 @@ var ModalHeader = forwardRef(function ModalHeader(props, ref) {
|
|
|
10045
10075
|
fullWidth: true
|
|
10046
10076
|
}), /* @__PURE__ */ jsx("div", {
|
|
10047
10077
|
className: "ds-modal__header-content",
|
|
10048
|
-
"data-c13y-component": "modal-header-content",
|
|
10049
10078
|
"data-testid": "header-content-wrapper",
|
|
10050
10079
|
children: props.children
|
|
10051
10080
|
})] })]
|
|
@@ -10111,7 +10140,6 @@ function ModalContent(props) {
|
|
|
10111
10140
|
setScrollShadows(scroll, scrollContent.current);
|
|
10112
10141
|
}, [scroll]);
|
|
10113
10142
|
return /* @__PURE__ */ jsx("div", {
|
|
10114
|
-
"data-c13y-component": "modal-content",
|
|
10115
10143
|
className: clsx$1("ds-modal__inner-content", scroll && "ds-modal__inner-content--scroll"),
|
|
10116
10144
|
"data-testid": "main-content-wrapper",
|
|
10117
10145
|
ref: scrollContent,
|
|
@@ -10122,20 +10150,17 @@ function ModalContent(props) {
|
|
|
10122
10150
|
var ModalFooter = forwardRef(function ModalFooter(props, ref) {
|
|
10123
10151
|
const { cancelButtonText, onCancel, footerButtonText, footerButtonVariant, onFooterButtonClick, disableFooterButton } = props;
|
|
10124
10152
|
return footerButtonText && onFooterButtonClick ? /* @__PURE__ */ jsxs("div", {
|
|
10125
|
-
"data-c13y-component": "modal-footer",
|
|
10126
10153
|
className: clsx$1("ds-modal__footer"),
|
|
10127
10154
|
"data-testid": "footer",
|
|
10128
10155
|
ref,
|
|
10129
10156
|
children: [props.children, /* @__PURE__ */ jsxs("div", {
|
|
10130
10157
|
className: "ds-modal__footer-buttons",
|
|
10131
10158
|
children: [cancelButtonText && /* @__PURE__ */ jsx(Button, {
|
|
10132
|
-
"data-c13y-purpose": "cancel",
|
|
10133
10159
|
className: clsx$1("ds-modal__button--cancel"),
|
|
10134
10160
|
variant: "secondary",
|
|
10135
10161
|
onClick: () => onCancel(),
|
|
10136
10162
|
children: cancelButtonText
|
|
10137
10163
|
}), footerButtonText && onFooterButtonClick && /* @__PURE__ */ jsx(Button, {
|
|
10138
|
-
"data-c13y-purpose": "accept",
|
|
10139
10164
|
className: clsx$1("ds-modal__button--accept"),
|
|
10140
10165
|
variant: footerButtonVariant,
|
|
10141
10166
|
disabled: disableFooterButton,
|
|
@@ -10222,7 +10247,6 @@ function ModalDialog(props) {
|
|
|
10222
10247
|
children: /* @__PURE__ */ jsx(FloatingFocusManager, {
|
|
10223
10248
|
context,
|
|
10224
10249
|
children: /* @__PURE__ */ jsxs("div", {
|
|
10225
|
-
"data-c13y-component": "modal-dialog",
|
|
10226
10250
|
...getFloatingProps({
|
|
10227
10251
|
ref: refs.setFloating,
|
|
10228
10252
|
className: clsx$1("ds-modal-dialog", className)
|
|
@@ -10244,12 +10268,10 @@ function ModalDialog(props) {
|
|
|
10244
10268
|
className: "ds-modal-dialog__content",
|
|
10245
10269
|
children: [/* @__PURE__ */ jsx(Button, {
|
|
10246
10270
|
variant: confirmButtonVariant,
|
|
10247
|
-
"data-c13y-purpose": "accept",
|
|
10248
10271
|
onClick: onConfirm,
|
|
10249
10272
|
children: confirmButtonText
|
|
10250
10273
|
}), /* @__PURE__ */ jsx(Button, {
|
|
10251
10274
|
variant: "secondary",
|
|
10252
|
-
"data-c13y-purpose": "cancel",
|
|
10253
10275
|
onClick: onCancel,
|
|
10254
10276
|
children: cancelButtonText
|
|
10255
10277
|
})]
|
|
@@ -10496,6 +10518,7 @@ var Input$2 = forwardRef((props, ref) => {
|
|
|
10496
10518
|
});
|
|
10497
10519
|
var Popup$2 = forwardRef((props, ref) => {
|
|
10498
10520
|
const { className, children, container, ...rest } = props;
|
|
10521
|
+
const { c13y, rest: positionerProps } = splitC13yProps(rest);
|
|
10499
10522
|
const { containerRef } = useSearchableMultiSelectContext();
|
|
10500
10523
|
return /* @__PURE__ */ jsx(Combobox.Portal, {
|
|
10501
10524
|
container,
|
|
@@ -10503,8 +10526,9 @@ var Popup$2 = forwardRef((props, ref) => {
|
|
|
10503
10526
|
ref,
|
|
10504
10527
|
sideOffset: 4,
|
|
10505
10528
|
anchor: containerRef,
|
|
10506
|
-
...
|
|
10529
|
+
...positionerProps,
|
|
10507
10530
|
children: /* @__PURE__ */ jsx(Combobox.Popup, {
|
|
10531
|
+
...c13y,
|
|
10508
10532
|
"data-c13y-component": "searchable-multi-select-popover",
|
|
10509
10533
|
className: clsx$1("ds-searchable-multi-select__popup", className),
|
|
10510
10534
|
children,
|
|
@@ -10686,13 +10710,15 @@ var Input$1 = forwardRef((props, ref) => {
|
|
|
10686
10710
|
});
|
|
10687
10711
|
var Popup$1 = forwardRef((props, ref) => {
|
|
10688
10712
|
const { className, children, container, ...rest } = props;
|
|
10713
|
+
const { c13y, rest: positionerProps } = splitC13yProps(rest);
|
|
10689
10714
|
return /* @__PURE__ */ jsx(Combobox.Portal, {
|
|
10690
10715
|
container,
|
|
10691
10716
|
children: /* @__PURE__ */ jsx(Combobox.Positioner, {
|
|
10692
10717
|
sideOffset: 5,
|
|
10693
10718
|
ref,
|
|
10694
|
-
...
|
|
10719
|
+
...positionerProps,
|
|
10695
10720
|
children: /* @__PURE__ */ jsx(Combobox.Popup, {
|
|
10721
|
+
...c13y,
|
|
10696
10722
|
"data-c13y-component": "searchable-single-select-popover",
|
|
10697
10723
|
className: clsx$1("ds-searchable-single-select__popup", className),
|
|
10698
10724
|
children,
|
|
@@ -10812,13 +10838,15 @@ var Trigger$2 = forwardRef((props, ref) => {
|
|
|
10812
10838
|
});
|
|
10813
10839
|
var Popup = forwardRef((props, ref) => {
|
|
10814
10840
|
const { className, children, container, ...rest } = props;
|
|
10841
|
+
const { c13y, rest: positionerProps } = splitC13yProps(rest);
|
|
10815
10842
|
return /* @__PURE__ */ jsx(Select$1.Portal, {
|
|
10816
10843
|
container,
|
|
10817
10844
|
children: /* @__PURE__ */ jsx(Select$1.Positioner, {
|
|
10818
10845
|
alignItemWithTrigger: false,
|
|
10819
10846
|
ref,
|
|
10820
|
-
...
|
|
10847
|
+
...positionerProps,
|
|
10821
10848
|
children: /* @__PURE__ */ jsx(Select$1.Popup, {
|
|
10849
|
+
...c13y,
|
|
10822
10850
|
"data-c13y-component": "select-popover",
|
|
10823
10851
|
className: clsx$1("ds-select__popup", className),
|
|
10824
10852
|
children,
|
|
@@ -10978,12 +11006,10 @@ function SingleSelect(props) {
|
|
|
10978
11006
|
const errorOrDescription = useMemo(() => {
|
|
10979
11007
|
if (error !== void 0 && error !== "") return /* @__PURE__ */ jsxs("div", {
|
|
10980
11008
|
className: "ds-single-select__error",
|
|
10981
|
-
"data-c13y-component": "single-select-error",
|
|
10982
11009
|
children: [/* @__PURE__ */ jsx(AlertIcon_default, {}), error]
|
|
10983
11010
|
});
|
|
10984
11011
|
if (description !== void 0 && description !== "") return /* @__PURE__ */ jsx("span", {
|
|
10985
11012
|
className: "ds-single-select__description",
|
|
10986
|
-
"data-c13y-component": "single-select-description",
|
|
10987
11013
|
children: description
|
|
10988
11014
|
});
|
|
10989
11015
|
return null;
|
|
@@ -10994,7 +11020,6 @@ function SingleSelect(props) {
|
|
|
10994
11020
|
const dropdownContent = useMemo(() => {
|
|
10995
11021
|
if (loading) return /* @__PURE__ */ jsx("div", {
|
|
10996
11022
|
className: "ds-single-select__loader",
|
|
10997
|
-
"data-c13y-component": "single-select-loader",
|
|
10998
11023
|
children: /* @__PURE__ */ jsx(LoadingSpinner, {
|
|
10999
11024
|
size: 24,
|
|
11000
11025
|
"aria-label": "Loading select options..."
|
|
@@ -11002,19 +11027,15 @@ function SingleSelect(props) {
|
|
|
11002
11027
|
});
|
|
11003
11028
|
if (options.length === 0 && emptyResultText !== void 0 && emptyResultText !== "") return /* @__PURE__ */ jsx("span", {
|
|
11004
11029
|
className: "ds-single-select__no-results",
|
|
11005
|
-
"data-c13y-component": "single-select-empty",
|
|
11006
11030
|
children: emptyResultText
|
|
11007
11031
|
});
|
|
11008
11032
|
const getLabel = (option) => /* @__PURE__ */ jsxs("span", {
|
|
11009
11033
|
className: "ds-single-select__option-text",
|
|
11010
|
-
"data-c13y-component": "single-select-option-text",
|
|
11011
11034
|
children: [/* @__PURE__ */ jsx("span", {
|
|
11012
|
-
"data-c13y-component": "single-select-label",
|
|
11013
11035
|
className: clsx$1("ds-single-select__option-label", value?.id === option.id && "ds-single-select__option-label--selected"),
|
|
11014
11036
|
...getItemProps({ id: `${listId}-option-${option.id}-label` }),
|
|
11015
11037
|
children: optionLabel(option)
|
|
11016
11038
|
}), typeof optionDescription === "function" && optionDescription(option) !== void 0 && /* @__PURE__ */ jsx("div", {
|
|
11017
|
-
"data-c13y-component": "single-select-option-description",
|
|
11018
11039
|
className: clsx$1("ds-single-select__option-description", value?.id === option.id && "ds-single-select__option-description--selected"),
|
|
11019
11040
|
...getItemProps({ id: `${listId}-option-${option.id}-description` }),
|
|
11020
11041
|
"aria-hidden": true,
|
|
@@ -11022,7 +11043,6 @@ function SingleSelect(props) {
|
|
|
11022
11043
|
})]
|
|
11023
11044
|
});
|
|
11024
11045
|
return options.map((option, index) => /* @__PURE__ */ jsx("div", {
|
|
11025
|
-
"data-c13y-component": "single-select-option",
|
|
11026
11046
|
...getItemProps({
|
|
11027
11047
|
onClick: () => {
|
|
11028
11048
|
onChange(option);
|
|
@@ -11071,7 +11091,6 @@ function SingleSelect(props) {
|
|
|
11071
11091
|
})]
|
|
11072
11092
|
}),
|
|
11073
11093
|
variantProps.searchable ? /* @__PURE__ */ jsxs("div", {
|
|
11074
|
-
"data-c13y-component": "single-select",
|
|
11075
11094
|
className: clsx$1("ds-single-select__input-wrapper", disabled && "ds-single-select__input-wrapper--disabled", error && "ds-single-select__input-wrapper--error"),
|
|
11076
11095
|
ref: refs.setReference,
|
|
11077
11096
|
onClick: handleWrapperClick,
|
|
@@ -11108,7 +11127,6 @@ function SingleSelect(props) {
|
|
|
11108
11127
|
})
|
|
11109
11128
|
]
|
|
11110
11129
|
}) : /* @__PURE__ */ jsxs("button", {
|
|
11111
|
-
"data-c13y-component": "single-select",
|
|
11112
11130
|
className: clsx$1("ds-single-select__trigger", error !== void 0 && error !== "" && "ds-single-select__trigger--error", disabled && "ds-single-select__trigger--disabled"),
|
|
11113
11131
|
...getReferenceProps({
|
|
11114
11132
|
disabled,
|
|
@@ -11157,7 +11175,6 @@ function SingleSelect(props) {
|
|
|
11157
11175
|
"aria-labelledby": ariaLabelledBy || labelId
|
|
11158
11176
|
}),
|
|
11159
11177
|
ref: floatingRef,
|
|
11160
|
-
"data-c13y-component": "single-select-dropdown",
|
|
11161
11178
|
className: clsx$1("ds-single-select__dropdown"),
|
|
11162
11179
|
children: /* @__PURE__ */ jsx("div", { children: dropdownContent })
|
|
11163
11180
|
}) }) : null] });
|
|
@@ -11306,13 +11323,11 @@ function TextAreaDeprecated(props) {
|
|
|
11306
11323
|
if (handleValueChange) handleValueChange(event);
|
|
11307
11324
|
}, [handleValueChange]);
|
|
11308
11325
|
return /* @__PURE__ */ jsxs("div", {
|
|
11309
|
-
"data-c13y-component": "text-area-deprecated",
|
|
11310
11326
|
className: clsx$1("ds-text-area__container", className),
|
|
11311
11327
|
children: [
|
|
11312
11328
|
/* @__PURE__ */ jsxs("label", {
|
|
11313
11329
|
className: "ds-text-area__label",
|
|
11314
11330
|
htmlFor: id,
|
|
11315
|
-
"data-c13y-component": "text-area-deprecated-label",
|
|
11316
11331
|
children: [label, requiredLabel && /* @__PURE__ */ jsx("span", {
|
|
11317
11332
|
className: "ds-text-area__label-required",
|
|
11318
11333
|
"aria-hidden": true,
|
|
@@ -11321,7 +11336,6 @@ function TextAreaDeprecated(props) {
|
|
|
11321
11336
|
}),
|
|
11322
11337
|
/* @__PURE__ */ jsx("textarea", {
|
|
11323
11338
|
className: clsx$1("ds-text-area__input", resizable && "resizable", errorMessage && "ds-text-area__input--error"),
|
|
11324
|
-
"data-c13y-component": "text-area-deprecated-input",
|
|
11325
11339
|
dir: "auto",
|
|
11326
11340
|
id,
|
|
11327
11341
|
name: inputId ?? label,
|
|
@@ -11336,24 +11350,20 @@ function TextAreaDeprecated(props) {
|
|
|
11336
11350
|
}),
|
|
11337
11351
|
/* @__PURE__ */ jsxs("div", {
|
|
11338
11352
|
className: "ds-text-area__footer",
|
|
11339
|
-
"data-c13y-component": "text-area-deprecated-footer",
|
|
11340
11353
|
children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
|
|
11341
11354
|
id: errorId,
|
|
11342
11355
|
"aria-live": errorAriaLive,
|
|
11343
11356
|
"aria-atomic": "true",
|
|
11344
11357
|
children: errorMessage && /* @__PURE__ */ jsxs("span", {
|
|
11345
11358
|
className: "ds-text-area__error",
|
|
11346
|
-
"data-c13y-component": "text-area-deprecated-error",
|
|
11347
11359
|
children: [/* @__PURE__ */ jsx(AlertIcon_default, {}), errorMessage]
|
|
11348
11360
|
})
|
|
11349
11361
|
}), description && /* @__PURE__ */ jsx("p", {
|
|
11350
11362
|
className: "ds-text-area__description",
|
|
11351
11363
|
id: descriptionId,
|
|
11352
|
-
"data-c13y-component": "text-area-deprecated-description",
|
|
11353
11364
|
children: description
|
|
11354
11365
|
})] }), limit && /* @__PURE__ */ jsxs("span", {
|
|
11355
11366
|
className: "ds-text-area__counter",
|
|
11356
|
-
"data-c13y-component": "text-area-deprecated-counter",
|
|
11357
11367
|
children: [
|
|
11358
11368
|
count,
|
|
11359
11369
|
"/",
|
|
@@ -11402,13 +11412,11 @@ var TextInput = forwardRef(function TextInput(props, ref) {
|
|
|
11402
11412
|
const inputRef = useRef(null);
|
|
11403
11413
|
if (!ref) ref = inputRef;
|
|
11404
11414
|
return /* @__PURE__ */ jsxs("div", {
|
|
11405
|
-
"data-c13y-component": "text-input",
|
|
11406
11415
|
className: clsx$1("ds-text-input__container", errorMessage ? "ds-text-input__container--error" : `ds-text-input__container--${variant}`, restProps.disabled && "ds-text-input__container--disabled", className),
|
|
11407
11416
|
children: [
|
|
11408
11417
|
/* @__PURE__ */ jsxs("label", {
|
|
11409
11418
|
className: "ds-text-input__label",
|
|
11410
11419
|
htmlFor: inputId,
|
|
11411
|
-
"data-c13y-component": "text-input-label",
|
|
11412
11420
|
children: [label, requiredLabel && /* @__PURE__ */ jsx("span", {
|
|
11413
11421
|
className: "ds-text-input__label-required",
|
|
11414
11422
|
"aria-hidden": true,
|
|
@@ -11417,7 +11425,6 @@ var TextInput = forwardRef(function TextInput(props, ref) {
|
|
|
11417
11425
|
}),
|
|
11418
11426
|
/* @__PURE__ */ jsxs("div", {
|
|
11419
11427
|
className: "ds-text-input__base-wrapper",
|
|
11420
|
-
"data-c13y-component": "text-input-container",
|
|
11421
11428
|
style: { width },
|
|
11422
11429
|
onClick: () => ref && "current" in ref && ref.current?.focus(),
|
|
11423
11430
|
role: "none",
|
|
@@ -11427,7 +11434,6 @@ var TextInput = forwardRef(function TextInput(props, ref) {
|
|
|
11427
11434
|
children: icon
|
|
11428
11435
|
}),
|
|
11429
11436
|
/* @__PURE__ */ jsx("input", {
|
|
11430
|
-
"data-c13y-component": "text-input-input",
|
|
11431
11437
|
className: "ds-text-input__base-input",
|
|
11432
11438
|
"aria-invalid": !!errorMessage,
|
|
11433
11439
|
id: inputId,
|
|
@@ -11447,7 +11453,6 @@ var TextInput = forwardRef(function TextInput(props, ref) {
|
|
|
11447
11453
|
errorMessage && /* @__PURE__ */ jsxs("div", {
|
|
11448
11454
|
className: "ds-text-input__error",
|
|
11449
11455
|
id: inputErrorId,
|
|
11450
|
-
"data-c13y-component": "text-input-error",
|
|
11451
11456
|
children: [/* @__PURE__ */ jsx("span", {
|
|
11452
11457
|
className: "ds-text-input__error-icon",
|
|
11453
11458
|
children: /* @__PURE__ */ jsx(AlertIcon_default, {})
|
|
@@ -11456,7 +11461,6 @@ var TextInput = forwardRef(function TextInput(props, ref) {
|
|
|
11456
11461
|
description && /* @__PURE__ */ jsx("div", {
|
|
11457
11462
|
className: clsx$1("ds-text-input__description"),
|
|
11458
11463
|
id: inputDescriptionId,
|
|
11459
|
-
"data-c13y-component": "text-input-description",
|
|
11460
11464
|
children: description
|
|
11461
11465
|
})
|
|
11462
11466
|
]
|
|
@@ -11472,7 +11476,6 @@ function Toggle(props) {
|
|
|
11472
11476
|
const descriptionId = `toggle-${id}-descr`;
|
|
11473
11477
|
const inputId = `toggle-${id}-label`;
|
|
11474
11478
|
return /* @__PURE__ */ jsxs("div", {
|
|
11475
|
-
"data-c13y-component": "toggle",
|
|
11476
11479
|
className: clsx$1("ds-toggle__container", disabled && "ds-toggle__container--disabled", spaceBetween ? "ds-toggle__container--full-width" : "ds-toggle__container--content-width", className),
|
|
11477
11480
|
children: [/* @__PURE__ */ jsxs("div", {
|
|
11478
11481
|
className: clsx$1("ds-toggle__wrapper"),
|
|
@@ -11481,13 +11484,11 @@ function Toggle(props) {
|
|
|
11481
11484
|
className: clsx$1("ds-toggle__label-container"),
|
|
11482
11485
|
children: /* @__PURE__ */ jsx("label", {
|
|
11483
11486
|
className: clsx$1("ds-toggle__label"),
|
|
11484
|
-
"data-c13y-component": "toggle-label",
|
|
11485
11487
|
htmlFor: inputId,
|
|
11486
11488
|
children: label
|
|
11487
11489
|
})
|
|
11488
11490
|
}),
|
|
11489
11491
|
/* @__PURE__ */ jsx("input", {
|
|
11490
|
-
"data-c13y-component": "toggle-input",
|
|
11491
11492
|
className: "ds-toggle",
|
|
11492
11493
|
name,
|
|
11493
11494
|
type: "checkbox",
|
|
@@ -11500,7 +11501,6 @@ function Toggle(props) {
|
|
|
11500
11501
|
}),
|
|
11501
11502
|
/* @__PURE__ */ jsxs("div", {
|
|
11502
11503
|
className: clsx$1("ds-toggle__switch-wrapper"),
|
|
11503
|
-
"data-c13y-component": "toggle-switch",
|
|
11504
11504
|
children: [
|
|
11505
11505
|
/* @__PURE__ */ jsx(CheckIcon_default, {
|
|
11506
11506
|
"aria-hidden": "true",
|
|
@@ -11516,7 +11516,6 @@ function Toggle(props) {
|
|
|
11516
11516
|
]
|
|
11517
11517
|
}), description && /* @__PURE__ */ jsx("p", {
|
|
11518
11518
|
className: clsx$1("ds-toggle__description"),
|
|
11519
|
-
"data-c13y-component": "toggle-description",
|
|
11520
11519
|
id: descriptionId,
|
|
11521
11520
|
children: description
|
|
11522
11521
|
})]
|
|
@@ -11555,6 +11554,7 @@ var Tooltip = {
|
|
|
11555
11554
|
Content: forwardRef((props, ref) => {
|
|
11556
11555
|
const context = useContext(TooltipContext);
|
|
11557
11556
|
const { className, children, variant = "default", is = "description", container, ...rest } = props;
|
|
11557
|
+
const { c13y, rest: positionerProps } = splitC13yProps(rest);
|
|
11558
11558
|
useEffect(() => {
|
|
11559
11559
|
if (context) context.setIs(is);
|
|
11560
11560
|
}, [is, context]);
|
|
@@ -11562,8 +11562,9 @@ var Tooltip = {
|
|
|
11562
11562
|
container,
|
|
11563
11563
|
children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
|
|
11564
11564
|
sideOffset: 4,
|
|
11565
|
-
...
|
|
11565
|
+
...positionerProps,
|
|
11566
11566
|
children: /* @__PURE__ */ jsx(Tooltip$1.Popup, {
|
|
11567
|
+
...c13y,
|
|
11567
11568
|
"data-c13y-component": "tooltip-popover",
|
|
11568
11569
|
className: clsx$1(`ds-tooltip--${variant}`, "ds-tooltip", className),
|
|
11569
11570
|
id: context?.id,
|
|
@@ -11634,7 +11635,6 @@ function TooltipDeprecated(props) {
|
|
|
11634
11635
|
...styles
|
|
11635
11636
|
}
|
|
11636
11637
|
}),
|
|
11637
|
-
"data-c13y-component": "tooltip-deprecated",
|
|
11638
11638
|
className: clsx("ds-tooltip-deprecated", className),
|
|
11639
11639
|
children: content
|
|
11640
11640
|
}) : null] });
|