@semcore/base-components 17.0.0-prerelease.31 → 17.0.0-prerelease.36

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.
Files changed (11) hide show
  1. package/CHANGELOG.md +8 -1
  2. package/lib/cjs/components/flex-box/Box/useBox.js +24 -16
  3. package/lib/cjs/components/flex-box/Box/useBox.js.map +1 -1
  4. package/lib/cjs/components/flex-box/style/use-box.shadow.css +6 -0
  5. package/lib/es6/components/flex-box/Box/useBox.js +24 -16
  6. package/lib/es6/components/flex-box/Box/useBox.js.map +1 -1
  7. package/lib/es6/components/flex-box/style/use-box.shadow.css +6 -0
  8. package/lib/esm/components/flex-box/Box/useBox.mjs +25 -17
  9. package/lib/esm/components/flex-box/style/use-box.shadow.css +6 -0
  10. package/lib/types/components/flex-box/Box/useBox.d.ts +2 -0
  11. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
4
4
 
5
- ## [17.0.0] - 2026-03-27
5
+ ## [17.0.0] - 2026-04-10
6
6
 
7
7
  ### BREAK
8
8
 
@@ -11,6 +11,13 @@ CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangel
11
11
  - **outside-click**: Removed using `getNodeByRef`. Use `React.RefObject` instead.
12
12
  - **scroll-area**: Removed using `getNodeByRef`. Use `React.RefObject` instead.
13
13
 
14
+ ## [16.5.0] - 2026-04-01
15
+
16
+ ### Added
17
+
18
+ - **box**: Add `hoverCursor` to `Box`.
19
+ - `inset` property for the Box component.
20
+
14
21
  ## [16.4.2] - 2025-12-01
15
22
 
16
23
  ### Fixed
