npm - @salt-ds/lab - Versions diffs - 1.0.0-alpha.71 → 1.0.0-alpha.73 - Mend

@salt-ds/lab 1.0.0-alpha.71 → 1.0.0-alpha.73

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 (668) hide show

package/dist-es/responsive/OverflowReducer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OverflowReducer.js","sources":["../src/responsive/OverflowReducer.ts"],"sourcesContent":["/*\n This reducer manages a collection of items that represent the content of an overflowable container.\n * The items are mostly content configured by the caller of the container, either data passed though\n * the source prop or as child elements. We also support 'injected' items. These allow for additional UI\n * controls to be inserted into the container, eg an 'Add Item' button.\n */\nimport {\n Children,\n type ReactElement,\n type ReactNode,\n type Reducer,\n isValidElement,\n} from \"react\";\n\nimport type {\n InjectedChildItem,\n InjectedSourceItem,\n OverflowCollectionOptions,\n OverflowItem,\n OverflowItems,\n OverflowSource,\n} from \"./overflowTypes\";\n\ninterface InitAction {\n type: \"init\";\n overflowItems?: OverflowItem[];\n}\n\ninterface SourceAction {\n type: \"add-source-item\";\n idRoot: string;\n source: any;\n}\ninterface AddChildAction {\n type: \"add-child-item\";\n idRoot: string;\n indexPosition?: number;\n element: ReactElement;\n}\ninterface RemoveItemAction {\n type: \"remove-item\";\n indexPosition: number;\n}\n\ninterface MultiItemAction {\n type: \"update-items\" \| \"update-items-remove-overflow-indicator\";\n overflowItems: (Partial<Omit<OverflowItem, \"id\">> &\n Pick<OverflowItem, \"id\">)[];\n}\ninterface SingleItemAction {\n type:\n \| \"add-overflow-indicator\"\n \| \"replace-item\"\n \| \"collapsing-item\"\n \| \"uncollapse-dynamic-item\"\n \| \"collapse-instant-item\";\n\n overflowItem: OverflowItem;\n}\n\ninterface CombinedItemAction {\n type: \"update-items-add-overflow-indicator\";\n overflowItem: OverflowItem<any>;\n overflowItems: OverflowItem[];\n}\n\ninterface EmptyPayloadAction {\n type: \"restore-collapsing-item\";\n}\ninterface DynamicCollapseAction extends Omit<SingleItemAction, \"type\"> {\n type: \"collapse-dynamic-item\";\n collapsedSize: number;\n minSize: number;\n}\n\nexport type OverflowAction =\n \| AddChildAction\n \| CombinedItemAction\n \| DynamicCollapseAction\n \| EmptyPayloadAction\n \| InitAction\n \| MultiItemAction\n \| RemoveItemAction\n \| SingleItemAction\n \| SourceAction;\n\nconst DEFAULT_PRIORITY = 3;\n\nconst mapReactElementChildren = (\n children: ReactNode,\n fn: (el: ReactElement, index: number) => OverflowItem,\n): OverflowItem[] => {\n const childElements: OverflowItem[] = [];\n Children.forEach(children, (child, i) => {\n if (isValidElement(child)) {\n childElements.push(fn(child, i));\n }\n });\n return childElements;\n};\n\nconst sourceItem = (\n item: OverflowSource,\n id: string,\n index: number,\n options?: OverflowCollectionOptions,\n): OverflowItem<\"source\"> => {\n const priority =\n options?.getPriority?.(item, index) ?? item.priority ?? DEFAULT_PRIORITY;\n\n return {\n //TODO editable closeable configurable via item\n closeable: item.closeable \|\| options?.closeable,\n editable: options?.editable,\n element: null,\n fullSize: null,\n id: item.id ?? id,\n index,\n label: item.label,\n position: item.position,\n priority,\n size: 0,\n source: item,\n type: \"source\",\n };\n};\n\nconst createSourceItems = (\n source: any,\n idRoot: string,\n options?: OverflowCollectionOptions,\n): OverflowItem<\"source\">[] \| undefined => {\n if (Array.isArray(source)) {\n return source.map((item, index) => {\n const priority = options?.getPriority?.(source, index);\n return sourceItem(item, `${idRoot}-${index}`, index, options);\n });\n }\n};\n\ntype OverflowChild = {\n closeable?: boolean;\n disabled?: boolean;\n id?: string;\n label?: string;\n \"data-collapsible\"?: boolean;\n \"data-editable\"?: boolean;\n \"data-position\"?: number;\n \"data-priority\"?: string;\n};\n\nconst childItem = (\n child: ReactElement,\n id: string,\n index: number,\n options?: OverflowCollectionOptions,\n): OverflowItem<\"child\"> => {\n const {\n closeable,\n disabled,\n id: idProp,\n label,\n \"data-collapsible\": collapsible,\n \"data-editable\": editable,\n \"data-position\": dataPosition,\n \"data-priority\": dataPriority = \"2\",\n } = child.props as OverflowChild;\n\n const priority = options?.getPriority?.(child, index);\n\n return {\n closeable: closeable \|\| options?.closeable,\n collapsible,\n editable: editable ? true : options?.editable,\n disabled,\n fullSize: null,\n id: idProp ?? id,\n index,\n element: child,\n label,\n position: dataPosition,\n priority: priority ?? Number.parseInt(dataPriority),\n size: 0,\n source: null,\n type: \"child\",\n } as OverflowItem;\n};\n\nconst createChildItems = (\n children: ReactNode,\n idRoot: string,\n options?: OverflowCollectionOptions,\n): OverflowItem<\"child\">[] \| undefined => {\n if (children) {\n return mapReactElementChildren(children, (child, index) => {\n const id = `${idRoot}-${index}`;\n return childItem(child, id, index, options);\n });\n }\n};\n\nconst createInjectedContent = (\n items: Array<InjectedSourceItem \| InjectedChildItem>,\n idRoot: string,\n startIndex: number,\n): OverflowItem<\"source\" \| \"child\">[] => {\n return items.map((item, i) => {\n const index = startIndex + i;\n const id = `${idRoot}-${index}`;\n const { source } = item as InjectedSourceItem;\n if (source) {\n const injectedItem = sourceItem(source, id, index);\n injectedItem.isInjectedItem = true;\n return injectedItem;\n }\n const { element } = item as InjectedChildItem;\n const injectedItem = childItem(element, id, index);\n injectedItem.isInjectedItem = true;\n return injectedItem;\n });\n};\n\nexport type OverflowReducer = Reducer<OverflowItems, OverflowAction>;\n\nconst defaultOptions = {};\n\nexport type OverflowReducerInitialisationProps = {\n children?: ReactNode;\n source?: OverflowSource[];\n injectedItems?: any[];\n idRoot: string;\n options?: OverflowCollectionOptions;\n};\n\nexport const reducerInitialiser: (\n props: OverflowReducerInitialisationProps,\n) => OverflowItems = ({\n children,\n source,\n injectedItems = [],\n idRoot,\n options = defaultOptions,\n}) => {\n const providedContent: OverflowItems =\n createChildItems(children, idRoot, options) \|\|\n createSourceItems(source, idRoot, options) \|\|\n [];\n const injectedContent = createInjectedContent(\n injectedItems,\n idRoot,\n providedContent.length,\n );\n return providedContent.concat(injectedContent);\n};\n\nconst collapsingItem = (\n items: OverflowItem[],\n { overflowItem }: SingleItemAction,\n) =>\n items.map((item) =>\n item === overflowItem\n ? {\n ...item,\n collapsing: true,\n }\n : item,\n );\n\nconst uncollapseDynamicItem = (\n items: OverflowItem[],\n { overflowItem }: SingleItemAction,\n) =>\n items.map((item) =>\n item === overflowItem\n ? {\n ...item,\n collapsed: false,\n collapsing: true,\n size: item.fullSize as number,\n fullSize: null,\n }\n : item,\n );\n\nconst collapseInstantItem = (\n items: OverflowItem[],\n { overflowItem }: SingleItemAction,\n) =>\n items.map((item) =>\n item === overflowItem\n ? {\n ...item,\n collapsed: true,\n }\n : item,\n );\n\nconst replaceItem = (\n items: OverflowItem[],\n { overflowItem }: SingleItemAction,\n) =>\n items.map((item) =>\n item.index === overflowItem?.index ? overflowItem : item,\n );\n\nconst updateItems = (\n items: OverflowItem[],\n { overflowItems = [] }: MultiItemAction,\n) => {\n return items.map((item) => {\n const targetItem = overflowItems.find((i) => i.id === item.id);\n return targetItem ? { ...item, ...targetItem } : item;\n });\n};\n\nconst restoreCollapsingItem = (items: OverflowItem[]) => {\n const collapsingItem = items.find(\n ({ collapsible, collapsing }) => collapsible === \"dynamic\" && collapsing,\n );\n const collapsedItem = items.find(\n ({ collapsible, collapsed }) => collapsible === \"dynamic\" && collapsed,\n );\n return items.map((item) => {\n if (item === collapsingItem) {\n return {\n ...item,\n collapsing: false,\n };\n }\n if (item === collapsedItem) {\n return {\n ...item,\n collapsed: false,\n collapsing: true,\n };\n }\n return item;\n });\n};\n\nconst collapseDynamicItem = (\n items: OverflowItem[],\n { overflowItem, collapsedSize = 0, minSize = 0 }: DynamicCollapseAction,\n) => {\n const remainingUncollpasedItems = items.filter(\n (i) => i.collapsible === \"dynamic\" && !i.collapsed && i !== overflowItem,\n );\n const lastUncollapsedItem = remainingUncollpasedItems.pop();\n\n return items.map((item) => {\n if (item === overflowItem) {\n return {\n ...item,\n collapsing: false,\n collapsed: true,\n fullSize: item.size,\n minSize,\n size: collapsedSize,\n };\n }\n if (item === lastUncollapsedItem) {\n return {\n ...item,\n collapsing: true,\n };\n }\n return item;\n });\n};\n\nconst addSourceItem = (\n items: OverflowItem<any>[],\n { idRoot, source }: SourceAction,\n): OverflowItem[] => {\n const index = items.length;\n return items.concat(sourceItem(source, `${idRoot}-${index}`, index));\n};\n\nconst removeItem = (\n items: OverflowItem<any>[],\n { indexPosition }: RemoveItemAction,\n): OverflowItem[] => {\n return items.slice(0, indexPosition).concat(items.slice(indexPosition + 1));\n};\n\nconst addOverflowIndicator = (\n items: OverflowItem<any>[],\n { overflowItem }: SingleItemAction,\n) => {\n // Guard against accidental duplicate overflowIndicator\n if (!items.find((i) => i.isOverflowIndicator)) {\n if (items.find((i) => i.label === \"Add Tab\")) {\n const [addTab] = items.slice(-1);\n return items\n .slice(0, -1)\n .concat({ ...overflowItem, index: addTab.index })\n .concat({ ...addTab, index: overflowItem.index });\n }\n return items.concat(overflowItem);\n }\n return items;\n};\n\nexport const overflowReducer: OverflowReducer = (state, action) => {\n switch (action.type) {\n case \"init\":\n return action.overflowItems ?? state;\n case \"add-overflow-indicator\":\n return addOverflowIndicator(state, action);\n\n case \"update-items\":\n return updateItems(state, action);\n\n case \"replace-item\":\n return replaceItem(state, action);\n\n case \"update-items-add-overflow-indicator\":\n return addOverflowIndicator(\n updateItems(state, {\n type: \"update-items\",\n overflowItems: action.overflowItems,\n }),\n { type: \"add-overflow-indicator\", overflowItem: action.overflowItem },\n );\n\n case \"update-items-remove-overflow-indicator\":\n return updateItems(state, {\n type: \"update-items\",\n overflowItems: action.overflowItems,\n }).filter((item) => !item.isOverflowIndicator);\n\n case \"collapsing-item\":\n return collapsingItem(state, action);\n\n case \"collapse-dynamic-item\":\n return collapseDynamicItem(state, action);\n\n case \"uncollapse-dynamic-item\":\n return uncollapseDynamicItem(state, action);\n\n case \"restore-collapsing-item\":\n return restoreCollapsingItem(state);\n\n case \"collapse-instant-item\":\n return collapseInstantItem(state, action);\n\n case \"add-source-item\":\n return addSourceItem(state, action);\n\n case \"remove-item\":\n return removeItem(state, action);\n\n default:\n return state;\n }\n};\n"],"names":["injectedItem","collapsingItem"],"mappings":"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"}
1	+ {"version":3,"file":"OverflowReducer.js","sources":["../src/responsive/OverflowReducer.ts"],"sourcesContent":["/*\n This reducer manages a collection of items that represent the content of an overflowable container.\n * The items are mostly content configured by the caller of the container, either data passed though\n * the source prop or as child elements. We also support 'injected' items. These allow for additional UI\n * controls to be inserted into the container, eg an 'Add Item' button.\n */\nimport {\n Children,\n isValidElement,\n type ReactElement,\n type ReactNode,\n type Reducer,\n} from \"react\";\n\nimport type {\n InjectedChildItem,\n InjectedSourceItem,\n OverflowCollectionOptions,\n OverflowItem,\n OverflowItems,\n OverflowSource,\n} from \"./overflowTypes\";\n\ninterface InitAction {\n type: \"init\";\n overflowItems?: OverflowItem[];\n}\n\ninterface SourceAction {\n type: \"add-source-item\";\n idRoot: string;\n source: any;\n}\ninterface AddChildAction {\n type: \"add-child-item\";\n idRoot: string;\n indexPosition?: number;\n element: ReactElement;\n}\ninterface RemoveItemAction {\n type: \"remove-item\";\n indexPosition: number;\n}\n\ninterface MultiItemAction {\n type: \"update-items\" \| \"update-items-remove-overflow-indicator\";\n overflowItems: (Partial<Omit<OverflowItem, \"id\">> &\n Pick<OverflowItem, \"id\">)[];\n}\ninterface SingleItemAction {\n type:\n \| \"add-overflow-indicator\"\n \| \"replace-item\"\n \| \"collapsing-item\"\n \| \"uncollapse-dynamic-item\"\n \| \"collapse-instant-item\";\n\n overflowItem: OverflowItem;\n}\n\ninterface CombinedItemAction {\n type: \"update-items-add-overflow-indicator\";\n overflowItem: OverflowItem<any>;\n overflowItems: OverflowItem[];\n}\n\ninterface EmptyPayloadAction {\n type: \"restore-collapsing-item\";\n}\ninterface DynamicCollapseAction extends Omit<SingleItemAction, \"type\"> {\n type: \"collapse-dynamic-item\";\n collapsedSize: number;\n minSize: number;\n}\n\nexport type OverflowAction =\n \| AddChildAction\n \| CombinedItemAction\n \| DynamicCollapseAction\n \| EmptyPayloadAction\n \| InitAction\n \| MultiItemAction\n \| RemoveItemAction\n \| SingleItemAction\n \| SourceAction;\n\nconst DEFAULT_PRIORITY = 3;\n\nconst mapReactElementChildren = (\n children: ReactNode,\n fn: (el: ReactElement, index: number) => OverflowItem,\n): OverflowItem[] => {\n const childElements: OverflowItem[] = [];\n Children.forEach(children, (child, i) => {\n if (isValidElement(child)) {\n childElements.push(fn(child, i));\n }\n });\n return childElements;\n};\n\nconst sourceItem = (\n item: OverflowSource,\n id: string,\n index: number,\n options?: OverflowCollectionOptions,\n): OverflowItem<\"source\"> => {\n const priority =\n options?.getPriority?.(item, index) ?? item.priority ?? DEFAULT_PRIORITY;\n\n return {\n //TODO editable closeable configurable via item\n closeable: item.closeable \|\| options?.closeable,\n editable: options?.editable,\n element: null,\n fullSize: null,\n id: item.id ?? id,\n index,\n label: item.label,\n position: item.position,\n priority,\n size: 0,\n source: item,\n type: \"source\",\n };\n};\n\nconst createSourceItems = (\n source: any,\n idRoot: string,\n options?: OverflowCollectionOptions,\n): OverflowItem<\"source\">[] \| undefined => {\n if (Array.isArray(source)) {\n return source.map((item, index) => {\n const priority = options?.getPriority?.(source, index);\n return sourceItem(item, `${idRoot}-${index}`, index, options);\n });\n }\n};\n\ntype OverflowChild = {\n closeable?: boolean;\n disabled?: boolean;\n id?: string;\n label?: string;\n \"data-collapsible\"?: boolean;\n \"data-editable\"?: boolean;\n \"data-position\"?: number;\n \"data-priority\"?: string;\n};\n\nconst childItem = (\n child: ReactElement,\n id: string,\n index: number,\n options?: OverflowCollectionOptions,\n): OverflowItem<\"child\"> => {\n const {\n closeable,\n disabled,\n id: idProp,\n label,\n \"data-collapsible\": collapsible,\n \"data-editable\": editable,\n \"data-position\": dataPosition,\n \"data-priority\": dataPriority = \"2\",\n } = child.props as OverflowChild;\n\n const priority = options?.getPriority?.(child, index);\n\n return {\n closeable: closeable \|\| options?.closeable,\n collapsible,\n editable: editable ? true : options?.editable,\n disabled,\n fullSize: null,\n id: idProp ?? id,\n index,\n element: child,\n label,\n position: dataPosition,\n priority: priority ?? Number.parseInt(dataPriority),\n size: 0,\n source: null,\n type: \"child\",\n } as OverflowItem;\n};\n\nconst createChildItems = (\n children: ReactNode,\n idRoot: string,\n options?: OverflowCollectionOptions,\n): OverflowItem<\"child\">[] \| undefined => {\n if (children) {\n return mapReactElementChildren(children, (child, index) => {\n const id = `${idRoot}-${index}`;\n return childItem(child, id, index, options);\n });\n }\n};\n\nconst createInjectedContent = (\n items: Array<InjectedSourceItem \| InjectedChildItem>,\n idRoot: string,\n startIndex: number,\n): OverflowItem<\"source\" \| \"child\">[] => {\n return items.map((item, i) => {\n const index = startIndex + i;\n const id = `${idRoot}-${index}`;\n const { source } = item as InjectedSourceItem;\n if (source) {\n const injectedItem = sourceItem(source, id, index);\n injectedItem.isInjectedItem = true;\n return injectedItem;\n }\n const { element } = item as InjectedChildItem;\n const injectedItem = childItem(element, id, index);\n injectedItem.isInjectedItem = true;\n return injectedItem;\n });\n};\n\nexport type OverflowReducer = Reducer<OverflowItems, OverflowAction>;\n\nconst defaultOptions = {};\n\nexport type OverflowReducerInitialisationProps = {\n children?: ReactNode;\n source?: OverflowSource[];\n injectedItems?: any[];\n idRoot: string;\n options?: OverflowCollectionOptions;\n};\n\nexport const reducerInitialiser: (\n props: OverflowReducerInitialisationProps,\n) => OverflowItems = ({\n children,\n source,\n injectedItems = [],\n idRoot,\n options = defaultOptions,\n}) => {\n const providedContent: OverflowItems =\n createChildItems(children, idRoot, options) \|\|\n createSourceItems(source, idRoot, options) \|\|\n [];\n const injectedContent = createInjectedContent(\n injectedItems,\n idRoot,\n providedContent.length,\n );\n return providedContent.concat(injectedContent);\n};\n\nconst collapsingItem = (\n items: OverflowItem[],\n { overflowItem }: SingleItemAction,\n) =>\n items.map((item) =>\n item === overflowItem\n ? {\n ...item,\n collapsing: true,\n }\n : item,\n );\n\nconst uncollapseDynamicItem = (\n items: OverflowItem[],\n { overflowItem }: SingleItemAction,\n) =>\n items.map((item) =>\n item === overflowItem\n ? {\n ...item,\n collapsed: false,\n collapsing: true,\n size: item.fullSize as number,\n fullSize: null,\n }\n : item,\n );\n\nconst collapseInstantItem = (\n items: OverflowItem[],\n { overflowItem }: SingleItemAction,\n) =>\n items.map((item) =>\n item === overflowItem\n ? {\n ...item,\n collapsed: true,\n }\n : item,\n );\n\nconst replaceItem = (\n items: OverflowItem[],\n { overflowItem }: SingleItemAction,\n) =>\n items.map((item) =>\n item.index === overflowItem?.index ? overflowItem : item,\n );\n\nconst updateItems = (\n items: OverflowItem[],\n { overflowItems = [] }: MultiItemAction,\n) => {\n return items.map((item) => {\n const targetItem = overflowItems.find((i) => i.id === item.id);\n return targetItem ? { ...item, ...targetItem } : item;\n });\n};\n\nconst restoreCollapsingItem = (items: OverflowItem[]) => {\n const collapsingItem = items.find(\n ({ collapsible, collapsing }) => collapsible === \"dynamic\" && collapsing,\n );\n const collapsedItem = items.find(\n ({ collapsible, collapsed }) => collapsible === \"dynamic\" && collapsed,\n );\n return items.map((item) => {\n if (item === collapsingItem) {\n return {\n ...item,\n collapsing: false,\n };\n }\n if (item === collapsedItem) {\n return {\n ...item,\n collapsed: false,\n collapsing: true,\n };\n }\n return item;\n });\n};\n\nconst collapseDynamicItem = (\n items: OverflowItem[],\n { overflowItem, collapsedSize = 0, minSize = 0 }: DynamicCollapseAction,\n) => {\n const remainingUncollpasedItems = items.filter(\n (i) => i.collapsible === \"dynamic\" && !i.collapsed && i !== overflowItem,\n );\n const lastUncollapsedItem = remainingUncollpasedItems.pop();\n\n return items.map((item) => {\n if (item === overflowItem) {\n return {\n ...item,\n collapsing: false,\n collapsed: true,\n fullSize: item.size,\n minSize,\n size: collapsedSize,\n };\n }\n if (item === lastUncollapsedItem) {\n return {\n ...item,\n collapsing: true,\n };\n }\n return item;\n });\n};\n\nconst addSourceItem = (\n items: OverflowItem<any>[],\n { idRoot, source }: SourceAction,\n): OverflowItem[] => {\n const index = items.length;\n return items.concat(sourceItem(source, `${idRoot}-${index}`, index));\n};\n\nconst removeItem = (\n items: OverflowItem<any>[],\n { indexPosition }: RemoveItemAction,\n): OverflowItem[] => {\n return items.slice(0, indexPosition).concat(items.slice(indexPosition + 1));\n};\n\nconst addOverflowIndicator = (\n items: OverflowItem<any>[],\n { overflowItem }: SingleItemAction,\n) => {\n // Guard against accidental duplicate overflowIndicator\n if (!items.find((i) => i.isOverflowIndicator)) {\n if (items.find((i) => i.label === \"Add Tab\")) {\n const [addTab] = items.slice(-1);\n return items\n .slice(0, -1)\n .concat({ ...overflowItem, index: addTab.index })\n .concat({ ...addTab, index: overflowItem.index });\n }\n return items.concat(overflowItem);\n }\n return items;\n};\n\nexport const overflowReducer: OverflowReducer = (state, action) => {\n switch (action.type) {\n case \"init\":\n return action.overflowItems ?? state;\n case \"add-overflow-indicator\":\n return addOverflowIndicator(state, action);\n\n case \"update-items\":\n return updateItems(state, action);\n\n case \"replace-item\":\n return replaceItem(state, action);\n\n case \"update-items-add-overflow-indicator\":\n return addOverflowIndicator(\n updateItems(state, {\n type: \"update-items\",\n overflowItems: action.overflowItems,\n }),\n { type: \"add-overflow-indicator\", overflowItem: action.overflowItem },\n );\n\n case \"update-items-remove-overflow-indicator\":\n return updateItems(state, {\n type: \"update-items\",\n overflowItems: action.overflowItems,\n }).filter((item) => !item.isOverflowIndicator);\n\n case \"collapsing-item\":\n return collapsingItem(state, action);\n\n case \"collapse-dynamic-item\":\n return collapseDynamicItem(state, action);\n\n case \"uncollapse-dynamic-item\":\n return uncollapseDynamicItem(state, action);\n\n case \"restore-collapsing-item\":\n return restoreCollapsingItem(state);\n\n case \"collapse-instant-item\":\n return collapseInstantItem(state, action);\n\n case \"add-source-item\":\n return addSourceItem(state, action);\n\n case \"remove-item\":\n return removeItem(state, action);\n\n default:\n return state;\n }\n};\n"],"names":["injectedItem","collapsingItem"],"mappings":"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"}

