@semcore/pills 5.0.1 → 5.0.2

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/CHANGELOG.md CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
  CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
4
4
 
5
+ ## [5.0.2] - 2023-07-24
6
+
7
+ ### Fixed
8
+
9
+ - `Pills` props strictness.
10
+
5
11
  ## [5.0.1] - 2023-07-18
6
12
 
7
13
  ### Fix
package/lib/cjs/Pills.js CHANGED
@@ -20,19 +20,19 @@ var _neighborLocation = _interopRequireWildcard(require("@semcore/neighbor-locat
20
20
  var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
21
21
  var _addonTextChildren = _interopRequireDefault(require("@semcore/utils/lib/addonTextChildren"));
22
22
  /*__reshadow-styles__:"./style/pills.shadow.css"*/
23
- var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SPill_psnyx_gg_,.___SPills_psnyx_gg_{display:inline-flex;align-items:center;justify-content:center;outline:0}.___SPills_psnyx_gg_{isolation:isolate}.___SPill_psnyx_gg_{line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:var(--intergalactic-bg-primary-neutral, #ffffff);border:1px solid var(--intergalactic-border-primary, #c4c7cf);border-radius:var(--intergalactic-control-rounded, 6px)}.___SPill_psnyx_gg_::-moz-focus-inner{border:0;padding:0}.___SPill_psnyx_gg_:active,.___SPill_psnyx_gg_:focus{outline:0;text-decoration:none}@media (hover:hover){.___SPill_psnyx_gg_:hover{outline:0;text-decoration:none;background:var(--intergalactic-bg-primary-neutral-hover, #f4f5f9)}}.___SPill_psnyx_gg_.__selected_psnyx_gg_{background:var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));border-color:var(--intergalactic-border-info-active, #006dca);z-index:1}.___SPill_psnyx_gg_.__disabled_psnyx_gg_{cursor:default;pointer-events:none}.___SPill_psnyx_gg_.__disabled_psnyx_gg_>*{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SPill_psnyx_gg_.__keyboardFocused_psnyx_gg_,.___SPills_psnyx_gg_.__keyboardFocused_psnyx_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SText_psnyx_gg_{color:var(--intergalactic-text-primary, #191b23);display:inline-flex}.___SAddon_psnyx_gg_{color:var(--intergalactic-text-secondary, #6c6e79);display:inline-flex;align-items:center;justify-content:center}.___SPill_psnyx_gg_._size_m_psnyx_gg_{height:var(--intergalactic-form-control-m, 28px);min-width:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px)}.___SPill_psnyx_gg_._size_l_psnyx_gg_ .___SText_psnyx_gg_,.___SPill_psnyx_gg_._size_m_psnyx_gg_ .___SText_psnyx_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_psnyx_gg_._size_m_psnyx_gg_ .___SAddon_psnyx_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPill_psnyx_gg_._size_m_psnyx_gg_ .___SAddon_psnyx_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_psnyx_gg_._size_m_psnyx_gg_ .___SAddon_psnyx_gg_:only-child{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_psnyx_gg_._size_l_psnyx_gg_{height:var(--intergalactic-form-control-l, 40px);min-width:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px)}.___SPill_psnyx_gg_._size_l_psnyx_gg_ .___SAddon_psnyx_gg_:only-child,.___SPill_psnyx_gg_._size_l_psnyx_gg_ .___SText_psnyx_gg_:only-child{margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_psnyx_gg_._size_l_psnyx_gg_ .___SAddon_psnyx_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SPill_psnyx_gg_._size_l_psnyx_gg_ .___SAddon_psnyx_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_psnyx_gg_._neighborLocation_right_psnyx_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_psnyx_gg_._neighborLocation_both_psnyx_gg_{border-radius:0;margin-left:-1px}.___SPill_psnyx_gg_._neighborLocation_left_psnyx_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}" /*__inner_css_end__*/, "psnyx_gg_") /*__reshadow_css_end__*/, {
24
- "__SPills": "___SPills_psnyx_gg_",
25
- "__SPill": "___SPill_psnyx_gg_",
26
- "_selected": "__selected_psnyx_gg_",
27
- "_disabled": "__disabled_psnyx_gg_",
28
- "_keyboardFocused": "__keyboardFocused_psnyx_gg_",
29
- "__SText": "___SText_psnyx_gg_",
30
- "__SAddon": "___SAddon_psnyx_gg_",
31
- "_size_m": "_size_m_psnyx_gg_",
32
- "_size_l": "_size_l_psnyx_gg_",
33
- "_neighborLocation_right": "_neighborLocation_right_psnyx_gg_",
34
- "_neighborLocation_both": "_neighborLocation_both_psnyx_gg_",
35
- "_neighborLocation_left": "_neighborLocation_left_psnyx_gg_"
23
+ var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SPill_1gpz9_gg_,.___SPills_1gpz9_gg_{display:inline-flex;align-items:center;justify-content:center;outline:0}.___SPills_1gpz9_gg_{isolation:isolate}.___SPill_1gpz9_gg_{line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:var(--intergalactic-bg-primary-neutral, #ffffff);border:1px solid var(--intergalactic-border-primary, #c4c7cf);border-radius:var(--intergalactic-control-rounded, 6px)}.___SPill_1gpz9_gg_::-moz-focus-inner{border:0;padding:0}.___SPill_1gpz9_gg_:active,.___SPill_1gpz9_gg_:focus{outline:0;text-decoration:none}@media (hover:hover){.___SPill_1gpz9_gg_:hover{outline:0;text-decoration:none;background:var(--intergalactic-bg-primary-neutral-hover, #f4f5f9)}}.___SPill_1gpz9_gg_.__selected_1gpz9_gg_{background:var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));border-color:var(--intergalactic-border-info-active, #006dca);z-index:1}.___SPill_1gpz9_gg_.__disabled_1gpz9_gg_{cursor:default;pointer-events:none}.___SPill_1gpz9_gg_.__disabled_1gpz9_gg_>*{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SPill_1gpz9_gg_.__keyboardFocused_1gpz9_gg_,.___SPills_1gpz9_gg_.__keyboardFocused_1gpz9_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SText_1gpz9_gg_{color:var(--intergalactic-text-primary, #191b23);display:inline-flex}.___SAddon_1gpz9_gg_{color:var(--intergalactic-text-secondary, #6c6e79);display:inline-flex;align-items:center;justify-content:center}.___SPill_1gpz9_gg_._size_m_1gpz9_gg_{height:var(--intergalactic-form-control-m, 28px);min-width:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px)}.___SPill_1gpz9_gg_._size_l_1gpz9_gg_ .___SText_1gpz9_gg_,.___SPill_1gpz9_gg_._size_m_1gpz9_gg_ .___SText_1gpz9_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1gpz9_gg_._size_m_1gpz9_gg_ .___SAddon_1gpz9_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPill_1gpz9_gg_._size_m_1gpz9_gg_ .___SAddon_1gpz9_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1gpz9_gg_._size_m_1gpz9_gg_ .___SAddon_1gpz9_gg_:only-child{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1gpz9_gg_._size_l_1gpz9_gg_{height:var(--intergalactic-form-control-l, 40px);min-width:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px)}.___SPill_1gpz9_gg_._size_l_1gpz9_gg_ .___SAddon_1gpz9_gg_:only-child,.___SPill_1gpz9_gg_._size_l_1gpz9_gg_ .___SText_1gpz9_gg_:only-child{margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_1gpz9_gg_._size_l_1gpz9_gg_ .___SAddon_1gpz9_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SPill_1gpz9_gg_._size_l_1gpz9_gg_ .___SAddon_1gpz9_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_1gpz9_gg_._neighborLocation_right_1gpz9_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_1gpz9_gg_._neighborLocation_both_1gpz9_gg_{border-radius:0;margin-left:-1px}.___SPill_1gpz9_gg_._neighborLocation_left_1gpz9_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}" /*__inner_css_end__*/, "1gpz9_gg_") /*__reshadow_css_end__*/, {
24
+ "__SPills": "___SPills_1gpz9_gg_",
25
+ "__SPill": "___SPill_1gpz9_gg_",
26
+ "_selected": "__selected_1gpz9_gg_",
27
+ "_disabled": "__disabled_1gpz9_gg_",
28
+ "_keyboardFocused": "__keyboardFocused_1gpz9_gg_",
29
+ "__SText": "___SText_1gpz9_gg_",
30
+ "__SAddon": "___SAddon_1gpz9_gg_",
31
+ "_size_m": "_size_m_1gpz9_gg_",
32
+ "_size_l": "_size_l_1gpz9_gg_",
33
+ "_neighborLocation_right": "_neighborLocation_right_1gpz9_gg_",
34
+ "_neighborLocation_both": "_neighborLocation_both_1gpz9_gg_",
35
+ "_neighborLocation_left": "_neighborLocation_left_1gpz9_gg_"
36
36
  });
37
37
  var RootPills = /*#__PURE__*/function (_Component) {
38
38
  (0, _inherits2["default"])(RootPills, _Component);
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { Box, BoxProps } from '@semcore/flex-box';\nimport { INeighborItemProps, NeighborLocationProps } from '@semcore/neighbor-location';\nimport { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nexport type PillsValue = string | number | boolean | null;\n\n/** @deprecated */\nexport interface IPillsProps<T extends PillsValue = PillsValue>\n extends PillsProps<T>,\n UnknownProperties {}\nexport type PillsProps<T extends PillsValue = PillsValue> = NeighborLocationProps &\n BoxProps & {\n /** Pills size */\n size?: 'l' | 'm';\n /** Disabled state */\n disabled?: boolean;\n /** Called when the selection is changed */\n onChange?:\n | ((value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void)\n | React.Dispatch<React.SetStateAction<T>>;\n /** Value for the selected pill */\n value?: T;\n /** Default value for the selected pill */\n defaultValue?: T;\n /** Sets semantic role for corresponding behavior,\n * when set to `radio` pressing left and right arrows\n * selects corresponding sibling pill.\n *\n * It's recommended to use `radio` behavior in forms\n * while `tabs` behavior for navigation and layout.\n * @default tabs\n */\n behavior?: 'tabs' | 'radio';\n };\n\n/** @deprecated */\nexport interface IPillProps extends PillProps, UnknownProperties {}\nexport type PillProps = BoxProps &\n INeighborItemProps &\n KeyboardFocusProps & {\n /** Pill value */\n value?: PillsValue;\n /** Disabled state */\n disabled?: boolean;\n /** Selected state */\n selected?: boolean;\n /** Left addon text */\n addonLeft?: React.ElementType;\n /** Right addon tag */\n addonRight?: React.ElementType;\n };\n\n/** @deprecated */\nexport interface IPillsContext extends PillsContext, UnknownProperties {}\nexport type PillsContext = {\n getItemProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface IPillsHandlers extends PillsHandlers, UnknownProperties {}\nexport type PillsHandlers = {\n value: (value: PillsValue) => void;\n};\n\ntype IntergalacticPillsComponent = (<\n Value extends PillsValue,\n Tag extends Intergalactic.Tag = 'div',\n>(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n PillsProps<Value>,\n PillsContext,\n [handlers: PillsHandlers]\n >,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n Intergalactic.InternalTypings.ComponentAdditive<'div'>;\n\ndeclare const Pills: IntergalacticPillsComponent & {\n Item: Intergalactic.Component<'button', PillProps, [handlers: PillsHandlers]> & {\n Text: typeof Box;\n Addon: typeof Box;\n };\n};\n\nexport default Pills;\n"],"mappings":""}
1
+ {"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { Box, BoxProps } from '@semcore/flex-box';\nimport { NeighborItemProps, NeighborLocationProps } from '@semcore/neighbor-location';\nimport { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nexport type PillsValue = string | number | boolean | null;\n\n/** @deprecated */\nexport interface IPillsProps<T extends PillsValue = PillsValue>\n extends PillsProps<T>,\n UnknownProperties {}\nexport type PillsProps<T extends PillsValue = PillsValue> = NeighborLocationProps &\n BoxProps & {\n /** Pills size */\n size?: 'l' | 'm';\n /** Disabled state */\n disabled?: boolean;\n /** Called when the selection is changed */\n onChange?:\n | ((value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void)\n | React.Dispatch<React.SetStateAction<T>>;\n /** Value for the selected pill */\n value?: T;\n /** Default value for the selected pill */\n defaultValue?: T;\n /** Sets semantic role for corresponding behavior,\n * when set to `radio` pressing left and right arrows\n * selects corresponding sibling pill.\n *\n * It's recommended to use `radio` behavior in forms\n * while `tabs` behavior for navigation and layout.\n * @default tabs\n */\n behavior?: 'tabs' | 'radio';\n };\n\n/** @deprecated */\nexport interface IPillProps extends PillProps, UnknownProperties {}\nexport type PillProps = BoxProps &\n NeighborItemProps &\n KeyboardFocusProps & {\n /** Pill value */\n value?: PillsValue;\n /** Disabled state */\n disabled?: boolean;\n /** Selected state */\n selected?: boolean;\n /** Left addon text */\n addonLeft?: React.ElementType;\n /** Right addon tag */\n addonRight?: React.ElementType;\n };\n\n/** @deprecated */\nexport interface IPillsContext extends PillsContext, UnknownProperties {}\nexport type PillsContext = {\n getItemProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface IPillsHandlers extends PillsHandlers, UnknownProperties {}\nexport type PillsHandlers = {\n value: (value: PillsValue) => void;\n};\n\ntype IntergalacticPillsComponent = (<\n Value extends PillsValue,\n Tag extends Intergalactic.Tag = 'div',\n>(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n PillsProps<Value>,\n PillsContext,\n [handlers: PillsHandlers]\n >,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n Intergalactic.InternalTypings.ComponentAdditive<'div'>;\n\ndeclare const Pills: IntergalacticPillsComponent & {\n Item: Intergalactic.Component<'button', PillProps, [handlers: PillsHandlers]> & {\n Text: typeof Box;\n Addon: typeof Box;\n };\n};\n\nexport default Pills;\n"],"mappings":""}
package/lib/es6/Pills.js CHANGED
@@ -17,19 +17,19 @@ import NeighborLocation, { useNeighborLocationDetect } from '@semcore/neighbor-l
17
17
  import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
18
18
  import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
19
19
  /*__reshadow-styles__:"./style/pills.shadow.css"*/
20
- var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SPill_psnyx_gg_,.___SPills_psnyx_gg_{display:inline-flex;align-items:center;justify-content:center;outline:0}.___SPills_psnyx_gg_{isolation:isolate}.___SPill_psnyx_gg_{line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:var(--intergalactic-bg-primary-neutral, #ffffff);border:1px solid var(--intergalactic-border-primary, #c4c7cf);border-radius:var(--intergalactic-control-rounded, 6px)}.___SPill_psnyx_gg_::-moz-focus-inner{border:0;padding:0}.___SPill_psnyx_gg_:active,.___SPill_psnyx_gg_:focus{outline:0;text-decoration:none}@media (hover:hover){.___SPill_psnyx_gg_:hover{outline:0;text-decoration:none;background:var(--intergalactic-bg-primary-neutral-hover, #f4f5f9)}}.___SPill_psnyx_gg_.__selected_psnyx_gg_{background:var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));border-color:var(--intergalactic-border-info-active, #006dca);z-index:1}.___SPill_psnyx_gg_.__disabled_psnyx_gg_{cursor:default;pointer-events:none}.___SPill_psnyx_gg_.__disabled_psnyx_gg_>*{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SPill_psnyx_gg_.__keyboardFocused_psnyx_gg_,.___SPills_psnyx_gg_.__keyboardFocused_psnyx_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SText_psnyx_gg_{color:var(--intergalactic-text-primary, #191b23);display:inline-flex}.___SAddon_psnyx_gg_{color:var(--intergalactic-text-secondary, #6c6e79);display:inline-flex;align-items:center;justify-content:center}.___SPill_psnyx_gg_._size_m_psnyx_gg_{height:var(--intergalactic-form-control-m, 28px);min-width:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px)}.___SPill_psnyx_gg_._size_l_psnyx_gg_ .___SText_psnyx_gg_,.___SPill_psnyx_gg_._size_m_psnyx_gg_ .___SText_psnyx_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_psnyx_gg_._size_m_psnyx_gg_ .___SAddon_psnyx_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPill_psnyx_gg_._size_m_psnyx_gg_ .___SAddon_psnyx_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_psnyx_gg_._size_m_psnyx_gg_ .___SAddon_psnyx_gg_:only-child{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_psnyx_gg_._size_l_psnyx_gg_{height:var(--intergalactic-form-control-l, 40px);min-width:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px)}.___SPill_psnyx_gg_._size_l_psnyx_gg_ .___SAddon_psnyx_gg_:only-child,.___SPill_psnyx_gg_._size_l_psnyx_gg_ .___SText_psnyx_gg_:only-child{margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_psnyx_gg_._size_l_psnyx_gg_ .___SAddon_psnyx_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SPill_psnyx_gg_._size_l_psnyx_gg_ .___SAddon_psnyx_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_psnyx_gg_._neighborLocation_right_psnyx_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_psnyx_gg_._neighborLocation_both_psnyx_gg_{border-radius:0;margin-left:-1px}.___SPill_psnyx_gg_._neighborLocation_left_psnyx_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}" /*__inner_css_end__*/, "psnyx_gg_") /*__reshadow_css_end__*/, {
21
- "__SPills": "___SPills_psnyx_gg_",
22
- "__SPill": "___SPill_psnyx_gg_",
23
- "_selected": "__selected_psnyx_gg_",
24
- "_disabled": "__disabled_psnyx_gg_",
25
- "_keyboardFocused": "__keyboardFocused_psnyx_gg_",
26
- "__SText": "___SText_psnyx_gg_",
27
- "__SAddon": "___SAddon_psnyx_gg_",
28
- "_size_m": "_size_m_psnyx_gg_",
29
- "_size_l": "_size_l_psnyx_gg_",
30
- "_neighborLocation_right": "_neighborLocation_right_psnyx_gg_",
31
- "_neighborLocation_both": "_neighborLocation_both_psnyx_gg_",
32
- "_neighborLocation_left": "_neighborLocation_left_psnyx_gg_"
20
+ var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SPill_1gpz9_gg_,.___SPills_1gpz9_gg_{display:inline-flex;align-items:center;justify-content:center;outline:0}.___SPills_1gpz9_gg_{isolation:isolate}.___SPill_1gpz9_gg_{line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:var(--intergalactic-bg-primary-neutral, #ffffff);border:1px solid var(--intergalactic-border-primary, #c4c7cf);border-radius:var(--intergalactic-control-rounded, 6px)}.___SPill_1gpz9_gg_::-moz-focus-inner{border:0;padding:0}.___SPill_1gpz9_gg_:active,.___SPill_1gpz9_gg_:focus{outline:0;text-decoration:none}@media (hover:hover){.___SPill_1gpz9_gg_:hover{outline:0;text-decoration:none;background:var(--intergalactic-bg-primary-neutral-hover, #f4f5f9)}}.___SPill_1gpz9_gg_.__selected_1gpz9_gg_{background:var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));border-color:var(--intergalactic-border-info-active, #006dca);z-index:1}.___SPill_1gpz9_gg_.__disabled_1gpz9_gg_{cursor:default;pointer-events:none}.___SPill_1gpz9_gg_.__disabled_1gpz9_gg_>*{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SPill_1gpz9_gg_.__keyboardFocused_1gpz9_gg_,.___SPills_1gpz9_gg_.__keyboardFocused_1gpz9_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SText_1gpz9_gg_{color:var(--intergalactic-text-primary, #191b23);display:inline-flex}.___SAddon_1gpz9_gg_{color:var(--intergalactic-text-secondary, #6c6e79);display:inline-flex;align-items:center;justify-content:center}.___SPill_1gpz9_gg_._size_m_1gpz9_gg_{height:var(--intergalactic-form-control-m, 28px);min-width:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px)}.___SPill_1gpz9_gg_._size_l_1gpz9_gg_ .___SText_1gpz9_gg_,.___SPill_1gpz9_gg_._size_m_1gpz9_gg_ .___SText_1gpz9_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1gpz9_gg_._size_m_1gpz9_gg_ .___SAddon_1gpz9_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPill_1gpz9_gg_._size_m_1gpz9_gg_ .___SAddon_1gpz9_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1gpz9_gg_._size_m_1gpz9_gg_ .___SAddon_1gpz9_gg_:only-child{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1gpz9_gg_._size_l_1gpz9_gg_{height:var(--intergalactic-form-control-l, 40px);min-width:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px)}.___SPill_1gpz9_gg_._size_l_1gpz9_gg_ .___SAddon_1gpz9_gg_:only-child,.___SPill_1gpz9_gg_._size_l_1gpz9_gg_ .___SText_1gpz9_gg_:only-child{margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_1gpz9_gg_._size_l_1gpz9_gg_ .___SAddon_1gpz9_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SPill_1gpz9_gg_._size_l_1gpz9_gg_ .___SAddon_1gpz9_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_1gpz9_gg_._neighborLocation_right_1gpz9_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_1gpz9_gg_._neighborLocation_both_1gpz9_gg_{border-radius:0;margin-left:-1px}.___SPill_1gpz9_gg_._neighborLocation_left_1gpz9_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}" /*__inner_css_end__*/, "1gpz9_gg_") /*__reshadow_css_end__*/, {
21
+ "__SPills": "___SPills_1gpz9_gg_",
22
+ "__SPill": "___SPill_1gpz9_gg_",
23
+ "_selected": "__selected_1gpz9_gg_",
24
+ "_disabled": "__disabled_1gpz9_gg_",
25
+ "_keyboardFocused": "__keyboardFocused_1gpz9_gg_",
26
+ "__SText": "___SText_1gpz9_gg_",
27
+ "__SAddon": "___SAddon_1gpz9_gg_",
28
+ "_size_m": "_size_m_1gpz9_gg_",
29
+ "_size_l": "_size_l_1gpz9_gg_",
30
+ "_neighborLocation_right": "_neighborLocation_right_1gpz9_gg_",
31
+ "_neighborLocation_both": "_neighborLocation_both_1gpz9_gg_",
32
+ "_neighborLocation_left": "_neighborLocation_left_1gpz9_gg_"
33
33
  });
34
34
  var RootPills = /*#__PURE__*/function (_Component) {
35
35
  _inherits(RootPills, _Component);
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { Box, BoxProps } from '@semcore/flex-box';\nimport { INeighborItemProps, NeighborLocationProps } from '@semcore/neighbor-location';\nimport { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nexport type PillsValue = string | number | boolean | null;\n\n/** @deprecated */\nexport interface IPillsProps<T extends PillsValue = PillsValue>\n extends PillsProps<T>,\n UnknownProperties {}\nexport type PillsProps<T extends PillsValue = PillsValue> = NeighborLocationProps &\n BoxProps & {\n /** Pills size */\n size?: 'l' | 'm';\n /** Disabled state */\n disabled?: boolean;\n /** Called when the selection is changed */\n onChange?:\n | ((value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void)\n | React.Dispatch<React.SetStateAction<T>>;\n /** Value for the selected pill */\n value?: T;\n /** Default value for the selected pill */\n defaultValue?: T;\n /** Sets semantic role for corresponding behavior,\n * when set to `radio` pressing left and right arrows\n * selects corresponding sibling pill.\n *\n * It's recommended to use `radio` behavior in forms\n * while `tabs` behavior for navigation and layout.\n * @default tabs\n */\n behavior?: 'tabs' | 'radio';\n };\n\n/** @deprecated */\nexport interface IPillProps extends PillProps, UnknownProperties {}\nexport type PillProps = BoxProps &\n INeighborItemProps &\n KeyboardFocusProps & {\n /** Pill value */\n value?: PillsValue;\n /** Disabled state */\n disabled?: boolean;\n /** Selected state */\n selected?: boolean;\n /** Left addon text */\n addonLeft?: React.ElementType;\n /** Right addon tag */\n addonRight?: React.ElementType;\n };\n\n/** @deprecated */\nexport interface IPillsContext extends PillsContext, UnknownProperties {}\nexport type PillsContext = {\n getItemProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface IPillsHandlers extends PillsHandlers, UnknownProperties {}\nexport type PillsHandlers = {\n value: (value: PillsValue) => void;\n};\n\ntype IntergalacticPillsComponent = (<\n Value extends PillsValue,\n Tag extends Intergalactic.Tag = 'div',\n>(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n PillsProps<Value>,\n PillsContext,\n [handlers: PillsHandlers]\n >,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n Intergalactic.InternalTypings.ComponentAdditive<'div'>;\n\ndeclare const Pills: IntergalacticPillsComponent & {\n Item: Intergalactic.Component<'button', PillProps, [handlers: PillsHandlers]> & {\n Text: typeof Box;\n Addon: typeof Box;\n };\n};\n\nexport default Pills;\n"],"mappings":""}
1
+ {"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { Box, BoxProps } from '@semcore/flex-box';\nimport { NeighborItemProps, NeighborLocationProps } from '@semcore/neighbor-location';\nimport { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nexport type PillsValue = string | number | boolean | null;\n\n/** @deprecated */\nexport interface IPillsProps<T extends PillsValue = PillsValue>\n extends PillsProps<T>,\n UnknownProperties {}\nexport type PillsProps<T extends PillsValue = PillsValue> = NeighborLocationProps &\n BoxProps & {\n /** Pills size */\n size?: 'l' | 'm';\n /** Disabled state */\n disabled?: boolean;\n /** Called when the selection is changed */\n onChange?:\n | ((value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void)\n | React.Dispatch<React.SetStateAction<T>>;\n /** Value for the selected pill */\n value?: T;\n /** Default value for the selected pill */\n defaultValue?: T;\n /** Sets semantic role for corresponding behavior,\n * when set to `radio` pressing left and right arrows\n * selects corresponding sibling pill.\n *\n * It's recommended to use `radio` behavior in forms\n * while `tabs` behavior for navigation and layout.\n * @default tabs\n */\n behavior?: 'tabs' | 'radio';\n };\n\n/** @deprecated */\nexport interface IPillProps extends PillProps, UnknownProperties {}\nexport type PillProps = BoxProps &\n NeighborItemProps &\n KeyboardFocusProps & {\n /** Pill value */\n value?: PillsValue;\n /** Disabled state */\n disabled?: boolean;\n /** Selected state */\n selected?: boolean;\n /** Left addon text */\n addonLeft?: React.ElementType;\n /** Right addon tag */\n addonRight?: React.ElementType;\n };\n\n/** @deprecated */\nexport interface IPillsContext extends PillsContext, UnknownProperties {}\nexport type PillsContext = {\n getItemProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface IPillsHandlers extends PillsHandlers, UnknownProperties {}\nexport type PillsHandlers = {\n value: (value: PillsValue) => void;\n};\n\ntype IntergalacticPillsComponent = (<\n Value extends PillsValue,\n Tag extends Intergalactic.Tag = 'div',\n>(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n PillsProps<Value>,\n PillsContext,\n [handlers: PillsHandlers]\n >,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n Intergalactic.InternalTypings.ComponentAdditive<'div'>;\n\ndeclare const Pills: IntergalacticPillsComponent & {\n Item: Intergalactic.Component<'button', PillProps, [handlers: PillsHandlers]> & {\n Text: typeof Box;\n Addon: typeof Box;\n };\n};\n\nexport default Pills;\n"],"mappings":""}
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
3
3
  import { Box, BoxProps } from '@semcore/flex-box';
4
- import { INeighborItemProps, NeighborLocationProps } from '@semcore/neighbor-location';
4
+ import { NeighborItemProps, NeighborLocationProps } from '@semcore/neighbor-location';
5
5
  import { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
6
6
 
7
7
  export type PillsValue = string | number | boolean | null;
@@ -38,7 +38,7 @@ export type PillsProps<T extends PillsValue = PillsValue> = NeighborLocationProp
38
38
  /** @deprecated */
39
39
  export interface IPillProps extends PillProps, UnknownProperties {}
40
40
  export type PillProps = BoxProps &
41
- INeighborItemProps &
41
+ NeighborItemProps &
42
42
  KeyboardFocusProps & {
43
43
  /** Pill value */
44
44
  value?: PillsValue;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/pills",
3
3
  "description": "Semrush Pills Component",
4
- "version": "5.0.1",
4
+ "version": "5.0.2",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
@@ -10,7 +10,7 @@
10
10
  "license": "MIT",
11
11
  "dependencies": {
12
12
  "@semcore/flex-box": "5.0.0",
13
- "@semcore/neighbor-location": "4.0.0",
13
+ "@semcore/neighbor-location": "4.0.1",
14
14
  "@semcore/utils": "4.0.0"
15
15
  },
16
16
  "peerDependencies": {