package/lib/cjs/components/flex-box/Box/useBox.js CHANGED
@@ -11,16 +11,18 @@ var _propsForElement = _interopRequireDefault(require("@semcore/core/lib/utils/p
11
11
  var _classnames = _interopRequireDefault(require("classnames"));
12
12
  var _react = _interopRequireDefault(require("react"));
13
13
  /*!__reshadow-styles__:"../style/use-box.shadow.css"*/
14
- const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SBox_1suvb_gg_._inAfterOutline_false_1suvb_gg_:focus-visible,.___SBox_1suvb_gg_._inAfterOutline_true_1suvb_gg_:focus-visible::after{z-index:1;outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}.___SBox_1suvb_gg_._inAfterOutline_false_1suvb_gg_.__invertOutline_1suvb_gg_:focus-visible,.___SBox_1suvb_gg_._inAfterOutline_true_1suvb_gg_.__invertOutline_1suvb_gg_:focus-visible::after{outline-color:var(--intergalactic-keyboard-focus-invert-outline, rgba(255, 255, 255, 0.8))}.___SBox_1suvb_gg_._inAfterOutline_true_1suvb_gg_:focus-visible::after{position:absolute;display:block;content:\"\";top:0;right:0;bottom:0;left:0;top:var(0);right:var(0);bottom:var(0);left:var(0)}.___SBoxInnerOutline_1suvb_gg_._inAfterOutline_false_1suvb_gg_:focus-visible,.___SBoxInnerOutline_1suvb_gg_._inAfterOutline_true_1suvb_gg_:focus-visible::after{outline-offset:-2px}.___SBoxSizing_1suvb_gg_{box-sizing:border-box}.___SBoxInline_1suvb_gg_{display:inline-block}", /*__inner_css_end__*/"1suvb_gg_"),
14
+ const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SBox_1x9qy_gg_._inAfterOutline_false_1x9qy_gg_:focus-visible,.___SBox_1x9qy_gg_._inAfterOutline_true_1x9qy_gg_:focus-visible::after{z-index:1;outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}.___SBox_1x9qy_gg_._inAfterOutline_false_1x9qy_gg_.__invertOutline_1x9qy_gg_:focus-visible,.___SBox_1x9qy_gg_._inAfterOutline_true_1x9qy_gg_.__invertOutline_1x9qy_gg_:focus-visible::after{outline-color:var(--intergalactic-keyboard-focus-invert-outline, rgba(255, 255, 255, 0.8))}.___SBox_1x9qy_gg_._inAfterOutline_true_1x9qy_gg_:focus-visible::after{position:absolute;display:block;content:\"\";top:0;right:0;bottom:0;left:0;top:var(0);right:var(0);bottom:var(0);left:var(0)}@media (hover:hover){.___SBox_1x9qy_gg_.__hoverCursor_1x9qy_gg_:hover{cursor:var(--hoverCursor_1x9qy)}}.___SBoxInnerOutline_1x9qy_gg_._inAfterOutline_false_1x9qy_gg_:focus-visible,.___SBoxInnerOutline_1x9qy_gg_._inAfterOutline_true_1x9qy_gg_:focus-visible::after{outline-offset:-2px}.___SBoxSizing_1x9qy_gg_{box-sizing:border-box}.___SBoxInline_1x9qy_gg_{display:inline-block}", /*__inner_css_end__*/"1x9qy_gg_"),
15
15
  /*__reshadow_css_end__*/
16
16
  {
17
- "__SBoxInnerOutline": "___SBoxInnerOutline_1suvb_gg_",
18
- "_inAfterOutline_false": "_inAfterOutline_false_1suvb_gg_",
19
- "_inAfterOutline_true": "_inAfterOutline_true_1suvb_gg_",
20
- "__SBoxSizing": "___SBoxSizing_1suvb_gg_",
21
- "__SBoxInline": "___SBoxInline_1suvb_gg_",
22
- "__SBox": "___SBox_1suvb_gg_",
23
- "_invertOutline": "__invertOutline_1suvb_gg_"
17
+ "__SBoxInnerOutline": "___SBoxInnerOutline_1x9qy_gg_",
18
+ "_inAfterOutline_false": "_inAfterOutline_false_1x9qy_gg_",
19
+ "_inAfterOutline_true": "_inAfterOutline_true_1x9qy_gg_",
20
+ "__SBoxSizing": "___SBoxSizing_1x9qy_gg_",
21
+ "__SBoxInline": "___SBoxInline_1x9qy_gg_",
22
+ "__SBox": "___SBox_1x9qy_gg_",
23
+ "_invertOutline": "__invertOutline_1x9qy_gg_",
24
+ "_hoverCursor": "__hoverCursor_1x9qy_gg_",
25
+ "--hoverCursor": "--hoverCursor_1x9qy"
24
26
  });
25
27
  /** @deprecated */
26
28
  function calculateIndentStyles(props, scaleIndent) {
@@ -94,25 +96,31 @@ function useBox(props, ref) {
94
96
  right,
95
97
  inset,
96
98
  zIndex,
99
+ hoverCursor,
97
100
  ...other
98
101
  } = props;
99
102
  const indentStyles = _react.default.useMemo(() => {
100
103
  return calculateIndentStyles(props, scaleIndent);
101
104
  }, [scaleIndent, display, w, h, wMin, wMax, hMin, hMax, flex, m, mt, mb, my, ml, mr, mx, p, pt, pb, py, pl, pr, px, position, top, left, bottom, right, inset, zIndex]);
102
105
  const styles = (0, _core.sstyled)(style);
106
+ const {
107
+ className: rootClassName,
108
+ style: rootStyle
109
+ } = styles.cn('SBox', {
110
+ SBoxSizing: boxSizing,
111
+ SBoxInline: inline,
112
+ SBoxInnerOutline: innerOutline,
113
+ inAfterOutline: inAfterOutline === true ? 'true' : 'false',
114
+ invertOutline,
115
+ hoverCursor
116
+ });
103
117
  if (Tag === _react.default.Fragment) return [_react.default.Fragment, {
104
118
  children: props.children
105
119
  }];
106
120
  return [Tag, {
107
121
  ref,
108
- 'className': (0, _classnames.default)(styles.cn('SBox', {
109
- SBoxSizing: boxSizing,
110
- SBoxInline: inline,
111
- SBoxInnerOutline: innerOutline,
112
- inAfterOutline: inAfterOutline === true ? 'true' : 'false',
113
- invertOutline
114
- }).className, className) || undefined,
115
- 'style': Object.assign({}, styleProp, css, indentStyles),
122
+ 'className': (0, _classnames.default)(rootClassName, className) || undefined,
123
+ 'style': Object.assign({}, rootStyle, styleProp, css, indentStyles),
116
124
  'data-ui-name': 'Box',
117
125
  ...(0, _propsForElement.default)(other, Tag)
118
126
  }];
package/lib/cjs/components/flex-box/Box/useBox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useBox.js","names":["_core","require","_indentStyles","_propsForElement","_interopRequireDefault","_classnames","_react","style","sstyled","insert","calculateIndentStyles","props","scaleIndent","removeUndefinedKeys","display","width","getSize","height","minWidth","maxWidth","minHeight","maxHeight","position","top","left","bottom","right","inset","flex","zIndex","textAlign","margin","getAutoOrScaleIndent","marginTop","marginBottom","marginLeft","marginRight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","useBox","ref","tag","Tag","className","styleProp","boxSizing","inline","innerOutline","invertOutline","inAfterOutline","w","h","wMin","wMax","hMin","hMax","m","mt","mb","my","ml","mr","mx","p","pt","pb","py","pl","pr","px","css","other","indentStyles","React","useMemo","styles","Fragment","children","cn","SBoxSizing","SBoxInline","SBoxInnerOutline","undefined","Object","assign","propsForElement"],"sources":["../../../../../src/components/flex-box/Box/useBox.tsx"],"sourcesContent":["import { sstyled, type UnknownProperties, type IStyledProps } from '@semcore/core';\nimport { getAutoOrScaleIndent, removeUndefinedKeys, getSize } from '@semcore/core/lib/utils/indentStyles';\nimport propsForElement from '@semcore/core/lib/utils/propsForElement';\nimport cn from 'classnames';\nimport type { Properties, Property } from 'csstype';\nimport React from 'react';\n\nimport style from '../style/use-box.shadow.css';\n\nexport type BoxProps = IStyledProps & {\n /**\n * CSS `display` property\n */\n display?: Property.Display;\n\n /** Sets the `inline-block` property */\n inline?: boolean;\n\n /** CSS `box-sizing: border-box` property */\n boxSizing?: boolean | 'border-box';\n\n /** CSS `flex` property */\n flex?: Property.Flex<string>;\n\n /** CSS `margin` property */\n m?: number | string;\n\n /** CSS `margin-top` property */\n mt?: number | string;\n\n /** CSS `margin-right` property */\n mr?: number | string;\n\n /** CSS `margin-bottom` property */\n mb?: number | string;\n\n /** CSS `margin-left` property */\n ml?: number | string;\n\n /** CSS `margin-left` and `margin-right` property */\n mx?: number | string;\n\n /** CSS `margin-top` and `margin-bottom` property */\n my?: number | string;\n\n /** CSS `padding` property */\n p?: number | string;\n\n /** CSS `padding-top` property */\n pt?: number | string;\n\n /** CSS `padding-right` property */\n pr?: number | string;\n\n /** CSS `padding-bottom` property */\n pb?: number | string;\n\n /** CSS `padding-left` property */\n pl?: number | string;\n\n /** CSS `padding-left` and `padding-right` property */\n px?: number | string;\n\n /** CSS `padding-top` and `padding-bottom` property */\n py?: number | string;\n\n /**\n * CSS `width` property.\n * If its value is less than 1, is considered as a fraction of 100%.\n * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n */\n w?: number | string;\n\n /**\n * CSS `min-width` property.\n * If its value is less than 1, is considered as a fraction of 100%.\n * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n */\n wMin?: number | string;\n\n /**\n * CSS `max-width` property.\n * If its value is less than 1, is considered as a fraction of 100%.\n * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n */\n wMax?: number | string;\n\n /**\n * CSS `height` property.\n * If its value is less than 1, is considered as a fraction of 100%.\n * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n */\n h?: number | string;\n\n /**\n * CSS `min-height` property.\n * If its value is less than 1, is considered as a fraction of 100%.\n * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n */\n hMin?: number | string;\n\n /**\n * CSS `max-height` property.\n * If its value is less than 1, is considered as a fraction of 100%.\n * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n */\n hMax?: number | string;\n\n /**\n * Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).\n * @default 4\n */\n scaleIndent?: number;\n\n /**\n * Flag for render outline inside box\n * @default false\n */\n innerOutline?: boolean;\n\n /**\n * Flag for render inverted outline\n * @default false\n */\n invertOutline?: boolean;\n\n /**\n * Flag for render outline in the ::after element\n * @default false\n */\n inAfterOutline?: boolean;\n /** CSS `position` property */\n position?: Property.Position;\n /** CSS `top` property */\n top?: number | string;\n /** CSS `left` property */\n left?: number | string;\n /** CSS `bottom` property */\n bottom?: number | string;\n /** CSS `right` property */\n right?: number | string;\n /** CSS `inset` property */\n inset?: string;\n /** CSS `z-index` property */\n zIndex?: number;\n /** CSS `text-align` property */\n textAlign?: Property.TextAlign;\n /** Box content */\n children?: React.ReactNode;\n};\n\n/** @deprecated */\nexport interface IBoxProps extends BoxProps, UnknownProperties {\n /**\n * HTML tag name for the displayed item\n * @default div\n */\n tag?: React.ElementType | string;\n}\n\nfunction calculateIndentStyles(props: BoxProps, scaleIndent: number) {\n return removeUndefinedKeys({\n display: props['display'],\n width: getSize(props['w']),\n height: getSize(props['h']),\n minWidth: getSize(props['wMin']),\n maxWidth: getSize(props['wMax']),\n minHeight: getSize(props['hMin']),\n maxHeight: getSize(props['hMax']),\n position: props['position'],\n top: getSize(props['top']),\n left: getSize(props['left']),\n bottom: getSize(props['bottom']),\n right: getSize(props['right']),\n inset: props.inset,\n flex: props.flex,\n zIndex: props.zIndex,\n textAlign: props.textAlign,\n\n margin: getAutoOrScaleIndent(props['m'], scaleIndent),\n marginTop:\n getAutoOrScaleIndent(props['mt'], scaleIndent) ||\n getAutoOrScaleIndent(props['my'], scaleIndent),\n marginBottom:\n getAutoOrScaleIndent(props['mb'], scaleIndent) ||\n getAutoOrScaleIndent(props['my'], scaleIndent),\n marginLeft:\n getAutoOrScaleIndent(props['ml'], scaleIndent) ||\n getAutoOrScaleIndent(props['mx'], scaleIndent),\n marginRight:\n getAutoOrScaleIndent(props['mr'], scaleIndent) ||\n getAutoOrScaleIndent(props['mx'], scaleIndent),\n\n padding: getAutoOrScaleIndent(props['p'], scaleIndent),\n paddingTop:\n getAutoOrScaleIndent(props['pt'], scaleIndent) ||\n getAutoOrScaleIndent(props['py'], scaleIndent),\n paddingBottom:\n getAutoOrScaleIndent(props['pb'], scaleIndent) ||\n getAutoOrScaleIndent(props['py'], scaleIndent),\n paddingLeft:\n getAutoOrScaleIndent(props['pl'], scaleIndent) ||\n getAutoOrScaleIndent(props['px'], scaleIndent),\n paddingRight:\n getAutoOrScaleIndent(props['pr'], scaleIndent) ||\n getAutoOrScaleIndent(props['px'], scaleIndent),\n });\n}\n\nexport default function useBox<T extends BoxProps>(\n props: T,\n ref: React.Ref<HTMLElement>,\n): [React.ElementType | string, any] {\n const {\n tag: Tag = 'div',\n className,\n style: styleProp,\n scaleIndent = 4,\n display,\n boxSizing,\n inline,\n innerOutline,\n invertOutline,\n inAfterOutline,\n flex,\n w,\n h,\n wMin,\n wMax,\n hMin,\n hMax,\n m,\n mt,\n mb,\n my,\n ml,\n mr,\n mx,\n p,\n pt,\n pb,\n py,\n pl,\n pr,\n px,\n css,\n position,\n top,\n left,\n bottom,\n right,\n inset,\n zIndex,\n ...other\n } = props as any;\n\n const indentStyles: Properties = React.useMemo(() => {\n return calculateIndentStyles(props, scaleIndent);\n }, [\n scaleIndent,\n display,\n w,\n h,\n wMin,\n wMax,\n hMin,\n hMax,\n flex,\n m,\n mt,\n mb,\n my,\n ml,\n mr,\n mx,\n p,\n pt,\n pb,\n py,\n pl,\n pr,\n px,\n position,\n top,\n left,\n bottom,\n right,\n inset,\n zIndex,\n ]);\n\n const styles = sstyled(style);\n\n if (Tag === React.Fragment) return [React.Fragment, { children: props.children }];\n\n return [\n Tag,\n {\n ref,\n 'className':\n cn(\n styles.cn('SBox', {\n SBoxSizing: boxSizing,\n SBoxInline: inline,\n SBoxInnerOutline: innerOutline,\n inAfterOutline: inAfterOutline === true ? 'true' : 'false',\n invertOutline,\n }).className,\n className,\n ) || undefined,\n 'style': Object.assign({}, styleProp, css, indentStyles),\n 'data-ui-name': 'Box',\n ...propsForElement(other, Tag),\n },\n ];\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"useBox.js","names":["_core","require","_indentStyles","_propsForElement","_interopRequireDefault","_classnames","_react","style","sstyled","insert","calculateIndentStyles","props","scaleIndent","removeUndefinedKeys","display","width","getSize","height","minWidth","maxWidth","minHeight","maxHeight","position","top","left","bottom","right","inset","flex","zIndex","textAlign","margin","getAutoOrScaleIndent","marginTop","marginBottom","marginLeft","marginRight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","useBox","ref","tag","Tag","className","styleProp","boxSizing","inline","innerOutline","invertOutline","inAfterOutline","w","h","wMin","wMax","hMin","hMax","m","mt","mb","my","ml","mr","mx","p","pt","pb","py","pl","pr","px","css","hoverCursor","other","indentStyles","React","useMemo","styles","rootClassName","rootStyle","cn","SBoxSizing","SBoxInline","SBoxInnerOutline","Fragment","children","undefined","Object","assign","propsForElement"],"sources":["../../../../../src/components/flex-box/Box/useBox.tsx"],"sourcesContent":["import { sstyled, type UnknownProperties, type IStyledProps } from '@semcore/core';\nimport { getAutoOrScaleIndent, removeUndefinedKeys, getSize } from '@semcore/core/lib/utils/indentStyles';\nimport propsForElement from '@semcore/core/lib/utils/propsForElement';\nimport cn from 'classnames';\nimport type { Properties, Property } from 'csstype';\nimport React from 'react';\n\nimport style from '../style/use-box.shadow.css';\n\nexport type BoxProps = IStyledProps & {\n /**\n * CSS `display` property\n */\n display?: Property.Display;\n\n /** Sets the `inline-block` property */\n inline?: boolean;\n\n /** CSS `box-sizing: border-box` property */\n boxSizing?: boolean | 'border-box';\n\n /** CSS `flex` property */\n flex?: Property.Flex<string>;\n\n /** CSS `margin` property */\n m?: number | string;\n\n /** CSS `margin-top` property */\n mt?: number | string;\n\n /** CSS `margin-right` property */\n mr?: number | string;\n\n /** CSS `margin-bottom` property */\n mb?: number | string;\n\n /** CSS `margin-left` property */\n ml?: number | string;\n\n /** CSS `margin-left` and `margin-right` property */\n mx?: number | string;\n\n /** CSS `margin-top` and `margin-bottom` property */\n my?: number | string;\n\n /** CSS `padding` property */\n p?: number | string;\n\n /** CSS `padding-top` property */\n pt?: number | string;\n\n /** CSS `padding-right` property */\n pr?: number | string;\n\n /** CSS `padding-bottom` property */\n pb?: number | string;\n\n /** CSS `padding-left` property */\n pl?: number | string;\n\n /** CSS `padding-left` and `padding-right` property */\n px?: number | string;\n\n /** CSS `padding-top` and `padding-bottom` property */\n py?: number | string;\n\n /**\n * CSS `width` property.\n * If its value is less than 1, is considered as a fraction of 100%.\n * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n */\n w?: number | string;\n\n /**\n * CSS `min-width` property.\n * If its value is less than 1, is considered as a fraction of 100%.\n * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n */\n wMin?: number | string;\n\n /**\n * CSS `max-width` property.\n * If its value is less than 1, is considered as a fraction of 100%.\n * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n */\n wMax?: number | string;\n\n /**\n * CSS `height` property.\n * If its value is less than 1, is considered as a fraction of 100%.\n * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n */\n h?: number | string;\n\n /**\n * CSS `min-height` property.\n * If its value is less than 1, is considered as a fraction of 100%.\n * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n */\n hMin?: number | string;\n\n /**\n * CSS `max-height` property.\n * If its value is less than 1, is considered as a fraction of 100%.\n * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n */\n hMax?: number | string;\n\n /**\n * Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).\n * @default 4\n */\n scaleIndent?: number;\n\n /**\n * Flag for render outline inside box\n * @default false\n */\n innerOutline?: boolean;\n\n /**\n * Flag for render inverted outline\n * @default false\n */\n invertOutline?: boolean;\n\n /**\n * Flag for render outline in the ::after element\n * @default false\n */\n inAfterOutline?: boolean;\n /** CSS `position` property */\n position?: Property.Position;\n /** CSS `top` property */\n top?: number | string;\n /** CSS `left` property */\n left?: number | string;\n /** CSS `bottom` property */\n bottom?: number | string;\n /** CSS `right` property */\n right?: number | string;\n /** CSS `inset` property */\n inset?: string;\n /** CSS `z-index` property */\n zIndex?: number;\n /** CSS `text-align` property */\n textAlign?: Property.TextAlign;\n /** Box content */\n children?: React.ReactNode;\n /** Hover cursor */\n hoverCursor?: Property.Cursor;\n};\n\n/** @deprecated */\nexport interface IBoxProps extends BoxProps, UnknownProperties {\n /**\n * HTML tag name for the displayed item\n * @default div\n */\n tag?: React.ElementType | string;\n}\n\nfunction calculateIndentStyles(props: BoxProps, scaleIndent: number) {\n return removeUndefinedKeys({\n display: props['display'],\n width: getSize(props['w']),\n height: getSize(props['h']),\n minWidth: getSize(props['wMin']),\n maxWidth: getSize(props['wMax']),\n minHeight: getSize(props['hMin']),\n maxHeight: getSize(props['hMax']),\n position: props['position'],\n top: getSize(props['top']),\n left: getSize(props['left']),\n bottom: getSize(props['bottom']),\n right: getSize(props['right']),\n inset: props.inset,\n flex: props.flex,\n zIndex: props.zIndex,\n textAlign: props.textAlign,\n\n margin: getAutoOrScaleIndent(props['m'], scaleIndent),\n marginTop:\n getAutoOrScaleIndent(props['mt'], scaleIndent) ||\n getAutoOrScaleIndent(props['my'], scaleIndent),\n marginBottom:\n getAutoOrScaleIndent(props['mb'], scaleIndent) ||\n getAutoOrScaleIndent(props['my'], scaleIndent),\n marginLeft:\n getAutoOrScaleIndent(props['ml'], scaleIndent) ||\n getAutoOrScaleIndent(props['mx'], scaleIndent),\n marginRight:\n getAutoOrScaleIndent(props['mr'], scaleIndent) ||\n getAutoOrScaleIndent(props['mx'], scaleIndent),\n\n padding: getAutoOrScaleIndent(props['p'], scaleIndent),\n paddingTop:\n getAutoOrScaleIndent(props['pt'], scaleIndent) ||\n getAutoOrScaleIndent(props['py'], scaleIndent),\n paddingBottom:\n getAutoOrScaleIndent(props['pb'], scaleIndent) ||\n getAutoOrScaleIndent(props['py'], scaleIndent),\n paddingLeft:\n getAutoOrScaleIndent(props['pl'], scaleIndent) ||\n getAutoOrScaleIndent(props['px'], scaleIndent),\n paddingRight:\n getAutoOrScaleIndent(props['pr'], scaleIndent) ||\n getAutoOrScaleIndent(props['px'], scaleIndent),\n });\n}\n\nexport default function useBox<T extends BoxProps>(\n props: T,\n ref: React.Ref<HTMLElement>,\n): [React.ElementType | string, any] {\n const {\n tag: Tag = 'div',\n className,\n style: styleProp,\n scaleIndent = 4,\n display,\n boxSizing,\n inline,\n innerOutline,\n invertOutline,\n inAfterOutline,\n flex,\n w,\n h,\n wMin,\n wMax,\n hMin,\n hMax,\n m,\n mt,\n mb,\n my,\n ml,\n mr,\n mx,\n p,\n pt,\n pb,\n py,\n pl,\n pr,\n px,\n css,\n position,\n top,\n left,\n bottom,\n right,\n inset,\n zIndex,\n hoverCursor,\n ...other\n } = props as any;\n\n const indentStyles: Properties = React.useMemo(() => {\n return calculateIndentStyles(props, scaleIndent);\n }, [\n scaleIndent,\n display,\n w,\n h,\n wMin,\n wMax,\n hMin,\n hMax,\n flex,\n m,\n mt,\n mb,\n my,\n ml,\n mr,\n mx,\n p,\n pt,\n pb,\n py,\n pl,\n pr,\n px,\n position,\n top,\n left,\n bottom,\n right,\n inset,\n zIndex,\n ]);\n\n const styles = sstyled(style);\n const { className: rootClassName, style: rootStyle } = styles.cn('SBox', {\n SBoxSizing: boxSizing,\n SBoxInline: inline,\n SBoxInnerOutline: innerOutline,\n inAfterOutline: inAfterOutline === true ? 'true' : 'false',\n invertOutline,\n hoverCursor,\n });\n\n if (Tag === React.Fragment) return [React.Fragment, { children: props.children }];\n\n return [\n Tag,\n {\n ref,\n 'className':\n cn(\n rootClassName,\n className,\n ) || undefined,\n 'style': Object.assign({}, rootStyle, styleProp, css, indentStyles),\n 'data-ui-name': 'Box',\n ...propsForElement(other, Tag),\n },\n ];\n}\n"],"mappings":"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","ignoreList":[]}
package/lib/cjs/components/flex-box/style/use-box.shadow.css CHANGED
@@ -25,6 +25,12 @@ SBox[inAfterOutline='true']:focus-visible {
25
25
  outline-color: var(--intergalactic-keyboard-focus-invert-outline, rgba(255, 255, 255, 0.8));
26
26
  }
27
27
  }
28
+
29
+ SBox[hoverCursor] {
30
+ &:hover {
31
+ cursor: var(--hoverCursor);
32
+ }
33
+ }
28
34
  SBoxInnerOutline[inAfterOutline='false']:focus-visible {
29
35
  outline-offset: -2px;
30
36
  }
package/lib/es6/components/flex-box/Box/useBox.js CHANGED
@@ -5,16 +5,18 @@ import propsForElement from '@semcore/core/lib/utils/propsForElement';
5
5
  import cn from 'classnames';
6
6
  import React from 'react';
7
7
  /*!__reshadow-styles__:"../style/use-box.shadow.css"*/
8
- const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SBox_1suvb_gg_._inAfterOutline_false_1suvb_gg_:focus-visible,.___SBox_1suvb_gg_._inAfterOutline_true_1suvb_gg_:focus-visible::after{z-index:1;outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}.___SBox_1suvb_gg_._inAfterOutline_false_1suvb_gg_.__invertOutline_1suvb_gg_:focus-visible,.___SBox_1suvb_gg_._inAfterOutline_true_1suvb_gg_.__invertOutline_1suvb_gg_:focus-visible::after{outline-color:var(--intergalactic-keyboard-focus-invert-outline, rgba(255, 255, 255, 0.8))}.___SBox_1suvb_gg_._inAfterOutline_true_1suvb_gg_:focus-visible::after{position:absolute;display:block;content:\"\";top:0;right:0;bottom:0;left:0;top:var(0);right:var(0);bottom:var(0);left:var(0)}.___SBoxInnerOutline_1suvb_gg_._inAfterOutline_false_1suvb_gg_:focus-visible,.___SBoxInnerOutline_1suvb_gg_._inAfterOutline_true_1suvb_gg_:focus-visible::after{outline-offset:-2px}.___SBoxSizing_1suvb_gg_{box-sizing:border-box}.___SBoxInline_1suvb_gg_{display:inline-block}", /*__inner_css_end__*/"1suvb_gg_"),
8
+ const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SBox_1x9qy_gg_._inAfterOutline_false_1x9qy_gg_:focus-visible,.___SBox_1x9qy_gg_._inAfterOutline_true_1x9qy_gg_:focus-visible::after{z-index:1;outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}.___SBox_1x9qy_gg_._inAfterOutline_false_1x9qy_gg_.__invertOutline_1x9qy_gg_:focus-visible,.___SBox_1x9qy_gg_._inAfterOutline_true_1x9qy_gg_.__invertOutline_1x9qy_gg_:focus-visible::after{outline-color:var(--intergalactic-keyboard-focus-invert-outline, rgba(255, 255, 255, 0.8))}.___SBox_1x9qy_gg_._inAfterOutline_true_1x9qy_gg_:focus-visible::after{position:absolute;display:block;content:\"\";top:0;right:0;bottom:0;left:0;top:var(0);right:var(0);bottom:var(0);left:var(0)}@media (hover:hover){.___SBox_1x9qy_gg_.__hoverCursor_1x9qy_gg_:hover{cursor:var(--hoverCursor_1x9qy)}}.___SBoxInnerOutline_1x9qy_gg_._inAfterOutline_false_1x9qy_gg_:focus-visible,.___SBoxInnerOutline_1x9qy_gg_._inAfterOutline_true_1x9qy_gg_:focus-visible::after{outline-offset:-2px}.___SBoxSizing_1x9qy_gg_{box-sizing:border-box}.___SBoxInline_1x9qy_gg_{display:inline-block}", /*__inner_css_end__*/"1x9qy_gg_"),
9
9
  /*__reshadow_css_end__*/
10
10
  {
11
- "__SBoxInnerOutline": "___SBoxInnerOutline_1suvb_gg_",
12
- "_inAfterOutline_false": "_inAfterOutline_false_1suvb_gg_",
13
- "_inAfterOutline_true": "_inAfterOutline_true_1suvb_gg_",
14
- "__SBoxSizing": "___SBoxSizing_1suvb_gg_",
15
- "__SBoxInline": "___SBoxInline_1suvb_gg_",
16
- "__SBox": "___SBox_1suvb_gg_",
17
- "_invertOutline": "__invertOutline_1suvb_gg_"
11
+ "__SBoxInnerOutline": "___SBoxInnerOutline_1x9qy_gg_",
12
+ "_inAfterOutline_false": "_inAfterOutline_false_1x9qy_gg_",
13
+ "_inAfterOutline_true": "_inAfterOutline_true_1x9qy_gg_",
14
+ "__SBoxSizing": "___SBoxSizing_1x9qy_gg_",
15
+ "__SBoxInline": "___SBoxInline_1x9qy_gg_",
16
+ "__SBox": "___SBox_1x9qy_gg_",
17
+ "_invertOutline": "__invertOutline_1x9qy_gg_",
18
+ "_hoverCursor": "__hoverCursor_1x9qy_gg_",
19
+ "--hoverCursor": "--hoverCursor_1x9qy"
18
20
  });