package/dist-es/responsive/useOverflowCollectionItems.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useOverflowCollectionItems.js","sources":["../src/responsive/useOverflowCollectionItems.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n Children,\n type ReactElement,\n type ReactNode,\n ~~isValidElement,\n~~ useCallback,\n useReducer,\n useRef,\n} from \"react\";\n\nimport {\n type OverflowAction,\n type OverflowReducer,\n type OverflowReducerInitialisationProps,\n overflowReducer,\n reducerInitialiser,\n} from \"./OverflowReducer\";\nimport type {\n OverflowCollectionHookProps,\n OverflowCollectionHookResult,\n OverflowCollectionOptions,\n OverflowItem,\n OverflowSource,\n} from \"./overflowTypes\";\nimport { measureOverflowItems } from \"./overflowUtils\";\n\nconst defaultOptions: OverflowCollectionOptions = {};\n\ntype WithLabel = { label?: string };\n\nconst defaultChildIdentity = (children: ReactNode) => {\n const childLabels: string[] = [];\n Children.forEach(children, (child) => {\n if (isValidElement(child)) {\n childLabels.push((child as ReactElement<WithLabel>).props.label ?? \"\");\n }\n });\n return `${childLabels.length}:${childLabels.join(\":\")}`;\n};\n\nconst defaultSourceIdentity = (source: WithLabel[]): string => {\n const labels = source.map(({ label }) => label).join(\":\");\n return `${source.length}:${labels}`;\n};\n// We need to track structural changes to controlled source or child elements.\n// Simple identity won't work as child elements will be different on every render.\n// structural changes are addition or removal of items, reordering items.\n// Question, what if user changes prop in declarative TabPanel ?\nconst getItemsIdentity = (\n defaultSource?: OverflowSource[],\n source?: OverflowSource[],\n children?: ReactNode,\n): string => {\n let identity: string;\n if (Array.isArray(defaultSource)) {\n identity = defaultSourceIdentity(defaultSource);\n } else if (Array.isArray(source)) {\n identity = defaultSourceIdentity(source);\n } else {\n identity = defaultChildIdentity(children);\n }\n return identity;\n};\n\ntype OverflowCollectionHook = (\n props: OverflowCollectionHookProps,\n) => OverflowCollectionHookResult;\n\nexport const useOverflowCollectionItems: OverflowCollectionHook = ({\n children,\n defaultSource,\n id: idRoot,\n injectedItems = [],\n options = defaultOptions,\n orientation,\n label = \"\",\n source,\n}) => {\n const dataRef = useRef<OverflowItem[]>([]);\n const versionRef = useRef(0);\n const measureTimeout = useRef<number \| null>(null);\n const previousIdentityRef = useRef(\"\");\n const fontsLoaded = useRef(false);\n const identity = getItemsIdentity(defaultSource, source, children);\n const isControlled = Array.isArray(source) \|\| Children.count(children) > 0;\n if (isControlled && defaultSource !== undefined) {\n throw Error(\n \"useOverflowCollectionItems: defaultSource prop should not be used in combination with either source prop or children \",\n );\n }\n\n const [data, dispatch] = useReducer<\n OverflowReducer,\n OverflowReducerInitialisationProps\n >(\n overflowReducer,\n {\n children,\n source: source \|\| defaultSource,\n injectedItems,\n idRoot,\n options,\n },\n reducerInitialiser,\n );\n\n dataRef.current = data;\n\n const measureManagedItems = useCallback(\n (defer = false) => {\n if (measureTimeout.current) {\n window.clearTimeout(measureTimeout.current);\n measureTimeout.current = null;\n }\n if (defer) {\n measureTimeout.current = window.setTimeout(measureManagedItems, 30);\n } else {\n // If fonts have not yet loaded, measurements WILL be incorrect\n if (fontsLoaded.current) {\n const dimension = orientation === \"horizontal\" ? \"width\" : \"height\";\n const overflowItems = measureOverflowItems(\n dataRef.current,\n dimension,\n );\n // TODO if measurements have not changed, do nothing\n // Track the generation of measured items. This can be used to trigger\n // side effects when measurement takes place.\n versionRef.current += 1;\n dispatch({\n type: \"init\",\n overflowItems,\n });\n }\n }\n },\n [orientation],\n );\n\n // Take the initial measurements of overflow items. All subsequent re-measurement will be\n // triggered by either manipulation of the items or item state or updated source.\n useIsomorphicLayoutEffect(() => {\n async function measure(): Promise<void> {\n const { fonts } = document;\n if (fonts) {\n await fonts.ready;\n fontsLoaded.current = true;\n } else {\n fontsLoaded.current = true;\n }\n measureManagedItems();\n }\n\n measure().catch((err) => {\n console.warn(\"error occurred measuring Overflow Items\", err);\n });\n }, [measureManagedItems]);\n\n const dispatchOverflowAction = useCallback(\n (action: OverflowAction \| { type: \"reset\" }) => {\n if (action.type === \"reset\") {\n measureManagedItems();\n } else {\n dispatch(action);\n\n if (action.type.endsWith(\"overflow-indicator\")) {\n measureManagedItems(true);\n }\n }\n },\n [measureManagedItems],\n );\n\n useIsomorphicLayoutEffect(() => {\n if (previousIdentityRef.current !== \"\") {\n const overflowItems = reducerInitialiser({\n children,\n source: source \|\| defaultSource,\n injectedItems,\n idRoot,\n options,\n });\n\n dispatch({ type: \"init\", overflowItems });\n measureManagedItems(true);\n }\n previousIdentityRef.current = identity;\n }, [identity]);\n\n return {\n data,\n dispatch: dispatchOverflowAction,\n isControlled,\n version: versionRef.current,\n };\n};\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"useOverflowCollectionItems.js","sources":["../src/responsive/useOverflowCollectionItems.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n Children,\n isValidElement,\n type ReactElement,\n type ReactNode,\n useCallback,\n useReducer,\n useRef,\n} from \"react\";\n\nimport {\n type OverflowAction,\n type OverflowReducer,\n type OverflowReducerInitialisationProps,\n overflowReducer,\n reducerInitialiser,\n} from \"./OverflowReducer\";\nimport type {\n OverflowCollectionHookProps,\n OverflowCollectionHookResult,\n OverflowCollectionOptions,\n OverflowItem,\n OverflowSource,\n} from \"./overflowTypes\";\nimport { measureOverflowItems } from \"./overflowUtils\";\n\nconst defaultOptions: OverflowCollectionOptions = {};\n\ntype WithLabel = { label?: string };\n\nconst defaultChildIdentity = (children: ReactNode) => {\n const childLabels: string[] = [];\n Children.forEach(children, (child) => {\n if (isValidElement(child)) {\n childLabels.push((child as ReactElement<WithLabel>).props.label ?? \"\");\n }\n });\n return `${childLabels.length}:${childLabels.join(\":\")}`;\n};\n\nconst defaultSourceIdentity = (source: WithLabel[]): string => {\n const labels = source.map(({ label }) => label).join(\":\");\n return `${source.length}:${labels}`;\n};\n// We need to track structural changes to controlled source or child elements.\n// Simple identity won't work as child elements will be different on every render.\n// structural changes are addition or removal of items, reordering items.\n// Question, what if user changes prop in declarative TabPanel ?\nconst getItemsIdentity = (\n defaultSource?: OverflowSource[],\n source?: OverflowSource[],\n children?: ReactNode,\n): string => {\n let identity: string;\n if (Array.isArray(defaultSource)) {\n identity = defaultSourceIdentity(defaultSource);\n } else if (Array.isArray(source)) {\n identity = defaultSourceIdentity(source);\n } else {\n identity = defaultChildIdentity(children);\n }\n return identity;\n};\n\ntype OverflowCollectionHook = (\n props: OverflowCollectionHookProps,\n) => OverflowCollectionHookResult;\n\nexport const useOverflowCollectionItems: OverflowCollectionHook = ({\n children,\n defaultSource,\n id: idRoot,\n injectedItems = [],\n options = defaultOptions,\n orientation,\n label = \"\",\n source,\n}) => {\n const dataRef = useRef<OverflowItem[]>([]);\n const versionRef = useRef(0);\n const measureTimeout = useRef<number \| null>(null);\n const previousIdentityRef = useRef(\"\");\n const fontsLoaded = useRef(false);\n const identity = getItemsIdentity(defaultSource, source, children);\n const isControlled = Array.isArray(source) \|\| Children.count(children) > 0;\n if (isControlled && defaultSource !== undefined) {\n throw Error(\n \"useOverflowCollectionItems: defaultSource prop should not be used in combination with either source prop or children \",\n );\n }\n\n const [data, dispatch] = useReducer<\n OverflowReducer,\n OverflowReducerInitialisationProps\n >(\n overflowReducer,\n {\n children,\n source: source \|\| defaultSource,\n injectedItems,\n idRoot,\n options,\n },\n reducerInitialiser,\n );\n\n dataRef.current = data;\n\n const measureManagedItems = useCallback(\n (defer = false) => {\n if (measureTimeout.current) {\n window.clearTimeout(measureTimeout.current);\n measureTimeout.current = null;\n }\n if (defer) {\n measureTimeout.current = window.setTimeout(measureManagedItems, 30);\n } else {\n // If fonts have not yet loaded, measurements WILL be incorrect\n if (fontsLoaded.current) {\n const dimension = orientation === \"horizontal\" ? \"width\" : \"height\";\n const overflowItems = measureOverflowItems(\n dataRef.current,\n dimension,\n );\n // TODO if measurements have not changed, do nothing\n // Track the generation of measured items. This can be used to trigger\n // side effects when measurement takes place.\n versionRef.current += 1;\n dispatch({\n type: \"init\",\n overflowItems,\n });\n }\n }\n },\n [orientation],\n );\n\n // Take the initial measurements of overflow items. All subsequent re-measurement will be\n // triggered by either manipulation of the items or item state or updated source.\n useIsomorphicLayoutEffect(() => {\n async function measure(): Promise<void> {\n const { fonts } = document;\n if (fonts) {\n await fonts.ready;\n fontsLoaded.current = true;\n } else {\n fontsLoaded.current = true;\n }\n measureManagedItems();\n }\n\n measure().catch((err) => {\n console.warn(\"error occurred measuring Overflow Items\", err);\n });\n }, [measureManagedItems]);\n\n const dispatchOverflowAction = useCallback(\n (action: OverflowAction \| { type: \"reset\" }) => {\n if (action.type === \"reset\") {\n measureManagedItems();\n } else {\n dispatch(action);\n\n if (action.type.endsWith(\"overflow-indicator\")) {\n measureManagedItems(true);\n }\n }\n },\n [measureManagedItems],\n );\n\n useIsomorphicLayoutEffect(() => {\n if (previousIdentityRef.current !== \"\") {\n const overflowItems = reducerInitialiser({\n children,\n source: source \|\| defaultSource,\n injectedItems,\n idRoot,\n options,\n });\n\n dispatch({ type: \"init\", overflowItems });\n measureManagedItems(true);\n }\n previousIdentityRef.current = identity;\n }, [identity]);\n\n return {\n data,\n dispatch: dispatchOverflowAction,\n isControlled,\n version: versionRef.current,\n };\n};\n"],"names":[],"mappings":"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"}

