@stack-spot/citric-react 0.22.0 → 0.24.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/citric.css +17 -4
- package/dist/components/Accordion.d.ts +34 -0
- package/dist/components/Accordion.d.ts.map +1 -1
- package/dist/components/Accordion.js +34 -0
- package/dist/components/Accordion.js.map +1 -1
- package/dist/components/Alert.d.ts +8 -0
- package/dist/components/Alert.d.ts.map +1 -1
- package/dist/components/Alert.js +8 -0
- package/dist/components/Alert.js.map +1 -1
- package/dist/components/AsyncContent.d.ts +18 -4
- package/dist/components/AsyncContent.d.ts.map +1 -1
- package/dist/components/AsyncContent.js +18 -4
- package/dist/components/AsyncContent.js.map +1 -1
- package/dist/components/Avatar.d.ts +9 -0
- package/dist/components/Avatar.d.ts.map +1 -1
- package/dist/components/Avatar.js +11 -1
- package/dist/components/Avatar.js.map +1 -1
- package/dist/components/AvatarGroup.d.ts +8 -0
- package/dist/components/AvatarGroup.d.ts.map +1 -1
- package/dist/components/AvatarGroup.js +8 -0
- package/dist/components/AvatarGroup.js.map +1 -1
- package/dist/components/Badge.d.ts +13 -2
- package/dist/components/Badge.d.ts.map +1 -1
- package/dist/components/Badge.js +14 -3
- package/dist/components/Badge.js.map +1 -1
- package/dist/components/Blockquote.d.ts +8 -0
- package/dist/components/Blockquote.d.ts.map +1 -1
- package/dist/components/Blockquote.js +8 -0
- package/dist/components/Blockquote.js.map +1 -1
- package/dist/components/Breadcrumb.d.ts +8 -0
- package/dist/components/Breadcrumb.d.ts.map +1 -1
- package/dist/components/Breadcrumb.js +10 -1
- package/dist/components/Breadcrumb.js.map +1 -1
- package/dist/components/Button.d.ts +11 -0
- package/dist/components/Button.d.ts.map +1 -1
- package/dist/components/Button.js +14 -2
- package/dist/components/Button.js.map +1 -1
- package/dist/components/Card.d.ts +15 -4
- package/dist/components/Card.d.ts.map +1 -1
- package/dist/components/Card.js +13 -1
- package/dist/components/Card.js.map +1 -1
- package/dist/components/Checkbox.d.ts +14 -0
- package/dist/components/Checkbox.d.ts.map +1 -1
- package/dist/components/Checkbox.js +14 -0
- package/dist/components/Checkbox.js.map +1 -1
- package/dist/components/CheckboxGroup.d.ts +22 -3
- package/dist/components/CheckboxGroup.d.ts.map +1 -1
- package/dist/components/CheckboxGroup.js +23 -3
- package/dist/components/CheckboxGroup.js.map +1 -1
- package/dist/components/Circle.d.ts +16 -0
- package/dist/components/Circle.d.ts.map +1 -1
- package/dist/components/Circle.js +8 -0
- package/dist/components/Circle.js.map +1 -1
- package/dist/components/CitricComponent.d.ts +14 -0
- package/dist/components/CitricComponent.d.ts.map +1 -1
- package/dist/components/CitricComponent.js +14 -0
- package/dist/components/CitricComponent.js.map +1 -1
- package/dist/components/Divider.d.ts +4 -1
- package/dist/components/Divider.d.ts.map +1 -1
- package/dist/components/Divider.js +4 -1
- package/dist/components/Divider.js.map +1 -1
- package/dist/components/ErrorBoundary.d.ts +13 -0
- package/dist/components/ErrorBoundary.d.ts.map +1 -1
- package/dist/components/ErrorBoundary.js +13 -0
- package/dist/components/ErrorBoundary.js.map +1 -1
- package/dist/components/ErrorMessage.js +1 -1
- package/dist/components/ErrorMessage.js.map +1 -1
- package/dist/components/FallbackBoundary.d.ts +12 -1
- package/dist/components/FallbackBoundary.d.ts.map +1 -1
- package/dist/components/FallbackBoundary.js +12 -1
- package/dist/components/FallbackBoundary.js.map +1 -1
- package/dist/components/Favorite.d.ts +12 -0
- package/dist/components/Favorite.d.ts.map +1 -1
- package/dist/components/Favorite.js +12 -0
- package/dist/components/Favorite.js.map +1 -1
- package/dist/components/FieldGroup.d.ts +13 -0
- package/dist/components/FieldGroup.d.ts.map +1 -1
- package/dist/components/FieldGroup.js +13 -0
- package/dist/components/FieldGroup.js.map +1 -1
- package/dist/components/Form.d.ts +18 -0
- package/dist/components/Form.d.ts.map +1 -1
- package/dist/components/Form.js +18 -0
- package/dist/components/Form.js.map +1 -1
- package/dist/components/FormGroup.d.ts +12 -0
- package/dist/components/FormGroup.d.ts.map +1 -1
- package/dist/components/FormGroup.js +12 -0
- package/dist/components/FormGroup.js.map +1 -1
- package/dist/components/IconBox.d.ts +33 -8
- package/dist/components/IconBox.d.ts.map +1 -1
- package/dist/components/IconBox.js +37 -11
- package/dist/components/IconBox.js.map +1 -1
- package/dist/components/ImageBox.d.ts +32 -8
- package/dist/components/ImageBox.d.ts.map +1 -1
- package/dist/components/ImageBox.js +36 -11
- package/dist/components/ImageBox.js.map +1 -1
- package/dist/components/ImageWithFallback.d.ts +18 -0
- package/dist/components/ImageWithFallback.d.ts.map +1 -1
- package/dist/components/ImageWithFallback.js +11 -0
- package/dist/components/ImageWithFallback.js.map +1 -1
- package/dist/components/Input.d.ts +15 -3
- package/dist/components/Input.d.ts.map +1 -1
- package/dist/components/Input.js +16 -3
- package/dist/components/Input.js.map +1 -1
- package/dist/components/Link.d.ts +6 -0
- package/dist/components/Link.d.ts.map +1 -1
- package/dist/components/Link.js +6 -0
- package/dist/components/Link.js.map +1 -1
- package/dist/components/MenuOverlay/index.d.ts +20 -0
- package/dist/components/MenuOverlay/index.d.ts.map +1 -1
- package/dist/components/MenuOverlay/index.js +20 -0
- package/dist/components/MenuOverlay/index.js.map +1 -1
- package/dist/components/Overlay/index.d.ts +16 -0
- package/dist/components/Overlay/index.d.ts.map +1 -1
- package/dist/components/Overlay/index.js +16 -0
- package/dist/components/Overlay/index.js.map +1 -1
- package/dist/components/Pagination.d.ts +27 -8
- package/dist/components/Pagination.d.ts.map +1 -1
- package/dist/components/Pagination.js +18 -5
- package/dist/components/Pagination.js.map +1 -1
- package/dist/components/ProgressBar.d.ts +14 -0
- package/dist/components/ProgressBar.d.ts.map +1 -1
- package/dist/components/ProgressBar.js +14 -0
- package/dist/components/ProgressBar.js.map +1 -1
- package/dist/components/ProgressCircular.d.ts +14 -0
- package/dist/components/ProgressCircular.d.ts.map +1 -1
- package/dist/components/ProgressCircular.js +14 -0
- package/dist/components/ProgressCircular.js.map +1 -1
- package/dist/components/RadioGroup.d.ts +24 -3
- package/dist/components/RadioGroup.d.ts.map +1 -1
- package/dist/components/RadioGroup.js +25 -3
- package/dist/components/RadioGroup.js.map +1 -1
- package/dist/components/Rating.d.ts +10 -0
- package/dist/components/Rating.d.ts.map +1 -1
- package/dist/components/Rating.js +10 -0
- package/dist/components/Rating.js.map +1 -1
- package/dist/components/Select/RichSelect.d.ts +3 -5
- package/dist/components/Select/RichSelect.d.ts.map +1 -1
- package/dist/components/Select/RichSelect.js +4 -4
- package/dist/components/Select/RichSelect.js.map +1 -1
- package/dist/components/Select/SimpleSelect.d.ts +2 -3
- package/dist/components/Select/SimpleSelect.d.ts.map +1 -1
- package/dist/components/Select/SimpleSelect.js +2 -3
- package/dist/components/Select/SimpleSelect.js.map +1 -1
- package/dist/components/Select/index.d.ts +25 -2
- package/dist/components/Select/index.d.ts.map +1 -1
- package/dist/components/Select/index.js +26 -3
- package/dist/components/Select/index.js.map +1 -1
- package/dist/components/Select/types.d.ts +1 -2
- package/dist/components/Select/types.d.ts.map +1 -1
- package/dist/components/SelectBox.d.ts +31 -2
- package/dist/components/SelectBox.d.ts.map +1 -1
- package/dist/components/SelectBox.js +32 -3
- package/dist/components/SelectBox.js.map +1 -1
- package/dist/components/Skeleton.d.ts +11 -0
- package/dist/components/Skeleton.d.ts.map +1 -1
- package/dist/components/Skeleton.js +11 -0
- package/dist/components/Skeleton.js.map +1 -1
- package/dist/components/Slider.d.ts +12 -0
- package/dist/components/Slider.d.ts.map +1 -1
- package/dist/components/Slider.js +12 -0
- package/dist/components/Slider.js.map +1 -1
- package/dist/components/SmartTable.d.ts +36 -2
- package/dist/components/SmartTable.d.ts.map +1 -1
- package/dist/components/SmartTable.js +37 -3
- package/dist/components/SmartTable.js.map +1 -1
- package/dist/components/Stepper.d.ts +20 -3
- package/dist/components/Stepper.d.ts.map +1 -1
- package/dist/components/Stepper.js +21 -3
- package/dist/components/Stepper.js.map +1 -1
- package/dist/components/Table.d.ts +10 -0
- package/dist/components/Table.d.ts.map +1 -1
- package/dist/components/Table.js +10 -0
- package/dist/components/Table.js.map +1 -1
- package/dist/components/Tabs/TabController.d.ts +14 -0
- package/dist/components/Tabs/TabController.d.ts.map +1 -1
- package/dist/components/Tabs/TabController.js +14 -0
- package/dist/components/Tabs/TabController.js.map +1 -1
- package/dist/components/Tabs/index.d.ts +20 -3
- package/dist/components/Tabs/index.d.ts.map +1 -1
- package/dist/components/Tabs/index.js +21 -3
- package/dist/components/Tabs/index.js.map +1 -1
- package/dist/components/Text.d.ts +16 -2
- package/dist/components/Text.d.ts.map +1 -1
- package/dist/components/Text.js +17 -3
- package/dist/components/Text.js.map +1 -1
- package/dist/components/Textarea.d.ts +11 -1
- package/dist/components/Textarea.d.ts.map +1 -1
- package/dist/components/Textarea.js +12 -2
- package/dist/components/Textarea.js.map +1 -1
- package/dist/components/Tooltip.d.ts +14 -1
- package/dist/components/Tooltip.d.ts.map +1 -1
- package/dist/components/Tooltip.js +13 -0
- package/dist/components/Tooltip.js.map +1 -1
- package/dist/components/layout.d.ts +41 -7
- package/dist/components/layout.d.ts.map +1 -1
- package/dist/components/layout.js +44 -9
- package/dist/components/layout.js.map +1 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -1
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/components/Accordion.tsx +34 -0
- package/src/components/Alert.tsx +8 -0
- package/src/components/AsyncContent.tsx +18 -4
- package/src/components/Avatar.tsx +11 -1
- package/src/components/AvatarGroup.tsx +8 -0
- package/src/components/Badge.tsx +24 -8
- package/src/components/Blockquote.tsx +8 -0
- package/src/components/Breadcrumb.tsx +10 -1
- package/src/components/Button.tsx +17 -2
- package/src/components/Card.tsx +34 -14
- package/src/components/Checkbox.tsx +14 -0
- package/src/components/CheckboxGroup.tsx +61 -40
- package/src/components/Circle.tsx +16 -0
- package/src/components/CitricComponent.ts +14 -0
- package/src/components/Divider.tsx +6 -5
- package/src/components/ErrorBoundary.tsx +13 -0
- package/src/components/ErrorMessage.tsx +1 -1
- package/src/components/FallbackBoundary.tsx +12 -1
- package/src/components/Favorite.tsx +12 -0
- package/src/components/FieldGroup.tsx +13 -0
- package/src/components/Form.tsx +18 -0
- package/src/components/FormGroup.tsx +12 -0
- package/src/components/IconBox.tsx +61 -30
- package/src/components/ImageBox.tsx +60 -30
- package/src/components/ImageWithFallback.tsx +18 -0
- package/src/components/Input.tsx +28 -14
- package/src/components/Link.tsx +6 -0
- package/src/components/MenuOverlay/index.tsx +20 -0
- package/src/components/Overlay/index.tsx +17 -0
- package/src/components/Pagination.tsx +40 -17
- package/src/components/ProgressBar.tsx +14 -0
- package/src/components/ProgressCircular.tsx +14 -0
- package/src/components/RadioGroup.tsx +62 -39
- package/src/components/Rating.tsx +10 -0
- package/src/components/Select/RichSelect.tsx +183 -182
- package/src/components/Select/SimpleSelect.tsx +57 -57
- package/src/components/Select/index.tsx +29 -5
- package/src/components/Select/types.ts +1 -1
- package/src/components/SelectBox.tsx +92 -62
- package/src/components/Skeleton.tsx +11 -0
- package/src/components/Slider.tsx +12 -0
- package/src/components/SmartTable.tsx +91 -56
- package/src/components/Stepper.tsx +76 -57
- package/src/components/Table.tsx +10 -0
- package/src/components/Tabs/TabController.ts +14 -0
- package/src/components/Tabs/index.tsx +56 -37
- package/src/components/Text.ts +36 -21
- package/src/components/Textarea.tsx +14 -4
- package/src/components/Tooltip.tsx +14 -1
- package/src/components/layout.tsx +56 -13
- package/src/index.ts +0 -1
- package/dist/components/Switch.d.ts +0 -10
- package/dist/components/Switch.d.ts.map +0 -1
- package/dist/components/Switch.js +0 -8
- package/dist/components/Switch.js.map +0 -1
- package/src/components/Switch.tsx +0 -30
|
@@ -4,7 +4,7 @@ import { defaultRenderKey, defaultRenderLabel } from '../../utils/options.js';
|
|
|
4
4
|
import { withRef } from '../../utils/react.js';
|
|
5
5
|
import { CitricComponent } from '../CitricComponent.js';
|
|
6
6
|
import { ProgressCircular } from '../ProgressCircular.js';
|
|
7
|
-
export function
|
|
7
|
+
export const SimpleSelect = withRef(function SimpleSelect({ ref, options, value, onChange, renderLabel = defaultRenderLabel, renderKey = defaultRenderKey, required = true, loading, disabled, onBlur, onFocus, wrap, ...props }) {
|
|
8
8
|
const handleChange = useCallback((e) => {
|
|
9
9
|
const selectedIndex = e.target.options.selectedIndex - (e.target.options.length > options.length ? 1 : 0);
|
|
10
10
|
onChange?.(selectedIndex >= 0 ? options[selectedIndex] : undefined);
|
|
@@ -18,6 +18,5 @@ export function _SimpleSelect({ ref, options, value, onChange, renderLabel = def
|
|
|
18
18
|
return items;
|
|
19
19
|
}, [options, value, required]);
|
|
20
20
|
return wrap === false ? (_jsx(CitricComponent, { tag: "select", ref: ref, required: required, onChange: handleChange, disabled: disabled || loading, component: "select", onFocus: onFocus, onBlur: onBlur, value: value ? renderKey(value) : '', children: renderedOptions })) : (_jsxs(CitricComponent, { ref: ref, tag: "div", component: "select", "aria-busy": loading, ...props, children: [_jsx("select", { value: value ? renderKey(value) : undefined, required: required, onChange: handleChange, disabled: disabled || loading, onFocus: onFocus, onBlur: onBlur, children: renderedOptions }), loading && _jsx(ProgressCircular, { className: "loader", size: "xs" })] }));
|
|
21
|
-
}
|
|
22
|
-
export const SimpleSelect = withRef(_SimpleSelect);
|
|
21
|
+
});
|
|
23
22
|
//# sourceMappingURL=SimpleSelect.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SimpleSelect.js","sourceRoot":"","sources":["../../../src/components/Select/SimpleSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAoB,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAC1E,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAGtD,MAAM,
|
|
1
|
+
{"version":3,"file":"SimpleSelect.js","sourceRoot":"","sources":["../../../src/components/Select/SimpleSelect.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,28 @@
|
|
|
1
1
|
import { SelectProps } from './types.js';
|
|
2
2
|
export type * from './types.js';
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
/**
|
|
4
|
+
* Renders a Select form component. By default, it renders a rich, fully styled component (rich = true). You can set `rich = false` to use
|
|
5
|
+
* only the default select of the browser.
|
|
6
|
+
*
|
|
7
|
+
* The default select from the browser is also rendered when `rich = true`, but it is only accessible when navigating with the keyboard
|
|
8
|
+
* (accessibility).
|
|
9
|
+
*
|
|
10
|
+
* This Select is searchable! You just need to set `selectable = true`.
|
|
11
|
+
*
|
|
12
|
+
* Attention: this component doesn't accept children, instead of manually writing the tag "option", use the property "options".
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
*
|
|
16
|
+
* ```
|
|
17
|
+
* const options: = useMemo(() => [
|
|
18
|
+
* { id: 1, name: 'Lorem' },
|
|
19
|
+
* { id: 2, name: 'Ipsum' },
|
|
20
|
+
* { id: 3, name: 'Dolor' },
|
|
21
|
+
* ], [])
|
|
22
|
+
* const [value, setValue] = useState(options[0])
|
|
23
|
+
*
|
|
24
|
+
* return <Select options={options} renderLabel={o => o.name} renderKey={o => o.id} value={value} onChange={setValue} />
|
|
25
|
+
* ```
|
|
26
|
+
*/
|
|
27
|
+
export declare const Select: <T>(props: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
5
28
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AACrC,mBAAmB,SAAS,CAAA;AAE5B,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AACrC,mBAAmB,SAAS,CAAA;AAE5B;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,MAAM,GACD,CAAC,SAAS,WAAW,CAAC,CAAC,CAAC,4CAGzC,CAAA"}
|
|
@@ -2,8 +2,31 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { withRef } from '../../utils/react.js';
|
|
3
3
|
import { RichSelect } from './RichSelect.js';
|
|
4
4
|
import { SimpleSelect } from './SimpleSelect.js';
|
|
5
|
-
|
|
5
|
+
/**
|
|
6
|
+
* Renders a Select form component. By default, it renders a rich, fully styled component (rich = true). You can set `rich = false` to use
|
|
7
|
+
* only the default select of the browser.
|
|
8
|
+
*
|
|
9
|
+
* The default select from the browser is also rendered when `rich = true`, but it is only accessible when navigating with the keyboard
|
|
10
|
+
* (accessibility).
|
|
11
|
+
*
|
|
12
|
+
* This Select is searchable! You just need to set `selectable = true`.
|
|
13
|
+
*
|
|
14
|
+
* Attention: this component doesn't accept children, instead of manually writing the tag "option", use the property "options".
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
*
|
|
18
|
+
* ```
|
|
19
|
+
* const options: = useMemo(() => [
|
|
20
|
+
* { id: 1, name: 'Lorem' },
|
|
21
|
+
* { id: 2, name: 'Ipsum' },
|
|
22
|
+
* { id: 3, name: 'Dolor' },
|
|
23
|
+
* ], [])
|
|
24
|
+
* const [value, setValue] = useState(options[0])
|
|
25
|
+
*
|
|
26
|
+
* return <Select options={options} renderLabel={o => o.name} renderKey={o => o.id} value={value} onChange={setValue} />
|
|
27
|
+
* ```
|
|
28
|
+
*/
|
|
29
|
+
export const Select = withRef(function Select(props) {
|
|
6
30
|
return props.type === 'simple' ? _jsx(SimpleSelect, { ...props }) : _jsx(RichSelect, { ...props });
|
|
7
|
-
}
|
|
8
|
-
export const Select = withRef(_Select);
|
|
31
|
+
});
|
|
9
32
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAI7C,MAAM,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAI7C;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,OAAO,CAC3B,SAAS,MAAM,CAAI,KAAqB;IACtC,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAC,YAAY,OAAK,KAAK,GAAI,CAAC,CAAC,CAAC,KAAC,UAAU,OAAK,KAAK,GAAI,CAAA;AAC1F,CAAC,CACF,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { WithColorScheme } from '../../types.js';
|
|
2
|
-
interface CommonSelectProps<T> extends WithColorScheme {
|
|
2
|
+
export interface CommonSelectProps<T> extends WithColorScheme {
|
|
3
3
|
/**
|
|
4
4
|
* All the items (options) to render.
|
|
5
5
|
*/
|
|
@@ -116,5 +116,4 @@ export interface RichSelectProps<T> extends CommonSelectProps<T> {
|
|
|
116
116
|
}
|
|
117
117
|
export type BaseSelectProps<T> = SimpleSelectProps<T> | RichSelectProps<T>;
|
|
118
118
|
export type SelectProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'ref' | 'onChange'> & BaseSelectProps<T>;
|
|
119
|
-
export {};
|
|
120
119
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE7C,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE7C,MAAM,WAAW,iBAAiB,CAAC,CAAC,CAAE,SAAQ,eAAe;IAC3D;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IACV;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,KAAK,IAAI,CAAC;IAC1C;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,KAAK,MAAM,CAAC;IAC/C;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACtD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,UAAU,CAAC,cAAc,GAAG,iBAAiB,CAAC,CAAC,CAAC;IACnF;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,UAAU,CAAC,cAAc,GAAG,iBAAiB,CAAC,CAAC,CAAC;IAClF;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC,CAAE,SAAQ,iBAAiB,CAAC,CAAC,CAAC;IAChE,IAAI,EAAE,QAAQ,CAAC;IACf,GAAG,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,iBAAiB,CAAC,CAAC;CAClE;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,iBAAiB,CAAC,CAAC,CAAC;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;IACzD;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;IACzD;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;CAC9C;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,iBAAiB,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA;AAE1E,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA"}
|
|
@@ -60,7 +60,36 @@ interface RadioProps<T> extends CommonSelectBoxProps<T> {
|
|
|
60
60
|
}
|
|
61
61
|
export type BaseSelectBoxProps<T> = RadioProps<T> | CheckboxProps<T>;
|
|
62
62
|
export type SelectBoxProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseSelectBoxProps<T>;
|
|
63
|
-
|
|
64
|
-
|
|
63
|
+
/**
|
|
64
|
+
* This component does exactly the same thing as "CheckboxGroup" and "RadioGroup", but with different visuals and less customization.
|
|
65
|
+
*
|
|
66
|
+
* Each option is rendered as a selectable card. The user can select a single option (radio buttons) or multiple options (checkboxes),
|
|
67
|
+
* depending on the value of the property "multiple", which is false by default.
|
|
68
|
+
*
|
|
69
|
+
* Use `renderLabel` to determine what to render inside each card. This is not a free react element, it must return an object containing an
|
|
70
|
+
* icon, a title and a description.
|
|
71
|
+
*
|
|
72
|
+
* @example
|
|
73
|
+
*
|
|
74
|
+
* ```
|
|
75
|
+
* const options = useMemo(() => [
|
|
76
|
+
* { id: 1, image: 'https://images.com/1.png', name: 'Basic plan', price: 59 },
|
|
77
|
+
* { id: 2, image: 'https://images.com/2.png', name: 'Gold plan', price: 69 },
|
|
78
|
+
* { id: 3, image: 'https://images.com/3.png', name: 'Safira plan', price: 79' },
|
|
79
|
+
* { id: 4, image: 'https://images.com/4.png', name: 'Diamond plan', price: 99 },
|
|
80
|
+
* ], [])
|
|
81
|
+
*
|
|
82
|
+
* return <SelectBox
|
|
83
|
+
* options={options}
|
|
84
|
+
* renderKey={o => o.id}
|
|
85
|
+
* renderLabel={o => ({
|
|
86
|
+
* icon: <img src={o.image} />,
|
|
87
|
+
* title: o.name,
|
|
88
|
+
* description: `$${price.toFixed(2)}`,
|
|
89
|
+
* })}
|
|
90
|
+
* />
|
|
91
|
+
* ```
|
|
92
|
+
*/
|
|
93
|
+
export declare const SelectBox: <T>({ multiple, name, value, options, onChange, renderLabel, renderKey, isDisabled, className, style, direction, bgLevel, colorPalette, colorScheme, ...props }: SelectBoxProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
65
94
|
export {};
|
|
66
95
|
//# sourceMappingURL=SelectBox.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectBox.d.ts","sourceRoot":"","sources":["../../src/components/SelectBox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAM5D,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC,CAAE,SAAQ,gBAAgB,EAAE,eAAe;IAChF;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,cAAc,CAAC;IAC5C;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC;IACpC;;;;OAIG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC;;;;OAIG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACvC;AAED,UAAU,aAAa,CAAC,CAAC,CAAE,SAAQ,oBAAoB,CAAC,CAAC,CAAC;IACxD,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;CACjC;AAED,UAAU,UAAU,CAAC,CAAC,CAAE,SAAQ,oBAAoB,CAAC,CAAC,CAAC;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CAC/B;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAA;AAEpE,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAAA;AAEzH,
|
|
1
|
+
{"version":3,"file":"SelectBox.d.ts","sourceRoot":"","sources":["../../src/components/SelectBox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAM5D,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC,CAAE,SAAQ,gBAAgB,EAAE,eAAe;IAChF;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,cAAc,CAAC;IAC5C;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC;IACpC;;;;OAIG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC;;;;OAIG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACvC;AAED,UAAU,aAAa,CAAC,CAAC,CAAE,SAAQ,oBAAoB,CAAC,CAAC,CAAC;IACxD,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;CACjC;AAED,UAAU,UAAU,CAAC,CAAC,CAAE,SAAQ,oBAAoB,CAAC,CAAC,CAAC;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CAC/B;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAA;AAEpE,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAAA;AAEzH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,SAAS,GACD,CAAC,+JAgBjB,cAAc,CAAC,CAAC,CAAC,4CA4CrB,CAAA"}
|
|
@@ -5,7 +5,37 @@ import { defaultRenderKey, defaultRenderLabel } from '../utils/options.js';
|
|
|
5
5
|
import { withRef } from '../utils/react.js';
|
|
6
6
|
import { CitricComponent } from './CitricComponent.js';
|
|
7
7
|
import { layout } from './layout.js';
|
|
8
|
-
|
|
8
|
+
/**
|
|
9
|
+
* This component does exactly the same thing as "CheckboxGroup" and "RadioGroup", but with different visuals and less customization.
|
|
10
|
+
*
|
|
11
|
+
* Each option is rendered as a selectable card. The user can select a single option (radio buttons) or multiple options (checkboxes),
|
|
12
|
+
* depending on the value of the property "multiple", which is false by default.
|
|
13
|
+
*
|
|
14
|
+
* Use `renderLabel` to determine what to render inside each card. This is not a free react element, it must return an object containing an
|
|
15
|
+
* icon, a title and a description.
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
*
|
|
19
|
+
* ```
|
|
20
|
+
* const options = useMemo(() => [
|
|
21
|
+
* { id: 1, image: 'https://images.com/1.png', name: 'Basic plan', price: 59 },
|
|
22
|
+
* { id: 2, image: 'https://images.com/2.png', name: 'Gold plan', price: 69 },
|
|
23
|
+
* { id: 3, image: 'https://images.com/3.png', name: 'Safira plan', price: 79' },
|
|
24
|
+
* { id: 4, image: 'https://images.com/4.png', name: 'Diamond plan', price: 99 },
|
|
25
|
+
* ], [])
|
|
26
|
+
*
|
|
27
|
+
* return <SelectBox
|
|
28
|
+
* options={options}
|
|
29
|
+
* renderKey={o => o.id}
|
|
30
|
+
* renderLabel={o => ({
|
|
31
|
+
* icon: <img src={o.image} />,
|
|
32
|
+
* title: o.name,
|
|
33
|
+
* description: `$${price.toFixed(2)}`,
|
|
34
|
+
* })}
|
|
35
|
+
* />
|
|
36
|
+
* ```
|
|
37
|
+
*/
|
|
38
|
+
export const SelectBox = withRef(function SelectBox({ multiple, name, value, options, onChange, renderLabel = o => ({ title: defaultRenderLabel(o) }), renderKey = defaultRenderKey, isDisabled, className, style, direction, bgLevel, colorPalette, colorScheme, ...props }) {
|
|
9
39
|
const items = useMemo(() => {
|
|
10
40
|
const valueAsArray = value ? (Array.isArray(value) ? value : [value]) : [];
|
|
11
41
|
const valueKeys = valueAsArray.map(renderKey);
|
|
@@ -23,6 +53,5 @@ function _SelectBox({ multiple, name, value, options, onChange, renderLabel = o
|
|
|
23
53
|
});
|
|
24
54
|
}, [options, value, name, multiple, bgLevel]);
|
|
25
55
|
return (_jsx("div", { "data-color-palette": colorPalette, "data-color-scheme": colorScheme, className: listToClass([className, direction === 'vertical' ? layout.column : layout.row]), style: { gap: '5px', ...style }, ...props, children: items }));
|
|
26
|
-
}
|
|
27
|
-
export const SelectBox = withRef(_SelectBox);
|
|
56
|
+
});
|
|
28
57
|
//# sourceMappingURL=SelectBox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectBox.js","sourceRoot":"","sources":["../../src/components/SelectBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAqEjC,SAAS,
|
|
1
|
+
{"version":3,"file":"SelectBox.js","sourceRoot":"","sources":["../../src/components/SelectBox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -25,5 +25,16 @@ export interface BaseSkeletonProps {
|
|
|
25
25
|
bgLevel?: 400 | 500 | 600;
|
|
26
26
|
}
|
|
27
27
|
export type SkeletonProps = React.JSX.IntrinsicElements['div'] & BaseSkeletonProps;
|
|
28
|
+
/**
|
|
29
|
+
* A loading feedback with a discrete animation. Use this to replace elements on the page that are still loading and will be replaced by
|
|
30
|
+
* the same shape when the loading ends.
|
|
31
|
+
*
|
|
32
|
+
* Use the property "bgLevel" to manage how light/dark the background is.
|
|
33
|
+
*
|
|
34
|
+
* @example
|
|
35
|
+
* ```
|
|
36
|
+
* <Skeleton width="100%" height="20px" />
|
|
37
|
+
* ```
|
|
38
|
+
*/
|
|
28
39
|
export declare const Skeleton: ({ appearance, className, style, width, height, bgLevel, ...props }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
|
|
29
40
|
//# sourceMappingURL=Skeleton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../src/components/Skeleton.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CAC3B;AAED,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,iBAAiB,CAAA;AAElF,eAAO,MAAM,QAAQ,uEAAgF,aAAa,4CAQjH,CAAA"}
|
|
1
|
+
{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../src/components/Skeleton.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CAC3B;AAED,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,iBAAiB,CAAA;AAElF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,uEAAgF,aAAa,4CAQjH,CAAA"}
|
|
@@ -2,5 +2,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { listToClass } from '@stack-spot/portal-theme';
|
|
3
3
|
import { withRef } from '../utils/react.js';
|
|
4
4
|
import { CitricComponent } from './CitricComponent.js';
|
|
5
|
+
/**
|
|
6
|
+
* A loading feedback with a discrete animation. Use this to replace elements on the page that are still loading and will be replaced by
|
|
7
|
+
* the same shape when the loading ends.
|
|
8
|
+
*
|
|
9
|
+
* Use the property "bgLevel" to manage how light/dark the background is.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```
|
|
13
|
+
* <Skeleton width="100%" height="20px" />
|
|
14
|
+
* ```
|
|
15
|
+
*/
|
|
5
16
|
export const Skeleton = withRef(({ appearance, className, style, width, height, bgLevel, ...props }) => _jsx(CitricComponent, { tag: "div", component: "skeleton", className: listToClass([appearance, bgLevel && `bg-${bgLevel}`, className]), style: { width, height, ...style }, ...props }));
|
|
6
17
|
//# sourceMappingURL=Skeleton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../src/components/Skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA+BnD,MAAM,CAAC,MAAM,QAAQ,GAAG,OAAO,CAAC,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,EAAiB,EAAE,EAAE,CACpH,KAAC,eAAe,IACd,GAAG,EAAC,KAAK,EACT,SAAS,EAAC,UAAU,EACpB,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,OAAO,IAAI,MAAM,OAAO,EAAE,EAAE,SAAS,CAAC,CAAC,EAC3E,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,KAC9B,KAAK,GACT,CACH,CAAA"}
|
|
1
|
+
{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../src/components/Skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA+BnD;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,OAAO,CAAC,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,EAAiB,EAAE,EAAE,CACpH,KAAC,eAAe,IACd,GAAG,EAAC,KAAK,EACT,SAAS,EAAC,UAAU,EACpB,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,OAAO,IAAI,MAAM,OAAO,EAAE,EAAE,SAAS,CAAC,CAAC,EAC3E,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,KAC9B,KAAK,GACT,CACH,CAAA"}
|
|
@@ -28,5 +28,17 @@ export interface BaseSliderProps extends WithColorScheme, WithColorPalette {
|
|
|
28
28
|
renderValue?: (value: number) => string;
|
|
29
29
|
}
|
|
30
30
|
export type SliderProps = ControlledInput & BaseSliderProps;
|
|
31
|
+
/**
|
|
32
|
+
* A UI element where the user can slide a knob over a bar to select a number. By default, a number between 0 and 100 can be selected, use
|
|
33
|
+
* the properties "min" and "max" to change this.
|
|
34
|
+
*
|
|
35
|
+
* Attention: "onChange" receives the new value (number) instead of the event.
|
|
36
|
+
*
|
|
37
|
+
* @example
|
|
38
|
+
* ```
|
|
39
|
+
* const [value, setValue] = useState(0)
|
|
40
|
+
* return <Slider value={value} setValue={setValue} />
|
|
41
|
+
* ```
|
|
42
|
+
*/
|
|
31
43
|
export declare const Slider: ({ value, onChange, min, max, style, showValue, renderValue, colorPalette, colorScheme, className, ...props }: SliderProps) => import("react/jsx-runtime").JSX.Element;
|
|
32
44
|
//# sourceMappingURL=Slider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/components/Slider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAK7E,MAAM,WAAW,eAAgB,SAAQ,eAAe,EAAE,gBAAgB;IACxE,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;OAIG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;IACzC;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC;AAED,MAAM,MAAM,WAAW,GAAI,eAAe,GAAG,eAAe,CAAA;AAE5D,eAAO,MAAM,MAAM,iHAC6F,WAAW,4CAsCzH,CAAA"}
|
|
1
|
+
{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/components/Slider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAK7E,MAAM,WAAW,eAAgB,SAAQ,eAAe,EAAE,gBAAgB;IACxE,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;OAIG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;IACzC;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC;AAED,MAAM,MAAM,WAAW,GAAI,eAAe,GAAG,eAAe,CAAA;AAE5D;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,MAAM,iHAC6F,WAAW,4CAsCzH,CAAA"}
|
|
@@ -3,6 +3,18 @@ import { listToClass } from '@stack-spot/portal-theme';
|
|
|
3
3
|
import { applyCSSVariable } from '../utils/css.js';
|
|
4
4
|
import { withRef } from '../utils/react.js';
|
|
5
5
|
import { CitricComponent } from './CitricComponent.js';
|
|
6
|
+
/**
|
|
7
|
+
* A UI element where the user can slide a knob over a bar to select a number. By default, a number between 0 and 100 can be selected, use
|
|
8
|
+
* the properties "min" and "max" to change this.
|
|
9
|
+
*
|
|
10
|
+
* Attention: "onChange" receives the new value (number) instead of the event.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```
|
|
14
|
+
* const [value, setValue] = useState(0)
|
|
15
|
+
* return <Slider value={value} setValue={setValue} />
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
6
18
|
export const Slider = withRef(({ value, onChange, min, max, style, showValue, renderValue, colorPalette, colorScheme, className, ...props }) => {
|
|
7
19
|
const percent = Math.floor((value / ((max ?? 100) - (min ?? 0))) * 100);
|
|
8
20
|
style = applyCSSVariable(style, 'percent', percent);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../src/components/Slider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAiCnD,MAAM,CAAC,MAAM,MAAM,GAAG,OAAO,CAAC,CAC5B,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,KAAK,EAAe,EACzH,EAAE;IACF,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAA;IACvE,KAAK,GAAG,gBAAgB,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,CAAA;IACnD,MAAM,UAAU,GAAG;QACjB,KAAK;QACL,GAAG;QACH,GAAG;QACH,QAAQ,EAAE,CAAC,CAAsC,EAAE,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACxF,GAAG,KAAK;KACT,CAAA;IAED,OAAO,SAAS,KAAK,OAAO;QAC1B,CAAC,CAAC,KAAC,eAAe,IAChB,GAAG,EAAC,OAAO,EACX,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,KACpB,UAAU,GACd;QACF,CAAC,CAAC,CACA,MAAC,eAAe,IACd,GAAG,EAAC,KAAK,EACT,SAAS,EAAC,gBAAgB,EAC1B,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,SAAS,KAAK,OAAO,IAAI,gBAAgB,CAAC,CAAC,aAE9E,gBAAO,IAAI,EAAC,OAAO,KAAK,UAAU,GAAI,EACtC,cAAK,SAAS,EAAC,OAAO,YACnB,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,GAAG,KAAK,SAAS,IAAI,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,GAC9F,IACU,CACnB,CAAA;AACL,CAAC,CAAC,CAAA"}
|
|
1
|
+
{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../src/components/Slider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAiCnD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,OAAO,CAAC,CAC5B,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,KAAK,EAAe,EACzH,EAAE;IACF,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAA;IACvE,KAAK,GAAG,gBAAgB,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,CAAA;IACnD,MAAM,UAAU,GAAG;QACjB,KAAK;QACL,GAAG;QACH,GAAG;QACH,QAAQ,EAAE,CAAC,CAAsC,EAAE,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACxF,GAAG,KAAK;KACT,CAAA;IAED,OAAO,SAAS,KAAK,OAAO;QAC1B,CAAC,CAAC,KAAC,eAAe,IAChB,GAAG,EAAC,OAAO,EACX,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,KACpB,UAAU,GACd;QACF,CAAC,CAAC,CACA,MAAC,eAAe,IACd,GAAG,EAAC,KAAK,EACT,SAAS,EAAC,gBAAgB,EAC1B,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,SAAS,KAAK,OAAO,IAAI,gBAAgB,CAAC,CAAC,aAE9E,gBAAO,IAAI,EAAC,OAAO,KAAK,UAAU,GAAI,EACtC,cAAK,SAAS,EAAC,OAAO,YACnB,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,GAAG,KAAK,SAAS,IAAI,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,GAC9F,IACU,CACnB,CAAA;AACL,CAAC,CAAC,CAAA"}
|
|
@@ -82,7 +82,41 @@ interface ExtraSmartTableProps<T extends Record<string, any>> {
|
|
|
82
82
|
}
|
|
83
83
|
export type BaseSmartTableProps<T extends Record<string, any>> = BaseTableProps & ExtraSmartTableProps<T>;
|
|
84
84
|
export type SmartTableProps<T extends Record<string, any>> = Omit<TableProps, 'children'> & ExtraSmartTableProps<T>;
|
|
85
|
-
|
|
86
|
-
|
|
85
|
+
/**
|
|
86
|
+
* Renders a table. Always prefer using this component over the raw Table component.
|
|
87
|
+
*
|
|
88
|
+
* This receives a dataset and renders each item as a row. The columns are determined by the property "columns".
|
|
89
|
+
*
|
|
90
|
+
* To change the overall table style, use the property "appearance".
|
|
91
|
+
*
|
|
92
|
+
* To check more complex table examples, like tables with accordions and sorting, check the storybook.
|
|
93
|
+
*
|
|
94
|
+
* @example
|
|
95
|
+
*
|
|
96
|
+
* ```
|
|
97
|
+
* const data = useMemo(() => [
|
|
98
|
+
* { id: 1, name: 'Yuri Tyson', phone: '1-801-475-4561', country: 'Poland', age: 21 },
|
|
99
|
+
* { id: 2, name: 'Amal Mcclure', phone: '(695) 948-4102', country: 'Ukraine', age: 32 },
|
|
100
|
+
* { id: 3, name: 'Levi Glass', phone: '1-976-544-4872', country: 'Colombia', age: 45 },
|
|
101
|
+
* ], [])
|
|
102
|
+
* const columns = useMemo(() => [
|
|
103
|
+
* { key: 'name', label: 'Name', render: item => `${item.name} (${item.age})` },
|
|
104
|
+
* { key: 'phone', label: 'Phone' },
|
|
105
|
+
* { key: 'country', label: 'Country' },
|
|
106
|
+
* {
|
|
107
|
+
* key: 'settings',
|
|
108
|
+
* render: item => (
|
|
109
|
+
* <Row gap={2}>
|
|
110
|
+
* <IconButton icon="ExternalLink" title="View" />
|
|
111
|
+
* <IconButton icon="Pencil" title="Edit" />
|
|
112
|
+
* <IconButton icon="Trash" title="Delete" colorScheme="danger" />
|
|
113
|
+
* </Row>
|
|
114
|
+
* ),
|
|
115
|
+
* },
|
|
116
|
+
* ], [])
|
|
117
|
+
* return <SmartTable data={data} columns={columns} />
|
|
118
|
+
* ```
|
|
119
|
+
*/
|
|
120
|
+
export declare const SmartTable: <T extends Record<string, any>>({ data, keygen, columns, renderAccordion, accordionTrigger, accordionMaxHeight, id, ...props }: SmartTableProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
87
121
|
export {};
|
|
88
122
|
//# sourceMappingURL=SmartTable.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SmartTable.d.ts","sourceRoot":"","sources":["../../src/components/SmartTable.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAS,UAAU,EAAU,MAAM,SAAS,CAAA;AAErF,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;IAC3B;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtC;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,KAAK,IAAI,CAAC;IACvD;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;IACnD;;OAEG;IACH,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;CACpD,CAAA;AAED,UAAU,oBAAoB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAC1D;;OAEG;IACH,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC;IAChC;;;;OAIG;IACH,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1B;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/C;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACpC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,cAAc,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAEzG,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAEnH,
|
|
1
|
+
{"version":3,"file":"SmartTable.d.ts","sourceRoot":"","sources":["../../src/components/SmartTable.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAS,UAAU,EAAU,MAAM,SAAS,CAAA;AAErF,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;IAC3B;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtC;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,KAAK,IAAI,CAAC;IACvD;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;IACnD;;OAEG;IACH,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;CACpD,CAAA;AAED,UAAU,oBAAoB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAC1D;;OAEG;IACH,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC;IAChC;;;;OAIG;IACH,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1B;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/C;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACpC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,cAAc,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAEzG,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAEnH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,UAAU,GACD,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,kGACiD,eAAe,CAAC,CAAC,CAAC,4CAyDrH,CAAA"}
|
|
@@ -3,7 +3,42 @@ import { createElement as _createElement } from "react";
|
|
|
3
3
|
import { useMemo } from 'react';
|
|
4
4
|
import { withRef } from '../utils/react.js';
|
|
5
5
|
import { Table, Th, Tr } from './Table.js';
|
|
6
|
-
|
|
6
|
+
/**
|
|
7
|
+
* Renders a table. Always prefer using this component over the raw Table component.
|
|
8
|
+
*
|
|
9
|
+
* This receives a dataset and renders each item as a row. The columns are determined by the property "columns".
|
|
10
|
+
*
|
|
11
|
+
* To change the overall table style, use the property "appearance".
|
|
12
|
+
*
|
|
13
|
+
* To check more complex table examples, like tables with accordions and sorting, check the storybook.
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
*
|
|
17
|
+
* ```
|
|
18
|
+
* const data = useMemo(() => [
|
|
19
|
+
* { id: 1, name: 'Yuri Tyson', phone: '1-801-475-4561', country: 'Poland', age: 21 },
|
|
20
|
+
* { id: 2, name: 'Amal Mcclure', phone: '(695) 948-4102', country: 'Ukraine', age: 32 },
|
|
21
|
+
* { id: 3, name: 'Levi Glass', phone: '1-976-544-4872', country: 'Colombia', age: 45 },
|
|
22
|
+
* ], [])
|
|
23
|
+
* const columns = useMemo(() => [
|
|
24
|
+
* { key: 'name', label: 'Name', render: item => `${item.name} (${item.age})` },
|
|
25
|
+
* { key: 'phone', label: 'Phone' },
|
|
26
|
+
* { key: 'country', label: 'Country' },
|
|
27
|
+
* {
|
|
28
|
+
* key: 'settings',
|
|
29
|
+
* render: item => (
|
|
30
|
+
* <Row gap={2}>
|
|
31
|
+
* <IconButton icon="ExternalLink" title="View" />
|
|
32
|
+
* <IconButton icon="Pencil" title="Edit" />
|
|
33
|
+
* <IconButton icon="Trash" title="Delete" colorScheme="danger" />
|
|
34
|
+
* </Row>
|
|
35
|
+
* ),
|
|
36
|
+
* },
|
|
37
|
+
* ], [])
|
|
38
|
+
* return <SmartTable data={data} columns={columns} />
|
|
39
|
+
* ```
|
|
40
|
+
*/
|
|
41
|
+
export const SmartTable = withRef(function SmartTable({ data, keygen, columns, renderAccordion, accordionTrigger, accordionMaxHeight, id, ...props }) {
|
|
7
42
|
id = useMemo(() => id || `${Math.random()}`, [id]);
|
|
8
43
|
const headers = useMemo(() => columns.map((c) => (_createElement(Th, { ...c.th, key: c.key, onSort: c.onSort, direction: c.direction, tabIndex: c.onSort ? 0 : undefined }, c.label ?? c.key))), [columns]);
|
|
9
44
|
const rows = useMemo(() => data.map((item, index) => {
|
|
@@ -13,6 +48,5 @@ function _SmartTable({ data, keygen, columns, renderAccordion, accordionTrigger,
|
|
|
13
48
|
return renderAccordion ? (_jsxs("tbody", { children: [row, _jsx(Tr, { id: `${id}-${key}`, accordion: true, accordionMaxHeight: accordionMaxHeight, children: _jsx("td", { colSpan: columns.length + 1, children: _jsx("div", { children: accordionContent }) }) })] }, `${key}-group`)) : row;
|
|
14
49
|
}), [columns, data, !!renderAccordion, accordionTrigger]);
|
|
15
50
|
return (_jsxs(Table, { id: id, accordionRows: !!renderAccordion, ...props, children: [_jsx("thead", { children: _jsxs("tr", { children: [headers, renderAccordion && _jsx("th", {})] }) }), renderAccordion ? rows : _jsx("tbody", { children: rows })] }));
|
|
16
|
-
}
|
|
17
|
-
export const SmartTable = withRef(_SmartTable);
|
|
51
|
+
});
|
|
18
52
|
//# sourceMappingURL=SmartTable.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SmartTable.js","sourceRoot":"","sources":["../../src/components/SmartTable.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAoC,KAAK,EAAc,EAAE,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAyFrF,SAAS,
|
|
1
|
+
{"version":3,"file":"SmartTable.js","sourceRoot":"","sources":["../../src/components/SmartTable.tsx"],"names":[],"mappings":"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"}
|
|
@@ -47,7 +47,24 @@ export interface BaseStepperProps<Key extends string> extends BaseTabsProps<Key>
|
|
|
47
47
|
};
|
|
48
48
|
}
|
|
49
49
|
export type StepperProps<Key extends string> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseStepperProps<Key>;
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
50
|
+
/**
|
|
51
|
+
* A Stepper is a tab view with a different appearance. To control the current tab (step), retrieve the controller by calling
|
|
52
|
+
* `useTabsController()` from within a tab (step) content.
|
|
53
|
+
*
|
|
54
|
+
* Besides all the properties in "Tabs", the "Stepper" can create a set of "Previous" and "Next" buttons through the property "buttons". By
|
|
55
|
+
* default, the buttons are rendered, to disable them, pass `buttons = false`.
|
|
56
|
+
*
|
|
57
|
+
* @example
|
|
58
|
+
*
|
|
59
|
+
* ```
|
|
60
|
+
* const steps: Tab[] = useMemo(() => [
|
|
61
|
+
* { key: 'step1', label: 'Step 1', content: <><h1>First step</h1><p>Content of the first step</p></> },
|
|
62
|
+
* { key: 'step2', label: 'Step 2', content: <><h1>Second step</h1><p>Content of the second step</p></> },
|
|
63
|
+
* { key: 'step3', label: 'Step 3', content: <><h1>Third step</h1><p>Content of the third step</p></> },
|
|
64
|
+
* ], [])
|
|
65
|
+
*
|
|
66
|
+
* return <Stepper tabs={steps} />
|
|
67
|
+
* ```
|
|
68
|
+
*/
|
|
69
|
+
export declare const Stepper: <Key extends string>({ tabs: initialTabs, controller: ctrl, value, onChange, buttons, className, ...props }: StepperProps<Key>) => import("react/jsx-runtime").JSX.Element;
|
|
53
70
|
//# sourceMappingURL=Stepper.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../src/components/Stepper.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAO,MAAM,cAAc,CAAA;AAGjD,MAAM,WAAW,gBAAgB,CAAC,GAAG,SAAS,MAAM,CAAE,SAAQ,aAAa,CAAC,GAAG,CAAC;IAC9E;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG;QAClB;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB;;;WAGG;QACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;QACtB;;;WAGG;QACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,GAAG,OAAO,CAAC;QAC1C;;;WAGG;QACH,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,GAAG,OAAO,CAAC;QACtC;;;WAGG;QACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;KACvB,CAAC;CACH;AAED,MAAM,MAAM,YAAY,CAAC,GAAG,SAAS,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAA;AAQxI,
|
|
1
|
+
{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../src/components/Stepper.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAO,MAAM,cAAc,CAAA;AAGjD,MAAM,WAAW,gBAAgB,CAAC,GAAG,SAAS,MAAM,CAAE,SAAQ,aAAa,CAAC,GAAG,CAAC;IAC9E;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG;QAClB;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB;;;WAGG;QACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;QACtB;;;WAGG;QACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,GAAG,OAAO,CAAC;QAC1C;;;WAGG;QACH,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,GAAG,OAAO,CAAC;QACtC;;;WAGG;QACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;KACvB,CAAC;CACH;AAED,MAAM,MAAM,YAAY,CAAC,GAAG,SAAS,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAA;AAQxI;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,OAAO,GACD,GAAG,SAAS,MAAM,0FAC8D,YAAY,CAAC,GAAG,CAAC,4CA2DnH,CAAA"}
|
|
@@ -14,7 +14,26 @@ function getTabsWithDisabled(tabs, value) {
|
|
|
14
14
|
index = 0;
|
|
15
15
|
return tabs.map((t, i) => ({ ...t, disabled: i > index }));
|
|
16
16
|
}
|
|
17
|
-
|
|
17
|
+
/**
|
|
18
|
+
* A Stepper is a tab view with a different appearance. To control the current tab (step), retrieve the controller by calling
|
|
19
|
+
* `useTabsController()` from within a tab (step) content.
|
|
20
|
+
*
|
|
21
|
+
* Besides all the properties in "Tabs", the "Stepper" can create a set of "Previous" and "Next" buttons through the property "buttons". By
|
|
22
|
+
* default, the buttons are rendered, to disable them, pass `buttons = false`.
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
*
|
|
26
|
+
* ```
|
|
27
|
+
* const steps: Tab[] = useMemo(() => [
|
|
28
|
+
* { key: 'step1', label: 'Step 1', content: <><h1>First step</h1><p>Content of the first step</p></> },
|
|
29
|
+
* { key: 'step2', label: 'Step 2', content: <><h1>Second step</h1><p>Content of the second step</p></> },
|
|
30
|
+
* { key: 'step3', label: 'Step 3', content: <><h1>Third step</h1><p>Content of the third step</p></> },
|
|
31
|
+
* ], [])
|
|
32
|
+
*
|
|
33
|
+
* return <Stepper tabs={steps} />
|
|
34
|
+
* ```
|
|
35
|
+
*/
|
|
36
|
+
export const Stepper = withRef(function Stepper({ tabs: initialTabs, controller: ctrl, value, onChange, buttons = true, className, ...props }) {
|
|
18
37
|
const controller = useMemo(() => ctrl ?? new TabController(initialTabs.map(t => t.key), value || initialTabs[0]?.key), []);
|
|
19
38
|
const [tabs, setTabs] = useState(getTabsWithDisabled(initialTabs, value));
|
|
20
39
|
const [selectedIndex, setSelectedIndex] = useState(findSelectedIndex(tabs, controller.getValue()));
|
|
@@ -36,7 +55,7 @@ function _Stepper({ tabs: initialTabs, controller: ctrl, value, onChange, button
|
|
|
36
55
|
buttons.onNext?.(controller.getValue());
|
|
37
56
|
}, []);
|
|
38
57
|
return buttons ? (_jsxs(Column, { ...props, className: className, gap: "20px", children: [_jsx(Tabs, { tabs: tabs, controller: controller, value: value, onChange: onChange, className: "stepper" }), _jsxs(Row, { justifyContent: (typeof buttons !== 'object' || !buttons.onCancel) && selectedIndex === 0 ? 'end' : 'space-between', children: [selectedIndex === 0 && typeof buttons === 'object' && buttons.onCancel && (_jsx(Button, { onClick: buttons.onCancel, colorScheme: "inverse", appearance: "outlined", children: buttons.cancel || t.cancel })), selectedIndex > 0 && buttons && (_jsx(Button, { onClick: onPrevious, colorScheme: "inverse", appearance: "outlined", children: (typeof buttons === 'object' && buttons.previous) || t.previous })), selectedIndex < tabs.length - 1 && buttons && (_jsx(Button, { onClick: onNext, children: (typeof buttons === 'object' && buttons.next) || t.next })), selectedIndex === tabs.length - 1 && typeof buttons === 'object' && buttons.onFinish && (_jsx(Button, { onClick: buttons.onFinish, children: buttons.finish || t.finish }))] })] })) : _jsx(Tabs, { tabs: tabs, controller: controller, value: value, onChange: onChange, className: listToClass([className, 'stepper']), ...props });
|
|
39
|
-
}
|
|
58
|
+
});
|
|
40
59
|
const dictionary = {
|
|
41
60
|
en: {
|
|
42
61
|
cancel: 'Cancel',
|
|
@@ -51,5 +70,4 @@ const dictionary = {
|
|
|
51
70
|
finish: 'Finalizar',
|
|
52
71
|
},
|
|
53
72
|
};
|
|
54
|
-
export const Stepper = withRef(_Stepper);
|
|
55
73
|
//# sourceMappingURL=Stepper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../src/components/Stepper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAEpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAoDhD,SAAS,mBAAmB,CAAqB,IAAgB,EAAE,KAAsB;IACvF,IAAI,KAAK,GAAG,iBAAiB,CAAC,IAAI,EAAE,KAAK,IAAI,EAAE,CAAC,CAAA;IAChD,IAAI,KAAK,GAAG,CAAC;QAAE,KAAK,GAAG,CAAC,CAAA;IACxB,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,QAAQ,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC,CAAA;AAC5D,CAAC;AAED,SAAS,
|
|
1
|
+
{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../src/components/Stepper.tsx"],"names":[],"mappings":"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"}
|
|
@@ -98,6 +98,16 @@ interface BaseTrProps {
|
|
|
98
98
|
export type TableProps = React.JSX.IntrinsicElements['table'] & BaseTableProps;
|
|
99
99
|
export type ThProps = React.JSX.IntrinsicElements['th'] & BaseThProps;
|
|
100
100
|
export type TrProps = React.JSX.IntrinsicElements['tr'] & BaseTrProps;
|
|
101
|
+
/**
|
|
102
|
+
* Renders an HTML table. Use its props for customizing the appearance.
|
|
103
|
+
*
|
|
104
|
+
* - If you need to use Accordion rows, use `<Tr>`instead of `<tr>`.
|
|
105
|
+
* - If you need to sort columns, use `<Th>`instead of `<th>`.
|
|
106
|
+
*
|
|
107
|
+
* This works exactly like the HTML tag "table".
|
|
108
|
+
*
|
|
109
|
+
* Attention: prefer using the component "SmartTable". Use this only if you need full control over the table.
|
|
110
|
+
*/
|
|
101
111
|
export declare const Table: ({ appearance, stripped, compressed, showBorders, showHeaderBorders, showRowBorders, rounded, roundedRows, uppercaseHeader, className, children, accordionRows, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element;
|
|
102
112
|
export declare const Th: ({ direction, onSort, children, className, ...props }: ThProps) => import("react/jsx-runtime").JSX.Element;
|
|
103
113
|
export declare const Tr: ({ ref: outerRef, accordion, accordionTrigger, accordionMaxHeight, children, className, style, onClick, ...props }: TrProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/components/Table.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACnC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,MAAM,CAAA;AAE7C,UAAU,WAAW;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,KAAK,IAAI,CAAC;CACxD;AAED,UAAU,WAAW;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACpC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,GAAG,cAAc,CAAA;AAC9E,MAAM,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,GAAG,WAAW,CAAA;AACrE,MAAM,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,GAAG,WAAW,CAAA;AAErE,eAAO,MAAM,KAAK,8KAGf,UAAU,4CAkBX,CAAA;AAEF,eAAO,MAAM,EAAE,yDAAkE,OAAO,4CA0BtF,CAAA;AAEF,eAAO,MAAM,EAAE,sHACuG,OAAO,4CA4C5H,CAAA"}
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/components/Table.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACnC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,MAAM,CAAA;AAE7C,UAAU,WAAW;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,KAAK,IAAI,CAAC;CACxD;AAED,UAAU,WAAW;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACpC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,GAAG,cAAc,CAAA;AAC9E,MAAM,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,GAAG,WAAW,CAAA;AACrE,MAAM,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,GAAG,WAAW,CAAA;AAErE;;;;;;;;;GASG;AACH,eAAO,MAAM,KAAK,8KAGf,UAAU,4CAkBX,CAAA;AAEF,eAAO,MAAM,EAAE,yDAAkE,OAAO,4CA0BtF,CAAA;AAEF,eAAO,MAAM,EAAE,sHACuG,OAAO,4CA4C5H,CAAA"}
|