19
21
  /** @deprecated */
20
22
  function calculateIndentStyles(props, scaleIndent) {
@@ -88,25 +90,31 @@ export default function useBox(props, ref) {
88
90
  right,
89
91
  inset,
90
92
  zIndex,
93
+ hoverCursor,
91
94
  ...other
92
95
  } = props;
93
96
  const indentStyles = React.useMemo(() => {
94
97
  return calculateIndentStyles(props, scaleIndent);
95
98
  }, [scaleIndent, display, w, h, wMin, wMax, hMin, hMax, flex, m, mt, mb, my, ml, mr, mx, p, pt, pb, py, pl, pr, px, position, top, left, bottom, right, inset, zIndex]);
96
99
  const styles = sstyled(style);
100
+ const {
101
+ className: rootClassName,
102
+ style: rootStyle
103
+ } = styles.cn('SBox', {
104
+ SBoxSizing: boxSizing,
105
+ SBoxInline: inline,
106
+ SBoxInnerOutline: innerOutline,
107
+ inAfterOutline: inAfterOutline === true ? 'true' : 'false',
108
+ invertOutline,
109
+ hoverCursor
110
+ });
97
111
  if (Tag === React.Fragment) return [React.Fragment, {
98
112
  children: props.children
99
113
  }];
100
114
  return [Tag, {
101
115
  ref,
102
- 'className': cn(styles.cn('SBox', {
103
- SBoxSizing: boxSizing,
104
- SBoxInline: inline,
105
- SBoxInnerOutline: innerOutline,
106
- inAfterOutline: inAfterOutline === true ? 'true' : 'false',
107
- invertOutline
108
- }).className, className) || undefined,
109
- 'style': Object.assign({}, styleProp, css, indentStyles),
116
+ 'className': cn(rootClassName, className) || undefined,
117
+ 'style': Object.assign({}, rootStyle, styleProp, css, indentStyles),
110
118
  'data-ui-name': 'Box',
111
119
  ...propsForElement(other, Tag)
112
120
  }];
package/lib/es6/components/flex-box/Box/useBox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useBox.js","names":["sstyled","getAutoOrScaleIndent","removeUndefinedKeys","getSize","propsForElement","cn","React","style","_sstyled","insert","calculateIndentStyles","props","scaleIndent","display","width","height","minWidth","maxWidth","minHeight","maxHeight","position","top","left","bottom","right","inset","flex","zIndex","textAlign","margin","marginTop","marginBottom","marginLeft","marginRight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","useBox","ref","tag","Tag","className","styleProp","boxSizing","inline","innerOutline","invertOutline","inAfterOutline","w","h","wMin","wMax","hMin","hMax","m","mt","mb","my","ml","mr","mx","p","pt","pb","py","pl","pr","px","css","other","indentStyles","useMemo","styles","Fragment","children","SBoxSizing","SBoxInline","SBoxInnerOutline","undefined","Object","assign"],"sources":["../../../../../src/components/flex-box/Box/useBox.tsx"],"sourcesContent":["import { sstyled, type UnknownProperties, type IStyledProps } from '@semcore/core';\nimport { getAutoOrScaleIndent, removeUndefinedKeys, getSize } from '@semcore/core/lib/utils/indentStyles';\nimport propsForElement from '@semcore/core/lib/utils/propsForElement';\nimport cn from 'classnames';\nimport type { Properties, Property } from 'csstype';\nimport React from 'react';\n\nimport style from '../style/use-box.shadow.css';\n\nexport type BoxProps = IStyledProps & {\n /**\n * CSS `display` property\n */\n display?: Property.Display;\n\n /** Sets the `inline-block` property */\n inline?: boolean;\n\n /** CSS `box-sizing: border-box` property */\n boxSizing?: boolean | 'border-box';\n\n /** CSS `flex` property */\n flex?: Property.Flex<string>;\n\n /** CSS `margin` property */\n m?: number | string;\n\n /** CSS `margin-top` property */\n mt?: number | string;\n\n /** CSS `margin-right` property */\n mr?: number | string;\n\n /** CSS `margin-bottom` property */\n mb?: number | string;\n\n /** CSS `margin-left` property */\n ml?: number | string;\n\n /** CSS `margin-left` and `margin-right` property */\n mx?: number | string;\n\n /** CSS `margin-top` and `margin-bottom` property */\n my?: number | string;\n\n /** CSS `padding` property */\n p?: number | string;\n\n /** CSS `padding-top` property */\n pt?: number | string;\n\n /** CSS `padding-right` property */\n pr?: number | string;\n\n /** CSS `padding-bottom` property */\n pb?: number | string;\n\n /** CSS `padding-left` property */\n pl?: number | string;\n\n /** CSS `padding-left` and `padding-right` property */\n px?: number | string;\n\n /** CSS `padding-top` and `padding-bottom` property */\n py?: number | string;\n\n /**\n * CSS `width` property.\n * If its value is less than 1, is considered as a fraction of 100%.\n * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n */\n w?: number | string;\n\n /**\n * CSS `min-width` property.\n * If its value is less than 1, is considered as a fraction of 100%.\n * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n */\n wMin?: number | string;\n\n /**\n * CSS `max-width` property.\n * If its value is less than 1, is considered as a fraction of 100%.\n * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n */\n wMax?: number | string;\n\n /**\n * CSS `height` property.\n * If its value is less than 1, is considered as a fraction of 100%.\n * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n */\n h?: number | string;\n\n /**\n * CSS `min-height` property.\n * If its value is less than 1, is considered as a fraction of 100%.\n * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n */\n hMin?: number | string;\n\n /**\n * CSS `max-height` property.\n * If its value is less than 1, is considered as a fraction of 100%.\n * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n */\n hMax?: number | string;\n\n /**\n * Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).\n * @default 4\n */\n scaleIndent?: number;\n\n /**\n * Flag for render outline inside box\n * @default false\n */\n innerOutline?: boolean;\n\n /**\n * Flag for render inverted outline\n * @default false\n */\n invertOutline?: boolean;\n\n /**\n * Flag for render outline in the ::after element\n * @default false\n */\n inAfterOutline?: boolean;\n /** CSS `position` property */\n position?: Property.Position;\n /** CSS `top` property */\n top?: number | string;\n /** CSS `left` property */\n left?: number | string;\n /** CSS `bottom` property */\n bottom?: number | string;\n /** CSS `right` property */\n right?: number | string;\n /** CSS `inset` property */\n inset?: string;\n /** CSS `z-index` property */\n zIndex?: number;\n /** CSS `text-align` property */\n textAlign?: Property.TextAlign;\n /** Box content */\n children?: React.ReactNode;\n};\n\n/** @deprecated */\nexport interface IBoxProps extends BoxProps, UnknownProperties {\n /**\n * HTML tag name for the displayed item\n * @default div\n */\n tag?: React.ElementType | string;\n}\n\nfunction calculateIndentStyles(props: BoxProps, scaleIndent: number) {\n return removeUndefinedKeys({\n display: props['display'],\n width: getSize(props['w']),\n height: getSize(props['h']),\n minWidth: getSize(props['wMin']),\n maxWidth: getSize(props['wMax']),\n minHeight: getSize(props['hMin']),\n maxHeight: getSize(props['hMax']),\n position: props['position'],\n top: getSize(props['top']),\n left: getSize(props['left']),\n bottom: getSize(props['bottom']),\n right: getSize(props['right']),\n inset: props.inset,\n flex: props.flex,\n zIndex: props.zIndex,\n textAlign: props.textAlign,\n\n margin: getAutoOrScaleIndent(props['m'], scaleIndent),\n marginTop:\n getAutoOrScaleIndent(props['mt'], scaleIndent) ||\n getAutoOrScaleIndent(props['my'], scaleIndent),\n marginBottom:\n getAutoOrScaleIndent(props['mb'], scaleIndent) ||\n getAutoOrScaleIndent(props['my'], scaleIndent),\n marginLeft:\n getAutoOrScaleIndent(props['ml'], scaleIndent) ||\n getAutoOrScaleIndent(props['mx'], scaleIndent),\n marginRight:\n getAutoOrScaleIndent(props['mr'], scaleIndent) ||\n getAutoOrScaleIndent(props['mx'], scaleIndent),\n\n padding: getAutoOrScaleIndent(props['p'], scaleIndent),\n paddingTop:\n getAutoOrScaleIndent(props['pt'], scaleIndent) ||\n getAutoOrScaleIndent(props['py'], scaleIndent),\n paddingBottom:\n getAutoOrScaleIndent(props['pb'], scaleIndent) ||\n getAutoOrScaleIndent(props['py'], scaleIndent),\n paddingLeft:\n getAutoOrScaleIndent(props['pl'], scaleIndent) ||\n getAutoOrScaleIndent(props['px'], scaleIndent),\n paddingRight:\n getAutoOrScaleIndent(props['pr'], scaleIndent) ||\n getAutoOrScaleIndent(props['px'], scaleIndent),\n });\n}\n\nexport default function useBox<T extends BoxProps>(\n props: T,\n ref: React.Ref<HTMLElement>,\n): [React.ElementType | string, any] {\n const {\n tag: Tag = 'div',\n className,\n style: styleProp,\n scaleIndent = 4,\n display,\n boxSizing,\n inline,\n innerOutline,\n invertOutline,\n inAfterOutline,\n flex,\n w,\n h,\n wMin,\n wMax,\n hMin,\n hMax,\n m,\n mt,\n mb,\n my,\n ml,\n mr,\n mx,\n p,\n pt,\n pb,\n py,\n pl,\n pr,\n px,\n css,\n position,\n top,\n left,\n bottom,\n right,\n inset,\n zIndex,\n ...other\n } = props as any;\n\n const indentStyles: Properties = React.useMemo(() => {\n return calculateIndentStyles(props, scaleIndent);\n }, [\n scaleIndent,\n display,\n w,\n h,\n wMin,\n wMax,\n hMin,\n hMax,\n flex,\n m,\n mt,\n mb,\n my,\n ml,\n mr,\n mx,\n p,\n pt,\n pb,\n py,\n pl,\n pr,\n px,\n position,\n top,\n left,\n bottom,\n right,\n inset,\n zIndex,\n ]);\n\n const styles = sstyled(style);\n\n if (Tag === React.Fragment) return [React.Fragment, { children: props.children }];\n\n return [\n Tag,\n {\n ref,\n 'className':\n cn(\n styles.cn('SBox', {\n SBoxSizing: boxSizing,\n SBoxInline: inline,\n SBoxInnerOutline: innerOutline,\n inAfterOutline: inAfterOutline === true ? 'true' : 'false',\n invertOutline,\n }).className,\n className,\n ) || undefined,\n 'style': Object.assign({}, styleProp, css, indentStyles),\n 'data-ui-name': 'Box',\n ...propsForElement(other, Tag),\n },\n ];\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"useBox.js","names":["sstyled","getAutoOrScaleIndent","removeUndefinedKeys","getSize","propsForElement","cn","React","style","_sstyled","insert","calculateIndentStyles","props","scaleIndent","display","width","height","minWidth","maxWidth","minHeight","maxHeight","position","top","left","bottom","right","inset","flex","zIndex","textAlign","margin","marginTop","marginBottom","marginLeft","marginRight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","useBox","ref","tag","Tag","className","styleProp","boxSizing","inline","innerOutline","invertOutline","inAfterOutline","w","h","wMin","wMax","hMin","hMax","m","mt","mb","my","ml","mr","mx","p","pt","pb","py","pl","pr","px","css","hoverCursor","other","indentStyles","useMemo","styles","rootClassName","rootStyle","SBoxSizing","SBoxInline","SBoxInnerOutline","Fragment","children","undefined","Object","assign"],"sources":["../../../../../src/components/flex-box/Box/useBox.tsx"],"sourcesContent":["import { sstyled, type UnknownProperties, type IStyledProps } from '@semcore/core';\nimport { getAutoOrScaleIndent, removeUndefinedKeys, getSize } from '@semcore/core/lib/utils/indentStyles';\nimport propsForElement from '@semcore/core/lib/utils/propsForElement';\nimport cn from 'classnames';\nimport type { Properties, Property } from 'csstype';\nimport React from 'react';\n\nimport style from '../style/use-box.shadow.css';\n\nexport type BoxProps = IStyledProps & {\n /**\n * CSS `display` property\n */\n display?: Property.Display;\n\n /** Sets the `inline-block` property */\n inline?: boolean;\n\n /** CSS `box-sizing: border-box` property */\n boxSizing?: boolean | 'border-box';\n\n /** CSS `flex` property */\n flex?: Property.Flex<string>;\n\n /** CSS `margin` property */\n m?: number | string;\n\n /** CSS `margin-top` property */\n mt?: number | string;\n\n /** CSS `margin-right` property */\n mr?: number | string;\n\n /** CSS `margin-bottom` property */\n mb?: number | string;\n\n /** CSS `margin-left` property */\n ml?: number | string;\n\n /** CSS `margin-left` and `margin-right` property */\n mx?: number | string;\n\n /** CSS `margin-top` and `margin-bottom` property */\n my?: number | string;\n\n /** CSS `padding` property */\n p?: number | string;\n\n /** CSS `padding-top` property */\n pt?: number | string;\n\n /** CSS `padding-right` property */\n pr?: number | string;\n\n /** CSS `padding-bottom` property */\n pb?: number | string;\n\n /** CSS `padding-left` property */\n pl?: number | string;\n\n /** CSS `padding-left` and `padding-right` property */\n px?: number | string;\n\n /** CSS `padding-top` and `padding-bottom` property */\n py?: number | string;\n\n /**\n * CSS `width` property.\n * If its value is less than 1, is considered as a fraction of 100%.\n * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n */\n w?: number | string;\n\n /**\n * CSS `min-width` property.\n * If its value is less than 1, is considered as a fraction of 100%.\n * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n */\n wMin?: number | string;\n\n /**\n * CSS `max-width` property.\n * If its value is less than 1, is considered as a fraction of 100%.\n * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n */\n wMax?: number | string;\n\n /**\n * CSS `height` property.\n * If its value is less than 1, is considered as a fraction of 100%.\n * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n */\n h?: number | string;\n\n /**\n * CSS `min-height` property.\n * If its value is less than 1, is considered as a fraction of 100%.\n * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n */\n hMin?: number | string;\n\n /**\n * CSS `max-height` property.\n * If its value is less than 1, is considered as a fraction of 100%.\n * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n */\n hMax?: number | string;\n\n /**\n * Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).\n * @default 4\n */\n scaleIndent?: number;\n\n /**\n * Flag for render outline inside box\n * @default false\n */\n innerOutline?: boolean;\n\n /**\n * Flag for render inverted outline\n * @default false\n */\n invertOutline?: boolean;\n\n /**\n * Flag for render outline in the ::after element\n * @default false\n */\n inAfterOutline?: boolean;\n /** CSS `position` property */\n position?: Property.Position;\n /** CSS `top` property */\n top?: number | string;\n /** CSS `left` property */\n left?: number | string;\n /** CSS `bottom` property */\n bottom?: number | string;\n /** CSS `right` property */\n right?: number | string;\n /** CSS `inset` property */\n inset?: string;\n /** CSS `z-index` property */\n zIndex?: number;\n /** CSS `text-align` property */\n textAlign?: Property.TextAlign;\n /** Box content */\n children?: React.ReactNode;\n /** Hover cursor */\n hoverCursor?: Property.Cursor;\n};\n\n/** @deprecated */\nexport interface IBoxProps extends BoxProps, UnknownProperties {\n /**\n * HTML tag name for the displayed item\n * @default div\n */\n tag?: React.ElementType | string;\n}\n\nfunction calculateIndentStyles(props: BoxProps, scaleIndent: number) {\n return removeUndefinedKeys({\n display: props['display'],\n width: getSize(props['w']),\n height: getSize(props['h']),\n minWidth: getSize(props['wMin']),\n maxWidth: getSize(props['wMax']),\n minHeight: getSize(props['hMin']),\n maxHeight: getSize(props['hMax']),\n position: props['position'],\n top: getSize(props['top']),\n left: getSize(props['left']),\n bottom: getSize(props['bottom']),\n right: getSize(props['right']),\n inset: props.inset,\n flex: props.flex,\n zIndex: props.zIndex,\n textAlign: props.textAlign,\n\n margin: getAutoOrScaleIndent(props['m'], scaleIndent),\n marginTop:\n getAutoOrScaleIndent(props['mt'], scaleIndent) ||\n getAutoOrScaleIndent(props['my'], scaleIndent),\n marginBottom:\n getAutoOrScaleIndent(props['mb'], scaleIndent) ||\n getAutoOrScaleIndent(props['my'], scaleIndent),\n marginLeft:\n getAutoOrScaleIndent(props['ml'], scaleIndent) ||\n getAutoOrScaleIndent(props['mx'], scaleIndent),\n marginRight:\n getAutoOrScaleIndent(props['mr'], scaleIndent) ||\n getAutoOrScaleIndent(props['mx'], scaleIndent),\n\n padding: getAutoOrScaleIndent(props['p'], scaleIndent),\n paddingTop:\n getAutoOrScaleIndent(props['pt'], scaleIndent) ||\n getAutoOrScaleIndent(props['py'], scaleIndent),\n paddingBottom:\n getAutoOrScaleIndent(props['pb'], scaleIndent) ||\n getAutoOrScaleIndent(props['py'], scaleIndent),\n paddingLeft:\n getAutoOrScaleIndent(props['pl'], scaleIndent) ||\n getAutoOrScaleIndent(props['px'], scaleIndent),\n paddingRight:\n getAutoOrScaleIndent(props['pr'], scaleIndent) ||\n getAutoOrScaleIndent(props['px'], scaleIndent),\n });\n}\n\nexport default function useBox<T extends BoxProps>(\n props: T,\n ref: React.Ref<HTMLElement>,\n): [React.ElementType | string, any] {\n const {\n tag: Tag = 'div',\n className,\n style: styleProp,\n scaleIndent = 4,\n display,\n boxSizing,\n inline,\n innerOutline,\n invertOutline,\n inAfterOutline,\n flex,\n w,\n h,\n wMin,\n wMax,\n hMin,\n hMax,\n m,\n mt,\n mb,\n my,\n ml,\n mr,\n mx,\n p,\n pt,\n pb,\n py,\n pl,\n pr,\n px,\n css,\n position,\n top,\n left,\n bottom,\n right,\n inset,\n zIndex,\n hoverCursor,\n ...other\n } = props as any;\n\n const indentStyles: Properties = React.useMemo(() => {\n return calculateIndentStyles(props, scaleIndent);\n }, [\n scaleIndent,\n display,\n w,\n h,\n wMin,\n wMax,\n hMin,\n hMax,\n flex,\n m,\n mt,\n mb,\n my,\n ml,\n mr,\n mx,\n p,\n pt,\n pb,\n py,\n pl,\n pr,\n px,\n position,\n top,\n left,\n bottom,\n right,\n inset,\n zIndex,\n ]);\n\n const styles = sstyled(style);\n const { className: rootClassName, style: rootStyle } = styles.cn('SBox', {\n SBoxSizing: boxSizing,\n SBoxInline: inline,\n SBoxInnerOutline: innerOutline,\n inAfterOutline: inAfterOutline === true ? 'true' : 'false',\n invertOutline,\n hoverCursor,\n });\n\n if (Tag === React.Fragment) return [React.Fragment, { children: props.children }];\n\n return [\n Tag,\n {\n ref,\n 'className':\n cn(\n rootClassName,\n className,\n ) || undefined,\n 'style': Object.assign({}, rootStyle, styleProp, css, indentStyles),\n 'data-ui-name': 'Box',\n ...propsForElement(other, Tag),\n },\n ];\n}\n"],"mappings":"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","ignoreList":[]}
package/lib/es6/components/flex-box/style/use-box.shadow.css CHANGED
@@ -25,6 +25,12 @@ SBox[inAfterOutline='true']:focus-visible {
25
25
  outline-color: var(--intergalactic-keyboard-focus-invert-outline, rgba(255, 255, 255, 0.8));
26
26
  }
27
27
  }