package/dist-es/responsive/useOverflowLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useOverflowLayout.js","sources":["../src/responsive/useOverflowLayout.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from \"react\";\nimport ~~type~~ {\n ~~ElementRef~~,\n ~~ManagedListRef~~,\n ~~OverflowItem,\n OverflowLayoutHookProps,\n~~} from \"~~./overflowTypes~~\";\n\nimport {\n ~~type ResizeHandler~~,\n ~~useResizeObserver~~,\n} from \"~~../responsive/useResizeObserver~~\";\nimport { getIsOverflowed, measureContainerOverflow } from \"./overflowUtils\";\nimport { useDynamicCollapse } from \"./useDynamicCollapse\";\nimport { useInstantCollapse } from \"./useInstantCollapse\";\nimport { useOverflow } from \"./useOverflow\";\nimport { useReclaimSpace } from \"./useReclaimSpace\";\n\nconst MONITORED_DIMENSIONS: { [key: string]: string[] } = {\n horizontal: [\"width\", \"scrollHeight\"],\n vertical: [\"height\", \"scrollWidth\"],\n none: [],\n};\n\ntype overflowUpdate = (item1: OverflowItem, item2: OverflowItem) => void;\n\n// we need id, just to be able to assign id to overflowIndicator in useOverflow\nexport const useOverflowLayout = ({\n collectionHook,\n id,\n orientation,\n label = \"Toolbar\",\n disableOverflow = false,\n}: OverflowLayoutHookProps): [ElementRef, overflowUpdate] => {\n const overflowContainerRef: ElementRef = useRef(null);\n const overflowItemsRef: ManagedListRef = useRef([]);\n const measurement = useRef({ innerContainerSize: 0, rootContainerDepth: 0 });\n const { innerContainerSize } = measurement.current;\n\n const { dispatch, version: collectionVersion } = collectionHook;\n overflowItemsRef.current = collectionHook.data;\n\n const {\n onResize: onOverflowResize,\n resetMeasurements: resetOverflowMeasurements,\n } = useOverflow({\n collectionHook,\n id,\n label,\n overflowItemsRef,\n orientation,\n overflowContainerRef,\n });\n\n const hasOverflowedItems = getIsOverflowed(collectionHook.data);\n // const hasOverflowedItems = getIsOverflowed(managedItems);\n\n const {\n onResize: onDynamicResize,\n resetMeasurements: resetDynamicMeasurements,\n } = useDynamicCollapse({\n collectionHook,\n innerContainerSize,\n label,\n overflowItemsRef,\n orientation,\n overflowContainerRef,\n });\n\n const {\n onResize: onInstantResize,\n resetMeasurements: resetInstantMeasurements,\n } = useInstantCollapse({\n collectionHook,\n hasOverflowedItems,\n innerContainerSize,\n label,\n overflowItemsRef,\n orientation,\n overflowContainerRef,\n });\n\n const { onResize: onReclaimResize } = useReclaimSpace({\n collectionHook,\n label,\n overflowItemsRef,\n orientation,\n overflowContainerRef,\n });\n\n const resizeHandler: ResizeHandler = useCallback(\n ({\n scrollHeight,\n height = scrollHeight,\n scrollWidth,\n width = scrollWidth,\n }) => {\n const size = orientation === \"horizontal\" ? width : height;\n if (typeof size === \"number\") {\n const { innerContainerSize } = measurement.current;\n const sizeDiff = size - innerContainerSize;\n // Tiny size diffs seem to be down to the relative sub-pixel innaccuracy of\n // ResizeObserver vs getBoundingClientRect\n if (Math.abs(sizeDiff) > 0.5) {\n measurement.current.innerContainerSize = size;\n const containerHasGrown = size > innerContainerSize;\n // Note: any one of these hooks may trigger a render which\n // may affect the overflow state that the next hook sees.\n // Hence, they all test for overflow internally and independently.\n onDynamicResize(size, containerHasGrown);\n onInstantResize(size, containerHasGrown);\n onOverflowResize(size, containerHasGrown);\n onReclaimResize(size, containerHasGrown);\n }\n }\n },\n [\n onDynamicResize,\n onInstantResize,\n onOverflowResize,\n onReclaimResize,\n orientation,\n ],\n );\n\n const measureAndInitialize = useCallback(() => {\n const { isOverflowing, ...contentWidthAndDepth } = measureContainerOverflow(\n overflowContainerRef,\n orientation,\n );\n\n measurement.current = contentWidthAndDepth;\n const { innerContainerSize } = contentWidthAndDepth;\n // TODO check this with complex combinations\n let handled = resetInstantMeasurements(isOverflowing);\n if (!handled) {\n handled = resetDynamicMeasurements();\n if (!handled) {\n resetOverflowMeasurements?.(isOverflowing, innerContainerSize);\n }\n }\n }, [\n orientation,\n resetInstantMeasurements,\n resetDynamicMeasurements,\n resetOverflowMeasurements,\n ]);\n\n const switchPriorities = useCallback(\n (item1: OverflowItem, item2: OverflowItem) => {\n const { priority: priority1 } = item1;\n const { priority: priority2 } = item2;\n if (priority1 !== priority2) {\n dispatch({\n type: \"update-items\",\n overflowItems: [\n { id: item1.id, priority: priority2 },\n { id: item2.id, priority: priority1 },\n ],\n });\n // Why do we need a timeout here when we don't inside resizeHandler ?\n setTimeout(measureAndInitialize, 0);\n }\n },\n [dispatch, measureAndInitialize],\n );\n\n // Important that we register our resize handler before we measure and\n // initialize. The initialization may trigger changes which we want the\n // resize observer to detect (when we have nested overflowables).\n useResizeObserver(\n overflowContainerRef,\n MONITORED_DIMENSIONS[disableOverflow ? \"none\" : orientation],\n resizeHandler,\n );\n\n // This hook runs after a measurememnt cycle, not after every single change to\n // collection data. The version attribute has been introduced specifically for this.\n useEffect(() => {\n if (!disableOverflow) {\n measureAndInitialize();\n }\n }, [collectionVersion, disableOverflow, measureAndInitialize]);\n\n return [overflowContainerRef, switchPriorities];\n};\n"],"names":["innerContainerSize"],"mappings":";;;;;;;;~~AAkBA~~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"}
1	+ {"version":3,"file":"useOverflowLayout.js","sources":["../src/responsive/useOverflowLayout.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from \"react\";\nimport {\n type ResizeHandler,\n useResizeObserver,\n} from \"../responsive/useResizeObserver\";\nimport type {\n ElementRef,\n ManagedListRef,\n OverflowItem,\n OverflowLayoutHookProps,\n} from \"./overflowTypes\";\nimport { getIsOverflowed, measureContainerOverflow } from \"./overflowUtils\";\nimport { useDynamicCollapse } from \"./useDynamicCollapse\";\nimport { useInstantCollapse } from \"./useInstantCollapse\";\nimport { useOverflow } from \"./useOverflow\";\nimport { useReclaimSpace } from \"./useReclaimSpace\";\n\nconst MONITORED_DIMENSIONS: { [key: string]: string[] } = {\n horizontal: [\"width\", \"scrollHeight\"],\n vertical: [\"height\", \"scrollWidth\"],\n none: [],\n};\n\ntype overflowUpdate = (item1: OverflowItem, item2: OverflowItem) => void;\n\n// we need id, just to be able to assign id to overflowIndicator in useOverflow\nexport const useOverflowLayout = ({\n collectionHook,\n id,\n orientation,\n label = \"Toolbar\",\n disableOverflow = false,\n}: OverflowLayoutHookProps): [ElementRef, overflowUpdate] => {\n const overflowContainerRef: ElementRef = useRef(null);\n const overflowItemsRef: ManagedListRef = useRef([]);\n const measurement = useRef({ innerContainerSize: 0, rootContainerDepth: 0 });\n const { innerContainerSize } = measurement.current;\n\n const { dispatch, version: collectionVersion } = collectionHook;\n overflowItemsRef.current = collectionHook.data;\n\n const {\n onResize: onOverflowResize,\n resetMeasurements: resetOverflowMeasurements,\n } = useOverflow({\n collectionHook,\n id,\n label,\n overflowItemsRef,\n orientation,\n overflowContainerRef,\n });\n\n const hasOverflowedItems = getIsOverflowed(collectionHook.data);\n // const hasOverflowedItems = getIsOverflowed(managedItems);\n\n const {\n onResize: onDynamicResize,\n resetMeasurements: resetDynamicMeasurements,\n } = useDynamicCollapse({\n collectionHook,\n innerContainerSize,\n label,\n overflowItemsRef,\n orientation,\n overflowContainerRef,\n });\n\n const {\n onResize: onInstantResize,\n resetMeasurements: resetInstantMeasurements,\n } = useInstantCollapse({\n collectionHook,\n hasOverflowedItems,\n innerContainerSize,\n label,\n overflowItemsRef,\n orientation,\n overflowContainerRef,\n });\n\n const { onResize: onReclaimResize } = useReclaimSpace({\n collectionHook,\n label,\n overflowItemsRef,\n orientation,\n overflowContainerRef,\n });\n\n const resizeHandler: ResizeHandler = useCallback(\n ({\n scrollHeight,\n height = scrollHeight,\n scrollWidth,\n width = scrollWidth,\n }) => {\n const size = orientation === \"horizontal\" ? width : height;\n if (typeof size === \"number\") {\n const { innerContainerSize } = measurement.current;\n const sizeDiff = size - innerContainerSize;\n // Tiny size diffs seem to be down to the relative sub-pixel innaccuracy of\n // ResizeObserver vs getBoundingClientRect\n if (Math.abs(sizeDiff) > 0.5) {\n measurement.current.innerContainerSize = size;\n const containerHasGrown = size > innerContainerSize;\n // Note: any one of these hooks may trigger a render which\n // may affect the overflow state that the next hook sees.\n // Hence, they all test for overflow internally and independently.\n onDynamicResize(size, containerHasGrown);\n onInstantResize(size, containerHasGrown);\n onOverflowResize(size, containerHasGrown);\n onReclaimResize(size, containerHasGrown);\n }\n }\n },\n [\n onDynamicResize,\n onInstantResize,\n onOverflowResize,\n onReclaimResize,\n orientation,\n ],\n );\n\n const measureAndInitialize = useCallback(() => {\n const { isOverflowing, ...contentWidthAndDepth } = measureContainerOverflow(\n overflowContainerRef,\n orientation,\n );\n\n measurement.current = contentWidthAndDepth;\n const { innerContainerSize } = contentWidthAndDepth;\n // TODO check this with complex combinations\n let handled = resetInstantMeasurements(isOverflowing);\n if (!handled) {\n handled = resetDynamicMeasurements();\n if (!handled) {\n resetOverflowMeasurements?.(isOverflowing, innerContainerSize);\n }\n }\n }, [\n orientation,\n resetInstantMeasurements,\n resetDynamicMeasurements,\n resetOverflowMeasurements,\n ]);\n\n const switchPriorities = useCallback(\n (item1: OverflowItem, item2: OverflowItem) => {\n const { priority: priority1 } = item1;\n const { priority: priority2 } = item2;\n if (priority1 !== priority2) {\n dispatch({\n type: \"update-items\",\n overflowItems: [\n { id: item1.id, priority: priority2 },\n { id: item2.id, priority: priority1 },\n ],\n });\n // Why do we need a timeout here when we don't inside resizeHandler ?\n setTimeout(measureAndInitialize, 0);\n }\n },\n [dispatch, measureAndInitialize],\n );\n\n // Important that we register our resize handler before we measure and\n // initialize. The initialization may trigger changes which we want the\n // resize observer to detect (when we have nested overflowables).\n useResizeObserver(\n overflowContainerRef,\n MONITORED_DIMENSIONS[disableOverflow ? \"none\" : orientation],\n resizeHandler,\n );\n\n // This hook runs after a measurememnt cycle, not after every single change to\n // collection data. The version attribute has been introduced specifically for this.\n useEffect(() => {\n if (!disableOverflow) {\n measureAndInitialize();\n }\n }, [collectionVersion, disableOverflow, measureAndInitialize]);\n\n return [overflowContainerRef, switchPriorities];\n};\n"],"names":["innerContainerSize"],"mappings":"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"}

