@adaptabletools/adaptable 24.0.0-canary.5 → 24.0.0-canary.7
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/devtools.d.ts +182 -1
- package/index.css +300 -275
- package/package.json +2 -1
- package/src/AdaptableInterfaces/IAdaptable.d.ts +4 -4
- package/src/AdaptableOptions/DefaultAdaptableOptions.js +5 -5
- package/src/AdaptableOptions/FlashingCellOptions.d.ts +3 -3
- package/src/AdaptableOptions/SettingsPanelOptions.d.ts +6 -4
- package/src/AdaptableOptions/StateOptions.d.ts +37 -13
- package/src/AdaptableOptions/UserInterfaceOptions.d.ts +4 -6
- package/src/AdaptableState/AdaptableState.d.ts +2 -0
- package/src/AdaptableState/QuickSearchState.d.ts +4 -0
- package/src/AdaptableState/StyledColumns/GradientStyle.d.ts +4 -0
- package/src/Api/Implementation/ColumnScopeApiImpl.js +3 -3
- package/src/Api/Implementation/QuickSearchApiImpl.js +2 -2
- package/src/Api/Implementation/StateApiImpl.d.ts +1 -1
- package/src/Api/Implementation/StateApiImpl.js +4 -3
- package/src/Api/Implementation/UserInterfaceApiImpl.d.ts +0 -1
- package/src/Api/Implementation/UserInterfaceApiImpl.js +9 -15
- package/src/Api/Internal/AdaptableInternalApi.js +5 -3
- package/src/Api/Internal/CalculatedColumnInternalApi.js +1 -1
- package/src/Api/Internal/StateInternalApi.d.ts +1 -1
- package/src/Api/Internal/StateInternalApi.js +6 -5
- package/src/Api/StateApi.d.ts +2 -2
- package/src/Api/UserInterfaceApi.d.ts +0 -4
- package/src/Redux/ActionsReducers/QuickSearchRedux.d.ts +9 -4
- package/src/Redux/ActionsReducers/QuickSearchRedux.js +12 -7
- package/src/Redux/Store/AdaptableReduxLocalStorageEngine.d.ts +8 -0
- package/src/Redux/Store/AdaptableReduxLocalStorageEngine.js +12 -12
- package/src/Redux/Store/AdaptableStore.d.ts +8 -5
- package/src/Redux/Store/AdaptableStore.js +51 -21
- package/src/Redux/Store/Interface/IAdaptableStore.d.ts +5 -5
- package/src/Redux/Store/Interface/IStorageEngine.d.ts +4 -4
- package/src/Redux/Store/StateOptionsGuards.d.ts +58 -0
- package/src/Redux/Store/StateOptionsGuards.js +112 -0
- package/src/Redux/Store/isTransientReduxAction.d.ts +5 -0
- package/src/Redux/Store/isTransientReduxAction.js +19 -0
- package/src/Utilities/Constants/DocumentationLinkConstants.d.ts +1 -0
- package/src/Utilities/Constants/DocumentationLinkConstants.js +1 -0
- package/src/Utilities/Constants/ReduxConstants.d.ts +2 -2
- package/src/Utilities/Constants/ReduxConstants.js +5 -5
- package/src/Utilities/Helpers/AlertTypeHelper.d.ts +1 -1
- package/src/Utilities/Helpers/SettingsPanelHelper.d.ts +14 -0
- package/src/Utilities/Helpers/SettingsPanelHelper.js +37 -1
- package/src/Utilities/Helpers/UIHelper.d.ts +12 -14
- package/src/Utilities/Helpers/UIHelper.js +12 -35
- package/src/Utilities/ObjectFactory.js +3 -3
- package/src/View/Components/Popups/AdaptablePopup/Navigation.js +9 -11
- package/src/View/Components/StyleComponent.js +2 -2
- package/src/View/Dashboard/Dashboard.d.ts +1 -1
- package/src/View/Dashboard/Dashboard.js +1 -1
- package/src/View/Dashboard/DashboardPopupSections.js +1 -1
- package/src/View/GridInfo/GridInfoPopup.js +62 -25
- package/src/View/QuickSearch/QuickSearchInput.js +1 -1
- package/src/View/QuickSearch/QuickSearchPopup.d.ts +1 -1
- package/src/View/QuickSearch/QuickSearchPopup.js +1 -1
- package/src/View/QuickSearch/Utilities/useQuickSearchDebounced.d.ts +2 -2
- package/src/View/StyledColumn/RangesComponent.js +13 -16
- package/src/View/StyledColumn/Wizard/BadgePillStyleEditor.d.ts +0 -2
- package/src/View/StyledColumn/Wizard/BadgePillStyleEditor.js +2 -2
- package/src/View/StyledColumn/Wizard/StyledColumnBadgeSection.js +2 -3
- package/src/View/StyledColumn/Wizard/StyledColumnSliceStyleEditors.d.ts +0 -3
- package/src/View/StyledColumn/Wizard/StyledColumnSliceStyleEditors.js +3 -3
- package/src/View/StyledColumn/Wizard/StyledColumnSparklineSettingsSection.js +7 -11
- package/src/View/StyledColumn/Wizard/StyledColumnWizardBulletSection.js +6 -6
- package/src/View/StyledColumn/Wizard/StyledColumnWizardGradientSection.js +2 -2
- package/src/View/StyledColumn/Wizard/StyledColumnWizardIconSection.js +2 -2
- package/src/View/StyledColumn/Wizard/StyledColumnWizardRangeBarSection.js +8 -8
- package/src/View/StyledColumn/Wizard/StyledColumnWizardRatingSection.js +4 -4
- package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/StyledColumnWizardRangesSection.js +2 -2
- package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/StyledColumnWizardStyleSection.js +4 -4
- package/src/View/Wizard/CollapsibleWizardCard.d.ts +3 -1
- package/src/View/Wizard/CollapsibleWizardCard.js +17 -9
- package/src/agGrid/AdaptableAgGrid.d.ts +4 -4
- package/src/agGrid/AdaptableAgGrid.js +2 -0
- package/src/agGrid/AgGridColumnAdapter.d.ts +1 -1
- package/src/agGrid/AgGridColumnAdapter.js +4 -4
- package/src/components/ColorField/index.d.ts +14 -0
- package/src/components/ColorField/index.js +6 -0
- package/src/components/aql/QueryBuilder/QueryBuilderInputs.js +1 -1
- package/src/env.js +2 -2
- package/src/layout-manager/src/normalizeLayoutModel.d.ts +1 -1
- package/src/layout-manager/src/simplifyLayoutModel.d.ts +1 -1
- package/src/migration/AdaptableUpgradeHelper.d.ts +7 -2
- package/src/migration/VersionUpgrade17.js +13 -8
- package/src/migration/VersionUpgrade24.d.ts +9 -0
- package/src/migration/VersionUpgrade24.js +27 -0
- package/src/setupDevTools.js +605 -112
- package/src/types.d.ts +1 -1
- package/tsconfig.esm.tsbuildinfo +1 -1
- package/vendor/components/Button/index.d.ts +1 -1
- package/vendor/components/Button/index.d.ts.map +1 -1
- package/vendor/components/Button/index.js.map +1 -1
- package/vendor/components/CheckBox/index.d.ts +1 -1
- package/vendor/components/CheckBox/index.d.ts.map +1 -1
- package/vendor/components/CheckBox/index.js.map +1 -1
- package/vendor/components/ColorField/index.d.ts +43 -0
- package/vendor/components/ColorField/index.d.ts.map +1 -0
- package/vendor/components/ColorField/index.js +81 -0
- package/vendor/components/ColorField/index.js.map +1 -0
- package/vendor/components/ColorPicker/colorPickerTab.d.ts +4 -0
- package/vendor/components/ColorPicker/colorPickerTab.d.ts.map +1 -0
- package/vendor/components/ColorPicker/colorPickerTab.js +28 -0
- package/vendor/components/ColorPicker/colorPickerTab.js.map +1 -0
- package/vendor/components/ColorPicker/index.d.ts +59 -0
- package/vendor/components/ColorPicker/index.d.ts.map +1 -0
- package/vendor/components/ColorPicker/index.js +204 -0
- package/vendor/components/ColorPicker/index.js.map +1 -0
- package/vendor/components/ColorPicker/themeColors.d.ts +53 -0
- package/vendor/components/ColorPicker/themeColors.d.ts.map +1 -0
- package/vendor/components/ColorPicker/themeColors.js +110 -0
- package/vendor/components/ColorPicker/themeColors.js.map +1 -0
- package/vendor/components/Combobox/VirtualizedList.d.ts +1 -1
- package/vendor/components/Combobox/VirtualizedList.d.ts.map +1 -1
- package/vendor/components/Combobox/VirtualizedList.js.map +1 -1
- package/vendor/components/Combobox/index.d.ts +1 -1
- package/vendor/components/Combobox/index.d.ts.map +1 -1
- package/vendor/components/Combobox/index.js.map +1 -1
- package/vendor/components/NumberInput/index.d.ts +51 -0
- package/vendor/components/NumberInput/index.d.ts.map +1 -0
- package/vendor/components/NumberInput/index.js +82 -0
- package/vendor/components/NumberInput/index.js.map +1 -0
- package/vendor/components/index.css +280 -24
- package/vendor/components/index.d.ts +6 -0
- package/vendor/components/index.d.ts.map +1 -1
- package/vendor/components/index.js +3 -0
- package/vendor/components/index.js.map +1 -1
- package/vendor/components/ui/combobox.d.ts.map +1 -1
- package/vendor/components/ui/combobox.js +1 -1
- package/vendor/components/ui/combobox.js.map +1 -1
- package/vendor/components/ui/input-group.d.ts.map +1 -1
- package/vendor/components/ui/input-group.js +5 -4
- package/vendor/components/ui/input-group.js.map +1 -1
- package/src/components/ColorPicker/ColorPicker.d.ts +0 -12
- package/src/components/ColorPicker/ColorPicker.js +0 -48
- package/src/components/ColorPicker/OptionalColorPicker.d.ts +0 -12
- package/src/components/ColorPicker/OptionalColorPicker.js +0 -13
- package/src/components/ColorPicker/index.d.ts +0 -2
- package/src/components/ColorPicker/index.js +0 -2
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Button as UIButton } from '../ui/button';
|
|
3
|
-
import { TooltipProps } from '../Tooltip';
|
|
3
|
+
import { type TooltipProps } from '../Tooltip';
|
|
4
4
|
export type ButtonProps = React.ComponentProps<typeof UIButton> & {
|
|
5
5
|
/**
|
|
6
6
|
* Tooltip shown on hover/focus, rendered with the shared `Tooltip`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAW,YAAY,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAExD,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,GAAG;IAChE;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IACnC,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;CACtC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,MAAM,oGAkBjB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Button/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Button/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,EAAqB,MAAM,YAAY,CAAC;AAYxD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAiC,SAAS,MAAM,CACpF,EAAE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAChD,GAAG;IAEH,MAAM,SAAS,GACb,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAE7E,MAAM,MAAM,GAAG,KAAC,QAAQ,IAAC,GAAG,EAAE,GAAG,KAAM,KAAK,gBAAc,SAAS,GAAI,CAAC;IAExE,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,OAAO,CACL,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,YAC5D,MAAM,GACC,CACX,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { ReactNode, SyntheticEvent } from 'react';
|
|
2
|
+
import { type ReactNode, type SyntheticEvent } from 'react';
|
|
3
3
|
type HtmlDivProps = Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'checked' | 'children' | 'onChange' | 'ref' | 'value'>;
|
|
4
4
|
export interface CheckBoxSharedProps extends HtmlDivProps {
|
|
5
5
|
disabled?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/CheckBox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,cAAc,EAAoB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/CheckBox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,cAAc,EAAoB,MAAM,OAAO,CAAC;AAK9E,KAAK,YAAY,GAAG,IAAI,CACtB,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAC/B,IAAI,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,KAAK,GAAG,OAAO,CAC7D,CAAC;AAEF,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACnC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;;OAIG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,SAAS,CAAC;CAC/B;AAED,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB;IAC9D,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CAC9D;AAED,MAAM,WAAW,qBAAsB,SAAQ,mBAAmB;IAChE,QAAQ,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,eAAe,EAAE,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CAChF;AAED,oGAAoG;AACpG,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,qBAAqB,CAAC;AAExE;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAEnC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAErC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA+BF,iBAAS,QAAQ,CAAC,KAAK,EAAE,mBAAmB,GAAG,KAAK,CAAC,YAAY,CAAC;AAClE,iBAAS,QAAQ,CAAC,KAAK,EAAE,qBAAqB,GAAG,KAAK,CAAC,YAAY,CAAC;AA2IpE,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,sBAetD,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/CheckBox/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/CheckBox/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
import { type ColorPickerTab } from '../ColorPicker';
|
|
3
|
+
export type ColorFieldProps = {
|
|
4
|
+
/**
|
|
5
|
+
* CSS colour — a theme token as `var(--ab-color-…)` or a custom hex;
|
|
6
|
+
* `undefined` means "not set" (the cell keeps its default).
|
|
7
|
+
*/
|
|
8
|
+
value: string | undefined;
|
|
9
|
+
onChange: (value: string | undefined) => void;
|
|
10
|
+
/** Whether the colour can go back to "not set"; default `true`. */
|
|
11
|
+
clearable?: boolean;
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
/** Where the precise picker starts while nothing is set (a hex or a theme token). */
|
|
14
|
+
defaultColor?: string;
|
|
15
|
+
/** Whether a custom colour can have opacity; default `true`. */
|
|
16
|
+
includeAlpha?: boolean;
|
|
17
|
+
/** Default `'Precise'`. */
|
|
18
|
+
preciseTabLabel?: ReactNode;
|
|
19
|
+
/** Default `'Palette'`. */
|
|
20
|
+
colorsTabLabel?: ReactNode;
|
|
21
|
+
/** The tab the picker opens on; see `ColorPickerProps.defaultTab`. */
|
|
22
|
+
defaultTab?: ColorPickerTab;
|
|
23
|
+
/** The picker tab shown, for a controlled picker; see `ColorPickerProps.tab`. */
|
|
24
|
+
tab?: ColorPickerTab;
|
|
25
|
+
/** When the user switches picker tabs. */
|
|
26
|
+
onTabChange?: (tab: ColorPickerTab) => void;
|
|
27
|
+
/** Mount node for the picker popover; the overlay host's by default. */
|
|
28
|
+
container?: HTMLElement | null;
|
|
29
|
+
/** Tooltip on the swatch button. */
|
|
30
|
+
title?: string;
|
|
31
|
+
id?: string;
|
|
32
|
+
className?: string;
|
|
33
|
+
'data-name': string;
|
|
34
|
+
};
|
|
35
|
+
/**
|
|
36
|
+
* The colour input: a swatch that opens the {@link ColorPicker} — the
|
|
37
|
+
* Adaptable theme colours (stored as `var(--ab-color-…)` so they follow the
|
|
38
|
+
* theme) or a precise colour — with a clear button so a colour can go back to
|
|
39
|
+
* "not set" instead of being stuck on the last pick. Unset shows a
|
|
40
|
+
* transparency checkerboard rather than a fake grey.
|
|
41
|
+
*/
|
|
42
|
+
export declare function ColorField(props: ColorFieldProps): import("react").JSX.Element;
|
|
43
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ColorField/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAIpE,OAAO,EAGL,KAAK,cAAc,EAGpB,MAAM,gBAAgB,CAAC;AAIxB,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC9C,mEAAmE;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gEAAgE;IAChE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,2BAA2B;IAC3B,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,2BAA2B;IAC3B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,sEAAsE;IACtE,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,iFAAiF;IACjF,GAAG,CAAC,EAAE,cAAc,CAAC;IACrB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,IAAI,CAAC;IAC5C,wEAAwE;IACxE,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAwEF;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,+BAwFhD"}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useRef, useState } from 'react';
|
|
3
|
+
import { X } from 'lucide-react';
|
|
4
|
+
import { Button } from '../Button';
|
|
5
|
+
import { CHECKERBOARD, ColorPicker, describeColor, HEX_COLOR, } from '../ColorPicker';
|
|
6
|
+
import { cn } from '../lib/utils';
|
|
7
|
+
import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
|
|
8
|
+
/**
|
|
9
|
+
* Dragging in the precise picker fires a change for every pixel. Committing
|
|
10
|
+
* each one restyles the grid (and persists state) at 60 Hz, which is what
|
|
11
|
+
* makes the swatch lag behind the cursor. Instead the field shows its own
|
|
12
|
+
* draft immediately and hands the latest colour to the host at most once per
|
|
13
|
+
* `COMMIT_INTERVAL`, plus once more when it unmounts mid-drag.
|
|
14
|
+
*/
|
|
15
|
+
const COMMIT_INTERVAL = 100;
|
|
16
|
+
function useDraftColor(value, onChange) {
|
|
17
|
+
const [draft, setDraft] = useState(value);
|
|
18
|
+
const pending = useRef(null);
|
|
19
|
+
const timer = useRef(null);
|
|
20
|
+
const latestOnChange = useRef(onChange);
|
|
21
|
+
latestOnChange.current = onChange;
|
|
22
|
+
const flush = () => {
|
|
23
|
+
timer.current = null;
|
|
24
|
+
if (pending.current) {
|
|
25
|
+
const { value: next } = pending.current;
|
|
26
|
+
pending.current = null;
|
|
27
|
+
latestOnChange.current(next);
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
const cancel = () => {
|
|
31
|
+
if (timer.current) {
|
|
32
|
+
clearTimeout(timer.current);
|
|
33
|
+
timer.current = null;
|
|
34
|
+
}
|
|
35
|
+
pending.current = null;
|
|
36
|
+
};
|
|
37
|
+
// Follow the host (clear button, undo, another editor) — but not while a
|
|
38
|
+
// newer draft is still waiting to be committed.
|
|
39
|
+
useEffect(() => {
|
|
40
|
+
if (!pending.current) {
|
|
41
|
+
setDraft(value);
|
|
42
|
+
}
|
|
43
|
+
}, [value]);
|
|
44
|
+
useEffect(() => () => {
|
|
45
|
+
if (timer.current) {
|
|
46
|
+
clearTimeout(timer.current);
|
|
47
|
+
flush();
|
|
48
|
+
}
|
|
49
|
+
}, []);
|
|
50
|
+
/** Continuous input: shown now, committed on the interval. */
|
|
51
|
+
const setColor = (next) => {
|
|
52
|
+
setDraft(next);
|
|
53
|
+
pending.current = { value: next };
|
|
54
|
+
if (timer.current === null) {
|
|
55
|
+
timer.current = setTimeout(flush, COMMIT_INTERVAL);
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
/** Discrete choice (a swatch, a typed hex, clear): committed right away. */
|
|
59
|
+
const commit = (next) => {
|
|
60
|
+
cancel();
|
|
61
|
+
setDraft(next);
|
|
62
|
+
latestOnChange.current(next);
|
|
63
|
+
};
|
|
64
|
+
return { draft, setColor, commit };
|
|
65
|
+
}
|
|
66
|
+
/**
|
|
67
|
+
* The colour input: a swatch that opens the {@link ColorPicker} — the
|
|
68
|
+
* Adaptable theme colours (stored as `var(--ab-color-…)` so they follow the
|
|
69
|
+
* theme) or a precise colour — with a clear button so a colour can go back to
|
|
70
|
+
* "not set" instead of being stuck on the last pick. Unset shows a
|
|
71
|
+
* transparency checkerboard rather than a fake grey.
|
|
72
|
+
*/
|
|
73
|
+
export function ColorField(props) {
|
|
74
|
+
const { clearable = true, disabled = false } = props;
|
|
75
|
+
const dataName = props['data-name'];
|
|
76
|
+
const { draft: value, setColor, commit } = useDraftColor(props.value, props.onChange);
|
|
77
|
+
const [open, setOpen] = useState(false);
|
|
78
|
+
const isCustom = !!value && HEX_COLOR.test(value);
|
|
79
|
+
return (_jsxs("div", { className: cn('twa:flex twa:h-input twa:min-w-0 twa:items-center twa:gap-1.5', disabled && 'twa:opacity-50', props.className), children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { id: props.id, title: props.title, disabled: disabled, "data-name": dataName, "data-value": value, "aria-label": value ? `Colour: ${describeColor(value)}` : 'Colour: not set', className: cn('twa:relative twa:block twa:h-input twa:w-12 twa:shrink-0 twa:cursor-pointer twa:overflow-hidden twa:rounded-md twa:border twa:border-input twa:p-0', 'twa:focus-visible:outline-none twa:focus-visible:ring-2 twa:focus-visible:ring-ring/50', 'twa:disabled:cursor-not-allowed'), children: _jsx("span", { "data-name": `${dataName}-swatch`, "data-value": value, style: value ? { backgroundColor: value } : CHECKERBOARD, className: "twa:absolute twa:inset-0" }) }), _jsx(PopoverContent, { align: "start", container: props.container, "data-name": `${dataName}-popover`, className: "twa:w-[300px] twa:p-3", children: _jsx(ColorPicker, { "data-name": dataName, value: value, onInput: setColor, onCommit: commit, onSwatchPicked: () => setOpen(false), defaultColor: props.defaultColor, includeAlpha: props.includeAlpha, preciseTabLabel: props.preciseTabLabel, colorsTabLabel: props.colorsTabLabel, defaultTab: props.defaultTab, tab: props.tab, onTabChange: props.onTabChange }) })] }), value ? (_jsxs(_Fragment, { children: [_jsx("span", { title: value, "data-name": `${dataName}-label`, className: cn('twa:min-w-0 twa:truncate twa:text-xs twa:text-muted-foreground', isCustom && 'twa:font-mono'), children: describeColor(value) }), clearable ? (_jsx(Button, { variant: "ghost", size: "icon-xs", disabled: disabled, "data-name": `${dataName}-clear`, tooltip: "Clear", onClick: () => commit(undefined), children: _jsx(X, { "aria-hidden": true }) })) : null] })) : (_jsx("span", { className: "twa:text-xs twa:text-muted-foreground", children: "Not set" }))] }));
|
|
80
|
+
}
|
|
81
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ColorField/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"colorPickerTab.d.ts","sourceRoot":"","sources":["../../src/ColorPicker/colorPickerTab.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,SAAS,CAAC;AAalD,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,cAAc,QAMpD;AASD,wBAAgB,iBAAiB,IAAI,CAAC,cAAc,GAAG,IAAI,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,IAAI,CAAC,CAG1F"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { useSyncExternalStore } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* The tab the user last picked, shared by every colour picker on the page (not
|
|
4
|
+
* kept across reloads): a user who works from the palette should not have to
|
|
5
|
+
* switch to them in every field. `null` until the user picks one, so the
|
|
6
|
+
* picker's own default applies.
|
|
7
|
+
*/
|
|
8
|
+
let currentTab = null;
|
|
9
|
+
const listeners = new Set();
|
|
10
|
+
const readTab = () => currentTab;
|
|
11
|
+
export function setColorPickerTab(tab) {
|
|
12
|
+
if (tab === currentTab) {
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
currentTab = tab;
|
|
16
|
+
listeners.forEach((listener) => listener());
|
|
17
|
+
}
|
|
18
|
+
function subscribe(listener) {
|
|
19
|
+
listeners.add(listener);
|
|
20
|
+
return () => {
|
|
21
|
+
listeners.delete(listener);
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
export function useColorPickerTab() {
|
|
25
|
+
const tab = useSyncExternalStore(subscribe, readTab, readTab);
|
|
26
|
+
return [tab, setColorPickerTab];
|
|
27
|
+
}
|
|
28
|
+
//# sourceMappingURL=colorPickerTab.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"colorPickerTab.js","sourceRoot":"","sources":["../../src/ColorPicker/colorPickerTab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAI7C;;;;;GAKG;AACH,IAAI,UAAU,GAA0B,IAAI,CAAC;AAC7C,MAAM,SAAS,GAAG,IAAI,GAAG,EAAc,CAAC;AAExC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC;AAEjC,MAAM,UAAU,iBAAiB,CAAC,GAAmB;IACnD,IAAI,GAAG,KAAK,UAAU,EAAE,CAAC;QACvB,OAAO;IACT,CAAC;IACD,UAAU,GAAG,GAAG,CAAC;IACjB,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC;AAC9C,CAAC;AAED,SAAS,SAAS,CAAC,QAAoB;IACrC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACxB,OAAO,GAAG,EAAE;QACV,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC7B,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,iBAAiB;IAC/B,MAAM,GAAG,GAAG,oBAAoB,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;IAC9D,OAAO,CAAC,GAAG,EAAE,iBAAiB,CAAC,CAAC;AAClC,CAAC"}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { type CSSProperties, type ReactNode } from 'react';
|
|
2
|
+
import { type ColorPickerTab } from './colorPickerTab';
|
|
3
|
+
export { setColorPickerTab, useColorPickerTab } from './colorPickerTab';
|
|
4
|
+
export type { ColorPickerTab } from './colorPickerTab';
|
|
5
|
+
export { ALLOWED_COLORS_VAR, describeColor, PALETTE_COUNT_VAR, parseTabs, readAllowedColors, readPaletteColors, readTabs, TABS_VAR, THEME_COLOR_GROUP, } from './themeColors';
|
|
6
|
+
export type { AllowedColors, ThemeColor, ThemeColorGroup } from './themeColors';
|
|
7
|
+
export type ColorPickerProps = {
|
|
8
|
+
/** A theme token as `var(--ab-color-…)`, a hex, or nothing. */
|
|
9
|
+
value: string | undefined;
|
|
10
|
+
/** Continuous input (dragging in the precise picker) — the host may throttle it. */
|
|
11
|
+
onInput: (value: string) => void;
|
|
12
|
+
/** A discrete choice (a swatch, a typed hex, the eyedropper) — commit right away. */
|
|
13
|
+
onCommit: (value: string) => void;
|
|
14
|
+
/** After a swatch is picked — the one choice that ends the interaction. */
|
|
15
|
+
onSwatchPicked?: () => void;
|
|
16
|
+
/** A colour left out of the swatches, e.g. `var(--ab-color-x)` while editing `--ab-color-x`. */
|
|
17
|
+
excludeColor?: string;
|
|
18
|
+
/** Where the precise picker starts while nothing is set (a hex or a theme token); mid-grey by default. */
|
|
19
|
+
defaultColor?: string;
|
|
20
|
+
/** Whether a custom colour can have opacity; default `true`. */
|
|
21
|
+
includeAlpha?: boolean;
|
|
22
|
+
/** Default `'Precise'`. */
|
|
23
|
+
preciseTabLabel?: ReactNode;
|
|
24
|
+
/** Default `'Palette'`. */
|
|
25
|
+
colorsTabLabel?: ReactNode;
|
|
26
|
+
/**
|
|
27
|
+
* The tab to open on; wins over the tab the user last picked and the first
|
|
28
|
+
* tab in `--ab-cmp-color-picker__tabs`. Ignored when that tab is not shown.
|
|
29
|
+
*/
|
|
30
|
+
defaultTab?: ColorPickerTab;
|
|
31
|
+
/**
|
|
32
|
+
* The tab shown, for a controlled picker; wins over `defaultTab`. Ignored
|
|
33
|
+
* when that tab is not shown.
|
|
34
|
+
*/
|
|
35
|
+
tab?: ColorPickerTab;
|
|
36
|
+
/** When the user switches tabs. */
|
|
37
|
+
onTabChange?: (tab: ColorPickerTab) => void;
|
|
38
|
+
'data-name': string;
|
|
39
|
+
};
|
|
40
|
+
/** `#rrggbb`, or `#rrggbbaa` when the colour has opacity. */
|
|
41
|
+
export declare const HEX_COLOR: RegExp;
|
|
42
|
+
/** Transparency checkerboard — the "no colour" preview. */
|
|
43
|
+
export declare const CHECKERBOARD: CSSProperties;
|
|
44
|
+
/**
|
|
45
|
+
* The colour picker's popover body: a palette tab with the Adaptable theme
|
|
46
|
+
* colours and a Precise tab with a free picker, over a footer shared by both —
|
|
47
|
+
* the current colour, an eyedropper where the browser has one, and a hex
|
|
48
|
+
* field.
|
|
49
|
+
*
|
|
50
|
+
* `--ab-cmp-color-picker__tabs` sets which tabs show and in what order. The
|
|
51
|
+
* picker shows `tab` when controlled; otherwise it opens on `defaultTab`, else
|
|
52
|
+
* on the tab the user last picked in any picker on the page (see
|
|
53
|
+
* `colorPickerTab.ts`), else on the first listed tab.
|
|
54
|
+
*
|
|
55
|
+
* `--ab-cmp-color-picker__allowed-colors: predefined` drops the Precise tab,
|
|
56
|
+
* so no custom colour can be picked; `palette` also drops the theme colours.
|
|
57
|
+
*/
|
|
58
|
+
export declare function ColorPicker(props: ColorPickerProps): import("react").JSX.Element;
|
|
59
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ColorPicker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAUf,OAAO,EAAqB,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAY1E,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACxE,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EACL,kBAAkB,EAClB,aAAa,EACb,iBAAiB,EACjB,SAAS,EACT,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,+DAA+D;IAC/D,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,oFAAoF;IACpF,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,qFAAqF;IACrF,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,2EAA2E;IAC3E,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,gGAAgG;IAChG,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0GAA0G;IAC1G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gEAAgE;IAChE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,2BAA2B;IAC3B,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,2BAA2B;IAC3B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B;;;OAGG;IACH,GAAG,CAAC,EAAE,cAAc,CAAC;IACrB,mCAAmC;IACnC,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,IAAI,CAAC;IAC5C,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,6DAA6D;AAC7D,eAAO,MAAM,SAAS,QAAkC,CAAC;AAazD,2DAA2D;AAC3D,eAAO,MAAM,YAAY,EAAE,aAI1B,CAAC;AA2EF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAgOlD"}
|
|
@@ -0,0 +1,204 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
|
|
3
|
+
import { Check, Grid2x2, Pipette, SlidersHorizontal } from 'lucide-react';
|
|
4
|
+
import { HexAlphaColorPicker, HexColorPicker } from 'react-colorful';
|
|
5
|
+
import { Button } from '../Button';
|
|
6
|
+
import { Tooltip } from '../Tooltip';
|
|
7
|
+
import { cn } from '../lib/utils';
|
|
8
|
+
import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from '../ui/input-group';
|
|
9
|
+
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
|
|
10
|
+
import { useColorPickerTab } from './colorPickerTab';
|
|
11
|
+
import { describeColor, readAllowedColors, readPaletteColors, readTabs, THEME_COLOR_GROUP, } from './themeColors';
|
|
12
|
+
export { setColorPickerTab, useColorPickerTab } from './colorPickerTab';
|
|
13
|
+
export { ALLOWED_COLORS_VAR, describeColor, PALETTE_COUNT_VAR, parseTabs, readAllowedColors, readPaletteColors, readTabs, TABS_VAR, THEME_COLOR_GROUP, } from './themeColors';
|
|
14
|
+
/** `#rrggbb`, or `#rrggbbaa` when the colour has opacity. */
|
|
15
|
+
export const HEX_COLOR = /^#([0-9a-f]{6}|[0-9a-f]{8})$/i;
|
|
16
|
+
const HEX_DIGITS = /^([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
|
|
17
|
+
const OPAQUE_HEX_DIGITS = /^([0-9a-f]{3}|[0-9a-f]{6})$/i;
|
|
18
|
+
/**
|
|
19
|
+
* Both tabs' content is this tall, so switching tabs never resizes the
|
|
20
|
+
* popover. `flex-none` undoes the panel's default `flex-1`, which in the
|
|
21
|
+
* column-flex root would size it to its content instead.
|
|
22
|
+
*/
|
|
23
|
+
const CONTENT_HEIGHT = 'twa:h-52 twa:flex-none twa:p-1';
|
|
24
|
+
const PICKER_START = '#808080';
|
|
25
|
+
/** Transparency checkerboard — the "no colour" preview. */
|
|
26
|
+
export const CHECKERBOARD = {
|
|
27
|
+
backgroundImage: 'conic-gradient(rgba(128,128,128,0.35) 25%, transparent 0 50%, rgba(128,128,128,0.35) 0 75%, transparent 0)',
|
|
28
|
+
backgroundSize: '8px 8px',
|
|
29
|
+
};
|
|
30
|
+
/** `#abc` → `#aabbcc`; anything else lower-cased with the `#` ensured. */
|
|
31
|
+
function normalizeHex(digits) {
|
|
32
|
+
const d = digits.toLowerCase();
|
|
33
|
+
return `#${d.length === 3 ? d.replace(/./g, (c) => c + c) : d}`;
|
|
34
|
+
}
|
|
35
|
+
const toHexByte = (n) => Math.round(n).toString(16).padStart(2, '0');
|
|
36
|
+
/** A computed `rgb(…)` / `rgba(…)` as hex, with an alpha byte only when translucent. */
|
|
37
|
+
function rgbToHex(rgb) {
|
|
38
|
+
const match = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/.exec(rgb);
|
|
39
|
+
if (!match) {
|
|
40
|
+
return undefined;
|
|
41
|
+
}
|
|
42
|
+
const [r, g, b] = match.slice(1, 4).map(Number);
|
|
43
|
+
const alpha = match[4] === undefined ? 1 : Number(match[4]);
|
|
44
|
+
return `#${toHexByte(r)}${toHexByte(g)}${toHexByte(b)}${alpha < 1 ? toHexByte(alpha * 255) : ''}`;
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* The hex behind the current value: the value itself when it is one, or what
|
|
48
|
+
* a theme token computes to on the preview element — so the precise picker
|
|
49
|
+
* and the hex field start from the colour the user is looking at.
|
|
50
|
+
*/
|
|
51
|
+
function useResolvedHex(value, previewRef) {
|
|
52
|
+
const [resolved, setResolved] = useState(undefined);
|
|
53
|
+
const isHex = !!value && HEX_COLOR.test(value);
|
|
54
|
+
useLayoutEffect(() => {
|
|
55
|
+
if (isHex || !value || !previewRef.current) {
|
|
56
|
+
setResolved(undefined);
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
setResolved(rgbToHex(getComputedStyle(previewRef.current).backgroundColor));
|
|
60
|
+
}, [value, isHex, previewRef]);
|
|
61
|
+
return isHex ? value.toLowerCase() : resolved;
|
|
62
|
+
}
|
|
63
|
+
const eyeDropperSupported = () => typeof window !== 'undefined' && typeof window.EyeDropper === 'function';
|
|
64
|
+
/**
|
|
65
|
+
* The palette, the allowed colours and the tabs in effect where the picker
|
|
66
|
+
* renders, read from CSS once it is in the document (see `readPaletteColors`).
|
|
67
|
+
*/
|
|
68
|
+
function usePalette(elementRef) {
|
|
69
|
+
const [palette, setPalette] = useState({
|
|
70
|
+
colors: [],
|
|
71
|
+
allowed: 'any',
|
|
72
|
+
tabs: ['precise', 'colors'],
|
|
73
|
+
});
|
|
74
|
+
useLayoutEffect(() => {
|
|
75
|
+
if (elementRef.current) {
|
|
76
|
+
setPalette({
|
|
77
|
+
colors: readPaletteColors(elementRef.current),
|
|
78
|
+
allowed: readAllowedColors(elementRef.current),
|
|
79
|
+
tabs: readTabs(elementRef.current),
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
}, [elementRef]);
|
|
83
|
+
return palette;
|
|
84
|
+
}
|
|
85
|
+
/**
|
|
86
|
+
* The colour picker's popover body: a palette tab with the Adaptable theme
|
|
87
|
+
* colours and a Precise tab with a free picker, over a footer shared by both —
|
|
88
|
+
* the current colour, an eyedropper where the browser has one, and a hex
|
|
89
|
+
* field.
|
|
90
|
+
*
|
|
91
|
+
* `--ab-cmp-color-picker__tabs` sets which tabs show and in what order. The
|
|
92
|
+
* picker shows `tab` when controlled; otherwise it opens on `defaultTab`, else
|
|
93
|
+
* on the tab the user last picked in any picker on the page (see
|
|
94
|
+
* `colorPickerTab.ts`), else on the first listed tab.
|
|
95
|
+
*
|
|
96
|
+
* `--ab-cmp-color-picker__allowed-colors: predefined` drops the Precise tab,
|
|
97
|
+
* so no custom colour can be picked; `palette` also drops the theme colours.
|
|
98
|
+
*/
|
|
99
|
+
export function ColorPicker(props) {
|
|
100
|
+
const { value, onInput, onCommit, excludeColor, defaultColor = PICKER_START, includeAlpha = true, preciseTabLabel = 'Precise', colorsTabLabel = 'Palette', defaultTab, onTabChange, } = props;
|
|
101
|
+
const dataName = props['data-name'];
|
|
102
|
+
const [lastPickedTab, setLastPickedTab] = useColorPickerTab();
|
|
103
|
+
// so a picker with `defaultTab` can still switch tabs while it is open
|
|
104
|
+
const [ownTab, setOwnTab] = useState(null);
|
|
105
|
+
const previewRef = useRef(null);
|
|
106
|
+
const resolvedHex = useResolvedHex(value, previewRef);
|
|
107
|
+
const hex = includeAlpha ? resolvedHex : resolvedHex?.slice(0, 7);
|
|
108
|
+
const palette = usePalette(previewRef);
|
|
109
|
+
const tab = [props.tab, ownTab, defaultTab, lastPickedTab].find((t) => t != null && palette.tabs.includes(t)) ?? palette.tabs[0];
|
|
110
|
+
const defaultRef = useRef(null);
|
|
111
|
+
const startHex = useResolvedHex(defaultColor, defaultRef) ?? PICKER_START;
|
|
112
|
+
const groups = useMemo(() => {
|
|
113
|
+
const paletteGroup = { id: 'palette', label: 'Palette', colors: palette.colors };
|
|
114
|
+
const all = palette.allowed === 'palette' ? [paletteGroup] : [THEME_COLOR_GROUP, paletteGroup];
|
|
115
|
+
return all
|
|
116
|
+
.map((group) => ({
|
|
117
|
+
...group,
|
|
118
|
+
colors: group.colors.filter((color) => color.value !== excludeColor),
|
|
119
|
+
}))
|
|
120
|
+
.filter((group) => group.colors.length > 0);
|
|
121
|
+
}, [palette, excludeColor]);
|
|
122
|
+
// the hex field is free text until it parses; it snaps back to the colour on blur
|
|
123
|
+
const [hexDraft, setHexDraft] = useState(null);
|
|
124
|
+
useEffect(() => setHexDraft(null), [value]);
|
|
125
|
+
const hexText = hexDraft ?? (hex ? hex.slice(1) : '');
|
|
126
|
+
// six (or eight, with opacity) digits commit as they are typed; a three-digit
|
|
127
|
+
// shorthand only on Enter / blur, or it would expand under the user's cursor
|
|
128
|
+
// at the third digit
|
|
129
|
+
const commitHexDraft = (text, options) => {
|
|
130
|
+
const digits = text.trim().replace(/^#/, '');
|
|
131
|
+
const valid = includeAlpha ? HEX_DIGITS : OPAQUE_HEX_DIGITS;
|
|
132
|
+
if (valid.test(digits) && (options.allowShort || digits.length !== 3)) {
|
|
133
|
+
const next = normalizeHex(digits);
|
|
134
|
+
if (next !== hex) {
|
|
135
|
+
onCommit(next);
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
};
|
|
139
|
+
const [canPickFromScreen] = useState(eyeDropperSupported);
|
|
140
|
+
const pickFromScreen = async () => {
|
|
141
|
+
const EyeDropper = window.EyeDropper;
|
|
142
|
+
if (!EyeDropper) {
|
|
143
|
+
return;
|
|
144
|
+
}
|
|
145
|
+
try {
|
|
146
|
+
const { sRGBHex } = await new EyeDropper().open();
|
|
147
|
+
onCommit(sRGBHex.toLowerCase());
|
|
148
|
+
}
|
|
149
|
+
catch {
|
|
150
|
+
// cancelled with Escape
|
|
151
|
+
}
|
|
152
|
+
};
|
|
153
|
+
const swatches = (_jsx(SwatchGroups, { groups: groups, value: value, "data-name": dataName, onPick: (color) => {
|
|
154
|
+
onCommit(color);
|
|
155
|
+
props.onSwatchPicked?.();
|
|
156
|
+
} }));
|
|
157
|
+
const preview = (_jsx(Tooltip, { label: value ? describeColor(value) : 'Not set', children: _jsx("span", { ref: previewRef, "data-name": `${dataName}-preview`, "data-value": value, style: value ? { backgroundColor: value } : CHECKERBOARD, className: "twa:block twa:size-9 twa:shrink-0 twa:rounded-full twa:border twa:border-foreground/10" }) }));
|
|
158
|
+
if (palette.allowed !== 'any') {
|
|
159
|
+
return (_jsxs("div", { "data-name": `${dataName}-picker`, className: "twa:flex twa:flex-col twa:gap-3", children: [_jsx("div", { className: cn(CONTENT_HEIGHT, SWATCHES_LAYOUT), children: swatches }), _jsxs("div", { className: FOOTER_LAYOUT, children: [preview, _jsx("span", { className: "twa:min-w-0 twa:truncate twa:text-xs twa:text-muted-foreground", children: value ? describeColor(value) : 'Not set' })] })] }));
|
|
160
|
+
}
|
|
161
|
+
const PrecisePicker = includeAlpha ? HexAlphaColorPicker : HexColorPicker;
|
|
162
|
+
const triggers = {
|
|
163
|
+
precise: (_jsxs(TabsTrigger, { value: "precise", "data-name": `${dataName}-tab-precise`, children: [_jsx(SlidersHorizontal, { "aria-hidden": true }), preciseTabLabel] }, "precise")),
|
|
164
|
+
colors: (_jsxs(TabsTrigger, { value: "colors", "data-name": `${dataName}-tab-colors`, children: [_jsx(Grid2x2, { "aria-hidden": true }), colorsTabLabel] }, "colors")),
|
|
165
|
+
};
|
|
166
|
+
const contents = {
|
|
167
|
+
precise: (_jsx(TabsContent, { value: "precise", className: CONTENT_HEIGHT, children: _jsx(PrecisePicker, { color: hex ?? startHex, onChange: onInput, "data-name": `${dataName}-precise`,
|
|
168
|
+
// react-colorful injects unlayered styles, which beat our layered
|
|
169
|
+
// utilities whatever the specificity — hence `!`. Its parts are
|
|
170
|
+
// addressed by position (saturation area, then the hue and alpha
|
|
171
|
+
// strips) and by the `…__pointer` class suffix, so the selectors
|
|
172
|
+
// survive minified class-name scanning.
|
|
173
|
+
className: cn('twa:w-full! twa:h-full!', 'twa:*:first:rounded-md! twa:*:first:border-0!', 'twa:*:not-first:mt-2.5! twa:*:not-first:h-3! twa:*:not-first:rounded-full!', 'twa:**:[[class$=pointer]]:size-4! twa:**:[[class$=pointer]]:border-2!') }) }, "precise")),
|
|
174
|
+
// scrolls inside the same height as the precise tab, so the popover keeps its size
|
|
175
|
+
colors: (_jsx(TabsContent, { value: "colors", className: cn(CONTENT_HEIGHT, SWATCHES_LAYOUT), children: swatches }, "colors")),
|
|
176
|
+
};
|
|
177
|
+
return (_jsxs(Tabs, { value: tab, onValueChange: (next) => {
|
|
178
|
+
setOwnTab(next);
|
|
179
|
+
setLastPickedTab(next);
|
|
180
|
+
onTabChange?.(next);
|
|
181
|
+
}, "data-name": `${dataName}-picker`, className: "twa:gap-3", children: [palette.tabs.length > 1 ? (_jsx(TabsList, { className: "twa:grid twa:w-full twa:grid-cols-2", children: palette.tabs.map((id) => triggers[id]) })) : null, palette.tabs.map((id) => contents[id]), _jsxs("div", { className: FOOTER_LAYOUT, children: [preview, _jsx("span", { ref: defaultRef, hidden: true, style: { backgroundColor: defaultColor } }), canPickFromScreen ? (_jsx(Button, { variant: "outline", size: "icon-sm", "data-name": `${dataName}-eyedropper`, tooltip: "Pick a colour from the screen", onClick: pickFromScreen, className: "twa:shrink-0 twa:rounded-full", children: _jsx(Pipette, { "aria-hidden": true }) })) : null, _jsxs(InputGroup, { className: "twa:h-8 twa:min-h-8 twa:min-w-0 twa:flex-1", children: [_jsx(InputGroupAddon, { children: _jsx(InputGroupText, { className: "twa:font-mono", children: "#" }) }), _jsx(InputGroupInput, { "data-name": `${dataName}-hex`, "aria-label": "Hex colour", value: hexText, placeholder: hex ? undefined : '000000', spellCheck: false, autoComplete: "off", maxLength: includeAlpha ? 9 : 7, className: "twa:font-mono twa:text-xs", onChange: (event) => {
|
|
182
|
+
setHexDraft(event.target.value);
|
|
183
|
+
commitHexDraft(event.target.value, { allowShort: false });
|
|
184
|
+
}, onBlur: (event) => {
|
|
185
|
+
commitHexDraft(event.currentTarget.value, { allowShort: true });
|
|
186
|
+
setHexDraft(null);
|
|
187
|
+
}, onKeyDown: (event) => {
|
|
188
|
+
if (event.key === 'Enter') {
|
|
189
|
+
commitHexDraft(event.currentTarget.value, { allowShort: true });
|
|
190
|
+
setHexDraft(null);
|
|
191
|
+
}
|
|
192
|
+
} })] })] })] }));
|
|
193
|
+
}
|
|
194
|
+
const SWATCHES_LAYOUT = 'twa:flex twa:flex-col twa:gap-2.5 twa:overflow-y-auto twa:overscroll-contain twa:pr-1';
|
|
195
|
+
const FOOTER_LAYOUT = 'twa:flex twa:items-center twa:gap-2 twa:border-t twa:border-foreground/10 twa:pt-3';
|
|
196
|
+
function SwatchGroups(props) {
|
|
197
|
+
const { groups, value, onPick } = props;
|
|
198
|
+
const dataName = props['data-name'];
|
|
199
|
+
return groups.map((group) => (_jsxs("div", { className: "twa:flex twa:flex-col twa:gap-1", children: [_jsx("div", { className: "twa:text-xs twa:font-medium twa:text-muted-foreground", children: group.label }), _jsx("div", { role: "listbox", "aria-label": `${group.label} colours`, "data-name": `${dataName}-options`, "data-group": group.id, className: "twa:grid twa:grid-cols-8 twa:gap-1", children: group.colors.map((color) => {
|
|
200
|
+
const selected = color.value === value;
|
|
201
|
+
return (_jsx(Tooltip, { label: color.label, className: "twa:min-w-0", children: _jsx("button", { type: "button", role: "option", "aria-selected": selected, "aria-label": color.label, "data-name": `${dataName}-option`, "data-value": color.value, onClick: () => onPick(color.value), style: { backgroundColor: color.value }, className: cn('twa:flex twa:h-7 twa:w-full twa:items-center twa:justify-center twa:rounded-md twa:border twa:border-foreground/10 twa:transition-[box-shadow,transform]', 'twa:hover:scale-105 twa:hover:ring-2 twa:hover:ring-ring/40 twa:focus-visible:outline-none twa:focus-visible:ring-2 twa:focus-visible:ring-ring/50', selected && 'twa:ring-2 twa:ring-accent twa:ring-offset-1 twa:ring-offset-popover'), children: selected ? (_jsx(Check, { "aria-hidden": true, className: "twa:size-3.5 twa:text-white twa:drop-shadow-[0_0_1px_rgba(0,0,0,0.9)]" })) : null }) }, color.value));
|
|
202
|
+
}) })] }, group.id)));
|
|
203
|
+
}
|
|
204
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ColorPicker/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The colours the colour picker offers besides a custom one: the Adaptable
|
|
3
|
+
* theme tokens from `@adaptabletools/tokens` (`vars.css`). They are stored as
|
|
4
|
+
* `var(--ab-color-…)` so a styled cell, alert or dashboard bar follows the
|
|
5
|
+
* light / dark theme and any host overrides of those variables.
|
|
6
|
+
*/
|
|
7
|
+
import type { ColorPickerTab } from './colorPickerTab';
|
|
8
|
+
export type ThemeColor = {
|
|
9
|
+
/** The CSS value that gets stored, e.g. `var(--ab-color-success)`. */
|
|
10
|
+
value: string;
|
|
11
|
+
/** What the user sees for it. */
|
|
12
|
+
label: string;
|
|
13
|
+
};
|
|
14
|
+
export type ThemeColorGroup = {
|
|
15
|
+
id: 'theme' | 'palette';
|
|
16
|
+
label: string;
|
|
17
|
+
colors: ThemeColor[];
|
|
18
|
+
};
|
|
19
|
+
export declare const THEME_COLOR_GROUP: ThemeColorGroup;
|
|
20
|
+
export declare const PALETTE_COUNT_VAR = "--ab-cmp-color-picker__palette-count";
|
|
21
|
+
export declare const ALLOWED_COLORS_VAR = "--ab-cmp-color-picker__allowed-colors";
|
|
22
|
+
export declare const TABS_VAR = "--ab-cmp-color-picker__tabs";
|
|
23
|
+
/**
|
|
24
|
+
* - `any`: theme colours, palette and a custom colour (the Precise tab)
|
|
25
|
+
* - `predefined`: theme colours and palette only
|
|
26
|
+
* - `palette`: palette only
|
|
27
|
+
*/
|
|
28
|
+
export type AllowedColors = 'any' | 'predefined' | 'palette';
|
|
29
|
+
/**
|
|
30
|
+
* The palette colours in effect on `element`: `--ab-color-palette-1` upwards
|
|
31
|
+
* until one is not defined, capped by `--ab-cmp-color-picker__palette-count`
|
|
32
|
+
* when that is a positive integer.
|
|
33
|
+
*/
|
|
34
|
+
export declare function readPaletteColors(element: Element): ThemeColor[];
|
|
35
|
+
/** `--ab-cmp-color-picker__allowed-colors` on `element`; `any` when unset or unrecognised. */
|
|
36
|
+
export declare function readAllowedColors(element: Element): AllowedColors;
|
|
37
|
+
/**
|
|
38
|
+
* `--ab-cmp-color-picker__tabs` on `element`: the tabs to show, in order, the
|
|
39
|
+
* first being the default (e.g. `colors precise`; `colours` is also
|
|
40
|
+
* accepted). Unknown and repeated ids are dropped; `precise colors` when
|
|
41
|
+
* nothing valid is left.
|
|
42
|
+
*/
|
|
43
|
+
export declare function readTabs(element: Element): ColorPickerTab[];
|
|
44
|
+
/** A `--ab-cmp-color-picker__tabs` value as tab ids; see `readTabs`. */
|
|
45
|
+
export declare function parseTabs(value: string): ColorPickerTab[];
|
|
46
|
+
/**
|
|
47
|
+
* The picker's name for a stored colour: the token label for a theme colour
|
|
48
|
+
* (`var(--ab-color-success)` → "Success", `var(--ab-color-palette-3)` →
|
|
49
|
+
* "Palette 3"), a name derived from any other `--ab-color-*` token
|
|
50
|
+
* (`var(--ab-color-badge-foreground)` → "Badge text"), the value itself otherwise.
|
|
51
|
+
*/
|
|
52
|
+
export declare function describeColor(value: string): string;
|
|
53
|
+
//# sourceMappingURL=themeColors.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"themeColors.d.ts","sourceRoot":"","sources":["../../src/ColorPicker/themeColors.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD,MAAM,MAAM,UAAU,GAAG;IACvB,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,OAAO,GAAG,SAAS,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB,CAAC;AAyBF,eAAO,MAAM,iBAAiB,EAAE,eAI/B,CAAC;AAmBF,eAAO,MAAM,iBAAiB,yCAAyC,CAAC;AACxE,eAAO,MAAM,kBAAkB,0CAA0C,CAAC;AAC1E,eAAO,MAAM,QAAQ,gCAAgC,CAAC;AAUtD;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,YAAY,GAAG,SAAS,CAAC;AAE7D;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,OAAO,GAAG,UAAU,EAAE,CAYhE;AAED,8FAA8F;AAC9F,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,OAAO,GAAG,aAAa,CAGjE;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,cAAc,EAAE,CAE3D;AAED,wEAAwE;AACxE,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc,EAAE,CAIzD;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAWnD"}
|