28
+
29
+ SBox[hoverCursor] {
30
+ &:hover {
31
+ cursor: var(--hoverCursor);
32
+ }
33
+ }
28
34
  SBoxInnerOutline[inAfterOutline='false']:focus-visible {
29
35
  outline-offset: -2px;
30
36
  }
package/lib/esm/components/flex-box/Box/useBox.mjs CHANGED
@@ -8,18 +8,20 @@ const style = (
8
8
  /*__reshadow_css_start__*/
9
9
  (sstyled.insert(
10
10
  /*__inner_css_start__*/
11
- '.___SBox_1suvb_gg_._inAfterOutline_false_1suvb_gg_:focus-visible,.___SBox_1suvb_gg_._inAfterOutline_true_1suvb_gg_:focus-visible::after{z-index:1;outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}.___SBox_1suvb_gg_._inAfterOutline_false_1suvb_gg_.__invertOutline_1suvb_gg_:focus-visible,.___SBox_1suvb_gg_._inAfterOutline_true_1suvb_gg_.__invertOutline_1suvb_gg_:focus-visible::after{outline-color:var(--intergalactic-keyboard-focus-invert-outline, rgba(255, 255, 255, 0.8))}.___SBox_1suvb_gg_._inAfterOutline_true_1suvb_gg_:focus-visible::after{position:absolute;display:block;content:"";top:0;right:0;bottom:0;left:0;top:var(0);right:var(0);bottom:var(0);left:var(0)}.___SBoxInnerOutline_1suvb_gg_._inAfterOutline_false_1suvb_gg_:focus-visible,.___SBoxInnerOutline_1suvb_gg_._inAfterOutline_true_1suvb_gg_:focus-visible::after{outline-offset:-2px}.___SBoxSizing_1suvb_gg_{box-sizing:border-box}.___SBoxInline_1suvb_gg_{display:inline-block}',
11
+ '.___SBox_1x9qy_gg_._inAfterOutline_false_1x9qy_gg_:focus-visible,.___SBox_1x9qy_gg_._inAfterOutline_true_1x9qy_gg_:focus-visible::after{z-index:1;outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}.___SBox_1x9qy_gg_._inAfterOutline_false_1x9qy_gg_.__invertOutline_1x9qy_gg_:focus-visible,.___SBox_1x9qy_gg_._inAfterOutline_true_1x9qy_gg_.__invertOutline_1x9qy_gg_:focus-visible::after{outline-color:var(--intergalactic-keyboard-focus-invert-outline, rgba(255, 255, 255, 0.8))}.___SBox_1x9qy_gg_._inAfterOutline_true_1x9qy_gg_:focus-visible::after{position:absolute;display:block;content:"";top:0;right:0;bottom:0;left:0;top:var(0);right:var(0);bottom:var(0);left:var(0)}@media (hover:hover){.___SBox_1x9qy_gg_.__hoverCursor_1x9qy_gg_:hover{cursor:var(--hoverCursor_1x9qy)}}.___SBoxInnerOutline_1x9qy_gg_._inAfterOutline_false_1x9qy_gg_:focus-visible,.___SBoxInnerOutline_1x9qy_gg_._inAfterOutline_true_1x9qy_gg_:focus-visible::after{outline-offset:-2px}.___SBoxSizing_1x9qy_gg_{box-sizing:border-box}.___SBoxInline_1x9qy_gg_{display:inline-block}',
12
12
  /*__inner_css_end__*/
13
- "1suvb_gg_"
13
+ "1x9qy_gg_"
14
14
  ), /*__reshadow_css_end__*/
15
15
  {
16
- "__SBoxInnerOutline": "___SBoxInnerOutline_1suvb_gg_",
17
- "_inAfterOutline_false": "_inAfterOutline_false_1suvb_gg_",
18
- "_inAfterOutline_true": "_inAfterOutline_true_1suvb_gg_",
19
- "__SBoxSizing": "___SBoxSizing_1suvb_gg_",
20
- "__SBoxInline": "___SBoxInline_1suvb_gg_",
21
- "__SBox": "___SBox_1suvb_gg_",
22
- "_invertOutline": "__invertOutline_1suvb_gg_"
16
+ "__SBoxInnerOutline": "___SBoxInnerOutline_1x9qy_gg_",
17
+ "_inAfterOutline_false": "_inAfterOutline_false_1x9qy_gg_",
18
+ "_inAfterOutline_true": "_inAfterOutline_true_1x9qy_gg_",
19
+ "__SBoxSizing": "___SBoxSizing_1x9qy_gg_",
20
+ "__SBoxInline": "___SBoxInline_1x9qy_gg_",
21
+ "__SBox": "___SBox_1x9qy_gg_",
22
+ "_invertOutline": "__invertOutline_1x9qy_gg_",
23
+ "_hoverCursor": "__hoverCursor_1x9qy_gg_",
24
+ "--hoverCursor": "--hoverCursor_1x9qy"
23
25
  })
24
26
  );