package/dist-es/responsive/useWidth.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useWidth.js","sources":["../src/responsive/useWidth.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { type RefObject, useCallback, useRef, useState } from \"react\";\nimport {\n type ResizeHandler,\n ~~WidthOnly~~,\n ~~useResizeObserver~~,\n} from \"./useResizeObserver\";\n\nconst NONE: string[] = [];\n\nexport function useWidth<Element extends HTMLElement>(\n responsive: boolean,\n): [RefObject<Element>, number] {\n const [width, setWidth] = useState<number>();\n const ref = useRef<HTMLElement>(null);\n\n const handleResize: ResizeHandler = useCallback(({ width: newWidth }) => {\n setWidth(newWidth);\n }, []);\n\n const measurementsToObserve = responsive ? WidthOnly : NONE;\n useResizeObserver(ref, measurementsToObserve, handleResize);\n\n useIsomorphicLayoutEffect(() => {\n if (!ref.current) {\n return undefined;\n }\n handleResize(ref.current.getBoundingClientRect());\n }, [handleResize]);\n\n return [ref, width] as [RefObject<Element>, number];\n}\n"],"names":[],"mappings":";;;;AAQA,MAAM,OAAiB,EAAC;AAEjB,SAAS,SACd,UAC8B,EAAA;AAC9B,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,QAAiB,EAAA;AAC3C,EAAM,MAAA,GAAA,GAAM,OAAoB,IAAI,CAAA;AAEpC,EAAA,MAAM,eAA8B,WAAY,CAAA,CAAC,EAAE,KAAA,EAAO,UAAe,KAAA;AACvE,IAAA,QAAA,CAAS,QAAQ,CAAA;AAAA,GACnB,EAAG,EAAE,CAAA;AAEL,EAAM,MAAA,qBAAA,GAAwB,aAAa,SAAY,GAAA,IAAA;AACvD,EAAkB,iBAAA,CAAA,GAAA,EAAK,uBAAuB,YAAY,CAAA;AAE1D,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,CAAC,IAAI,OAAS,EAAA;AAChB,MAAO,OAAA,MAAA;AAAA;AAET,IAAa,YAAA,CAAA,GAAA,CAAI,OAAQ,CAAA,qBAAA,EAAuB,CAAA;AAAA,GAClD,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EAAO,OAAA,CAAC,KAAK,KAAK,CAAA;AACpB;;;;"}
1	+ {"version":3,"file":"useWidth.js","sources":["../src/responsive/useWidth.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { type RefObject, useCallback, useRef, useState } from \"react\";\nimport {\n type ResizeHandler,\n useResizeObserver,\n WidthOnly,\n} from \"./useResizeObserver\";\n\nconst NONE: string[] = [];\n\nexport function useWidth<Element extends HTMLElement>(\n responsive: boolean,\n): [RefObject<Element>, number] {\n const [width, setWidth] = useState<number>();\n const ref = useRef<HTMLElement>(null);\n\n const handleResize: ResizeHandler = useCallback(({ width: newWidth }) => {\n setWidth(newWidth);\n }, []);\n\n const measurementsToObserve = responsive ? WidthOnly : NONE;\n useResizeObserver(ref, measurementsToObserve, handleResize);\n\n useIsomorphicLayoutEffect(() => {\n if (!ref.current) {\n return undefined;\n }\n handleResize(ref.current.getBoundingClientRect());\n }, [handleResize]);\n\n return [ref, width] as [RefObject<Element>, number];\n}\n"],"names":[],"mappings":";;;;AAQA,MAAM,OAAiB,EAAC;AAEjB,SAAS,SACd,UAC8B,EAAA;AAC9B,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,QAAiB,EAAA;AAC3C,EAAM,MAAA,GAAA,GAAM,OAAoB,IAAI,CAAA;AAEpC,EAAA,MAAM,eAA8B,WAAY,CAAA,CAAC,EAAE,KAAA,EAAO,UAAe,KAAA;AACvE,IAAA,QAAA,CAAS,QAAQ,CAAA;AAAA,GACnB,EAAG,EAAE,CAAA;AAEL,EAAM,MAAA,qBAAA,GAAwB,aAAa,SAAY,GAAA,IAAA;AACvD,EAAkB,iBAAA,CAAA,GAAA,EAAK,uBAAuB,YAAY,CAAA;AAE1D,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,CAAC,IAAI,OAAS,EAAA;AAChB,MAAO,OAAA,MAAA;AAAA;AAET,IAAa,YAAA,CAAA,GAAA,CAAI,OAAQ,CAAA,qBAAA,EAAuB,CAAA;AAAA,GAClD,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EAAO,OAAA,CAAC,KAAK,KAAK,CAAA;AACpB;;;;"}

package/dist-es/search-input/SearchInput.js CHANGED Viewed

@@ -1,12 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import { useIcon, useForkRef, useControlled, Button } from '@salt-ds/core';
 import { SearchIcon } from '@salt-ds/icons';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
 import { forwardRef, useRef } from 'react';
 import { InputLegacy } from '../input-legacy/InputLegacy.js';
 import { StaticInputAdornment } from '../input-legacy/StaticInputAdornment.js';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import { useWindow } from '@salt-ds/window';
 import css_248z from './SearchInput.css.js';
 const baseName = "saltSearchInput";

package/dist-es/search-input/SearchInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.js","sources":["../src/search-input/SearchInput.tsx"],"sourcesContent":["import { Button, useControlled, useForkRef, useIcon } from \"@salt-ds/core\";\nimport { SearchIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentType,\n type KeyboardEvent,\n type SyntheticEvent,\n ~~forwardRef,\n~~ useRef,\n} from \"react\";\nimport {\n InputLegacy as Input,\n type InputLegacyProps as InputProps,\n StaticInputAdornment,\n} from \"../input-legacy\";\n\nimport ~~{ useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport~~ searchInputCss from \"./SearchInput.css\";\n\nconst baseName = \"saltSearchInput\";\n\n//TODO formfield integration\n\nexport interface SearchInputProps extends Omit<InputProps, \"onSubmit\"> {\n /*\n Override \"search\" icon.\n * Set to `null` to hide.\n /\n IconComponent?: ComponentType<any> \| null;\n /\n Callback for when clear button is clicked.\n /\n onClear?: () => void;\n /\n Callback for change event.\n * Event is either an Input change event or a Button click event.\n /\n onChange?: (event: SyntheticEvent<unknown>, value: string) => void;\n /\n Callback to trigger search.\n */\n onSubmit?: (value: InputProps[\"value\"]) => void;\n}\n\nexport const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n function SearchInput(\n {\n IconComponent = SearchIcon,\n className,\n onChange,\n onClear,\n onKeyUp,\n onSubmit,\n value: valueProp,\n defaultValue,\n ...other\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-search-input\",\n css: searchInputCss,\n window: targetWindow,\n });\n const { CloseIcon } = useIcon();\n const inputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(inputRef, ref);\n\n const [value, setValue, isControlled] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"SearchInput\",\n state: \"value\",\n });\n\n const handleChange = (\n event: ChangeEvent<HTMLInputElement>,\n newValue: string,\n ) => {\n setValue(newValue);\n onChange?.(event, newValue);\n };\n\n const handleClear = (event: SyntheticEvent<HTMLButtonElement>) => {\n setValue(\"\");\n if (!isControlled) {\n onChange?.(event, \"\");\n }\n onClear?.();\n inputRef.current?.focus();\n };\n\n const handleKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === \"Enter\" && onSubmit && value) {\n onSubmit?.(value);\n }\n\n onKeyUp?.(event);\n };\n\n return (\n <Input\n className={clsx(baseName, className)}\n ref={handleRef}\n endAdornment={\n !!value && (\n <Button\n className={clsx(`${baseName}-clearButton`)}\n onClick={handleClear}\n variant=\"secondary\"\n >\n <CloseIcon\n aria-label=\"clear input\"\n className={`${baseName}-clearIcon`}\n />\n </Button>\n )\n }\n onChange={handleChange}\n onKeyUp={handleKeyUp}\n startAdornment={\n IconComponent && (\n <StaticInputAdornment>\n <IconComponent className={`${baseName}-icon`} />\n </StaticInputAdornment>\n )\n }\n value={value \|\| \"\"}\n {...other}\n />\n );\n },\n);\n"],"names":["SearchInput","searchInputCss","Input"],"mappings":";;;;;;;;;;;~~AAsBA~~,MAAM,QAAW,GAAA,iBAAA;AAyBV,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YACP,CAAA;AAAA,IACE,aAAgB,GAAA,UAAA;AAAA,IAChB,SAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,YAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AACD,IAAM,MAAA,EAAE,SAAU,EAAA,GAAI,OAAQ,EAAA;AAC9B,IAAM,MAAA,QAAA,GAAW,OAAyB,IAAI,CAAA;AAC9C,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,QAAA,EAAU,GAAG,CAAA;AAE1C,IAAA,MAAM,CAAC,KAAA,EAAO,QAAU,EAAA,YAAY,IAAI,aAAc,CAAA;AAAA,MACpD,UAAY,EAAA,SAAA;AAAA,MACZ,OAAS,EAAA,YAAA;AAAA,MACT,IAAM,EAAA,aAAA;AAAA,MACN,KAAO,EAAA;AAAA,KACR,CAAA;AAED,IAAM,MAAA,YAAA,GAAe,CACnB,KAAA,EACA,QACG,KAAA;AACH,MAAA,QAAA,CAAS,QAAQ,CAAA;AACjB,MAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAO,EAAA,QAAA,CAAA;AAAA,KACpB;AAEA,IAAM,MAAA,WAAA,GAAc,CAAC,KAA6C,KAAA;~~AAvFtE~~,MAAA,IAAA,EAAA;~~AAwFM~~,MAAA,QAAA,CAAS,EAAE,CAAA;AACX,MAAA,IAAI,CAAC,YAAc,EAAA;AACjB,QAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAO,EAAA,EAAA,CAAA;AAAA;AAEpB,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,EAAA;AACA,MAAA,CAAA,EAAA,GAAA,QAAA,CAAS,YAAT,IAAkB,GAAA,MAAA,GAAA,EAAA,CAAA,KAAA,EAAA;AAAA,KACpB;AAEA,IAAM,MAAA,WAAA,GAAc,CAAC,KAA2C,KAAA;AAC9D,MAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,OAAW,IAAA,QAAA,IAAY,KAAO,EAAA;AAC9C,QAAW,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,KAAA,CAAA;AAAA;AAGb,MAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,KACZ;AAEA,IACE,uBAAA,GAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAK,CAAA,QAAA,EAAU,SAAS,CAAA;AAAA,QACnC,GAAK,EAAA,SAAA;AAAA,QACL,YAAA,EACE,CAAC,CAAC,KACA,oBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAA,IAAA,CAAK,CAAG,EAAA,QAAQ,CAAc,YAAA,CAAA,CAAA;AAAA,YACzC,OAAS,EAAA,WAAA;AAAA,YACT,OAAQ,EAAA,WAAA;AAAA,YAER,QAAA,kBAAA,GAAA;AAAA,cAAC,SAAA;AAAA,cAAA;AAAA,gBACC,YAAW,EAAA,aAAA;AAAA,gBACX,SAAA,EAAW,GAAG,QAAQ,CAAA,UAAA;AAAA;AAAA;AACxB;AAAA,SACF;AAAA,QAGJ,QAAU,EAAA,YAAA;AAAA,QACV,OAAS,EAAA,WAAA;AAAA,QACT,cAAA,EACE,aACE,oBAAA,GAAA,CAAC,oBACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,iBAAc,SAAW,EAAA,CAAA,EAAG,QAAQ,CAAA,KAAA,CAAA,EAAS,CAChD,EAAA,CAAA;AAAA,QAGJ,OAAO,KAAS,IAAA,EAAA;AAAA,QACf,GAAG;AAAA;AAAA,KACN;AAAA;AAGN;;;;"}
1	+ {"version":3,"file":"SearchInput.js","sources":["../src/search-input/SearchInput.tsx"],"sourcesContent":["import { Button, useControlled, useForkRef, useIcon } from \"@salt-ds/core\";\nimport { SearchIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentType,\n forwardRef,\n type KeyboardEvent,\n type SyntheticEvent,\n useRef,\n} from \"react\";\nimport {\n InputLegacy as Input,\n type InputLegacyProps as InputProps,\n StaticInputAdornment,\n} from \"../input-legacy\";\n\nimport searchInputCss from \"./SearchInput.css\";\n\nconst baseName = \"saltSearchInput\";\n\n//TODO formfield integration\n\nexport interface SearchInputProps extends Omit<InputProps, \"onSubmit\"> {\n /*\n Override \"search\" icon.\n * Set to `null` to hide.\n /\n IconComponent?: ComponentType<any> \| null;\n /\n Callback for when clear button is clicked.\n /\n onClear?: () => void;\n /\n Callback for change event.\n * Event is either an Input change event or a Button click event.\n /\n onChange?: (event: SyntheticEvent<unknown>, value: string) => void;\n /\n Callback to trigger search.\n */\n onSubmit?: (value: InputProps[\"value\"]) => void;\n}\n\nexport const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n function SearchInput(\n {\n IconComponent = SearchIcon,\n className,\n onChange,\n onClear,\n onKeyUp,\n onSubmit,\n value: valueProp,\n defaultValue,\n ...other\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-search-input\",\n css: searchInputCss,\n window: targetWindow,\n });\n const { CloseIcon } = useIcon();\n const inputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(inputRef, ref);\n\n const [value, setValue, isControlled] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"SearchInput\",\n state: \"value\",\n });\n\n const handleChange = (\n event: ChangeEvent<HTMLInputElement>,\n newValue: string,\n ) => {\n setValue(newValue);\n onChange?.(event, newValue);\n };\n\n const handleClear = (event: SyntheticEvent<HTMLButtonElement>) => {\n setValue(\"\");\n if (!isControlled) {\n onChange?.(event, \"\");\n }\n onClear?.();\n inputRef.current?.focus();\n };\n\n const handleKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === \"Enter\" && onSubmit && value) {\n onSubmit?.(value);\n }\n\n onKeyUp?.(event);\n };\n\n return (\n <Input\n className={clsx(baseName, className)}\n ref={handleRef}\n endAdornment={\n !!value && (\n <Button\n className={clsx(`${baseName}-clearButton`)}\n onClick={handleClear}\n variant=\"secondary\"\n >\n <CloseIcon\n aria-label=\"clear input\"\n className={`${baseName}-clearIcon`}\n />\n </Button>\n )\n }\n onChange={handleChange}\n onKeyUp={handleKeyUp}\n startAdornment={\n IconComponent && (\n <StaticInputAdornment>\n <IconComponent className={`${baseName}-icon`} />\n </StaticInputAdornment>\n )\n }\n value={value \|\| \"\"}\n {...other}\n />\n );\n },\n);\n"],"names":["SearchInput","searchInputCss","Input"],"mappings":";;;;;;;;;;;AAqBA,MAAM,QAAW,GAAA,iBAAA;AAyBV,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YACP,CAAA;AAAA,IACE,aAAgB,GAAA,UAAA;AAAA,IAChB,SAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,YAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AACD,IAAM,MAAA,EAAE,SAAU,EAAA,GAAI,OAAQ,EAAA;AAC9B,IAAM,MAAA,QAAA,GAAW,OAAyB,IAAI,CAAA;AAC9C,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,QAAA,EAAU,GAAG,CAAA;AAE1C,IAAA,MAAM,CAAC,KAAA,EAAO,QAAU,EAAA,YAAY,IAAI,aAAc,CAAA;AAAA,MACpD,UAAY,EAAA,SAAA;AAAA,MACZ,OAAS,EAAA,YAAA;AAAA,MACT,IAAM,EAAA,aAAA;AAAA,MACN,KAAO,EAAA;AAAA,KACR,CAAA;AAED,IAAM,MAAA,YAAA,GAAe,CACnB,KAAA,EACA,QACG,KAAA;AACH,MAAA,QAAA,CAAS,QAAQ,CAAA;AACjB,MAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAO,EAAA,QAAA,CAAA;AAAA,KACpB;AAEA,IAAM,MAAA,WAAA,GAAc,CAAC,KAA6C,KAAA;AAtFtE,MAAA,IAAA,EAAA;AAuFM,MAAA,QAAA,CAAS,EAAE,CAAA;AACX,MAAA,IAAI,CAAC,YAAc,EAAA;AACjB,QAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAO,EAAA,EAAA,CAAA;AAAA;AAEpB,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,EAAA;AACA,MAAA,CAAA,EAAA,GAAA,QAAA,CAAS,YAAT,IAAkB,GAAA,MAAA,GAAA,EAAA,CAAA,KAAA,EAAA;AAAA,KACpB;AAEA,IAAM,MAAA,WAAA,GAAc,CAAC,KAA2C,KAAA;AAC9D,MAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,OAAW,IAAA,QAAA,IAAY,KAAO,EAAA;AAC9C,QAAW,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,KAAA,CAAA;AAAA;AAGb,MAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,KACZ;AAEA,IACE,uBAAA,GAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAK,CAAA,QAAA,EAAU,SAAS,CAAA;AAAA,QACnC,GAAK,EAAA,SAAA;AAAA,QACL,YAAA,EACE,CAAC,CAAC,KACA,oBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAA,IAAA,CAAK,CAAG,EAAA,QAAQ,CAAc,YAAA,CAAA,CAAA;AAAA,YACzC,OAAS,EAAA,WAAA;AAAA,YACT,OAAQ,EAAA,WAAA;AAAA,YAER,QAAA,kBAAA,GAAA;AAAA,cAAC,SAAA;AAAA,cAAA;AAAA,gBACC,YAAW,EAAA,aAAA;AAAA,gBACX,SAAA,EAAW,GAAG,QAAQ,CAAA,UAAA;AAAA;AAAA;AACxB;AAAA,SACF;AAAA,QAGJ,QAAU,EAAA,YAAA;AAAA,QACV,OAAS,EAAA,WAAA;AAAA,QACT,cAAA,EACE,aACE,oBAAA,GAAA,CAAC,oBACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,iBAAc,SAAW,EAAA,CAAA,EAAG,QAAQ,CAAA,KAAA,CAAA,EAAS,CAChD,EAAA,CAAA;AAAA,QAGJ,OAAO,KAAS,IAAA,EAAA;AAAA,QACf,GAAG;AAAA;AAAA,KACN;AAAA;AAGN;;;;"}

