@canvas-components/react-components 0.1.4 → 0.1.5
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/README.md +8 -1
- package/dist/index.cjs +254 -224
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +14 -3
- package/dist/index.js.map +1 -1
- package/package.json +7 -3
package/dist/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { forwardRef, useRef, useEffect, useImperativeHandle, createContext, useState, useMemo, useLayoutEffect, useContext } from 'react';
|
|
2
3
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
3
4
|
import { createPortal } from 'react-dom';
|
|
4
5
|
|
|
@@ -5193,6 +5194,16 @@ function clampPage(page, totalPages) {
|
|
|
5193
5194
|
}
|
|
5194
5195
|
return Math.min(Math.max(1, Math.trunc(page)), totalPages);
|
|
5195
5196
|
}
|
|
5197
|
+
var compatibleIdSeed = 0;
|
|
5198
|
+
function useCompatibleId(prefix = "canvas-react-id") {
|
|
5199
|
+
const nativeUseId = React.useId;
|
|
5200
|
+
const fallbackIdRef = React.useRef();
|
|
5201
|
+
if (!fallbackIdRef.current) {
|
|
5202
|
+
compatibleIdSeed += 1;
|
|
5203
|
+
fallbackIdRef.current = `${prefix}-${compatibleIdSeed}`;
|
|
5204
|
+
}
|
|
5205
|
+
return nativeUseId ? nativeUseId() : fallbackIdRef.current;
|
|
5206
|
+
}
|
|
5196
5207
|
|
|
5197
5208
|
// src/components/popconfirm/style.css
|
|
5198
5209
|
styleInject('@import "../../styles/variables.css";\n.canvas-react-popconfirm-trigger {\n display: inline-flex;\n max-width: 100%;\n}\n.canvas-react-popconfirm-trigger-disabled {\n cursor: not-allowed;\n}\n.canvas-react-popconfirm-popup {\n overflow: visible;\n}\n.canvas-react-popconfirm {\n position: relative;\n box-sizing: border-box;\n width: max-content;\n min-width: 180px;\n max-width: 320px;\n padding: 12px;\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n line-height: 1.5;\n}\n.canvas-react-popconfirm-arrow {\n position: absolute;\n z-index: 1;\n box-sizing: border-box;\n width: 10px;\n height: 10px;\n border: 0;\n background: var(--canvas-react-color-bg, #ffffff);\n pointer-events: none;\n transform: rotate(45deg);\n}\n.canvas-react-popup[data-placement^=bottom] .canvas-react-popconfirm-arrow {\n top: -5px;\n border-top: 1px solid var(--canvas-react-color-border, #d9d9d9);\n border-left: 1px solid var(--canvas-react-color-border, #d9d9d9);\n}\n.canvas-react-popup[data-placement^=top] .canvas-react-popconfirm-arrow {\n bottom: -5px;\n border-right: 1px solid var(--canvas-react-color-border, #d9d9d9);\n border-bottom: 1px solid var(--canvas-react-color-border, #d9d9d9);\n}\n.canvas-react-popup[data-placement$=Left] .canvas-react-popconfirm-arrow {\n left: 24px;\n}\n.canvas-react-popup[data-placement$=Right] .canvas-react-popconfirm-arrow {\n right: 24px;\n}\n.canvas-react-popup[data-placement^=left] .canvas-react-popconfirm-arrow {\n right: -5px;\n border-top: 1px solid var(--canvas-react-color-border, #d9d9d9);\n border-right: 1px solid var(--canvas-react-color-border, #d9d9d9);\n}\n.canvas-react-popup[data-placement^=right] .canvas-react-popconfirm-arrow {\n left: -5px;\n border-bottom: 1px solid var(--canvas-react-color-border, #d9d9d9);\n border-left: 1px solid var(--canvas-react-color-border, #d9d9d9);\n}\n.canvas-react-popup[data-placement$=Top] .canvas-react-popconfirm-arrow {\n top: 18px;\n}\n.canvas-react-popup[data-placement$=Bottom] .canvas-react-popconfirm-arrow {\n bottom: 18px;\n}\n.canvas-react-popconfirm-message {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n}\n.canvas-react-popconfirm-icon {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n margin-top: 2px;\n color: #faad14;\n font-size: 12px;\n line-height: 1;\n}\n.canvas-react-popconfirm-default-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: #faad14;\n color: #ffffff;\n font-size: 11px;\n font-weight: 700;\n line-height: 1;\n}\n.canvas-react-popconfirm-text {\n min-width: 0;\n}\n.canvas-react-popconfirm-title {\n color: var(--canvas-react-color-text);\n font-weight: 500;\n word-break: break-word;\n}\n.canvas-react-popconfirm-description {\n margin-top: 4px;\n color: var(--canvas-react-color-text-muted);\n word-break: break-word;\n}\n.canvas-react-popconfirm-actions {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n margin-top: 12px;\n}\n.canvas-react-popconfirm-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n height: 26px;\n min-width: 48px;\n padding: 0 10px;\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: 12px;\n line-height: 1;\n white-space: nowrap;\n cursor: pointer;\n transition:\n border-color 0.18s ease,\n background-color 0.18s ease,\n color 0.18s ease,\n opacity 0.18s ease;\n}\n.canvas-react-popconfirm-button:hover {\n border-color: var(--canvas-react-color-primary-hover);\n color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-popconfirm-button-primary {\n border-color: var(--canvas-react-color-primary);\n background: var(--canvas-react-color-primary);\n color: #ffffff;\n}\n.canvas-react-popconfirm-button-primary:hover {\n border-color: var(--canvas-react-color-primary-hover);\n background: var(--canvas-react-color-primary-hover);\n color: #ffffff;\n}\n.canvas-react-popconfirm-button:disabled {\n opacity: 0.56;\n cursor: not-allowed;\n}\n.canvas-react-popconfirm-button:disabled:hover {\n border-color: var(--canvas-react-color-border);\n color: var(--canvas-react-color-text);\n}\n.canvas-react-popconfirm-button-primary:disabled:hover {\n border-color: var(--canvas-react-color-primary);\n background: var(--canvas-react-color-primary);\n color: #ffffff;\n}\n.canvas-react-popconfirm-loading {\n width: 12px;\n height: 12px;\n border: 2px solid rgba(255, 255, 255, 0.45);\n border-top-color: #ffffff;\n border-radius: 50%;\n animation: canvas-react-popconfirm-loading 0.8s linear infinite;\n}\n@keyframes canvas-react-popconfirm-loading {\n to {\n transform: rotate(360deg);\n }\n}\n');
|
|
@@ -5225,8 +5236,8 @@ function ReactPopconfirm(props) {
|
|
|
5225
5236
|
const triggerRef = useRef(null);
|
|
5226
5237
|
const [innerOpen, setInnerOpen] = useState(defaultOpen);
|
|
5227
5238
|
const [innerConfirmLoading, setInnerConfirmLoading] = useState(false);
|
|
5228
|
-
const titleId =
|
|
5229
|
-
const descriptionId =
|
|
5239
|
+
const titleId = useCompatibleId("canvas-react-popconfirm-title");
|
|
5240
|
+
const descriptionId = useCompatibleId("canvas-react-popconfirm-description");
|
|
5230
5241
|
const controlled = open !== void 0;
|
|
5231
5242
|
const mergedOpen = controlled ? Boolean(open) : innerOpen;
|
|
5232
5243
|
const popupOpen = mergedOpen && !disabled;
|