25
27
  function calculateIndentStyles(props, scaleIndent) {
@@ -93,25 +95,31 @@ function useBox(props, ref) {
93
95
  right,
94
96
  inset,
95
97
  zIndex,
98
+ hoverCursor,
96
99
  ...other
97
100
  } = props;
98
101
  const indentStyles = React.useMemo(() => {
99
102
  return calculateIndentStyles(props, scaleIndent);
100
103
  }, [scaleIndent, display, w, h, wMin, wMax, hMin, hMax, flex, m, mt, mb, my, ml, mr, mx, p, pt, pb, py, pl, pr, px, position, top, left, bottom, right, inset, zIndex]);
101
104
  const styles = sstyled(style);
105
+ const {
106
+ className: rootClassName,
107
+ style: rootStyle
108
+ } = styles.cn("SBox", {
109
+ SBoxSizing: boxSizing,
110
+ SBoxInline: inline,
111
+ SBoxInnerOutline: innerOutline,
112
+ inAfterOutline: inAfterOutline === true ? "true" : "false",
113
+ invertOutline,
114
+ hoverCursor
115
+ });
102
116
  if (Tag === React.Fragment) return [React.Fragment, {
103
117
  children: props.children
104
118
  }];
105
119
  return [Tag, {
106
120
  ref,
107
- "className": cn(styles.cn("SBox", {
108
- SBoxSizing: boxSizing,
109
- SBoxInline: inline,
110
- SBoxInnerOutline: innerOutline,
111
- inAfterOutline: inAfterOutline === true ? "true" : "false",
112
- invertOutline
113
- }).className, className) || void 0,
114
- "style": Object.assign({}, styleProp, css, indentStyles),
121
+ "className": cn(rootClassName, className) || void 0,
122
+ "style": Object.assign({}, rootStyle, styleProp, css, indentStyles),
115
123
  "data-ui-name": "Box",
116
124
  ...propsForElement(other, Tag)
117
125
  }];
package/lib/esm/components/flex-box/style/use-box.shadow.css CHANGED
@@ -25,6 +25,12 @@ SBox[inAfterOutline='true']:focus-visible {
25
25
  outline-color: var(--intergalactic-keyboard-focus-invert-outline, rgba(255, 255, 255, 0.8));
26
26
  }
27
27
  }