package/dist-es/static-list/StaticList.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var css_248z = ".saltStaticList {\n  overflow-y: auto;\n  padding: 0;\n}\n";
+var css_248z = ".saltStaticList {\n  overflow-y: auto;\n  padding: 0;\n  margin: 0;\n}\n";
 export { css_248z as default };
 //# sourceMappingURL=StaticList.css.js.map

package/dist-es/static-list/StaticList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StaticList.js","sources":["../src/static-list/StaticList.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ReactNode,\n ~~forwardRef,\n~~} from \"react\";\n\nimport staticListCss from \"./StaticList.css\";\n\nconst withBaseName = makePrefixer(\"saltStaticList\");\n\nexport interface StaticListProps extends ComponentPropsWithoutRef<\"ul\"> {\n /*\n The list items to be rendered within the StaticList.\n */\n children: ReactNode;\n}\n\nexport const StaticList = forwardRef<HTMLOListElement, StaticListProps>(\n function StaticList({ children, className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-static-list\",\n css: staticListCss,\n window: targetWindow,\n });\n\n return (\n <ol className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n {children}\n </ol>\n );\n },\n);\n"],"names":["StaticList","staticListCss"],"mappings":";;;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA;AAS3C,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,YAAW,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAK,EAAA;AACzD,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAA,GAAA,CAAC,IAAG,EAAA,EAAA,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA,SAAS,CAAG,EAAA,GAAA,EAAW,GAAG,IAAA,EAC3D,QACH,EAAA,CAAA;AAAA;AAGN;;;;"}
1	+ {"version":3,"file":"StaticList.js","sources":["../src/static-list/StaticList.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n} from \"react\";\n\nimport staticListCss from \"./StaticList.css\";\n\nconst withBaseName = makePrefixer(\"saltStaticList\");\n\nexport interface StaticListProps extends ComponentPropsWithoutRef<\"ul\"> {\n /*\n The list items to be rendered within the StaticList.\n */\n children: ReactNode;\n}\n\nexport const StaticList = forwardRef<HTMLOListElement, StaticListProps>(\n function StaticList({ children, className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-static-list\",\n css: staticListCss,\n window: targetWindow,\n });\n\n return (\n <ol className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n {children}\n </ol>\n );\n },\n);\n"],"names":["StaticList","staticListCss"],"mappings":";;;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA;AAS3C,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,YAAW,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAK,EAAA;AACzD,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAA,GAAA,CAAC,IAAG,EAAA,EAAA,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA,SAAS,CAAG,EAAA,GAAA,EAAW,GAAG,IAAA,EAC3D,QACH,EAAA,CAAA;AAAA;AAGN;;;;"}

package/dist-es/static-list/StaticListItemContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StaticListItemContent.js","sources":["../src/static-list/StaticListItemContent.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ReactNode,\n ~~forwardRef,\n~~} from \"react\";\nimport staticListItemContent from \"./StaticListItemContent.css\";\n\nconst withBaseName = makePrefixer(\"saltStaticListItemContent\");\n\nexport interface StaticListItemContentProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /*\n The content of Static List Item\n */\n children?: ReactNode;\n}\n\nexport const StaticListItemContent = forwardRef<\n HTMLDivElement,\n StaticListItemContentProps\n>(function StaticListItemContent({ children, className, ...restProps }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-static-list-item-content\",\n css: staticListItemContent,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n {children}\n </div>\n );\n});\n"],"names":["StaticListItemContent","staticListItemContent"],"mappings":";;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,2BAA2B,CAAA;AAUhD,MAAA,qBAAA,GAAwB,UAGnC,CAAA,SAASA,sBAAsB,CAAA,EAAE,UAAU,SAAW,EAAA,GAAG,SAAU,EAAA,EAAG,GAAK,EAAA;AAC3E,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,+BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA,SAAS,CAAI,EAAA,GAAG,SAAW,EAAA,GAAA,EAC7D,QACH,EAAA,CAAA;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"StaticListItemContent.js","sources":["../src/static-list/StaticListItemContent.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport staticListItemContent from \"./StaticListItemContent.css\";\n\nconst withBaseName = makePrefixer(\"saltStaticListItemContent\");\n\nexport interface StaticListItemContentProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /*\n The content of Static List Item\n */\n children?: ReactNode;\n}\n\nexport const StaticListItemContent = forwardRef<\n HTMLDivElement,\n StaticListItemContentProps\n>(function StaticListItemContent({ children, className, ...restProps }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-static-list-item-content\",\n css: staticListItemContent,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n {children}\n </div>\n );\n});\n"],"names":["StaticListItemContent","staticListItemContent"],"mappings":";;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,2BAA2B,CAAA;AAUhD,MAAA,qBAAA,GAAwB,UAGnC,CAAA,SAASA,sBAAsB,CAAA,EAAE,UAAU,SAAW,EAAA,GAAG,SAAU,EAAA,EAAG,GAAK,EAAA;AAC3E,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,+BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA,SAAS,CAAI,EAAA,GAAG,SAAW,EAAA,GAAA,EAC7D,QACH,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/system-status/SystemStatus.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to root component */\n.saltSystemStatus {\n  background: var(--saltSystemStatus-background, var(--systemStatus-background));\n  border-color: var(--saltSystemStatus-borderColor, var(--systemStatus-borderColor));\n  border-width: var(--saltSystemStatus-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--saltSystemStatus-borderStyle, var(--salt-container-borderStyle));\n  box-sizing: border-box;\n  display: flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltSystemStatus-padding, var(--salt-spacing-50) var(--salt-spacing-100));\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n/* Styles applied to icon */\n.saltSystemStatus-icon.saltIcon {\n  min-height: var(--salt-size-base);\n  --saltIcon-color: var(--salt-content-bold-foreground);\n}\n\n/* Styles applied when state = \"info\" */\n.saltSystemStatus-info {\n  --systemStatus-borderColor: var(--salt-status-info-bold-background);\n  --systemStatus-background: var(--salt-status-info-bold-background);\n}\n\n/* Styles applied when state = \"error\" */\n.saltSystemStatus-error {\n  --systemStatus-borderColor: var(--salt-status-error-bold-background);\n  --systemStatus-background: var(--salt-status-error-bold-background);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltSystemStatus-warning {\n  --systemStatus-borderColor: var(--salt-status-warning-bold-background);\n  --systemStatus-background: var(--salt-status-warning-bold-background);\n}\n\n/* Styles applied when state = \"success\" */\n.saltSystemStatus-success {\n  --systemStatus-borderColor: var(--salt-status-success-bold-background);\n  --systemStatus-background: var(--salt-status-success-bold-background);\n}\n";
+var css_248z = "/* Styles applied to root component */\n.saltSystemStatus {\n  background: var(--saltSystemStatus-background, var(--systemStatus-background));\n  border-color: var(--saltSystemStatus-borderColor, var(--systemStatus-borderColor));\n  border-width: var(--saltSystemStatus-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--saltSystemStatus-borderStyle, var(--salt-borderStyle-solid));\n  box-sizing: border-box;\n  display: flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltSystemStatus-padding, var(--salt-spacing-50) var(--salt-spacing-100));\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n/* Styles applied to icon */\n.saltSystemStatus-icon.saltIcon {\n  min-height: var(--salt-size-base);\n  --saltIcon-color: var(--salt-content-bold-foreground);\n}\n\n/* Styles applied when state = \"info\" */\n.saltSystemStatus-info {\n  --systemStatus-borderColor: var(--salt-status-info-bold-background);\n  --systemStatus-background: var(--salt-status-info-bold-background);\n}\n\n/* Styles applied when state = \"error\" */\n.saltSystemStatus-error {\n  --systemStatus-borderColor: var(--salt-status-error-bold-background);\n  --systemStatus-background: var(--salt-status-error-bold-background);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltSystemStatus-warning {\n  --systemStatus-borderColor: var(--salt-status-warning-bold-background);\n  --systemStatus-background: var(--salt-status-warning-bold-background);\n}\n\n/* Styles applied when state = \"success\" */\n.saltSystemStatus-success {\n  --systemStatus-borderColor: var(--salt-status-success-bold-background);\n  --systemStatus-background: var(--salt-status-success-bold-background);\n}\n";
 export { css_248z as default };
 //# sourceMappingURL=SystemStatus.css.js.map

package/dist-es/system-status/SystemStatus.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { makePrefixer, StatusIndicator } from '@salt-ds/core';
-import { clsx } from 'clsx';
-import { forwardRef } from 'react';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
 import css_248z from './SystemStatus.css.js';
 const withBaseName = makePrefixer("saltSystemStatus");

package/dist-es/system-status/SystemStatus.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SystemStatus.js","sources":["../src/system-status/SystemStatus.tsx"],"sourcesContent":["import {\n StatusIndicator,\n type ValidationStatus,\n ~~makePrefixer,\n~~} from \"@salt-ds/core\";\nimport { ~~clsx~~ } from \"~~clsx~~\";\nimport { ~~type~~ ~~HTMLAttributes, forwardRef~~ } from \"~~react~~\";\n\nimport { ~~useComponentCssInjection~~ } from \"~~@salt-ds/styles~~\";\nimport { ~~useWindow~~ } from \"~~@salt-ds/window~~\";\n\nimport systemStatusCss from \"./SystemStatus.css\";\n\nexport interface SystemStatusProps extends HTMLAttributes<HTMLDivElement> {\n /*\n A string to determine the current state of the SystemStatus. Defaults to `info`.\n */\n status?: ValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltSystemStatus\");\n\nexport const SystemStatus = forwardRef<HTMLDivElement, SystemStatusProps>(\n function SystemStatus(\n { children, className, status = \"info\", ...rest },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-system-status\",\n css: systemStatusCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(withBaseName(), withBaseName(status), className)}\n ref={ref}\n role=\"status\"\n {...rest}\n >\n <StatusIndicator status={status} className={withBaseName(\"icon\")} />\n {children}\n </div>\n );\n },\n);\n"],"names":["SystemStatus","systemStatusCss"],"mappings":";;;;;;;;~~AAoBA~~,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAE7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aACP,CAAA,EAAE,QAAU,EAAA,SAAA,EAAW,SAAS,MAAQ,EAAA,GAAG,IAAK,EAAA,EAChD,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,QAC/D,GAAA;AAAA,QACA,IAAK,EAAA,QAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,eAAgB,EAAA,EAAA,MAAA,EAAgB,SAAW,EAAA,YAAA,CAAa,MAAM,CAAG,EAAA,CAAA;AAAA,UACjE;AAAA;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
1	+ {"version":3,"file":"SystemStatus.js","sources":["../src/system-status/SystemStatus.tsx"],"sourcesContent":["import {\n makePrefixer,\n StatusIndicator,\n type ValidationStatus,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\n\nimport systemStatusCss from \"./SystemStatus.css\";\n\nexport interface SystemStatusProps extends HTMLAttributes<HTMLDivElement> {\n /*\n A string to determine the current state of the SystemStatus. Defaults to `info`.\n */\n status?: ValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltSystemStatus\");\n\nexport const SystemStatus = forwardRef<HTMLDivElement, SystemStatusProps>(\n function SystemStatus(\n { children, className, status = \"info\", ...rest },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-system-status\",\n css: systemStatusCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(withBaseName(), withBaseName(status), className)}\n ref={ref}\n role=\"status\"\n {...rest}\n >\n <StatusIndicator status={status} className={withBaseName(\"icon\")} />\n {children}\n </div>\n );\n },\n);\n"],"names":["SystemStatus","systemStatusCss"],"mappings":";;;;;;;;AAmBA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAE7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aACP,CAAA,EAAE,QAAU,EAAA,SAAA,EAAW,SAAS,MAAQ,EAAA,GAAG,IAAK,EAAA,EAChD,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,QAC/D,GAAA;AAAA,QACA,IAAK,EAAA,QAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,eAAgB,EAAA,EAAA,MAAA,EAAgB,SAAW,EAAA,YAAA,CAAa,MAAM,CAAG,EAAA,CAAA;AAAA,UACjE;AAAA;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

package/dist-es/system-status/SystemStatusActions.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { makePrefixer } from '@salt-ds/core';
-import { clsx } from 'clsx';
-import { forwardRef } from 'react';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
 import css_248z from './SystemStatusActions.css.js';
 const withBaseName = makePrefixer("saltSystemStatusActions");

package/dist-es/system-status/SystemStatusActions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SystemStatusActions.js","sources":["../src/system-status/SystemStatusActions.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { ~~clsx~~ } from \"~~clsx~~\";\nimport {~~\n type~~ ~~ComponentPropsWithoutRef,\n type~~ ~~ReactNode,\n forwardRef,\n~~} from \"~~react~~\";\n\nimport { ~~useComponentCssInjection~~ } from \"~~@salt-ds/styles~~\";\nimport { ~~useWindow~~ } from \"~~@salt-ds/window~~\";\nimport systemStatusActionsCss from \"./SystemStatusActions.css\";\n\nconst withBaseName = makePrefixer(\"saltSystemStatusActions\");\n\ninterface SystemStatusActionsProps extends ComponentPropsWithoutRef<\"div\"> {\n /*\n The content of SystemStatusActions\n */\n children: ReactNode;\n}\n\nexport const SystemStatusActions = forwardRef<\n HTMLDivElement,\n SystemStatusActionsProps\n>(function SystemStatusActions(props, ref) {\n const { className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-system-status-actions\",\n css: systemStatusActionsCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...rest} ref={ref} />\n );\n});\n"],"names":["SystemStatusActions","systemStatusActionsCss"],"mappings":";;;;;;;;~~AAYA~~,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA;AASpD,MAAM,mBAAsB,GAAA,UAAA,CAGjC,SAASA,oBAAAA,CAAoB,OAAO,GAAK,EAAA;AACzC,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAE/B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,4BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,IAAK,CAAA,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,IAAA,EAAM,GAAU,EAAA,CAAA;AAEzE,CAAC;;;;"}
1	+ {"version":3,"file":"SystemStatusActions.js","sources":["../src/system-status/SystemStatusActions.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport systemStatusActionsCss from \"./SystemStatusActions.css\";\n\nconst withBaseName = makePrefixer(\"saltSystemStatusActions\");\n\ninterface SystemStatusActionsProps extends ComponentPropsWithoutRef<\"div\"> {\n /*\n The content of SystemStatusActions\n */\n children: ReactNode;\n}\n\nexport const SystemStatusActions = forwardRef<\n HTMLDivElement,\n SystemStatusActionsProps\n>(function SystemStatusActions(props, ref) {\n const { className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-system-status-actions\",\n css: systemStatusActionsCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...rest} ref={ref} />\n );\n});\n"],"names":["SystemStatusActions","systemStatusActionsCss"],"mappings":";;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA;AASpD,MAAM,mBAAsB,GAAA,UAAA,CAGjC,SAASA,oBAAAA,CAAoB,OAAO,GAAK,EAAA;AACzC,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAE/B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,4BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,IAAK,CAAA,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,IAAA,EAAM,GAAU,EAAA,CAAA;AAEzE,CAAC;;;;"}

package/dist-es/system-status/SystemStatusContent.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { makePrefixer } from '@salt-ds/core';
-import { clsx } from 'clsx';
-import { forwardRef } from 'react';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
 import css_248z from './SystemStatusContent.css.js';
 const withBaseName = makePrefixer("saltSystemStatusContent");

package/dist-es/system-status/SystemStatusContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SystemStatusContent.js","sources":["../src/system-status/SystemStatusContent.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { ~~clsx~~ } from \"~~clsx~~\";\nimport {~~\n type~~ ~~ComponentPropsWithoutRef,\n type~~ ~~ReactNode,\n forwardRef,\n~~} from \"~~react~~\";\n\nimport { ~~useComponentCssInjection~~ } from \"~~@salt-ds/styles~~\";\nimport { ~~useWindow~~ } from \"~~@salt-ds/window~~\";\nimport systemStatusContentCss from \"./SystemStatusContent.css\";\n\nconst withBaseName = makePrefixer(\"saltSystemStatusContent\");\n\ninterface SystemStatusContentProps extends ComponentPropsWithoutRef<\"div\"> {\n /*\n The content of SystemStatusContent\n */\n children: ReactNode;\n}\n\nexport const SystemStatusContent = forwardRef<\n HTMLDivElement,\n SystemStatusContentProps\n>(function SystemStatusContent(props, ref) {\n const { className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-system-status-content\",\n css: systemStatusContentCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...rest} ref={ref} />\n );\n});\n"],"names":["SystemStatusContent","systemStatusContentCss"],"mappings":";;;;;;;;~~AAYA~~,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA;AASpD,MAAM,mBAAsB,GAAA,UAAA,CAGjC,SAASA,oBAAAA,CAAoB,OAAO,GAAK,EAAA;AACzC,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAE/B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,4BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,IAAK,CAAA,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,IAAA,EAAM,GAAU,EAAA,CAAA;AAEzE,CAAC;;;;"}
1	+ {"version":3,"file":"SystemStatusContent.js","sources":["../src/system-status/SystemStatusContent.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport systemStatusContentCss from \"./SystemStatusContent.css\";\n\nconst withBaseName = makePrefixer(\"saltSystemStatusContent\");\n\ninterface SystemStatusContentProps extends ComponentPropsWithoutRef<\"div\"> {\n /*\n The content of SystemStatusContent\n */\n children: ReactNode;\n}\n\nexport const SystemStatusContent = forwardRef<\n HTMLDivElement,\n SystemStatusContentProps\n>(function SystemStatusContent(props, ref) {\n const { className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-system-status-content\",\n css: systemStatusContentCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...rest} ref={ref} />\n );\n});\n"],"names":["SystemStatusContent","systemStatusContentCss"],"mappings":";;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA;AASpD,MAAM,mBAAsB,GAAA,UAAA,CAGjC,SAASA,oBAAAA,CAAoB,OAAO,GAAK,EAAA;AACzC,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAE/B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,4BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,IAAK,CAAA,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,IAAA,EAAM,GAAU,EAAA,CAAA;AAEzE,CAAC;;;;"}

package/dist-es/tabs/Tab.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var css_248z = "/* Class applied to root Tab element */\n.saltTab {\n  --saltEditableLabel-padding: 0;\n  --saltEditableLabel-height: var(--tabs-tabstrip-height);\n  --saltInputLegacy-minWidth: 4em;\n\n  --tabs-tab-background: transparent;\n  --tabs-tab-cursor: pointer;\n  --tabs-tab-spacing: var(--salt-size-unit);\n  --tabs-tab-position: relative;\n}\n\n.saltTab {\n  align-items: center;\n  align-self: stretch;\n  background: var(--saltTabs-tab-background, var(--tabs-tab-background));\n  border: none;\n  border-radius: 0;\n  color: var(--salt-content-primary-foreground);\n  cursor: var(--saltTabs-tab-cursor, var(--tabs-tab-cursor));\n  display: var(--tabs-tabstrip-display);\n  height: var(--saltTabs-tab-height, var(--tabs-tabstrip-height));\n  letter-spacing: var(--saltTabs-tab-letterSpacing, var(--tabs-tab-letterSpacing, 0));\n  min-width: var(--saltTabs-tab-minWidth, 40px);\n  outline: none;\n  position: var(--saltTabs-tab-position, var(--tabs-tab-position));\n  user-select: none;\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  /* Not specify line-height, otherwise tabs are misaligned */\n}\n\n/* Overrides characteristic used in saltFocusVisible */\n.saltTab.saltFocusVisible:after {\n  inset: 2px 2px 4px 2px;\n}\n\n.saltTab:not(.saltTab-vertical) {\n  margin: 0 var(--tabs-tab-spacing) 0 0;\n}\n\n.saltTab[aria-selected=\"true\"] {\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n.saltTab-dragAway {\n  display: none;\n}\n\n/* main content aria of Tab */\n.saltTab-main {\n  background: inherit;\n  border: none;\n  color: inherit;\n  cursor: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  outline: none;\n  padding: 0 var(--tabs-tab-spacing);\n  position: relative;\n}\n\n.saltTab-closeable .saltTab-main {\n  border-right: solid transparent var(--salt-size-unit);\n}\n\n.saltTab .saltTab-closeButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* the close Button on a closeable Tab*/\n.saltTab-close-icon {\n  display: block;\n}\n\n.saltTab .saltTab-text {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n  text-align: var(--salt-text-textAlign-embedded);\n  text-overflow: ellipsis;\n  top: var(--saltTabs-tab-top, var(--tabs-tab-top, auto));\n  white-space: nowrap;\n  /* ensure content sits above focus ring */\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltTab-vertical .saltTab-text {\n  text-align: var(--salt-text-textAlign);\n}\n\n.saltTab .saltTab-text:before {\n  height: 0;\n  content: attr(data-text);\n  display: block;\n  visibility: hidden;\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* FIXME: these are all focusVisible styles, but with a bespoke inset */\n.saltTab-editing:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n}\n\n.saltTab-vertical.saltTab-editing:after {\n  right: 2px;\n  bottom: 0;\n}\n\n.saltTab-vertical .saltFocusVisible:not([aria-selected=\"true\"]):before {\n  left: auto;\n  height: auto;\n  top: 0;\n  width: 2px;\n}\n\n.saltTab.saltFocusVisible {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-background-hover));\n}\n\n.saltTab:before {\n  content: var(--tabs-tab-before-content, none);\n  background: var(--tabs-tab-before-background);\n  height: var(--tabs-tab-before-height);\n  inset: var(--tabs-tab-before-inset);\n  position: absolute;\n  width: var(--tabs-tab-before-width);\n  z-index: 1;\n}\n\n.saltTabstrip-draggingTab .saltTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-color-active);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n/* Hover styling */\n.saltTab:not([aria-selected=\"true\"]).saltFocusVisible:before,\n.saltTab:hover:not([aria-selected=\"true\"]):before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n.saltTab:hover:not(.saltTab-closeHover) {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-background-hover));\n}\n";
+var css_248z = "/* Class applied to root Tab element */\n.saltTab {\n  --saltEditableLabel-padding: 0;\n  --saltEditableLabel-height: var(--tabs-tabstrip-height);\n  --saltInputLegacy-minWidth: 4em;\n\n  --tabs-tab-background: transparent;\n  --tabs-tab-cursor: pointer;\n  --tabs-tab-spacing: var(--salt-size-unit);\n  --tabs-tab-position: relative;\n}\n\n.saltTab {\n  align-items: center;\n  align-self: stretch;\n  background: var(--saltTabs-tab-background, var(--tabs-tab-background));\n  border: none;\n  border-radius: 0;\n  color: var(--salt-content-primary-foreground);\n  cursor: var(--saltTabs-tab-cursor, var(--tabs-tab-cursor));\n  display: var(--tabs-tabstrip-display);\n  height: var(--saltTabs-tab-height, var(--tabs-tabstrip-height));\n  letter-spacing: var(--saltTabs-tab-letterSpacing, var(--tabs-tab-letterSpacing, 0));\n  min-width: var(--saltTabs-tab-minWidth, 40px);\n  outline: none;\n  position: var(--saltTabs-tab-position, var(--tabs-tab-position));\n  user-select: none;\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  /* Not specify line-height, otherwise tabs are misaligned */\n}\n\n/* Overrides characteristic used in saltFocusVisible */\n.saltTab.saltFocusVisible:after {\n  inset: 2px 2px 4px 2px;\n}\n\n.saltTab:not(.saltTab-vertical) {\n  margin: 0 var(--tabs-tab-spacing) 0 0;\n}\n\n.saltTab[aria-selected=\"true\"] {\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n.saltTab-dragAway {\n  display: none;\n}\n\n/* main content aria of Tab */\n.saltTab-main {\n  background: inherit;\n  border: none;\n  color: inherit;\n  cursor: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  outline: none;\n  padding: 0 var(--tabs-tab-spacing);\n  position: relative;\n}\n\n.saltTab-closeable .saltTab-main {\n  border-right: solid transparent var(--salt-size-unit);\n}\n\n.saltTab .saltTab-closeButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* the close Button on a closeable Tab*/\n.saltTab-close-icon {\n  display: block;\n}\n\n.saltTab .saltTab-text {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n  text-align: var(--salt-text-textAlign-embedded);\n  text-overflow: ellipsis;\n  top: var(--saltTabs-tab-top, var(--tabs-tab-top, auto));\n  white-space: nowrap;\n  /* ensure content sits above focus ring */\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltTab-vertical .saltTab-text {\n  text-align: var(--salt-text-textAlign);\n}\n\n.saltTab .saltTab-text:before {\n  height: 0;\n  content: attr(data-text);\n  display: block;\n  visibility: hidden;\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n/* FIXME: these are all focusVisible styles, but with a bespoke inset */\n.saltTab-editing:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n}\n\n.saltTab-vertical.saltTab-editing:after {\n  right: 2px;\n  bottom: 0;\n}\n\n.saltTab-vertical .saltFocusVisible:not([aria-selected=\"true\"]):before {\n  left: auto;\n  height: auto;\n  top: 0;\n  width: 2px;\n}\n\n.saltTab.saltFocusVisible {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-background-hover));\n}\n\n.saltTab:before {\n  content: var(--tabs-tab-before-content, none);\n  background: var(--tabs-tab-before-background);\n  height: var(--tabs-tab-before-height);\n  inset: var(--tabs-tab-before-inset);\n  position: absolute;\n  width: var(--tabs-tab-before-width);\n  z-index: 1;\n}\n\n.saltTabstrip-draggingTab .saltTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-color-active);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n/* Hover styling */\n.saltTab:not([aria-selected=\"true\"]).saltFocusVisible:before,\n.saltTab:hover:not([aria-selected=\"true\"]):before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n.saltTab:hover:not(.saltTab-closeHover) {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-background-hover));\n}\n";
 export { css_248z as default };
 //# sourceMappingURL=Tab.css.js.map