28
+
29
+ SBox[hoverCursor] {
30
+ &:hover {
31
+ cursor: var(--hoverCursor);
32
+ }
33
+ }
28
34
  SBoxInnerOutline[inAfterOutline='false']:focus-visible {
29
35
  outline-offset: -2px;
30
36
  }
package/lib/types/components/flex-box/Box/useBox.d.ts CHANGED
@@ -114,6 +114,8 @@ export type BoxProps = IStyledProps & {
114
114
  textAlign?: Property.TextAlign;
115
115
  /** Box content */
116
116
  children?: React.ReactNode;
117
+ /** Hover cursor */
118
+ hoverCursor?: Property.Cursor;
117
119
  };
118
120
  /** @deprecated */
119
121
  export interface IBoxProps extends BoxProps, UnknownProperties {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/base-components",
3
3
  "description": "Semrush Base Components",
4
- "version": "17.0.0-prerelease.31",
4
+ "version": "17.0.0-prerelease.36",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/esm/index.mjs",
7
7
  "typings": "lib/types/index.d.ts",
@@ -32,7 +32,7 @@
32
32
  },
33
33
  "devDependencies": {
34
34
  "@types/classnames": "2.2.6",
35
- "@semcore/core": "17.0.0-prerelease.31",
35
+ "@semcore/core": "17.0.0-prerelease.36",
36
36
  "@semcore/testing-utils": "1.0.0"
37
37
  },
38
38
  "scripts": {