package/dist-es/tabs/Tab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tab.js","sources":["../src/tabs/Tab.tsx"],"sourcesContent":["// TODO close button needs to be a button. Hence tab needs to include 2 buttons\nimport {\n Button,\n type ButtonProps,\n makePrefixer,\n useForkRef,\n useIcon,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type FocusEvent,\n type ForwardedRef,\n type KeyboardEvent,\n type MouseEvent,\n type ReactElement,\n forwardRef,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { EditableLabel, type EditableLabelProps } from \"../editable-label\";\nimport type { TabProps } from \"./TabsTypes\";\n\nimport tabCss from \"./Tab.css\";\n\nconst noop = () => undefined;\n\nconst withBaseName = makePrefixer(\"saltTab\");\n\nconst CloseTabButton = (props: ButtonProps) => {\n const { CloseIcon } = useIcon();\n return (\n // FIXME: use polymorphic button\n <Button\n {...props}\n aria-label=\"Close Tab (Delete or Backspace)\"\n className={withBaseName(\"closeButton\")}\n tabIndex={undefined}\n title=\"Close Tab (Delete or Backspace)\"\n variant=\"secondary\"\n >\n <CloseIcon\n aria-label=\"Close Tab (Delete or Backspace)\"\n className={withBaseName(\"close-icon\")}\n />\n </Button>\n );\n};\n\nexport const Tab = forwardRef(function Tab(\n {\n ariaControls,\n children,\n className,\n closeable,\n dragging,\n editable,\n editing,\n focusVisible,\n index,\n label,\n onClick,\n onClose,\n onEnterEditMode = noop,\n onExitEditMode = noop,\n onFocus: onFocusProp,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n orientation,\n selected,\n tabChildIndex = 0,\n tabIndex,\n ...props\n }: TabProps,\n ref: ForwardedRef<HTMLDivElement>,\n): ReactElement<TabProps> {\n if (index === undefined \|\| onClick === undefined \|\| onKeyDown === undefined) {\n throw Error(\n \"index, onClick, onKeyUp, onKeyDown are required props, they would nornally be injected by Tabstrip, are you creating a Tab outside of a Tabstrip\",\n );\n }\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tab\",\n css: tabCss,\n window: targetWindow,\n });\n\n const root = useRef<HTMLDivElement>(null);\n const editableRef = useRef<HTMLDivElement>(null);\n const setForkRef = useForkRef(ref, root);\n const [closeHover, setCloseHover] = useState(false);\n const handleClick = useCallback(\n (e: MouseEvent) => {\n if (!editing) {\n e.preventDefault();\n onClick(e, index);\n }\n },\n [editing, index, onClick],\n );\n const handleKeyDownMain = (e: KeyboardEvent<HTMLElement>) => {\n onKeyDown(e);\n };\n\n const handleOnExitEditMode: EditableLabelProps[\"onExitEditMode\"] = (\n originalValue = \"\",\n editedValue = \"\",\n allowDeactivation = true,\n ) => onExitEditMode(originalValue, editedValue, allowDeactivation, index);\n\n const handleKeyUp = (e: KeyboardEvent) => {\n switch (e.key) {\n case \"Backspace\":\n case \"Delete\":\n if (closeable && !editing) {\n e.stopPropagation();\n onClose?.(index);\n }\n break;\n default:\n onKeyUp?.(e, index);\n }\n };\n\n const handleCloseButtonClick = (e: MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n onClose?.(index);\n };\n\n const handleCloseButtonEnter = () => {\n setCloseHover(true);\n };\n\n const handleCloseButtonLeave = () => {\n setCloseHover(false);\n };\n\n const handleMouseDown = (e: MouseEvent<HTMLElement>): void => {\n onMouseDown?.(e);\n };\n\n const getLabel = () => {\n if (editable) {\n return (\n <EditableLabel\n editing={editing}\n defaultValue={label}\n // Create a fresh instance after each edit, so it can be uncontrolled ...\n key={label}\n onEnterEditMode={onEnterEditMode}\n onExitEditMode={handleOnExitEditMode}\n ref={editableRef}\n />\n );\n }\n return label;\n };\n\n const handleFocus = (evt: FocusEvent<HTMLElement>) => {\n if (editableRef.current) {\n const editable = editableRef.current as HTMLElement;\n const input = editable.querySelector(\n \".saltEditableLabel-input\",\n ) as HTMLInputElement;\n input?.focus();\n }\n onFocusProp?.(evt);\n };\n\n return (\n <div\n {...props}\n aria-controls={ariaControls}\n aria-selected={selected}\n className={clsx(withBaseName(), {\n [withBaseName(\"closeable\")]: closeable,\n [withBaseName(\"closeHover\")]: closeHover,\n [withBaseName(\"dragAway\")]: dragging,\n [withBaseName(\"editing\")]: editing,\n [withBaseName(\"vertical\")]: orientation === \"vertical\",\n saltFocusVisible: focusVisible,\n })}\n data-editable={editable \|\| undefined}\n onClick={handleClick}\n onFocus={handleFocus}\n onKeyDown={handleKeyDownMain}\n onKeyUp={handleKeyUp}\n onMouseDown={handleMouseDown}\n ref={setForkRef}\n role=\"tab\"\n tabIndex={tabIndex}\n >\n <div className={withBaseName(\"main\")}>\n <span\n className={withBaseName(\"text\")}\n // data-text is important, it determines the width of the tab. A pseudo\n // element assigns data-text as content. This is styled as selected tab\n // text. That means width of tab always corresponds to its selected state,\n // so tabs do not change size when selected (ie when the text is bolded).\n // Do not include if we have editable content, EditableLabel will determine\n // the width\n data-text={editable ? undefined : label}\n >\n {children ?? getLabel()}\n </span>\n </div>\n {closeable ? (\n <CloseTabButton\n onClick={handleCloseButtonClick}\n onMouseEnter={handleCloseButtonEnter}\n onMouseLeave={handleCloseButtonLeave}\n />\n ) : null}\n </div>\n );\n});\n"],"names":["Tab","tabCss","editable"],"mappings":"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"}
1	+ {"version":3,"file":"Tab.js","sources":["../src/tabs/Tab.tsx"],"sourcesContent":["// TODO close button needs to be a button. Hence tab needs to include 2 buttons\nimport {\n Button,\n type ButtonProps,\n makePrefixer,\n useForkRef,\n useIcon,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type FocusEvent,\n type ForwardedRef,\n forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n type ReactElement,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { EditableLabel, type EditableLabelProps } from \"../editable-label\";\nimport tabCss from \"./Tab.css\";\nimport type { TabProps } from \"./TabsTypes\";\n\nconst noop = () => undefined;\n\nconst withBaseName = makePrefixer(\"saltTab\");\n\nconst CloseTabButton = (props: ButtonProps) => {\n const { CloseIcon } = useIcon();\n return (\n // FIXME: use polymorphic button\n <Button\n {...props}\n aria-label=\"Close Tab (Delete or Backspace)\"\n className={withBaseName(\"closeButton\")}\n tabIndex={undefined}\n title=\"Close Tab (Delete or Backspace)\"\n variant=\"secondary\"\n >\n <CloseIcon\n aria-label=\"Close Tab (Delete or Backspace)\"\n className={withBaseName(\"close-icon\")}\n />\n </Button>\n );\n};\n\nexport const Tab = forwardRef(function Tab(\n {\n ariaControls,\n children,\n className,\n closeable,\n dragging,\n editable,\n editing,\n focusVisible,\n index,\n label,\n onClick,\n onClose,\n onEnterEditMode = noop,\n onExitEditMode = noop,\n onFocus: onFocusProp,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n orientation,\n selected,\n tabChildIndex = 0,\n tabIndex,\n ...props\n }: TabProps,\n ref: ForwardedRef<HTMLDivElement>,\n): ReactElement<TabProps> {\n if (index === undefined \|\| onClick === undefined \|\| onKeyDown === undefined) {\n throw Error(\n \"index, onClick, onKeyUp, onKeyDown are required props, they would nornally be injected by Tabstrip, are you creating a Tab outside of a Tabstrip\",\n );\n }\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tab\",\n css: tabCss,\n window: targetWindow,\n });\n\n const root = useRef<HTMLDivElement>(null);\n const editableRef = useRef<HTMLDivElement>(null);\n const setForkRef = useForkRef(ref, root);\n const [closeHover, setCloseHover] = useState(false);\n const handleClick = useCallback(\n (e: MouseEvent) => {\n if (!editing) {\n e.preventDefault();\n onClick(e, index);\n }\n },\n [editing, index, onClick],\n );\n const handleKeyDownMain = (e: KeyboardEvent<HTMLElement>) => {\n onKeyDown(e);\n };\n\n const handleOnExitEditMode: EditableLabelProps[\"onExitEditMode\"] = (\n originalValue = \"\",\n editedValue = \"\",\n allowDeactivation = true,\n ) => onExitEditMode(originalValue, editedValue, allowDeactivation, index);\n\n const handleKeyUp = (e: KeyboardEvent) => {\n switch (e.key) {\n case \"Backspace\":\n case \"Delete\":\n if (closeable && !editing) {\n e.stopPropagation();\n onClose?.(index);\n }\n break;\n default:\n onKeyUp?.(e, index);\n }\n };\n\n const handleCloseButtonClick = (e: MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n onClose?.(index);\n };\n\n const handleCloseButtonEnter = () => {\n setCloseHover(true);\n };\n\n const handleCloseButtonLeave = () => {\n setCloseHover(false);\n };\n\n const handleMouseDown = (e: MouseEvent<HTMLElement>): void => {\n onMouseDown?.(e);\n };\n\n const getLabel = () => {\n if (editable) {\n return (\n <EditableLabel\n editing={editing}\n defaultValue={label}\n // Create a fresh instance after each edit, so it can be uncontrolled ...\n key={label}\n onEnterEditMode={onEnterEditMode}\n onExitEditMode={handleOnExitEditMode}\n ref={editableRef}\n />\n );\n }\n return label;\n };\n\n const handleFocus = (evt: FocusEvent<HTMLElement>) => {\n if (editableRef.current) {\n const editable = editableRef.current as HTMLElement;\n const input = editable.querySelector(\n \".saltEditableLabel-input\",\n ) as HTMLInputElement;\n input?.focus();\n }\n onFocusProp?.(evt);\n };\n\n return (\n <div\n {...props}\n aria-controls={ariaControls}\n aria-selected={selected}\n className={clsx(withBaseName(), {\n [withBaseName(\"closeable\")]: closeable,\n [withBaseName(\"closeHover\")]: closeHover,\n [withBaseName(\"dragAway\")]: dragging,\n [withBaseName(\"editing\")]: editing,\n [withBaseName(\"vertical\")]: orientation === \"vertical\",\n saltFocusVisible: focusVisible,\n })}\n data-editable={editable \|\| undefined}\n onClick={handleClick}\n onFocus={handleFocus}\n onKeyDown={handleKeyDownMain}\n onKeyUp={handleKeyUp}\n onMouseDown={handleMouseDown}\n ref={setForkRef}\n role=\"tab\"\n tabIndex={tabIndex}\n >\n <div className={withBaseName(\"main\")}>\n <span\n className={withBaseName(\"text\")}\n // data-text is important, it determines the width of the tab. A pseudo\n // element assigns data-text as content. This is styled as selected tab\n // text. That means width of tab always corresponds to its selected state,\n // so tabs do not change size when selected (ie when the text is bolded).\n // Do not include if we have editable content, EditableLabel will determine\n // the width\n data-text={editable ? undefined : label}\n >\n {children ?? getLabel()}\n </span>\n </div>\n {closeable ? (\n <CloseTabButton\n onClick={handleCloseButtonClick}\n onMouseEnter={handleCloseButtonEnter}\n onMouseLeave={handleCloseButtonLeave}\n />\n ) : null}\n </div>\n );\n});\n"],"names":["Tab","tabCss","editable"],"mappings":"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"}

package/dist-es/tabs/TabActivationIndicator.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var css_248z = ".saltTabActivationIndicator-no-background {\n  --tabs-activationIndicator-background: transparent !important;\n}\n\n.saltTabActivationIndicator {\n  --tabs-activationIndicator-background: var(--salt-container-primary-borderColor);\n\n  background: var(--saltTabs-activationIndicator-background, var(--tabs-activationIndicator-background));\n  height: var(--saltTabs-activationIndicator-height, auto);\n  inset: var(--tabs-activationIndicator-inset);\n  position: absolute;\n  width: var(--tabs-activationIndicator-width, auto);\n}\n\n/* the Active Tab indicator, uses navigable styles */\n.saltTabActivationIndicator-thumb {\n  inset: var(--saltTabs-activationIndicator-thumb-inset);\n  position: absolute;\n  height: var(--tabs-activationIndicator-thumb-height, auto);\n  background: var(--salt-navigable-indicator-active);\n  transition: var(--saltTabs-activationIndicator-transition, var(--tabs-activationIndicator-transition, left 0.3s ease));\n  width: var(--tabs-activationIndicator-thumb-width, auto);\n  z-index: 1;\n}\n";
+var css_248z = ".saltTabActivationIndicator-no-background {\n  --tabs-activationIndicator-background: transparent !important;\n}\n\n.saltTabActivationIndicator {\n  --tabs-activationIndicator-background: var(--salt-container-primary-borderColor);\n\n  background: var(--saltTabs-activationIndicator-background, var(--tabs-activationIndicator-background));\n  height: var(--saltTabs-activationIndicator-height, auto);\n  inset: var(--tabs-activationIndicator-inset);\n  position: absolute;\n  width: var(--tabs-activationIndicator-width, auto);\n}\n\n/* the Active Tab indicator, uses navigable styles */\n.saltTabActivationIndicator-thumb {\n  inset: var(--saltTabs-activationIndicator-thumb-inset);\n  position: absolute;\n  height: var(--tabs-activationIndicator-thumb-height, auto);\n  background: var(--salt-navigable-accent-indicator-active);\n  transition: var(--saltTabs-activationIndicator-transition, var(--tabs-activationIndicator-transition, left 0.3s ease));\n  width: var(--tabs-activationIndicator-thumb-width, auto);\n  z-index: 1;\n}\n";
 export { css_248z as default };
 //# sourceMappingURL=TabActivationIndicator.css.js.map

package/dist-es/tabs/TabActivationIndicator.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { makePrefixer } from '@salt-ds/core';
-import { useRef } from 'react';
-import { useActivationIndicator } from './useActivationIndicator.js';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
+import { useRef } from 'react';
 import css_248z from './TabActivationIndicator.css.js';
+import { useActivationIndicator } from './useActivationIndicator.js';
 const withBaseName = makePrefixer("saltTabActivationIndicator");
 const TabActivationIndicator = ({

package/dist-es/tabs/TabActivationIndicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabActivationIndicator.js","sources":["../src/tabs/TabActivationIndicator.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { ~~useRef~~ } from \"~~react~~\";\n\nimport { ~~useActivationIndicator~~ } from \"~~./useActivationIndicator~~\";\n\nimport { ~~useComponentCssInjection~~ } from \"~~@salt-ds/styles~~\";\nimport { ~~useWindow }~~ from \"~~@salt-ds/window~~\";\n\nimport ~~tabActivationIndicatorCss~~ from \"./~~TabActivationIndicator.css~~\";\n\ninterface TabActivationIndicatorProps {\n hideThumb?: boolean;\n orientation?: \"horizontal\" \| \"vertical\";\n disableAnimation?: boolean;\n tabId?: string \| null;\n}\n\nconst withBaseName = makePrefixer(\"saltTabActivationIndicator\");\n\nexport const TabActivationIndicator = ({\n hideThumb = false,\n orientation = \"horizontal\",\n tabId,\n}: TabActivationIndicatorProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tab-activation-indicator\",\n css: tabActivationIndicatorCss,\n window: targetWindow,\n });\n\n const rootRef = useRef<HTMLDivElement \| null>(null);\n const style = useActivationIndicator({\n rootRef,\n tabId,\n orientation,\n });\n\n return (\n <div className={withBaseName()} ref={rootRef}>\n {hideThumb === false && tabId !== null ? (\n <div className={withBaseName(\"thumb\")} style={style} />\n ) : null}\n </div>\n );\n};\n"],"names":["tabActivationIndicatorCss"],"mappings":";;;;;;;;~~AAiBA~~,MAAM,YAAA,GAAe,aAAa,4BAA4B,CAAA;AAEvD,MAAM,yBAAyB,CAAC;AAAA,EACrC,SAAY,GAAA,KAAA;AAAA,EACZ,WAAc,GAAA,YAAA;AAAA,EACd;AACF,CAAmC,KAAA;AACjC,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,+BAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,OAAA,GAAU,OAA8B,IAAI,CAAA;AAClD,EAAA,MAAM,QAAQ,sBAAuB,CAAA;AAAA,IACnC,OAAA;AAAA,IACA,KAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,2BACG,KAAI,EAAA,EAAA,SAAA,EAAW,cAAgB,EAAA,GAAA,EAAK,SAClC,QAAc,EAAA,SAAA,KAAA,KAAA,IAAS,UAAU,IAChC,mBAAA,GAAA,CAAC,SAAI,SAAW,EAAA,YAAA,CAAa,OAAO,CAAG,EAAA,KAAA,EAAc,IACnD,IACN,EAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"TabActivationIndicator.js","sources":["../src/tabs/TabActivationIndicator.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useRef } from \"react\";\nimport tabActivationIndicatorCss from \"./TabActivationIndicator.css\";\nimport { useActivationIndicator } from \"./useActivationIndicator\";\n\ninterface TabActivationIndicatorProps {\n hideThumb?: boolean;\n orientation?: \"horizontal\" \| \"vertical\";\n disableAnimation?: boolean;\n tabId?: string \| null;\n}\n\nconst withBaseName = makePrefixer(\"saltTabActivationIndicator\");\n\nexport const TabActivationIndicator = ({\n hideThumb = false,\n orientation = \"horizontal\",\n tabId,\n}: TabActivationIndicatorProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tab-activation-indicator\",\n css: tabActivationIndicatorCss,\n window: targetWindow,\n });\n\n const rootRef = useRef<HTMLDivElement \| null>(null);\n const style = useActivationIndicator({\n rootRef,\n tabId,\n orientation,\n });\n\n return (\n <div className={withBaseName()} ref={rootRef}>\n {hideThumb === false && tabId !== null ? (\n <div className={withBaseName(\"thumb\")} style={style} />\n ) : null}\n </div>\n );\n};\n"],"names":["tabActivationIndicatorCss"],"mappings":";;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,4BAA4B,CAAA;AAEvD,MAAM,yBAAyB,CAAC;AAAA,EACrC,SAAY,GAAA,KAAA;AAAA,EACZ,WAAc,GAAA,YAAA;AAAA,EACd;AACF,CAAmC,KAAA;AACjC,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,+BAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,OAAA,GAAU,OAA8B,IAAI,CAAA;AAClD,EAAA,MAAM,QAAQ,sBAAuB,CAAA;AAAA,IACnC,OAAA;AAAA,IACA,KAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,2BACG,KAAI,EAAA,EAAA,SAAA,EAAW,cAAgB,EAAA,GAAA,EAAK,SAClC,QAAc,EAAA,SAAA,KAAA,KAAA,IAAS,UAAU,IAChC,mBAAA,GAAA,CAAC,SAAI,SAAW,EAAA,YAAA,CAAa,OAAO,CAAG,EAAA,KAAA,EAAc,IACnD,IACN,EAAA,CAAA;AAEJ;;;;"}

package/dist-es/tabs/TabPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabPanel.js","sources":["../src/tabs/TabPanel.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ForwardedRef, type HTMLAttributes, ~~forwardRef~~ } from \"react\";\n\nimport tabPanelCss from \"./TabPanel.css\";\n\nconst withBaseName = makePrefixer(\"saltTabPanel\");\n\nexport interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {\n enableClose?: boolean;\n label: string;\n}\n\nexport const TabPanel = forwardRef(function TabPanel(\n { children, className, enableClose, ...htmlAttributes }: TabPanelProps,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tab-panel\",\n css: tabPanelCss,\n window: targetWindow,\n });\n\n return (\n <div\n {...htmlAttributes}\n className={clsx(withBaseName(), className)}\n ref={forwardedRef}\n role=\"tabpanel\"\n tabIndex={0}\n >\n {children}\n </div>\n );\n});\n"],"names":["TabPanel","tabPanelCss"],"mappings":";;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA;AAOnC,MAAA,QAAA,GAAW,UAAW,CAAA,SAASA,SAC1C,CAAA,EAAE,QAAU,EAAA,SAAA,EAAW,WAAa,EAAA,GAAG,cAAe,EAAA,EACtD,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAK,EAAA,YAAA;AAAA,MACL,IAAK,EAAA,UAAA;AAAA,MACL,QAAU,EAAA,CAAA;AAAA,MAET;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"TabPanel.js","sources":["../src/tabs/TabPanel.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ForwardedRef, forwardRef, type HTMLAttributes } from \"react\";\n\nimport tabPanelCss from \"./TabPanel.css\";\n\nconst withBaseName = makePrefixer(\"saltTabPanel\");\n\nexport interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {\n enableClose?: boolean;\n label: string;\n}\n\nexport const TabPanel = forwardRef(function TabPanel(\n { children, className, enableClose, ...htmlAttributes }: TabPanelProps,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tab-panel\",\n css: tabPanelCss,\n window: targetWindow,\n });\n\n return (\n <div\n {...htmlAttributes}\n className={clsx(withBaseName(), className)}\n ref={forwardedRef}\n role=\"tabpanel\"\n tabIndex={0}\n >\n {children}\n </div>\n );\n});\n"],"names":["TabPanel","tabPanelCss"],"mappings":";;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA;AAOnC,MAAA,QAAA,GAAW,UAAW,CAAA,SAASA,SAC1C,CAAA,EAAE,QAAU,EAAA,SAAA,EAAW,WAAa,EAAA,GAAG,cAAe,EAAA,EACtD,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAK,EAAA,YAAA;AAAA,MACL,IAAK,EAAA,UAAA;AAAA,MACL,QAAU,EAAA,CAAA;AAAA,MAET;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist-es/tabs/Tabs.js CHANGED Viewed

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { makePrefixer } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
 import { forwardRef, useRef, useImperativeHandle, useCallback } from 'react';
+import css_248z from './Tabs.css.js';
 import { Tabstrip } from './Tabstrip.js';
 import { useTabs } from './useTabs.js';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import { useWindow } from '@salt-ds/window';
-import css_248z from './Tabs.css.js';
 const withBaseName = makePrefixer("saltTabs");
 const Tabs = forwardRef(function Tabs2({

package/dist-es/tabs/Tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.js","sources":["../src/tabs/Tabs.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n type ForwardedRef,\n forwardRef,\n useCallback,\n useImperativeHandle,\n useRef,\n} from \"react\";\nimport type { FocusAPI, TabstripProps } from \"./TabsTypes\";\nimport { Tabstrip } from \"./Tabstrip\";\nimport { useTabs } from \"./useTabs\";\n\~~nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport tabsCss from \"./Tabs.css\";\n\~~nconst withBaseName = makePrefixer(\"saltTabs\");\n\nexport type TabsProps = Omit<TabstripProps, \"defaultSource\">;\n\nexport const Tabs = forwardRef(function Tabs(\n {\n activeTabIndex: activeTabIndexProp,\n allowDragDrop,\n centered,\n children,\n className,\n defaultActiveTabIndex,\n editing,\n enableAddTab,\n enableCloseTab,\n enableRenameTab,\n onActiveChange: onActiveChangeProp,\n onAddTab,\n onCloseTab,\n onEnterEditMode,\n onExitEditMode,\n onMoveTab,\n overflowMenu,\n variant,\n ...htmlAttributes\n }: TabsProps,\n forwardedRef: ForwardedRef<FocusAPI>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tabs\",\n css: tabsCss,\n window: targetWindow,\n });\n\n const tabstripRef = useRef<HTMLDivElement>(null);\n useImperativeHandle(\n forwardedRef,\n () =>\n ({\n focus: () => tabstripRef.current?.focus(),\n }) as FocusAPI,\n [],\n );\n\n const { id, onActiveChange, activeTabIndex, tabPanel, tabs } = useTabs({\n activeTabIndex: activeTabIndexProp,\n children,\n defaultActiveTabIndex,\n onActiveChange: onActiveChangeProp,\n });\n\n const tabstripProps = {\n activeTabIndex,\n allowDragDrop,\n centered,\n editing,\n variant,\n enableAddTab,\n enableCloseTab,\n enableRenameTab,\n onAddTab,\n onCloseTab,\n onEnterEditMode,\n onExitEditMode,\n onMoveTab,\n overflowMenu,\n };\n const getTabPanelId = useCallback(\n (tabIndex: number) => {\n if (tabIndex === activeTabIndex) {\n return `${id}-${tabIndex}-panel`;\n }\n },\n [id, activeTabIndex],\n );\n\n // TODO need to inject aria-controls\n return (\n <div\n {...htmlAttributes}\n className={clsx(withBaseName(), className)}\n id={`${id}-tabs`}\n >\n <Tabstrip\n {...tabstripProps}\n id={id}\n onActiveChange={onActiveChange}\n ref={tabstripRef}\n source={tabs}\n />\n {tabPanel}\n </div>\n );\n});\n"],"names":["Tabs","tabsCss"],"mappings":";;;;;;;;;;~~AAkBA~~,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA;AAI/B,MAAA,IAAA,GAAO,UAAW,CAAA,SAASA,KACtC,CAAA;AAAA,EACE,cAAgB,EAAA,kBAAA;AAAA,EAChB,aAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,qBAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAgB,EAAA,kBAAA;AAAA,EAChB,QAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,OAAuB,IAAI,CAAA;AAC/C,EAAA,mBAAA;AAAA,IACE,YAAA;AAAA,IACA,OACG;AAAA,MACC,OAAO,MAAG;~~AA1DlB~~,QAAA,IAAA,EAAA;~~AA0DqB~~,QAAA,OAAA,CAAA,EAAA,GAAA,WAAA,CAAY,YAAZ,IAAqB,GAAA,MAAA,GAAA,EAAA,CAAA,KAAA,EAAA;AAAA;AAAA,KACpC,CAAA;AAAA,IACF;AAAC,GACH;AAEA,EAAA,MAAM,EAAE,EAAI,EAAA,cAAA,EAAgB,gBAAgB,QAAU,EAAA,IAAA,KAAS,OAAQ,CAAA;AAAA,IACrE,cAAgB,EAAA,kBAAA;AAAA,IAChB,QAAA;AAAA,IACA,qBAAA;AAAA,IACA,cAAgB,EAAA;AAAA,GACjB,CAAA;AAED,EAAA,MAAM,aAAgB,GAAA;AAAA,IACpB,cAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,eAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACF;AACA,EAAsB,WAAA;AAAA,IACpB,CAAC,QAAqB,KAAA;AACpB,MAAA,IAAI,aAAa,cAAgB,EAAA;AAC/B,QAAO,OAAA,CAAA,EAAG,EAAE,CAAA,CAAA,EAAI,QAAQ,CAAA,MAAA,CAAA;AAAA;AAC1B,KACF;AAAA,IACA,CAAC,IAAI,cAAc;AAAA;AAIrB,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,EAAA,EAAI,GAAG,EAAE,CAAA,KAAA,CAAA;AAAA,MAET,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACE,GAAG,aAAA;AAAA,YACJ,EAAA;AAAA,YACA,cAAA;AAAA,YACA,GAAK,EAAA,WAAA;AAAA,YACL,MAAQ,EAAA;AAAA;AAAA,SACV;AAAA,QACC;AAAA;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"Tabs.js","sources":["../src/tabs/Tabs.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ForwardedRef,\n forwardRef,\n useCallback,\n useImperativeHandle,\n useRef,\n} from \"react\";\nimport tabsCss from \"./Tabs.css\";\nimport type { FocusAPI, TabstripProps } from \"./TabsTypes\";\nimport { Tabstrip } from \"./Tabstrip\";\nimport { useTabs } from \"./useTabs\";\n\nconst withBaseName = makePrefixer(\"saltTabs\");\n\nexport type TabsProps = Omit<TabstripProps, \"defaultSource\">;\n\nexport const Tabs = forwardRef(function Tabs(\n {\n activeTabIndex: activeTabIndexProp,\n allowDragDrop,\n centered,\n children,\n className,\n defaultActiveTabIndex,\n editing,\n enableAddTab,\n enableCloseTab,\n enableRenameTab,\n onActiveChange: onActiveChangeProp,\n onAddTab,\n onCloseTab,\n onEnterEditMode,\n onExitEditMode,\n onMoveTab,\n overflowMenu,\n variant,\n ...htmlAttributes\n }: TabsProps,\n forwardedRef: ForwardedRef<FocusAPI>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tabs\",\n css: tabsCss,\n window: targetWindow,\n });\n\n const tabstripRef = useRef<HTMLDivElement>(null);\n useImperativeHandle(\n forwardedRef,\n () =>\n ({\n focus: () => tabstripRef.current?.focus(),\n }) as FocusAPI,\n [],\n );\n\n const { id, onActiveChange, activeTabIndex, tabPanel, tabs } = useTabs({\n activeTabIndex: activeTabIndexProp,\n children,\n defaultActiveTabIndex,\n onActiveChange: onActiveChangeProp,\n });\n\n const tabstripProps = {\n activeTabIndex,\n allowDragDrop,\n centered,\n editing,\n variant,\n enableAddTab,\n enableCloseTab,\n enableRenameTab,\n onAddTab,\n onCloseTab,\n onEnterEditMode,\n onExitEditMode,\n onMoveTab,\n overflowMenu,\n };\n const getTabPanelId = useCallback(\n (tabIndex: number) => {\n if (tabIndex === activeTabIndex) {\n return `${id}-${tabIndex}-panel`;\n }\n },\n [id, activeTabIndex],\n );\n\n // TODO need to inject aria-controls\n return (\n <div\n {...htmlAttributes}\n className={clsx(withBaseName(), className)}\n id={`${id}-tabs`}\n >\n <Tabstrip\n {...tabstripProps}\n id={id}\n onActiveChange={onActiveChange}\n ref={tabstripRef}\n source={tabs}\n />\n {tabPanel}\n </div>\n );\n});\n"],"names":["Tabs","tabsCss"],"mappings":";;;;;;;;;;AAgBA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA;AAI/B,MAAA,IAAA,GAAO,UAAW,CAAA,SAASA,KACtC,CAAA;AAAA,EACE,cAAgB,EAAA,kBAAA;AAAA,EAChB,aAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,qBAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAgB,EAAA,kBAAA;AAAA,EAChB,QAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,OAAuB,IAAI,CAAA;AAC/C,EAAA,mBAAA;AAAA,IACE,YAAA;AAAA,IACA,OACG;AAAA,MACC,OAAO,MAAG;AAxDlB,QAAA,IAAA,EAAA;AAwDqB,QAAA,OAAA,CAAA,EAAA,GAAA,WAAA,CAAY,YAAZ,IAAqB,GAAA,MAAA,GAAA,EAAA,CAAA,KAAA,EAAA;AAAA;AAAA,KACpC,CAAA;AAAA,IACF;AAAC,GACH;AAEA,EAAA,MAAM,EAAE,EAAI,EAAA,cAAA,EAAgB,gBAAgB,QAAU,EAAA,IAAA,KAAS,OAAQ,CAAA;AAAA,IACrE,cAAgB,EAAA,kBAAA;AAAA,IAChB,QAAA;AAAA,IACA,qBAAA;AAAA,IACA,cAAgB,EAAA;AAAA,GACjB,CAAA;AAED,EAAA,MAAM,aAAgB,GAAA;AAAA,IACpB,cAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,eAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACF;AACA,EAAsB,WAAA;AAAA,IACpB,CAAC,QAAqB,KAAA;AACpB,MAAA,IAAI,aAAa,cAAgB,EAAA;AAC/B,QAAO,OAAA,CAAA,EAAG,EAAE,CAAA,CAAA,EAAI,QAAQ,CAAA,MAAA,CAAA;AAAA;AAC1B,KACF;AAAA,IACA,CAAC,IAAI,cAAc;AAAA;AAIrB,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,EAAA,EAAI,GAAG,EAAE,CAAA,KAAA,CAAA;AAAA,MAET,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACE,GAAG,aAAA;AAAA,YACJ,EAAA;AAAA,YACA,cAAA;AAAA,YACA,GAAK,EAAA,WAAA;AAAA,YACL,MAAQ,EAAA;AAAA;AAAA,SACV;AAAA,QACC;AAAA;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}